:root{font-family:'Segoe UI',Arial,sans-serif;color:#173c3c;background:#153f40;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;min-height:44px}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e5a64e;outline-offset:3px}[hidden]{display:none!important}h1,h2,p,figure{margin:0}
#adventure{height:100vh;height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 80px;padding:env(safe-area-inset-top) max(22px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(22px,env(safe-area-inset-left));overflow:hidden;background:radial-gradient(ellipse at 15% 0,#2b6263,#153f40 70%)}
.topbar{display:flex;align-items:center;justify-content:space-between;color:#fff8e7;gap:12px}.brand{display:flex;align-items:center;gap:12px;font:bold italic 36px Georgia;color:inherit;text-decoration:none}.brand span{font:700 12px 'Segoe UI',sans-serif;letter-spacing:1.5px}.header-actions{display:flex;gap:5px}.header-actions button{background:transparent;color:inherit;width:44px;border-radius:9px;font-size:23px}
.board{display:grid;grid-template-columns:1.2fr 1fr;min-height:0;border-radius:20px;overflow:hidden;background:#fbf7eb;box-shadow:0 15px 50px #03232335}.world{position:relative;min-height:0;overflow:hidden;background:#9aa99c}.scene{position:absolute;inset:0;background-image:url('art/japan-lunch-photo-v1.png');background-size:200% 200%;background-repeat:no-repeat}.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#082f3a70,transparent 38%,transparent 82%,#082f3a30)}.scene-title{position:absolute;top:28px;left:28px;right:20px;color:#fff9ed;text-shadow:0 2px 16px #193338b0;pointer-events:none}.scene-title h1{font:400 clamp(28px,3.7vw,50px)/1.15 Georgia,serif;letter-spacing:-1px}#zoom{position:absolute;bottom:18px;right:18px;background:#fff9ebec;box-shadow:0 3px 14px #1b363633;border:1px solid #fff8e8;display:grid;place-items:center;width:44px;border-radius:50%}
.activity{display:grid;grid-template-rows:18px 4px minmax(95px,1.15fr) minmax(70px,1fr) minmax(95px,1fr) 48px;gap:12px;padding:28px clamp(22px,3vw,44px) 16px;min-height:0;background:radial-gradient(ellipse at 100% 0,#f1e7ce,transparent 65%),#fbf8ee}.step-line{font-size:11px;letter-spacing:1px;color:#6e7f72;align-self:center}.progress{display:flex;gap:5px;height:4px}.progress span{flex:1;border-radius:8px;background:#d9dfcd}.progress .filled{background:#ac773c}.dialogue{font:400 clamp(20px,2vw,28px)/1.45 Georgia,serif;color:#465f58;align-self:center}.activity h2{font-size:clamp(25px,2.7vw,37px);line-height:1.3;letter-spacing:-.6px;align-self:center}.support{display:flex;align-items:center;gap:12px;align-self:center;background:#e8eedc;border-radius:11px;padding:14px;min-height:74px}.support[data-empty=true]{visibility:hidden}#cue{font-size:clamp(16px,1.35vw,19px);line-height:1.4;overflow-wrap:anywhere;flex:1;min-width:0}#example{font-size:12px;padding:7px 10px;background:#fffdf3;border:1px solid #ccd7bd;border-radius:8px;flex:none}.tools{display:flex;align-items:center;justify-content:space-between;gap:10px}.tools button{font-size:13px;background:transparent;padding:3px 0;color:#54705e;white-space:nowrap}.tools button[aria-pressed=true]{color:#8f542e}
.journey-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#e3eddd}.journey-controls>button{border-radius:10px;padding:10px 16px;background:#ffffff0b;font-size:14px;min-width:80px}.journey-controls .next{min-width:155px;background:#e6b35c;color:#163e3b;font-weight:750;box-shadow:0 4px 0 #986b36}.question-nav{display:flex;align-items:center;gap:12px}.question-nav button{width:44px;background:#ffffff0a;color:#e3eddd;border-radius:9px;font-size:30px;line-height:1}.question-nav>span{display:grid;text-align:center;gap:3px;min-width:50px}.question-nav small{font-size:10px;color:#b8cdbf}.question-nav b{font-size:13px;font-weight:600}
dialog{width:min(440px,calc(100% - 28px));border:0;border-radius:18px;background:#fbf8ee;color:#173c3c;padding:22px;box-shadow:0 20px 80px #0006;max-height:86dvh;overflow:auto}dialog::backdrop{background:#092c30bd;backdrop-filter:blur(4px)}.menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.menu-top h2{font-size:23px}.menu-top button{font-size:27px;min-width:44px;background:transparent}#story-list{display:grid;gap:10px;margin:18px 0}#story-list button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #cbd6c1;border-radius:10px;background:#fffdf5;padding:9px;font-size:17px;width:100%}#story-list small{font-size:12px;color:#6a7d6d}.story-thumb{display:block;width:66px;height:48px;border-radius:6px;background-size:200% 200%;background-position:0 0;flex:none}#restart{background:#173f3e;color:#fff9eb;border-radius:10px;padding:10px 14px;width:100%;font-size:15px}
#photo-dialog{width:auto;max-width:96vw;padding:8px;overflow:hidden;background:#143f40}#close-photo{display:block;margin:0 0 4px auto;width:44px;background:transparent;color:#fff9eb;font-size:28px}#large-scene{width:min(88vw,105dvh,1000px);aspect-ratio:1.5;max-height:70dvh;background-repeat:no-repeat;border-radius:10px}
@media(max-width:760px) and (orientation:portrait){
#adventure{grid-template-rows:50px minmax(0,1fr) 74px;padding-inline:max(12px,env(safe-area-inset-left))}.brand{font-size:28px;gap:8px}.brand span{font-size:10px;letter-spacing:1px}
.board{grid-template-columns:1fr;grid-template-rows:minmax(135px,.8fr) minmax(312px,1.45fr);border-radius:16px}.scene-title{top:17px;left:18px}.scene-title h1{font-size:29px}.activity{grid-template-rows:14px 4px minmax(80px,1.1fr) minmax(58px,.9fr) minmax(78px,1fr) 44px;gap:7px;padding:12px 18px 6px}.step-line{font-size:10px}.dialogue{font-size:18px;line-height:1.4}.activity h2{font-size:25px}.support{gap:8px;padding:10px;min-height:66px}#cue{font-size:15px}#example{font-size:11px;padding:5px 8px}.tools button{font-size:12px}.question-nav{gap:3px}.question-nav>span{min-width:38px}.question-nav small{font-size:9px}.question-nav b{font-size:12px}.journey-controls{gap:8px}.journey-controls>button{min-width:44px;padding:10px 9px;font-size:12px}.journey-controls .next{min-width:104px}.journey-controls>button>span{display:none}#zoom{right:12px;bottom:12px}
}
@media(max-height:690px) and (orientation:portrait){
#adventure{grid-template-rows:46px minmax(0,1fr) 64px}.board{grid-template-rows:minmax(112px,.65fr) minmax(310px,1.45fr)}.activity{padding:8px 14px 3px;gap:5px;grid-template-rows:12px 4px minmax(76px,1fr) minmax(54px,.85fr) minmax(76px,1fr) 44px}.dialogue{font-size:16px;line-height:1.45}.activity h2{font-size:23px}.support{padding:8px;min-height:60px}#cue{font-size:13px;line-height:1.45}.tools button{font-size:11px}.scene-title h1{font-size:26px}.scene-title{top:13px;left:15px}
}
@media(max-height:500px) and (orientation:landscape){
#adventure{grid-template-rows:42px minmax(0,1fr) 58px;padding-inline:max(12px,env(safe-area-inset-left))}.brand{font-size:27px}.brand span{font-size:10px}.board{grid-template-columns:1fr 1fr;border-radius:13px}.activity{padding:10px 15px 5px;gap:6px;grid-template-rows:minmax(74px,1.1fr) minmax(50px,.8fr) minmax(72px,1fr)}.activity .step-line,.activity .progress,.activity .tools{display:none}.dialogue{font-size:16px;line-height:1.35}.activity h2{font-size:22px}.support{padding:8px;gap:6px;min-height:54px}#cue{font-size:13px}#example{font-size:10px;padding:4px 7px}.scene-title{left:18px;top:18px}.scene-title h1{font-size:28px}.journey-controls>button{font-size:12px;padding:8px 12px}.journey-controls .next{min-width:130px}.question-nav{gap:8px}.question-nav small{font-size:9px}
}
@media(max-height:350px) and (orientation:landscape){
#adventure{grid-template-rows:38px minmax(0,1fr) 52px}.activity{padding:6px 12px;gap:5px;grid-template-rows:minmax(64px,1fr) minmax(42px,.8fr) minmax(58px,1fr)}.dialogue{font-size:14px;line-height:1.35}.activity h2{font-size:19px;line-height:1.3}#cue{font-size:11px;line-height:1.35}.support{padding:6px;min-height:48px}.scene-title h1{font-size:23px}.journey-controls>button{min-width:64px}.journey-controls .next{min-width:116px}
}
.menu-language{display:flex;gap:10px;margin-bottom:14px}.menu-language button{flex:1;border-radius:8px;background:#e8eedc;padding:7px;font-size:13px}
.scene{background-image:none;background-size:cover}.story-thumb{background-size:cover;background-position:center}
#adventure[data-view=library]>.board,#adventure[data-view=library]>.journey-controls{display:none}
.topbar{min-height:44px}
@media(max-height:350px) and (orientation:landscape){#adventure{grid-template-rows:44px minmax(0,1fr) 52px}}
#student-grid>button,.story-card{color:#173c3c}
.header-actions #profiles{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#library{grid-row:2 / 4;min-height:0;display:grid;place-items:center;color:#fff8e7;padding:24px 0}
#library>div{width:min(820px,100%);min-height:0;max-height:100%;display:flex;flex-direction:column;gap:20px}
#library h1{font:400 clamp(32px,4vw,50px)/1.1 Georgia,serif;letter-spacing:-.7px}
.library-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.library-heading button,#browse,.list-controls button{background:#ffffff13;border:1px solid #ffffff29;color:#fff8e7;border-radius:10px;padding:8px 14px}
.library-heading button{white-space:nowrap;font-size:14px}#local-notice{font-size:13px;line-height:1.4;color:#ceded1;max-width:540px}
#student-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0}#student-grid>button{display:flex;align-items:center;gap:18px;padding:22px;border-radius:16px;background:#fbf8ee;text-align:left;min-width:0}#student-grid strong{font-size:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-avatar{display:grid;place-items:center;background:#d7e6d4;width:60px;height:60px;border-radius:50%;font-size:28px;flex:none}.student-avatar[data-color="1"]{background:#f1daba}.student-avatar[data-color="2"]{background:#dfd9f0}.student-avatar[data-color="3"]{background:#cfdfed}
.list-controls{display:flex;align-items:center;justify-content:center;gap:24px;font-size:13px}.list-controls button{width:44px;padding:4px}
#student-label{font-size:15px;margin-bottom:9px;color:#d2e2d3}#story-path{display:grid;gap:20px}.story-card{position:relative;display:flex;align-items:center;gap:22px;padding:14px 22px 14px 14px;border:1px solid #ffffff29;border-radius:18px;background:#fbf8ee;text-align:left;box-shadow:0 5px 0 #062f2f55;min-width:0}.story-card>img{width:150px;height:112px;object-fit:cover;border-radius:10px;flex:none}.story-card>span:not(.path-number){display:grid;gap:10px;min-width:0}.story-card strong{font:400 29px/1.15 Georgia}.story-card small{font-size:13px;color:#647a6a}.story-card b{font-size:14px;color:#85531f}.path-number{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#dfe9d8;color:#426c56;font-weight:700;flex:none}.story-card[data-completed=true]{border:2px solid #96c8a4}.story-card[data-completed=true] b{color:#356b46}
#library-save,#profile-error{font-size:13px;color:#d2e2d3;min-height:16px}#save-status{margin-left:auto;font-size:11px;max-width:150px;padding:4px 8px;color:#d4e4d4;background:transparent;border-radius:8px}#save-status[data-error=true]{background:#f7cc8b;color:#163e3b}.header-actions #profiles{font-size:12px;width:auto;padding:4px 8px}
#sign-in-view{align-items:flex-start}#sign-in-message{font-size:18px;line-height:1.5;max-width:530px}.primary-link{display:inline-flex;align-items:center;min-height:48px;background:#e6b35c;color:#173c3c;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700}#browse{font-size:14px}
#student-form{display:grid;gap:14px}#student-form label{font-size:15px}#student-name{width:100%;min-height:50px;border:1px solid #9bad98;border-radius:9px;background:#fffef7;padding:10px;font:20px 'Segoe UI',sans-serif;color:#173c3c}.field-note{font-size:13px;line-height:1.4;color:#627360}#student-error{font-size:14px;color:#9b3e22}#create-student,#retry-save,#use-saved{width:100%;background:#173f3e;color:#fff9eb;border-radius:10px;padding:12px;margin-top:8px}#sync-message{line-height:1.5;margin:15px 0}.credits-link,#sign-out{display:block;text-align:center;color:#526e5c;font-size:12px;margin-top:14px;min-height:30px}#open-library{width:100%;background:#e8eedc;border-radius:8px;margin-top:10px}
@media(max-width:600px) and (orientation:portrait){
#library{padding:14px 3px}#library>div{gap:16px}.library-heading{gap:8px}.library-heading button{font-size:12px;padding:7px 10px}#library h1{font-size:34px}#student-grid{gap:10px}#student-grid>button{padding:18px 10px;flex-direction:column;gap:9px;text-align:center}#student-grid strong{font-size:19px;max-width:100%}.student-avatar{width:48px;height:48px;font-size:24px}.story-card{padding:12px;gap:12px}.story-card>img{width:72px;height:100px}.story-card strong{font-size:23px}.story-card small{font-size:11px;line-height:1.3}.story-card b{font-size:12px}.path-number{width:30px;height:30px;font-size:13px}.story-card>span:not(.path-number){gap:8px}#story-path{gap:16px}#student-label{font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#save-status{max-width:102px;font-size:10px;padding:3px}.brand span{display:none}#fullscreen{display:none!important}
}
@media(max-height:500px) and (orientation:landscape){
#library{padding:8px 0}#library>div{gap:8px}#library h1{font-size:28px}.library-heading{min-height:44px}#local-notice{font-size:11px;max-width:none}#student-grid{grid-template-columns:repeat(4,1fr);gap:10px}#student-grid>button{padding:9px;gap:7px;flex-direction:column}.student-avatar{height:32px;width:32px;font-size:18px}#student-grid strong{font-size:14px;max-width:100%}#student-label{font-size:12px;margin-bottom:3px}#story-path{grid-template-columns:1fr 1fr;gap:12px}.story-card{padding:10px;gap:9px}.story-card>img{width:65px;height:100px}.story-card strong{font-size:20px}.story-card small{font-size:11px}.story-card b{font-size:11px}.path-number{display:none}.list-controls{gap:20px}#library-save,#profile-error{font-size:11px;min-height:13px}#sign-in-message{font-size:15px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}