@import url('./field-notebook.css');
/* Local OFL fonts. Artwork supplies the world; CSS frames its controls. */
@font-face{font-family:Jua;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/jua-korean-400.woff2') format('woff2');unicode-range:U+1100-11FF,U+3000-303F,U+3130-318F,U+AC00-D7AF,U+FF00-FFEF}
@font-face{font-family:Jua;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/jua-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* Primitive → semantic → component tokens; palette from forest artwork. */
  --forest-900:#1e4337;--forest-700:#35634b;--forest-100:#e0ead9;
  --cream-50:#fffbed;--cream-100:#f5edcf;--brass-400:#dfbb64;--brass-700:#9b7336;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;
  --color-bg:var(--forest-900);--color-surface:var(--cream-50);--color-surface-glass:#fffbeded;
  --color-primary:var(--forest-700);--color-primary-soft:var(--forest-100);--color-secondary:var(--brass-700);
  --color-accent:var(--brass-400);--color-text-main:var(--forest-900);--color-text-sub:#58664f;
  --color-border-soft:#c8bd94;--color-correct:var(--forest-700);--color-danger:#9b4638;
  --font-display:Jua,'Malgun Gothic',sans-serif;--font-body:Jua,'Malgun Gothic',sans-serif;
  --font-size-xs:clamp(16px,1.25vw,19px);--font-size-sm:clamp(20px,1.7vw,26px);
  --font-size-md:clamp(22px,1.85vw,28px);--font-size-lg:clamp(30px,2.7vw,44px);
  --font-hand:'Research Hand',var(--font-body);--font-size-subhead:clamp(26px,2.2vw,34px);--font-size-hand:clamp(28px,3.2vw,38px);
  --field-body-min:20;--field-caption-min:16;--field-touch-min:48;
  --line-height-tight:1.2;--line-height-normal:1.4;
  --radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-pill:999px;
  --button-height-md:52px;--button-height-lg:60px;--button-gap:var(--space-md);--icon-size:52px;
  --button-edge:#a59870;--shadow-card:0 8px 24px #172e3124;--shadow-popover:0 24px 80px #122b3a55;
  --screen-inset:var(--space-lg);--question-top:88px;--controls-bottom:var(--space-lg);--modal-max-width:900px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--font-body);font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--color-text-main);background:var(--color-bg);word-break:keep-all;overflow-wrap:break-word;line-break:strict}
