:root {
  color-scheme: dark;
  --night: #081426;
  --deep: #101a38;
  --ink: #f6f1cf;
  --muted: #b8c7d9;
  --glow: #edff74;
  --aqua: #5df0d5;
  --violet: #a88bff;
  --danger: #ff957d;
  --line: #486080;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; width: 100%; min-width: 320px; min-height: 100%; background: #030a15; }
body { overflow: hidden; color: var(--ink); }
button { font: inherit; }

#app {
  position: relative;
  width: min(100%, 760px);
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 10%, rgba(237,255,116,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 11% 31%, rgba(93,240,213,.15) 0 1px, transparent 2px),
    linear-gradient(178deg, #0b1731 0%, #071221 58%, #102637 100%);
  border-inline: 1px solid #1b3150;
}

.topbar {
  height: calc(46px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #304968;
  background: rgba(4, 12, 26, .92);
}

.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 13px var(--glow); }
.icon-button { min-width: 70px; min-height: 44px; padding: 0 12px; border: 1px solid #6585a7; border-radius: 4px; color: var(--ink); background: #14243c; font-weight: 800; }

.screen {
  height: calc(100% - 46px - env(safe-area-inset-top));
  min-height: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.start-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; text-align: center; }
.night-title { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.eyebrow { margin: 0 0 6px; color: var(--aqua); font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.night-title h1 { margin: 0; font-size: clamp(38px, 11vw, 64px); line-height: .98; letter-spacing: .02em; text-align: left; text-shadow: 0 3px 0 #182244; }
.night-title h1 span { color: var(--glow); margin-left: .7em; text-shadow: 0 0 22px rgba(237,255,116,.36); }
.start-copy { max-width: 440px; margin: 8px 0 0; color: #dce8ec; font-size: 16px; line-height: 1.5; }

.start-fireflies { width: min(90%, 410px); height: 76px; margin: 10px auto 2px; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 18px); position: relative; border-bottom: 2px solid #2e4a5e; }
.start-fireflies::after { content: ""; position: absolute; inset: auto 8% -8px; height: 14px; border-radius: 50%; background: #152b3a; }
.start-fireflies i { position: relative; z-index: 1; width: 24px; height: 24px; border: 3px solid #fff9b0; border-radius: 50% 50% 46% 46%; background: var(--glow); box-shadow: 0 0 15px var(--glow); }
.start-fireflies i::before, .start-fireflies i::after { content: ""; position: absolute; top: -5px; width: 12px; height: 17px; border: 2px solid var(--aqua); border-radius: 70% 20%; background: #17384b; }
.start-fireflies i::before { right: 15px; transform: rotate(24deg); }
.start-fireflies i::after { left: 15px; transform: rotate(-24deg) scaleX(-1); }
.start-fireflies i:nth-of-type(n+4) { opacity: .26; filter: grayscale(.6); box-shadow: none; }
.start-fireflies b { color: var(--danger); font-size: 22px; }

.start-actions { display: grid; gap: 5px; justify-items: center; }
.primary-button { min-height: 48px; min-width: min(280px, 88vw); border: 2px solid #17243b; border-radius: 7px; color: #081426; background: var(--glow); box-shadow: 0 5px 0 #7c8c34; font-size: 18px; font-weight: 900; letter-spacing: .04em; }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #7c8c34; }
.primary-button.compact { min-width: 190px; min-height: 44px; font-size: 16px; }
.text-button { min-width: 150px; min-height: 44px; border: 0; color: var(--aqua); background: transparent; text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
#bestStart { min-height: 20px; color: var(--muted); font-size: 14px; }

.game-screen {
  display: grid;
  grid-template-rows: 44px 32px minmax(190px, 1fr) 36px 48px;
  gap: 6px;
}
.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-block: 1px solid #426080; background: #0b1930; }
.hud > div { min-width: 0; text-align: center; }
.hud > div:first-child { text-align: left; padding-left: 8px; }
.hud > div:last-child { text-align: right; padding-right: 8px; }
.hud small { display: block; color: var(--muted); font-size: 14px; line-height: 1; }
.hud strong { font-size: 16px; }
.hud .equation { display: flex; gap: 6px; align-items: center; color: #fff; font-size: 20px; font-weight: 900; }
.equation span { min-width: 28px; padding: 2px 5px; border: 1px solid #6d85a0; background: #182b46; }
.equation span:last-child { color: var(--glow); border-color: var(--glow); }
.danger-banner { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 3px 8px; border-left: 5px solid var(--aqua); color: #dcebed; background: #12283a; font-size: 14px; font-weight: 800; text-align: center; overflow: hidden; }
.danger-banner.danger { border-left-color: var(--danger); color: #fff1c4; background: #3c2130; }

.game-field {
  position: relative;
  min-width: 0;
  min-height: 190px;
  overflow: hidden;
  border: 2px solid #2e5370;
  border-radius: 8px 8px 26px 26px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(88,139,149,.11) 50%, transparent 51%),
    linear-gradient(#0a1929 0 76%, #142f32 76% 100%);
  touch-action: none;
  user-select: none;
}
.game-field::before { content: ""; position: absolute; left: 0; right: 0; bottom: 16%; height: 10%; background: repeating-linear-gradient(95deg, #173e39 0 8px, #235047 8px 11px); opacity: .8; }
.moon { position: absolute; width: 54px; height: 54px; right: 12px; top: 9px; border: 3px solid #f1efbc; border-radius: 50%; box-shadow: 0 0 24px rgba(237,255,116,.28); }
.moon::after { content: ""; position: absolute; width: 48px; height: 48px; left: 15px; top: -7px; border-radius: 50%; background: #0a1929; }
.owl-shadow { position: absolute; left: 12px; top: 8px; width: 48px; height: 32px; border-radius: 50% 50% 20% 20%; background: #2b264b; border: 2px solid var(--violet); opacity: .55; }
.owl-shadow::before, .owl-shadow::after { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.owl-shadow::before { left: 10px; }.owl-shadow::after { right: 10px; }
.owl-shadow span::before, .owl-shadow span::after { content: ""; position: absolute; top: -8px; border: 8px solid transparent; border-bottom-color: var(--violet); }
.owl-shadow span::before { left: 2px; transform: rotate(-18deg); }.owl-shadow span::after { right: 2px; transform: rotate(18deg); }

.firefly-board {
  position: absolute;
  z-index: 3;
  width: min(68vw, 268px);
  height: min(68vw, 268px);
  max-height: calc(100% - 24px);
  max-width: calc(100% - 64px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 5px;
}
.firefly-cell { position: relative; min-width: 44px; min-height: 44px; padding: 0; border: 1px dashed rgba(77,118,143,.32); border-radius: 50%; color: var(--ink); background: rgba(8,24,39,.45); }
.firefly-cell.active { border: 2px solid #51869b; background: #102d3b; cursor: crosshair; }
.firefly-cell.active::before { content: ""; position: absolute; width: 19px; height: 24px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 52% 52% 45% 45%; background: var(--glow); border: 3px solid #fff8a1; box-shadow: 0 0 14px var(--glow); }
.firefly-cell.active::after { content: ""; position: absolute; width: 40px; height: 22px; left: 50%; top: 46%; transform: translate(-50%, -50%); border: 2px solid var(--aqua); border-radius: 50%; }
.firefly-cell.entry { border-style: solid; border-color: #fff; }
.firefly-cell.entry span::before { content: "▲"; position: absolute; z-index: 2; left: 2px; top: -8px; color: #fff; font-size: 14px; transform: rotate(90deg); }
.firefly-cell.bonus span::after { content: "💧"; position: absolute; z-index: 2; right: -4px; bottom: -4px; font-size: 17px; filter: drop-shadow(0 0 4px #54e4ff); }
.firefly-cell.warning { background: repeating-linear-gradient(135deg, #2f2649 0 7px, #17293d 7px 14px); border-color: var(--danger); animation: warningPulse 1.2s ease-in-out infinite; }
.firefly-cell.shadowed { border: 3px solid #9984ca; background: #27243d; }
.firefly-cell.shadowed::before, .firefly-cell.shadowed::after { opacity: .18; box-shadow: none; }
.firefly-cell.shadowed span::after { content: "影"; position: absolute; z-index: 4; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: #fff; font-size: 15px; font-weight: 900; }
.firefly-cell.selected { border-color: #fff; background: #234d50; transform: scale(1.06); }
.firefly-cell.selected::before { background: #fff; box-shadow: 0 0 21px 8px rgba(237,255,116,.52); }
.firefly-cell.hidden-firefly { animation: flyToNest .7s ease-in forwards; }
.firefly-cell.remaining-firefly { animation: releaseGlow .7s ease-out both; }
.firefly-cell.over-limit { border-color: var(--danger); background: #572b37; }

.trail-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.nest { position: absolute; z-index: 4; right: 5px; bottom: 7px; width: 52px; height: 43px; border: 3px solid #8d6844; border-bottom: 0; border-radius: 50% 50% 10% 10%; background: #2b1b18; text-align: center; }
.nest span { position: absolute; bottom: -1px; left: 0; right: 0; color: #e8c694; font-size: 14px; font-weight: 900; }
.path-counter { position: absolute; z-index: 5; left: 7px; bottom: 6px; min-width: 92px; padding: 5px 7px; border: 1px solid #6085a2; background: #071326; font-size: 14px; font-weight: 800; text-align: center; }
.path-counter strong { color: var(--glow); font-size: 18px; }

.action-hint { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 7px; color: #dce9e9; font-size: 14px; font-weight: 700; text-align: center; overflow: hidden; }
.game-controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; }
.game-controls button { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid #6a88a6; border-radius: 5px; color: var(--ink); background: #142a42; font-size: 14px; font-weight: 900; }
.game-controls .commit-button { color: #071326; border-color: var(--glow); background: var(--glow); }
.game-controls .commit-button:disabled { color: #9ba5a7; border-color: #53606e; background: #263440; }

.quiz-screen { position: relative; display: grid; grid-template-rows: auto auto minmax(176px, 1fr) minmax(58px, auto) auto; gap: 7px; align-content: center; text-align: center; }
.quiz-screen h2 { position: relative; margin: 0; font-size: clamp(20px, 6vw, 28px); line-height: 1.35; }
.quiz-moon { position: absolute; width: 140px; height: 140px; left: -50px; top: 6%; border: 2px solid rgba(237,255,116,.26); border-radius: 50%; }
.quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center; }
.quiz-choice { min-height: 54px; min-width: 0; padding: 7px; border: 2px solid #577796; border-radius: 6px; color: #fff; background: #132b45; font-size: 17px; font-weight: 900; overflow-wrap: anywhere; }
.quiz-choice.correct { border-color: var(--glow); background: #2b4a2b; }
.quiz-choice.wrong { border-color: var(--danger); background: #4b2934; }
.quiz-feedback { min-height: 58px; margin: 0; padding: 7px 9px; border-left: 5px solid var(--aqua); background: #11263a; font-size: 15px; line-height: 1.45; text-align: left; }

.result-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.result-glow { width: 76px; height: 76px; display: grid; place-items: center; border: 3px solid var(--glow); border-radius: 50%; box-shadow: 0 0 28px rgba(237,255,116,.35); }
.result-glow span { color: var(--glow); font-size: 39px; }
.result-screen h2 { margin: 0; font-size: clamp(28px, 8vw, 42px); line-height: 1.12; }
.score-plaque { min-width: 180px; padding: 5px 20px; border-block: 2px solid var(--aqua); }
.score-plaque small { display: block; color: var(--muted); font-size: 14px; }
.score-plaque strong { color: var(--glow); font-size: 31px; }
#bestResult, #resultSummary { margin: 0; font-size: 15px; }
#resultSummary { max-width: 520px; color: #d8e4e6; }
.result-actions { display: grid; gap: 3px; justify-items: center; }

.overlay, .ranking-drawer { position: absolute; z-index: 30; inset: calc(5px + env(safe-area-inset-top)) 5px calc(5px + env(safe-area-inset-bottom)); display: grid; place-items: center; padding: 8px; background: rgba(2, 8, 18, .93); }
.overlay-card { width: min(100%, 520px); max-height: 100%; overflow-y: auto; padding: 15px; border: 2px solid var(--aqua); background: #0b1a2f; }
.overlay-card h2 { margin: 0 0 8px; font-size: 25px; }
.overlay-card ol { margin: 0; padding-left: 1.5em; font-size: 16px; line-height: 1.7; text-align: left; }
.overlay-card p { font-size: 15px; line-height: 1.55; text-align: left; }
.ranking-drawer { display: block; overflow-y: auto; color: #f8f2d5; background: #071425; border: 2px solid #5fb8b0; }
.drawer-close { position: sticky; z-index: 2; top: 0; float: right; min-width: 76px; min-height: 44px; border: 1px solid var(--aqua); color: #fff; background: #193348; }
#rankingPanel { clear: both; padding: 4px; color: #f8f2d5; }
#rankingPanel .itc-ranking__tabs button { min-height: 44px; color: #f8f2d5; }
#rankingPanel .itc-ranking__tabs button[aria-pressed="true"] { color: #081426; background: var(--glow); }

.toast { position: absolute; z-index: 40; left: 50%; bottom: calc(62px + env(safe-area-inset-bottom)); width: min(90%, 420px); padding: 9px 12px; transform: translate(-50%, 20px); border: 2px solid var(--glow); color: #081426; background: #f5f1ba; font-size: 14px; font-weight: 900; text-align: center; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes warningPulse { 50% { box-shadow: inset 0 0 0 4px rgba(255,149,125,.25), 0 0 9px rgba(255,149,125,.35); } }
@keyframes flyToNest { to { transform: translate(170px, 90px) scale(.15); opacity: 0; } }
@keyframes releaseGlow { 45% { transform: scale(1.15); filter: brightness(1.7); } }

@media (min-width: 700px) {
  .screen { padding-inline: 28px; }
  .game-screen { grid-template-rows: 50px 36px minmax(280px, 1fr) 40px 52px; }
  .firefly-board { width: 300px; height: 300px; }
  .game-controls button { font-size: 16px; }
}

@media (max-width: 360px), (max-height: 590px) {
  .screen { padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); }
  .game-screen { grid-template-rows: 42px 30px minmax(190px, 1fr) 33px 46px; gap: 4px; }
  .danger-banner, .action-hint, .game-controls button { font-size: 14px; }
  .firefly-board { width: min(66vw, 232px); height: min(66vw, 232px); gap: 4px; }
  .start-fireflies { height: 65px; margin-block: 5px 0; }
  .night-title h1 { font-size: 39px; }
  .start-copy { margin-top: 4px; }
  .quiz-screen { grid-template-rows: auto auto minmax(170px, 1fr) minmax(54px, auto) auto; gap: 4px; }
  .quiz-choice { min-height: 48px; padding: 5px; font-size: 16px; }
  .quiz-feedback { min-height: 54px; padding: 5px 7px; font-size: 14px; }
  .result-glow { width: 62px; height: 62px; }
  .result-screen { gap: 5px; }
}

@media (max-height: 520px) {
  body { overflow: auto; }
  #app { min-height: 520px; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}