/* ==========================================================================
   Glypho — design tokens

   The candy theme, taken from the logo: four rounded tiles — grape, bubblegum,
   sun and mint — on a blush ground, two of them turned up on the same lightbulb.
   Grape carries the brand (buttons, headings, the backs of the cards); the other
   three are accents, used where a second or third colour earns its place.

   Contrast is deliberate, not incidental: every colour used for text or for a
   tile's background clears 4.5:1 against its surroundings, including the player
   colours in PlayerPalette.cs and the medal colours in EndGame.razor. Sun and
   mint are too light to carry white text, so they are used as fills, borders and
   frames; text on them is ink. Where pink has to be text, it is the deeper
   raspberry.

   Everything is set in Baloo 2, with Baloo Bhaijaan 2 for Arabic — one rounded
   family in both scripts. Both are served from this site: the security policy
   allows fonts from this origin only. Neither draws Greek letters, subscripts or
   maths signs, which tiles such as "F₁₂ = -F₂₁" need, so a few kilobytes of
   Noto Sans and Noto Sans Math are served for those alone.
   ========================================================================== */

@font-face {
    font-family: "Baloo 2";
    src: url("../fonts/baloo2-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Baloo 2";
    src: url("../fonts/baloo2-latin-ext.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Baloo Bhaijaan 2";
    src: url("../fonts/baloo-bhaijaan2-arabic.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
        U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* The characters tiles show that neither Baloo face has: θ, Δ, ₁, ₒ, ∓ and the like. Left to
   the device, they came out as empty boxes wherever its own fonts lacked them. Each file holds
   its characters and nothing else, and the browser fetches it only for a page that shows one of
   them. web/tools/fetch-symbol-fonts.py makes both and prints their ranges. */
@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/noto-sans-symbols.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+02E3, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+1D50, U+2070-2071, U+2074-208E,
        U+2090-209C, U+2153;
}

/* Noto Sans has no ∓ or √. Noto Sans Math has them, in a single weight that the browser
   emboldens on a bold tile. */
@font-face {
    font-family: "Noto Sans Math";
    src: url("../fonts/noto-sans-math-symbols.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2213, U+221A;
}

:root {
    /* The four tile colours, and a deep and a soft of each. */
    --grape: #6C3BF5;
    --grape-deep: #4B22C2;
    --grape-soft: #EEE7FF;
    --grape-tint: #F8F4FF;

    --pink: #F0428A;
    --pink-deep: #D6246E;
    --pink-soft: #FFE3EF;

    --sun: #FFC21A;
    --sun-deep: #E09A00;
    --sun-soft: #FFF3CC;

    --mint: #18C29C;
    --mint-deep: #0B7A66;
    --mint-soft: #D8F6EE;

    --orchid: #B23BD6;

    /* Brand roles, so components ask for a job rather than a colour. --brand carries
       white text (5.9:1); --brand-deep is for text and icons on a light surface. */
    --brand: var(--grape);
    --brand-deep: var(--grape-deep);
    --brand-soft: var(--grape-soft);
    --brand-tint: var(--grape-tint);
    --accent: var(--pink-deep);
    --accent-deep: #A8174F;

    /* Ink — a deep plum, so text sits in the same family as the grape. */
    --ink: #2A1A4A;
    --ink-soft: #5E5277;
    --ink-faint: #8C82A3;

    /* Surfaces */
    --bg: #FFF5FA;
    --bg-dots: rgba(108, 59, 245, 0.07);
    --surface: #FFFFFF;
    --surface-sunken: #F6F0FC;
    --border: #EEE3F7;
    --border-strong: #D9C9F0;
    --shadow: 0 1px 2px rgba(42, 26, 74, 0.06), 0 8px 22px rgba(108, 59, 245, 0.10);
    --shadow-lift: 0 2px 4px rgba(42, 26, 74, 0.08), 0 14px 30px rgba(108, 59, 245, 0.16);

    /* Tiles: the back of every card is grape, as on the logo's hidden tiles; a
       revealed card is white in a sun frame, so its content — the thing the
       player has to read and remember — gets the most legible surface. */
    --tile-down-from: #7C4DFF;
    --tile-down-to: #5A2BE0;
    --tile-down-hover-from: #8C62FF;
    --tile-down-hover-to: #6B3DF0;
    --tile-revealed: #FFFFFF;
    --tile-frame: var(--sun);

    --danger: #C62828;

    /* Proximity signal — red = closest. See plan rule 12. A dark ring keeps all
       three readable on a white tile as well as on the grape card back, and the
       far band is a clear blue so it stays distinct from that back. */
    --prox-near: #E01B24;
    --prox-mid: #F08A00;
    --prox-far: #1D6FE0;
    --prox-ring: rgba(42, 26, 74, 0.55);

    /* Layout */
    --radius: 20px;
    --radius-sm: 14px;
    --gap: clamp(4px, 1.2vmin, 10px);
    --tap-target: 44px;

    --font: "Baloo 2", "Baloo Bhaijaan 2", "Noto Sans", "Noto Sans Math",
        system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ar: "Baloo Bhaijaan 2", "Baloo 2", "Noto Sans", "Noto Sans Math",
        system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

/* Text for a screen reader only — used where an icon or a drawing carries the meaning. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--ink);
    background-color: var(--bg);
    /* A scatter of faint grape dots, like confetti on a table — texture, not decoration. */
    background-image: radial-gradient(var(--bg-dots) 1.3px, transparent 1.4px);
    background-size: 22px 22px;
    background-attachment: fixed;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
}

/* Arabic renders natively in the browser — no glyph shaping needed, so the
   Unity build's RTLTMPro layer is dropped entirely. */
:root:lang(ar) {
    direction: rtl;
}

:lang(ar) {
    font-family: var(--font-ar);
}

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    line-height: 1.15;
    font-weight: 800;
}

a {
    color: var(--brand-deep);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.22em;
}

.icon--sm {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
}

button {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--tap-target);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    padding: 0.6em 1.2em;
    /* The candy under-lip: a button sits on its own shadow, and presses into it. */
    box-shadow: 0 4px 0 var(--brand-deep);
    transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

button:hover:not(:disabled) {
    background: #7B4FFF;
}

button:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--brand-deep);
}

/* Disabled reads from the flat, sunken face; the text stays legible, because a disabled Start
   button is exactly when the player needs to read what it says. */
button:disabled {
    background: var(--surface-sunken);
    color: var(--ink-soft);
    box-shadow: none;
    cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 2px;
}

/* <FocusOnNavigate> moves focus to the page heading after every navigation, adding tabindex="-1"
   to do it, so a screen reader announces the new screen. Chromium counts that as focus-visible and
   rings the heading. The heading is not interactive and the focus was not a keyboard action, so
   the ring is dropped. */
h1:focus,
h1:focus-visible {
    outline: none;
}

input[type="text"],
input[type="number"] {
    font: inherit;
    color: var(--ink);
    min-height: var(--tap-target);
    width: 100%;
    padding: 0.55em 0.9em;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

input[type="text"]:focus {
    border-color: var(--brand);
}

input::placeholder {
    color: var(--ink-faint);
}

/* Honour users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Blazor boot / error UI ------------------------------------------------ */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--grape-soft);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--brand);
    stroke-dasharray: calc(3.141592653589793 * var(--blazor-load-percentage, 0%) * 0.8) 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    font-weight: 700;
    color: var(--ink-soft);
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading…");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: 0.8rem 1.2rem;
    background: var(--danger);
    color: #fff;
    box-shadow: 0 -2px 12px rgba(42, 26, 74, 0.28);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: inline-end;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.primary {
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 1.12rem;
    font-weight: 800;
    padding: 0.75em 1.2em;
}

