/* ==========================================================================
   Perfils · theme.css  (identity layer, 14/10/2026)
   --------------------------------------------------------------------------
   Direction: the 1980s Grow "Perfil" box, redrawn from scratch.
   Lacquered cardboard, printed mosaic of teal triangles, ink-black frame with a
   violet hairline, pink octagon, red-orange-gold lettering. Warm white paper cards.
   Physical scene: friends around a coffee table at night, one screen, a board game
   that should feel like the box from the closet, not like an app.
   Colour strategy: COMMITTED teal (30-60% of the surface) + ink black structure,
   pink and gold/orange as the only accents. Never #000 / #fff: every neutral is tinted.

   Loads AFTER fonts.css and BEFORE any page css that wants to override it.
   Uses only: custom properties, no resets, no element selectors except the global
   ::selection and :where() focus ring (both zero specificity, easy to override).
   Everything is `--p-*` (palette), `--sp-*`, `--r-*`, `--shadow-*`, `--ease-*`, `--dur-*`.
   Components: .p-plaque .p-btn .p-card .p-mosaic .p-chip .p-field .p-tri-num .p-modal
               .p-panel .p-rule .p-logo .p-ic .p-hex (+ helpers).
   Markup cheat-sheet (full examples in dev/style-tile.html):
     <span class="p-plaque">Pessoa</span>            add .is-lit (or aria-current="true") to light it; .p-plaque--sm | --lg
     <button class="p-btn">Palpitar</button>         .p-btn--secondary, --sm, --lg, --block; disabled via [disabled]
     <article class="p-card"> .p-card__head, .p-card__logo, .p-card__clue (.p-card__no .p-card__kicker .p-card__text),
                              .p-card__points, .p-card__lines (<ol>)       back: .p-card--back > .p-card__plate > .p-card__logo
     <button class="p-tri-num is-down" style="--tri-w:56px">7</button>   states: .is-open .is-new (+ :hover :focus-visible)
     <div class="p-tri-row"> .p-tri-num.p-tri-num--tess ... </div>       tessellated strip, up/down alternating via .is-down
     <button class="p-chip" aria-pressed="true">Ciência <span class="p-chip__count">15</span></button>
     <label class="p-field"><span class="p-field__label">Nome</span><input class="p-field__input"><span class="p-field__hint">..</span></label>
     <dialog class="p-modal"> .p-modal__title .p-modal__body .p-modal__answer .p-modal__actions </dialog>
     <span class="p-ic p-ic--check|cross|arrow"></span>                  drawn icons, painted with currentColor
     <div class="p-mosaic p-mosaic--calm|--lid|--lg">, <div class="p-panel">, <hr class="p-rule">, <div class="p-logo">
   Forced states for documentation/tests: .is-hover .is-focus .is-pressed (buttons), .is-hover (chip, field, triangle).
   Assets (relative to this file): assets/pattern-triangles.svg, pattern-triangles-card.svg,
   logo-perfils.svg, logo-perfils-contour.svg (viewBox 1259.03 x 342).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- palette: sampled from the original (SPEC-TABULEIRO 2), AA-adjusted where noted ---- */
  --p-black: #0f0f12;          /* frame, board centre, text on teal (7.26:1 on --p-teal) */
  --p-black-2: #2c292e;        /* secondary dark surface */
  --p-violet: #574566;         /* hairline of the frame */
  --p-violet-2: #644a6a;
  --p-teal-deep: #0d968d;      /* dark triangles of the track */
  --p-teal: #0ab2ab;           /* base teal */
  --p-aqua: #55cbcb;           /* light triangles, glints */
  --p-aqua-2: #6acfce;
  --p-aqua-3: #8fd0ce;         /* text on dark teal (opened clue numbers) */
  --p-pink: #ce76a7;           /* central octagon */
  --p-pink-2: #c76d9a;
  --p-pink-soft: #cc8eb4;      /* closed numbered triangles */
  --p-pink-soft-2: #d0a9c9;
  --p-red: #d04d35;            /* markers, lettering */
  --p-orange: #e8a33a;         /* markers, lettering, primary button */
  --p-orange-2: #ce8d56;
  --p-cream: #f4ebad;          /* highlight of the lettering, focus ring, "new" glow */
  --p-paper: #fbf8f1;          /* card paper: warm white */
  --p-paper-2: #f3e8ce;        /* aged paper, hover on paper */

  /* ---- AA adjustments (kept in character; measured by dev/contrast-check.mjs) ---- */
  --p-plum: #2b0f2a;           /* numbers/text on pink (white on pink fails: 3.1:1 and 2.59:1) */
  --p-ink: #1a1420;            /* running text on paper */
  --p-muted: #5a4d5e;          /* secondary text on paper */
  --p-teal-ink: #07665f;       /* teal as TEXT on paper (the base teal is only 2.6:1 there) */
  --p-red-ink: #a8301c;        /* red as TEXT on paper (--p-red is 4.0:1 on paper) */
  --p-open-face: #0a4f4b;      /* opened clue triangle: dimmed, deep teal */
  --p-open-ring: #35aca5;
  --p-disabled-face: #a9bbb9;  /* flat, dead plate; same on teal, ink and paper */
  --p-disabled-ink: #465250;
  /* ---- gradient stops shared by keys, plaques and panels (kept here so every screen lights the same way) ---- */
  --p-paper-3: #e3d6b6;        /* empty track of a progress bar on paper */
  --p-gold-glow: #fbe3a0;      /* top of a lit key / "new" triangle */
  --p-gold-hi: #f7cb72;
  --p-gold-lo: #dc9230;        /* bottom of the gold gradient (7.5:1 with --p-black) */
  --p-paper-hi: #fffdf8;
  --p-paper-lo: #efe7d6;
  --p-paper-end: #f7f1e4;      /* far end of the card paper gradient */
  --p-teal-hi: #1cc0b9;
  --p-teal-lo: #09a199;
  --p-pink-hi: #e2bdd4;
  --p-red-hi: #bb4a31;         /* danger key gradient (paper text 4.79:1 at its lightest stop) */
  --p-red-lo: #861f10;
  --p-error-text: #ffc3b3;     /* error text on ink (AA on --p-black) */
  --p-error-icon: #ff9d86;
  --p-mist-hi: #e9f7f6;        /* hover face of a paper key */
  --p-mist: #cfeeed;
  --p-gold-text: #f3c35e;      /* gold numerals on ink */
  --p-aqua-hi: #7fe0dc;
  --p-focus: var(--p-cream);   /* two-tone ring: cream outside, ink inside: works on any surface */

  /* ---- the six pawns ---- */
  --p-pawn-blue: #2a5fc8;
  --p-pawn-yellow: #f2c230;
  --p-pawn-red: #d6342b;
  --p-pawn-green: #2e9e4a;
  --p-pawn-white: #f1eee6;
  --p-pawn-plum: #3b2a55;

  /* ---- typography ---- */
  --font-display: 'Poiret One', 'Avenir Next Condensed', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-label: 'Josefin Sans', 'Futura', 'Avenir Next', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* modular scale, ratio 1.25 from 1rem (steps >= 1.25 so the hierarchy stays committed) */
  --fs-2xs: 0.75rem;                                   /* 12  plaque/seal micro labels */
  --fs-xs: 0.8125rem;                                  /* 13  captions, counts */
  --fs-sm: 0.9375rem;                                  /* 15  buttons, chips, labels */
  --fs-md: 1rem;                                       /* 16  body */
  --fs-lg: 1.25rem;                                    /* 20  lead, numbers in triangles */
  --fs-xl: 1.5625rem;                                  /* 25  clue text */
  --fs-2xl: 1.953rem;                                  /* 31  card clue / section titles (Poiret from here) */
  --fs-3xl: clamp(2.2rem, 1.7rem + 2vw, 2.441rem);     /* 39  modal and screen titles */
  --fs-4xl: clamp(2.6rem, 1.9rem + 3vw, 3.052rem);     /* 49 */
  --fs-display: clamp(3rem, 2rem + 5vw, 4.768rem);     /* 76 hero numerals */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --track-label: 0.14em;   /* caps labels (PESSOA, COISA, buttons) */
  --track-wide: 0.22em;
  --poiret-boost: 0.5px;   /* Poiret One is a hairline: a hair of stroke keeps it legible */

  /* ---- spacing (4px base, varied on purpose) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --tap: 3rem;             /* 48px minimum touch target (SPEC 6) */

  /* ---- radii: the original is rectilinear; corners stay small ---- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;              /* cards */
  --r-4: 10px;             /* modals */
  --r-round: 999px;

  /* ---- shadows: objects resting on a table ---- */
  --shadow-1: 0 1px 0 rgb(15 15 18 / 0.45), 0 2px 5px rgb(15 15 18 / 0.28);
  --shadow-object: 0 1px 0 rgb(15 15 18 / 0.5), 0 5px 9px -2px rgb(15 15 18 / 0.42),
    0 16px 26px -8px rgb(15 15 18 / 0.38);
  --shadow-lift: 0 1px 0 rgb(15 15 18 / 0.5), 0 9px 14px -3px rgb(15 15 18 / 0.45),
    0 26px 38px -10px rgb(15 15 18 / 0.4);
  --shadow-inset: inset 0 2px 0 rgb(15 15 18 / 0.1);
  --bevel-light: inset 0 1px 0 rgb(255 247 214 / 0.75);
  --bevel-dark: inset 0 -2px 0 rgb(80 40 0 / 0.22);

  /* ---- motion: the --ease-* and --dur-* tokens live in motion.css (load it after this sheet) ---- */

  /* ---- assets ---- */
  --img-mosaic: url('assets/pattern-triangles.svg');
  --img-strip: url('assets/pattern-triangles-card.svg');
  --img-logo: url('assets/logo-perfils.svg');
  --img-logo-contour: url('assets/logo-perfils-contour.svg');

  /* ---- drawn icons (masks, so they take currentColor); square caps, mitred joins: art deco ---- */
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.6 9.1 18.2 20.6 5.8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --ic-check-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.6 9.1 18.2 20.6 5.8' fill='none' stroke='%23f4ebad' stroke-width='3.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --ic-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5 19 19M19 5 5 19' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12H20M13 4.8 20.2 12 13 19.2' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base helpers (opt-in: nothing here touches elements that do not ask for it)
   ========================================================================== */

