/* ============================================================
   Score7 — product tokens
   The TechXYZ design system covers the brand: azure, ink, slate.
   These are the values that come from the Flip 7 material itself —
   the table, the cream card stock, the printed inks — and belong
   to this product rather than to the brand.
   ============================================================ */

:root {
    /* ---- The table ------------------------------------------ */
    --board-teal: linear-gradient(160deg, #1BB3B6 0%, #0B888F 100%);
    --entry-teal: radial-gradient(110% 110% at 0% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, #18B0B3 0%, #0C8E95 100%);
    --banner-teal: linear-gradient(160deg, #0A6E75 0%, #064B51 100%);
    --board-rule: rgba(251, 244, 225, .32);
    --teal-cream-edge: #CFE6E6;

    /* ---- The card stock ------------------------------------- */
    --cream: #FBF4E1;
    --cream-panel: #FDFAF0;
    --card-inner-rule: #E9C98A;

    /* ---- The printed ink ------------------------------------ */
    --game-ink: #2B2A76;
    --game-ink-soft: #5F5E8C;
    --game-ink-72: rgba(43, 42, 118, .72);
    --game-ink-22: rgba(43, 42, 118, .22);

    /* ---- The card colours ----------------------------------- */
    --flip7-yellow: #F7DE63;
    --modifier-orange: #F6B24A;
    /* The language pill: a quieter azure than the accent, so the bar keeps its hierarchy. */
    --lang-pill-bg: #ECF8FF;
    --lang-pill-hover: #DCF0FC;
    --lang-pill-text: #066BA1;
    --lang-rule: #EAF0F4;

    --freeze-blue: #8FD6E8;
    --second-chance-red: #EE6B5B;

    /* ---- Status --------------------------------------------- */
    --busted-bg: #FCEDEC;
    --busted-border: #F7D2CF;
    --busted-text: #9E2922;
    --stayed-bg: #E7F7F0;
    --stayed-text: #0B6E4B;
    --near-target-bg: #FDF3E2;
    --near-target-text: #9A5E08;
    --dealer-bg: #ECF8FF;
    --dealer-border: #CFEEFF;
    --dealer-text: #066BA1;

    /* ---- Number colours, measured off the real cards --------
       Sampled from a photograph of the deck: the dominant colour of each figure's body, the
       handoff's table having turned out to be wrong on most of the thirteen. The figures are
       drawn as outlined glyphs, so the colour lives in the stroke and not in the interior,
       which is white — reading them by eye is exactly how you end up calling the 7 blue.

       Two families, because a card face and the small chrome do not carry a colour the same
       way.

       --number-N is the measured ink. It is the numeral fill on a card face, where the dark
       keyline around the figure is what makes it legible, so the fill is free to sit at the
       colour the card is really printed in. See GameCard.razor.css.

       --number-N-ink is that same hue and saturation darkened until it clears 3.2:1 on cream,
       for every place the numeral is drawn flat and is too small to keyline: the pad tiles,
       the toast, the undo list, the scoreboard mini-hand.

       The real 0 is printed in rainbow segments. Reproducing that would cost more than it is
       worth, so the face is white and the keyline draws it — which is what the eye takes from
       the real card anyway. Its flat companion is a neutral grey.

       This supersedes the 4/7/9 darkening lot 12 recorded.

       ContrastConventionTests holds both families: the keyline against every fill, and every
       -ink against the cream. */
    --number-0: #FFFFFF;
    --number-1: #B9AEA3;
    --number-2: #DBDF58;
    --number-3: #DC5B6F;
    --number-4: #6DBBBB;
    --number-5: #61B05A;
    --number-6: #AA599F;
    --number-7: #C7877F;
    --number-8: #B8D289;
    --number-9: #E89742;
    --number-10: #D33934;
    --number-11: #85A1D1;
    --number-12: #94877C;

    --number-0-ink: #888888;
    --number-1-ink: #968676;
    --number-2-ink: #8A8E1B;
    --number-3-ink: #DC5B6F;
    --number-4-ink: #459495;
    --number-5-ink: #4F9849;
    --number-6-ink: #AA599F;
    --number-7-ink: #BF756C;
    --number-8-ink: #739338;
    --number-9-ink: #CA7319;
    --number-10-ink: #D33934;
    --number-11-ink: #6689C5;
    --number-12-ink: #94867B;

    /* ---- The signature of the material ----------------------
       A hard offset with no blur. This is what makes a rectangle
       read as a printed card rather than as a floating panel, and
       it is never to be swapped for a soft shadow. */
    --card-lift: 0 3px 0 rgba(43, 42, 118, .35);
    --card-lift-sm: 0 3px 0 rgba(43, 42, 118, .3);
    --panel-lift: 0 4px 0 var(--game-ink-22);
    --panel-lift-lg: 0 6px 0 var(--game-ink-22);

    /* ---- Screen furniture ----------------------------------- */
    --screen-card-shadow: 0 12px 28px rgba(12, 34, 54, .10), 0 4px 10px rgba(12, 34, 54, .06);
    --overlay-scrim: rgba(12, 34, 54, .5);

    /* ---- Control heights, from the handoff ------------------ */
    --control-h-sm: 36px;
    --control-h-md: 44px;
    --control-h-lg: 48px;

    /* ---- What the device keeps for itself -------------------- */
    /* The notch, the status bar and the home indicator, named once so the screens can add
       them to a padding rather than reason about them. The 0px fallbacks are what make
       every calc below an identity on a desktop, an Android or an older iPhone: nothing
       that uses these needs a media query to guard it. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}


/* ============================================================
   The entry surface, sized to the screen it is actually on.

   The handoff drew three frames and stopped: 1180 and up, 1024
   to 1180, and under 1024. A tablet that is wide *and tall* —
   an iPad Pro in landscape is 1366 x 1024 — matches none of
   them. It falls past the phone rules, past P05 (which asks for
   a short screen), and lands on the desktop ones, whose pad and
   scoreboard are fixed pixel columns. Everything left over goes
   to the player column, which holds an avatar, a name and two
   rows of cards; the rest of it is empty table.

   So the sizes below are a dial rather than a constant. Nothing
   downstream reasons about a screen size — it reads a token —
   and the three tiers that already existed keep their own
   literal values, because they were measured against a real
   device and are not this problem.

   The defaults are the handoff's own numbers, unchanged: at
   1180 x 730, the frame E04 is compared against, every one of
   these resolves to exactly what it resolved to before.
   ============================================================ */

:root {
    --pad-tile-h: var(--control-h-md);
    --pad-tile-text: 19px;
    --pad-gap: 7px;
    --modifier-tile-h: 38px;
    --modifier-tile-text: 15px;
    --action-bar-h: 36px;
    --action-bar-text: 11px;
    --action-hint-text: 9.5px;
    --hand-card-h: 96px;
    --hand-card-scale: 1;
    --hand-gap: 8px;
    --stand-down-h: 50px;
    --stand-down-text: 13.5px;

    /* The bubble that says back what the pad heard. Sized for a phone when it was written,
       and never resized for anything else — on a tablet at arm's length across a table it is
       the one thing on screen nobody can read. */
    --toast-card-w: 30px;
    --toast-card-h: 40px;
    --toast-card-text: 16px;
    --toast-text: 12.5px;
    --toast-max-w: 420px;
    --spotlight-avatar: 52px;
    --spotlight-initial: 21px;
    --spotlight-name: 30px;
    --spotlight-meta: 12px;
    --spotlight-figure: 52px;

    /* The two columns the desktop layout pins to the pixel. */
    --pad-column: 248px;
    --board-column: 316px;
}

/* ---- Enough room: the tier that was missing ----------------
   Two conditions, because "has the room" is not one shape.

   The first is tablets and anything tall, written as the exact
   complement of P05's `max-height: 850px` so the two can never
   both apply and no device falls between them.

   The second is laptops and monitors. A 1440 x 800 laptop has
   the surplus and the same too-small controls, and it was
   missing the tier on height alone. It can ask for a lower
   floor safely because P05 requires a coarse pointer, and a
   fine one cannot match both.

   1180 x 730 matches neither — too short for the first, too
   narrow for the second. That is the whole point of the
   numbers: it is the frame E04 is compared against, and it
   does not move. */
@media (min-width: 1024px) and (min-height: 851px),
       (min-width: 1280px) and (min-height: 700px) and (pointer: fine) {
    :root {
        --pad-tile-h: 56px;
        --pad-tile-text: 23px;
        --pad-gap: 9px;
        --modifier-tile-h: 48px;
        --modifier-tile-text: 18px;
        --action-bar-h: 48px;
        --action-bar-text: 13px;
        --action-hint-text: 11px;
        --hand-card-h: 120px;
    --hand-card-scale: 1.25;
        --hand-gap: 10px;
        --stand-down-h: 60px;
        --stand-down-text: 15.5px;

        --toast-card-w: 42px;
        --toast-card-h: 56px;
        --toast-card-text: 22px;
        --toast-text: 15.5px;
        --toast-max-w: 560px;
        --spotlight-avatar: 66px;
        --spotlight-initial: 27px;
        --spotlight-name: 38px;
        --spotlight-meta: 14px;
        --spotlight-figure: 66px;

        --pad-column: 300px;
        --board-column: 360px;
    }
}

/* One more step for a genuinely large screen. Past this the room stops being surplus and
   starts being distance: a monitor at 1600 is looked at from further away than a tablet
   flat on a table. */
@media (min-width: 1600px) and (min-height: 851px),
       (min-width: 1600px) and (min-height: 700px) and (pointer: fine) {
    :root {
        --pad-tile-h: 64px;
        --pad-tile-text: 26px;
        --pad-gap: 10px;
        --modifier-tile-h: 54px;
        --modifier-tile-text: 20px;
        --action-bar-h: 54px;
        --action-bar-text: 14px;
        --action-hint-text: 11.5px;
        --hand-card-h: 136px;
    --hand-card-scale: 1.4;
        --hand-gap: 12px;
        --stand-down-h: 66px;
        --stand-down-text: 17px;

        --toast-card-w: 50px;
        --toast-card-h: 66px;
        --toast-card-text: 26px;
        --toast-text: 17px;
        --toast-max-w: 640px;
        --spotlight-avatar: 76px;
        --spotlight-initial: 31px;
        --spotlight-name: 44px;
        --spotlight-meta: 15px;
        --spotlight-figure: 78px;

        --pad-column: 340px;
        --board-column: 400px;
    }
}