* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Not felt at all. Roulette and Craps are green tables and this is a
     MACHINE — an indigo cabinet — because it is the one product in the casino
     three that is not a table game, and the shelf is easier to read when the
     colour carries that. */
  background: linear-gradient(180deg, #171438 0%, #1e1b4b 55%, #171438 100%);
  color: #eef2ff; user-select: none; -webkit-user-select: none;
  touch-action: none; overflow: hidden;
}
#app { height: 100%; display: flex; flex-direction: column; max-width: min(100%, 860px); margin: 0 auto; }

#hdr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
#hdr .pill { background: rgba(0,0,0,0.22); border: 2px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 15px; min-width: 44px; min-height: 44px; display: flex; align-items: center; cursor: pointer; justify-content: center; color: inherit; font-family: inherit; }
#hdrHome { border: none; background: #a78bfa; color: #1e1b4b; font-size: 18px; }
#hdrStatus { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c7d2fe; }

.scr { flex: 1; display: none; flex-direction: column; overflow-y: auto; padding: 6px 14px 18px; }
/* The table gets the full width: side padding comes straight off the card size. */
#scr-play { padding: 6px 4px 6px; }
.scr.on { display: flex; }

#scr-menu { align-items: center; text-align: center; gap: 12px; justify-content: center; }
#scr-menu h1 { font-size: clamp(32px, 9vw, 44px); color: #ffffff; }
#scr-menu .sub { color: #c7d2fe; font-weight: 600; margin-bottom: 4px; }
#tierRow { display: flex; gap: 8px; width: 100%; }
.tierCard { flex: 1; background: rgba(0,0,0,0.2); border: 3px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 10px 4px; font-weight: 800; font-size: 14px; line-height: 1.35; cursor: pointer; color: #eef2ff; font-family: inherit; }
.tierCard small { display: block; color: #c7d2fe; font-weight: 700; font-size: 11.5px; }
.tierCard .te { font-size: 26px; display: block; }
.tierCard.sel { border-color: #a78bfa; background: rgba(74,222,128,0.16); }

/* Settings, behind a disclosure — the same shape as every other product's. */
#custom { width: 100%; margin: 2px 0; text-align: left; background: rgba(0,0,0,0.2); border: 3px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 6px 12px 10px; }
#custom > summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 16px; padding: 10px 2px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
#custom > summary::-webkit-details-marker { display: none; }
#custom > summary::before { content: "▸"; transition: transform .12s; }
#custom[open] > summary::before { transform: rotate(90deg); }
/* WRAPS (R-G26.9). A settings row is [label][segmented control], and the
   control's width is decided by its option labels at runtime. Measured at
   320px this row ran 3px past the screen edge, so the last option was
   cut in half — a control you cannot see or reliably hit. Wrapping drops
   the control onto its own line ONLY when it has to; at 375px and wider
   nothing moves. */
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 7px 0; }
.field .lbl { flex: 0 0 104px; font-size: 13.5px; font-weight: 800; color: #c7d2fe; }
.seg { flex: 1; display: flex; gap: 6px; }
.seg button { flex: 1; min-height: 44px; border-radius: 11px; border: 2px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.24); color: #eef2ff; font-family: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; padding: 4px 2px; }
.seg button.on { background: #a78bfa; border-color: #7c3aed; color: #1e1b4b; min-height: 44px;}
.blurb { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.45; color: #c7d2fe; }

button.big { width: 100%; border-radius: 16px; min-height: 56px; font-size: 19px; font-weight: 800; background: rgba(0,0,0,0.2); color: #eef2ff; border: 3px solid rgba(255,255,255,0.14); cursor: pointer; font-family: inherit; }
button.big:active { transform: translateY(2px); }
button.big.primary { background: #a78bfa; border-color: #7c3aed; color: #1e1b4b; min-height: 44px;}

/* --- play ----------------------------------------------------------------- */
/* THE SCOREBOARD ROW (R-C19). Fixed height, and nothing in it changes width by
   more than a digit, so a message arriving cannot shove the numbers sideways. */
/* FIVE CHIPS, NOT THREE, AND THEY HAVE TO WRAP. R14 puts your percentage and
   the machine's in this row, and on a 320px phone five chips do not fit on one
   line — without the wrap the last two simply go off the right-hand edge, which
   is where the two most important numbers in the product live. Two rows of
   chips is fine; a fixed min-height keeps the canvas from resizing under them
   (R-C19). */
#playTop { display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px;
           min-height: 58px; align-items: flex-start; align-content: flex-start;
           justify-content: flex-start; padding: 2px 2px 3px; font-weight: 800; }
#playTop .gap { flex: 1 1 auto; min-width: 0; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
        padding: 0 8px; border-radius: 999px; background: rgba(0,0,0,0.26);
        border: 2px solid rgba(255,255,255,0.14); line-height: 1; }
.chip i { font-style: normal; font-size: 10px; font-weight: 800; opacity: 0.72; letter-spacing: 0.02em; }
.chip b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

#msgLine { flex: none; min-height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 4px 3px; }
#msgOut { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

#stageWrap { flex: 1; position: relative; min-height: 0; }
canvas#stage { display: block; touch-action: none; }

/* The action row is ALWAYS here and always the same height (R-C19): three
   controls that are sometimes disabled, never three controls that come and go.
   A row that appears re-fits the canvas and moves the whole board. */
#actRow { flex: none; display: flex; gap: 8px; justify-content: center;
          align-items: center; min-height: 60px;
          padding: 8px 6px max(4px, env(safe-area-inset-bottom)); }
.act { flex: 1 1 0; min-height: 46px; border-radius: 13px; font-family: inherit;
       font-weight: 800; font-size: 15px; cursor: pointer; color: #eef2ff;
       background: rgba(0,0,0,0.24); border: 2px solid rgba(255,255,255,0.16); }
.act:active { transform: translateY(2px); }
.act.primary { background: #a78bfa; border-color: #7c3aed; color: #0f0d2b; }
.act:disabled { opacity: 0.42; cursor: default; transform: none; }

/* NO HISTORY STRIP, AND THAT IS A RULE RATHER THAN AN OMISSION. Roulette and
   Craps show the last results as a labelled record; a slot machine does not
   get one at all (R27). There is nothing to read in a list of past spins, and
   a machine that offers one is inviting exactly the pattern-hunting the rest
   of this product is built to refuse. The chart shows the RUNNING TOTAL, which
   is the only thing about the past that means anything.

   Copied stylesheets carry the shape of the game they came from: these two
   rules came across from Craps and `check-ids` caught them pointing at ids
   that are not on the page. */
.ovl { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; background: rgba(15,13,43,0.6); border-radius: 12px; padding: 16px; overflow-y: auto; }
.ovl.on { display: flex; }
/* The overlay REPORTS ON THE TABLE, so it must not hide the table: the scrim is
   a dim and the words sit on a panel of their own. */
.ovlCard { text-align: center; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px;
           background: rgba(28,25,68,0.97); border: 2px solid rgba(255,255,255,0.16);
           border-radius: 18px; padding: 16px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); margin: auto;}
#ovlTitle { font-size: 26px; font-weight: 800; color: #ffffff; }
#ovlSub { color: #c7d2fe; font-weight: 700; min-height: 22px; line-height: 1.45;
          display: flex; flex-direction: column; gap: 5px; }

/* THE RESULT ROWS ("a result must carry its evidence"). One row per player:
   what they said, what they got, what it was worth. Same class names as the
   other card games, because it is the same idea and a second vocabulary for it
   would drift. */
.sdRow { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 10px;
         background: rgba(255,255,255,0.05); border: 2px solid transparent; text-align: left; }
.sdRow.you { background: rgba(255,255,255,0.10); }
.sdRow.win { border-color: #a78bfa; background: rgba(74,222,128,0.14); }
.sdWho { flex: 0 0 62px; font-size: 13px; font-weight: 800; }
.sdHand { flex: 1 1 auto; font-size: 12px; font-weight: 700; line-height: 1.25; color: #c7d2fe; }
.sdSwing { flex: 0 0 auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fca5a5; }
.sdSwing.up { color: #a78bfa; }

/* --- help ----------------------------------------------------------------- */
#scr-how .card { background: rgba(0,0,0,0.2); border: 3px solid rgba(255,255,255,0.13); border-radius: 16px; padding: 14px; margin-bottom: 10px; font-size: 15px; line-height: 1.55; font-weight: 600; }
#scr-how h2 { margin-bottom: 8px; color: #ffffff; }
#scr-how ul { margin: 6px 0 0 18px; }
#scr-how li { margin: 3px 0; }

/* The legend (R-L1). One column of swatches at a fixed width, so the eye can
   run the column instead of the prose. */
.legend { display: flex; flex-direction: column; gap: 7px; }
.lgRow { display: flex; align-items: center; gap: 10px; }
.lgArt { flex: none; width: 46px; display: flex; align-items: center; justify-content: center; }
.lgTxt { display: flex; flex-direction: column; min-width: 0; }
.lgTxt b { font-size: 14px; font-weight: 800; }
.lgTxt small { font-size: 12.5px; color: #c7d2fe; line-height: 1.3; font-weight: 600; }

#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #ffffff; color: #1e1b4b; font-weight: 800; padding: 9px 16px; border-radius: 999px; opacity: 0; transition: opacity 0.25s; pointer-events: none; z-index: 40; max-width: calc(100vw - 32px); text-align: center; }
#toast.on { opacity: 1; }

/* docs/offline-pwa.md R-C15 — the PAGE must never scroll. */
html, body { overflow: hidden; overscroll-behavior: none; }
.scr { overscroll-behavior: contain; }

/* A TURNED PHONE HAS NO SPARE ROWS (R-T6). Every line of chrome here is a line
   the felt does not get, and at 375px of window height the felt is what the
   game IS. The text shrinks and the reserved rows tighten; the 44px touch floor
   on the action row does not move, because that is the one thing that must
   never give way — the whole board is a tap target and the three controls
   under it are the only way to resolve one. */
@media (orientation: landscape) and (max-height: 500px) {
  #hdr { padding: 4px 10px; padding-top: max(4px, env(safe-area-inset-top)); }
  #playTop { padding: 0 4px 2px; font-size: 12px; min-height: 0; }
  #msgLine { min-height: 15px; padding: 0 4px 1px; }
  #msgOut { font-size: 11.5px; }
  #actRow { min-height: 52px; padding: 4px 6px max(2px, env(safe-area-inset-bottom)); }
}
/* #228: the landscape footer float lives in version.js, which owns the footer's
   layout for every product. Nothing product-specific is left here. */

/* The legend's own swatches. A reel square, a lit one, the two percentages
   the whole product is about, and the mark on a losing spin. Glyphs, because
   the art column is 46px and detail disappears at that size. */
.lgReel { display: inline-flex; align-items: center; justify-content: center;
          width: 32px; height: 32px; border-radius: 8px; background: #0f172a;
          border: 1px solid rgba(255,255,255,0.22); font-size: 17px; }
.lgWin { display: inline-block; width: 32px; height: 32px; border-radius: 8px;
         background: rgba(251,191,36,0.22); border: 2px solid #fbbf24; }
.lgPct { display: inline-flex; align-items: center; justify-content: center;
         padding: 3px 5px; border-radius: 7px; background: rgba(0,0,0,0.32);
         font-weight: 800; font-size: 11px; white-space: nowrap;
         border: 2px solid currentColor; }
.lgPct.good { color: #34d399; }
.lgPct.gold { color: #fbbf24; }
.lgVerdict { font-size: 24px; }
.lgVerdict.down { filter: none; }
.chip#stackChip { border-color: rgba(250,204,21,0.55); color: #fde68a; }

/* R14. THE TWO PERCENTAGES, SIDE BY SIDE IN THE SCOREBOARD ROW, and coloured
   to match the two lines on the chart below — gold is you, green is the
   machine. Nothing else on this screen uses either colour. */
.chip.you { border-color: rgba(251,191,36,0.5); color: #fcd34d; }
.chip.machine { border-color: rgba(52,211,153,0.5); color: #6ee7b7; }

/* R10. The verdict colours the message line, because "you lost" has to be
   readable at a glance and not just in the sentence. */
#msgOut.up { color: #6ee7b7; }
#msgOut.down { color: #fca5a5; }
#msgOut.push { color: #c7d2fe; }

/* The three-machine comparison in the help, generated from data.js. */
.prices { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.prRow { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
         font-weight: 700; padding: 4px 6px; border-radius: 7px;
         background: rgba(255,255,255,0.05); }
.prName { flex: 0 0 auto; }
.prPay { flex: 1 1 auto; min-width: 0; color: #c7d2fe; font-size: 11.5px;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prEdge { flex: 0 0 48px; text-align: right; font-weight: 800; color: #6ee7b7;
          font-variant-numeric: tabular-nums; }
.prNote { display: block; margin-top: 8px; font-size: 12px; line-height: 1.4;
          color: #c7d2fe; font-weight: 600; }

/* The link out to the printable card (#217). */
.cardLink { display: inline-block; margin-top: 8px; padding: 9px 14px;
            border-radius: 12px; background: rgba(167,139,250,0.16);
            border: 2px solid rgba(167,139,250,0.5); color: #eef2ff;
            font-weight: 800; font-size: 14px; text-decoration: none; }

/* R-B1 — the stake rack. Same name and same states as blackjack's, so a child
   who learns the chips in one game knows them in all four. 44px is the tap
   floor, not a suggestion. */
#betRow { flex: none; display: flex; gap: 6px; justify-content: center;
          padding: 0 10px 6px; flex-wrap: wrap; }
/* #250. The lines row, same band as the stake and directly under it, so the two
   things you can change between spins read as one group. It is EMPTY on the
   three-reel machine -- one line is not a choice -- and an empty flex row with
   no padding costs nothing, which is why the height is left to the contents
   rather than set here (R-C7). */
#lineRow { flex: none; display: flex; gap: 6px; justify-content: center;
           padding: 0 10px 6px; flex-wrap: wrap; }
/* The three-reel machine has one payline, so there is nothing to choose and
   paintLineRow leaves the row empty (#176). An empty row still costs its own
   padding, so collapse it: that machine gives up not one pixel of reel for a
   control it does not have. Measured at 320x568 -- reels 202px with the row,
   252px without. */
#lineRow:empty { display: none; }
.chipBtn { min-width: 52px; min-height: 44px; border-radius: 12px;
           font-family: inherit; font-weight: 800; font-size: 15px;
           cursor: pointer; color: #fffbeb; background: rgba(0,0,0,0.24);
           border: 2px solid rgba(255,255,255,0.16); }
.chipBtn.sel { background: #fcd34d; border-color: #d97706; color: #052e1a; }
.chipBtn:disabled { opacity: 0.4; cursor: default; }