/* Put on <body> or a wrapper to get the identity typography and colours. */
.p-theme {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--p-black);
  background-color: var(--p-teal-deep);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.p-display {               /* big art deco titles: Poiret One only from 28px up */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  -webkit-text-stroke: var(--poiret-boost) currentColor;
  text-wrap: balance;
}
.p-label {                 /* caps label: rotulos, buttons, numbers */
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.1;
}
.p-num {                   /* numbers 1-20: Josefin 600, lining */
  font-family: var(--font-label);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.p-text { max-width: 68ch; text-wrap: pretty; }
.p-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Selection and focus (global, zero specificity)
   ========================================================================== */
::selection { background: var(--p-orange); color: var(--p-black); }
.p-card ::selection, .p-modal ::selection { background: var(--p-pink-soft); color: var(--p-plum); }
.p-panel ::selection { background: var(--p-aqua); color: var(--p-black); }

/* Two-tone ring: ink inside, cream outside. Visible on teal, ink, pink and paper alike. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: 3px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--p-black);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Mosaic: the box lid. Teal triangles with the meander in the dark ones.
   --mosaic is the tile width; height is 1.75x (whole pixels when the width is a multiple of 4).
   ========================================================================== */
.p-mosaic {
  --mosaic: 64px;
  background-color: var(--p-teal-deep);
  background-image: var(--img-mosaic);
  background-size: var(--mosaic) calc(var(--mosaic) * 1.75);
  background-position: center top;
}
.p-mosaic--sm { --mosaic: 40px; }
.p-mosaic--lg { --mosaic: 96px; }
/* Calm: a teal veil so text blocks and controls keep reading over the pattern. */
.p-mosaic--calm {
  background-image: linear-gradient(rgb(10 178 171 / var(--veil, 0.62)), rgb(10 178 171 / var(--veil, 0.62))), var(--img-mosaic);
}
/* Box lid: black outer frame, gold filete inside, like the printed box. */
.p-mosaic--lid {
  border: 3px solid var(--p-black);
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 3px var(--p-orange-2), inset 0 0 0 4px var(--p-black), inset 0 0 0 7px var(--p-teal-deep),
    var(--shadow-object);
}

/* Elongated hexagon plate (the clear teal area behind the lettering on the box). */
.p-hex {
  --hex-cut: 13%;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: var(--sp-6) calc(var(--sp-8) + 1rem);
  color: var(--p-black);
  background: var(--p-aqua-3);
  clip-path: polygon(var(--hex-cut) 0, calc(100% - var(--hex-cut)) 0, 100% 50%, calc(100% - var(--hex-cut)) 100%, var(--hex-cut) 100%, 0 50%);
}
.p-hex::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: linear-gradient(180deg, #22bdb7, var(--p-teal) 60%, #09a29b);
  clip-path: polygon(calc(var(--hex-cut) + 2px) 0, calc(100% - var(--hex-cut) - 2px) 0, 100% 50%, calc(100% - var(--hex-cut) - 2px) 100%, calc(var(--hex-cut) + 2px) 100%, 0 50%);
}

/* ==========================================================================
   Logo helper
   ========================================================================== */
.p-logo {
  display: block;
  width: var(--logo-w, 18.4rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1259 / 342;
  background: var(--img-logo) center / contain no-repeat;
}
.p-logo--contour { background-image: var(--img-logo-contour); }
.p-slogan {                /* the box tagline: sentence case, bold humanist sans, like the print */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  color: var(--p-black);
}
.p-qmark {                 /* the little "?" of the box: a down-pointing orange triangle */
  display: inline-grid;
  place-items: start center;
  width: 2.2em;
  aspect-ratio: 1.155;
  padding-top: 0.12em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1em;
  line-height: 1;
  color: var(--p-cream);
  background: linear-gradient(180deg, var(--p-red), var(--p-orange) 72%, #f3c35e);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-qmark::before { content: '?'; }

/* ==========================================================================
   Drawn icons: check, cross, arrow (the fonts have none of them)
   ========================================================================== */
.p-ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ic, var(--ic-check)) center / contain no-repeat;
  mask: var(--ic, var(--ic-check)) center / contain no-repeat;
  vertical-align: -0.12em;
}
.p-ic--check { --ic: var(--ic-check); }
.p-ic--cross { --ic: var(--ic-cross); }
.p-ic--arrow { --ic: var(--ic-arrow); }

/* ==========================================================================
   Panel: the black frame with the violet hairline (centre of the board, side panels)
   ========================================================================== */
.p-panel {
  position: relative;
  color: var(--p-cream);
  background: var(--p-black);
  border-radius: var(--r-2);
  padding: var(--sp-5);
  box-shadow: inset 0 0 0 1px var(--p-violet), inset 0 0 0 4px var(--p-black), inset 0 0 0 5px var(--p-violet-2),
    var(--shadow-object);
}

/* Triangle rule: a one-row strip of the card pattern, as divider or ornament. */
.p-rule {
  height: 0.9rem;
  background: var(--img-strip) repeat-x center / 1.03rem 0.9rem;
  border: 0;
  opacity: 0.95;
}

/* ==========================================================================
   Plaque: PESSOA / COISA / LUGAR / ANO. Teal plate, black rim, gold filete.
   .is-lit (or aria-current="true") lights it up for the type of the current card.
   ========================================================================== */
.p-plaque {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7em 1.4em;
  min-width: 7.5em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--p-black);                /* 7.26:1 on --p-teal */
  background: linear-gradient(180deg, var(--p-teal-hi) 0%, var(--p-teal) 46%, var(--p-teal-lo) 100%);
  border: 2px solid var(--p-black);
  border-radius: var(--r-2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -2px 0 rgb(0 60 56 / 0.28), 0 2px 0 var(--p-black),
    0 5px 8px -2px rgb(15 15 18 / 0.45);
  transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}
.p-plaque::before {                       /* the gold filete, inset from the black rim */
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgb(244 235 173 / 0.9);
  border-radius: 1px;
  pointer-events: none;
}
.p-plaque--sm { padding: 0.5em 0.95em; min-width: 0; font-size: var(--fs-2xs); letter-spacing: 0.16em; }
.p-plaque--lg { padding: 0.85em 1.8em; font-size: var(--fs-md); }
.p-plaque.is-lit,
.p-plaque[aria-current='true'] {
  background: linear-gradient(180deg, var(--p-gold-glow) 0%, var(--p-orange) 55%, var(--p-gold-lo) 100%);
  box-shadow: inset 0 1px 0 rgb(255 252 235 / 0.9), inset 0 -2px 0 rgb(110 55 0 / 0.25), 0 2px 0 var(--p-black),
    0 0 0 3px rgb(244 235 173 / 0.55), 0 0 22px 2px rgb(232 163 58 / 0.55);
  transform: translateY(-1px);
}
.p-plaque.is-lit::before, .p-plaque[aria-current='true']::before { border-color: rgb(15 15 18 / 0.55); }
/* The state never relies on colour alone: a drawn marker sits before the word. */
.p-plaque.is-lit::after,
.p-plaque[aria-current='true']::after {
  content: '';
  order: -1;
  width: 0.62em;
  height: 0.54em;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ==========================================================================
   Button: lacquered key. Primary = gold (like the board markers), secondary = paper.
   ========================================================================== */
.p-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--tap);
  padding: 0 1.6em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--p-black);
  background: linear-gradient(180deg, var(--p-gold-hi) 0%, var(--p-orange) 52%, var(--p-gold-lo) 100%);
  border: 2px solid var(--p-black);
  border-radius: var(--r-3);
  box-shadow: var(--bevel-light), var(--bevel-dark), 0 3px 0 var(--p-black), 0 7px 10px -3px rgb(15 15 18 / 0.5);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}
