/* Scratch & Win. Mobile-first like the other games; the card is the focus and everything
   else is sized around it.

   The screen follows the partner's theme - ground, ink, the accent on the buttons. The
   card itself does not: its foil and its border are the thing being drawn, and a scratch
   panel that turned white under a light theme would read as broken rather than branded.
   Deliberate, not missed. */

.scratch {
    /* The win celebration is positioned against this - see WinCelebration.razor. */
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 14px;
    /* No padding of its own any more - .gstage-game (see gamestage.css) now draws the
       same bordered card every game sits in, with its own inset built in. */
    /* Same reason as .slots: in the app this is a flex item of AppChrome's column, where an
       auto cross-axis margin would cancel align-self:stretch and make the width depend on
       content - which made the game resize while it animated. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--wx-ink, #fff);
}

.scratch-loading,
.scratch-unavailable {
    padding: 24px 16px;
    text-align: center;
    color: var(--wx-muted-dim, #9a9a9a);
}

/* The title bar (.gh, .gh h2, .gh-meta) is shared with every other game now - see
   gamestage.css. This used to be its own large, centred header; nothing else on the
   games screen looked like it, which is why the title read as out of step with the
   rest whenever you switched games. */

/* Free cards, token balance and cost moved to the shared GameStatusBar every game
   opens with now (see gamestage.css's .gsb) - this used to be its own row here. */

/* ---------- what the game is saying ---------- */

/* The red off the playing cards, which is the one colour this game already owns that is
   not the accent. Declared here so the message card and the card faces cannot drift apart
   - it means the same thing in both places. */
:root {
    --scratch-red: #e2564d;

    /* The mark's own teal. The gear on the board and both faces of the coin are the one
       colour, because they are the one logo. */
    --wx-mark: #29b6c8;
}


/* Always on screen, fixed height - the same card Drop Zone puts under its own status bar
   (see .dz-message) and for the same reason: a line that only appears once something has
   happened shifts everything under it the first time it does, and on this screen that is
   the card itself. */
/* .scratch-message: the box itself is .game-message in gamestage.css - one rule for every
   game. Only this game's own variants live here. */

/* .scratch-message.is-lost is .game-message.is-lost - see gamestage.css. */

/* ---------- picking the game ---------- */

/* Which of the six the right-hand half will be.

   A rack of cards rather than a row of pills. Each one carries the game's own picture -
   the actual symbol the board draws, not a stand-in - so the rack shows what the games ARE
   before a word of any of them is read, and picking one is choosing a card off a table
   rather than setting an option. Locked while a card is in play: the board was built at
   the deal.

   auto-fit rather than a fixed count, so six sit in one line where there is room and wrap
   to three or two where there is not, without a breakpoint per shape of phone. */
.scratch-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.scratch-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--wx-line, #2c2c2c);
    background: var(--wx-surface-2, #151515);
    color: var(--wx-muted, #9a9a9a);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* A member design to a non-member: dimmed, with the lock saying why. Still a button,
   because a tap answers with the pitch rather than doing nothing. */
.scratch-pick.is-locked { opacity: 0.6; border-style: dashed; }
.scratch-pick-lock {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wx-signal, #d4af37);
}
.scratch-pick-lock .fa-lock { font-size: 0.7em; margin-right: 2px; }

/* The picture stands for the game, so it is the biggest thing on the card. */
.scratch-pick-art {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
}

.scratch-pick .sb-ico {
    width: 100%;
    max-width: 34px;
}

.scratch-pick .sb-card-rank { font-size: 1.05rem; }
.scratch-pick .sb-card-suit { font-size: 0.8rem; }

/* On the picker the card sits on a theme surface, not on the fixed-dark scratch card, so
   a black suit takes the theme's ink here - the card's own --sc-ink is for the card. */
.scratch-pick .sb-card.is-black { color: var(--wx-ink, #fff); }

.scratch-pick-name {
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.scratch-pick.is-on {
    border-color: var(--wx-signal, #e5841e);
    background: color-mix(in srgb, var(--wx-signal, #e5841e) 12%, transparent);
    color: var(--wx-signal, #e5841e);
}

@media (hover: hover) {
    .scratch-pick:not(:disabled):not(.is-on):hover {
        border-color: var(--wx-muted, #9a9a9a);
        color: var(--wx-ink, #fff);
    }
}

.scratch-pick:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---------- the card ---------- */

/* A rectangle in two halves: the prize on the left, the game on the right, each under
   its own covering.

   It used to be one nearly-square panel with one covering over the whole of it. Two
   halves is what makes the choice of where to start scratching a choice at all, and
   landscape is what lets the right-hand half hold a three-by-three board without the
   card becoming a column the length of the screen.

   The game side is the wider of the two - it has a grid in it, where the other has a
   number. */
.scratch-card {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 10px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 14px;
    background: linear-gradient(to bottom, #1f1f1f, #2e2e2e);
    border: 2px solid #3a3a3a;

    /* The card's own ink. Its surface is this dark gradient on every theme - it is a
       scratch card, not a panel - so the text on it cannot follow the theme's ink: on a
       light theme that ink is near-black, and the black-suit playing cards vanished into
       the card they were printed on. Everything inside reads these instead. */
    --sc-ink: #f6f6f2;
    --sc-muted: #b4b4b0;
    --sc-muted-dim: #9a9a9a;
}

.scratch-half {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.scratch-half-title {
    margin: 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-muted-dim, #9a9a9a);

    /* A picked game with a long name must not push the card taller than it is wide. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* What the covering covers. Everything inside is positioned against this, canvas
   included, so the two halves scratch independently of each other. */
.scratch-face {
    position: relative;
    flex: 1;
    min-height: 164px;
    border-radius: 10px;
    overflow: hidden;
    background: #141414;
    border: 1px solid #333;
}

/* ---------- the prize half ---------- */

.scratch-prize {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

/* The figure is the whole of this half now - the tier's name came off it, because on a
   card where the left is what was AT STAKE rather than what was won, "Big Win" over the
   number read as a result. So it takes the room the name used to have. */
/* The size here is a FLOOR, not the design. scratch.js measures the half and the figure
   and sets the real size on the element - see fitFigure.

   The figure's size depends on two things a stylesheet cannot see at once: how wide this
   half happens to be, and how wide these particular two-to-five characters are. Sizing it
   in vw answered neither - vw is the WINDOW, and this half is a fraction of a card that
   can be far narrower, so "500K" cleared a full-width phone by a single pixel and was
   clipped in the phone preview panel, where the card is small but the window is not.

   Container query units answer the first properly and were what replaced vw. They are not
   what is here because they only ever half-answer: 100cqw gives the half's width, but
   turning that into a font size still needs the string's width in ems, which means
   assuming a typeface - and a partner theme is free to change it. Measuring the text is
   the only way to know, and only the browser can do that.

   So the numbers below are chosen to be safe at the narrowest half the card ever has
   (~110px), which makes them small - deliberately. If the script never runs the figure
   is undersized rather than clipped, and that is the right way round. */
.scratch-prize-points {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wx-good, #3ec46d);

    /* One line, whatever the script does or does not do to the size. */
    white-space: nowrap;
}

.scratch-prize-points.is-2ch { font-size: 3.4rem; }
.scratch-prize-points.is-3ch { font-size: 2.6rem; }

.scratch-prize-unit {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sc-muted-dim, #9a9a9a);
}

.scratch-prize-none {
    color: var(--sc-muted-dim, #9a9a9a);
    font-size: clamp(0.95rem, 4vw, 1.3rem);
    font-weight: 700;
}

/* ---------- the game half ---------- */

.scratch-board {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;
}

/* "You Called"/"You Got", "You"/"Opponent" - on the same track widths as the cells
   under them, so each heading sits over its own column. */
.sb-heads {
    display: grid;
    grid-template-columns: repeat(var(--sb-cols, 2), minmax(0, 1fr));
    gap: 6px;

    /* Reserved whether or not there is anything in it. The one game with no column names
       still gives up the space, so the three rows sit at the same height on every board
       and the guide lines on the covering never move between games. */
    min-height: 13px;
}

.sb-heads span {
    text-align: center;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-muted-dim, #9a9a9a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--sb-cols, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
}

.sb-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--sc-ink, #fff);
}

/* Every drawn symbol - gear, cross, coin, hand, die. They take their colour from the cell
   (currentColor), which is what lets a winning row light its pictures up without a second
   copy of the artwork. */
.sb-ico {
    display: block;
    width: 72%;
    max-width: 46px;
    aspect-ratio: 1;
    height: auto;
}

/* The gear is the mark's own teal - a nought that is simply our own logo, at the size a
   cell gives it. Nothing on the board changes colour to announce a win; working the board
   out is the game. */
.sb-cell .sb-ico.is-gear { color: var(--wx-mark, #29b6c8); }

/* ---- the coin ----
   The rim is the cell's colour so it sits with everything else on the board; what is
   struck on it is the mark's, so heads and tails read as two faces of the same coin. */
.sb-coin {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Heads: the artwork itself. Addressed relative to this stylesheet, the way the card
   watermark in Higher or Lower is (see .hl-mark) - the app and the website serve it from
   different origins and neither should have to say where it lives.
   
   The -clean cut of it, not the one the avatars use. That one was cropped out of the full
   mark and carries the gear's teal behind the head, which on a coin reads as a coloured
   halo round the hair rather than as part of it. */
.sb-coin-face {
    /* Smaller than the gear's box on purpose. The head is a solid shape and the gear is a
       ring, and a solid shape at the same size reads bigger than an outline does - matched
       by their boxes, the head looked like the heavier of the two faces. */
    width: 64%;
    height: 64%;
    background: center / contain no-repeat url("../images/winwrx-head-clean.png");
}

.sb-coin-art {
    display: block;
    width: 76%;
    height: 76%;
}

.sb-cell .sb-ico.is-cross { color: var(--sc-muted, #9a9a9a); }

/* A card face: rank over suit, in the suit's own colour. */
.sb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1;
    font-weight: 800;
}

.sb-card-rank { font-size: clamp(0.85rem, 3.8vw, 1.3rem); }
.sb-card-suit { font-size: clamp(0.7rem, 3vw, 1.05rem); }

.sb-card.is-red { color: var(--scratch-red, #e2564d); }
.sb-card.is-black { color: var(--sc-ink, #fff); }

/* What winning the picked game takes. Under the card, always on screen - so it can be
   read before the board it describes has been uncovered. */
.scratch-rule {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--wx-muted-dim, #9a9a9a);
}

.scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* touch-action:none is what makes dragging scratch instead of scrolling the page - the
       browser otherwise claims the gesture for panning before any pointermove arrives. */
    touch-action: none;
    cursor: crosshair;
}

/* Between cards the covering is inert - and not just to look at. Scratching a card
   nobody has bought is odd on its own, and worse than odd: it wears away a covering with
   nothing underneath it, so the next real card is dealt behind a panel somebody has
   already half removed. pointer-events is what actually stops the drag; the cursor and the
   fade are what say so before anyone tries. */
.scratch-canvas.is-idle {
    pointer-events: none;
    cursor: default;
    opacity: 0.75;
}

/* The play button is .gplay (gamestage.css); the square shape every game uses now
   started here. Only the mid-card ring below is scratch's own. */

/* Mid-card: the one thing left to do is press this. Wider letters and a ring around it,
   so a card waiting to be called never looks like a card waiting for more scratching. */
/* :not(:disabled) - a card nobody has touched yet is not waiting to be called. */
.scratch-play.is-done:not(:disabled) {
    letter-spacing: 0.16em;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wx-signal, #e5841e) 28%, transparent);
}

/* ---------- prize list ---------- */

/* This used to be its own card - a grey gradient box, grey bordered rows, a centred
   title - drawn before Scratch moved its rules panel into .gi. That move only changed
   the wrapper; these rules stayed, and being lower-specificity than .gi's own
   .scratch-prizes* versions in gamestage.css meant most of them lost quietly rather
   than being removed - each row still carried this file's margin, border and grey
   background UNDER the flush hairline row gamestage.css was drawing, and the title
   stayed centred because gamestage.css never told it not to be. Two versions of the
   same table, neither fully in charge, is exactly what "doesn't look like the others"
   looks like. Deleted outright - .gi's copy is the whole design now. */

@media (min-width: 820px) {
    .scratch-play {
        max-width: 620px;
        margin: 0 auto;
    }

    /* More room, so the halves get taller rather than the card getting wider - it is
       meant to read as a card, not as a banner. */
    .scratch-face { min-height: 200px; }
}