/* ============================================================
     THE PRESS LOOK
     The game restyled after the Potato Princess Press site's "Play a page"
     (press/style.css): cream ground, brown ink and gold, Source Serif 4 over
     a rounded sans, chunky ink-outlined cards with a hard shadow, and found
     words highlighted with pastel trails under the letters, a ring round
     each one's first letter.

     This file only overrides styles.css, which on its own is still the
     original newsprint look. ?look=newsprint drops this file (see <head> in
     wordcrush.html) to bring that back. A few things are drawn in JS and
     follow PRESS_LOOK there instead: the loops' shape and colours, the
     confetti and the replay GIF.

     Keep the palette and type in step with press/style.css.
     ============================================================ */
  @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700;0,8..60,900;1,8..60,400;1,8..60,700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

  :root {
    /* the press palette */
    --cream: #fbf3dd;
    --card:  #fffaf0;
    --gold:  #f2c14e;
    --blush: #f3a3a0;
    --serif: "Source Serif 4", Georgia, serif;
    --sans:  "Avenir Next", "Nunito Sans", "Helvetica Neue", sans-serif;
    --stroke: 3px;
    --shadow: 4px 4px 0 var(--ink);
    --hairline: rgba(43, 29, 18, .18);
    /* your drag: the press's live trail, ink at 16% over the white board,
       made opaque so the dots and the links between them never double up */
    --live: #dddbd9;
    --board: #fffdf7;    /* the board and the cards: the palest cream */
    --soft-gold: #fbeec4;
    /* the daily's calendar: on its menu card and over its theme in the game */
    --calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Crect x='4' y='8' width='44' height='40' rx='8' fill='%23fffdf7' stroke='%232b1d12' stroke-width='3'/%3E%3Cpath d='M5.5 21v-5a6.5 6.5 0 0 1 6.5-6.5h28a6.5 6.5 0 0 1 6.5 6.5v5Z' fill='%23f5a3b5'/%3E%3Cpath d='M4 21h44' stroke='%232b1d12' stroke-width='3'/%3E%3Cpath d='M16 4v9M36 4v9' stroke='%232b1d12' stroke-width='3.5' stroke-linecap='round'/%3E%3Cg fill='%232b1d12'%3E%3Ccircle cx='17' cy='30' r='2.5'/%3E%3Ccircle cx='26' cy='30' r='2.5'/%3E%3Ccircle cx='35' cy='30' r='2.5'/%3E%3Ccircle cx='17' cy='39' r='2.5'/%3E%3Ccircle cx='26' cy='39' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    /* a white tick on an ink disc, on the picked difficulty */
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232b1d12'/%3E%3Cpath d='M7 12.4l3.3 3.3L17.2 8.8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* styles.css's tokens, re-pointed. Plain hex: the replay GIF reads
       these and mixes them as hex. */
    --paper:     #fbf3dd;
    --paper-2:   #f3e6c4;
    --ink:       #2b1d12;
    --ink-dim:   #6b5644;
    --rule:      #2b1d12;
    --rule-soft: #e3d4b4;
    --accent:    #f2c14e;
    --danger:    #b5432f;

    --font-display: var(--serif);
    --font-serif:   var(--sans);    /* the body face (it was a serif in newsprint) */
    --font-mono:    var(--sans);    /* small-caps labels */
  }

  /* Flat cream, as on the press site: no grain, no vignette. */
  body::before, body::after { display: none; }

  :is(.btn, .diff-btn, .mp-tab, .mode-tab, .mp-copy, .mp-input, .head-btn, .tut-ok):focus-visible {
    outline: 3px solid var(--ink); outline-offset: 3px;
  }

  /* ============ MASTHEAD ============ */
  .masthead-rule { display: none; }
  header.top {
    padding-top: 4px; padding-bottom: 10px;
    border-bottom: var(--stroke) solid var(--ink);
  }
  .logo {
    font-family: var(--serif); font-weight: 900;
    font-size: clamp(26px, 6.6vw, 48px); line-height: 1;
    letter-spacing: -.015em; text-transform: none; text-shadow: none;
  }
  header.top .logo { transform: none; }   /* the caps nudge is for the Didone */

  /* The logo, the same on the menu and the game: WORD in coloured tiles,
     then "Search". The word "Word" stays in the page for screen readers. */
  .logo { display: inline-flex; align-items: center; gap: 12px; }
  .logo-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .logo-tiles { display: inline-flex; gap: 3px; flex: none; }
  .logo-tiles i {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    font: 800 17px/1 var(--sans); font-style: normal; letter-spacing: 0; color: var(--ink);
    border: 2px solid var(--ink); border-radius: 7px;
    box-shadow: 1.5px 1.5px 0 var(--ink);
  }
  .logo-tiles i:nth-child(1) { background: var(--gold);  transform: rotate(-4deg); }
  .logo-tiles i:nth-child(2) { background: #9ccbe9;      transform: translateY(4px) rotate(3deg); }
  .logo-tiles i:nth-child(3) { background: #f5a3c7;      transform: translateY(-2px) rotate(-3deg); }
  .logo-tiles i:nth-child(4) { background: #9fd6cc;      transform: translateY(2px) rotate(4deg); }
  @media (max-width: 560px) {
    .logo { font-size: 24px; gap: 8px; }
    .logo-tiles { gap: 2px; }
    .logo-tiles i { width: 22px; height: 22px; font-size: 12px; border-width: 1.5px; border-radius: 5px; }
  }

  /* Quit: a small press button. */
  .head-btn {
    font: 700 14px/1 var(--sans); letter-spacing: 0; text-transform: none;
    color: var(--ink); background: var(--card);
    border: 2.5px solid var(--ink); border-radius: 12px;
    padding: 8px 14px; box-shadow: 2px 2px 0 var(--ink);
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .head-btn:hover { color: var(--ink); background: var(--gold); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  .head-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
  @media (max-width: 560px) { .head-btn { padding: 7px 12px; } }

  /* The game's masthead: the difficulty beside the title, the clock beside
     Menu, both as outlined pills. */
  header.top .head-tools { gap: 10px; align-items: center; }
  .head-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    font: 700 15px/1 var(--sans); color: var(--ink); white-space: nowrap;
    border: 2.5px solid var(--ink); border-radius: 999px;
  }
  .head-pill[hidden] { display: none; }
  .head-diff:empty { display: none; }
  /* No gap: each digit is its own span, so a gap would space them out. */
  .head-clock { gap: 0; font-size: 18px; font-variant-numeric: tabular-nums; }
  .head-clock .d, .head-clock .sep { display: inline; }   /* tabular figures keep it steady */
  .head-clock::before {
    content: ""; width: 17px; height: 17px; flex: none; margin-right: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%232b1d12' stroke-width='2.2'/%3E%3Cpath d='M10 5.5V10l3 2' fill='none' stroke='%232b1d12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* A wide screen: the masthead sits high, with the same 24px under it to the
     cards on both screens (the game's adds the .app gap, 10px). The word
     being traced shows in its middle (placeWordbar moves it there). */
  @media (min-width: 900px) {
    .app { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
    header.top { margin-bottom: 14px; }
    header.top .wordbar {
      flex: 1 1 auto; min-width: 0; height: auto; min-height: 0; margin: 0;
      align-self: center; justify-content: center;
      overflow: hidden; white-space: nowrap;
    }
  }
  @media (max-width: 560px) {
    .head-diff { display: none; }
    .head-pill { padding: 6px 11px; }
    .head-clock { font-size: 15px; }
  }

  /* ============ SCOREBOARD (versus) ============ */
  .hud {
    background: var(--card);
    border: var(--stroke) solid var(--ink); border-radius: 16px;
    box-shadow: var(--shadow); overflow: hidden;
  }
  .stat + .stat { border-left: 2px solid var(--hairline); }
  .stat .label { font: 700 11px/1.2 var(--sans); letter-spacing: .12em; }
  .stat .value { font-family: var(--serif); font-weight: 900; }
  .hud.vs .vs-you::before, .hud.vs .vs-foe::before { height: 6px; }
  .hud.vs .stat .sub { font-weight: 600; font-size: 10px; letter-spacing: .06em; }
  /* in the words card the scoreboard is narrower: keep "YOU (BLUE)" on a line */
  .side-col .hud.vs .stat { min-width: 0; padding-inline: 6px; }
  .side-col .hud.vs .stat .label { letter-spacing: .06em; white-space: nowrap; }

  /* ============ CURRENT WORD ============ */
  /* A valid word gets a gold highlighter stroke under it (an underline is
     painted beneath the letters), like a found word on the board. */
  .wordbar { font-family: var(--serif); font-weight: 900; letter-spacing: .08em; }
  .wordbar.valid {
    color: var(--ink);
    text-decoration: underline var(--gold);
    text-decoration-thickness: .32em; text-underline-offset: -.12em;
    text-decoration-skip-ink: none;
  }
  .wordbar.invalid { color: var(--ink-dim); text-decoration-color: var(--blush); text-decoration-thickness: .12em; }
  .wordbar.tut { color: var(--ink-dim); }

  /* ============ BOARD ============ */
  /* The press's board card: white, an ink rule, rounded, a hard shadow. The
     card is box-shadow, so it takes no layout room: the tiles and every
     overlay keep the board's own top left as their origin, which the drag
     maths relies on. --board-frame (white + rule) is how far it reaches out;
     the margins keep that free, and sizeBoardToContainer() reads it, and the
     bottom margin, when it sizes the tiles. */
  .board-wrap {
    --board-pad: 14px;
    --board-frame: 17px;
    background: var(--board);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 0 0 var(--board-pad) var(--board), 0 0 0 var(--board-frame) var(--ink),
                6px 6px 0 var(--board-frame) var(--ink);
    margin: calc(var(--board-frame) + 2px) auto calc(var(--board-frame) + 10px);
  }
  @media (max-width: 520px) {
    .board-wrap {
      --board-pad: 9px;
      --board-frame: 12px;
      box-shadow: 0 0 0 var(--board-pad) var(--board), 0 0 0 var(--board-frame) var(--ink),
                  4px 4px 0 var(--board-frame) var(--ink);
    }
  }
  @media (min-width: 900px) {
    .board-wrap { margin: var(--board-frame) 0 calc(var(--board-frame) + 10px) var(--board-frame); }
  }

  /* Letters as on the press board: the sans at 600, no ruled cells. */
  .tile {
    border-right: 0; border-bottom: 0;
    background: transparent;
    font-family: var(--sans); font-weight: 600;
  }
  .tile.empty { background: var(--cream); }   /* holes in a shaped board */
  .tile.used { background: var(--ink); color: var(--cream); }

  /* Layers, bottom up: a tile's own disc (hover, your drag), your drag's
     links, the found words' trails, then the letters on top of everything. */
  .tile .val { z-index: 3; display: inline-block; }   /* inline-block so bump() can scale it */

  /* The letter under the mouse: a touch bolder, on a faint disc. */
  @media (hover: hover) {
    .tile:hover {
      background: radial-gradient(circle closest-side, rgba(43, 29, 18, .07) 80%, transparent 82%);
      font-weight: 700;
    }
  }

  /* Your drag: a grey trail 0.62 of a cell wide, as on the press board. Each
     tile is a dot, so a single letter shows, and drawLinks() draws the trail
     through them as one line. */
  .tile.sel, .tile.found.sel {
    background: radial-gradient(circle closest-side, var(--live) 61%, transparent 63%);
    color: var(--ink);
  }
  .links polyline {
    fill: none;
    stroke: var(--live);
    stroke-width: calc(var(--tile-size) * .62);
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* A drag that isn't a word stays a moment in blush and fades, as on the
     press site (flashInvalid). */
  .links polyline.miss { stroke: var(--blush); stroke-opacity: .9; animation: miss-fade .5s ease-in .1s forwards; }
  @keyframes miss-fade { to { stroke-opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .links polyline.miss { animation-duration: .01s; animation-delay: .4s; } }

  /* Found words: pastel bands under the letters, 0.62 of a cell wide as on
     the press board (multiplied, so one over your drag darkens rather than
     hides it), with an ink ring round the first letter. */
  .found-loops { z-index: 2; mix-blend-mode: multiply; }
  .found-loops .loop { opacity: 1; }
  .found-loops .loop-ring { fill: none; stroke: var(--ink); }
  /* The letters pop as the trail reaches them but stay ink: a pastel letter
     on its own pastel band would vanish. */
  .tile.hit .val { --hit: var(--ink); }

  /* A valid word that isn't on the list: a small gold dot in the corner. */
  .tile.found::after {
    z-index: 4; bottom: 4px; right: 4px; width: 6px; height: 6px;
    background: var(--gold); box-shadow: 0 0 0 1px var(--ink);
  }
  .tile.reveal-hi {
    box-shadow: none !important;
    background: radial-gradient(circle closest-side, var(--gold) 61%, transparent 63%);
  }

  /* ---- first-time tutorial ---- */
  .tile.tut-glow {
    background: radial-gradient(circle closest-side, #f9e2a6 61%, transparent 63%);
    box-shadow: none;
  }
  @keyframes tutPulse {
    0%, 49% { background: radial-gradient(circle closest-side, var(--gold) 61%, transparent 63%); }
    50%, 100% { background: radial-gradient(circle closest-side, #f9e2a6 61%, transparent 63%); }
  }
  .tut-trail polyline { stroke: color-mix(in srgb, var(--gold) 75%, transparent); }
  .tut-trail circle { fill: var(--gold); }
  .tut-card {
    background: var(--card);
    border: var(--stroke) solid var(--ink); border-radius: 16px;
    box-shadow: var(--shadow);
  }
  .tut-card.below { top: calc(100% + var(--board-frame) + 10px); }
  .tut-title { font: 800 12px/1.2 var(--sans); letter-spacing: .12em; color: var(--ink-dim); }
  .tut-text { font-size: 15px; }
  .tut-ok {
    font: 700 14px/1 var(--sans); color: var(--ink); background: var(--gold);
    border: 2.5px solid var(--ink); border-radius: 10px;
    padding: 7px 16px; box-shadow: 2px 2px 0 var(--ink);
  }
  .tut-ok:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
  @media (max-width: 520px) { .tut-text { font-size: 14px; } }

  /* ---- the opponent ----
     Pastel player colours need more than newsprint's faint tints to show. */
  .tile.foe-sel, .tile.foe-hover.foe-sel {
    background: radial-gradient(circle closest-side, color-mix(in srgb, var(--mp-foe) 45%, #fff) 61%, transparent 63%);
    box-shadow: none;
  }
  .tile.foe-hover {
    background: radial-gradient(circle closest-side, color-mix(in srgb, var(--mp-foe) 25%, #fff) 50%, transparent 52%);
    box-shadow: none;
  }
  .foe-trail polyline { opacity: .6; }
  .foe-trail circle { opacity: .85; }

  /* ============ CELEBRATIONS ============ */
  .combo-flash { font-family: var(--serif); color: var(--ink); text-shadow: 3px 3px 0 var(--gold); }
  .hidden-flash .hf-sub { font-weight: 700; letter-spacing: .14em; }
  .hidden-flash .hf-word {
    font-family: var(--serif); font-weight: 900;
    background: var(--card); padding: 4px 24px;
    border: var(--stroke) solid var(--ink); border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .hidden-flash .hf-bonus { font-family: var(--serif); font-weight: 900; color: var(--ink); }

  /* ============ WORDS TO FIND ============ */
  /* On a wide screen the whole right-hand column is one card: the daily's
     theme, the list with its progress bar, then the tip. On a phone the
     column is flattened (styles.css), so the list is a card of its own and
     the tip is left out, as the hint is. */
  /* The daily's theme: a heading, not a card, so it can't be mistaken for a
     button. A small calendar and "DAILY PUZZLE" over the theme in the serif,
     with a hairline under it. */
  .daily-banner {
    background: none; color: var(--ink);
    border: 0; border-bottom: 1.5px solid var(--hairline); border-radius: 0;
    padding: 2px 0 6px; margin-bottom: 4px;
  }
  .daily-banner .db-label {
    display: inline-flex; align-items: center; gap: 7px;
    font: 800 10px/1.2 var(--sans); letter-spacing: .16em; color: var(--ink-dim); opacity: 1;
  }
  .daily-banner .db-label::before {
    content: ""; width: 15px; height: 15px; flex: none;
    background: var(--calendar) center / contain no-repeat;
  }
  .daily-banner .db-theme { font: 900 17px/1.2 var(--serif); letter-spacing: -.01em; text-transform: none; }

  .wordlist {
    background: var(--board);
    border: var(--stroke) solid var(--ink); border-radius: 18px;
    box-shadow: var(--shadow);
  }
  @media (min-width: 900px) {
    /* the words panel at a set width, narrower than styles.css's 4/11, so the
       board gets the rest */
    .stage { grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 360px); }
    .side-col {
      align-self: stretch;
      margin-top: 0;                /* no word strip above the board to clear */
      margin-bottom: 10px;          /* the board's card ends this far up its column */
      gap: 20px;
      padding: 26px 26px 24px;
      background: var(--board);
      border: var(--stroke) solid var(--ink); border-radius: 22px;
      box-shadow: 6px 6px 0 var(--ink);
    }
    .side-col .wordlist { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
    .side-col .hud { box-shadow: none; }
    /* in the words card the theme leads it, left-aligned and big */
    .daily-banner {
      flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
      padding: 0 0 14px; margin-bottom: 0;
    }
    .daily-banner .db-label { font-size: 11px; }
    .daily-banner .db-label::before { width: 18px; height: 18px; }
    .daily-banner .db-theme { font-size: 36px; line-height: 1.05; letter-spacing: -.02em; }
  }

  /* "Words to find" and the count, "5 / 14", over a gold progress bar. */
  .wordlist .wl-head {
    align-items: center;
    font: 900 18px/1.1 var(--serif); letter-spacing: -.015em; text-transform: none;
    border-bottom: 0; padding-bottom: 0;
  }
  #revealCount { display: none; }
  #revealFound { font: 700 15px/1 var(--sans); letter-spacing: 0; color: var(--ink); }
  .wl-bar {
    height: 14px; margin-bottom: 18px; overflow: hidden;
    background: #f1e6cc; border: 1.5px solid rgba(43, 29, 18, .4); border-radius: 999px;
  }
  .wl-bar i {
    display: block; height: 100%; width: 0;
    background: var(--gold); border-radius: 999px;
    box-shadow: 1.5px 0 0 rgba(43, 29, 18, .4);
    transition: width .45s cubic-bezier(.3, .8, .3, 1);
  }
  @media (max-width: 899px) {
    .wordlist .wl-head { font-size: 16px; margin-bottom: 6px; }
    #revealFound { font-size: 13px; }
    .wl-bar { height: 8px; margin-bottom: 8px; border-width: 1px; }
  }
  @media (min-width: 900px) {
    .wordlist .wl-head { font-size: 34px; margin-bottom: 14px; }
    #revealFound { font-size: 22px; }
  }
  @media (prefers-reduced-motion: reduce) { .wl-bar i { transition: none; } }

  /* The words as the press site lists them: plain, each on a hairline, and
     a found one struck through in its colour on the board (--mark, set per
     word), so the list and the grid match. */
  .wordlist .ww.mask {
    font-weight: 600; letter-spacing: .04em;
    text-align: left;
    background: none;
    border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
    padding-left: 0; padding-right: 0;
  }
  .wordlist .ww.mask.done,
  .wordlist .ww.mask.done[style*="--own"] {
    background: none; color: var(--ink); border-color: var(--hairline);
    text-decoration: line-through var(--mark, var(--gold)) 4px;
    text-decoration-skip-ink: none;
  }
  /* the letters are inline-blocks (for the reveal stamp), which a line-through
     doesn't reach; a found word's needn't be */
  .wordlist .ww.mask.done .ch { display: inline; color: var(--ink); }
  .wordlist .ww.mask.done.mine { box-shadow: none; font-weight: 800; }   /* your own claims, in versus */
  .wordlist .ww.mask.ready { box-shadow: none; border-color: var(--hairline); }
  /* a word that changes (uncovered letters, a claim) flashes gold behind */
  @keyframes boxFlash {
    0%, 40% { background: var(--soft-gold); }
    100%    { background: transparent; }
  }
  @media (min-width: 900px) {
    .wordlist .wl-body { gap: 2px 22px; }
    .wordlist .ww.mask,
    .wordlist.len8 .ww.mask,
    .wordlist.len9 .ww.mask {
      font-size: min(17px, 5.6cqw);
      padding: 9px 0 8px;
    }
  }

  .wordlist .wl-empty { font-size: 13px; }
  .hint {
    font: italic 400 15px/1.55 var(--serif);
    border-top: 1px solid var(--hairline);
  }

  /* The tip, at the foot of the card: the drag rule in a line, with three
     letters drawn the way this board's words run (renderTip). */
  .tip { display: none; }
  @media (min-width: 900px) {
    .hint { display: none; }
    .tip {
      display: flex; align-items: center; gap: 14px;
      margin-top: auto; position: relative;
      padding: 18px 18px 18px 22px;
      background: var(--soft-gold);
      border: 1.5px solid #ecd28a; border-radius: 16px;
    }
    /* the rule above it */
    .tip::before {
      content: ""; position: absolute; left: -8px; right: -8px; top: -11px;
      border-top: 1.5px solid var(--hairline);
    }
    .tip-copy { flex: 1; min-width: 0; }
    .tip-title { font: 900 24px/1.1 var(--serif); letter-spacing: -.015em; margin-bottom: 6px; }
    .tip-text { font: 400 15px/1.45 var(--sans); color: var(--ink); }
    .tip-art { width: 96px; flex: none; overflow: visible; }
    .tip-art text { font: 800 17px var(--sans); fill: var(--ink); }
  }
  /* A short screen: the board is sized to its height, and the words card
     would run on past it with the tip, so the tip is left out. */
  @media (min-width: 900px) and (max-height: 820px) {
    .tip { display: none; }
  }
  /* Versus puts the scoreboard in the same card, so it runs long sooner. */
  @media (min-width: 900px) and (max-height: 980px) {
    .side-col:has(> .hud.vs:not([hidden])) .tip { display: none; }
  }

  /* ============ THE MENU ============
     Two columns on a wide screen: a headline and a sample board on the left;
     on the right the main card (mode, difficulty, Play) with the daily as a
     card of its own under it (moved there in wordcrush.html when
     PRESS_LOOK). A one-line how-to sits at the foot. A phone stacks them and
     leaves out the sample board. */
  header.start-top { justify-content: flex-start; }
  .start-desc { display: none; }   /* the headline and the blurb say it */

  .hero-title {
    font: 900 clamp(40px, 6vw, 88px)/.95 var(--serif); letter-spacing: -.035em;
    margin: 0;
  }
  /* three gold sparks off the full stop, like the potato's */
  .hero-title::after {
    content: ""; display: inline-block; width: .4em; height: .45em;
    margin-left: -.04em; vertical-align: .62em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-width='4.5' stroke-linecap='round'%3E%3Cpath d='M8 4v13'/%3E%3Cpath d='M28 10l-9 11'/%3E%3Cpath d='M36 30H22'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  }
  .hero-sub { margin-top: 14px; font: 400 clamp(17px, 1.8vw, 25px)/1.35 var(--sans); }
  /* a gold brush stroke under the first half */
  .hero-sub span {
    padding-bottom: .3em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 4 120 2 197 5' fill='none' stroke='%23f2c14e' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .4em no-repeat;
  }
  .hero-board {
    display: none;
    margin-top: 28px;
    background: var(--board);
    border: var(--stroke) solid var(--ink); border-radius: 22px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .hero-trails { mix-blend-mode: multiply; }
  /* a new difficulty's words draw on, one after another (renderHeroBoard) */
  .hero-trails .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: hero-draw .5s ease-out forwards; }
  @keyframes hero-draw { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .hero-trails .draw { animation: none; stroke-dashoffset: 0; } }
  .hero-ring { fill: none; stroke: var(--ink); }
  .hero-letters text { font-family: var(--sans); font-weight: 600; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }

  /* The main card. */
  .start-sheet {
    padding: 26px 26px 28px;
    background: var(--board);
    border: var(--stroke) solid var(--ink); border-radius: 22px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .start-sheet .goal-list li, .modal .goal-list li { border-bottom-color: var(--hairline); }
  .start-inner { max-width: none; }

  /* Mode: a segmented switch; the gold pill slides to the one you're on. */
  .mode-tabs {
    gap: 0; padding: 4px; margin: 0 0 22px;
    background: #f1ebde; border: 0; border-radius: 14px;
  }
  .mode-tabs::after {
    left: 4px; top: 4px; bottom: 4px; height: auto; width: calc(50% - 4px);
    background: #f8e3a0; border: 2px solid var(--ink); border-radius: 11px;
  }
  .mode-tab {
    position: relative; z-index: 1;
    font: 700 18px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
    color: var(--ink-dim);
    border: 0; margin: 0; padding: 13px 6px; border-radius: 11px;
  }
  .mode-tab:hover, .mode-tab.on { color: var(--ink); }

  .diff-title {
    margin: 0 0 14px; padding-top: 20px;
    border-top: 1.5px solid var(--hairline);
    font: 800 20px/1.2 var(--sans); text-align: left;
  }

  /* The main action, full width under the difficulty. */
  .btn.play-btn { max-width: none; padding: 15px 18px 14px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .btn.play-btn:hover:not(:disabled) { box-shadow: 5px 5px 0 var(--ink); }
  .play-main { font: 900 clamp(26px, 3vw, 36px)/1 var(--sans); letter-spacing: 0; }
  .play-sub { font-size: 14px; letter-spacing: 0; font-weight: 600; opacity: .8; }

  /* The daily: calendar, title and theme count, and a "Play daily" button
     drawn on the card. The whole card is the button. */
  .start-app > .daily-entry:not([hidden]) { display: block; margin-top: 4px; }
  .start-app:has(#sPaneSolo[hidden]) > .daily-entry { display: none; }
  .start-app > .daily-entry .btn.daily-btn {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 18px; row-gap: 2px;
    width: 100%; max-width: none; margin: 0; padding: 18px 20px;
    text-align: left;
    background: var(--board); border-radius: 22px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .start-app > .daily-entry .btn.daily-btn:hover:not(:disabled) { background: var(--board); box-shadow: 7px 7px 0 var(--ink); }
  .start-app > .daily-entry .btn.daily-btn::before {
    content: ""; grid-row: 1 / 3; width: 50px; height: 50px;
    background: var(--calendar) center / contain no-repeat;
  }
  .start-app > .daily-entry .daily-main { grid-column: 2; font: 800 22px/1.15 var(--sans); letter-spacing: 0; }
  .start-app > .daily-entry .daily-sub  {
    grid-column: 2; font: 600 15px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-dim); opacity: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* one line, so the card keeps its size */
  }
  .start-app > .daily-entry .daily-theme { font-weight: 800; color: var(--ink); }   /* today's theme */
  .start-app > .daily-entry .btn.daily-btn::after {
    content: "Play daily"; grid-column: 3; grid-row: 1 / 3;
    padding: 11px 24px; font: 700 16px/1 var(--sans);
    background: #fff; border: 2.5px solid var(--ink); border-radius: 12px;
    box-shadow: 2px 2px 0 var(--ink);
    transition: background .12s;
  }
  .start-app > .daily-entry .btn.daily-btn:hover:not(:disabled)::after { background: var(--gold); }
  .start-app > .daily-entry .btn.daily-btn.done::after { content: "Done"; box-shadow: none; }

  /* The how-to line at the foot, after a cursor. */
  .start-foot {
    margin-top: 28px; padding-top: 16px;
    border-top: 1.5px solid var(--hairline);
    text-align: center; font: 400 16px/1.4 var(--sans); color: var(--ink-dim);
  }
  .start-foot::before {
    content: ""; display: inline-block; width: 18px; height: 20px; margin-right: 10px; vertical-align: -4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M2 2l13 7-6 1.6L6.4 17Z' fill='%23fffdf7' stroke='%232b1d12' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* A phone: one column, no sample board. */
  .start-app { gap: 16px; }
  @media (max-width: 899px) {
    .start-sheet { padding: 18px 16px 20px; }
    .mode-tab { font-size: 16px; padding: 11px 6px; }
    .diff-title { font-size: 17px; }
    .start-app > .daily-entry .btn.daily-btn { padding: 14px 14px; column-gap: 12px; }
    .start-app > .daily-entry .btn.daily-btn::before { width: 40px; height: 40px; }
    .start-app > .daily-entry .daily-main { font-size: 18px; }
    .start-app > .daily-entry .daily-sub { font-size: 13px; }
    .start-app > .daily-entry .btn.daily-btn::after { padding: 9px 14px; font-size: 14px; }
  }
  /* The smallest phones: a tighter daily card, so its lines still fit. */
  @media (max-width: 360px) {
    .start-app > .daily-entry .btn.daily-btn { padding: 12px 10px; column-gap: 9px; }
    .start-app > .daily-entry .btn.daily-btn::before { width: 32px; height: 32px; }
    .start-app > .daily-entry .daily-main { font-size: 16px; }
    .start-app > .daily-entry .daily-sub { font-size: 12px; }
    .start-app > .daily-entry .btn.daily-btn::after { padding: 8px 10px; font-size: 13px; }
  }
  /* A wide screen: the two columns. (Only while it's on screen: .is-hidden
     must still take it out.) */
  @media (min-width: 900px) {
    .start-app:not(.is-hidden) {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      grid-template-areas: "head head" "hero sheet" "hero daily" ". ." "foot foot";
      grid-template-rows: auto auto auto 1fr auto;
      column-gap: clamp(36px, 5vw, 72px); row-gap: 0;
      align-items: start;
      max-width: calc(1180px + 56px); margin-inline: auto;
    }
    .start-app > header.top { grid-area: head; margin-bottom: 24px; }
    /* The left column is as tall as the single-player cards on the right
       (--hero-h, measured by fitHero() and kept on the versus tab), and the
       sample board fills what the headline leaves: the full width, down to
       the daily card's foot. */
    .start-hero {
      grid-area: hero; height: var(--hero-h);
      display: flex; flex-direction: column;
    }
    .start-sheet { grid-area: sheet; margin-top: 0; }
    .start-app > .daily-entry:not([hidden]) { grid-area: daily; margin-top: 24px; }
    .start-foot { grid-area: foot; }
    .hero-board { display: block; flex: 1 1 0; min-height: 0; width: 100%; }
    /* not measured yet (the page opened on the versus tab): a fixed shape */
    .start-hero:not([style*="--hero-h"]) .hero-board { flex: none; aspect-ratio: 8 / 5; }
  }

  /* ============ BUTTONS ============
     Same two languages as styles.css, in the press's terms:
       ACTION -> raised: an ink rule and a hard shadow, gold if it's the main one
       TOGGLE -> white, and gold with a tick once picked */
  .btn {
    font: 800 16px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
    color: var(--ink); background: var(--gold);
    border: var(--stroke) solid var(--ink); border-radius: 14px;
    padding: 11px 28px;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .btn:hover:not(:disabled) { background: var(--gold); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
  .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .btn.ghost { background: var(--card); font-size: 15px; padding: 9px 20px; }
  .btn.ghost:hover:not(:disabled) { background: var(--card); color: var(--ink); }
  .btn.daily-btn.done:hover { background: var(--gold); color: var(--ink); transform: none; box-shadow: 3px 3px 0 var(--ink); }

  .diff { gap: 12px; margin: 0 0 14px; }
  .diff-btn, .mp-tab {
    font: 700 15px/1.2 var(--sans); letter-spacing: 0; text-transform: none;
    color: var(--ink); background: #fff;
    border: 2px solid var(--ink); border-radius: 12px;
    padding: 10px 6px;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .diff-btn { font-size: 18px; padding: 14px 8px; border-width: 2.5px; }
  .diff-btn:hover:not(.on), .mp-tab:hover:not(.on) {
    border-color: var(--ink); background: #fff;
    transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink);
  }
  .diff-btn:active:not(:disabled), .mp-tab:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
  .diff-btn.on, .mp-tab.on, .diff-btn.on:hover, .mp-tab.on:hover {
    background: var(--gold); border-color: var(--ink);
    transform: none; box-shadow: 2px 2px 0 var(--ink);
  }
  .mp-tab.on::before { display: none; }
  /* the tick on the picked difficulty, in place of newsprint's red square */
  .diff-btn.on::before {
    position: static; display: inline-block;
    width: 24px; height: 24px; margin: -4px 12px -4px 0; vertical-align: middle;
    background: var(--tick) center / contain no-repeat;
  }
  @media (max-width: 899px) {
    .diff-btn { font-size: 16px; padding: 11px 6px; }
    .diff-btn.on::before { width: 20px; height: 20px; margin-right: 8px; }
  }
  /* Locked (the host's pick, or a room is waiting): flat, dashed, inert. */
  .diff.locked .diff-btn,
  .diff.locked .diff-btn:hover { background: #fff; border-color: var(--ink); transform: none; box-shadow: none; }
  .diff.locked .diff-btn.on,
  .diff.locked .diff-btn.on:hover { background: var(--gold); transform: none; }
  /* the blurb, after a pink sparkle */
  .diff-blurb { font: 400 15px/1.45 var(--sans); color: var(--ink-dim); }
  .diff-blurb::before {
    content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23f28bb3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ---- lobby ---- */
  .mp-tabs { gap: 8px; }
  .mp-hint, .mp-wait { font: italic 400 15px/1.4 var(--serif); }
  .mp-input {
    font-family: var(--serif); font-weight: 900;
    background: #fff;
    border: var(--stroke) solid var(--ink); border-radius: 14px;
  }
  .mp-input:focus { background: #fff; box-shadow: 0 0 0 4px var(--gold); }
  .mp-code-box { border-top: 1px solid var(--hairline); }
  .mp-code-label { font: 700 11px/1.2 var(--sans); letter-spacing: .12em; }
  .mp-code { font-family: var(--serif); }
  .mp-copy {
    font: 700 13px/1 var(--sans); letter-spacing: 0; text-transform: none;
    background: var(--card);
    border: 2px solid var(--ink); border-radius: 10px;
    padding: 7px 14px; box-shadow: 2px 2px 0 var(--ink);
  }
  .mp-copy:hover { background: var(--gold); color: var(--ink); }
  .mp-error { font: 600 14px/1.4 var(--sans); letter-spacing: 0; }

  /* ============ END-OF-GAME CARD ============ */
  .modal-scrim { background: rgba(43, 29, 18, .45); }
  .modal {
    background: var(--card);
    border: var(--stroke) solid var(--ink); border-radius: 22px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .modal h2 {
    font-family: var(--serif); font-weight: 900;
    text-transform: none; letter-spacing: -.015em;
  }
  .modal p { font-size: 16px; }
  .replay-preview { border: 2px solid var(--ink); border-radius: 10px; }