/* Noggin — chunky, squishy, warm. One spatial curve, one pop curve, one duration ladder. */
:root {
  --paper: #FFF6E8;
  --paper-2: #FBEBD3;
  --dot: #EED9B8;
  --card: #FFFFFF;
  --ink: #1E2340;
  --ink-2: #4A4F6A;
  --ink-3: #8A8DA3;
  --line: #EFE2CC;
  --lip: #E4D3B6;

  --tomato: #FF6B57; --tomato-lip: #D9432F;
  --ocean: #2E9BFF;  --ocean-lip: #1A73CC;
  --sun: #FFB020;    --sun-lip: #D98A00;
  --mint: #2BC48A;   --mint-lip: #16996A;
  --grape: #9B5CFF;  --grape-lip: #7339D6;

  --r-s: 14px; --r-m: 22px; --r-l: 32px;
  --u: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);       /* all spatial motion */
  --pop: cubic-bezier(.34, 1.56, .64, 1);     /* squish / pop only */
  --t1: .18s; --t2: .22s; --t3: .26s; --t4: .36s;

  /* Noto Color Emoji right after the web text fonts: identical emoji (and flags) on every TV and phone */
  --display: "Fredoka", "Noto Color Emoji", ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: "Nunito", "Noto Color Emoji", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--body);
  font-weight: 700;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
.hidden { display: none !important; }

/* ---------- motion ---------- */
@keyframes popIn { from { opacity: 0; transform: scale(.6) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: .3; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes riseInB { from { opacity: .3; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(.985); } }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes confetti { 0% { transform: translate3d(0, -10vh, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); opacity: 1; } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen.enter-a { animation: riseIn var(--t4) var(--ease) both; }
.screen.enter-b { animation: riseInB var(--t4) var(--ease) both; }
.screen.leaving { animation: fadeOut var(--t1) ease both; pointer-events: none; z-index: 1; }
.screen.enter-a, .screen.enter-b { animation-delay: .06s; }
.pop { animation: popIn var(--t4) var(--pop) backwards; animation-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- primitives ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: 0 0 0 2px var(--line), 0 8px 0 0 var(--lip);
}
.eyebrow { font-family: var(--body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); }
.title { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.05; }

.btn {
  --bg: var(--mint); --lipc: var(--mint-lip);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border-radius: var(--r-m);
  background: var(--bg); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .01em;
  box-shadow: 0 6px 0 var(--lipc);
  transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease), filter var(--t1) ease, opacity var(--t1) ease;
  user-select: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active, .btn.pressed { transform: translateY(6px) scale(.98); box-shadow: 0 0 0 var(--lipc); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { --bg: #fff; --lipc: var(--lip); color: var(--ink); box-shadow: 0 0 0 2px var(--line), 0 6px 0 var(--lip); }
.btn.ghost:active { box-shadow: 0 0 0 2px var(--line), 0 0 0 var(--lip); }
.btn.blue { --bg: var(--ocean); --lipc: var(--ocean-lip); }
.btn.big { min-height: 72px; font-size: 28px; padding: 0 40px; border-radius: 26px; }
.btn.sm { min-height: 44px; font-size: 17px; padding: 0 18px; border-radius: 16px; box-shadow: 0 4px 0 var(--lipc); }
.btn.sm.ghost { box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--lip); }
.btn.sm:active { transform: translateY(4px) scale(.98); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--lip);
  font-weight: 800; font-size: 16px; color: var(--ink-2); white-space: nowrap;
}
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  height: 46px; min-width: 56px; padding: 0 16px; border-radius: 16px;
  background: #fff; color: var(--ink-2); font-weight: 800; font-size: 17px;
  box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--lip);
  transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease), background var(--t1) ease, color var(--t1) ease;
}
.seg button:active { transform: translateY(4px); box-shadow: 0 0 0 2px var(--line), 0 0 0 var(--lip); }
.seg button.on { background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #0B0E22; }
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; }
.diff-dots i.on { opacity: 1; }

.avatar {
  --c: var(--ocean);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px;
  background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 3px #fff;
  flex: none;
}

/* ---------- logo ---------- */
.logo { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 2px; }
.logo b { display: inline-block; color: var(--tomato); transform: rotate(-8deg); }
.logo b:nth-child(2) { color: var(--ocean); transform: rotate(6deg); }
.logo b:nth-child(3) { color: var(--sun); transform: rotate(-4deg); }
.logo b:nth-child(4) { color: var(--mint); transform: rotate(7deg); }
.logo b:nth-child(5) { color: var(--grape); transform: rotate(-6deg); }
.logo b:nth-child(6) { color: var(--tomato); transform: rotate(5deg); }

