:root {
  --night: #102b2c;
  --deep: #071b1c;
  --ink: #173c37;
  --paper: #f4edcf;
  --paper-dark: #ded1aa;
  --moon: #f6dc7e;
  --mint: #85d6b4;
  --moss: #3f745b;
  --berry: #b85e69;
  --blue: #78a9c5;
  --shadow: rgba(5, 21, 20, .55);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); color: var(--paper); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; }
body { min-height: 100dvh; overflow-x: hidden; overscroll-behavior: none; touch-action: manipulation; }
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--moon); outline-offset: 4px; }
[hidden] { display: none !important; }

.game-shell { min-height: 100dvh; position: relative; overflow: hidden; background: #0b2424; }
.game-shell::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23;
  background-image: radial-gradient(circle at 20% 15%, #82b998 0 1px, transparent 2px), radial-gradient(circle at 80% 62%, #e3d391 0 1px, transparent 2px);
  background-size: 53px 47px, 79px 61px;
}
.top-strip { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(12px, 3vw, 34px); border-bottom: 1px solid rgba(244,237,207,.16); background: rgba(5,24,24,.88); position: relative; z-index: 20; }
.site-link { color: #a8cdbb; text-decoration: none; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .16em; justify-self: start; }
.title-mark { font-size: 13px; letter-spacing: .12em; color: #ded8bd; }
.sound-button { justify-self: end; min-width: 76px; min-height: 38px; color: var(--paper); background: transparent; border: 1px solid #5b8070; cursor: pointer; }
.screen { min-height: calc(100dvh - 54px); position: relative; }

.start-screen { display: grid; grid-template-columns: minmax(390px, 1.15fr) minmax(340px, .85fr); align-items: center; max-width: 1220px; margin: 0 auto; padding: clamp(30px, 6vw, 86px); gap: clamp(28px, 6vw, 90px); }
.opening-copy { position: relative; z-index: 3; }
.eyebrow { margin: 0 0 15px; color: var(--mint); font: 800 11px/1.4 ui-monospace, monospace; letter-spacing: .2em; }
h1 { margin: 0; color: var(--paper); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(46px, 7vw, 91px); line-height: .98; font-weight: 700; letter-spacing: .02em; }
h1 span { display: inline-block; margin-left: .7em; color: var(--moon); }
.lead { max-width: 570px; margin: 28px 0 20px; font-size: clamp(15px, 1.8vw, 18px); line-height: 1.9; color: #d5ddc6; }
.quick-guide { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.quick-guide span { display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 7px; border-bottom: 1px solid #537968; color: #b8cbb9; font-size: 12px; }
.quick-guide b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--deep); background: var(--mint); font: 900 12px ui-monospace, monospace; }
.enter-button { min-width: 250px; min-height: 68px; padding: 11px 30px; border: 0; color: #18352f; background: var(--moon); cursor: pointer; box-shadow: 7px 8px 0 #315b4b; clip-path: polygon(0 9px, 9px 9px, 9px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: transform .16s ease, box-shadow .16s ease; }
.enter-button:hover { transform: translate(2px,2px); box-shadow: 4px 5px 0 #315b4b; }
.enter-button span { display: block; font-weight: 900; font-size: 20px; }
.enter-button small { display: block; margin-top: 3px; font-size: 11px; }
.enter-button.compact { min-width: 220px; min-height: 60px; }
.privacy-note { color: #789a87; font-size: 11px; margin-top: 18px; }

.forest-poster { min-height: 590px; position: relative; isolation: isolate; filter: drop-shadow(0 30px 28px rgba(0,0,0,.25)); }
.forest-poster::before { content: ""; position: absolute; inset: 9% 2% 5%; background: #173e39; border-radius: 48% 52% 16% 18% / 18% 22% 7% 8%; clip-path: polygon(7% 0, 95% 5%, 100% 86%, 84% 100%, 4% 94%, 0 15%); box-shadow: inset 0 0 70px #071b1c; }
.moon { position: absolute; z-index: 1; width: 210px; height: 210px; border-radius: 50%; right: 7%; top: 9%; background: var(--moon); box-shadow: 0 0 60px rgba(246,220,126,.25); }
.moon::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; left: -42px; top: -15px; background: #173e39; }
.tree { position: absolute; z-index: 4; bottom: 2%; width: 24%; height: 67%; background: #0a2524; clip-path: polygon(43% 0, 62% 2%, 58% 19%, 76% 28%, 62% 35%, 89% 48%, 64% 52%, 100% 72%, 58% 68%, 56% 100%, 39% 100%, 42% 68%, 0 83%, 31% 56%, 8% 52%, 37% 36%, 19% 30%, 43% 19%); }
.tree-a { left: -3%; transform: scale(1.13); }.tree-b { right: 2%; height: 53%; }.tree-c { left: 28%; height: 40%; opacity: .72; }
.light-cone { position: absolute; z-index: 3; left: 38%; bottom: 26%; width: 50%; height: 12%; background: rgba(248,226,138,.72); transform-origin: 0 50%; transform: rotate(-48deg); clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); filter: blur(1px); }
.lumen { position: absolute; z-index: 6; left: 31%; bottom: 21%; width: 68px; height: 68px; border-radius: 54% 46% 52% 48%; background: var(--moon); box-shadow: 0 0 34px var(--moon); }
.lumen::before, .lumen::after { content: ""; position: absolute; top: 11px; width: 32px; height: 43px; border: 2px solid rgba(244,237,207,.75); border-radius: 50%; background: rgba(133,214,180,.22); }
.lumen::before { left: -25px; transform: rotate(-25deg); }.lumen::after { right: -25px; transform: rotate(25deg); }
.lumen i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); left: 20px; top: 24px; box-shadow: 23px 0 var(--ink); }
.angle-mark { position: absolute; z-index: 7; left: 32%; bottom: 20%; width: 150px; height: 150px; border: 2px dashed rgba(244,237,207,.58); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-45deg); }
.angle-mark b { position: absolute; right: -7px; top: 11px; transform: rotate(45deg); color: var(--paper); font: 800 21px ui-monospace, monospace; }

.play-screen { padding: 0; }
.forest-hud { min-height: 66px; position: absolute; z-index: 10; left: clamp(8px,2vw,24px); right: clamp(8px,2vw,24px); top: 10px; display: grid; grid-template-columns: 88px 110px 105px 1fr; align-items: stretch; color: var(--paper); background: rgba(7,27,28,.82); border: 1px solid rgba(244,237,207,.22); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.forest-hud > div { padding: 9px 13px; border-right: 1px solid rgba(244,237,207,.16); }
.forest-hud small { display: block; color: #8fb39e; font-size: 10px; }
.forest-hud strong { font: 800 21px ui-monospace, monospace; color: var(--moon); }
.forest-hud p { margin: 0; padding: 0 17px; align-self: center; color: #d8dfc8; font-size: 13px; text-align: right; }
.world-frame { position: relative; height: calc(100dvh - 54px); min-height: 610px; overflow: hidden; background: #153f39; }
#worldCanvas { position: absolute; left: 50%; top: 50%; display: block; width: min(100%, calc((100dvh - 54px) * 1.333333)); height: auto; aspect-ratio: 4 / 3; transform: translate(-50%,-50%); touch-action: none; cursor: crosshair; }
.paper-grain { position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px 5px); mix-blend-mode: overlay; }
.map-prompt { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 10px #071b1c; }
.map-prompt small { display: block; color: var(--mint); font-size: 11px; letter-spacing: .15em; }
.map-prompt strong { display: block; margin-top: 5px; font: 700 clamp(21px,4vw,34px) "Yu Mincho", serif; }
.path-choices { position: absolute; z-index: 4; left: 50%; bottom: clamp(20px,5vh,50px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(2,minmax(170px,230px)); gap: 12px; width: min(500px, calc(100% - 24px)); }
.path-choice { min-height: 72px; padding: 10px 14px; border: 1px solid #91c6a8; border-radius: 50% 12px 50% 12px / 18px 45% 18px 45%; color: var(--paper); background: rgba(12,48,43,.9); box-shadow: 0 0 22px rgba(133,214,180,.16); cursor: pointer; }
.path-choice:hover { background: #286450; transform: translateY(-2px); }
.path-choice small { display: block; color: var(--mint); font-size: 10px; }.path-choice strong { display: block; font-size: 15px; margin-top: 3px; }

.angle-tools { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.mission-scroll { position: absolute; left: clamp(12px,3vw,34px); top: 94px; width: min(340px, calc(100% - 24px)); padding: 14px 18px 14px 23px; color: var(--ink); background: var(--paper); box-shadow: 8px 10px 0 rgba(11,42,39,.35); clip-path: polygon(0 0,94% 0,100% 18%,98% 87%,88% 100%,0 95%,3% 51%); }
.mission-scroll span { display: block; color: #5b7d69; font: 800 10px ui-monospace, monospace; letter-spacing: .12em; }
.mission-scroll strong { display: block; margin-top: 4px; font-size: clamp(17px,2.3vw,24px); line-height: 1.4; }
.mission-scroll p { margin: 5px 0 0; color: #52675d; font-size: 11px; line-height: 1.5; }
.degree-readout { position: absolute; right: clamp(15px,4vw,54px); top: 100px; color: var(--moon); font: 900 clamp(40px,8vw,74px)/1 ui-monospace, monospace; text-shadow: 0 3px 16px var(--deep); }
.degree-readout sup { font-size: .42em; }
.fine-controls { position: absolute; pointer-events: auto; left: 50%; bottom: max(23px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: 64px minmax(185px,270px) 64px; gap: 8px; width: min(430px, calc(100% - 22px)); }
.fine-controls button { min-height: 56px; border: 1px solid #91c6a8; color: var(--paper); background: rgba(7,31,29,.94); cursor: pointer; }
.fine-controls .cast-button { color: #17382f; background: var(--moon); border-color: var(--moon); font-weight: 900; }
.keyboard-note { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 10px; color: #91aa9b; }

.feedback-banner { position: fixed; z-index: 35; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(680px, calc(100% - 24px)); display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 15px 17px; color: #19362e; background: var(--paper); box-shadow: 0 18px 60px rgba(0,0,0,.42); border-left: 7px solid var(--mint); }
.feedback-banner.miss { border-left-color: var(--berry); }
.feedback-symbol { width: 50px; height: 50px; display: grid; place-items: center; border: 3px double var(--moss); border-radius: 50%; font-size: 26px; }
.feedback-banner strong { font-size: 18px; }.feedback-banner p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.feedback-banner button { min-height: 44px; padding: 0 15px; border: 0; color: var(--paper); background: var(--moss); cursor: pointer; font-weight: 800; }

.overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,20,20,.82); }
.quiz-sheet { width: min(650px,100%); max-height: calc(100dvh - 36px); overflow-y: auto; padding: clamp(22px,4vw,38px); color: var(--ink); background: var(--paper); clip-path: polygon(0 12px,12px 12px,12px 0,96% 0,100% 7%,100% 94%,96% 100%,4% 100%,0 94%); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.quiz-kicker { margin: 0; color: #61816c; font: 800 10px ui-monospace, monospace; letter-spacing: .18em; }
.quiz-sheet h2 { margin: 10px 0 17px; font: 700 clamp(21px,4vw,30px)/1.5 "Yu Mincho", serif; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quiz-choices button { min-height: 58px; padding: 11px 14px; text-align: left; border: 1px solid #7c9b86; color: var(--ink); background: rgba(255,255,255,.25); cursor: pointer; }
.quiz-choices button.correct { border: 3px solid #3d7859; background: #cae8d1; }.quiz-choices button.wrong { border: 3px solid #a64f59; background: #ecc7c3; }
.quiz-explanation { padding: 13px 15px; border-left: 4px solid #668c76; background: #e7dfc0; line-height: 1.7; font-size: 13px; }
.quiz-next { min-height: 50px; width: 100%; border: 0; color: var(--paper); background: #35624e; font-weight: 900; cursor: pointer; }

.result-screen { display: grid; grid-template-columns: minmax(340px,.85fr) minmax(400px,1.15fr); gap: clamp(28px,7vw,100px); align-items: center; max-width: 1180px; margin: auto; padding: clamp(28px,6vw,72px); }
.result-illustration { min-height: 520px; position: relative; display: grid; place-items: center; }
.result-moon { width: 260px; height: 260px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 80px rgba(246,220,126,.25); }
.ray-fan { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: repeating-conic-gradient(from -90deg, transparent 0 13deg, rgba(133,214,180,.16) 13deg 15deg); clip-path: polygon(50% 50%,100% 0,100% 100%); }
.drop-ring { position: absolute; width: 340px; height: 340px; }
.drop-ring i { position: absolute; left: 50%; top: 50%; width: 24px; height: 34px; margin: -17px -12px; border-radius: 55% 45% 58% 42%; background: var(--tone); box-shadow: 0 0 16px var(--tone); transform: rotate(var(--turn)) translateY(-160px); }
.result-copy h2 { margin: 0; font: 700 clamp(37px,6vw,65px)/1.12 "Yu Mincho", serif; color: var(--paper); }
.result-copy > p:not(.eyebrow) { color: #bdd0bd; line-height: 1.8; }
.result-score { display: flex; align-items: baseline; gap: 10px; margin: 24px 0; padding: 12px 0 13px; border-block: 1px solid rgba(244,237,207,.2); }
.result-score small { color: #91aa98; }.result-score strong { font: 900 clamp(46px,7vw,78px)/1 ui-monospace, monospace; color: var(--moon); }.result-score span { color: var(--mint); font-weight: 900; }
.result-details { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; }
.result-details div { padding: 10px 12px; border-left: 2px solid #4c7562; }.result-details dt { color: #8dac9a; font-size: 10px; }.result-details dd { margin: 4px 0 0; color: var(--paper); font: 800 20px ui-monospace, monospace; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.outline-button { min-height: 58px; padding: 0 20px; border: 1px solid var(--mint); color: var(--paper); background: transparent; cursor: pointer; }
.ranking-panel { margin-top: 15px; padding: 13px; color: #1a302c; background: #fff; border-radius: 2px; }
.particle-layer { position: fixed; z-index: 80; inset: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 9px; height: 15px; border-radius: 60% 40% 60% 40%; background: var(--tone); animation: leafBurst .9s ease-out forwards; }
.score-pop { position: fixed; z-index: 85; color: var(--moon); font: 900 25px ui-monospace, monospace; text-shadow: 0 3px 8px #071b1c; animation: scoreRise .9s ease-out forwards; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes leafBurst { to { transform: translate(var(--dx),var(--dy)) rotate(220deg); opacity: 0; } }
@keyframes scoreRise { to { transform: translateY(-70px); opacity: 0; } }
@keyframes glowPulse { 50% { opacity: .55; transform: scale(.96); } }

@media (max-width: 800px) {
  .start-screen, .result-screen { grid-template-columns: 1fr; }
  .forest-poster { min-height: 390px; order: -1; }
  .opening-copy { text-align: center; }.lead { margin-inline: auto; }.quick-guide { justify-content: center; }
  .result-illustration { min-height: 300px; }.result-moon { width: 190px; height: 190px; }.ray-fan { width: 300px; height: 300px; }.drop-ring { transform: scale(.72); }
}
@media (max-width: 590px) {
  .top-strip { grid-template-columns: 1fr auto; height: 50px; }.title-mark { display: none; }
  .screen { min-height: calc(100dvh - 50px); }
  .start-screen { padding: 18px 16px 34px; gap: 8px; }.forest-poster { min-height: 300px; margin-inline: -10px; }.moon { width: 130px; height: 130px; }.moon::after { width: 120px; height: 120px; }.lumen { transform: scale(.75); }
  h1 { font-size: 47px; }.lead { margin-block: 18px 14px; line-height: 1.65; }.quick-guide span { font-size: 10px; }.enter-button { width: calc(100% - 10px); }
  .world-frame { min-height: 560px; height: calc(100dvh - 50px); }
  #worldCanvas { width: min(100%, calc((100dvh - 50px) * 1.333333)); }
  .forest-hud { top: 7px; grid-template-columns: repeat(3,1fr); }.forest-hud > div { padding: 7px 8px; }.forest-hud strong { font-size: 17px; }.forest-hud p { grid-column: 1/-1; text-align: center; padding: 5px; border-top: 1px solid rgba(244,237,207,.15); font-size: 11px; }
  .map-prompt { top: 18%; width: 90%; }.path-choices { grid-template-columns: 1fr 1fr; bottom: 15px; }.path-choice { min-width: 0; padding-inline: 8px; }
  .mission-scroll { top: 88px; width: calc(100% - 86px); padding: 10px 12px 10px 17px; }.mission-scroll strong { font-size: 15px; }.mission-scroll p { display: none; }
  .degree-readout { top: 96px; right: 10px; font-size: 34px; }
  .keyboard-note { display: none; }.fine-controls { bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: 54px 1fr 54px; }
  .feedback-banner { bottom: 10px; grid-template-columns: 45px 1fr; }.feedback-symbol { width: 42px; height: 42px; }.feedback-banner button { grid-column: 1/-1; width: 100%; }
  .quiz-choices { grid-template-columns: 1fr; }.quiz-sheet { padding: 20px 17px; }
  .result-screen { padding: 18px 15px 35px; }.result-illustration { min-height: 230px; }.result-details { grid-template-columns: 1fr 1fr 1fr; }.result-details div { padding-inline: 7px; }.result-details dd { font-size: 16px; }.result-actions > * { width: 100%; }
}
@media (max-height: 650px) and (orientation: landscape) {
  .forest-hud { min-height: 54px; }.world-frame { min-height: 520px; }.mission-scroll { top: 76px; }.degree-readout { top: 82px; }.fine-controls { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}