.ghost {
    background: var(--surface);
    color: var(--brand-deep);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    padding: 0.4em 0.95em;
}

.ghost:hover:not(:disabled) {
    background: var(--brand-tint);
    color: var(--brand-deep);
}

.ghost:active:not(:disabled) {
    box-shadow: 0 1px 0 var(--border-strong);
}

.panel {
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-block-end: 0.9rem;
}

.panel h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    margin-block-end: 0.5rem;
    color: var(--brand-deep);
}

.panel__note {
    margin: 0.35rem 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

/* A note introducing a control needs room for that control's focus ring, which is drawn outside
   its border and would otherwise sit on the last line of the note. */
.panel__note + .row {
    margin-block-start: 0.7rem;
}

.panel__error {
    margin: 0.6rem 0 0;
    color: var(--danger);
    font-weight: 700;
    font-size: 0.95rem;
}

.row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-block-end: 0.5rem;
}

.field {
    display: block;
    max-width: 28rem;
    margin: 0 auto 1.5rem;
}

.field__label {
    display: block;
    font-weight: 700;
    margin-block: 0.6rem 0.35rem;
}

.section-title {
    font-size: clamp(1.35rem, 4.5vmin, 1.8rem);
    color: var(--ink);
    margin-block-end: 0.2rem;
}

.section-lede {
    margin: 0 0 1rem;
    color: var(--ink-soft);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05em 0.65em;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    border: 1px solid var(--border-strong);
    white-space: nowrap;
}

.badge--pro {
    background: var(--sun);
    border-color: var(--sun-deep);
    color: var(--ink);
}

