/* 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; }
/* The focus ring is ink with a yellow halo: yellow alone barely shows on the paper. */
button:focus-visible, .cell.target:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--mustard); }
@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: 60; 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(--ink); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 7px var(--mustard); }

/* 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); }
/* A one-level puzzle (Easy, Medium, Hard) shows its name where older games show level badges. */
.puzname { font: 800 13px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border: 2px solid var(--rim); border-radius: 999px; background: var(--card); color: var(--ink); }
.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: 74px 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); }
/* The puzzle's name (Easy, Medium, Hard) as a tag at the start of its row. */
.puzletter { height: 30px; padding: 0 8px; border-radius: 8px; border: 2px solid var(--rim); display: grid; place-items: center; font: 800 13px var(--font-head); letter-spacing: .02em; 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; }
/* Today's puzzles as their share-card bubbles (rules 3), three across; each bubble is its button. */
.dbubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 10px; }
.dbub { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; font: inherit; color: var(--ink); }
button.dbub { background: none; border: 0; box-shadow: none; padding: 4px 0; border-radius: 14px; }
button.dbub:hover:not(:disabled) { background: var(--hover); }
button.dbub:active:not(:disabled) { transform: none; box-shadow: none; }
button.dbub:active:not(:disabled) svg { transform: translateY(2px); }
.dbub-name { font: 800 16px var(--font-head); margin-bottom: 4px; }
.dbub-shape { position: relative; width: 100%; max-width: 116px; display: block; }
.dbub-shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.dbub-mid { position: absolute; left: 0; right: 0; top: 0; height: 82%; display: grid; place-items: center; pointer-events: none; }
.dbub-score { font: 800 26px var(--font-head); color: var(--ink); }
.dbub-strike { width: 40%; height: 5px; border-radius: 9px; background: var(--kettle); }
.dbub-dots { font: 800 22px var(--font-head); color: var(--soft); letter-spacing: 2px; margin-top: -6px; }
.dbub-sub { font: 700 13px var(--font-body); color: var(--soft); line-height: 1.25; margin-top: 2px; max-width: 100%; }
.dbub-sub.turn { color: var(--kettle); }
.dbub-sub b { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--teal); font: 800 15px var(--font-head); min-width: 0; }
.dbub-bname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dbub-sub .sk { font-size: 14px; flex: none; } .dbub-sub .sk svg { width: 11px; height: 15px; }
.dbub-total { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 12px; padding-top: 8px; border-top: 2px dashed var(--road); font: 700 14px var(--font-body); color: var(--soft); }
.dbub-total b { font: 800 22px var(--font-head); color: var(--ink); }
/* 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; }
/* A version-2 share link: the card the link's preview showed, as the server drew it. */
.friendcard { margin: 6px 0 14px; }
.friendcard img { display: block; width: 100%; height: auto; border: 1.5px solid var(--rim); border-radius: 10px; box-shadow: 2px 3px 0 var(--rim); background: var(--paper); }
.friendcard figcaption { margin-top: 8px; }
.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); }

/* The stats screen. Scores read as everywhere in the game (the calendar too): blue at or under par, ink over, red not cleared; the
   highlighter marks your last game and your best partner. Figures use tabular numerals so columns line up. */
