/* CHALK: the kids' room. Same building as the arcade, but the lamp is on:
   deep blue evening, chunky bright buttons, big tap targets (56px+). */
@font-face { font-family: "VT323"; src: url("../fonts/vt323-latin.woff2") format("woff2"); font-display: swap; }
/* FONT TEST 2026-11-10: three candidates beside VT323, picked on the portal (stored as chalk.font). size-adjust keeps layouts close to VT323, which runs small. */
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-400-latin.woff2") format("woff2"); font-display: swap; size-adjust: 82%; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-500-latin.woff2") format("woff2"); font-display: swap; size-adjust: 78%; }
@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo-2-600-latin.woff2") format("woff2"); font-display: swap; size-adjust: 78%; }
/* 1 (default) is Baloo 2, set in :root below; 2 to 4 are the others still in the test */
html[data-font="2"] { --pixel: "VT323", ui-monospace, monospace; }
html[data-font="3"] { --pixel: "Pixelify Sans", ui-monospace, monospace; }
html[data-font="4"] { --pixel: "Fredoka", system-ui, sans-serif; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #14182b; --bg2: #1d2340; --card: #262d52; --line: #3a4273;
  --ink: #f4efe2; --dim: #b9b6c9;
  --sun: #ffd166; --rose: #ef7a92; --cyan: #6fd6dc; --lime: #a7d86d; --violet: #b79cf2; --orange: #f5a05a;
  --pixel: "Baloo 2", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.5 var(--mono);
  background: radial-gradient(80vw 60vh at 50% -10%, #2a3160, transparent 70%), var(--bg);
  background-attachment: fixed; min-height: 100vh; overflow-x: hidden; touch-action: manipulation;
}
a { color: var(--sun); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(20, 24, 43, 0.9); border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 10; }
.bar h1 { margin: 0; font: 400 30px/1 var(--pixel); letter-spacing: 0.05em; color: var(--sun); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { min-width: 48px; min-height: 48px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 12px; border: 2px solid var(--line); background: var(--card); font: 24px/1 var(--pixel); text-decoration: none; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--sun); }
.stars { font: 26px/1 var(--pixel); color: var(--sun); white-space: nowrap; }

.wrap { max-width: 860px; margin: 0 auto; padding: 18px 14px 40px; }
.lead { color: var(--dim); margin: 0 0 18px; }
.big { font: 400 clamp(44px, 12vw, 96px)/1 var(--pixel); letter-spacing: 0.04em; text-align: center; margin: 10px 0; }
.say { font-size: clamp(64px, 18vw, 120px); line-height: 1.1; text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.opt {
  min-width: 96px; min-height: 72px; padding: 8px 18px; border-radius: 16px; cursor: pointer;
  border: 3px solid var(--tint, var(--cyan)); background: color-mix(in srgb, var(--tint, var(--cyan)) 16%, var(--card));
  font: 400 clamp(30px, 7vw, 46px)/1 var(--pixel); letter-spacing: 0.04em; color: var(--ink);
  transition: transform 120ms ease, background 120ms ease;
}
.opt:hover { transform: translateY(-2px); }
.opt:active { transform: scale(0.96); }
.opt.good { background: var(--lime); border-color: var(--lime); color: #14182b; }
.opt.bad { background: #3a2030; border-color: var(--rose); color: var(--rose); animation: shake 300ms linear 1; pointer-events: none; opacity: 0.7; }
.opt[disabled] { cursor: default; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pill { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill button { min-height: 48px; min-width: 48px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font: 22px/1 var(--pixel); cursor: pointer; }
.pill button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: #14182b; }
.settings { display: grid; gap: 12px; margin: 0 0 18px; padding: 14px; border: 2px dashed var(--line); border-radius: 14px; }
.settings label { font: 22px/1 var(--pixel); letter-spacing: 0.06em; color: var(--dim); display: block; margin-bottom: 6px; text-transform: uppercase; }
.go { min-height: 64px; padding: 0 28px; border-radius: 18px; border: 0; background: var(--sun); color: #14182b; font: 34px/1 var(--pixel); letter-spacing: 0.06em; cursor: pointer; }
.go:hover { background: #ffe09a; }
.hud { display: flex; justify-content: space-between; align-items: center; font: 24px/1 var(--pixel); color: var(--dim); margin-bottom: 8px; }
.end { text-align: center; padding: 30px 0; }
.end .big { color: var(--sun); }
.hidden { display: none !important; }

/* portal */
.shelf { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.game { display: grid; gap: 6px; padding: 16px; border-radius: 18px; border: 3px solid var(--tint); background: color-mix(in srgb, var(--tint) 14%, var(--card)); color: var(--ink); text-decoration: none; min-height: 150px; transition: transform 140ms ease; }
.game:hover { transform: translateY(-3px); }
.game .ico { font-size: 44px; line-height: 1; }
.game .name { font: 32px/1 var(--pixel); letter-spacing: 0.04em; color: var(--tint); }
.game .what { font-size: 14px; color: var(--dim); }
.game .got { font: 22px/1 var(--pixel); color: var(--sun); }
.h2 { font: 400 30px/1 var(--pixel); letter-spacing: 0.06em; text-transform: uppercase; margin: 6px 0 12px; }
.foot { color: var(--dim); font-size: 13px; border-top: 2px solid var(--line); padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 2026-11-10: fill the screen. The round sits in the middle, buttons are big. */
.stage { min-height: calc(100vh - 190px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.opt { min-width: clamp(96px, 22vw, 150px); min-height: clamp(76px, 14vh, 112px); font-size: clamp(36px, 8vw, 58px); }
.row { gap: clamp(12px, 3vw, 22px); }

/* mastery: one level across every game */
.badge { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin: 0 0 22px; border-radius: 18px; border: 3px solid var(--sun); background: color-mix(in srgb, var(--sun) 10%, var(--card)); }
.badge > div { flex: 1; min-width: 0; }
.badge-ico { font-size: 56px; line-height: 1; }
.badge-name { font: 34px/1 var(--pixel); color: var(--sun); letter-spacing: 0.04em; }
.badge-bar { height: 16px; border-radius: 8px; background: #10142a; overflow: hidden; margin: 8px 0 4px; }
.badge-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--sun)); border-radius: 8px; }
.badge-num { font: 20px/1 var(--pixel); color: var(--dim); }
.mastery { font: 30px/1.2 var(--pixel); color: var(--cyan); margin: 0; }
.novoice { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--dim); background: #10142a; border-bottom: 2px solid var(--line); text-align: center; }
body.playing .novoice { display: none; }

/* drawn pictures (Chalk.pic): one box, the size of an emoji, built from parts */
.face.drawn { display: flex; align-items: flex-end; justify-content: center; gap: 0.06em; height: 1.15em; font-style: normal; }
.face.drawn i { font-style: normal; line-height: 1; display: block; }
.sz { opacity: 0.28; filter: grayscale(0.6); }
.sz-small { font-size: 0.38em; } .sz-mid { font-size: 0.62em; } .sz-big { font-size: 0.95em; }
.sz.lit { opacity: 1; filter: none; box-shadow: 0 0.06em 0 0 var(--sun); padding-bottom: 0.03em; }
.drawn-count { flex-wrap: wrap; align-content: center; align-items: center; }
.drawn-count i { font-size: 0.42em; } .drawn-count.many { max-width: 2.6em; } .drawn-count.many i { font-size: 0.3em; }
.blob { width: 0.95em; height: 0.85em; align-self: center; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; box-shadow: inset -0.08em -0.1em 0 rgba(0, 0, 0, 0.22), inset 0.07em 0.08em 0 rgba(255, 255, 255, 0.3); }
.ring { width: 0.9em; height: 0.9em; align-self: center; border-radius: 50%; border: 0.1em solid var(--ink); }
.glass { position: relative; width: 0.62em; height: 0.95em; align-self: center; border: 0.07em solid var(--ink); border-top: 0; border-radius: 0 0 0.14em 0.14em; overflow: hidden; }
.glass .drink { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--cyan); }
.glass .drink.full { height: 86%; }
.bar-pic { height: 0.26em; align-self: center; border-radius: 0.13em; background: var(--orange); }
.bar-pic.long { width: 1.9em; } .bar-pic.short { width: 0.5em; }
/* each word game has its own sign between the big word and the choices */
.mode { text-align: center; font: 400 clamp(34px, 8vw, 56px)/1 var(--pixel); color: var(--sun); margin: 0; letter-spacing: 0.1em; }

/* listen-first choices: the tapped one lifts and gets a ring until tapped again */
.opt.picked { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 4px var(--sun); background: color-mix(in srgb, var(--tint, var(--cyan)) 40%, var(--card)); }

/* options panel on the portal */
.options { margin: 26px 0 18px; padding: 16px; border: 3px solid var(--line); border-radius: 18px; background: var(--card); }
/* label on its own line, then the choices in one row of equal buttons: never wraps on a phone */
.optrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.optname { grid-column: 1 / -1; font: 24px/1 var(--pixel); color: var(--dim); }
.optrow .chip { min-width: 0; width: 100%; padding: 0 4px; }
.options .chip.on { border-color: var(--sun); color: var(--sun); background: color-mix(in srgb, var(--sun) 14%, var(--card)); }
.optnote { margin: -4px 0 12px; color: var(--dim); font-size: 13px; }
.optsample { margin: 6px 0 0; font: 34px/1.2 var(--pixel); color: var(--ink); }