.link-button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0.2em 0.3em;
    min-height: var(--tap-target);
    color: var(--brand-deep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-button:hover:not(:disabled) {
    background: none;
    color: var(--accent-deep);
}

.link-button:active:not(:disabled) {
    transform: none;
    box-shadow: none;
}

/* --- the brand --------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.brand__mark {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
}

.brand__word {
    display: inline-flex;
    align-items: baseline;
    direction: ltr;
    unicode-bidi: isolate;
    font-family: "Baloo 2", var(--font);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* One candy colour per letter, as on the logo. Each clears 3:1 against the blush
   ground at display sizes; the wordmark is never set small enough to need 4.5:1. */
.brand__l1 { color: #6C3BF5; }
.brand__l2 { color: #E0337E; }
.brand__l3 { color: #D86400; }
.brand__l4 { color: #0E9F80; }
.brand__l5 { color: #B23BD6; }
.brand__l6 { color: #6C3BF5; }

/* --- avatars ----------------------------------------------------------- */

.avatar {
    width: var(--avatar-size, 32px);
    height: var(--avatar-size, 32px);
    flex: none;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(42, 26, 74, 0.2);
    background: var(--surface-sunken);
}

/* --- the room code -------------------------------------------------------- */
/* A private room is reachable only through its code, so in the lobby the code is the screen's
   main object rather than a line of small print: big, spaced out to be read aloud, and sitting
   next to the one button that matters before the game starts.

   Everything here is forced to LTR. The code is four Latin characters and it must be read in the
   order it was generated — in an Arabic lobby a bidi reorder would hand the host a code that does
   not open their own room. */

.room-code {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    direction: ltr;
}

.room-code__value {
    flex: 1 1 auto;
    display: block;
    padding: 0.35rem 0.9rem;
    border: 3px dashed var(--grape);
    border-radius: var(--radius-sm);
    background: var(--brand-tint);
    color: var(--brand-deep);
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.22em;

    /* The trailing letter-space would otherwise push the code off centre. */
    text-indent: 0.22em;
    text-align: center;
    line-height: 1.3;

    /* So a host who would rather select it by hand than press the button can. */
    user-select: all;
    -webkit-user-select: all;
}

/* Line art on a light face, the way the icon is drawn — a solid square beside the code competes
   with it, and the icon has to be legible for the button to say what it does. */
.room-code__copy {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    background: var(--surface);
    color: var(--brand-deep);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
}

.room-code__copy:hover:not(:disabled) {
    background: var(--brand-soft);
    color: var(--brand-deep);
}

/* Confirmed: the button holds the copied colour until the code changes or it is pressed again. */
.room-code__copy--done,
.room-code__copy--done:hover:not(:disabled) {
    background: var(--mint-soft);
    border-color: var(--mint-deep);
}

.copy-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* The back sheet slides under the front one and out again, so the icon acts out the copy. It
   runs while the button is under the pointer or holds focus, and once more on a press — which
   is the only cue a touch screen gets, having no hover to offer. */
@keyframes glypho-copy-sheet {
    0% {
        transform: none;
    }

    30%,
    55% {
        /* Exactly onto the front sheet, where the mask swallows it. */
        transform: translate(-32px, 12px);
    }

    100% {
        transform: none;
    }
}

.room-code__copy:hover .copy-icon__back,
.room-code__copy:focus-visible .copy-icon__back {
    animation: glypho-copy-sheet 1.1s ease-in-out infinite;
}

.room-code__copy--done .copy-icon__back {
    animation: glypho-copy-sheet 1.1s ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .room-code__copy .copy-icon__back {
        animation: none !important;
    }
}

/* "Copied" replaces the sharing note in place, so the panel does not jump when it appears. */
.room-code__said {
    color: var(--mint-deep);
    font-weight: 700;
}

/* The field the code is typed into. Monospace and widely spaced for the same reason the code
   itself is: four characters that have to be compared against what someone read out. */
.code-input {
    flex: 1 1 auto;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-align: center;
    text-transform: uppercase;
}

.code-input::placeholder {
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: normal;
    text-indent: 0;
    text-transform: none;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--brand);
}

.toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    min-height: var(--tap-target);
    font-weight: 700;
}

.toggle input {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--brand);
}

/* --- choice buttons (grid size, category) --------------------------------- */

.choices {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.choice {
    flex: 1 1 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    font-weight: 800;
}

/* Scoped to button, not to the class.
   .choice is worn by two different things: the buttons a player presses, and the cards shown to
   everyone who is only watching somebody else choose. The hover state belongs to the first. Written
   as a bare class it reached the second as well — :not(:disabled) is always true of a <span>, and
   at three selectors it outranked anything .choice--waiting could say — so a card nobody could
   press still lit up in brand colours under the pointer, and read as pressable. */
button.choice:hover:not(:disabled) {
    background: var(--brand-tint);
    color: var(--brand-deep);
    border-color: var(--brand);
}

.choice small {
    font-weight: 500;
    color: var(--ink-soft);
}

.choice--on,
button.choice--on:hover:not(:disabled) {
    background: var(--brand);
    border-color: var(--brand-deep);
    box-shadow: 0 3px 0 var(--brand-deep);
    color: #fff;
}

.choice--on small {
    color: rgba(255, 255, 255, 0.88);
}

.choice--big {
    font-size: 1.2rem;
    padding: 1.1em 1em;
    border-radius: var(--radius);
}

/* The same card, while somebody else decides: readable, plainly not a button, and inert under the
   pointer — no hover, no press, nothing that suggests this is a choice being offered. */
.choice--waiting {
    cursor: default;
    opacity: 0.75;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    border-style: dashed;
    box-shadow: none;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0.7em 1em;
    border-radius: var(--radius);
}

/* The one that was picked, for the two seconds before the round starts. The border blinks rather
   than the whole card: the eye lands on it without the text moving or the other two dimming
   further, and it reads as "this one" rather than as something newly pressable. */
.choice--chosen {
    opacity: 1;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-style: solid;
    animation: chosen-blink 0.4s steps(1, end) infinite;
}

@keyframes chosen-blink {
    0%, 49% {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent);
    }

    50%, 100% {
        border-color: var(--border-strong);
        box-shadow: none;
    }
}

/* Honouring reduced motion means holding the lit half rather than flashing it. */
@media (prefers-reduced-motion: reduce) {
    .choice--chosen {
        animation: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent);
    }
}

.choice--waiting:not(.choice--chosen):hover,
.choice--waiting:not(.choice--chosen):active {
    background: var(--surface-sunken);
    color: var(--ink-soft);
    border-color: var(--border-strong);
    transform: none;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35em 0.85em;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 2px solid var(--border);
    cursor: pointer;
    font-weight: 600;
    min-height: var(--tap-target);
}

.chip--on {
    background: var(--brand);
    border-color: var(--brand-deep);
    color: #fff;
    font-weight: 800;
}

.chip input {
    accent-color: var(--brand-deep);
}

.chip--on input {
    accent-color: #fff;
}

/* --- the stepper (bots) ----------------------------------------------- */

.stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-block: 0.4rem;
}

.stepper__button {
    width: var(--tap-target);
    padding: 0;
    display: grid;
    place-items: center;
}

.stepper__value {
    min-width: 7.5rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
}

/* ==========================================================================
   Screens that share the narrow column
   ========================================================================== */

.home,
.setup,
.play,
.pricing,
.legal,
.profile {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.setup__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-block-end: 1rem;
}

.setup__head h1 {
    font-size: clamp(1.35rem, 5vmin, 1.8rem);
    margin: 0;
}

.setup__me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.6rem;
}

/* ==========================================================================
   Home
   ========================================================================== */

.home {
    max-width: 74rem;
    gap: 1.2rem;
    padding-block-end: 1rem;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.topbar__lang {
    background: var(--surface);
    color: var(--brand-deep);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    padding: 0.3em 0.9em;
}

.topbar__lang:hover:not(:disabled) {
    background: var(--brand-tint);
}

/* The player: their avatar and name, which open the profile. The one element on the page that
   says who is playing, so it is a proper target rather than a label. */
.topbar__me {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap-target);
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

:root[dir="rtl"] .topbar__me,
.home[dir="rtl"] .topbar__me {
    padding: 0.2rem 0.25rem 0.2rem 0.75rem;
}

.topbar__me:hover {
    background: var(--brand-tint);
}

.topbar__me:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-strong);
}

.topbar__name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- the hero --------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 28px;
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
}

@media (min-width: 880px) {
    .hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
}

.hero__copy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hero__title {
    margin: 0;
}

/* The wordmark at display size, each letter off-kilter like a tile set down by hand. */
.hero__title .brand__word {
    font-size: clamp(3.6rem, 13vmin, 6.4rem);
}