.p-btn.is-hover {
  filter: brightness(1.07) saturate(1.06);
  transform: translateY(-1px);
  box-shadow: var(--bevel-light), var(--bevel-dark), 0 4px 0 var(--p-black), 0 11px 14px -4px rgb(15 15 18 / 0.5);
}
@media (hover: hover) {
  .p-btn:hover:not(:disabled):not([aria-disabled='true']) {
    filter: brightness(1.07) saturate(1.06);
    transform: translateY(-1px);
    box-shadow: var(--bevel-light), var(--bevel-dark), 0 4px 0 var(--p-black), 0 11px 14px -4px rgb(15 15 18 / 0.5);
  }
}
.p-btn:active:not(:disabled):not([aria-disabled='true']),
.p-btn.is-pressed {
  filter: brightness(0.97);
  transform: translateY(3px);
  box-shadow: inset 0 2px 3px rgb(80 40 0 / 0.35), 0 0 0 var(--p-black), 0 2px 3px -1px rgb(15 15 18 / 0.5);
}
.p-btn--secondary {
  background: linear-gradient(180deg, var(--p-paper-hi) 0%, var(--p-paper) 50%, var(--p-paper-lo) 100%);
  box-shadow: inset 0 0 0 2px var(--p-paper), inset 0 0 0 3px var(--p-teal-deep), 0 3px 0 var(--p-black),
    0 7px 10px -3px rgb(15 15 18 / 0.5);
}
.p-btn--secondary.is-hover {
  filter: none;
  background: linear-gradient(180deg, #ffffff 0%, #e9f7f6 55%, #cfeeed 100%);
  box-shadow: inset 0 0 0 2px #e9f7f6, inset 0 0 0 3px var(--p-teal-deep), 0 4px 0 var(--p-black),
    0 11px 14px -4px rgb(15 15 18 / 0.5);
}
@media (hover: hover) {
  .p-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
    filter: none;
    background: linear-gradient(180deg, #ffffff 0%, #e9f7f6 55%, #cfeeed 100%);
    box-shadow: inset 0 0 0 2px #e9f7f6, inset 0 0 0 3px var(--p-teal-deep), 0 4px 0 var(--p-black),
      0 11px 14px -4px rgb(15 15 18 / 0.5);
  }
}
.p-btn--secondary:active:not(:disabled):not([aria-disabled='true']),
.p-btn--secondary.is-pressed {
  filter: none;
  background: linear-gradient(180deg, #d9efee, #e9f7f6);
  box-shadow: inset 0 2px 3px rgb(15 80 76 / 0.35), inset 0 0 0 3px var(--p-teal-deep), 0 0 0 var(--p-black);
}
/* Focus: cream ring outside, ink ring inside. Declared after hover/pressed with the same
   specificity, so keyboard focus never loses its ring while the pointer is over the button. */
.p-btn:focus-visible:not(:disabled):not([aria-disabled='true']),
.p-btn.is-focus {
  outline: 3px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--p-black), var(--bevel-light), var(--bevel-dark), 0 3px 0 var(--p-black);
}
.p-btn--secondary:focus-visible:not(:disabled):not([aria-disabled='true']),
.p-btn--secondary.is-focus {
  box-shadow: 0 0 0 2px var(--p-black), inset 0 0 0 2px var(--p-paper), inset 0 0 0 3px var(--p-teal-deep), 0 3px 0 var(--p-black);
}
.p-btn--sm { min-height: 2.75rem; padding: 0 1.1em; font-size: var(--fs-xs); }   /* >= 44px touch target */
.p-btn--lg { min-height: 3.5rem; padding: 0 2em; font-size: var(--fs-md); }
.p-btn--block { display: flex; width: 100%; }
.p-btn:disabled,
.p-btn[aria-disabled='true'],
.p-btn.is-disabled {
  color: var(--p-disabled-ink);
  background: var(--p-disabled-face);
  border-color: #7e8f8d;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.18);
  filter: none;
  transform: none;
  cursor: not-allowed;
}

/* ==========================================================================
   Card: THE card of the original. Warm white paper, triangle strips as frame,
   outline lettering, small corners, resting-object shadow.
   Markup: .p-card > (.p-card__head, .p-card__logo, .p-card__clue, .p-card__lines)
   ========================================================================== */
.p-card {
  --card-band: 1.5rem;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--sp-4);
  padding: calc(var(--card-band) + var(--sp-4)) var(--sp-5);
  color: var(--p-ink);
  background: linear-gradient(172deg, var(--p-paper-hi) 0%, var(--p-paper) 55%, var(--p-paper-end) 100%);
  border-radius: var(--r-3);
  box-shadow: 0 0 0 1px rgb(15 15 18 / 0.22), var(--shadow-object);
}
.p-card::before,
.p-card::after {                       /* the two triangle strips (top and mirrored bottom) */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--card-band);
  background: var(--img-strip) repeat-x left center / calc(var(--card-band) * 8 / 7) var(--card-band);
  z-index: -1;
}
.p-card::before { top: 0; border-radius: var(--r-3) var(--r-3) 0 0; }
.p-card::after { bottom: 0; transform: scaleY(-1); border-radius: var(--r-3) var(--r-3) 0 0; }
.p-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.p-card__meta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--p-muted);
}
.p-card__logo {
  width: min(19.5rem, 78%);
  aspect-ratio: 1259 / 342;
  margin-inline: auto;
  background: var(--img-logo-contour) center / contain no-repeat;
}
.p-card__clue {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-block: 2px solid var(--p-teal-deep);
  box-shadow: 0 -4px 0 -3px var(--p-paper), 0 4px 0 -3px var(--p-paper);
}
.p-card__no {                          /* the clue number: déco numeral */
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 0.9;
  min-width: 1.4ch;
  text-align: center;
  color: var(--p-red-ink);
  -webkit-text-stroke: 1.2px currentColor;
  font-variant-numeric: lining-nums;
}
.p-card__kicker {
  grid-column: 2;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--p-teal-ink);
}
.p-card__text {
  grid-column: 2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.p-card__points {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--p-muted);
}
.p-card__points b { font-size: var(--fs-xl); letter-spacing: 0; color: var(--p-plum); font-variant-numeric: lining-nums; }
.p-card__lines {                       /* already revealed: ruled "lines" of the card */
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-md);
}
.p-card__lines > li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  padding: 0.38rem 0;
  border-bottom: 1px solid rgb(13 150 141 / 0.45);
}
.p-card__lines .p-num { font-size: var(--fs-sm); color: var(--p-teal-ink); }
.p-card--enter { animation: p-card-in var(--dur-4) var(--ease-spring) both; }
@keyframes p-card-in {
  from { opacity: 0; transform: translateY(-18px) rotate(-2.2deg) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* The back (the deck to draw from): same mosaic, paper plate with the outline lettering. */
.p-card--back {
  --card-band: 0px;
  aspect-ratio: 8 / 5;
  place-items: center;
  padding: var(--sp-5);
  background-color: var(--p-teal-deep);
  background-image: var(--img-mosaic);
  background-size: 48px 84px;
  background-position: center;
  box-shadow: inset 0 0 0 3px var(--p-paper), inset 0 0 0 4px var(--p-teal-deep), 0 0 0 1px rgb(15 15 18 / 0.35),
    var(--shadow-object);
}
.p-card--back::before, .p-card--back::after { display: none; }
.p-card--back .p-card__logo {
  width: 100%;
  margin: 0;
  padding: 0;
}
.p-card__plate {
  display: grid;
  place-items: center;
  width: min(74%, 21rem);
  padding: 0.9rem 1.3rem;
  background: var(--p-paper);
  border: 2px solid var(--p-black);
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 3px var(--p-paper), inset 0 0 0 4px var(--p-teal-deep), 0 3px 0 rgb(15 15 18 / 0.5);
}
/* A stack of cards (the deck). */
.p-card--stack {
  box-shadow: 0 0 0 1px rgb(15 15 18 / 0.3), 3px 4px 0 -1px var(--p-paper), 3px 4px 0 0 rgb(15 15 18 / 0.32),
    6px 8px 0 -1px var(--p-paper-2), 6px 8px 0 0 rgb(15 15 18 / 0.32), var(--shadow-object);
}

@media (max-width: 480px) {
  .p-card { padding-inline: var(--sp-4); }
  .p-card__no { font-size: 3.4rem; }
  .p-card__text { font-size: var(--fs-lg); }
}

/* ==========================================================================
   Chip: theme / difficulty toggles. Opaque on its own, so it works on teal, ink or paper.
   Use <button class="p-chip" aria-pressed>, or <label class="p-chip"><input type="checkbox">...</label>.
   ON also draws a check: state is never colour alone.
   ========================================================================== */
.p-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0 1em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--p-ink);
  background: var(--p-paper);
  border: 2px solid var(--p-black);
  border-radius: var(--r-2);
  box-shadow: 0 2px 0 var(--p-black);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}
