/* Omitsy: a passed note. Cream notebook paper with faint ballpoint rules, navy ink for text and outlines, correction-pen
   red for actions and banned words, highlighter yellow for "your turn", and ballpoint blue for the second player.
   Cards are fresh sheets with an inked edge and a solid offset shadow. Light by default; dark (a night notebook)
   follows the device, or an explicit data-theme on the root.
   The variable names are older than the look: --kettle is the main accent, --mustard the highlighter, --teal the
   second player. */
:root {
  --paper: #f7f2e7;
  --rule: rgba(74, 99, 231, .13);
  --speck: rgba(29, 35, 64, .07);
  --card: #fffdf8;
  --ink: #1d2340;
  --soft: #5a6080;
  --rim: #1d2340;
  --kettle: #c8372e; /* deep enough for white text and links to pass WCAG AA (4.5:1) */
  --kettle-ink: #fffdf8;
  --mustard: #ffd84a;
  --mustard-ink: #1d2340;
  --teal: #3f5bd8;
  --chip: #f0ece2;
  --hover: #fdf1c6;
  --cop: #3d6bd6;
  --road: #e6e1d5;
  --road-hover: #fdf1c6;
  --font-logo: 'Bricolage Grotesque', 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141829; --rule: rgba(142, 160, 255, .08); --speck: rgba(238, 240, 250, .05); --card: #1d2238; --ink: #eef0fa;
    --soft: #a9afcc; --rim: #070912; --kettle: #ff6b5e; --kettle-ink: #141829; --mustard: #e8c65a; --mustard-ink: #141829;
    --teal: #8ea0ff; --chip: #262c47; --hover: #2c3354; --cop: #7aa0ff; --road: #262c47; --road-hover: #323a5e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141829; --rule: rgba(142, 160, 255, .08); --speck: rgba(238, 240, 250, .05); --card: #1d2238; --ink: #eef0fa;
  --soft: #a9afcc; --rim: #070912; --kettle: #ff6b5e; --kettle-ink: #141829; --mustard: #e8c65a; --mustard-ink: #141829;
  --teal: #8ea0ff; --chip: #262c47; --hover: #2c3354; --cop: #7aa0ff; --road: #262c47; --road-hover: #323a5e; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--font-body);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);
  background-attachment: fixed;
}
#app { max-width: 520px; margin: 0 auto; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: var(--kettle); }
h1 { font: 800 30px/1.15 var(--font-head); letter-spacing: -.01em; margin: 8px 0; text-wrap: balance; }
h2 { font: 700 21px/1.2 var(--font-head); letter-spacing: -.005em; margin: 4px 0 8px; text-wrap: balance; }
.muted { color: var(--soft); }
.small { font-size: 14px; }
.center { text-align: center; }
button.start { margin-top: 6px; }
.spaced { margin-top: 18px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.status { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font: 500 12px var(--font-mono); background: var(--chip); color: var(--soft); }
.tag .who { font: 700 14px var(--font-body); color: var(--ink); }

/* Logo */
/* The mark and the wordmark share a line; the tagline runs under both. */
.brand { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; margin: 4px 0 14px; color: var(--ink); text-decoration: none; }
.brand > div { display: contents; }
.brand b { justify-self: start; } /* the highlighter hugs the word, not the column */
.brand span { grid-column: 1 / -1; }
.brand b { font: 800 31px/1 var(--font-logo); color: var(--mustard-ink); letter-spacing: -.02em; padding: 3px 8px 4px; margin-left: -2px;
  background: var(--mustard); border-radius: 3px 9px 4px 10px / 9px 3px 10px 4px; transform: rotate(-1deg); display: inline-block; }
.brand span { display: block; font: 500 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-top: 4px; }
.brand svg { flex: none; }

/* Enamel cards */
.panel { background: var(--card); border: 2px solid var(--rim); border-radius: 18px; box-shadow: 0 4px 0 var(--rim); padding: 14px; margin: 14px 0; }
.gamecard .head { display: flex; align-items: center; gap: 12px; }
.gamecard .head h2 { margin: 0; }
.gamecard .meta { font: 500 12px var(--font-mono); color: var(--soft); }
.gamecard p { color: var(--soft); }
.icon { width: 54px; height: 54px; flex: none; border-radius: 14px; border: 2px solid var(--rim); display: grid; place-items: center; }
.icon.small { width: 30px; height: 30px; border-radius: 8px; border-width: 1.5px; }
.icon.small svg { width: 18px; height: 18px; }
.icon.kettle { background: var(--kettle); }
.icon.teal { background: var(--teal); }
.title-with-icon { display: flex; align-items: center; gap: 12px; }

/* Buttons */
button { font: 700 15px var(--font-body); border: 2px solid var(--rim); border-radius: 99px; padding: 9px 16px; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--rim); }
button.primary { background: var(--kettle); color: var(--kettle-ink); font-size: 16px; padding: 11px 18px; }
button:hover:not(:disabled) { background: var(--hover); }
button.primary:hover:not(:disabled) { background: var(--kettle); filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--rim); }
button:disabled { opacity: .45; cursor: default; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: var(--kettle); text-decoration: underline; font-weight: 700; }
button:focus-visible, .cell.target:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .08s, box-shadow .08s; } }
.choice { flex: 1 1 140px; text-align: left; border-radius: 14px; font-weight: 700; }
.choice.sel { background: var(--chip); box-shadow: 0 3px 0 var(--kettle); border-color: var(--kettle); }
.choice small { display: block; margin-top: 4px; font-weight: 400; color: var(--soft); }

input[type=text], textarea { width: 100%; background: var(--card); color: var(--ink); border: 2px solid var(--rim); border-radius: 12px; padding: 10px 14px; font: 17px var(--font-body); margin-top: 6px; }
textarea { font: 14px var(--font-mono); }
.code { font: 500 14px var(--font-mono); letter-spacing: 2px; background: var(--chip); padding: 2px 8px; border-radius: 6px; }

