@font-face { font-family: 'andika'; src: url('../munch/fonts/andika-bold.woff2') format('woff2'); font-weight: 700 900; font-display: block; }
:root { --font: 'andika', 'Century Gothic', system-ui, sans-serif; --ink: #1d2a22; --leaf: #2f6a3a; --sun: #ffd84a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2f6a3a; color: #fff; font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
button { font: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ── lobby */
#lobby { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, #0000 0, #0008 80%); overflow: auto; padding: 2vh 16px; }
.lobby-card { text-align: center; width: min(1200px, 100%); }
.logo { margin: 0; line-height: .82; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; filter: drop-shadow(0 6px 0 #0006); }
.logo span { display: block; }
.logo .mega { font-size: clamp(24px, 5.5vh, 54px); letter-spacing: 6px; color: #ff7a45; -webkit-text-stroke: 3px #6a1a08; paint-order: stroke fill; margin-bottom: .8vh; }
.logo span:nth-child(2) { font-size: clamp(44px, 12vh, 120px); color: var(--sun); -webkit-text-stroke: 3px #6a4208; paint-order: stroke fill; }
.logo span:last-child { font-size: clamp(32px, 8vh, 82px); color: #8ee06a; -webkit-text-stroke: 3px #143a1a; paint-order: stroke fill; }
.lobby-hint { font-size: clamp(16px, 3.2vh, 28px); text-shadow: 0 2px 4px #000a; margin: 1.6vh 0; }
.lobby-hint b, .seat b { color: var(--sun); }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5vw; }
.seat { background: #0007; border: 4px dashed #fff5; border-radius: 22px; padding: 1.2vh 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 24vh; transition: transform .15s; }
.seat.in { border: 5px solid var(--c); background: color-mix(in srgb, var(--c) 22%, #000a); }
.seat.ready { transform: scale(1.04); box-shadow: 0 0 0 4px #fff, 0 0 30px var(--c); }
.seat canvas { width: 100%; max-width: 240px; height: auto; aspect-ratio: 240 / 170; max-height: 17vh; object-fit: contain; }
.seat b { font-size: clamp(15px, 2.8vh, 26px); color: #fff; line-height: 1.1; }
.seat small { font-size: clamp(12px, 2vh, 17px); opacity: .9; margin-top: 3px; }
.seat .empty { font-size: 9vh; opacity: .5; }
.lobby-btns { display: flex; gap: 12px; justify-content: center; margin: 1.8vh 0 1vh; }
.lobby-btns .big { background: var(--sun); color: #3a2400; font-size: clamp(20px, 3.6vh, 32px); font-weight: 900; padding: .5em 2em; border-radius: 999px; box-shadow: 0 5px 0 #a0700a; }
.lobby-btns .big:disabled { opacity: .45; cursor: default; }
.lobby-btns .small { background: #fff3; color: #fff; font-size: clamp(14px, 2.4vh, 20px); padding: .5em 1.2em; border-radius: 999px; }
.book-title { margin: 1vh 0 .6vh; font-size: clamp(14px, 2.4vh, 20px); text-shadow: 0 2px 3px #000a; }
.book { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 1100px; margin: 0 auto; }
.bk { width: clamp(28px, 4.2vh, 56px); aspect-ratio: 72 / 54; background: #0006; border-radius: 8px; padding: 1px; }
.bk.has { background: #fff3; }
.bk canvas { width: 100%; height: 100%; display: block; }
.lobby-small { font-size: clamp(11px, 1.8vh, 15px); opacity: .75; cursor: pointer; margin-top: 1.4vh; }
.back-home { position: fixed; left: 14px; top: 10px; color: #fffa; font-size: 14px; text-decoration: none; }

/* ── hud */
#hud { position: fixed; inset: 0; pointer-events: none; }
.top { position: absolute; top: 1.2vh; left: 1.2vw; display: flex; gap: 10px; }
.top span { background: #000a; border-radius: 999px; padding: .2em .8em; font-size: clamp(16px, 3vh, 30px); font-weight: 900; }
#nav { position: absolute; top: 1.2vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
#ship { display: flex; align-items: center; gap: 2px; background: #000a; border: 3px solid #4ae0ff; border-radius: 999px; padding: 2px 10px 2px 4px; height: clamp(40px, 6.5vh, 60px); box-sizing: border-box; }
#ship svg { width: clamp(30px, 5vh, 46px); height: clamp(30px, 5vh, 46px); fill: #4ae0ff; stroke: #0a2a3a; stroke-width: 1.2; transition: transform .15s linear; }
#ship span { font-size: clamp(18px, 3.2vh, 30px); }
#ship b { font-size: clamp(13px, 2.2vh, 20px); color: var(--sun); margin-left: 4px; font-variant-numeric: tabular-nums; }
#ship b:empty { display: none; }
#ship.soon { border-color: var(--sun); animation: bob 0.6s ease-in-out infinite; }
#ship.soon svg { fill: var(--sun); }
#quest { display: flex; align-items: center; gap: 6px; background: #2a1e00d0; border: 3px solid var(--sun); border-radius: 999px; padding: 2px 14px 2px 4px; height: clamp(40px, 6.5vh, 60px); box-sizing: border-box; }
#quest canvas { width: auto; height: 100%; }
#quest small { display: block; font-size: clamp(10px, 1.5vh, 14px); color: #ffe9a0; line-height: 1; }
#quest b { display: block; font-size: clamp(14px, 2.4vh, 22px); color: #fff; line-height: 1.1; white-space: nowrap; }
@keyframes bob { 50% { transform: translateY(3px); } }
#card { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); transform-origin: 50% 0; display: flex; align-items: center; gap: 12px; background: #fffffff0; color: var(--ink); border-radius: 22px; padding: 8px 20px 8px 8px; box-shadow: 0 8px 0 #0003; max-width: min(88vw, 640px); opacity: .9; transition: transform .6s ease, top .6s ease; }
/* after the first look it tucks itself smaller, so the voice can keep reading while you play */
#card.mini { top: 6px; transform: translateX(-50%) scale(.6); }
#card.go { animation: card-in .5s cubic-bezier(.3, 1.6, .5, 1), card-fade 6s linear forwards; }
#card canvas { width: clamp(90px, 15vh, 160px); height: auto; background: #e8f4d8; border-radius: 14px; }
#card small { display: block; font-size: clamp(13px, 2vh, 18px); color: #2f8a3a; font-weight: 900; }
#card b { display: block; font-size: clamp(20px, 3.8vh, 34px); line-height: 1.05; }
#card p { margin: 4px 0 0; font-size: clamp(13px, 2.1vh, 19px); line-height: 1.25; }
#card p.fact { color: #2f6a3a; font-weight: 700; }
@keyframes pop { from { transform: translateX(-50%) scale(.4); } }
@keyframes card-in { from { transform: translateX(-50%) scale(.4); } }
@keyframes card-fade { 85% { opacity: .9; } to { opacity: 0; } }
#chips { position: absolute; left: 0; right: 0; bottom: calc(1.4vh + clamp(36px, 6vh, 54px)); display: flex; justify-content: center; gap: 1vw; padding: 0 1vw; }
.chip { position: relative; flex: 0 1 25%; display: flex; align-items: center; gap: 8px; background: #000b; border: 4px solid var(--c); border-radius: 18px; padding: 4px 10px 4px 4px; min-width: 0; }
.chip canvas { width: clamp(54px, 8vh, 96px); height: auto; flex: none; }
.chip div { min-width: 0; }
.chip b { display: block; font-size: clamp(13px, 2.4vh, 22px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .carry { display: block; font-size: clamp(14px, 2.6vh, 24px); min-height: 1.2em; }
.chip .carry i { font-size: .7em; opacity: .6; font-style: normal; }
.chip small { display: block; font-size: clamp(9px, 1.5vh, 14px); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip em { position: absolute; inset: 0; display: grid; place-items: center; background: #000c; border-radius: 14px; font-style: normal; font-size: clamp(12px, 2.2vh, 20px); }
/* the timeline: eras oldest to newest along the bottom edge */
#timeline { position: absolute; left: 50%; bottom: 0.6vh; transform: translateX(-50%); width: min(94vw, 1100px); height: clamp(36px, 6vh, 54px); display: flex; pointer-events: none; }
#timeline .line, #timeline .fill { position: absolute; left: 0; top: 34%; height: 5px; border-radius: 3px; transform: translateY(-50%); }
#timeline .line { right: 0; background: #0008; box-shadow: 0 0 0 2px #fff4; }
#timeline .fill { background: #4ae0ff; transition: width 1.2s ease; }
#timeline .t-era { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; }
#timeline .dot { width: 12px; height: 12px; margin-top: calc(clamp(36px, 6vh, 54px) * .34 - 6px); border-radius: 50%; background: #2a3a44; border: 2px solid #fff9; box-sizing: border-box; }
#timeline .been .dot { background: #5fd35a; }
#timeline small { font-size: clamp(9px, 1.45vh, 13px); color: #fffc; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; margin-top: 4px; text-align: center; line-height: 1.15; }
#timeline .here small { color: var(--sun); font-weight: 900; }
#timeline .aim .dot { background: var(--sun); box-shadow: 0 0 0 4px #ffd84a66; }
#timeline .aim small { color: var(--sun); }
#timeline .you { position: absolute; top: 34%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--sun); box-sizing: border-box; box-shadow: 0 0 0 2px #0008, 0 0 12px #ffd84a; transition: left 1.2s ease; }
#timeline .you::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--sun); animation: here-pulse 1.8s ease-out infinite; }
#timeline .you i { position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); border: 7px solid transparent; border-top: 9px solid var(--sun); border-bottom: 0; filter: drop-shadow(0 1px 1px #000a); }
@keyframes here-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
#timeline small em { display: block; font-style: normal; font-weight: 600; font-size: .82em; color: #fffa; text-align: center; }
#timeline .here small em { color: var(--sun); }
@media (max-width: 720px) { #timeline small { display: none; } #timeline .here small, #timeline .aim small { display: block; } }
@media (max-aspect-ratio: 1/1) { .seats { grid-template-columns: repeat(2, 1fr); } #chips { flex-wrap: wrap; } .chip { flex-basis: 45%; } }

/* ── lobby: tap to join, arrows for touch and mouse players, the book by era */
.seat { position: relative; }
.seat.tap { cursor: pointer; }
.seat.tap:hover { border-color: #fffa; }
.seat .arrow { position: absolute; top: 22%; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 #0005; }
.seat .arrow.l { left: 6px; } .seat .arrow.r { right: 6px; }
.book { flex-direction: column; align-items: center; gap: 6px; }
.book .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.book .row > b { font-size: clamp(11px, 1.8vh, 15px); color: var(--sun); min-width: 6.5em; text-align: right; margin-right: 6px; text-shadow: 0 2px 3px #000a; }

/* ── time machine: pick an era */
#eras { pointer-events: auto; z-index: 6; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1.4vh; width: min(96vw, 1200px); background: #071626e8; border: 4px solid #4ae0ff66; border-radius: 26px; padding: 1.6vh 1.4vw 1.4vh; box-sizing: border-box; }
#eras button { font: inherit; color: inherit; cursor: pointer; }
#eras .eras-head { font-size: clamp(18px, 3.4vh, 32px); font-weight: 900; color: var(--sun); }
#eras .eras-head em { font-style: normal; font-size: .6em; color: var(--c); margin-left: .6em; background: #000a; border-radius: 999px; padding: .15em .7em; vertical-align: middle; }
#eras .tl { position: relative; display: flex; width: 100%; }
#eras .tl .track, #eras .tl .past { position: absolute; left: 0; top: clamp(24px, 4.4vh, 44px); height: 6px; border-radius: 3px; transform: translateY(-50%); }
#eras .tl .track { right: 0; background: #ffffff30; }
#eras .tl .past { background: #4ae0ff; }
#eras .stop { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; transition: transform .15s; }
#eras .stop canvas { width: clamp(48px, 8.8vh, 88px); height: auto; aspect-ratio: 96 / 68; background: #183850; border: 3px solid #4ae0ff55; border-radius: 16px; position: relative; }
#eras .stop canvas.sil { filter: brightness(2.6) saturate(.6); }
#eras .stop span { font-size: clamp(10px, 1.7vh, 16px); color: #bff4ff; white-space: nowrap; }
#eras .stop i { position: absolute; top: -6px; right: calc(50% - clamp(24px, 4.4vh, 44px)); font-style: normal; font-size: clamp(14px, 2.4vh, 22px); }
#eras .stop.here canvas { border-color: var(--sun); }
#eras .stop.on { transform: scale(1.18); z-index: 1; }
#eras .stop.on canvas { border-color: #4ae0ff; background: #1f5a80; box-shadow: 0 0 26px #4ae0ffaa; }
#eras .stop.on span { color: var(--sun); font-weight: 900; }
#eras .detail { position: relative; display: flex; align-items: center; gap: 1.4vw; width: min(100%, 860px); background: #0f3150; border: 3px solid #4ae0ff; border-radius: 20px; padding: 1vh 1.2vw; box-sizing: border-box; }
#eras .detail .stars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; flex: none; width: clamp(130px, 26vh, 240px); }
#eras .detail .stars canvas { width: 100%; height: auto; background: #183850; border-radius: 10px; }
#eras .detail .stars canvas.sil { filter: brightness(2.6) saturate(.6); opacity: .8; }
#eras .detail .txt { flex: 1; min-width: 0; }
#eras .detail b { display: block; font-size: clamp(20px, 4vh, 38px); color: var(--sun); }
#eras .detail small { display: block; font-size: clamp(12px, 2vh, 18px); color: #bff4ff; }
#eras .detail p { margin: .5vh 0; font-size: clamp(13px, 2.2vh, 20px); line-height: 1.25; }
#eras .detail span { font-size: clamp(12px, 2vh, 18px); opacity: .85; }
#eras .detail .go { flex: none; background: var(--sun); color: #3a2a00; border: 0; border-radius: 999px; padding: .5em 1.1em; font-size: clamp(16px, 3vh, 28px); font-weight: 900; box-shadow: 0 5px 0 #a8860a; }
#eras .era-help { text-align: center; font-size: clamp(13px, 2.2vh, 20px); background: #000a; border-radius: 999px; padding: .3em 1em; }
#eras .close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #ffffff22; font-size: 22px; }
@media (max-width: 760px) {
  #eras .stop span { display: none; }
  #eras .stop.on span, #eras .stop.here span { display: block; position: absolute; top: 100%; font-size: 11px; }
  #eras .tl { margin-bottom: 14px; }
  #eras .detail { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 760px), (max-height: 520px) {
  #eras { max-height: 96vh; overflow-y: auto; gap: 1vh; }
  #eras .detail { flex-wrap: wrap; justify-content: center; }
  #eras .detail .stars { grid-template-columns: repeat(4, auto); width: auto; justify-content: center; }
  #eras .detail .stars canvas { width: auto; height: clamp(34px, 11vh, 70px); }
}

/* ── touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#stickzone { position: absolute; left: 0; bottom: 0; width: 50%; height: 75%; pointer-events: auto; touch-action: none; }
#stickzone .hint { position: absolute; left: 6vw; bottom: 5vh; font-size: 14px; opacity: .55; text-shadow: 0 1px 3px #000; }
#stickbase { position: absolute; width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border-radius: 50%; background: #fff3; border: 3px solid #fff8; }
#stickknob { position: absolute; left: 50%; top: 50%; width: 9vmin; height: 9vmin; border-radius: 50%; background: #fffe; box-shadow: 0 3px 0 #0005; transform: translate(-50%, -50%); }
#tbtns { position: absolute; right: max(3vw, env(safe-area-inset-right)); bottom: max(4vh, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, 15vmin); grid-template-rows: repeat(2, 15vmin); gap: 2.5vmin; pointer-events: auto; }
#tbtns button { border-radius: 50%; font-size: 6vmin; font-weight: 900; color: #fff; border: 4px solid #0006; box-shadow: 0 5px 0 #0006; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; touch-action: none; }
#tbtns button small { font-size: 2.4vmin; font-weight: 700; opacity: .9; }
#tbtns button.down { transform: translateY(4px); box-shadow: 0 1px 0 #0006; }
#tbtns .a { background: #2fbf5f; } #tbtns .b { background: #e8392a; } #tbtns .x { background: #2a9df4; } #tbtns .y { background: #ffb02e; }
body.touching #chips { bottom: auto; top: 1vh; left: auto; right: 1vw; justify-content: flex-end; }
body.touching #chips .chip { flex-basis: auto; }
body.touching #chips .chip small { display: none; }
body.touching #nav { top: 8vh; }

/* ── tall phones: everything sized to the narrow side so Play stays on screen */
@media (max-aspect-ratio: 1/1) {
  .logo .mega { font-size: min(5.5vh, 8vw); }
  .logo span:nth-child(2) { font-size: min(12vh, 17vw); }
  .logo span:last-child { font-size: min(8vh, 12vw); }
  .lobby-hint { font-size: min(3.2vh, 4.6vw); margin: 1vh 0; }
  .seats { gap: 2.5vw; }
  .seat { min-height: 0; padding: 1vh 6px; border-width: 3px; }
  .seat canvas { max-height: 11vh; }
  .seat .empty { font-size: 6vh; }
  .seat b { font-size: min(2.8vh, 4.6vw); }
  .seat small { font-size: min(2vh, 3.4vw); }
  .lobby-btns .big { font-size: min(3.6vh, 6vw); }
  .lobby-btns .small { font-size: min(2.4vh, 4vw); }
  #tbtns { grid-template-columns: repeat(2, 17vmin); grid-template-rows: repeat(2, 17vmin); }
  .top { flex-wrap: wrap; gap: 6px; right: 1.2vw; }
  .top span { font-size: min(3vh, 4.6vw); }
  body.touching #chips { top: calc(2vh + min(3vh, 4.6vw) * 2.2); left: 1vw; right: auto; justify-content: flex-start; }
  #card { top: 22vh; }
}
body.touching #timeline { width: min(46vw, 520px); }
body.picking #stickzone { pointer-events: none; }
.chip.asleep { flex: none; padding: 6px 14px; font-size: clamp(13px, 2.2vh, 20px); font-weight: 700; }

/* ── the drawing studio */
#studio { position: fixed; inset: 0; z-index: 20; background: #2f6a3a; display: flex; flex-direction: column; color: #fff; touch-action: none; }
#studio button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#studio header { display: flex; align-items: center; gap: 12px; padding: 1.2vh 16px; font-size: clamp(18px, 3.2vh, 30px); }
#studio header b { flex: 1; color: var(--sun); text-shadow: 0 2px 3px #0006; }
#studio .st-x, #studio .st-back-pick { width: 1.8em; height: 1.8em; border-radius: 50%; background: #0004; font-size: .9em; }
.st-pick { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.st-grid { flex: 1; overflow-y: auto; touch-action: pan-y; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 16px 16px; align-content: start; }
.st-card { display: flex; flex-direction: column; align-items: center; background: #fffdf6 !important; color: var(--ink) !important; border-radius: 16px; padding: 6px 4px 8px; box-shadow: 0 4px 0 #0003; border: 4px solid transparent !important; }
.st-card canvas { width: 100%; height: auto; }
.st-card span { font-size: 14px; font-weight: 900; }
.st-card.on, .st-card:hover { border-color: var(--sun) !important; transform: scale(1.04); }
.st-ready, .st-done, .st-lesson { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.st-ready-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 16px 3vh; text-align: center; }
.st-ready-body .st-pic { max-width: min(80vw, 720px); max-height: 46vh; width: auto; height: auto; background: #fffdf6; border-radius: 24px; box-shadow: 0 6px 0 #0003; }
.st-ready-body p { margin: 0; font-size: clamp(22px, 4.6vh, 44px); font-weight: 900; line-height: 1.25; text-shadow: 0 2px 3px #0006; }
.st-go, .st-next { background: var(--sun) !important; color: #3a2400 !important; font-size: clamp(22px, 4vh, 36px) !important; font-weight: 900; padding: .45em 1.6em !important; border-radius: 999px !important; box-shadow: 0 5px 0 #a0700a; }
.st-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.st-row button { background: #fff !important; color: var(--ink) !important; padding: .5em 1.3em !important; border-radius: 999px !important; font-weight: 900; font-size: clamp(17px, 2.8vh, 26px) !important; box-shadow: 0 4px 0 #0004; }
.st-row .st-close { background: var(--sun) !important; color: #3a2400 !important; }
#studio .st-lesson header .st-say { font-size: clamp(22px, 4.4vh, 42px); color: #fff; }
.st-dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 34vw; justify-content: flex-end; }
.st-dots i { width: 12px; height: 12px; border-radius: 50%; background: #fff4; }
.st-dots i.did { background: #9be08a; } .st-dots i.now { background: var(--sun); box-shadow: 0 0 0 3px #ffd84a55; }
.st-main { flex: 1; min-height: 0; padding: 0 16px; display: flex; }
.st-guide { flex: 1; min-width: 0; width: 100%; height: 100%; background: #fffdf6; border-radius: 22px; box-shadow: 0 6px 0 #0003; }
#studio footer { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 1.4vh 16px 1.8vh; }
.st-prev, .st-hear { background: #0003 !important; border-radius: 999px !important; font-size: clamp(18px, 3vh, 28px) !important; font-weight: 900; padding: .4em 1em !important; }
.st-prev:disabled { opacity: .35; }
.st-next { margin-left: auto; display: flex; align-items: center; gap: .35em; } .st-prev { margin-right: auto; }
.st-ring { width: 1.15em; height: 1.15em; transform: rotate(-90deg); display: none; }
.st-next.timed .st-ring { display: block; }
.st-ring circle { fill: none; stroke-width: 5; }
.st-ring .bg { stroke: #3a240033; }
.st-ring .fg { stroke: #3a2400; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
#studio.paused .st-ring { opacity: .35; }
.st-pause { background: #0003 !important; border-radius: 999px !important; font-size: clamp(18px, 3vh, 28px) !important; padding: .4em .9em !important; }
.st-pause.on { background: var(--sun) !important; color: #3a2400 !important; }
body.studio #lobby, body.studio #hud, body.studio #touch { visibility: hidden; }
@media (max-aspect-ratio: 1/1) { .st-dots { display: none; } }
@media (max-height: 520px) { #studio header { padding: 4px 16px; } #studio footer { padding: 4px 16px 6px; gap: 6px; } }

/* ── the treasure chest quiz */
#quiz { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; pointer-events: auto; background: #2a1a08ee; border: 5px solid var(--sun); border-radius: 28px; padding: 2vh 2vw; text-align: center; width: min(94vw, 900px); box-sizing: border-box; animation: pop .3s ease-out; }
#quiz h2 { margin: 0 0 1.5vh; font-size: clamp(20px, 4vh, 38px); }
#quiz h2 b { color: var(--sun); }
#quiz .q-row { display: flex; gap: 1.5vw; justify-content: center; }
#quiz .q-opt { flex: 1; max-width: 260px; background: #fffdf6; border: 5px solid transparent; border-radius: 20px; padding: 6px; cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s; display: flex; flex-direction: column; align-items: center; }
#quiz .q-opt canvas { width: 100%; height: auto; }
#quiz .q-opt span { font-weight: 900; font-size: clamp(13px, 2.2vh, 20px); }
#quiz .q-opt.on { border-color: var(--sun); transform: scale(1.06); }
#quiz .q-opt.right { border-color: #5fd35a; transform: scale(1.1); box-shadow: 0 0 30px #5fd35a; }
#quiz .q-opt.wrong { border-color: #ff9a4a; }
#quiz .q-opt.dim { opacity: .55; }
#quiz .q-opt.right { opacity: 1 !important; }
#quiz p { margin: 1.4vh 0 0; color: #fffc; font-size: clamp(13px, 2vh, 18px); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }

/* ── keyboard controls for two players */
.k-top { position: absolute; top: 1.2vh; right: 1.2vw; height: clamp(34px, 5.2vh, 48px); pointer-events: auto; font: inherit; font-size: clamp(16px, 2.6vh, 24px); background: #0008; border: 0; border-radius: 999px; padding: 0 .6em; cursor: pointer; color: #fff; }
#keys { position: fixed; inset: 0; z-index: 30; background: #0008; display: grid; place-items: center; }
#keys[hidden] { display: none; }
.k-card { position: relative; background: #fffdf6; color: var(--ink); border-radius: 24px; padding: 2.4vh 2.4vw; width: min(92vw, 820px); box-sizing: border-box; box-shadow: 0 8px 0 #0005; }
.k-card h2 { margin: 0 0 1.6vh; text-align: center; font-size: clamp(20px, 3.6vh, 32px); }
.k-cols { display: flex; gap: 3vw; }
.k-col { flex: 1; }
.k-col h3 { margin: 0 0 1vh; font-size: clamp(16px, 2.6vh, 22px); color: var(--leaf); }
.k-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #0001; font-size: clamp(13px, 2vh, 17px); }
.k-row span:first-child { font-weight: 700; color: #4a5a50; }
kbd { display: inline-block; min-width: 1.4em; text-align: center; font: inherit; font-weight: 900; background: #fff; border: 2px solid #c8c0a8; border-bottom-width: 4px; border-radius: 7px; padding: 0 .35em; }
.k-card p { margin: 1.6vh 0 0; text-align: center; color: #6a7a70; font-size: clamp(12px, 1.8vh, 16px); }
.k-x { position: absolute; top: 10px; right: 12px; border: 0; background: #0001; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; }
@media (max-width: 600px) { .k-cols { flex-direction: column; } }
body.touching .k-top { display: none; }