/* ---------- glyphs ---------- */
.g { display: inline-grid; place-items: center; line-height: 1; }
.g-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g-shape, .g-clock, .g-dice { width: 1em; height: 1em; }
.g-t { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.g-q {
  width: 1em; height: 1em; border-radius: 26%;
  background: var(--paper-2); color: var(--ink-3);
  font-family: var(--display); font-weight: 700; font-size: .7em;
  box-shadow: inset 0 0 0 .06em var(--dot);
  width: 1.4em; height: 1.4em;
  animation: pulse 1.4s var(--ease) infinite;
}
.g-word { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.g-blank { width: 1em; height: 1em; }
/* illustrations */
.art { width: 86%; height: 86%; object-fit: contain; display: block; filter: drop-shadow(0 .04em 0 rgba(0,0,0,.12)); }
.art-sm { width: 1.5em; height: 1.5em; object-fit: contain; margin: -.3em 0; }
.g-img { position: relative; width: 1em; height: 1em; overflow: hidden; border-radius: .14em; }
.g-img img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); user-select: none; -webkit-user-drag: none; }
.g-img.shadow img { filter: brightness(0); opacity: .9; }
.g-img.zoom { background: #fff; box-shadow: inset 0 0 0 .03em var(--line); }
.g-img.wide { width: calc(1em * var(--ar, 4/3)); }
.g-img.wide img { object-fit: cover; }
.g-img.quad::before, .g-img.quad::after { content: ""; position: absolute; z-index: 1; pointer-events: none; border: 0 dashed rgba(255,255,255,.85); }
.g-img.quad::before { left: 50%; top: 0; bottom: 0; border-left-width: .012em; }
.g-img.quad::after { top: 50%; left: 0; right: 0; border-top-width: .012em; }
.v-big .g-img { font-size: 1.9em; }
.v-big .g-img.wide { font-size: 1.9em; }
.v-pair .g-img.wide { font-size: 2.2em; }
.v-row .cell .g-img, .v-grid .cell .g-img { width: .95em; height: .95em; }
.tile .opt .g-img { width: 1.9em; height: 1.9em; background: rgba(255,255,255,.95); border-radius: .3em; }
.tile .opt .g-img img { padding: .06em; }
.g-sticks { height: 1em; }
.g-sticks .g-svg { height: 100%; width: auto; }
.v-big .g-sticks { font-size: .95em; padding: .15em .3em; background: #2B2F4A; border-radius: .18em; box-shadow: 0 .06em 0 #14172B; }
.tile .opt .g-sticks { font-size: 1.15em; background: #2B2F4A; padding: .14em .3em; border-radius: .25em; }
.v-pair { display: flex; align-items: center; gap: calc(var(--vs) * .3); }
.v-pair .pane { padding: calc(var(--vs) * .18); background: rgba(255,255,255,.55); border-radius: var(--r-l); box-shadow: inset 0 0 0 3px var(--line); }
.v-pair .vs { font-size: calc(var(--vs) * .6); color: var(--ink-3); font-weight: 900; }
.g-swatch { width: 1em; height: 1em; border-radius: 28%; background: var(--sw); box-shadow: inset 0 -.08em 0 rgba(0,0,0,.18), 0 0 0 .04em rgba(30,35,64,.15); }

/* visuals (TV stage). --vs is the base size, set per screen */
.stage { --vs: min(13vh, 9vw); display: flex; align-items: center; justify-content: center; }
.stage > * { flex: none; transform-origin: center; }
.v-big { font-size: calc(var(--vs) * 2.1); }
.v-big .g-t.g-s, .v-big .g-t.g-m { font-size: .62em; }
.v-big .g-word { font-size: .8em; }
.v-row { display: flex; gap: calc(var(--vs) * .22); align-items: center; justify-content: center; flex-wrap: wrap; font-size: calc(var(--vs) * clamp(.7, 6 / var(--n), 1.15)); }
.v-row .cell, .v-grid .cell {
  width: 1.45em; height: 1.45em; display: grid; place-items: center;
  background: #fff; border-radius: .32em; box-shadow: 0 0 0 .04em var(--line), 0 .07em 0 var(--lip);
  animation: popIn var(--t4) var(--pop) backwards; animation-delay: var(--d, 0ms);
}
.v-row .cell, .v-grid .cell { width: auto; min-width: 1.45em; padding: 0 .14em; }
.v-row .cell .g-word, .v-grid .cell .g-word { font-size: .42em; }
.v-row .cell .g-sticks, .v-grid .cell .g-sticks { font-size: .7em; }
.v-row .cell .g-t.g-l, .v-grid .cell .g-t.g-l { font-size: .75em; }
.v-row .cell .g-t.g-m, .v-grid .cell .g-t.g-m { font-size: .5em; }
.v-row .cell .g-q, .v-grid .cell .g-q { width: 1.2em; height: 1.2em; font-size: .75em; }
.v-row .cell .g-shape, .v-grid .cell .g-shape { width: .9em; height: .9em; }
.v-grid { display: grid; grid-template-columns: repeat(var(--cols), auto); gap: calc(var(--vs) * .14); font-size: calc(var(--vs) * clamp(.5, 3.2 / var(--rows), 1)); }
.v-lines { display: flex; flex-direction: column; gap: calc(var(--vs) * .12); align-items: center; font-family: var(--display); font-weight: 600; font-size: calc(var(--vs) * .72); }
.v-lines .line { background: #fff; padding: .12em .6em; border-radius: .4em; box-shadow: 0 0 0 .04em var(--line), 0 .08em 0 var(--lip); white-space: nowrap; animation: popIn var(--t4) var(--pop) backwards; animation-delay: var(--d); }
.v-scatter {
  position: relative; width: min(80vw, calc(var(--vs) * 9)); aspect-ratio: 16 / 9;
  background: #fff; border-radius: var(--r-l); box-shadow: 0 0 0 2px var(--line), 0 8px 0 var(--lip);
  container-type: inline-size;
}
.sc-item { position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); font-size: var(--s); }
.sc-item > .g { animation: popIn var(--t3) var(--pop) backwards; animation-delay: var(--d); }
.sc-item .g-t { font-size: 1em; }
.sc-item .g-shape { width: 1em; height: 1em; }
.v-memory { display: grid; place-items: center; }
.v-gone { width: calc(var(--vs) * 3); height: calc(var(--vs) * 2.2); display: grid; place-items: center; border-radius: var(--r-l); background: var(--paper-2); box-shadow: inset 0 0 0 3px var(--dot); }
.gone-eye { font-size: calc(var(--vs) * 1.1); animation: popIn var(--t4) var(--pop) backwards; }

/* ---------- answer tiles (shared TV + phone) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile {
  --c: var(--tomato); --lipc: var(--tomato-lip);
  position: relative; display: flex; align-items: center; gap: 16px;
  border-radius: var(--r-m); background: var(--c); color: #fff;
  box-shadow: 0 7px 0 var(--lipc);
  padding: 12px 20px; min-height: 84px; overflow: hidden;
  transition: transform var(--t3) var(--ease), box-shadow var(--t1) var(--ease), opacity var(--t3) ease, filter var(--t3) ease;
  animation: popIn var(--t4) var(--pop) backwards; animation-delay: var(--d, 0ms);
}
.tile .slot-ico { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.tile .opt { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 46px; min-width: 0; }
.tile .opt .g-t { text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.tile .opt .g-t.g-m { font-size: .72em; }
.tile .opt .g-t.g-s { font-size: .5em; white-space: normal; text-align: center; line-height: 1.1; }
.tile .opt .g-shape, .tile .opt .g-clock, .tile .opt .g-dice { width: 1.3em; height: 1.3em; padding: .1em; background: rgba(255,255,255,.95); border-radius: .3em; box-sizing: content-box; }
.tile .opt .g-swatch { width: 1.2em; height: 1.2em; background: var(--sw); border-radius: .3em; box-shadow: 0 0 0 .13em #fff, 0 .18em 0 .13em rgba(0,0,0,.14); }
.tile .opt .g-word { background: #fff; padding: .05em .3em; border-radius: .2em; font-size: .7em; }
.tile.s1 { --c: var(--ocean); --lipc: var(--ocean-lip); }
.tile.s2 { --c: var(--sun); --lipc: var(--sun-lip); }
.tile.s3 { --c: var(--mint); --lipc: var(--mint-lip); }
.tile .meta { position: absolute; right: 14px; top: 10px; display: flex; gap: 6px; align-items: center; font-size: 18px; font-weight: 800; }
.tile .count { min-width: 36px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,.18); display: grid; place-items: center; }
.tile .who { position: absolute; left: 70px; bottom: 6px; display: flex; gap: 2px; font-size: 18px; }
.tile .check { position: absolute; right: -6px; top: -6px; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--mint); display: grid; place-items: center; font-size: 30px; box-shadow: 0 4px 0 rgba(0,0,0,.12); animation: popIn var(--t4) var(--pop) backwards; }
.tiles.revealed .tile:not(.right) { opacity: .28; filter: saturate(.4); transform: scale(.97); }
.tiles.revealed .tile.right { transform: scale(1.03); animation: squish .5s var(--ease); }

/* ---------- timer ring ---------- */
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: #fff; stroke: var(--line); stroke-width: 10; }
.ring .bar { fill: none; stroke: var(--mint); stroke-width: 10; stroke-linecap: round; transition: stroke .3s ease; }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 36px; }
.ring.warn .bar { stroke: var(--sun); }
.ring.hot .bar { stroke: var(--tomato); }
.ring.hot .num { color: var(--tomato); animation: pulse .5s var(--ease) infinite; }

/* ---------- confetti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: 0; width: 12px; height: 18px; border-radius: 3px; animation: confetti var(--dur) linear var(--delay) forwards; }

/* toast-free: one tiny flash for off-screen results */
.flash { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 800; z-index: 60; animation: popIn var(--t3) var(--pop) backwards; }
.tiles .tile:nth-child(3):last-child { grid-column: 1 / -1; }

/* think time: options visible, locked, gently breathing */
@keyframes breathe { 0%, 100% { opacity: .42; } 50% { opacity: .58; } }
.tiles.thinking .tile { filter: saturate(.35); animation: breathe 1.6s ease infinite; pointer-events: none; }
.ring.think .bar { stroke: var(--grape); }
.ring.think .num { color: var(--grape); }

/* figures + scales (code-drawn diagrams) */
.fig-t { font-family: var(--display); font-weight: 600; }
.v-figure { width: calc(var(--vs) * 5.2 * var(--ar)); max-width: 92vw; aspect-ratio: var(--ar); background: #fff; border-radius: var(--r-l); box-shadow: 0 0 0 2px var(--line), 0 8px 0 var(--lip); padding: calc(var(--vs) * .1); }
.v-figure .g-svg { width: 100%; height: 100%; }
.g-fig { width: 1.3em; height: 1.3em; }
.tile .opt .g-fig { width: 1.4em; height: 1.4em; padding: .08em; background: rgba(255,255,255,.95); border-radius: .3em; box-sizing: content-box; }
.g-weight { width: 1em; height: 1em; }
.v-balance { position: relative; width: calc(var(--vs) * 8); padding-top: calc(var(--vs) * .2); }
.v-balance .beam-wrap { display: flex; align-items: flex-end; transform: rotate(var(--tilt)); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.v-balance .pan { flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; }
.v-balance .stack, .v-scales .stack { display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; gap: calc(var(--vs) * .06); min-height: calc(var(--vs) * .9); font-size: calc(var(--vs) * .82); padding: 0 calc(var(--vs) * .1); }
.v-balance .item .g-shape, .v-scales .item .g-shape { width: .9em; height: .9em; }
.v-balance .plate { width: 100%; height: calc(var(--vs) * .14); border-radius: 99px; background: #C9CEDC; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.v-balance .beam { flex: 1; height: calc(var(--vs) * .9); position: relative; }
.v-balance .beam i { position: absolute; left: -40%; right: -40%; bottom: 0; height: calc(var(--vs) * .16); background: var(--ink); border-radius: 99px; }
.v-balance .fulcrum { width: calc(var(--vs) * 1.2); height: calc(var(--vs) * .9); margin: 0 auto; background: #4A4F6A; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 6px; }
.v-scales { display: flex; gap: calc(var(--vs) * .6); align-items: flex-end; justify-content: center; }
.v-scales .scale { display: flex; flex-direction: column; align-items: center; min-width: calc(var(--vs) * 3); }
.v-scales .platform { width: 100%; height: calc(var(--vs) * .12); background: #AAB1C5; border-radius: 99px; }
.v-scales .body { width: 92%; padding: calc(var(--vs) * .14) 0; background: #4A4F6A; border-radius: 0 0 .5em .5em; font-size: calc(var(--vs) * .5); display: grid; place-items: center; box-shadow: 0 .12em 0 #2B2F4A; }
.v-scales .lcd { min-width: 3.2em; text-align: center; padding: .08em .4em; border-radius: .2em; background: #12152A; color: #7CF2B4; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; letter-spacing: .06em; }