/* Your turn and messages */
.banner { display: inline-block; font-weight: 700; font-size: 14px; background: var(--mustard); color: var(--mustard-ink); border: 2px solid var(--rim); border-radius: 99px; padding: 3px 12px; box-shadow: 0 2px 0 var(--rim); margin: 6px 0; }
.notice { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.notice.alert { display: grid; grid-template-columns: 38px 1fr; align-items: start; }
.notice.alert > :not(svg) { grid-column: 2; min-width: 0; }
.notice.alert h2 { margin: 4px 0; }
.cover { text-align: center; padding: 30px 16px; }
.cover .brand { justify-content: center; }
.err { color: var(--kettle); min-height: 1.2em; margin: 4px 0; font-weight: 700; font-size: 14px; }
.footer { margin-top: 28px; text-align: center; }

/* Players: a red or teal dot instead of emoji */
.who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.who::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rim); background: var(--kettle); flex: none; }
.who-b::before { background: var(--teal); }

/* Home with one game: today's card leads. */
.today { padding: 18px; }
.today h2 { font-size: 26px; margin: 8px 0 6px; }
.today .banner { margin: 10px 0 0; }
.today p { margin: 6px 0 10px; }
.today button.wide { margin-top: 6px; }
.banner.small-banner { font-size: 12px; padding: 1px 10px; margin: 2px 0; justify-self: start; }
.homelinks { justify-content: center; gap: 18px; margin: 4px 0 6px; }
details.panel.howto { font-size: 15px; }
details.panel.howto summary { font-size: 16px; }

/* Lobby */
.lobbyrow { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1.5px dashed var(--chip); }
.lobbyrow > :nth-child(3) { grid-column: 1 / 3; min-width: 0; }
.lobbyrow > button { grid-row: 1 / 3; grid-column: 3; }
.played { display: flex; flex-direction: column; gap: 2px; background: var(--chip); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }

/* Getaway: a road map with drawn pieces */
.grid { display: grid; gap: 3px; user-select: none; }
.roadpanel { padding: 10px; margin-top: 0; }
.road { background: var(--rim); border-radius: 12px; padding: 4px; gap: 3px; }
.cell { aspect-ratio: 1; max-width: 100%; background: var(--road); border-radius: 6px; display: grid; place-items: center; position: relative; }
.cell > svg, .cell > .arrow { position: absolute; inset: 0; margin: auto; width: 82%; height: 82%; }
.cell.target { box-shadow: inset 0 0 0 2px var(--mustard); cursor: pointer; }
.cell.target:hover { background: var(--road-hover); }
.arrow { display: grid; place-items: center; transform: rotate(var(--turn)); }
.arrow svg { width: 70%; height: 70%; }
.arrow.far svg { width: 52%; height: 52%; opacity: .7; }
/* Tyre tracks: a dot in the colour of whoever drove there */
.cell.trail-a::before, .cell.trail-b::before { content: ''; width: 20%; height: 20%; border-radius: 50%; background: var(--kettle); opacity: .75; }
.cell.trail-b::before { background: var(--teal); }
.cell.p-car svg { filter: drop-shadow(0 2px 0 var(--rim)); }
.siren-a { animation: siren 1s steps(1) infinite; }
.siren-b { animation: siren 1s steps(1) infinite reverse; }
@keyframes siren { 0% { opacity: 1; } 50% { opacity: .25; } }
.hint { font-size: 14px; color: var(--soft); text-align: center; margin: 6px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; color: var(--soft); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 6px; background: var(--road); display: inline-grid; place-items: center; }
.swatch svg { width: 22px; height: 22px; }
.log .logrow { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1.5px dashed var(--chip); font-size: 14px; }
.log .logrow .avatar { width: 22px; height: 22px; font-size: 11px; }
.log { max-height: 260px; overflow: auto; }
.g-board { display: grid; gap: 0 18px; }

/* Who's playing */
.players { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; }
.player { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: 99px; border: 2px solid transparent; }
.player.them { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 12px; }
.player.turn { background: var(--card); border-color: var(--rim); box-shadow: 0 3px 0 var(--rim); }
.pname { font: 700 17px/1.1 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psub { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.player.turn .psub { color: var(--kettle); }
.amp { font: 800 24px var(--font-logo); color: var(--soft); }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--font-head); color: var(--card); background: var(--kettle); border: 2px solid var(--rim); }
.avatar-b { background: var(--teal); }
.player.turn .avatar { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* The heads-up display */
.hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 4px; padding: 8px 12px; border-radius: 14px; background: var(--chip); }
.hud-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.hud-item svg { width: 22px; height: 22px; }
.hud-item.spent { opacity: .45; filter: grayscale(1); }
.hud-label { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.meter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
.pips { display: flex; gap: 3px; }
.pips i { flex: 1; height: 8px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--rim); }
.pips i.used { background: var(--soft); }
.pips i.now { background: var(--mustard); }
/* The par turn (Omitsy): clear by here to unlock the next level. */
.pips i.par { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--teal); }
.fuel { height: 10px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--rim); overflow: hidden; }
.fuel i { display: block; height: 100%; background: var(--teal); }
.fuel.low i { background: var(--kettle); }
.life svg { width: 20px; height: 20px; }
.life.lost { opacity: .25; filter: grayscale(1); }
.howto { margin: 6px 0; font-size: 15px; }
.howto summary { cursor: pointer; font-weight: 700; color: var(--kettle); }
.howto p { margin: 6px 0; }

