/* boards.css — THE ONE LOOK OF A BUTTON, AND THE ONE HOVER. Linked by index.html and by every site page
   (about, credits, privacy, rules, 404, press), AFTER each page's own <style>, so it wins a tie by source order.

   ⭐ PP-081 — his words, 2026-09-25: "the UI buttons do not have a consistent aesthetic. do an audit and make all
   out-of-game buttons look like the style of the homescreen Play Solo / Play with friends buttons."
   So the painted ship's sign he picked for the doors on 2026-09-22 (DECISIONS.md, "THE DOORS ARE PAINTED SIGNS") is
   no longer copied declaration-by-declaration onto each door (commit a9b65b0e said so: "a shared door class would be
   the root version") — it is THIS class, and every button outside a voyage wears it: a fine vertical grain over the
   paint, a dark painted edge, the cream inner line, the game's serif with a sunlit edge on the letters, and a soft
   drop — never the 4px hard lip of a mobile-game button. What varies is only the COLOUR ROLE, below: the face, the
   rim and the type are shared.

   ⭐ PP-080 — his words, 2026-09-25: "the hover color (bright yellow) is offbrand. change it to a better hover color,
   and make that change ONEHELM". The flat lemon came from ONE global `button:hover { background:#fdea6d }` that every
   button lower in specificity than it fell through to — "Defend yerself", "Sign In", the sound disc — while 39 other
   rules (index.html and five site pages) each painted their own hover colour, most of them only to beat it. Now a hover is decided HERE and nowhere else: the button's
   OWN face, a shade brighter, lifted a pixel on a deeper shadow. A board has no second hover colour to keep in step
   with its first, so a teal door lights teal and a gold one gold.
   Gates: scripts/qa/one_hover_check.mjs (a second hover colour anywhere goes red) and
          scripts/qa/out_of_game_buttons_are_boards_check.mjs (a button off the board goes red). */

/* ─────────────── THE BOARD ─────────────── */
/* `button.ppBoard` and `a.ppBoard` (0,1,1): they tie index.html's `button.primary` and win by source order, because
   this file is linked after the page's own <style>. A role (.ppTeal …) is (0,2,0) and beats both. */
button.ppBoard, a.ppBoard {
  --bTop: #f0b44a; --bFoot: #e0991f; --bEdge: #7c4a16; --bInk: #4a2a07; --bLit: rgba(255,244,216,.5);
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .015em;
  color: var(--bInk); border: 2px solid var(--bEdge); border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px),
              linear-gradient(var(--bTop), var(--bFoot));
  text-shadow: 0 1px 0 var(--bLit);
  box-shadow: 0 2px 5px rgba(58,34,8,.3), inset 0 0 0 1.5px rgba(255,249,232,.5);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* ─────────────── THE COLOUR ROLES ───────────────
   gold    the one thing to do next (Play Solo's own board, #f0b44a -> #e0991f, his "a little brighter")
   teal    a second way on (Play with friends, his teal)
   aqua    Start a crew, the lighter teal of the three crew doors
   pink    Join a crew (his three crew colours, DECISIONS.md 2026-09-21)
   mint    Pass & Play
   parch   a quieter board for the tertiary choice: go back, not now, the way out that is not the point of the card
   brick   a confirmed goodbye: leave the game, delete my captain — said once, on the second tap
   coral   the one alarm on the home screen: "Defend yerself"
   sea     dark glass on the open water, quiet on purpose (his 2026-09-23: "it's not supposed to attract the eye") */
.ppBoard.ppTeal  { --bTop: #24707c; --bFoot: #1a5c67; --bEdge: #0f3f48; --bInk: #f4ead2; --bLit: rgba(0,0,0,.25); }
.ppBoard.ppAqua { --bTop: #2fa9b8; --bFoot: #1f8b98; --bEdge: #0f4f58; --bInk: #f7eedb; --bLit: rgba(0,0,0,.28); }
.ppBoard.ppPink  { --bTop: #f2719f; --bFoot: #db5286; --bEdge: #7d1f45; --bInk: #f7eedb; --bLit: rgba(0,0,0,.28); }
.ppBoard.ppMint  { --bTop: #52dba8; --bFoot: #34c08c; --bEdge: #125a3f; --bInk: #0b3b2a; --bLit: rgba(255,244,216,.45); }
.ppBoard.ppParch { --bTop: #fbf1d9; --bFoot: #eedcb2; --bEdge: #a07a45; --bInk: #5b3a1f; --bLit: rgba(255,250,235,.7); }
.ppBoard.ppBrick { --bTop: #c9604f; --bFoot: #aa4232; --bEdge: #5e1d14; --bInk: #fff3e6; --bLit: rgba(0,0,0,.28); }
.ppBoard.ppCoral { --bTop: #f47a68; --bFoot: #d8465a; --bEdge: #7a1e2c; --bInk: #fff6ec; --bLit: rgba(0,0,0,.3); }
.ppBoard.ppSea   { --bTop: rgba(9,42,54,.55); --bFoot: rgba(9,42,54,.55); --bEdge: rgba(255,249,232,.35); --bInk: #e6dcc0;
  --bLit: rgba(0,0,0,.35); box-shadow: 0 2px 8px rgba(6,30,40,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* a board that is working (Opening Google…, Savin'…) or cannot be pressed goes quiet rather than inviting a second tap */
button.ppBoard:disabled, button.ppBoard[aria-busy="true"] { opacity: .6; cursor: default; }

/* ─────────────── THE HOVER — the ONE place any hover decides how a control looks ───────────────
   Only where a pointer can really hover: on a phone a tap LEAVES :hover behind, so a lit button would stay lit
   until the next tap somewhere else (PP-073 note 7, "the button stayed yellow").
   FACED controls — every button with a face of its own, a board or not, in a voyage or out of one — light their own
   face: brighter, a pixel higher, on a deeper shadow. `filter` rather than `background`, so no rule anywhere has to
   say what colour a hovered button is; `translate` rather than `transform`, so it adds to a button's own transform
   (the breathing Play Solo, the pulsing prompt circles) instead of replacing it. A dead control is left alone.
   PLAIN controls (.ppPlain: the text links — back, Sign In, "or sail solo instead" — and the ☰ list's rows, his
   quiet list of 2026-08-24) have no face to light, so they underline instead, which is not a colour. */
@media (hover: hover) {
  button:not(:disabled):not([aria-disabled="true"]):not(.apDisabled):not(.disabled):not(.ppPlain):hover,
  a.ppBoard:hover {
    filter: brightness(1.08) saturate(1.06) drop-shadow(0 3px 3px rgba(40,24,6,.26));
    translate: 0 -1px;
  }
  .ppPlain:not(:disabled):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}