/* Wing It: a calm, dark studio in the middle column, with your record on
   the left and everyone's on the right (under the game on phones). Apricot
   is the game's own colour (home card, page); the studio is plum. */
:root {
  --apricot: #ffd9bd;
  --stage: #241c36; --stage-deep: #17121f;
  --ink: #fbf7f2; --ink-soft: #b9afcf; --ink-faint: rgba(251, 247, 242, 0.14);
  --good: #9fdcbc; --fair: #f3d98a; --meh: #c9bdf0; --bad: #f2a19a;
}

body {
  background: var(--apricot);
  overflow-x: hidden;
}

/* ---- Behind everything: the site's dotted apricot, with a farm in faint
   silhouette along the bottom (backdrop.js) ---- */
.backdrop {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(rgba(46, 36, 64, 0.12) 1.2px, transparent 1.4px) 0 0 / 18px 18px, var(--apricot);
}
.backdrop svg { display: block; width: 100%; height: auto; }
.bd-cloud { position: absolute; left: 0; opacity: 0.55; animation: bd-drift linear infinite; }
.bd-far, .bd-near { position: absolute; left: 0; right: 0; bottom: 0; }
.bd-far svg { height: 22vh; }
.bd-near svg { height: 12vh; }
.bd-barn { position: absolute; left: 3vw; bottom: 9vh; width: clamp(110px, 11vw, 190px); }
.bd-silo { position: absolute; left: calc(3vw + clamp(110px, 11vw, 190px) + 6px); bottom: 9vh; width: clamp(44px, 4vw, 70px); }
.bd-fence { position: absolute; left: calc(3vw + clamp(110px, 11vw, 190px) + clamp(44px, 4vw, 70px) + 14px); bottom: 8.6vh; width: clamp(80px, 8vw, 130px); }
.bd-hen { position: absolute; bottom: 8.6vh; width: 24px; transform-origin: 50% 100%; animation: peck 2.4s steps(2) infinite; }
.bd-hen-a { left: 9vw; }
.bd-hen-b { left: 14vw; animation-delay: -1.1s; transform: scaleX(-1); }
.bd-mill { position: absolute; right: 5vw; bottom: 9vh; width: clamp(60px, 5.5vw, 96px); }
.bd-sails { position: absolute; left: 50%; top: 4%; width: 170%; transform: translate(-50%, -50%); animation: spin 24s linear infinite; }
/* Phones: just the sky, sun and hills behind the cards */
@media (max-width: 1099px) { .bd-barn, .bd-silo, .bd-fence, .bd-hen, .bd-mill { display: none; } }
@keyframes bd-drift { from { transform: translateX(-200px); } to { transform: translateX(110vw); } }
@keyframes peck { 50% { transform: rotate(18deg) translateY(1px); } }
.bd-hen-b { animation-name: peck-b; }
@keyframes peck-b { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) rotate(18deg) translateY(1px); } }
@keyframes twinkle { 50% { opacity: 0.15; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* The bar floats over the page, so the game can run from top to bottom */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 10px 16px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.home-link { font-weight: 800; text-decoration: none; }
@media (max-width: 899px) { .home-link { color: var(--ink); } }

/* So the stage can warm up smoothly */
@property --warm { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Scrolling areas scroll without showing a bar */
.results, .side { scrollbar-width: none; -ms-overflow-style: none; }
.results::-webkit-scrollbar, .side::-webkit-scrollbar { display: none; }

/* ---- The page: side columns either side of the studio on wide screens ---- */
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.side { display: grid; align-content: start; gap: 14px; width: 100%; max-width: 560px; justify-self: center; padding: 18px 16px 8px; }
@media (min-width: 1100px) {
  .page { grid-template-columns: minmax(0, 1fr) 560px minmax(0, 1fr); align-items: start; }
  .page > .game { grid-column: 2; grid-row: 1; box-shadow: 0 0 0 3px var(--plum), 0 0 80px rgba(46, 36, 64, 0.35); }
  .side-you { grid-column: 1; grid-row: 1; justify-self: end; }
  .side-all { grid-column: 3; grid-row: 1; justify-self: start; }
  .side { position: sticky; top: 0; width: min(100%, 330px); padding: 70px 26px 24px; max-height: 100svh; overflow-y: auto; }
}
.card { padding: 14px 16px 16px; border: 3px solid var(--plum); border-radius: 18px; background: var(--cream); box-shadow: 0 5px 0 var(--plum); color: var(--plum); }
.card-label { margin: 0 0 10px; font: 800 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-soft); }
.card-note { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--plum-soft); }
.card-note b { color: var(--plum); font-variant-numeric: tabular-nums; }
.card.how p:not(.card-label) { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nums div { padding: 8px 6px; border-radius: 12px; background: #fff; text-align: center; box-shadow: inset 0 0 0 2px rgba(46, 36, 64, 0.08); }
.nums b { display: block; font: 700 26px/1.1 var(--serif); }
.nums span { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--plum-soft); line-height: 1.2; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 58px 1fr 26px; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.bar .track { height: 16px; border-radius: 5px; background: rgba(46, 36, 64, 0.06); }
.bar i { display: block; height: 100%; border-radius: 5px; background: #cfc5e6; }
.bar.mine i { background: var(--good); box-shadow: 0 0 0 2px var(--plum); }
.bar b { text-align: right; font-variant-numeric: tabular-nums; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; text-align: center; }
.week li b { display: grid; place-items: center; height: 34px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 2px rgba(46, 36, 64, 0.1); font: 700 16px/1 var(--serif); }
.week li.won b { background: var(--good); box-shadow: none; }
.week li.lost b { background: var(--bad); box-shadow: none; }
.week li.none b { opacity: 0.35; }
.week li span { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--plum-soft); }
.big-count { margin: 0; font: 700 30px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.past { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.past a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; color: var(--plum); text-decoration: none; font-size: 14px; box-shadow: inset 0 0 0 2px rgba(46, 36, 64, 0.08); }
.past a:hover { box-shadow: inset 0 0 0 2px var(--plum); }
.past em { font-style: normal; font-size: 12px; font-weight: 900; padding: 1px 8px; border-radius: 999px; background: var(--sky); }
.past em.won { background: var(--good); } .past em.lost { background: var(--bad); }

/* ---- The column ---- */
.game {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  height: 100svh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  color: var(--ink);
  --warm: 0; /* rises as letters are uncovered: the stage warms up */
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(122, 86, 150, calc(0.35 + var(--warm) * 0.4)) 0%, transparent 62%),
    linear-gradient(var(--stage), var(--stage-deep));
  transition: --warm 1s;
}

.front { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; padding: 64px 20px 0; }
@media (min-width: 900px) { .front { padding-top: 26px; } }
.label, .ask-label, .meta { font: 800 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* Question count, clock, letters */
.meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; white-space: nowrap; }
.meta span:last-child { text-align: right; }
.time-wrap { position: relative; }
.time { display: inline-block; font: 700 26px/1 var(--serif); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.time.low { color: var(--bad); animation: throb 1s ease-in-out infinite; }
.game.paused .time { color: var(--fair); }
.timeline { height: 6px; margin-top: 10px; border-radius: 6px; background: var(--ink-faint); overflow: hidden; }
.game .time.bump { animation: bump 0.4s ease; }
/* Seconds won and lost, floating off the clock */
.pops { position: absolute; left: calc(100% + 8px); top: 50%; width: 0; height: 0; }
.pops span { position: absolute; left: 0; top: -12px; padding: 3px 9px; border-radius: 999px; font: 900 15px/1.2 var(--sans); white-space: nowrap; letter-spacing: 0; text-transform: none; animation: pop-off 1.4s ease-out forwards; }
.pops .plus { background: var(--good); color: var(--plum); }
.pops .minus { background: var(--bad); color: var(--plum); }
/* A streak, said out loud */
.streak { align-self: center; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(243, 217, 138, 0.16); color: var(--fair); font: 900 12px/1.4 var(--sans); letter-spacing: 0.06em; animation: pop-in 0.3s ease; }
.timeline-fill { height: 100%; background: var(--ink); transform-origin: left; transition: transform 0.25s linear, background 0.3s; }
.game.paused .timeline-fill { background: var(--fair); }

/* The covered topic */
.topic { margin-top: 18px; text-align: center; }
.topic .label { margin: 0 0 8px; }
.tiles { display: flex; justify-content: center; gap: 5px; }
.tile { width: 28px; height: 36px; border-radius: 7px; background: rgba(251, 247, 242, 0.08); box-shadow: inset 0 0 0 1.5px rgba(251, 247, 242, 0.18); color: var(--plum); font: 700 21px/36px var(--serif); text-align: center; }
.tile.open { background: var(--ink); box-shadow: none; animation: turn 0.4s ease; }
.tile.fresh { box-shadow: 0 0 0 3px var(--good), 0 0 18px rgba(159, 220, 188, 0.6); }
.tiles.named .tile { background: var(--good); box-shadow: none; }

/* Before the show */
.intro { margin-top: 22px; text-align: center; }
.kicker { margin: 0 0 6px; font: 800 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fair); }
.intro-note { min-height: 1.4em; margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; }
.title { margin: 0; font: 700 52px/1 var(--serif); letter-spacing: -0.01em; }
.lede { max-width: 400px; margin: 12px auto 20px; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
/* Normal or Hard: two big choices */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 0 auto; }
.mode-btn { display: grid; gap: 3px; padding: 13px 10px 12px; border: 2px solid var(--plum); border-radius: 18px; background: var(--blush); color: var(--plum); cursor: pointer; box-shadow: 0 4px 0 #120d1a; transition: transform 0.08s, box-shadow 0.08s; }
.mode-btn b { font: 900 17px/1.15 var(--sans); }
.mode-btn span { font-size: 12px; font-weight: 700; color: var(--plum-soft); line-height: 1.25; }
.mode-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #120d1a; }
.mode-btn:disabled { opacity: 0.5; cursor: default; }
.mode-btn.hard { background: #3b2f52; border-color: var(--fair); color: var(--fair); box-shadow: 0 4px 0 #120d1a; }
.mode-btn.hard span { color: var(--ink-soft); }
.mode-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--fair); color: var(--plum); font: 900 10px/1.5 var(--sans); letter-spacing: 0.08em; vertical-align: 2px; }
.rules { display: grid; gap: 6px; max-width: 330px; margin: -4px auto 22px; padding: 0; list-style: none; text-align: left; font-size: 14px; color: var(--ink-soft); }
.rules b { color: var(--ink); }
.rules li > b:first-child { display: inline-block; min-width: 82px; margin-right: 6px; padding: 1px 8px; border-radius: 999px; color: var(--plum); font-size: 12px; text-align: center; }
.g-spot { background: var(--good); } .g-close { background: var(--fair); } .g-bluff { background: var(--meh); } .g-silly { background: var(--bad); } .g-streak { background: var(--ink); }

/* The show */
.play { margin-top: 24px; }
.ask-label { margin: 0 0 6px; }
.ask-label.naming, .ask-label.circle { color: var(--fair); }
.before { margin: -8px 0 12px; color: var(--ink-soft); font-size: 14px; }
.before b { color: var(--ink); }
.question { min-height: 2.5em; margin: 0 0 14px; font: 600 25px/1.25 var(--serif); transition: opacity 0.2s; }
.question.out { opacity: 0; }

.say { position: relative; }
.say input {
  width: 100%; height: 54px; padding: 0 58px 0 18px;
  border: 0; border-radius: 16px;
  background: var(--ink); color: var(--plum);
  font: 700 18px var(--sans);
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow 0.2s;
}
.say input::placeholder { color: #9a90ad; }
.say input:focus { outline: none; box-shadow: 0 0 0 3px rgba(251, 247, 242, 0.25); }
.say.spot input { box-shadow: 0 0 0 3px var(--good); }
.say.close input { box-shadow: 0 0 0 3px var(--fair); }
.say.bluff input { box-shadow: 0 0 0 3px var(--meh); }
.say.silly input, .say.wrong input { box-shadow: 0 0 0 3px var(--bad); }
.send { position: absolute; top: 7px; right: 7px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--plum); color: var(--ink); cursor: pointer; }
.send svg { width: 20px; height: 20px; vertical-align: middle; }

/* One line of feedback, in a space kept for it so nothing jumps */
.feedback { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 10px; padding: 0 14px; border-radius: 14px; background: rgba(251, 247, 242, 0.06); opacity: 0; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, background 0.2s; }
.feedback.show { opacity: 1; transform: none; }
.feedback[data-grade="spot"], .feedback[data-grade="named"] { background: rgba(159, 220, 188, 0.16); }
.feedback[data-grade="close"] { background: rgba(243, 217, 138, 0.15); }
.feedback[data-grade="bluff"] { background: rgba(201, 189, 240, 0.17); }
.feedback[data-grade="silly"], .feedback[data-grade="wrong"] { background: rgba(242, 161, 154, 0.15); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 12px; height: 8px; border-radius: 3px; background: var(--ink-faint); }
.feedback[data-grade="spot"] .meter i { background: var(--good); }
.feedback[data-grade="close"] .meter i:nth-child(-n+3) { background: var(--fair); }
.feedback[data-grade="bluff"] .meter i:nth-child(-n+2) { background: var(--meh); }
.feedback[data-grade="silly"] .meter i:first-child, .feedback[data-grade="wrong"] .meter i:first-child { background: var(--bad); }
.feedback[data-grade="named"] .meter i { background: var(--good); }
.verdict { font: 900 18px/1 var(--sans); white-space: nowrap; }
.feedback[data-grade="spot"] .verdict, .feedback[data-grade="named"] .verdict { color: var(--good); }
.feedback[data-grade="close"] .verdict { color: var(--fair); }
.feedback[data-grade="bluff"] .verdict { color: var(--meh); }
.feedback[data-grade="silly"] .verdict, .feedback[data-grade="wrong"] .verdict { color: var(--bad); }
.feedback[data-grade="judging"] .verdict { color: var(--ink-soft); }
.detail { overflow: hidden; color: var(--ink-soft); font-size: 14px; line-height: 1.25; max-height: 2.5em; }

.actions { display: flex; justify-content: space-between; margin-top: 2px; }
.link { padding: 6px 0; border: 0; background: none; color: var(--ink-soft); font: 800 14px var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(185, 175, 207, 0.4); text-underline-offset: 4px; }
.link:hover { color: var(--ink); }
.link:disabled { opacity: 0.35; cursor: default; }
/* Naming the topic is the whole aim, so its button is a proper one; once
   a few letters show, it lights up */
.name-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid var(--fair); border-radius: 999px; background: rgba(243, 217, 138, 0.12); color: var(--fair); font: 900 15px/1 var(--sans); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.08s; }
.name-pill:hover { background: rgba(243, 217, 138, 0.22); }
.name-pill:active { transform: translateY(2px); }
.name-pill:disabled { opacity: 0.35; cursor: default; }
.name-pill.hint { background: var(--fair); color: var(--plum); animation: pill-glow 1.6s ease-in-out infinite; }
.actions { align-items: center; }

/* After the show */
.results { margin-top: 18px; overflow-y: auto; padding-bottom: 24px; text-align: center; }
.game.done .front { flex: 1; }
.game.done .stage { display: none; }
.ask-label.final { color: var(--fair); }
.game.final .time, .game.final .timeline { opacity: 0.3; transition: opacity 0.4s; }
/* Normal mode has no clock */
.game.untimed .time-wrap, .game.untimed .timeline { visibility: hidden; }
.result-topic { margin: 4px 0 14px; font: 700 34px/1.1 var(--serif); letter-spacing: 0.04em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { padding: 10px 4px; border-radius: 14px; background: rgba(251, 247, 242, 0.07); }
.stats strong { display: block; font: 700 24px/1.1 var(--serif); }
.stats span { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.rating { margin: 12px 0 4px; color: var(--ink-soft); font-size: 15px; }
.compare { min-height: 1.4em; margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; }
.compare strong { color: var(--good); }
.countdown { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.rating strong { color: var(--ink); }
.result-btns { display: flex; justify-content: center; gap: 10px; }
.result-btns .btn { box-shadow: none; }
.review-title { margin: 22px 0 8px; text-align: left; font: 800 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.answers { margin: 0; padding: 0; list-style: none; text-align: left; }
.answers li { padding: 10px 0; border-top: 1px solid var(--ink-faint); }
.answers .q { margin: 0 0 4px; color: var(--ink-soft); font-size: 14px; }
.answers .yours { margin: 0; font-weight: 800; }
.answers .chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; color: var(--plum); font-size: 12px; font-weight: 900; vertical-align: 1px; }
.chip.spot { background: var(--good); } .chip.close { background: var(--fair); } .chip.bluff { background: var(--meh); } .chip.silly { background: var(--bad); } .chip.skip { background: var(--ink-faint); color: var(--ink-soft); }
.answers .best { margin: 3px 0 0; color: var(--ink-soft); font-size: 14px; }
.answers .best b { color: var(--ink); }

/* ---- The stage: one light on the expert, and a room that moves ---- */
.stage { position: relative; flex: 1; min-height: 140px; }
/* Tall soft light panels on the back wall */
.panels { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(201, 189, 240, 0.05) 34px 64px, transparent 64px 98px); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); transition: background 0.5s; }
.game.good .panels { background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(159, 220, 188, 0.1) 34px 64px, transparent 64px 98px); }
/* A string of bulbs that chase, faster when you're doing well */
.bulbs { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; }
.bulbs span { width: 6px; height: 6px; border-radius: 50%; background: var(--fair); opacity: 0.18; animation: chase 2.4s linear infinite; }
.game.good .bulbs span { animation-duration: 0.6s; opacity: 0.5; }
.game.streaking .bulbs span { animation-duration: 1.2s; }
/* Confetti for naming the topic */
.confetti { position: absolute; inset: -100% 0 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: 0; width: 7px; height: 11px; border-radius: 2px; animation: fall-down linear forwards; }
/* Two faint beams sweeping slowly from the rig */
.sweep { position: absolute; top: -40%; width: 160px; height: 150%; background: linear-gradient(rgba(201, 189, 240, 0.09), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; pointer-events: none; }
.sweep-a { left: 8%; animation: sweep 11s ease-in-out infinite alternate; }
.sweep-b { right: 8%; animation: sweep 13s ease-in-out -6s infinite alternate-reverse; }
.lamp { position: absolute; left: 50%; bottom: 0; width: 280px; height: 100%; transform: translateX(-50%); background: linear-gradient(rgba(255, 244, 214, 0), rgba(255, 244, 214, calc(0.11 + var(--warm) * 0.1))); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: breathe 6s ease-in-out infinite alternate; transition: background 0.6s; }
.game.good .lamp { background: linear-gradient(rgba(159, 220, 188, 0), rgba(159, 220, 188, 0.24)); }
.game.bad .lamp { opacity: 0.4; animation: none; }
/* Dust drifting up through the light */
.motes { position: absolute; left: 50%; bottom: 30px; width: 200px; height: 80%; transform: translateX(-50%); pointer-events: none; }
.motes span { position: absolute; bottom: 0; width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 244, 214, 0.55); animation: rise linear infinite; }
.lamp::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 28px; height: 26px; border-radius: 50%; background: rgba(255, 244, 214, 0.12); }
.expert { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.chicken { margin-bottom: -14px; transform-origin: 50% 100%; }
.chicken svg { display: block; width: 78px; height: auto; }
.chicken.happy { animation: hop 0.45s ease; }
.chicken.happy .wing { animation: flap 0.1s 4 alternate; }
.chicken.oops { animation: wobble 0.45s ease; }
.chicken.oops .eye-open { display: none; }
.chicken:not(.oops) .eye-shut { display: none; }
.chicken.thinking { animation: think 0.5s ease-in-out infinite alternate; }
.wing { transform-box: fill-box; transform-origin: 80% 10%; }
.desk { width: 118px; padding: 7px 0 9px; border-radius: 6px 6px 0 0; background: #3b2f52; box-shadow: inset 0 2px 0 rgba(251, 247, 242, 0.12); text-align: center; }
.desk span { font: 800 9px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
/* A quiet row of heads along the front, who react */
.audience { position: absolute; left: -6px; right: -6px; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; height: 44px; background: linear-gradient(transparent, rgba(10, 7, 16, 0.6)); }
.audience span { width: 30px; height: 26px; border-radius: 50% 50% 0 0; background: #0e0a15; animation: sway 4s ease-in-out infinite alternate; }
.audience span:nth-child(odd) { height: 22px; animation-duration: 5s; }
.audience span:nth-child(3n) { height: 29px; background: #130e1c; }
.game.good .audience span { animation: cheer 0.26s ease-in-out 4 alternate; }
.game.good .audience span:nth-child(2n) { animation-delay: 0.07s; }

/* Sound on and off */
.sound { position: absolute; right: 14px; bottom: 54px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(251, 247, 242, 0.08); color: var(--ink-soft); cursor: pointer; }
.sound:hover { color: var(--ink); }
.sound svg { width: 20px; height: 20px; vertical-align: middle; }
.sound[aria-pressed="true"] .cross, .sound[aria-pressed="false"] .waves { display: none; }

.site-footer { padding: 18px 16px 28px; text-align: center; font-size: 14px; color: var(--plum-soft); }
.site-footer .credit { display: inline-block; margin-top: 8px; font-size: 12px; }

@media (min-width: 600px) {
  .front { padding-left: 30px; padding-right: 30px; }
  .tile { width: 34px; height: 44px; font-size: 26px; line-height: 44px; }
  .question { font-size: 29px; }
  .title { font-size: 64px; }
  .chicken svg { width: 100px; }
  .desk { width: 150px; }
}

@keyframes throb { 50% { transform: scale(1.08); } }
@keyframes bump { 40% { transform: scale(1.22); } }
@keyframes pop-off { 0% { opacity: 0; transform: translateX(-6px) scale(0.8); } 15% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.85); } }
@keyframes chase { 0%, 100% { opacity: 0.12; } 10% { opacity: 0.9; } 30% { opacity: 0.12; } }
@keyframes pill-glow { 50% { box-shadow: 0 0 0 6px rgba(243, 217, 138, 0.25), 0 0 22px rgba(243, 217, 138, 0.55); } }
@keyframes fall-down { to { transform: translateY(900px) rotate(720deg); } }
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes breathe { from { opacity: 0.8; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-260px) translateX(14px); opacity: 0; } }
@keyframes sway { to { transform: translateY(-2px) rotate(1.5deg); } }
@keyframes cheer { to { transform: translateY(-8px); } }
@keyframes turn { from { transform: rotateX(90deg); } }
@keyframes hop { 40% { transform: translateY(-10px); } }
@keyframes flap { to { transform: rotate(-40deg); } }
@keyframes wobble { 25% { transform: rotate(-6deg); } 55% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes think { to { transform: rotate(-3deg) translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .game *, .backdrop * { animation: none !important; transition: none !important; }
}