.p-chip::before {                      /* box that becomes a check when ON */
  content: '';
  width: 1em;
  height: 1em;
  flex: none;
  background: transparent;
  border: 2px solid var(--p-black);
  border-radius: 2px;
  transition: background-color var(--dur-2) var(--ease-out);
}
.p-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.p-chip__count {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--p-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.p-chip.is-hover { background: var(--p-paper-2); transform: translateY(-1px); box-shadow: 0 3px 0 var(--p-black); }
@media (hover: hover) {
  .p-chip:hover:not([aria-pressed='true']):not(.is-on):not(:disabled):not(:has(input:checked)) { background: var(--p-paper-2); transform: translateY(-1px); box-shadow: 0 3px 0 var(--p-black); }
}
.p-chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--p-black); }
.p-chip[aria-pressed='true'], .p-chip.is-on, .p-chip:has(input:checked) {
  background: var(--p-teal);
  color: var(--p-black);                /* 7.26:1 on teal */
  box-shadow: inset 0 0 0 2px var(--p-teal), inset 0 0 0 3px rgb(244 235 173 / 0.9), 0 2px 0 var(--p-black);
}
.p-chip[aria-pressed='true']::before, .p-chip.is-on::before, .p-chip:has(input:checked)::before {
  background: var(--p-black) var(--ic-check-cream) center / 82% no-repeat;
}
.p-chip:focus-visible, .p-chip:has(input:focus-visible), .p-chip.is-focus { outline: 3px solid var(--p-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--p-black), 0 2px 0 var(--p-black); }
.p-chip:disabled, .p-chip[aria-disabled='true'] { color: var(--p-disabled-ink); background: var(--p-disabled-face); border-color: #7e8f8d; box-shadow: none; cursor: not-allowed; }

/* ==========================================================================
   Field: text input with a caps label. <label class="p-field"> label + input + hint
   ========================================================================== */
.p-field { display: grid; gap: 0.4rem; min-width: 0; color: var(--p-field-ink, currentColor); }
.p-field__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.p-field__input,
input.p-field,
textarea.p-field {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.65rem 0.95rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--p-ink);
  background: var(--p-paper);
  border: 2px solid var(--p-black);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-inset), 0 0 0 1px rgb(255 255 255 / 0.0);
  transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.p-field__input::placeholder, input.p-field::placeholder { color: var(--p-muted); opacity: 1; }   /* 6.6:1 on paper */