/* Omitsy: a table of word tiles */
.u-board { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "alert" "word" "thread" "input"; gap: 0 18px; }
.u-board.reveal { grid-template-areas: "word" "thread"; }
.u-alert { grid-area: alert; } .u-word { grid-area: word; } .u-thread { grid-area: thread; } .u-input { grid-area: input; }
.u-board.reveal .u-word { display: grid; grid-template-columns: 1fr; } /* the two words stacked, at every width */
.wordcard { position: relative; text-align: center; }
.wordcard .wordstatus, .wordcard .omens { justify-content: center; }
.plate { display: block; max-width: 100%; margin: 6px 0 10px; font: 800 40px/1.1 var(--font-head); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; animation: drop .35s both; }
/* The highlighter: drawn across the word from left to right when it appears. */
/* The highlighter: a solid marker stroke behind the whole word, ink letters on it (the same in every theme), drawn
   left to right when the word appears. The uneven corners make it look hand-drawn. */
.plate span { display: inline-block; max-width: 100%; padding: 4px 14px 5px; color: var(--mustard-ink); background: linear-gradient(var(--mustard), var(--mustard)) no-repeat 0 0 / 100% 100%; border-radius: 4px 12px 5px 14px / 12px 4px 14px 5px; transform: rotate(-1deg); animation: swipe .5s .15s ease-out both; }
@keyframes swipe { from { background-size: 0 100%; } }
/* Guessed: the highlight turns your buddy's colour and the word gets a tick. */
.wordcard.solved .plate span { color: var(--card); background-image: linear-gradient(var(--teal), var(--teal)); }
.wordcard.solved .plate span::after { content: ' ✓'; }
@keyframes drop { from { transform: translateY(-8px); opacity: 0; } }
.wordstatus { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--chip); color: var(--soft); }
.pill.good { background: var(--teal); color: var(--card); }
.table .empty { text-align: center; padding: 18px 0; }
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.trow { display: flex; align-items: center; gap: 10px; }
.trow.right { flex-direction: row-reverse; }
.tcontent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.trow.right .tcontent { justify-content: flex-end; }
.tile { position: relative; display: inline-block; font: 700 20px/1 var(--font-head); letter-spacing: .06em; padding: 10px 14px 9px; color: var(--ink); background: var(--card); border: 1.5px solid var(--rim); border-radius: 3px; box-shadow: 2px 3px 0 var(--rim); overflow-wrap: anywhere; transform: rotate(-1.2deg); }
/* A ruled line across the slip, like a strip torn from the notebook. */
.tile:not(.guessword)::before { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; border-bottom: 1px solid var(--rule); }
.trow.right .tile { color: var(--teal); transform: rotate(1.2deg); box-shadow: -2px 3px 0 var(--rim); }
/* Omitted: a red stroke is drawn through the word once it's written, as on the result screen. */
.tile.burned { color: var(--soft); }
.tile.burned::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; margin-top: -1px; background: var(--kettle); border-radius: 2px; transform: rotate(-2deg); transform-origin: left; }
.trow.fresh .tile.burned::after { animation: strike .35s ease-out both; animation-delay: calc(1.2s + var(--t, 0s)); }
@keyframes strike { from { transform: rotate(-2deg) scaleX(0); } }
/* A buddy's omitted word, during play: a slip with nothing to read, a thick ink bar wiped across it instead. */
.tile.covered .ink { color: transparent; }
.tile.covered::after { left: 6px; right: 6px; height: .72em; margin-top: -.36em; background: var(--ink); transform: rotate(-1deg); }
.trow.fresh .tile.covered .ink { animation: none; clip-path: none; }
.trow.fresh .tile.covered::after { animation: redact .45s ease-out both; animation-delay: calc(.4s + var(--t, 0s)); }
@keyframes redact { from { transform: rotate(-1deg) scaleX(0); } }
.tile.guessword { font-size: 16px; padding: 6px 10px; background: transparent; border-style: dashed; border-radius: 6px; box-shadow: none; transform: none; color: inherit; }
.guess { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.stamp { display: inline-block; font: 700 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 2.5px solid currentColor; border-radius: 6px; transform: rotate(-8deg); }
.stamp.bad { color: var(--kettle); }
.stamp.good { color: var(--teal); }
/* A new entry: the slip slides onto the table from that player's side, blank, then the word writes itself in,
   and any stamp (Nope, Yes!, Omitted) slams down after. */
.trow.fresh .tcontent { animation: slide-l .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: var(--t, 0s); }
.trow.right.fresh .tcontent { animation-name: slide-r; }
.trow.fresh .tile .ink { display: inline-block; clip-path: inset(-20% 0 -20% 0); animation: write .7s steps(8, end) both; animation-delay: calc(.4s + var(--t, 0s)); }
.trow.fresh .stamp { animation: slam .5s ease-out both; animation-delay: calc(1.15s + var(--t, 0s)); }
/* --t is how far into the animation a redraw found it (negative seconds), so it carries on rather than restarting. */
@keyframes slide-l { from { transform: translateX(-48px); opacity: 0; } }
@keyframes slide-r { from { transform: translateX(48px); opacity: 0; } }
@keyframes write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes slam { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
.yourmove .step { padding: 4px 0 10px; }
.yourmove .step + .step { border-top: 1.5px dashed var(--chip); padding-top: 12px; }
.steph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.num { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px var(--font-body); background: var(--mustard); color: var(--mustard-ink); border: 2px solid var(--rim); align-self: center; }
button.wide { width: 100%; margin-top: 4px; }
.shake { animation: shake .45s ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Result */
.result { position: relative; text-align: center; }
.result-art { margin: 0 auto 4px; text-align: center; }
/* The result's headline sits on the yellow highlighter, like the wordmark; the puzzle just played is the yellow row. */
.result h2 { display: inline-block; background: var(--mustard); color: var(--mustard-ink); padding: 4px 14px 5px; border-radius: 10px; transform: rotate(-1.5deg); margin: 6px 0 10px; }
.scorelabel.rowlabel.me { background: var(--mustard); color: var(--mustard-ink); }
.result-art svg { width: 76px; height: 76px; }
.result.win .result-art svg { animation: hop 1.8s ease-in-out infinite; }
/* An omitted word ended it: the word on a tile, struck through in red. */
.result-art .tile.omitted { color: var(--soft); text-decoration: line-through; text-decoration-color: var(--kettle); text-decoration-thickness: 3px; transform: rotate(-3deg); margin: 6px 0 10px; }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } }
.result textarea { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .plate, .plate span, .trow.fresh .tcontent, .trow.fresh .tile .ink, .trow.fresh .stamp, .trow.fresh .tile.burned::after, .reveal .omens .chip, .shake, .player.turn .avatar, .siren-a, .siren-b, .result.win .result-art svg { animation: none; }
}

/* Desktop: use the width instead of a stretched phone layout */
@media (min-width: 900px) {
  #app[data-screen="home"] { max-width: 1000px; }
  #app[data-screen="game"] { max-width: 1120px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
  .cards .panel { margin: 0; }
  .brand b { font-size: 36px; }
  .u-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "alert alert" "word thread" "input thread"; align-items: start; }
  .u-board.reveal { grid-template-areas: "word thread"; }
  .u-board.reveal .u-word { grid-template-columns: 1fr; }
  .g-board { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: start; }
  .g-side .panel:first-child { margin-top: 0; }
  .plate { font-size: 48px; }
  .tile { font-size: 22px; }
  .players, .hud { max-width: 100%; }
}

