:root { color-scheme: dark; --ink:#fff9e9; --muted:#ced6c5; --gold:#f5d87b; --panel:#243f35; --line:#70836a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; color:var(--ink); background:radial-gradient(ellipse at top,#385b43,#142b27 75%); font-family:'Segoe UI',sans-serif; display:flex; }
button,.button { min-height:44px; border:1px solid #bca561; border-radius:12px; padding:10px 16px; background:var(--gold); color:#202b24; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; touch-action:manipulation; }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
button.secondary,.button.secondary { background:#29473c; color:var(--ink); }
[hidden] { display:none!important; }
h1,h2,p { margin-top:0; } p { line-height:1.5; }
#sidebar-controls { flex:0 0 160px; padding:20px 12px; background:#102722c9; height:100dvh; position:sticky; top:0; overflow:auto; }
.home-link { color:var(--gold); display:block; margin-bottom:24px; }
#sidebar-controls h2 { font-size:1rem; }
#level-list { display:grid; gap:8px; }
#level-list button { width:100%; background:#29473c; color:var(--ink); }
#level-list button[aria-current=true] { background:var(--gold); color:#202b24; }
.nav-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; margin:14px 0 2px; color:var(--muted); }
body.tower-door-session #sidebar-controls { display:none; }
#workshop { width:min(100%,1050px); min-width:0; margin:0 auto; padding:22px clamp(12px,3vw,38px); }
.workshop-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.eyebrow { text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--gold); }
h1 { font-size:clamp(1.25rem,3vw,1.8rem); margin:3px 0 0; }
.header-actions { display:flex; flex-wrap:wrap; gap:8px; }
.header-actions button,.header-actions a { font-size:.82rem; }
.progress-strip { display:flex; justify-content:space-between; gap:12px; font-size:.88rem; color:var(--muted); border-top:1px solid #ffffff26; padding:12px 0; }
#activity { min-height:300px; }
.intro,.demonstration,.completion { text-align:center; max-width:620px; margin:20px auto; padding:24px; border:1px solid #bca56166; border-radius:24px; background:#203b32d9; }
.intro h2,.demonstration h2 { margin:18px 0 10px; }
.sound-emblem { font-family:'Comic Sans MS','Chalkboard SE',sans-serif; font-size:5rem; width:130px; height:130px; border-radius:32px; box-shadow:0 8px 0 #9a6f2d; }
.activity-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:8px 0 18px; }
.activity-heading h2 { font-size:clamp(1.05rem,2.5vw,1.5rem); margin:0 0 4px; }
.activity-heading p { color:var(--muted); margin:0; font-size:.92rem; }
.listen-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sort-layout { display:grid; grid-template-columns:minmax(0,1fr) 180px; align-items:center; gap:24px; }
.picture-board,.letter-board { display:grid; gap:18px; padding:20px; border:1px dashed #91b49466; border-radius:24px; background:#ffffff05; }
.picture-board { grid-template-columns:repeat(2,minmax(100px,1fr)); }
.picture-card { width:100%; min-height:130px; background:#fff8e7; color:#283428; border:3px solid #d8ba78; border-radius:20px; flex-direction:column; position:relative; padding:14px; }
.picture-icon { font-size:clamp(2.6rem,6vw,4rem); line-height:1.2; pointer-events:none; }
.picture-caption { font-size:.95rem; min-height:22px; pointer-events:none; }
.picture-card.selected,.letter-tile.selected { outline:4px solid #82dfc1; outline-offset:3px; }
.floating { animation:drift 4.5s ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes drift { 0%,100% { transform:translateY(-4px) rotate(-1deg); } 50% { transform:translateY(4px) rotate(1deg); } }
.motion-paused .floating,.audio-busy .floating,.has-selection .floating,.answered .floating,.dragging .floating { animation-play-state:paused; }
.chest { min-height:160px; width:100%; flex-direction:column; background:linear-gradient(#966137,#633d25); color:#fff2cc; border:5px solid #ddba68; box-shadow:inset 0 0 0 3px #573a26,0 8px 0 #14241d; border-radius:26px 26px 16px 16px; }
.chest span { font-size:2.8rem; font-family:'Comic Sans MS',sans-serif; }
.chest small { font-size:.75rem; font-weight:400; }
.chest.drop-hover,.slot.drop-hover { outline:4px solid #82dfc1; }
.feedback { min-height:48px; padding:14px 0 5px; font-weight:600; line-height:1.5; text-align:center; }
.feedback[data-tone=success] { color:#aaf0cc; }
.feedback[data-tone=retry] { color:#ffe1a3; }
.audio-notice { color:#ffe1a3; text-align:center; }
#activity-actions { min-height:56px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.forge-layout { display:flex; flex-direction:column; align-items:center; gap:22px; }
.letter-board { width:100%; max-width:640px; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.letter-tile,.slot { width:clamp(54px,9vw,82px); height:clamp(62px,10vw,88px); padding:6px; font-family:'Comic Sans MS','Chalkboard SE',sans-serif; font-size:clamp(1.5rem,4vw,2.3rem); }
.letter-tile { color:white; background:linear-gradient(135deg,#477e9a,#306253 55%,#173f43); border:3px solid #9ad6c0; box-shadow:inset 0 0 12px #f8ffe344,0 5px 0 #112c2b; border-radius:24px 12px; }
.word-rack { width:100%; max-width:660px; border:2px solid #bca561; border-radius:22px; background:linear-gradient(#4b4b35,#303d2d); padding:22px 12px; text-align:center; }
.slots { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.slot { background:#152d28; color:var(--ink); border:2px dashed #bca561; }
.slot:disabled { opacity:1; }
.slot.filled { border-style:solid; background:#39644b; }
.rack-label { display:block; font-size:.76rem; color:var(--muted); margin-top:16px; }
.word-reveal { font-size:2rem; color:var(--gold); margin:16px 0 0; letter-spacing:.08em; }
.sound-pair { display:flex; justify-content:center; gap:16px; margin:24px 0; }
.sound-pair button { background:#355d4a; color:var(--ink); border:2px solid var(--gold); border-radius:15px; padding:14px 28px; font-size:2.8rem; font-family:'Comic Sans MS',sans-serif; }
.reward { font-size:4rem; margin:0 0 12px; }
.completion p { color:var(--muted); }
#collection { margin-top:24px; border-top:1px solid #ffffff26; padding-top:14px; }
#collection h2 { font-size:.9rem; color:var(--muted); }
#collected-words { display:flex; gap:8px; flex-wrap:wrap; }
#collected-words button { background:#294b3b; color:var(--gold); }
.drag-ghost { position:fixed; pointer-events:none; z-index:1000; opacity:.9; animation:none!important; margin:0; }
.draggable { touch-action:none; user-select:none; -webkit-user-select:none; }
.dialog-row { padding:12px 0; border-bottom:1px solid #ffffff30; }
dialog { width:min(92vw,520px); border:1px solid var(--gold); border-radius:20px; padding:26px; color:var(--ink); background:#203b32; max-height:85dvh; }
dialog::backdrop { background:#061b16cc; }
@media (prefers-reduced-motion:reduce) { .floating { animation:none; } }
@media (max-width:760px) {
 body { flex-direction:column; }
 #sidebar-controls { flex:auto; position:static; width:100%; height:auto; padding:10px 12px; }
 #sidebar-controls h2,.home-link,.nav-label { display:none; }
 #level-list { display:flex; overflow-x:auto; padding:4px 0; }
 #level-list button { flex:0 0 auto; width:auto; }
 #workshop { padding:12px; }
 .workshop-header { flex-wrap:wrap; margin-bottom:8px; }
 .header-actions { gap:6px; }
 .sort-layout { gap:12px; grid-template-columns:minmax(0,1fr) 130px; }
 .picture-board { padding:12px; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .picture-card { min-height:110px; padding:8px; }
 .activity-heading { flex-wrap:wrap; }
 .intro,.demonstration,.completion { margin:10px auto; padding:18px; }
}
@media (max-width:420px) {
 .sort-layout { grid-template-columns:1fr; }
 .chest { min-height:70px; flex-direction:row; gap:12px; }
 .chest span { font-size:2rem; }
 .chest small { display:none; }
 .picture-card { min-height:110px; }
 .letter-board { gap:12px; padding:14px 8px; }
 .slots { gap:6px; }
 .slot,.letter-tile { width:52px; height:62px; font-size:1.65rem; }
 .slot { width:min(52px,calc((100vw - 80px)/5)); }
 .header-actions button,.header-actions a { padding:8px 10px; }
}
@media (orientation:landscape) and (max-height:550px) {
 #workshop { padding-top:8px; }
 .workshop-header { margin-bottom:4px; }
 .progress-strip { padding:6px 0; }
 .activity-heading { margin:4px 0 10px; }
 .picture-board { grid-template-columns:repeat(4,minmax(0,1fr)); padding:12px; gap:10px; }
 .picture-card { min-height:108px; }
 .picture-icon { font-size:2.7rem; }
 .chest { min-height:108px; }
 #activity { min-height:0; }
 .intro { padding:14px; margin:0 auto; }
 .sound-emblem { width:86px; height:86px; font-size:3.5rem; }
 .intro h2 { margin:10px 0 6px; }
 .intro p { margin-bottom:8px; }
 .forge-layout { gap:12px; }
 .word-rack { padding:12px; }
 .letter-board { padding:12px; }
}