.p-field__input:hover, input.p-field:hover, .p-field__input.is-hover { background: #fffdf9; }
.p-field__input:focus-visible, input.p-field:focus-visible, .p-field__input.is-focus {
  outline: 3px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-inset), 0 0 0 2px var(--p-black);
}
.p-field__hint { font-size: var(--fs-xs); line-height: 1.35; }
.p-field--error .p-field__input, .p-field__input[aria-invalid='true'] {
  border-color: var(--p-red-ink);
  background: #fff7f4;
  box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--p-red-ink);
}
.p-field--error .p-field__hint {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  padding: 0.2em 0.55em;
  color: var(--p-red-ink);
  background: var(--p-paper);
  border-radius: var(--r-1);
  font-weight: 700;
}
.p-field--error .p-field__hint::before {
  content: '';
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--ic-cross) center / contain no-repeat;
  mask: var(--ic-cross) center / contain no-repeat;
}
.p-field__input:disabled { color: var(--p-disabled-ink); background: var(--p-disabled-face); border-color: #7e8f8d; cursor: not-allowed; box-shadow: none; }

/* ==========================================================================
   Numbered triangle: the clue buttons (1-20) of the board centre.
   <button class="p-tri-num">7</button>
   States: closed (default), :hover/.is-hover, :focus-visible/.is-focus,
           .is-open / [data-state="open"] (dimmed, drawn check),
           .is-new  / [data-state="new"]  (just opened: gold glow).
   Direction: default points up; .is-down / [data-dir="down"] points down.
   Size: --tri-w on the button or any ancestor (default 56px). The button box is a rectangle >= 44px so the touch target is
   safe; the triangle is drawn by two pseudo-elements (ring + face). In a tessellated strip use
   .p-tri-num--tess (button clipped to the triangle, hit area = visible shape) or .p-tri-row.
   Numbers are plum on pink: white on pink fails AA (3.1:1).
   ========================================================================== */
.p-tri-num {
  --w: var(--tri-w, 56px);                          /* set --tri-w on the button or any ancestor */
  --tri-h: calc(var(--w) * 0.866);
  --tri-k: 0.84;                                   /* face scale inside the ring, about the centroid */
  --ring: var(--p-plum);
  --face-a: #dcb5cd;
  --face-b: var(--p-pink-soft);
  --ink: var(--p-plum);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: var(--w);
  height: max(44px, var(--tri-h));
  margin: 0;
  padding: calc(var(--tri-h) / 3) 0 0;             /* centroid of an up triangle sits 1/6 h below centre */
  font-family: var(--font-label);
  font-weight: 600;
  font-size: calc(var(--w) * 0.37);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
  filter: drop-shadow(0 2px 0 rgb(15 15 18 / 0.45));
}
.p-tri-num.is-down, .p-tri-num[data-dir='down'] { padding: 0 0 calc(var(--tri-h) / 3); }
.p-tri-num::before,
.p-tri-num::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--w);
  height: var(--tri-h);
  z-index: -1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.p-tri-num.is-down::before, .p-tri-num.is-down::after,