.hero__title .brand__word > span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.hero__title .brand__l1 { transform: rotate(-5deg); }
.hero__title .brand__l2 { transform: translateY(-0.06em) rotate(4deg); }
.hero__title .brand__l3 { transform: translateY(0.03em) rotate(-3deg); }
.hero__title .brand__l4 { transform: translateY(-0.05em) rotate(5deg); }
.hero__title .brand__l5 { transform: translateY(0.02em) rotate(-4deg); }
.hero__title .brand__l6 { transform: translateY(-0.04em) rotate(6deg); }

.hero__title:hover .brand__word > span {
    transform: none;
}

.hero__lede {
    margin: 0;
    font-size: clamp(1.25rem, 3.6vmin, 1.55rem);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
}

.hero__tagline {
    margin: 0;
    color: var(--ink-soft);
    max-width: 34rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 0.4rem;
}

.hero__actions .primary {
    width: auto;
    margin: 0;
    flex: 1 1 12rem;
}

.hero__actions .ghost {
    flex: 1 1 10rem;
    font-size: 1.05rem;
}

.hero__nudge {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.hero__demo {
    display: flex;
    justify-content: center;
}

/* The four numbers worth knowing before starting. */
.stats {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 2px solid var(--border);
}

.stat b {
    font-size: clamp(1.2rem, 4.5vmin, 1.6rem);
    line-height: 1.1;
    color: var(--brand-deep);
}

.stat span {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stat:nth-child(2) b { color: var(--accent); }
.stat:nth-child(3) b { color: var(--mint-deep); }
.stat:nth-child(4) b { color: #B45309; }

/* --- live figures: players online, players ever, games played ------------ */

.live-stats {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    animation: fade-in 0.3s ease-out;
}

/* Sharing one row, on a phone too: three figures read as one strip rather than a stack. */
.live-stat {
    flex: 1 1 0;
    min-width: 0;
    max-width: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    box-shadow: var(--shadow);
}

.live-stat__figure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Figures counting up keep their width, so the tiles do not shudder as the digits change. */
.live-stat .count-up {
    font-size: clamp(1.3rem, 4.8vmin, 1.75rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--brand-deep);
}

.live-stat__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.live-stat--online { border-color: var(--mint); background: var(--mint-soft); }
.live-stat--online .count-up { color: var(--mint-deep); }
.live-stat--plays .count-up { color: var(--accent); }

/* A light that breathes: what says "now" about the first figure without a word. */
.live-stat__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent);
    animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent); }
    70% { box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--mint) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .live-stat__dot { animation: none; }
}

/* --- the demo board ---------------------------------------------------- */

.demo {
    margin: 0;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    border-radius: 24px;
    background: var(--grape-tint);
    border: 2px dashed var(--border-strong);
}