/* Omitsy */
.message { font: 700 34px/1.1 var(--font-head); letter-spacing: .04em; color: var(--kettle); overflow-wrap: anywhere; }
.label { font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.omens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thread { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bubble { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--rim); background: var(--card); max-width: 88%; font-size: 17px; overflow-wrap: anywhere; }
.bubble.medium { align-self: flex-end; background: var(--chip); }
.bubble .who { font-size: 12px; }
.bubble .words { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bubble.wrongguess { opacity: .7; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--chip); font-size: 14px; border: 1.5px solid transparent; }
.chip.hit { border-color: var(--kettle); color: var(--kettle); text-decoration: line-through; text-decoration-thickness: 2px; }
.reveal .omens .chip { animation: unredact .4s both; animation-delay: calc(.3s + var(--i, 0) * 70ms); }
@keyframes unredact { from { background: var(--ink); color: transparent; border-color: var(--ink); } }
.blank { display: inline-block; color: var(--soft); font-size: 20px; }
.burnt { color: var(--kettle); text-decoration-thickness: 2px; }
.picker { display: flex; flex-direction: column; gap: 6px; }
.sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.sug { padding: 5px 12px; border-radius: 99px; background: var(--chip); border: 1.5px solid var(--rim); box-shadow: none; font: 400 15px var(--font-body); }
.half { flex: 1 1 200px; margin: 0; min-width: 0; }

/* Second chance and the ad placeholder */
.adcover { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(8, 18, 15, .9); padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.adbox { background: var(--card); border: 2px solid var(--rim); border-radius: 18px; box-shadow: 0 4px 0 var(--rim); padding: 20px; max-width: 360px; text-align: center; }
.adbox { display: grid; gap: 10px; justify-items: center; }
.adbox h2, .adbox p { margin: 0; }
.house-art svg { width: 64px; height: 64px; }
.house-art .icon { width: 64px; height: 64px; }
.adbar { width: 100%; height: 8px; border-radius: 4px; background: var(--chip); border: 1.5px solid var(--rim); overflow: hidden; margin-top: 6px; }
.adbar-fill { height: 100%; background: var(--kettle); transform-origin: left; animation: adbar-drain linear forwards; }
@keyframes adbar-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
label.label { display: block; margin-top: 6px; }

/* Account, Premium and streaks */
input[type=email] { width: 100%; background: var(--card); color: var(--ink); border: 2px solid var(--rim); border-radius: 12px; padding: 10px 14px; font: 17px var(--font-body); margin: 6px 0 10px; }
/* The wordmark and the buttons share a line; the tagline sits under the wordmark on its own. */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topbar .topbar-right { margin-top: 8px; flex-wrap: nowrap; }
.topbar .brand { margin-bottom: 8px; }
.account-btn { font-size: 14px; padding: 6px 14px; white-space: nowrap; }
.streaks { display: flex; flex-direction: column; gap: 6px; }
.streakrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.streak { font: 700 13px var(--font-body); background: var(--mustard); color: var(--mustard-ink); border: 2px solid var(--rim); border-radius: 99px; padding: 2px 10px; }
.perks { padding-left: 20px; margin: 8px 0; }
.perks li { margin: 6px 0; }

/* Premium themes (ids unchanged, since accounts store them). Notebook is the default. Mint: green ink and coral.
   Blush: rose ink and slate blue. Midnight: always dark, with amber and sky. */
:root[data-skin="teal"] { --kettle: #14806f; --teal: #c8372e; --mustard: #b8f0d8; --hover: #dcf5ea; }
:root[data-skin="blush"] { --kettle: #c2386d; --teal: #3f6f8f; --mustard: #ffc9d9; --hover: #fde3ea; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="teal"]:not([data-theme="light"]) { --kettle: #4fd1b3; --teal: #ff6b5e; --mustard: #7fe0bb; }
  :root[data-skin="blush"]:not([data-theme="light"]) { --kettle: #ff86b0; --teal: #8ec0e0; --mustard: #ffb3c9; }
}
:root[data-skin="midnight"] {
  --paper: #0f1424; --rule: rgba(157, 180, 255, .07); --speck: rgba(233, 238, 248, .05); --card: #182038; --ink: #e9eef8;
  --soft: #a7b1c8; --rim: #05080f; --kettle: #ffb347; --kettle-ink: #0f1424; --mustard: #8fd0f4; --mustard-ink: #0f1424;
  --teal: #c4a7ff; --chip: #232c48; --hover: #2a3656; --cop: #ff8f7a; --road: #232c48; --road-hover: #33416a; color-scheme: dark;
}

/* Colour mode switch */
.footer { margin-top: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer p { margin: 0; }
.modes { display: inline-flex; border: 2px solid var(--rim); border-radius: 99px; overflow: hidden; box-shadow: 0 3px 0 var(--rim); background: var(--card); }
.modes button { border: 0; border-radius: 0; box-shadow: none; padding: 6px 14px; font-size: 13px; background: transparent; }
.modes button + button { border-left: 2px solid var(--rim); }
.modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.modes button:active:not(:disabled) { transform: none; box-shadow: none; }
/* Premium accents when dark is chosen explicitly (the device-dark versions are above) */
:root[data-skin="teal"][data-theme="dark"] { --kettle: #4fd1b3; --teal: #ff6b5e; --mustard: #7fe0bb; }
:root[data-skin="blush"][data-theme="dark"] { --kettle: #ff86b0; --teal: #8ec0e0; --mustard: #ffb3c9; }

/* Top bar: brand or back link on the left; account button and the colour toggle on the right */
.topbar { margin-bottom: 4px; }
.topbar-left { min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-right > .muted { margin-right: 4px; }
.mode-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; order: -1; } /* the corner goes to Sign in or Back */
.mode-toggle svg { width: 18px; height: 18px; }
@media (max-width: 420px) { .mode-name { display: none; } .mode-toggle { padding: 6px 8px; } }

/* Invitations */
.invite h2 { margin-top: 0; }
.invite input { font: 14px var(--font-mono); }
.invite-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.invite-card h2 { margin: 4px 0; }
.back { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 6px 14px 6px 8px; }
.back svg { width: 18px; height: 18px; flex: none; }
.psub { white-space: nowrap; }
@media (max-width: 420px) {
  .topbar-right > .muted { display: none; }
  .player { padding-right: 8px; gap: 8px; }
  .player.them { padding-left: 8px; }
  .pname { font-size: 15px; max-width: 30vw; }
}

/* Delete account: quiet until asked, then a clear red confirm. */
.panel.danger h2 { color: var(--soft); font-size: 18px; }
button.danger { background: var(--kettle); color: var(--kettle-ink); border-color: var(--rim); }
button.danger:hover:not(:disabled) { background: var(--kettle); filter: brightness(1.08); }

/* Omitsy levels: your secret key under your word, the Key stamp, and the level-cleared choice. */
.keybox { margin-top: 12px; padding: 10px 12px; border: 2px dashed var(--teal); border-radius: 12px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.keybox.played { border-style: solid; background: var(--chip); }
.keybox p { margin: 0; }
.keyword { font: 700 20px var(--font-mono, monospace); letter-spacing: .12em; color: var(--teal); }
.keyline { margin: 10px 0 0; text-align: center; }
.parbox { margin-top: 12px; padding: 8px 12px; border: 2px dashed var(--teal); border-radius: 12px; display: grid; gap: 2px; justify-items: center; text-align: center; }
.parbox p { margin: 0; }
.parbox .label { color: var(--teal); }
.parbox.missed { border-color: var(--soft); }
.parbox.missed .label { color: var(--soft); }
.stamp.key { background: var(--teal); color: var(--card); }
.levelup { display: grid; gap: 10px; border-color: var(--teal); }
.levelup h2 { margin: 0; }

/* Premium: past puzzles and stats. */
.archive-link { margin-top: 6px; }
/* Past puzzles: the entry row on the home screen, and the calendar (a tile per day, three bars for its puzzles). */
button.panel.entry { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-radius: 18px; padding: 12px 14px; box-shadow: 0 4px 0 var(--rim); font: inherit; }
button.panel.entry .calicon { width: 28px; height: 28px; flex: none; color: var(--kettle); }
button.panel.entry .entrytext { display: grid; gap: 1px; flex: 1; min-width: 0; } button.panel.entry .entrytext b { font: 800 17px var(--font-head); }
button.panel.entry .chev { font: 700 22px var(--font-body); color: var(--soft); }
.cal { padding: 14px; }
.calhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 18px; }
.calhead b { font: 800 20px var(--font-head); }
.calhead button { padding: 3px 11px; font-size: 14px; box-shadow: 0 2px 0 var(--rim); }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { text-align: center; font: 700 11px var(--font-body); color: var(--soft); letter-spacing: .06em; padding-bottom: 12px; }
/* A day's tile: its number, then a bar per puzzle. Filled bars are results; a hollow bar is a puzzle not played. */
.caltile { aspect-ratio: 1; border: 2px solid var(--chip); border-radius: 9px; display: grid; grid-template-rows: auto 1fr; padding: 3px 4px 4px; background: var(--card); min-width: 0; box-shadow: none; font: inherit; }
.caltile .dnum { font: 700 12px var(--font-body); color: var(--soft); line-height: 1; text-align: left; }
.caltile .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; align-self: end; }
/* Bars: blue beat par, ink over par, red lost, and a faint grey for a puzzle not played (visible in both themes). */
.caltile .cells i, .legend i { display: block; height: 6px; border-radius: 2px; background: var(--soft); opacity: .3; }
.caltile .cells i.u, .legend i.u { background: var(--teal); opacity: 1; }
.caltile .cells i.o, .legend i.o { background: var(--ink); opacity: 1; }
.caltile .cells i.m, .legend i.m { background: var(--kettle); opacity: 1; }
.caltile.today .cells i { background: var(--mustard-ink); opacity: .35; }
.caltile.marked { border-color: var(--rim); }
.caltile.today { border-color: var(--mustard); background: var(--mustard); } .caltile.today .dnum { color: var(--mustard-ink); }
.caltile.blank { visibility: hidden; }
.caltile.sel { box-shadow: 0 0 0 3px var(--teal); }
.legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--soft); margin-top: 12px; }
.legend i { display: inline-block; width: 14px; vertical-align: middle; margin-right: 5px; }
/* The chosen day: a row per puzzle, its levels, its total, and one button. */
.daycard .scoregrid { grid-template-columns: 24px repeat(3, 1fr) 68px; }
.daycard .scorecell { font-size: 22px; padding: 9px 0 10px; } .daycard .scorecell.skipped, .daycard .scorecell.locked { font-size: 20px; }
.daycard .scorelabel { font-size: 11px; } .daycard .rowlabel { font: 800 16px var(--font-head); display: grid; place-items: center; }
.daycard .act { background: var(--card); display: grid; place-items: center; padding: 0 4px; }
.daycard .act button { padding: 4px 11px; font-size: 13px; box-shadow: 0 2px 0 var(--rim); }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.statgrid b { display: block; font: 700 28px var(--font-head); color: var(--kettle); }
.statgrid span { font-size: 13px; color: var(--soft); }
table.stats { width: 100%; border-collapse: collapse; }
table.stats th, table.stats td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--chip); }
table.stats th:first-child { text-align: left; }
.scrollx { overflow-x: auto; }
.scrollx table.stats { min-width: 560px; font-size: 13px; }
.metricchart { display: block; width: 100%; height: 60px; margin-top: 12px; }
.metricchart rect { fill: var(--kettle); }
.panel.locked { border-style: dashed; }

/* Sign in with Apple / Google. */
.oauth { display: grid; gap: 8px; justify-items: start; margin: 10px 0 4px; }
.oauth:empty { display: none; }
.oauth-btn { min-width: 280px; font-weight: 700; }
.oauth-btn.apple { background: #000; color: #fff; border-color: #000; }
.oauth-btn.google { background: #fff; color: #1f1f1f; border-color: #747775; }
.oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Sign-in: one clear action per step; the code box is big and easy to type into. */
.signin { display: grid; gap: 8px; }
.signin > * { margin: 0; }
.signin .codebox { font: 700 28px var(--font-mono, monospace); letter-spacing: .5em; text-align: center; padding: 12px 8px 12px calc(8px + .5em); }
.signin .resend { margin-top: 14px; text-align: center; }
.signin button.link.small { font-size: inherit; padding: 0; }
.signin button.link:disabled { opacity: .6; cursor: default; text-decoration: none; }
.adminbox { border: 1.5px dashed var(--teal); border-radius: 10px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 6px; justify-items: start; }
.adminbox p { margin: 0; }

/* Placement pass (2026-10-18). */
/* A panel's heading label sits on its own line, so the spacing above it applies. */
.panel > b { display: block; }
.panel > b.spaced { margin-top: 14px; }
/* No empty gap where an error would go. */
.err:empty { min-height: 0; margin: 0; }
/* Rows of buttons that belong to centred content. */
.center-row { justify-content: center; }
/* Second chance: the two choices side by side, filling the column. */
.notice.alert .row button { flex: 1 1 150px; }
/* Pass-and-play handoff: the mark centred over the message. */
.cover-art { display: grid; place-items: center; margin-bottom: 6px; }
.cover-art svg { width: 56px; height: 56px; }
.cover .primary { margin-top: 6px; }
/* The wordmark's tagline stays on one line. */
.brand span { white-space: nowrap; }
@media (max-width: 440px) { .brand span { letter-spacing: .12em; font-size: 10px; } }
/* Phones: the turn meter on its own line, then the second chance on the left and the level on the right. */
@media (max-width: 520px) {
}
/* Static pages (Premium, Terms, Privacy, Refunds): the Home pill, as on the app's screens. */
a.home-pill { display: inline-flex; align-items: center; gap: 4px; font: 700 14px var(--font-body); color: var(--ink); text-decoration: none; white-space: nowrap; background: var(--card); border: 2px solid var(--rim); border-radius: 99px; padding: 6px 14px 6px 8px; box-shadow: 0 3px 0 var(--rim); }
a.home-pill:hover { background: var(--hover); }
a.home-pill svg { width: 18px; height: 18px; }

/* How to play: numbered steps, each with a small example made of real game pieces. */
.howto-body { margin-top: 6px; }
.howsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: none; }
.howstep { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--chip); }
.howstep:last-child { border-bottom: 0; padding-bottom: 0; }
.howhead { display: flex; align-items: center; gap: 8px; }
.howhead b { font: 700 17px/1.2 var(--font-head); }
.howstep p { margin: 0; color: var(--soft); font-size: 15px; }
.howexample { margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--paper); border: 1.5px dashed var(--rule); pointer-events: none; }
.howexample .plate { margin: 0; text-align: center; font-size: 30px; animation: none; }
.howexample .plate span { animation: none; }
.howexample .thread { margin-top: 0; gap: 8px; }
.howexample .avatar { width: 30px; height: 30px; font-size: 13px; }
.howexample .tile { font-size: 16px; padding: 8px 11px 7px; }
.howexample .tile.guessword { font-size: 14px; padding: 5px 8px; }
.howexample .stamp { font-size: 11px; }
.howmeter { display: grid; gap: 6px; }
.howstep p.howtip { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--hover); color: var(--ink); font-size: 14px; }
details.howto[open] summary { margin-bottom: 4px; }
@media (min-width: 900px) {
  /* Wide screens: two steps per row on the home page. */
  #app[data-screen="home"] .howsteps { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  #app[data-screen="home"] .howstep:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}

/* The summary inside #app before the script draws (search engines, no JavaScript). */
.noscript-intro { padding: 24px 0; }
.noscript-intro p { max-width: 65ch; }
.doc .howsteps { padding: 16px; }

/* Accessibility. Text only screen readers hear; a visible focus ring on links and How to play. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, summary:focus-visible, .choice:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; border-radius: 4px; }

/* The scorecard (result, level-up and the shared image all match): golf-style score against par per level. */
.scorecard { max-width: 380px; margin: 12px auto; }
.scorehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.scorehead b { font: 800 20px var(--font-head); }
.scorehead span { font: 700 15px var(--font-body); color: var(--soft); }
.scoregrid { display: grid; gap: 0 3px; background: var(--rim); border: 3px solid var(--rim); border-radius: 14px; overflow: hidden; }
.scorelabel { color: var(--paper); font: 700 12px var(--font-body); text-align: center; padding: 4px 0; background: var(--rim); }
.scorecell { background: var(--card); text-align: center; font: 800 34px/1 var(--font-head); padding: 16px 0 18px; color: var(--ink); }
.scorecell.under { background: var(--teal); color: var(--card); } /* dark mode: ink on the lighter blue */
.scorecell.missed { color: var(--kettle); }
.scorecell.locked, .scorecell.skipped, .scorecell.playing { color: var(--soft); font-size: 26px; }
.scorecell .lockmark { width: 1.45em; height: 1.45em; display: block; margin: -.2em auto -.2em; }
.levelup .scorecard { margin: 4px 0 0; max-width: 320px; }
:root[data-theme="dark"] .scorelabel, :root[data-skin="midnight"] .scorelabel { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scorelabel { color: var(--ink); } }
details.sharetext { margin-top: 8px; font-size: 14px; color: var(--soft); }
details.sharetext summary { cursor: pointer; text-align: center; }
details.sharetext textarea { margin-top: 8px; }

/* Par: one quiet line under your word. */
.parline { margin: 4px 0 0; color: var(--soft); }
.parline b { color: var(--teal); font-weight: 700; }
.parline.missed b { color: var(--soft); }
/* The buddy's clues so far, right above where you guess. */
.theirclues { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; }
.theirclues .label { margin-right: 2px; }
.tile.mini { font-size: 14px; padding: 5px 8px 4px; color: var(--teal); box-shadow: 1px 2px 0 var(--rim); }
.tile.mini::before { display: none; }
/* Saying an omitted word: a pop-up over the board. */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(29, 35, 64, .55); }
.panel.modal { width: min(380px, 100%); margin: 0; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 18px 18px; }
.panel.modal h2 { margin: 2px 0 0; font-size: 28px; color: var(--kettle); }
.panel.modal p { margin: 0; }
.panel.modal .stack { display: grid; gap: 10px; width: 100%; margin-top: 10px; }
.panel.modal .stack button { width: 100%; }
/* Phones: less chrome, smaller pieces, and your move above the table so you don't scroll past it. */
@media (max-width: 520px) {
  .panel { padding: 12px; margin: 10px 0; }
  .howto { margin: 4px 0; font-size: 14px; }
  .u-board { grid-template-areas: "alert" "word" "input" "thread"; }
  .plate { font-size: 32px; margin: 2px 0 6px; }
  .wordcard .label { margin-bottom: 0; }
  .tile { font-size: 17px; padding: 8px 11px 7px; }
  .tile.guessword { font-size: 14px; padding: 5px 8px; }
  .thread { gap: 7px; }
  .yourmove .step { padding: 2px 0 8px; }
}
/* The game's How to play button: phones only (wider screens keep the How to play line). */
.howbtn { display: none; }
@media (max-width: 520px) {
  .game-top .mode-toggle { display: none; }
  .howbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; padding: 6px 12px; }
  .howbtn .howtxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .howbtn { min-width: 40px; justify-content: center; }
  details.howto:not(.panel) > summary { display: none; }
}
/* Level-up choices fill the row evenly. */
.levelup .row button { flex: 1 1 140px; }
/* Your move, on the table: the next lines of the conversation, then Send. */
.composer { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--chip); }
.composer .lastturn { margin: 0; }
.compose-row { align-items: flex-start; }
.compose-row .tcontent { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; }
.trow.right.compose-row .tcontent { flex-direction: row; }
.compose-row .picker { flex: 1; min-width: 0; }
.compose-row .isit { font: 700 16px var(--font-head); height: 45px; display: inline-flex; align-items: center; white-space: nowrap; }
.compose-row #guess { border-style: dashed; border-radius: 8px; }
.compose-row #clue { font: 700 18px var(--font-head); letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; box-shadow: 2px 3px 0 var(--rim); }
.compose-row #clue::placeholder { text-transform: none; letter-spacing: 0; font: 400 16px var(--font-body); }
.compose-row .avatar { margin-top: 3.5px; }
/* The move's inputs sit flush with the row, so the avatar and "Is it" centre on them. */
.compose-row input[type=text] { margin-top: 0; height: 45px; box-sizing: border-box; }