.p-tri-num[data-dir='down']::before, .p-tri-num[data-dir='down']::after { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.p-tri-num::before { background: var(--ring); }
.p-tri-num::after {                                 /* face: same polygon, scaled about the centroid */
  background: linear-gradient(180deg, var(--face-a), var(--face-b));
  transform: scale(var(--tri-k));
  transform-origin: 50% 66.67%;
}
.p-tri-num.is-down::after, .p-tri-num[data-dir='down']::after { transform-origin: 50% 33.33%; }

.p-tri-num.is-hover:not(.is-open) {
  --face-a: #ecc9de;
  --face-b: #dba2c4;
  transform: translateY(-2px) scale(1.07);
  filter: drop-shadow(0 5px 0 rgb(15 15 18 / 0.4));
}
@media (hover: hover) {
  .p-tri-num:hover:not(.is-open):not(:disabled) {
    --face-a: #ecc9de;
    --face-b: #dba2c4;
    transform: translateY(-2px) scale(1.07);
    filter: drop-shadow(0 5px 0 rgb(15 15 18 / 0.4));
  }
}
.p-tri-num:active:not(.is-open):not(:disabled) { transform: translateY(1px) scale(0.97); filter: drop-shadow(0 1px 0 rgb(15 15 18 / 0.45)); }
/* Focus: a cream triangle grows behind the face; ink halo makes it visible on any surface. */
.p-tri-num:focus-visible, .p-tri-num.is-focus {
  outline: none;
  box-shadow: none;
  z-index: 3;
  filter: drop-shadow(0 0 1.5px var(--p-black)) drop-shadow(0 0 1.5px var(--p-black)) drop-shadow(0 0 1px var(--p-black));
}
.p-tri-num:focus-visible::before, .p-tri-num.is-focus::before { background: var(--p-cream); transform: scale(1.26); transform-origin: 50% 66.67%; }
.p-tri-num.is-down:focus-visible::before, .p-tri-num[data-dir='down']:focus-visible::before,
.p-tri-num.is-down.is-focus::before { transform-origin: 50% 33.33%; }
.p-tri-num:focus-visible::after, .p-tri-num.is-focus::after { box-shadow: none; outline: 0; }

/* Opened: dimmed deep teal (luminance and ring change) plus a drawn check in the apex zone: cues besides hue. */
.p-tri-num.is-open, .p-tri-num[data-state='open'] {
  --ring: var(--p-open-ring);
  --face-a: #0b5753;
  --face-b: var(--p-open-face);
  --ink: var(--p-aqua-3);                           /* 4.9:1 on --p-open-face */
  cursor: default;
  filter: none;
}
.p-tri-num.is-open::after, .p-tri-num[data-state='open']::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.6 9.1 18.2 20.6 5.8' fill='none' stroke='%238fd0ce' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E")
      center 25% / 21% no-repeat,
    linear-gradient(180deg, var(--face-a), var(--face-b));
}
.p-tri-num.is-open.is-down::after, .p-tri-num[data-state='open'][data-dir='down']::after {
  background-position: center 75%, 0 0;
}
/* Just opened: warm gold, lifted, a glow that pulses three times (static ring when reduced motion). */
.p-tri-num.is-new, .p-tri-num[data-state='new'] {
  --face-a: #fbf0b8;
  --face-b: var(--p-orange);
  --ring: var(--p-black);
  --ink: var(--p-black);
  filter: drop-shadow(0 0 7px rgb(244 235 173 / 0.95)) drop-shadow(0 2px 0 rgb(15 15 18 / 0.5));
  animation: p-tri-new var(--dur-4) var(--ease-spring) both, p-tri-glow var(--dur-glow) var(--ease-in-out) var(--dur-4) 3;
  cursor: default;
}
@keyframes p-tri-new {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.18) translateY(-3px); }
  100% { transform: scale(1); }
}
@keyframes p-tri-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgb(244 235 173 / 0.7)) drop-shadow(0 2px 0 rgb(15 15 18 / 0.5)); }
  50% { filter: drop-shadow(0 0 13px rgb(255 240 170 / 1)) drop-shadow(0 2px 0 rgb(15 15 18 / 0.5)); }
}
/* Tessellated use: the button itself is clipped, so the hit area is the visible triangle and
   neighbours (up/down) share edges without stealing each other's taps. */