.demo__players {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.demo__board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* No height to fit here, so the demo's tiles are simply square. */
.demo__board .board__cell {
    aspect-ratio: 1;
}

.demo__caption {
    text-align: center;
    font-weight: 800;
    color: var(--brand-deep);
    animation: pop-in 0.35s ease-out;
}

/* --- modes, leaderboard, account --------------------------------------- */

.home__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

@media (min-width: 980px) {
    .home__columns {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.home__side {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.9rem;
}

.mode-card {
    --card-accent: var(--grape);
    --card-soft: var(--grape-soft);
    --card-ink: var(--grape-deep);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 2px solid var(--border);
    border-block-start: 6px solid var(--card-accent);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mode-card:not(.mode-card--locked):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.mode-card--pink { --card-accent: var(--pink); --card-soft: var(--pink-soft); --card-ink: var(--pink-deep); }
.mode-card--sun { --card-accent: var(--sun); --card-soft: var(--sun-soft); --card-ink: #9A5B00; }
.mode-card--mint { --card-accent: var(--mint); --card-soft: var(--mint-soft); --card-ink: var(--mint-deep); }

.mode-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mode-card__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: var(--card-soft);
    color: var(--card-ink);
    font-size: 1.2rem;
}

.mode-card__access {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.05em 0.6em;
    border-radius: 999px;
    border: 1.5px solid currentColor;
}

.mode-card__access--everyone { color: var(--mint-deep); }
.mode-card__access--account { color: var(--brand-deep); }
.mode-card__access--pro { color: #8A5A00; background: var(--sun-soft); }

.mode-card__title {
    margin: 0.2rem 0 0;
    font-size: 1.25rem;
}

.mode-card__body {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    flex: 1;
}

.mode-card__cta {
    margin-block-start: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* A mode the player cannot use yet: the card fades back, but the one step that would open it
   stays at full strength, so the eye goes straight to it. */
.mode-card--locked {
    background: var(--surface-sunken);
    box-shadow: none;
}

.mode-card--locked .mode-card__icon,
.mode-card--locked .mode-card__title,
.mode-card--locked .mode-card__body {
    opacity: 0.55;
}

.mode-card__cta--locked {
    background: var(--surface);
    color: var(--brand-deep);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
}

.mode-card__cta--locked:hover:not(:disabled) {
    background: var(--brand-tint);
}

.leaderboard__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.leaderboard__row {
    display: grid;
    grid-template-columns: 1.8rem auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 12px;
}

.leaderboard__row:nth-child(odd) {
    background: var(--surface-sunken);
}

.leaderboard__rank {
    font-weight: 800;
    text-align: center;
    color: var(--ink-soft);
}

.leaderboard__row--top1 .leaderboard__rank { color: #A97600; }
.leaderboard__row--top2 .leaderboard__rank { color: #6B7280; }
.leaderboard__row--top3 .leaderboard__rank { color: #9A5B2D; }

.leaderboard__name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard__games {
    font-size: 0.8rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.leaderboard__rating {
    color: var(--brand-deep);
    font-size: 1.05rem;
}

.leaderboard__footer {
    margin-block-start: 0.6rem;
    border-block-start: 2px dashed var(--border);
}

.account {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account__who {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 2px solid var(--border);
    color: var(--ink);
    text-decoration: none;
}

.account__name {
    font-weight: 800;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* The Google Identity Services button renders itself into this element. */
.account__gsi {
    min-height: 44px;
    display: flex;
    justify-content: flex-start;
}

/* --- the sections under the fold --------------------------------------- */

.home__section {
    margin-block-start: 0.8rem;
}

.home__note {
    margin: 0.8rem 0 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    padding: 0.2em 0.8em;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--border);
    font-weight: 700;
    color: var(--brand-deep);
}

.tag:nth-child(4n + 2) { color: var(--accent); }
.tag:nth-child(4n + 3) { color: var(--mint-deep); }
.tag:nth-child(4n) { color: #9A5B00; }

.features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.7rem;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    flex: none;
    border-radius: 12px;
    background: var(--grape-soft);
    color: var(--grape-deep);
}

.feature:nth-child(2) .feature__icon { background: var(--pink-soft); color: var(--pink-deep); }
.feature:nth-child(3) .feature__icon { background: var(--sun-soft); color: #8A5A00; }
.feature:nth-child(4) .feature__icon { background: var(--mint-soft); color: var(--mint-deep); }
.feature:nth-child(5) .feature__icon { background: var(--pink-soft); color: var(--pink-deep); }
.feature:nth-child(6) .feature__icon { background: var(--mint-soft); color: var(--mint-deep); }

.feature__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.feature__text b {
    color: var(--ink);
    font-size: 1.02rem;
}

.feature__text span {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.4;
}

/* --- the "nobody came" notice ------------------------------------------- */

.notice {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(42, 26, 74, 0.45);
    animation: fade-in 0.2s ease-out;
}

.notice__card {
    width: 100%;
    max-width: 26rem;
    padding: 1.4rem;
    border-radius: 24px;
    background: var(--surface);
    border-block-start: 8px solid var(--pink);
    box-shadow: var(--shadow-lift);
    text-align: center;
    animation: pop-in 0.25s ease-out;
}

.notice__card h2 {
    color: var(--brand-deep);
}

.notice__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block-start: 1rem;
}

.notice__actions .ghost {
    width: 100%;
}

.notice__actions .link-button {
    align-self: center;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Music dock

   A fixed control that MainLayout renders on top of every screen — menus, the
   category chooser, the board, the scoreboard — so a player can silence it at the
   moment it starts bothering them rather than after walking back to the menu.

   Bottom inline-start is the one corner nothing else claims. The shell reserves a
   strip of its own height for it, so it never covers a tile.
   ========================================================================== */

.music-dock {
    position: fixed;
    inset-block-end: max(10px, env(safe-area-inset-bottom));
    inset-inline-start: max(10px, env(safe-area-inset-left));
    z-index: 20;
}

.music-dock__button {
    min-height: 0;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand-deep);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    /* Opaque enough to read over a tile, quiet enough not to compete with the board. */
    opacity: 0.92;
}

.music-dock__button:hover:not(:disabled) {
    background: var(--brand-soft);
    color: var(--brand-deep);
    opacity: 1;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile__card {
    display: flex;
    flex-direction: column;
}

.profile__preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-end: 0.6rem;
}

.profile__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
}

.profile__name {
    font-size: 1.5rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.profile__subhead {
    margin-block: 1rem 0.5rem;
    font-size: 1rem;
}

.avatar-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 26rem;
}

.avatar-picker__option {
    display: grid;
    place-items: center;
    padding: 0.35rem;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 18px;
    background: var(--surface);
    border: 3px solid transparent;
    box-shadow: none;
}

.avatar-picker__option:hover:not(:disabled) {
    background: var(--brand-tint);
}

.avatar-picker__option:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: none;
}

.avatar-picker__option .avatar {
    width: 100%;
    height: auto;
    max-width: 56px;
    box-shadow: none;
}

.avatar-picker__option--on,
.avatar-picker__option--on:hover:not(:disabled) {
    border-color: var(--grape);
    background: var(--grape-soft);
}

.profile__actions {
    margin-block-start: 1rem;
}

.profile__actions .primary {
    margin: 0;
}

.profile__saved {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--mint-deep);
    font-weight: 700;
}

.stats--left {
    justify-content: flex-start;
    margin-block-end: 0.6rem;
}

/* ==========================================================================
   Private rooms: roster, teams, host
   ========================================================================== */

.roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.roster__player {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid color-mix(in srgb, var(--c, var(--grape)) 35%, var(--border));
    font-weight: 700;
}

.roster__player--you {
    border-color: var(--grape);
    background: var(--grape-tint);
}

.roster__player em {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--ink-soft);
}

.roster__rating {
    color: var(--brand-deep);
}

.teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.team {
    --c: #15803D;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    border-radius: 18px;
    border: 3px solid color-mix(in srgb, var(--c) 35%, transparent);
    background: color-mix(in srgb, var(--c) 7%, var(--surface));
}

.team--red { --c: #C62828; }

.team--mine {
    border-color: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}

.team__name {
    margin: 0;
    font-size: 1.1rem;
    color: var(--c);
}

.team__members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 2rem;
}

.team__member {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    min-width: 0;
}

.team__member bdi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team__host,
.team__bot {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ink-soft);
}

.team__join {
    background: var(--c);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 60%, #000);
    font-size: 0.95rem;
}

.team__join:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c) 88%, #fff);
}

.team__you {
    margin: 0;
    text-align: center;
    font-weight: 800;
    color: var(--c);
}

.host h2 {
    color: var(--brand-deep);
}

/* ==========================================================================
   Matchmaking
   ========================================================================== */

.mm__status {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* The lobby's clock: a ring that empties as the minute runs down. */
.mm__clock {
    --progress: 1;
    flex: none;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background:
        radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%),
        conic-gradient(var(--pink) calc(var(--progress) * 360deg), var(--pink-soft) 0);
}

.mm__seconds {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

.mm__unit {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.mm__copy h2 {
    margin: 0;
}

.votes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.6rem;
}

.vote {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35em 0.45em 0.35em 0.9em;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--border-strong);
    box-shadow: 0 3px 0 var(--border-strong);
    border-radius: 999px;
}

:root[dir="rtl"] .vote {
    padding: 0.35em 0.9em 0.35em 0.45em;
}

.vote:hover:not(:disabled) {
    background: var(--brand-tint);
}

.vote__count {
    display: grid;
    place-items: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-weight: 800;
}

.vote--on,
.vote--on:hover:not(:disabled) {
    background: var(--grape);
    border-color: var(--grape-deep);
    box-shadow: 0 3px 0 var(--grape-deep);
    color: #fff;
}

.vote--on .vote__count {
    background: var(--sun);
    color: var(--ink);
}

/* ==========================================================================
   Category chooser
   ========================================================================== */

.chooser {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.chooser h1 {
    font-size: 1.6rem;
}

.chooser__king {
    color: var(--brand-deep);
    font-weight: 800;
    margin: 0;
}

.chooser__options {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* ==========================================================================
   In play
   ========================================================================== */

.hud {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-block-end: 0.7rem;
}

.hud__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hud__round {
    font-weight: 800;
    color: var(--ink-soft);
}

/* The category the round is being played from. Quieter than the rule beneath it — it is context,
   not the instruction — but present for the whole round, because the rule alone does not say what
   the round is about. */
.hud__category {
    margin: 0;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

/* The round's rule is the one line a player must read before looking at the
   board, so it gets the brand colour rather than body ink. */
.hud__rule {
    margin: 0;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand-deep);
}

.hud__teams {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

.team-score {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 60%, #000);
}

.team-score i {
    font-style: normal;
    font-weight: 800;
    font-size: 1.2rem;
}

.hud__players {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15em 0.7em 0.15em 0.2em;
    border-radius: 999px;
    background: var(--surface);
    border: 2px solid var(--border);
    font-size: 0.92rem;
}

:root[dir="rtl"] .pill {
    padding: 0.15em 0.2em 0.15em 0.7em;
}

.pill .avatar {
    box-shadow: none;
}

.pill b {
    color: var(--c, var(--ink));
}

.pill i {
    font-style: normal;
    font-weight: 800;
}

.pill em {
    font-style: normal;
    color: var(--accent);
    font-weight: 800;
}

.pill--turn {
    border-color: var(--c, var(--ink));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #2A1A4A) 22%, transparent);
}

.pill--away {
    opacity: 0.5;
}

.timer {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 2px solid var(--border);
    overflow: hidden;
}

.timer__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mint), var(--sun) 60%, var(--pink));
    transition: width 0.2s linear;
}

/* --- the board -----------------------------------------------------------
   Every board is five columns wide; only the row count changes (4, 6 or 8).
   A tile's height is what a square tile would be given, whichever of the width
   and the height below the HUD runs out first — so the whole board stays on
   screen without breakpoints.

   On a medium or large board the height runs out first, which left a band of
   unused width either side. So a tile's width is worked out separately: its
   share of the width, but never more than --tile-max-stretch times its height.
   Where the width is what runs out — a phone, a small board — that share is the
   height itself and the tiles stay square. */

/* The width the board may use. A query container so the tile sizes can be taken from it: 100cqw
   below is this frame's width, which is what `100%` was when the board sized itself. */
.board-frame {
    container-type: inline-size;
    width: 100%;

    /* A five-column board is usually limited by width rather than height, so centre it in
       whatever vertical space is left instead of letting it sit against the HUD. */
    margin-block: auto;
}

.board {
    /* Half again as wide as tall, at most: wider than that and a tile stops reading as a card. */
    --tile-max-stretch: 1.5;

    /* The height is exactly the side of the square tile this board always had: the width of a
       five-column board capped so its rows fit in the viewport below the HUD, less the gaps, split
       into columns. */
    --tile-h: calc(
        (min(100cqw, calc((100dvh - 19rem) * var(--cols, 5) / var(--rows, 6)))
            - (var(--cols, 5) - 1) * var(--gap))
        / var(--cols, 5));

    /* The column's share of the frame, but no wider than the stretch allows. */
    --tile-w: min(
        calc((100cqw - (var(--cols, 5) - 1) * var(--gap)) / var(--cols, 5)),
        calc(var(--tile-h) * var(--tile-max-stretch)));

    display: grid;
    grid-template-columns: repeat(var(--cols, 5), var(--tile-w));
    grid-auto-rows: var(--tile-h);
    justify-content: center;
    gap: var(--gap);
}

/* A cell is the tile's box, so a sound tile's stop button can sit inside it. On the board its size
   comes from the grid tracks above. */
.board__cell {
    position: relative;
    min-width: 0;
}

/* A board tile may be wider than it is tall, so the proportions a square tile takes from its width
   — which is all a percentage padding or radius can mean — come from its height instead. On a
   square tile the two are the same. */
.board .tile {
    padding: calc(var(--tile-h) * 0.06);
    border-radius: calc(var(--tile-h) * 0.18);
}

/* Shown only while a clip is playing, and available to every player rather than
   the one on turn — anyone may silence it, as in the Unity build. Sized from the
   tile's height, which is the same whether or not the tile has been widened. */
.board__sound {
    position: absolute;
    inset-block-end: 4px;
    inset-inline-end: 4px;
    z-index: 1;
    min-height: 0;
    padding: 0;
    width: calc(var(--tile-h) * 0.34);
    max-width: 26px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: clamp(0.5rem, 2.4vmin, 0.8rem);
    line-height: 1;
    border-radius: 50%;
    background: var(--pink-deep);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    animation: sound-pulse 1s ease-in-out infinite;
}

.board__sound:hover:not(:disabled) {
    background: var(--accent-deep);
}

@keyframes sound-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.tile {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    place-items: center;
    padding: 6%;
    border-radius: 18%;
    min-height: 0;
    overflow: hidden;

    /* Both axes, not just the width: a board tile can be wider than it is tall, and what is drawn
       on it is sized in cqmin — its shorter side — so it fits the height either way. */
    container-type: size;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Tiles are disabled whenever it is not this player's moment to act — while a pair
   resolves, during the CPU's turn, and permanently once matched. The generic
   button:disabled styling would repaint the whole board in that state, so tile colours
   are restated at this specificity and only the cursor changes. */
.tile:disabled {
    cursor: default;
}

/* The back of a card: grape, like the logo's hidden tiles, with the same under-lip every
   button has — so a face-down tile reads as something to press. */
.tile.tile--down {
    background: linear-gradient(150deg, var(--tile-down-from), var(--tile-down-to));
    color: #fff;
    box-shadow: inset 0 -5px 0 rgba(42, 26, 74, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.tile--down:not(:disabled):hover {
    background: linear-gradient(150deg, var(--tile-down-hover-from), var(--tile-down-hover-to));
    transform: translateY(-2px);
}

.tile--down:not(:disabled):active {
    transform: translateY(1px);
}

.tile__back {
    font-family: "Baloo 2", var(--font);
    font-weight: 800;
    font-size: clamp(0.8rem, 46cqmin, 2.6rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.38);
}

/* Revealed content is what the player has to read and remember, so it gets the
   most legible surface available: ink on white, in the sun frame from the logo,
   so a face-up tile still reads as face-up at a glance. It turns over as it goes. */
.tile.tile--revealed {
    background: var(--tile-revealed);
    color: var(--ink);
    box-shadow: inset 0 0 0 clamp(3px, 6cqw, 5px) var(--tile-frame);
    animation: tile-turn 0.28s ease-out;
}

/* A matched pair takes the colour of whoever matched it — that is how the board
   shows who is winning. Every player colour carries white text; see PlayerPalette. */
.tile.tile--matched {
    background: var(--matched, var(--mint-deep));
    color: #fff;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6);
    animation: tile-pop 0.32s ease-out;
}

@keyframes tile-turn {
    from { transform: perspective(400px) rotateY(80deg); }
    to { transform: none; }
}

@keyframes tile-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* An image needs a light backing whatever matched it, or a dark PNG disappears. */
.tile--matched .tile__image {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
}

/* Sized per tile from the text itself — see TileTextFit — so a long phrase
   shrinks instead of wrapping past the bottom. The bounds are a safety net: the
   floor stops a pathological string from vanishing, and overflow-wrap breaks a
   word rather than letting it spill if the estimate comes out slightly low. */
.tile__text {
    /* <bdi> is inline; the tile lays its face out as a block. Isolation is <bdi>'s own default and
       is restated here so a stylesheet change cannot quietly undo the direction fix. */
    display: block;
    unicode-bidi: isolate;
    font-size: clamp(0.38rem, calc(var(--fit, 22) * 1cqmin), 1.45rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Exactly the tile's content box, and the picture fitted inside it. Not 100%: the tile lays its
   face out on an auto-sized grid row, which grows to fit the image's own height at full width — so a
   square image on a widened tile, or a tall one on any tile, came out taller than the tile and was
   cut off top and bottom. */
.tile__image {
    width: 100cqw;
    height: 100cqh;
    object-fit: contain;
}

.tile__icon {
    display: grid;
    place-items: center;
    font-size: clamp(0.7rem, 34cqmin, 1.8rem);
    opacity: 0.8;
}

.tile__icon--on {
    opacity: 1;
    color: var(--pink-deep);
}

/* The proximity hint: a dot whose colour gives the band and whose blink rate
   tracks how close the partner is. The ring keeps it visible on a white
   revealed tile as well as on the grape card back. 25cqmin is 22% of the tile's
   height: cqmin measures the content box, which the padding trims to 88% of it. */
.tile__hint {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    width: 25cqmin;
    max-width: 13px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--prox-ring);
    animation: hint-blink var(--blink, 0.5s) steps(1, end) infinite;
}

.tile__hint--near {
    background: var(--prox-near);
}

.tile__hint--mid {
    background: var(--prox-mid);
}

.tile__hint--far {
    background: var(--prox-far);
}

@keyframes hint-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.play__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* ==========================================================================
   End game
   ========================================================================== */

.endgame {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    text-align: center;
}

.endgame__head {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.endgame__head small {
    font-size: 0.5em;
    color: var(--ink-soft);
}

.endgame__winner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: pop-in 0.35s ease-out;
}

.endgame__draw {
    color: var(--ink-soft);
}

.endgame__next {
    margin: 0;
    font-weight: 800;
    color: var(--brand-deep);
}

.endgame__members {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 28rem;
}

.endgame__members li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.6rem 0.1rem 0.15rem;
    border-radius: 999px;
    border: 2px solid var(--c);
    background: var(--surface);
    font-weight: 700;
}

.scores {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 28rem;
    width: 100%;
    margin-inline: auto;
}

.scores__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55em 1em;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    border-inline-start: 6px solid var(--c, var(--ink));
}

.scores__row b {
    color: var(--c, var(--ink));
    font-size: 1.15rem;
}

.scores__who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    min-width: 0;
}

.scores__right {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.scores__rating {
    font-weight: 700;
    color: var(--ink-soft);
}

.scores__rating small {
    font-weight: 800;
}

.scores__rating--up small {
    color: var(--mint-deep);
}

.scores__rating--down small {
    color: var(--danger);
}

/* ==========================================================================
   Proximity tutorial
   ========================================================================== */

.tutorial {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    max-width: 32rem;
    margin-inline: auto;
}

.tutorial h1 {
    font-size: 1.5rem;
    text-align: center;
}

.tutorial__bands {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tutorial__bands li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.8em 1em;
    border-radius: var(--radius-sm);
}

.swatch {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--prox-ring);
}

.swatch--near { background: var(--prox-near); }
.swatch--mid { background: var(--prox-mid); }
.swatch--far { background: var(--prox-far); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing {
    gap: 0.9rem;
}

.pricing__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-block-end: 0.4rem;
}

.pricing__head h1 {
    font-size: clamp(1.4rem, 5vmin, 2rem);
    margin: 0;
}

.pricing__lede {
    margin: 0 0 0.6rem;
    color: var(--ink-soft);
}

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem;
}

.plan--pro {
    border: 3px solid var(--sun);
    background: linear-gradient(180deg, var(--sun-soft) 0%, var(--surface) 40%);
}

.plan__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-deep);
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.plan__amount {
    font-size: clamp(1.9rem, 7vmin, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

/* "Free forever" is a phrase, not a figure; at the size above it dwarfs the price beside it. */
.plan__amount--text {
    font-size: clamp(1.25rem, 4.5vmin, 1.6rem);
    color: var(--ink-soft);
}

.plan__period {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.plan__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.97rem;
}

.plan__mark {
    flex: none;
    font-weight: 800;
    line-height: 1.4;
}

.plan__mark--yes {
    color: var(--mint-deep);
}

.plan__mark--no {
    color: var(--ink-faint);
}

.plan__cta {
    width: 100%;
    font-weight: 800;
}

.plan__current {
    text-align: center;
    font-weight: 800;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 0.6em 1em;
}

/* The comparison table is the same information in a form that is easier to scan
   on a wide screen; it scrolls rather than squeezing on a narrow one. */
.compare {
    overflow-x: auto;
}

.compare table {
    width: 100%;
    border-collapse: collapse;
    /* Wide enough that a feature name stays on one or two lines; the wrapper scrolls when the
       screen is narrower than that, which reads better than a four-word column. */
    min-width: 26rem;
}

.compare th,
.compare td {
    padding: 0.55em 0.7em;
    border-block-end: 1px solid var(--border);
    text-align: start;
    font-size: 0.95rem;
}

.compare thead th {
    color: var(--brand-deep);
    font-weight: 800;
    border-block-end: 2px solid var(--border-strong);
}

.compare td:not(:first-child),
.compare thead th:not(:first-child) {
    text-align: center;
    width: 6.5rem;
}

.compare tbody tr:nth-child(even) {
    background: var(--brand-tint);
}

.sandbox-note {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 2px dashed var(--border-strong);
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* What a buyer is agreeing to, under the plans rather than only in the footer. */
.plan__legal {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.6;
}

.plan__legal p {
    margin: 0;
}

/* The three documents on a line of their own: a link buried mid-sentence at this size is hard to
   hit on a phone and easy to miss on a desktop. */
.plan__legal .plan__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin-block-start: 0.3rem;
}

.plan__legal a {
    color: var(--brand-deep);
    white-space: nowrap;
}

/* ==========================================================================
   Legal pages — terms, privacy, refunds, contact

   These are read rather than played with, so they break the app's rules on
   purpose: a narrower measure than the game screens, prose at a comfortable
   size and line height, and no cards. Everything else on the site is a
   surface with controls on it; this is a document.
   ========================================================================== */

.legal {
    gap: 0.4rem;
    /* ~70 characters a line at the body size, which is where prose stops being
       tiring. The 46rem the game screens use is too wide to read a paragraph in. */
    max-width: 42rem;
    padding-block-end: 1rem;
}

.legal__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-block-end: 0.4rem;
}

.legal__head h1 {
    font-size: clamp(1.4rem, 5vmin, 2rem);
    margin: 0;
}

.legal__lede {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.legal__updated {
    margin: 0 0 0.6rem;
    color: var(--ink-faint);
    font-size: 0.88rem;
}

.legal__section {
    margin-block-end: 1.4rem;
}

.legal__section h2 {
    font-size: 1.15rem;
    color: var(--brand-deep);
    margin-block-end: 0.45rem;
}

.legal__section p {
    margin: 0 0 0.7rem;
    line-height: 1.65;
}

.legal__section ul {
    margin: 0 0 0.7rem;
    padding-inline-start: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.legal__section li {
    line-height: 1.6;
}

.legal a {
    color: var(--brand-deep);
    text-underline-offset: 2px;
}

/* The other three documents, at the foot of each one: a reader who wants the refund
   policy usually arrives at the terms first. */
.legal__more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding-block-start: 0.9rem;
    border-block-start: 2px dashed var(--border);
    font-size: 0.95rem;
}

/* ==========================================================================
   Ad measurement

   The question a visitor from Facebook or Instagram is asked, fixed to the
   foot of the screen above the music button, and the switch on the privacy
   page that takes a yes back. The two answers share one style on purpose:
   neither is the one the eye is steered to.
   ========================================================================== */

.ad-consent {
    position: fixed;
    inset-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
    inset-block-end: calc(max(10px, env(safe-area-inset-bottom)) + 3.4rem);
    z-index: 30;
    max-width: 36rem;
    margin-inline: auto;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 2px solid var(--border-strong);
    box-shadow: var(--shadow-lift);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.45;
    animation: pop-in 0.25s ease-out;
}

.ad-consent__text {
    margin: 0;
}

.ad-consent__text a {
    color: var(--brand-deep);
    font-weight: 600;
}

.ad-consent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-block-start: 0.7rem;
}

.ad-consent__actions .ghost {
    flex: 1 1 8rem;
}

.ad-setting {
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
    /* Pushed to the bottom of the shell on a short page, and simply last on a long one. */
    margin-block-start: auto;
    padding-block-start: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1rem;
    padding-block-start: 0.9rem;
    border-block-start: 2px dashed var(--border-strong);
    width: 100%;
}

.site-footer a {
    color: var(--brand-deep);
    text-decoration: none;
    font-weight: 600;
    /* A comfortable target on a phone without spacing the row out on a desktop. */
    padding: 0.25em 0;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    text-decoration: underline;
}

.site-footer__note {
    margin: 0;
}

.site-footer__version {
    margin: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   No JavaScript

   The <noscript> block in index.html: the site's content in plain HTML, for a
   reader or a crawler that never runs the app. It is styled rather than left
   bare because the people who see it are the people least able to guess what
   the page was meant to look like.
   ========================================================================== */

.noscript {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.2rem;
    line-height: 1.65;
}

.noscript h1 {
    color: var(--brand-deep);
    font-size: clamp(1.5rem, 6vmin, 2.2rem);
}

.noscript a {
    color: var(--brand-deep);
}

.noscript ul {
    padding-inline-start: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}