button,input,textarea,select{font:inherit;color:inherit}
button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-width:var(--button-height-md);min-height:var(--button-height-md);padding:var(--space-sm) var(--space-lg);border:2px solid var(--color-border-soft);border-radius:var(--radius-md);background:linear-gradient(var(--cream-50),var(--cream-100));box-shadow:0 4px 0 var(--button-edge),inset 0 1px 0 #fff;cursor:pointer;font-family:var(--font-display);font-weight:400;font-size:var(--font-size-sm);line-height:var(--line-height-tight);text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}
button:hover:not(:disabled){transform:translateY(-2px);background:var(--cream-50)}
button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--button-edge)}
button:disabled{cursor:default;filter:saturate(.35);opacity:.62;box-shadow:0 2px 0 var(--button-edge)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid var(--color-accent);outline-offset:4px}
button.primary,button.on,button[aria-pressed=true]:not(.sound-switch){color:var(--cream-50);background:linear-gradient(#4a7859,var(--color-primary));border-color:var(--forest-900);--button-edge:var(--forest-900)}
button.primary:hover:not(:disabled),button.on:hover:not(:disabled){background:#477855}
button.gold{background:linear-gradient(#f5dda2,var(--color-accent));border-color:var(--brass-700);--button-edge:var(--brass-700)}
button.danger{color:var(--cream-50);background:var(--color-danger);border-color:#743227;--button-edge:#743227}
button.quiet-button{background:transparent;box-shadow:none;border-color:transparent;color:var(--color-text-sub)}
button svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr-only,#status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app{--stage-min-height:420px;position:relative;display:grid;grid-template-rows:auto minmax(var(--stage-min-height),1fr) auto;grid-template-areas:"header" "stage" "footer";width:100%;height:100dvh;min-height:0;isolation:isolate;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--forest-100)}
#focus-targets{position:absolute;inset:0;z-index:4;pointer-events:none}
.focus-target{position:absolute;transform:translate(-50%,-50%);opacity:0;pointer-events:none;padding:0;background:transparent;box-shadow:none;border:0}
.focus-target:focus-visible{opacity:1;background:#ffdf7520;outline:4px solid #ffd56b}
#title-screen{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#102e27eb 0%,#173c32c2 30%,#1d44374d 56%,transparent 78%),linear-gradient(0deg,#0f302975,transparent 38%)}
.title-copy{position:absolute;z-index:2;left:6.5%;top:50%;transform:translateY(-48%);width:47%;max-width:720px;color:var(--cream-50);text-align:center;text-shadow:0 2px 5px #0b291dcc}
.title-copy .title-kicker{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;font-size:clamp(17px,1.25vw,22px);line-height:1.35;color:#e0e9c8;letter-spacing:.035em}
.title-kicker>span{width:7px;height:7px;flex:none;border-radius:50%;background:#efd588;box-shadow:0 0 12px #efd58888}
.title-copy .title-wordmark{margin:0 -3% 12px;line-height:0;font-weight:400;text-shadow:none}
.title-logo{display:block;width:100%;height:auto;max-height:36dvh;object-fit:contain;filter:drop-shadow(0 10px 12px #0b291d80)}
.title-copy .title-hook{margin:0 0 12px;font-size:clamp(25px,1.9vw,34px);line-height:1.35;color:#fff4cf;text-wrap:balance}
.title-copy .title-description{margin:0;font-size:clamp(19px,1.4vw,25px);line-height:1.65;color:#e6eddb;text-wrap:balance}
.title-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px 0 20px;pointer-events:auto}
.title-actions .title-start{min-width:230px;min-height:68px;gap:24px;padding:16px 28px;border:2px solid #f6df9e;border-radius:18px;color:#29422c;background:linear-gradient(180deg,#fff0b5,#edc76e);box-shadow:0 5px 0 #886538,0 12px 30px #0a241e70,inset 0 1px 0 #fff9df;font-size:clamp(25px,1.9vw,31px);text-shadow:none;--button-edge:#886538}
.title-actions .title-start:hover:not(:disabled){background:linear-gradient(180deg,#fff6d4,#f3d589);box-shadow:0 6px 0 #886538,0 16px 34px #0a241e80,inset 0 1px 0 #fff}
.title-start svg{width:28px;height:28px;stroke-width:2.5}
.title-actions .title-continue{min-height:60px;padding:12px 22px;border:1px solid #e7dfb99c;border-radius:16px;color:#fff5d9;background:#244d39b3;box-shadow:0 4px 0 #0d3028;font-size:clamp(20px,1.45vw,25px)}
.title-actions .title-continue:hover:not(:disabled){background:#396348}
.title-copy .title-reward{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:#d5dfbd;font-size:clamp(16px,1.05vw,19px);line-height:1.45}
.title-reward svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.title-character-glow{position:absolute;right:0;bottom:4%;width:46%;height:75%;border-radius:50%;background:radial-gradient(ellipse,#fff3ba36,transparent 65%);filter:blur(16px)}
.title-jihoon{position:absolute;z-index:1;height:73%;width:37%;object-fit:contain;right:3%;bottom:4%;filter:drop-shadow(0 15px 12px #103c2e66)}
.title-spirit{position:absolute;z-index:2;right:11%;top:12%;width:10%;height:18%;object-fit:contain;filter:drop-shadow(0 8px 10px #173b3066);animation:title-spirit-drift 5s ease-in-out infinite}
.title-doto{position:absolute;z-index:2;right:33%;bottom:7%;width:9%;height:18%;object-fit:contain;filter:drop-shadow(0 10px 6px #14372f66)}
.title-motes{position:absolute;inset:0;overflow:hidden}
.title-motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff0b9;box-shadow:0 0 12px 3px #eed68d66;animation:title-mote-drift 7s ease-in-out infinite}
.title-motes i:nth-child(1){left:58%;top:24%;animation-delay:-2s}.title-motes i:nth-child(2){left:66%;top:72%;animation-delay:-5s}.title-motes i:nth-child(3){left:90%;top:36%;animation-delay:-1s}.title-motes i:nth-child(4){left:53%;top:58%;animation-delay:-4s}.title-motes i:nth-child(5){left:79%;top:14%;animation-delay:-3s}
@keyframes title-spirit-drift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes title-mote-drift{0%,100%{opacity:.25;transform:translate(0,0)}50%{opacity:.9;transform:translate(8px,-18px)}}
@media(max-width:1100px){.title-copy{left:4%;width:52%}.title-copy .title-kicker{font-size:17px}.title-actions{gap:10px}.title-actions .title-start{min-width:200px;padding-inline:22px}.title-actions .title-continue{padding-inline:16px}.title-jihoon{right:0;width:39%}.title-doto{right:32%}}
@media(max-height:700px){.title-copy{top:51%}.title-logo{max-height:32dvh}.title-copy .title-kicker{font-size:16px;margin-bottom:4px}.title-copy .title-wordmark{margin-bottom:8px}.title-copy .title-hook{font-size:25px;margin-bottom:8px}.title-copy .title-description{font-size:19px;line-height:1.5}.title-actions{margin:18px 0 14px}.title-actions .title-start{min-height:58px;padding-block:12px;font-size:25px}.title-actions .title-continue{min-height:54px;font-size:20px}.title-copy .title-reward{font-size:16px}.title-jihoon{height:76%}.title-spirit{top:10%}}
@media(max-width:760px){.title-copy{left:4%;width:61%;top:50%}.title-copy .title-kicker{font-size:15px;letter-spacing:0}.title-copy .title-hook{font-size:23px}.title-copy .title-description{font-size:18px;line-height:1.5}.title-actions{flex-wrap:wrap;margin:16px 0}.title-actions .title-start{min-height:56px;min-width:180px;padding:12px 18px;font-size:23px}.title-actions .title-continue{min-height:50px;font-size:18px}.title-copy .title-reward{font-size:15px}.title-jihoon{right:-6%;width:40%;height:62%;bottom:8%}.title-spirit{right:5%;top:18%;width:13%}.title-doto{right:24%;width:10%;height:16%}}
@media(max-width:600px) and (orientation:portrait){.title-copy{left:7%;width:86%;top:40%;transform:translateY(-50%)}.title-logo{max-height:29dvh}.title-copy .title-kicker{font-size:15px}.title-copy .title-hook{font-size:24px}.title-copy .title-description{font-size:18px}.title-actions{gap:10px;margin:20px 0 16px}.title-actions .title-start{min-width:190px}.title-jihoon{height:34%;width:43%;right:2%;bottom:1%}.title-spirit{width:16%;height:13%;right:8%;top:66%}.title-doto{width:15%;height:17%;right:38%;bottom:2%}.title-reward svg{display:none}}
/* Each major surface owns a real grid row. The activity never sits beneath its controls. */
.game-header{grid-area:header;position:relative;z-index:6;display:grid;gap:8px;padding:12px clamp(12px,2vw,28px);background:var(--forest-100);min-width:0}
.screen-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,1.4vw,24px);min-width:0}
.nav-left,.nav-right{display:flex;align-items:center;gap:8px;min-width:0}
.nav-right{grid-column:3;justify-self:end}
#app[data-view=title] .nav-left{display:none}
.icon-button,.screen-nav button{flex:none;width:var(--icon-size);height:var(--icon-size);min-width:48px;min-height:48px;padding:8px;border:2px solid var(--forest-900);border-radius:var(--radius-sm);color:var(--forest-900);background:var(--cream-50);--button-edge:var(--forest-900)}
.screen-nav svg{width:30px;height:30px}
#scene-title{grid-column:2;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;min-width:0;width:fit-content;max-width:100%;justify-self:center;padding:7px 14px;border:1px solid #c8bd9470;border-radius:999px;background:#fffbedb8;font-size:var(--font-size-xs);line-height:1.3;text-align:center}
#scene-title:empty{display:none}
.progress-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;min-width:0;max-width:100%}
.phase-dot{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e5dfc5;color:#4a5946;font-size:16px}
.phase-dot.done{background:#d0e3bc}.phase-dot.current{background:var(--forest-700);color:var(--cream-50);outline:2px solid var(--color-accent);outline-offset:2px}
.teacher-phase{width:clamp(200px,22vw,300px);max-width:100%;min-height:48px;padding:6px 10px;font-size:var(--font-size-sm);pointer-events:auto}
#scene-title:has(.teacher-phase)>span:last-child{display:none}
#objective{justify-self:center;width:fit-content;max-width:100%;margin:0;padding:8px 20px;border-radius:24px;background:#fffbedc7;font:400 var(--font-size-lg)/1.2 var(--font-display);text-align:center;text-wrap:balance;box-shadow:0 3px 12px #254b3520}
#objective:empty{display:none}
#stage{grid-area:stage;position:relative;min-width:0;min-height:var(--stage-min-height);overflow:hidden;background:var(--forest-100)}
#phaser-root{position:absolute;inset:0;z-index:1;overflow:hidden}
#phaser-root canvas{display:block;touch-action:none}
#map-doors{position:absolute;inset:0;z-index:4;pointer-events:none}
.map-door{position:absolute;transform:translate(-50%,-50%);min-height:52px;max-width:220px;padding:10px 16px;font-size:var(--font-size-sm);pointer-events:auto}
.map-door.locked{filter:saturate(.3);border-style:dashed}.map-door.done{border-color:var(--color-correct)}
.game-footer{grid-area:footer;position:relative;z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(160px,max-content);grid-template-areas:"status status status" "guide controls next";align-items:center;gap:8px 20px;padding:8px clamp(12px,2vw,28px) 16px;min-width:0;background:var(--forest-100);border-top:1px solid #c6d2b8}
.game-footer:has(#guide-bubble:not([hidden])){grid-template-areas:"status status status" "help help help" "guide controls next"}
#guide{grid-area:guide;display:flex;gap:4px;width:fit-content;max-width:100%;min-height:52px;padding:4px 12px 4px 4px;border-radius:20px;justify-self:start}
#guide img{flex:none;width:52px;height:52px;object-fit:contain}#guide span{font-size:var(--font-size-sm);line-height:1.2;white-space:normal}
#next{grid-area:next;justify-self:end;min-width:160px;width:fit-content;max-width:270px;min-height:56px;padding:10px 18px;font-size:var(--font-size-md);line-height:1.25;text-wrap:balance}
#controls{grid-area:controls;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;min-width:0;width:100%;max-width:100%;padding-bottom:4px}
#controls:empty{display:none}
.row,.field-menu,.inspect-tools,.answer-tray,.story-strip,.time-tools,.time-stops{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.field-menu:empty,.time-tools:empty{display:none}
.field-menu{flex:0 1 auto}.field-menu button,.time-stops button{flex:0 1 auto;max-width:100%;min-width:48px;min-height:48px;padding:8px 14px;font-size:var(--font-size-sm);white-space:normal;word-break:keep-all;overflow-wrap:break-word}
.tool-button{min-width:64px;min-height:48px;gap:8px;font-size:var(--font-size-sm)}
.tool-button img,.earned-tool{width:44px;height:44px;object-fit:contain}.tool-button[aria-pressed=true]{outline:3px solid var(--color-accent);outline-offset:2px}
.tool-hint{max-width:100%;margin:0;padding:8px 14px;border-radius:14px;background:var(--color-surface-glass);font-size:var(--font-size-sm);line-height:1.35;text-align:center;text-wrap:balance}
.time-slider,.time-sliders label{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:2px 10px;border-radius:12px;background:var(--color-surface-glass);font-size:var(--font-size-sm)}
.time-slider input,.time-sliders input{flex:1 1 120px;width:150px;min-width:100px;max-width:220px;height:48px}
.time-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}.time-sliders label{min-width:0}
.direction-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);gap:6px}
.direction-pad button{width:48px;height:48px;min-height:48px;padding:8px}.direction-pad button:nth-child(1){grid-area:2/1}.direction-pad button:nth-child(2){grid-area:1/2}.direction-pad button:nth-child(3){grid-area:2/2}.direction-pad button:nth-child(4){grid-area:2/3}
#guide-bubble{grid-area:help;position:static;justify-self:center;transform:none;width:100%;max-width:1000px;max-height:260px;min-width:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px;border:1px solid #93ad9699;border-radius:20px;background:#fffbedda;font-size:var(--font-size-md);line-height:1.45}
#guide-bubble:empty{display:none}#guide-bubble strong{font-size:var(--font-size-sm);color:var(--forest-700)}#guide-bubble p{margin:8px 0 16px}#guide-bubble .row{justify-content:flex-start}#guide-bubble button{font-size:var(--font-size-sm)}
#status{grid-area:status;position:static;justify-self:center;transform:none;width:fit-content;max-width:100%;height:calc(1.35em + 4px);min-height:calc(1.35em + 4px);margin:0;padding:2px 12px;border:0;border-radius:14px;clip:auto;overflow:hidden;white-space:normal;background:transparent;font-size:var(--font-size-sm);line-height:1.35;text-align:center;visibility:hidden;opacity:1;pointer-events:none;transition:none}
#status.visible{height:auto;max-height:calc(4.05em + 4px);overflow:auto;background:#fffbedc7;visibility:visible;pointer-events:auto}
.boot{position:absolute;inset:0;z-index:18;display:grid;place-content:center;background:var(--cream-100);font-size:var(--font-size-lg);text-align:center;padding:24px}.boot small{font-size:var(--font-size-sm)}
#toast{position:fixed;z-index:25;top:48%;left:50%;transform:translate(-50%,-50%);padding:16px 24px;width:max-content;max-width:min(760px,calc(100vw - 32px));border:2px solid var(--color-accent);border-radius:20px;background:var(--forest-900);color:var(--cream-50);box-shadow:var(--shadow-card);font-size:var(--font-size-md);line-height:1.4;text-align:center;pointer-events:none}#toast:empty{display:none}
/* Title remains an illustrated full-page composition; short views may scroll. */
#app[data-view=title]{display:block;min-height:0;background:var(--forest-900)}
#app[data-view=title] #stage{position:absolute;inset:0;min-height:0;height:100%}
#app[data-view=title] .game-header{position:absolute;inset:0 0 auto;z-index:10;background:transparent}
#app[data-view=title] .game-footer{display:none}
#app[data-view=title] #title-screen{position:relative;min-height:100dvh;height:100%;overflow:hidden;background:linear-gradient(90deg,#102e27eb 0%,#173c32c2 30%,#1d44374d 56%,transparent 78%),linear-gradient(0deg,#0f302975,transparent 38%),url('assets/expedition/forest-world.webp') center/cover no-repeat}
/* Activities are landscape-first. Portrait uses a real blocking orientation surface. */
.portrait{display:none}
@media(orientation:portrait){#app:not([data-view=title]) .portrait{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;width:100%;padding:32px;background:var(--cream-50);font-size:var(--font-size-lg);line-height:1.35;text-align:center;pointer-events:auto}#app:not([data-view=title]) .portrait:before{content:'↻';font-size:72px;line-height:1;color:var(--color-primary)}}
input[type=text],input[type=number],textarea,select{width:100%;max-width:100%;min-width:0;min-height:48px;padding:8px 12px;border:2px solid var(--color-border-soft);border-radius:var(--radius-sm);background:#fffef8;font-size:var(--font-size-sm);line-height:1.45}
textarea{height:120px;resize:vertical}input[type=range]{height:48px;min-width:80px;max-width:100%;accent-color:var(--color-primary);touch-action:pan-x;cursor:pointer}input:disabled{cursor:default;opacity:.5}output{font-variant-numeric:tabular-nums}
.small,.settings-note{font-size:var(--font-size-xs);color:var(--color-text-sub)}
/* Dialog header and footer never share the scrolling content row. */
dialog{--dialog-gap:16px;position:fixed;inset:0;width:min(var(--modal-max-width),calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;max-height:calc(100dvh - 24px);margin:auto;padding:clamp(12px,2vw,28px);border:2px solid var(--forest-700);border-radius:var(--radius-lg);background:var(--cream-50);color:var(--color-text-main);box-shadow:var(--shadow-popover);overflow:hidden;font-size:var(--font-size-sm)}
dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--dialog-gap);animation:dialog-in .2s ease-out}
dialog::backdrop{background:#143b35b8}
dialog>h2{grid-column:1;grid-row:1;align-self:center;min-width:0;margin:0;padding:0;font-size:var(--font-size-lg);font-weight:400;line-height:1.2;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
dialog>.close{grid-column:2;grid-row:1;align-self:start;justify-self:end;position:static;width:48px;height:48px;min-width:48px;min-height:48px;padding:8px;z-index:1}
dialog>.modal-body{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 6px 4px 0}
dialog>.dialog-actions{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;min-width:0;margin:0;padding:12px 0 4px;border-top:1px solid var(--color-border-soft)}
dialog>.dialog-actions:empty{display:none}.dialog-actions button{flex:0 1 auto;min-height:48px;min-width:80px;max-width:100%;padding:9px 16px;line-height:1.3;text-wrap:balance}.dialog-actions .quiet-button{margin-right:auto}
dialog h3{margin:16px 0 8px;font-size:var(--font-size-subhead);font-weight:400;line-height:1.25}dialog p{margin:0 0 16px;font-size:var(--font-size-sm);line-height:1.5}dialog p:last-child{margin-bottom:0}dialog .modal-body>p{max-width:66ch}
dialog label:not(.volume-row){display:block;margin:16px 0;font-size:var(--font-size-sm)}dialog label input,dialog label textarea{display:block;margin-top:8px}
dialog details{margin-top:8px;border-top:1px solid var(--color-border-soft)}dialog summary{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 12px 8px 0;list-style:none;cursor:pointer;font-size:var(--font-size-md);line-height:1.3}dialog summary::-webkit-details-marker{display:none}dialog summary:before{content:'›';flex:none;width:24px;font-size:32px;transition:transform .15s ease}dialog details[open]>summary:before{transform:rotate(90deg)}
.settings-dialog{--modal-max-width:1040px}.settings-section-body{padding:8px 8px 20px 16px}.settings-section .settings-section{border-left:3px solid var(--color-border-soft);border-top:0;padding-left:16px}.settings-section-body p{word-break:keep-all;overflow-wrap:break-word}
.settings-sound{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-bottom:16px}.settings-sound .volume-row,.settings-sound .settings-note{grid-column:1/-1}
.sound-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;font-size:var(--font-size-md)}.sound-switch{position:relative;flex:none;min-width:104px;justify-content:flex-end;padding:8px 16px 8px 48px;background:var(--cream-100);border-radius:var(--radius-pill);font-size:var(--font-size-sm);box-shadow:none}
.sound-switch:before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:2px solid var(--color-border-soft);border-radius:50%;background:var(--cream-50)}.sound-switch[aria-checked=true]{background:var(--color-primary);border-color:var(--forest-900);color:var(--cream-50)}.sound-switch[aria-checked=true]:before{background:var(--color-accent);border-color:var(--cream-50)}.sound-switch:hover:not(:disabled){transform:none}.sound-switch[aria-checked=true]:hover:not(:disabled){background:var(--forest-700)}
.volume-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;font-size:var(--font-size-md)}.volume-row input{grid-column:1/-1;width:100%;margin:0}.volume-row output{font-size:var(--font-size-sm);color:var(--color-text-sub)}
.settings-replays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:12px}.settings-replays .settings-note{grid-column:1/-1}.settings-replays button{font-size:var(--font-size-sm);padding:10px 16px}.wide-button{width:100%}.settings-note{margin-top:8px!important;font-size:var(--font-size-xs)!important}.settings-shortcuts{display:flex;flex-wrap:wrap;gap:12px;padding-bottom:5px}
.learning-list{display:grid;gap:16px;margin:0 0 24px}.learning-list>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px}.learning-list dt{color:var(--color-primary)}.learning-list dd{margin:0;line-height:1.5}.app-signature{font-size:var(--font-size-xs)!important;color:var(--color-text-sub)}.rights-notice{margin-top:24px}.rights-notice p{font-size:var(--font-size-xs)}
.record-preview{display:grid;grid-template-columns:minmax(120px,25%) minmax(0,1fr);align-items:center;gap:24px}.record-preview>img{width:100%;max-height:240px;object-fit:contain;background:#fffdf5;border-radius:16px}
.record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:6px}.record-grid button{display:flex;flex-direction:column;align-items:center;min-height:130px;min-width:0;padding:8px;gap:8px;font-size:var(--font-size-sm)}.record-grid img{width:100%;height:90px;object-fit:contain;background:#fffdf5;border-radius:10px}.record-grid small{font-size:var(--font-size-xs)}.record-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0 4px}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.paper{padding:16px;border-radius:20px;background:var(--cream-100)}.tool-bag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bag-item{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;padding:12px;border:1px solid var(--color-border-soft);border-radius:16px;background:var(--cream-100)}.bag-item img{width:64px;height:64px;object-fit:contain;filter:grayscale(1);opacity:.5}.bag-item.earned img{filter:none;opacity:1}.bag-item h3{font-size:var(--font-size-md);margin:0 0 6px}.bag-item p{font-size:var(--font-size-sm)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 0}.choice-grid button:last-child{grid-column:1/-1}
.care-comparison{position:relative;height:clamp(240px,36vw,380px);border-radius:20px;background:#fffdf5;overflow:hidden}.care-comparison>img,.care-comparison>div>img{width:100%;height:100%;object-fit:contain}.care-comparison #care-before-image{position:absolute;inset:0;background:#fffdf5;clip-path:inset(0 50% 0 0)}.care-comparison>span{position:absolute;top:12px;padding:6px 12px;background:#fffbed;border-radius:12px;font-size:var(--font-size-sm)}.compare-before-label{left:12px}.compare-after-label{right:12px}#compare-divider{position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--forest-700);pointer-events:none}.compare-dialog label input{width:100%;margin:0}.care-comparison>.recovery-new-leaves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.concept-dialog{--modal-max-width:1100px}.concept-stage{position:relative;aspect-ratio:16/9;width:min(100%,calc(clamp(180px,calc(100dvh - 260px),520px) * 16 / 9));min-height:0;margin:auto;border-radius:20px;overflow:hidden;background:#d6e3c4 center/contain no-repeat}.concept-stage video{display:block;width:100%;height:100%;object-fit:contain}.concept-duration{position:absolute;top:12px;left:16px;font-size:var(--font-size-xs);background:#fffbed;padding:5px 12px;border-radius:30px}.concept-stage #concept-caption{position:absolute;bottom:0;left:0;right:0;margin:0;padding:12px 20px;background:#1e4337ed;color:#fffbed;font-size:clamp(22px,2.25vw,36px);line-height:1.35;text-align:center;text-wrap:balance}
.concept-playback{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0 6px}.concept-playback button{min-width:100px}.concept-seek-label{display:flex!important;align-items:center;gap:12px;flex:1 1 220px;min-width:0;margin:0!important;font-size:var(--font-size-xs)}.concept-seek-label input{flex:1;width:100%;min-width:80px;margin:0}.concept-playback output{min-width:85px;font-size:var(--font-size-xs)}#concept-fallback{padding:16px}#concept-fallback ol{margin:8px 0;padding-left:30px}#concept-fallback li{margin:8px 0;font-size:var(--font-size-sm)}
.concept-labels{position:absolute;top:16%;left:6%;right:6%;display:grid;gap:8px;text-align:center;pointer-events:none}.concept-labels span{justify-self:center;padding:4px 10px;background:#fffbeded;border-radius:12px;font-size:var(--font-size-sm);line-height:1.25}.concept-dialog.is-fallback .concept-stage{max-height:200px;min-height:140px}.concept-dialog.is-fallback .concept-labels,.concept-dialog.is-fallback #concept-caption,.concept-dialog.is-fallback .concept-duration{display:none}.concept-dialog.is-fallback #concept-fallback{padding:8px 0}
.concept-library{display:grid;grid-template-columns:1fr;gap:16px;padding:4px 0 8px}.concept-library-item{justify-content:flex-start;gap:20px;width:100%;min-height:100px;padding:8px 16px;text-align:left;box-shadow:0 3px 0 var(--button-edge)}.concept-library-item>img{flex:none;width:clamp(96px,13vw,160px);aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:12px}.concept-library-item>span{display:grid;gap:4px;min-width:0}.concept-library-item strong{font-size:var(--font-size-subhead);font-weight:400;line-height:1.25}.concept-library-item>span>span{font-size:var(--font-size-sm);line-height:1.35}.concept-library-item:disabled{opacity:1;color:var(--color-text-sub);background:var(--cream-100);box-shadow:none}.concept-library-item:disabled>img{filter:grayscale(1);opacity:.65}
.story-image{display:block;width:100%;max-width:100%;max-height:420px;margin:auto;object-fit:contain;background:#fffdf5}.story-dialog #story-frame{text-align:center}.story-dialog #story-frame p{padding:12px 0;margin:0;font-size:var(--font-size-md);line-height:1.4}.story-strip img{width:64px;height:64px;object-fit:contain}.story-strip button{padding:8px}
.certificate{text-align:center}.certificate-head{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:16px}.certificate-head img{width:110px;height:110px;object-fit:contain}.certificate-head h3{margin:0 0 8px}.certificate-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;text-align:left}.certificate-columns p{font-size:var(--font-size-sm);line-height:1.45}.certificate small{font-size:var(--font-size-xs)}
/* The same notebook surface is used for observation and the final story. */
.story-writing-dialog{--modal-max-width:1040px}.story-writing-book .notebook-page{align-self:center;min-width:0}.story-writing-book .notebook-page h3{font-size:var(--font-size-hand);margin-bottom:14px}.story-writing-book label{font-size:var(--font-size-sm)!important;margin:12px 0!important}.story-writing-book input,.story-writing-book textarea{font-family:var(--font-hand);font-size:30px;line-height:1.25;padding:8px 10px;background:#fffef8b8;border-color:#9eaf8b}.story-writing-book textarea{height:160px;min-height:140px;resize:vertical}.story-writing-guide{font-family:var(--font-hand);font-size:25px!important;line-height:1.35!important;color:#4b6b51;margin:10px 0 0!important}.story-note-evidence{display:block;width:100%;max-width:100%;height:180px;object-fit:contain;margin:8px auto;background:#fffdf5}
:root{--color-focus:#286953}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--color-focus)}.focus-target:focus-visible{background:#326c5524;outline-color:var(--color-focus)}.tool-button[aria-pressed=true]{outline-color:var(--color-focus)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px) and (min-height:850px){:root{--icon-size:60px;--button-height-md:56px;--button-height-lg:64px}.phase-dot{width:30px;height:30px;font-size:18px}.record-grid img{height:110px}.certificate-head img{width:140px;height:140px}}
@media(max-width:1100px){:root{--field-body-min:18;--button-gap:8px}.game-header{padding:10px 12px;gap:7px}#objective{font-size:28px;padding:7px 16px}.screen-nav{gap:10px}#scene-title{gap:6px 8px;padding:6px 10px}#guide img{width:48px;height:48px}#next{max-width:230px}.settings-replays{grid-template-columns:1fr}}
@media(max-width:960px){.game-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"status status" "guide next" "controls controls";gap:8px 16px;padding:8px 12px 14px}#controls{gap:8px 12px}.field-menu,.time-tools{flex:0 1 auto}.map-door{max-width:180px}#scene-title{font-size:16px}.teacher-phase{width:200px;font-size:20px}.record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){.game-footer:has(#guide-bubble:not([hidden])){grid-template-areas:"status status" "help help" "guide next" "controls controls"}}
@media(max-width:700px){.screen-nav{grid-template-columns:auto minmax(0,1fr) auto}.nav-left,.nav-right{gap:6px}#scene-title{grid-column:1/-1;grid-row:2;max-width:100%}#objective{font-size:26px}.settings-sound{grid-template-columns:1fr}.settings-sound .volume-row,.settings-sound .settings-note{grid-column:auto}.record-preview,.two-cols,.tool-bag,.certificate-columns{grid-template-columns:1fr}.record-preview>img{max-height:190px}.learning-list>div{grid-template-columns:1fr;gap:4px}.settings-section-body{padding-left:8px}.concept-library-item{gap:12px;padding:8px}.concept-library-item strong{font-size:var(--font-size-md)}.certificate-head{gap:12px}.concept-stage #concept-caption{font-size:22px;padding:10px 12px}}
@media(max-width:560px){.game-footer{grid-template-columns:minmax(0,1fr);grid-template-areas:"status" "controls" "next" "guide"}#guide,#next{justify-self:stretch;width:100%;max-width:none}#guide{justify-content:center}.time-sliders{grid-template-columns:1fr}dialog{--dialog-gap:10px;border-radius:20px;padding:12px}dialog>h2{font-size:28px}.dialog-actions button{flex:1 1 140px;padding-inline:10px}.concept-library-item{flex-direction:column;align-items:stretch}.concept-library-item>img{width:100%;max-height:140px;object-fit:contain}.certificate-head{flex-direction:column}.record-grid{grid-template-columns:1fr}.concept-playback{gap:8px}.concept-playback output{margin-left:auto}}
@media(max-width:560px){.game-footer:has(#guide-bubble:not([hidden])){grid-template-areas:"status" "help" "controls" "next" "guide"}}
@media(max-height:650px){:root{--icon-size:48px;--button-height-md:48px;--button-height-lg:52px}.game-header{padding-block:8px;gap:6px}.game-footer{padding-block:8px 12px}#scene-title{padding-block:5px}.tool-button img{width:40px;height:40px}dialog{--dialog-gap:10px;padding:12px 16px}dialog>h2{font-size:30px}dialog>.dialog-actions{padding-top:8px}.settings-sound{gap:12px 20px}}
@media(max-height:520px) and (orientation:landscape){#app[data-view=title] #title-screen{min-height:560px}.title-copy{top:50%}.title-logo{max-height:210px}.title-jihoon{height:78%}}
@media(max-height:520px){.concept-stage{display:flex;flex-direction:column;aspect-ratio:auto}.concept-stage video{order:0;aspect-ratio:16/9;height:auto}.concept-stage .concept-duration{display:none}.concept-stage .concept-labels{order:1;position:static;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:8px}.concept-stage .concept-labels span{font-size:20px}.concept-stage #concept-caption{order:2;position:static;font-size:20px;padding:10px 12px}}
@media(max-width:600px) and (orientation:portrait){#app[data-view=title] #title-screen{min-height:780px;height:100dvh}.title-copy{position:relative;left:auto;top:auto;transform:none;width:86%;margin:90px auto 260px}.title-logo{max-height:220px}.title-jihoon{width:43%;height:260px;bottom:0;right:2%}.title-spirit{top:auto;bottom:160px;height:100px;width:18%}.title-doto{bottom:12px;right:39%;height:130px;width:18%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}