.p-tri-num--tess { height: var(--tri-h); filter: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.p-tri-num--tess.is-down, .p-tri-num--tess[data-dir='down'] { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.p-tri-num--tess::before { transform: none; }
.p-tri-num--tess::after { transform: scale(var(--tri-k)); }
.p-tri-num--tess:focus-visible, .p-tri-num--tess.is-focus { clip-path: none; }
/* Helper: a row that tessellates alternating up/down triangles. */
.p-tri-row { display: flex; align-items: flex-start; padding-inline: calc(var(--tri-w, 56px) / 4); }
.p-tri-row > .p-tri-num { margin-inline-end: calc(var(--tri-w, 56px) / -2); }

/* ==========================================================================
   Modal: <dialog class="p-modal"> (also works as a plain block with .p-modal--static).
   Paper panel, triangle strip on top, ink border, gold filete.
   ========================================================================== */
.p-modal {
  --card-band: 1.25rem;
  position: relative;
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: calc(var(--card-band) + var(--sp-5)) var(--sp-6) var(--sp-5);
  overflow: auto;
  color: var(--p-ink);
  background: linear-gradient(172deg, var(--p-paper-hi) 0%, var(--p-paper) 60%, var(--p-paper-end) 100%);
  border: 3px solid var(--p-black);
  border-radius: var(--r-4);
  box-shadow: 0 0 0 2px var(--p-orange), 0 0 0 5px var(--p-black), 0 30px 60px -12px rgb(15 15 18 / 0.65);
}
.p-modal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--card-band);
  background: var(--img-strip) repeat-x left center / calc(var(--card-band) * 8 / 7) var(--card-band);
  border-bottom: 2px solid var(--p-teal-deep);
}
.p-modal--static { width: 100%; max-width: 34rem; margin-inline: 0; }
dialog.p-modal:not([open]) { display: none; }
/* in with a light spring; out: motion.css. `backwards`, not `both`: a fill that holds after the end would hide the opacity from the exit transition */
dialog.p-modal[open] { animation: p-modal-in var(--dur-3) var(--ease-spring) backwards; }
dialog.p-modal::backdrop {
  background: linear-gradient(rgb(15 15 18 / 0.8), rgb(15 15 18 / 0.8)), url('assets/pattern-triangles.svg') center top / 64px 112px;
  animation: p-fade var(--dur-3) var(--ease-out) both;
}
.p-modal__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.015em;
  -webkit-text-stroke: var(--poiret-boost) currentColor;
  text-wrap: balance;
}
.p-modal__body { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); max-width: 60ch; }
.p-modal__body > * + * { margin-top: var(--sp-3); }
.p-modal__answer {                                   /* the revealed answer: ink block with cream lettering */
  display: block;
  margin-block: var(--sp-3);
  padding: 0.55em 0.9em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--p-cream);
  background: var(--p-black);
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--p-violet), inset 0 0 0 4px var(--p-black), inset 0 0 0 5px var(--p-violet-2);
}
.p-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }
@keyframes p-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
@keyframes p-fade { from { opacity: 0; } to { opacity: 1; } }

