/* Warm paper and charcoal share layout and contrast; no network fonts. */
:root{--paper:#f6efdf;--panel:#fffaf0;--inset:#ede4d4;--ink:#322d2a;--muted:#6b6056;--edge:#c9bba4;--accent:#a43f3f;--mint:#287666;--violet:#72508a;--bg:var(--paper);--card:var(--panel)}
body{background:var(--paper);color:var(--ink)}body[data-theme=charcoal]{--paper:#202120;--panel:#292b29;--inset:#333631;--ink:#f2e9d9;--muted:#c6baab;--edge:#68685c;--accent:#e5a18d;--mint:#9fd0b4;--violet:#d3b2dc}
button,input,select,textarea{font:inherit}button,input,select,textarea,dialog,.card,.navbar,.code,.play,.instructions{color:var(--ink);background:var(--panel);border-color:var(--edge)}
.navbar{background:var(--panel);box-shadow:0 2px 0 var(--edge)}.brand b{background:var(--accent);color:var(--panel)}.brand,.brand small,.subtitle,.muted,.eyebrow,.title-note,#hall-progress,#chapter-anchor,#chapter-editor>label{color:var(--muted)}
.primary,button[aria-pressed=true]{background:var(--mint);color:var(--panel);border-color:var(--mint)}button:hover:not(:disabled){border-color:var(--accent);filter:brightness(.96)}button:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.5}.title-screen{background:var(--paper)}.avatar-choice,.try-card,.hint-panel,.chapter-command,.provided-code,.code-line,.variables-code-wrap,#variables-memory,#teacher-message,.confirm-box{background:var(--inset);color:var(--ink);border-color:var(--edge)}
.value-input,#text-group,#chapter-object,#chapter-source,#variables-source,.teacher-dialog textarea,.teacher-dialog input{background:var(--panel);color:var(--ink);border-color:var(--edge)}.keyword{color:var(--accent)}.line-number,.chapter-input-cell>span,#draft-status,#runtime-status,#text-dirty{color:var(--muted)}
.panel-heading,.code-bottom{background:var(--panel);border-color:var(--edge)}.code-bottom{padding:8px 14px}.code-actions{gap:9px}.object-comment{flex-basis:100%;color:var(--muted);font-size:14px;line-height:1.4}.chapter-command{margin:10px 0;padding:10px}.value-input{width:76px}
#workspace{padding-bottom:85px;height:calc(100dvh - var(--story-toolbar-height,90px));min-height:480px}#workspace[data-layout=instructions]>.instructions{width:min(1100px,100%);min-height:0;margin:0 auto}#workspace[data-layout=code]>.code{min-height:0}
#lesson-dock{position:fixed;bottom:0;left:0;right:0;z-index:8;padding:12px 24px;background:var(--panel);border-top:2px solid var(--edge);display:flex;justify-content:center;gap:12px}#lesson-navigation .chapter-navigation{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;border:0}#lesson-navigation .chapter-navigation button{margin:0}
#lesson-complete{position:fixed;z-index:12;top:22%;left:50%;transform:translateX(-50%);width:min(380px,90vw);padding:22px;background:var(--panel);color:var(--ink);border:3px solid var(--mint);border-radius:18px;box-shadow:0 10px 35px #0004}#lesson-complete strong{font-size:24px}#lesson-complete div{display:flex;gap:10px;flex-wrap:wrap}body:has(#lesson-complete:not([hidden])) #lesson-dock{visibility:hidden}
#workspace[data-briefing=true] #code-panel,#workspace[data-briefing=true] #play-panel,#workspace[data-briefing=true] .hint-actions,#workspace[data-briefing=true] .hint-panel,#workspace[data-briefing=true] #variables-hints,#workspace[data-briefing=true] #variables-hint,#workspace[data-briefing=true] #chapter-experiment{display:none!important}body:has(#workspace[data-briefing=true]) #lesson-navigation{display:none}#workspace[data-briefing=true]{grid-template-columns:1fr}
#lesson-thumbnail{float:right;width:45%;max-height:380px;object-fit:contain;border-radius:12px;margin:0 0 20px 25px;pointer-events:none}#workspace:not([data-briefing=true]) #lesson-thumbnail{display:none}
#chapter-special fieldset{display:block;padding:14px;margin:12px 0;border:1px solid var(--edge);border-radius:12px}#chapter-special fieldset button{margin:4px}#chapter-special textarea{width:100%}.coordinate-visual{width:min(100%,780px);height:auto;touch-action:none;border:1px solid var(--edge);border-radius:12px}.grid-status{font-family:ui-monospace,monospace;font-weight:700}#chapter-kicker,#chapter-special legend{font-family:ui-monospace,monospace}#chapter-body{line-height:1.7}
#lesson-console{order:4;margin:8px 14px 14px;border-top:1px solid var(--edge);padding-top:10px}#lesson-console summary{cursor:pointer;font-weight:700}#console-output{white-space:pre-wrap;overflow:auto;max-height:150px;font-size:13px;background:var(--inset);padding:10px}#lesson-console .muted{font-size:12px}.stop-code{align-self:flex-end;margin:5px 12px;padding:6px 14px}#workspace:not([data-chapter=true]) .stop-code{display:none}#workspace:has(#portrait-stage:not([hidden])) .stop-code{display:block}
dialog{background:var(--panel);color:var(--ink);border-color:var(--edge)}dialog::backdrop{background:#201b1688}.dialog-x{position:absolute;right:12px;top:6px;color:#a22b35;font-size:26px;line-height:1;padding:6px 12px}#teacher-login{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#teacher-login input{width:170px;margin:0}.teacher-dialog .check-label{display:flex;justify-content:flex-start;gap:10px}.teacher-dialog .check-label input{width:20px!important;margin:0;flex:0 0 20px}#teacher-tools>button{margin:8px 9px 8px 0}#teacher-authoring-panel{margin-top:16px}#teacher-message{position:static}#teacher-tools h3{margin-top:24px}
#appearance-title,#appearance-settings{display:flex;gap:12px;flex-wrap:wrap}#appearance-title label,#appearance-settings label{display:flex;flex-direction:column;gap:6px;font-size:14px}#theme-setting{margin-left:12px}.edit-pencil{font-size:13px;color:var(--accent);border-style:dashed;margin-bottom:8px}.lesson-authoring #workspace{outline:2px dashed var(--accent);outline-offset:-4px}#lesson-author-dialog{width:min(840px,95vw)}#lesson-author-dialog input:not([type=checkbox]),#lesson-author-dialog textarea{width:100%;padding:10px}#author-fields .check-label{display:inline-flex;margin:8px 14px 8px 0}#author-code{font-family:ui-monospace,monospace}#coordinate-review-queue{border-top:1px solid var(--edge);margin-top:20px;padding-top:10px}#coordinate-review-queue button{margin:6px}#challenge-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#challenge-list h3{grid-column:1/-1;margin-top:20px;border-bottom:2px solid var(--edge);padding-bottom:8px}#challenge-list button{text-align:left;padding:14px}
body.reduce-motion #chapter-sparkles,body.reduce-motion #celebration{display:none!important}#success-panel,#repair-result-link,#chapter-result,#variables-result{display:none!important}
@media(max-width:820px){#workspace{height:auto;min-height:calc(100dvh - 180px)}#lesson-dock{padding:8px}#lesson-navigation .chapter-navigation{gap:5px}#lesson-navigation button{font-size:13px;padding:9px}#lesson-thumbnail{float:none;width:100%;max-height:200px;margin:0 0 16px}#challenge-list{grid-template-columns:1fr}#lesson-complete{top:18%}}
[hidden]{display:none!important}

#teacher-preview-banner button {color:var(--ink,#332c25)}
.navbar nav button[aria-pressed=true]{background:var(--mint);color:var(--panel);border-color:var(--mint)}
a{color:var(--accent)}#chapter-kicker,#variables-kicker,#instruction-kicker{color:var(--violet)}
#teacher-challenge{background:var(--panel);color:var(--ink);border-color:var(--edge)}
.dialog-x{position:sticky;top:0;float:right;z-index:5;background:var(--panel);margin-top:-12px;margin-right:-12px}
#toast{bottom:100px;pointer-events:none}

#lesson-thumbnail:not([src]){display:none}

/* Final shell overrides: classroom.css loads after story.css. */
:root{--error-ink:#8e2632}body[data-theme=charcoal]{--error-ink:#ffb3bb}
#chapter-answers button[aria-pressed=true],#variables-answers button[aria-pressed=true]{background:var(--inset);color:var(--ink);border:2px solid var(--accent)}
#chapter-feedback[data-error=true],#variables-feedback[data-error=true]{color:var(--error-ink);border-color:var(--error-ink)}
#challenge-search{background:var(--panel);color:var(--ink);border-color:var(--edge)}
#challenge-search::placeholder{color:var(--muted);opacity:1}
.hint-actions button+button{color:var(--ink)}
#variables-editor>label,#variables-values{color:var(--ink)}#variables-code-note{color:var(--muted)}
#workspace:not([hidden]){flex:1 1 auto;height:auto!important;min-height:0!important;padding-bottom:18px}
#lesson-dock{position:static;inset:auto;flex:0 0 auto;max-height:32dvh;overflow:auto;padding:10px 24px}
#lesson-complete{top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:820px){
  #workspace:not([hidden]){height:auto!important;min-height:calc(100dvh - 180px)!important;padding-bottom:10px}
  #lesson-dock{position:sticky;bottom:0;max-height:42dvh;padding:8px}
}
/* 2026-09-23 classroom review: reserve space instead of floating previews. */
#title-screen h1{font-size:clamp(3rem,7vw,5rem);margin:.2em 0}#title-screen .subtitle{max-width:36rem;margin:0 auto 1.2rem}
#workspace[data-briefing=true]>.instructions{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);column-gap:24px;align-content:start}
#workspace[data-briefing=true]>.instructions>:not(#lesson-thumbnail){grid-column:1}
#lesson-thumbnail{float:none;width:100%;margin:0;grid-column:2;grid-row:1/8;max-height:440px;align-self:start}
#workspace[data-briefing=true] #repair-instructions .try-card,#workspace[data-briefing=true] #repair-feedback{display:none}
#hall-progress{display:none}
body[data-scene=lesson] .navbar{padding:6px 12px;gap:8px}body[data-scene=lesson] .navbar button{min-height:36px;padding:6px 10px;font-size:14px}
body[data-scene=lesson] .brand b,body[data-scene=lesson] .brand span{display:none}
body[data-scene=lesson] .account-bar>span{display:none}
#workspace:not([hidden]){padding:10px;gap:10px}
#workspace>.play>.portrait-stage{width:100%;aspect-ratio:auto}
#workspace .panel-heading{padding:10px 12px}#workspace .panel-heading h2,#workspace .panel-heading p{margin:4px 0 0;font-size:17px}
#lesson-dock{padding:6px 12px}#lesson-navigation .chapter-navigation{margin:0;gap:8px}
#lesson-console{padding:6px 12px}#lesson-console>p{font-size:13px}
.bubble-right{left:auto;right:5%}.bubble-right:after{left:auto;right:25px;border-right:0;border-left:18px solid transparent}
.bubble{max-height:calc(100% - 100px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.bubble::-webkit-scrollbar{width:12px}.bubble::-webkit-scrollbar-track{background:#e6ddcc;border-radius:6px}.bubble::-webkit-scrollbar-thumb{background:#287666;border:2px solid #e6ddcc;border-radius:6px}
@media(max-height:600px){#workspace>.play>.room-stage:has(.bubble:not([hidden])){overflow:visible}.bubble,.bubble-right{width:min(600px,calc(100vw - 64px));left:50%;right:auto;bottom:4px;transform:translateX(-50%);max-height:calc(100% - 12px);z-index:2}}
.bubble[data-speaker=Dot]:before{content:'Dot';font-weight:700;color:#287666}
/* The library conversation sits below the room so Dot remains visible. The
   pointer tracks the speaker's room position, including at short viewports. */
body[data-room=library] #workspace>.play:has(.bubble:not([hidden])){overflow:auto}
body[data-room=library] #workspace>.play>.room-stage:has(.bubble:not([hidden])){overflow:visible;flex:0 0 auto;aspect-ratio:auto;max-height:none;width:min(880px,100%,max(400px,calc((100dvh - var(--story-toolbar-height,96px) - 260px) * 1.77778)))}
body[data-room=library] #workspace:has(.bubble:not([hidden])) #room-controls{display:none}
body[data-room=library] .bubble{position:relative;left:auto;right:auto;bottom:auto;transform:none;width:calc(100% - 24px);max-height:none;overflow:visible;margin:20px 12px 12px}
body[data-room=library] .bubble:after{top:-16px;bottom:auto;left:var(--speaker-x,50%);right:auto;border-top:0;border-bottom:18px solid #fff9ed;border-left:0;border-right:18px solid transparent}
.tour-shade{position:fixed;inset:0;background:#101820aa;z-index:30}.tour-target{position:relative;z-index:31;outline:4px solid #e2aa30!important;outline-offset:4px}.portrait-tour{position:fixed;z-index:32;width:min(310px,calc(100vw - 24px));background:#fffaf0;color:#322d2a;border:2px solid #287666;border-radius:12px;padding:16px;box-shadow:0 4px 22px #0004}.portrait-tour p{margin:0 0 12px}
@media(max-width:820px){#workspace[data-briefing=true]>.instructions{display:block}#lesson-thumbnail{max-height:220px;width:100%;margin:0 0 16px}body[data-scene=lesson] .navbar nav{order:0;width:auto}.portrait-tour{max-width:270px}}
.coordinate-intro fieldset{margin:12px 0;border:1px solid var(--edge);border-radius:8px}.coordinate-intro button{margin:4px;font-size:15px}.origin-diagrams{display:flex;gap:12px}.origin-diagrams figure{margin:0;flex:1}.origin-diagrams svg{width:100%;max-height:160px}.origin-diagrams figcaption{font-size:14px}
.dot-call{display:flex;align-items:center;gap:14px;font-size:19px}.dot-face{display:flex;justify-content:space-around;align-items:center;width:60px;height:42px;flex-shrink:0;background:#bde0da;border:3px solid #286c65;border-radius:14px}.dot-face i{width:8px;height:12px;background:#183f4b;border-radius:50%;animation:dot-blink 6s infinite}@keyframes dot-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.coordinate-board{position:relative;width:100%;max-width:680px;aspect-ratio:680/460;background:#fffaf0;border-radius:8px}.coordinate-grid{position:absolute;inset:0}.coordinate-grid svg{width:100%;height:100%;color:#322d2a}.coordinate-grid path{stroke:#bcb6aa;fill:none}.coordinate-grid text{font:14px monospace;fill:#322d2a}.coordinate-object{position:absolute;transform:translate(-50%,-50%);padding:0;width:32px;height:32px;min-height:0;border-radius:50%;background:#287666;color:white;border:2px solid #173f38;font-weight:700}.grid-status{font:14px monospace;margin:.4rem 0}.reset-notice{padding:12px 20px;background:#deeee6;border-bottom:2px solid #287666;display:flex;align-items:center;justify-content:space-between;gap:16px}.reset-notice p{margin:0}
#arcade-wallet{position:absolute;top:14px;left:18px;display:flex;align-items:center;gap:8px;background:#fffaf0;color:#322d2a;padding:5px 12px;border-radius:20px;font-size:20px;border:2px solid #ba8c27}body:not([data-room=arcade]) #arcade-wallet{display:none}.arcade-coin,.arcade-funds{color:#795817}.arcade-coin{font-size:28px;text-shadow:1px 1px #f5ce59}#arcade-dialog{width:min(680px,calc(100% - 24px));max-width:680px}#arcade-dialog canvas{display:block;width:min(100%,calc((90dvh - 240px)*1.3333));height:auto;margin:8px auto;border:2px solid var(--edge);border-radius:8px}#arcade-dialog button{min-width:100px;min-height:40px}.arcade-hearts{color:#a43f3f;font-size:26px;letter-spacing:5px}.coin-spent{animation:coin-spend .6s ease-out}@keyframes coin-spend{50%{transform:translateY(-8px);opacity:.5}100%{transform:none;opacity:1}}
body[data-local-author=true]:has(#title-screen:not([hidden])) .utilities{display:flex}body[data-local-author=true]:has(#title-screen:not([hidden])) .utilities button:not(#teacher-open){display:none}
@media(min-width:821px){.title-screen{padding:18px 24px;margin:10px auto}.title-art{height:84px;margin:0 auto}.title-art canvas{width:84px;height:84px}#title-screen h1{font-size:3.8rem;margin:.1em 0}#title-screen .subtitle{margin-bottom:10px}#start-form{gap:8px}#start-form fieldset{margin:8px 0}.avatar-choice{padding:6px 12px}#appearance-title{margin:8px 0}#appearance-title label{margin:0}}
#repair-instructions>.try-card{display:none}#code-tip{padding:0 12px;font-size:14px;line-height:1.5;margin:12px 0 0}#workspace[data-chapter=true] #code-tip{display:none}body[data-scene=lesson] .navbar{min-height:0}body[data-scene=lesson] .navbar>.brand{display:none}body[data-scene=lesson] .navbar nav{margin-right:auto}
/* One in-app Home action, consistently first, retains the normal save path. */
.navbar>#home{border:0;background:transparent;padding:4px;flex-shrink:0;opacity:1}
body[data-scene=lesson] .navbar>#home{display:inline-flex;margin-right:0}
body[data-scene=lesson] #home b{display:block;font-size:17px;padding:6px 9px}
#editable-lines .value-input{background:#f0d78e;color:#302615;border:2px solid #a77923}
#chapter-instructions:has(.coordinate-board) #chapter-body{display:none}#chapter-instructions:has(.coordinate-board) #chapter-title{font-size:24px;margin:6px 0}#chapter-instructions:has(.coordinate-board) #chapter-kicker{margin:6px 0}#chapter-special:has(.coordinate-board)>p{margin:6px 0;font-size:14px}.coordinate-board{max-width:560px}.dot-call{margin:8px 0}
body:has(#workspace[data-chapter-reading=true]) .navbar .stop-code,body:has(#workspace[data-pilot=true]) .navbar .stop-code{display:none}
.dot-face i{translate:var(--look-x,0) var(--look-y,0)}.reduce-motion .dot-face i{translate:none}@media(prefers-reduced-motion:reduce){.dot-face i{translate:none}}
/* Opening arcade: fixed stage prevents start/loading/game-over layout shifts. */
#arcade-dialog{width:min(800px,calc(100vw - 32px));max-width:800px;max-height:calc(100dvh - 24px);padding:20px;overflow:auto;scrollbar-gutter:auto}
#arcade-dialog .arcade-stage{position:relative;width:100%;aspect-ratio:12/7;max-height:calc(100dvh - 250px);background:linear-gradient(145deg,#102d39,#285953);border-radius:12px;overflow:hidden}
#arcade-dialog canvas{display:block;width:100%;height:100%;object-fit:contain;border:0;margin:0;border-radius:12px;touch-action:none}
#arcade-dialog canvas[hidden]{display:none}
#arcade-dialog .arcade-hud{height:36px;display:flex;justify-content:space-between;align-items:center;font-size:22px}
#arcade-dialog .arcade-hud[hidden]{visibility:hidden;display:flex!important}
#arcade-dialog .arcade-hearts{font-size:28px;line-height:1;letter-spacing:4px;color:#a33748}
#arcade-dialog .arcade-actions{height:52px;display:flex;gap:8px;align-items:center;justify-content:flex-end}
#arcade-dialog #arcade-start{min-width:190px}
#arcade-status{min-height:26px;overflow-wrap:anywhere;font-size:14px}
#arcade-dialog>p{min-height:24px;font-size:15px}
.arcade-spend{position:absolute;left:calc(50% - 36px);top:25%;color:#ffd166;font-size:32px;font-weight:800;pointer-events:none;animation:arcade-spend .6s ease-out forwards}
@keyframes arcade-spend{to{opacity:0;transform:translateY(-35px) rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){.arcade-spend,.coin-spent{animation:none}.arcade-spend{opacity:.8}}
@media(max-height:680px){#arcade-dialog{padding:12px}#arcade-dialog .arcade-stage{max-height:calc(100dvh - 220px)}}