/* Scratch cards' own look, on the game template (static/game.css styles the shell): one canvas stage (static/scratch.js
   draws the rack of nine card designs, the ticket under its foil, the pay row and the coin in your hand). The title in
   the header becomes the design's lockup (its emblem and name). A finger scratches instead of scrolling the page. */

.sc-stage { position: relative; flex: 1; min-height: 360px; }
.sc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.sc-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); border-radius: 14px; }

/* a big win: the number sits over the rack (scratch.js bigAt: the stage dims only a little); from 100x it is outlined */
.gm[data-game="scratch"] .gm-big.t4 b { color: transparent; -webkit-text-stroke: 2px var(--win); }

@media (max-width: 899px) {
  .gm[data-game="scratch"] .gm-play { min-height: 0; }
  .sc-stage { flex: none; height: 600px; min-height: 0; }
}
@media (max-width: 380px) { .sc-stage { height: 560px; } }
@media (max-width: 420px) { .gm[data-game="scratch"] .gm-title canvas { display: none; } }  /* the design's name gets the room */