/* Not your turn: the triangles stay readable but visibly inert. */
.p-tri-num:disabled:not(.is-open):not(.is-new) { cursor: not-allowed; filter: saturate(0.5) brightness(0.94) drop-shadow(0 2px 0 rgb(15 15 18 / 0.35)); }

/* Windows high contrast: pseudo-element fills are forced away, so draw the shapes with system colours. */
@media (forced-colors: active) {
  .p-tri-num::before { background: ButtonText; }
  .p-tri-num::after { background: ButtonFace; }
  .p-tri-num.is-open::after { background: Canvas; }
  .p-tri-num:focus-visible::before { background: Highlight; }
  .p-plaque, .p-card, .p-modal, .p-btn, .p-chip { border: 2px solid ButtonText; }
  .p-ic { background: ButtonText; forced-color-adjust: none; }
}

/* ==========================================================================
   Reduced motion: no entrances, no pulsing; every state still changes, instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .p-card--enter, dialog.p-modal[open], dialog.p-modal::backdrop, .p-tri-num.is-new, .p-tri-num[data-state='new'] { animation: none; }
  .p-tri-num.is-new, .p-tri-num[data-state='new'] {
    /* without the pulse, a still double ring keeps "just opened" visible */
    filter: drop-shadow(0 0 0 var(--p-cream)) drop-shadow(0 0 5px rgb(244 235 173 / 0.95)) drop-shadow(0 2px 0 rgb(15 15 18 / 0.5));
  }
  .p-btn, .p-chip, .p-plaque, .p-tri-num, .p-tri-num::before, .p-tri-num::after, .p-field__input { transition-duration: 1ms; }
  .p-btn:hover:not(:disabled), .p-btn.is-hover, .p-chip:hover, .p-tri-num:hover { transform: none; }
}