.st-figs, .st-bars, .st-table, .st-form, .st-card, .st-records, .st-bavg { font-variant-numeric: tabular-nums; }
h2.st-h { font: 800 19px var(--font-head); margin: 0 0 10px; }
.st-figs { display: grid; grid-template-columns: repeat(4, 1fr); }
.st-fig { display: grid; gap: 2px; padding: 2px 8px; text-align: center; }
.st-fig + .st-fig { border-left: 1.5px dashed var(--road); }
.st-fig b { font: 800 26px/1.1 var(--font-head); color: var(--ink); }
.st-fig span { font-size: 12px; line-height: 1.25; color: var(--soft); }
@media (max-width: 380px) {
  .st-figs { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .st-fig:nth-child(3) { border-left: 0; }
}
.st-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.st-head h2 { font: 800 19px var(--font-head); margin: 0; }
.st-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--chip); }
button.st-tab { border: 1.5px solid transparent; box-shadow: none; background: none; color: var(--soft); padding: 4px 10px; font: 700 13px var(--font-body); border-radius: 99px; }
button.st-tab:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
button.st-tab:active:not(:disabled) { transform: none; box-shadow: none; }
button.st-tab[aria-selected="true"] { background: var(--card); color: var(--ink); border-color: var(--rim); box-shadow: 0 1px 0 var(--rim); }
.st-bars { display: grid; gap: 5px; margin-top: 14px; }
.st-bar { display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 8px; }
.st-key { font: 800 14px var(--font-head); text-align: center; border-radius: 6px; padding: 1px 0; }
.st-bar.lost .st-key { color: var(--kettle); }
.st-bar.last .st-key { background: var(--mustard); color: var(--mustard-ink); }
.st-track { height: 18px; border-radius: 6px; background: var(--chip); overflow: hidden; }
.st-track i { display: block; height: 100%; border-radius: 6px; transition: width .2s cubic-bezier(.2, .8, .2, 1); }
.st-bar.under .st-track i { background: var(--teal); }
.st-bar.over .st-track i { background: var(--ink); }
.st-bar.lost .st-track i { box-sizing: border-box; border: 2px solid var(--kettle); background: color-mix(in srgb, var(--kettle) 14%, transparent); }
.st-n { font-size: 13px; color: var(--soft); text-align: right; }
.st-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--soft); }
.st-lastkey { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--mustard); margin-right: 6px; vertical-align: -1px; }
.st-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--soft); }
.st-line b { color: var(--ink); }
/* A buddy: avatar, name and average on one line; then games, the last ten results, and how you read each other. */
/* A buddy's line on the stats page: avatar, name and games, the live streak, the average; it opens their page. */
.st-blink { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; box-shadow: none; padding: 10px 4px; font: inherit; color: var(--ink); }
.st-blink + .st-blink { border-top: 1.5px dashed var(--road); border-radius: 0; }
button.st-blink:active:not(:disabled) { transform: none; box-shadow: none; }
.st-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: var(--card); display: grid; place-items: center; font: 800 16px var(--font-head); }
.st-bname { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.st-bname b { font: 800 18px var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.st-tag { background: var(--mustard); color: var(--mustard-ink); font: 700 11px var(--font-body); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.st-bavg { text-align: right; line-height: 1; }
.st-bavg b { display: block; font: 800 24px var(--font-head); color: var(--ink); }
.st-bavg.under b { color: var(--teal); }
.st-bavg span { font-size: 11px; color: var(--soft); }
.st-bmeta { display: block; width: 100%; font: 400 13px var(--font-body); color: var(--soft); }
.st-form { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.st-chip { height: 24px; padding: 0; box-sizing: border-box; border-radius: 6px; display: grid; place-items: center; font: 800 12px var(--font-head); }
.st-chip.under { background: var(--teal); color: var(--card); }
.st-chip.over { background: var(--ink); color: var(--paper); }
.st-chip.lost { border: 1.5px solid var(--kettle); color: var(--kettle); }
/* Tables: a row label, then a column per difficulty. */
.st-table { width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { padding: 8px 4px; border-bottom: 1px solid var(--chip); text-align: right; }
.st-table thead th { font: 700 12px var(--font-body); color: var(--soft); padding-top: 0; }
.st-table tbody th { text-align: left; font: 700 14px var(--font-body); color: var(--soft); }
.st-table td { font: 800 16px var(--font-head); color: var(--ink); }
.st-table tbody tr:last-child th, .st-table tbody tr:last-child td { border-bottom: 0; }
.st-table .u { color: var(--teal); }
/* The last two weeks: the scorecard's own grid, a day per row. */
.st-card { grid-template-columns: 52px repeat(3, 1fr); }
.st-day { background: var(--rim); color: var(--paper); display: grid; place-items: center; align-content: center; padding: 4px 0; line-height: 1.05; }
.st-day b { font: 800 16px var(--font-head); }
.st-day span { font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
:root[data-theme="dark"] .st-day, :root[data-skin="midnight"] .st-day { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-day { color: var(--ink); } }
.scorecell.st-cell { padding: 6px 2px 5px; font-size: 18px; min-width: 0; }
.st-cell b { display: block; font: 800 18px/1.1 var(--font-head); }
.st-cell span { display: block; font: 700 11px var(--font-body); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorecell.st-cell.skipped { display: grid; place-items: center; font-size: 18px; }
/* Records: what, the figure, and when. */
.st-records { margin: 0; }
.st-records div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 9px 0; }
.st-records div + div { border-top: 1.5px dashed var(--road); }
.st-records dt { font: 700 14px var(--font-body); color: var(--soft); padding-top: 2px; }
.st-records dd { margin: 0; }
.st-records dd b { display: block; font: 800 18px var(--font-head); color: var(--ink); }
.st-records dd span { font-size: 13px; color: var(--soft); }
.st-empty h2, .st-locked h2 { font: 800 21px var(--font-head); margin: 0 0 6px; }
.st-empty p { margin: 0 0 14px; }
.st-list { margin: 8px 0 10px; padding-left: 20px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .st-track i { transition: none; } }

/* 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; }

/* Streaks: a drawn flame and the count, grey when there's none. */
.sk { display: inline-flex; align-items: center; gap: 3px; font: 800 17px var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk svg { width: 14px; height: 19px; flex: none; }
.sk.off { color: var(--soft); font-weight: 700; }
.sk.big { font-size: 36px; gap: 6px; } .sk.big svg { width: 28px; height: 38px; }
/* Buddies on the home screen (and the full list): who, the streak, the one thing to do. */
.bl { display: grid; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 8px; align-items: center; padding: 7px 0; } /* a fixed column for the button, so every bar is the same size */
.bl-row + .bl-row { border-top: 1.5px dashed var(--road); }
button.bl-who { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; background: none; border: 0; box-shadow: none; padding: 4px 10px 4px 4px; border-radius: 12px; font: inherit; color: var(--ink); min-width: 0; }
button.bl-who:active:not(:disabled) { transform: none; box-shadow: none; }
.bl-av { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--teal); color: var(--card); display: grid; place-items: center; font: 800 18px var(--font-head); }
.bl-av.new { background: var(--chip); color: var(--ink); }
.bl-done { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.bl-done svg { width: 15px; height: 15px; }
.bl-text { display: grid; gap: 1px; min-width: 0; }
.bl-text b { font: 800 18px var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-status { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--soft); min-width: 0; white-space: nowrap; }
.bl-st { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bl-status svg { width: 14px; height: 14px; flex: none; }
.bl-row.risk .bl-status, .bl-row.save .bl-status, .bl-row.turn .bl-status { color: var(--kettle); font-weight: 700; }
.bl-act { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.bl-act button { padding: 6px 13px; font-size: 14px; box-shadow: 0 2px 0 var(--rim); }
.bl-more { display: block; margin: 8px auto 0; }
.bl-note { margin: 0 0 4px; }
.bl-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; }
/* A buddy's page. */
.bp-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin: 4px 0 14px; }
.bp-av { width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: var(--card); display: grid; place-items: center; font: 800 28px var(--font-head); }
.bp-head h1 { margin: 0; line-height: 1.05; overflow-wrap: anywhere; }
.bp-head p { margin: 3px 0 0; font-size: 14px; color: var(--soft); }
.bp-streak { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.bp-sub { font-size: 14px; color: var(--soft); line-height: 1.35; } .bp-sub b { color: var(--ink); font-size: 15px; }
.bp-days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 8px; }
.bp-days i { height: 22px; border-radius: 5px; background: var(--chip); }
.bp-days i.on { background: var(--mustard); }
.bp-days i.now { box-shadow: inset 0 0 0 2px var(--rim); }
.bp-dayslab { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; color: var(--soft); }
.bp-cta { margin: 4px 0 14px; }
.bp-figs { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.bp-figs div + div { border-left: 1.5px dashed var(--road); }
.bp-figs b { display: block; font: 800 26px/1.1 var(--font-head); } .bp-figs b.u { color: var(--teal); }
.bp-figs span { font-size: 12px; color: var(--soft); }
.bp-note { font-size: 13px; color: var(--soft); margin: 6px 0 0; }
/* How quickly you read each other: you in highlighter, them in blue, as on the share card. */
.rd { display: grid; gap: 10px; }
.rd-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 14px; }
.rd-row b { font: 800 16px var(--font-head); font-variant-numeric: tabular-nums; }
.rd-bar { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: var(--chip); overflow: hidden; }
.rd-bar i { display: block; height: 100%; border-radius: 6px; }
.rd-bar.me i { background: var(--mustard); } .rd-bar.them i { background: var(--teal); }

/* Premium, wherever something is locked: the badge (ink, with the highlighter lock), the locked thing blurred under
   one line and the one button, "Unlock with Premium", in ink so it never looks like Play. */
.pm-lock { width: 12px; height: 12px; flex: none; }
.pm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 700 11px var(--font-body); letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.entrytext b .pm-badge { margin-left: 8px; }
button.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: var(--paper); border-color: var(--rim); }
button.pm-btn:hover:not(:disabled) { background: var(--ink); filter: brightness(1.15); }
button.pm-btn .pm-lock { width: 14px; height: 14px; }
button.pm-btn.small { padding: 4px 10px; font-size: 13px; gap: 5px; box-shadow: 0 2px 0 var(--rim); }
button.pm-btn.small .pm-lock { width: 11px; height: 11px; }
.lk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lk-head h2 { margin: 0; }
.lk-body { position: relative; min-height: 200px; }
.lk-preview { filter: blur(4px); opacity: .6; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.lk-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, 92%); box-sizing: border-box; display: grid; justify-items: center; gap: 12px; text-align: center; background: var(--card); border: 2px solid var(--rim); border-radius: 16px; box-shadow: 0 4px 0 var(--rim); padding: 16px 16px 18px; }
.lk-card p { margin: 0; font-size: 15px; line-height: 1.4; }
.lk-row p { margin: 0 0 12px; }
.choice.lk-choice div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.choice.lk-choice .pm-lock { width: 13px; height: 13px; }
@media (prefers-reduced-transparency: reduce) { .lk-preview { opacity: .25; } }
/* The Premium page: the perks from one list, the one you came for in highlighter. */
.pm-top { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 6px; }
.pm-top h2 { margin: 0; }
.pm-top p { margin: 2px 0 0; }
.pm-art svg { width: 56px; height: 56px; display: block; }
.pricing .perks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.pricing .perks li { margin: 0; padding: 7px 10px 7px 30px; border-radius: 10px; position: relative; line-height: 1.4; }
.pricing .perks li::before { content: ''; position: absolute; left: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pricing .perks li.from { background: var(--mustard); color: var(--mustard-ink); }
.pricing .perks li.from::before { background: var(--mustard-ink); }
.pm-hero { text-align: center; display: grid; justify-items: center; gap: 6px; }
.pm-hero h1 { margin: 4px 0 0; }
.pm-hero p { margin: 0; }

/* A screen with a way back: back first, top left; the rest on the right. */
.topbar.sub { align-items: center; margin: 6px 0 12px; }
.topbar.sub .topbar-right { margin-top: 0; }
/* A day a streak freeze covered: striped, blue on the empty square. */
.bp-days i.fz, .bp-fznote i { background: repeating-linear-gradient(135deg, var(--chip) 0 3px, var(--teal) 3px 5px); }
.bp-fznote { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; color: var(--soft); }
.bp-fznote i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.bp-h3 { font: 700 13px var(--font-body); color: var(--soft); margin: 4px 0 6px; }
.panel .st-form + .bp-dayslab { margin-top: 4px; }
/* A day in the strip with its game's score: coloured as the score bars are (blue at or under par, ink over, a red
   outline not cleared). */
.bp-days i.sc { display: grid; place-items: center; font: 800 10px var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bp-days i.sc.under { background: var(--teal); color: var(--card); }
.bp-days i.sc.over { background: var(--ink); color: var(--paper); }
.bp-days i.sc.lost { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--kettle); color: var(--kettle); }
.bp-days i.sc.now { box-shadow: inset 0 0 0 2px var(--rim); }
.bp-days i.sc.lost.now { box-shadow: inset 0 0 0 2px var(--kettle); }

/* The finish screen: the day's bubbles with this game's marked, then the streak with this buddy and your scores. */
.fin-day { margin: 14px 0 4px; }
.dbub.mark .dbub-name { background: var(--mustard); color: var(--mustard-ink); border-radius: 99px; padding: 0 10px; }
.fin-streak { margin: 14px 0 0; }
.fin-sk { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--chip); }
.fin-sk b { display: block; font: 800 18px var(--font-head); color: var(--ink); }
.fin-sk > div > span { font-size: 14px; color: var(--soft); }
.fin-sk.mile { background: var(--mustard); } .fin-sk.mile b, .fin-sk.mile > div > span, .fin-sk.mile .sk { color: var(--mustard-ink); }
.fin-scores { margin-top: 14px; text-align: left; }
/* The flame's count steps up once, with a short pop, when this game extends the streak. */
.sk.pop svg { animation: sk-pop .5s cubic-bezier(.16, 1, .3, 1); }
.sk.pop { animation: sk-num .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes sk-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sk-num { 0% { transform: translateY(4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk.pop, .sk.pop svg { animation: none; } }
/* Streak milestones on a buddy's page: earned ones in highlighter with the flame, the next one with how far to go. */
.bp-miles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bp-mile { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font: 700 12px var(--font-body); color: var(--soft); border: 1.5px dashed var(--road); }
.bp-mile svg { width: 10px; height: 13px; }
.bp-mile.got { background: var(--mustard); color: var(--mustard-ink); border: 1.5px solid var(--mustard); }
.bp-mile.next { border-style: solid; border-color: var(--rim); color: var(--ink); }
.bp-mile small { font-weight: 400; color: var(--soft); margin-left: 2px; }
/* The buddy's streak beside their name in the game. */
.pname .sk { font-size: 13px; margin-left: 4px; vertical-align: -1px; } .pname .sk svg { width: 10px; height: 14px; }