/* The status card: players around the level badges, the turn track with the par pin, the take-back. */
.panel.hud { display: grid; gap: 10px; margin: 14px 0 10px; padding: 12px 14px; background: var(--card); }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.seat-slot.right { justify-self: end; }
.hud .player { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; }
.hud .player.them { flex-direction: row-reverse; text-align: right; }
.hud .player.idle { opacity: .45; }
.hud .player.turn { background: none; box-shadow: none; }
.hud .player.turn .avatar { box-shadow: 0 0 0 3px var(--mustard); animation: none; }
.hud .avatar { width: 30px; height: 30px; font-size: 14px; }
.hud .pname { font: 800 16px/1 var(--font-head); }
.levels { display: flex; gap: 4px; }
.lvl { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--rim); display: grid; place-items: center; font: 800 12px var(--font-head); background: var(--card); color: var(--ink); }
.lvl.now { background: var(--mustard); color: var(--mustard-ink); }
.lvl.done { background: var(--teal); border-color: var(--teal); color: var(--card); }
.lvl.missed { color: var(--kettle); }
.lvl.locked { background: var(--chip); border-color: var(--soft); color: var(--soft); }
.lvl svg { width: 12px; height: 12px; }
.hud-sep { border-top: 1.5px dashed var(--soft); opacity: .4; }
.track { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.track .pip { fill: var(--card); stroke: var(--rim); stroke-width: 2; }
.track .pip.used { fill: var(--soft); stroke: var(--soft); }
.track .pip.now { fill: var(--mustard); }
.track .pip.won { fill: var(--teal); stroke: var(--teal); }
.track .pip.over { stroke: var(--soft); stroke-dasharray: 3 3; opacity: .6; }
.track .pip.par { stroke: var(--teal); }
.track .tick { fill: none; stroke: var(--card); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.track .pin { stroke: var(--teal); stroke-width: 2; stroke-linecap: round; }
.track .flag { fill: var(--teal); }
.takeback { display: flex; justify-content: center; align-items: center; gap: 6px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.takeback svg { width: 15px; height: 15px; color: var(--ink); }
.takeback.spent { opacity: .55; }
.takeback.spent svg { color: var(--soft); }
.parline.missed { margin: 6px 0 0; color: var(--soft); }
@media (max-width: 520px) {
  .game-top { margin-bottom: 0; padding-bottom: 6px; }
  .panel.hud { margin: 16px 0 10px; padding: 10px 12px; }
}

/* "Report a problem · Send feedback" under a result: the link looks like the button next to it. */
.problem a.link { color: var(--kettle); font-weight: 700; }
.problem .center-row { gap: 8px; align-items: baseline; }

/* Home: today's puzzles, one row each (letter, where it stands, what to do). */
.puzrows { display: grid; gap: 8px; margin: 10px 0 12px; }
.puzrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border: 1.5px solid var(--chip); border-radius: 12px; }
.puzrow.turn { border-color: var(--kettle); }
.puzrow.done { background: var(--chip); }
.puzletter { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--rim); display: grid; place-items: center; font: 800 15px var(--font-head); background: var(--card); color: var(--ink); }
.puzrow.done .puzletter { background: var(--teal); border-color: var(--teal); color: var(--card); }
.puzrow.turn .puzletter { background: var(--mustard); color: var(--mustard-ink); }
.puzstatus { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.puzrow button { padding: 6px 11px; font-size: 14px; }
/* The first screen. */
.landing .tagline { font: 800 34px/1.05 var(--font-head); margin: 4px 0 10px; letter-spacing: -.01em; }
.landing .lead { font-size: 17px; margin: 0 0 14px; }
.friendsday { margin: 6px 0 14px; }
.friendsday .scorehead span { font-size: 13px; }
.scorecell.sq { padding: 12px 0; min-height: 10px; }
/* The day's grid: a row per puzzle, a column per level, and the puzzle's total. */
.scorecard.day { max-width: 420px; }
.daygrid .rowlabel { font: 800 14px var(--font-head); display: grid; place-items: center; }
.scorecell.total { font-size: 22px; }
.label.spaced { margin-top: 14px; }
/* First-turn tips, one at a time, pointing at the thing they're about. */
.tipcard { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.4; margin: 0 0 10px; }
.tipfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tipdots { display: inline-flex; gap: 5px; }
.tipdots i { width: 7px; height: 7px; border-radius: 4px; background: var(--soft); }
.tipdots i.on { background: var(--mustard); }
.tipnext { background: var(--mustard); color: var(--mustard-ink); border: 0; box-shadow: none; border-radius: 99px; padding: 5px 14px; font-weight: 700; }
.tiphl { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tipcard { background: var(--card); color: var(--ink); border: 2px solid var(--rim); } }
:root[data-theme="dark"] .tipcard { background: var(--card); color: var(--ink); border: 2px solid var(--rim); }
/* Giving up: quiet. */
.giveup { color: var(--soft); font-weight: 500; }
a.button { display: inline-block; text-decoration: none; }
/* The friend's day on the first screen: title, then the note under it. */
.friendsday .scorehead { flex-direction: column; align-items: flex-start; gap: 0; }

/* Buddies and invites on the home screen. */
.buddies .streakrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; }
.buddies button.small, .puzrow button.small { padding: 5px 12px; font-size: 13px; }
.invite-row { margin-top: 8px; }

/* Stats: four basics, and the score distribution as bars. */
.statgrid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) { .statgrid.four { grid-template-columns: repeat(2, 1fr); } }
.dist { display: grid; gap: 5px; margin-top: 8px; }
.distrow { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; }
.distkey { font: 800 14px var(--font-head); text-align: right; }
.distbar { height: 16px; background: var(--chip); border-radius: 8px; overflow: hidden; }
.distbar i { display: block; height: 100%; background: var(--soft); border-radius: 8px; min-width: 2px; }
.distrow.under .distbar i { background: var(--teal); }
.distn { color: var(--soft); }
.signin-nudge { border-color: var(--teal); }

/* A finished game in its home row: its row of the scorecard, small, then the buddy. */
.today .scorecard { margin: 6px 0 14px; max-width: none; }
.today .scorecell { font-size: 26px; padding: 10px 0 11px; }
.today .scorecell.locked, .today .scorecell.skipped, .today .scorecell.playing { font-size: 22px; }
.puzrow.done { align-items: center; }

/* The reveal: a tab per level, everything on the centre line. */
.reveal-panel h2 { margin: 0 0 4px; }
.reveal-panel .center { text-align: center; }
.tabs { display: flex; justify-content: center; gap: 6px; margin: 8px 0 12px; }
.tab { padding: 6px 14px; font-size: 14px; border-radius: 99px; background: var(--card); box-shadow: none; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reveal-head { text-align: center; margin: 0 0 8px; font-size: 15px; }
.reveal-panel input[type=range] { display: block; margin: 8px auto 0; }

/* The reveal board has no move or alert areas: without this they became empty grid columns that pushed the cards off centre. */
.u-board.reveal { grid-template-columns: minmax(0, 1fr); gap: 0; }
.u-board.reveal .u-alert, .u-board.reveal .u-input { display: none; }