/* augh yahh! -- the Dragon Tiger table (round six, 2026-08-19).
   A gold coin on Home, Chat and Live, and a panel that slides up over the
   lower part of the screen while the room keeps going above it. The look is
   Martin's screenshot of a live-stream app's table: red flames and a dragon
   on the left, blue flames and a tiger on the right, two card backs, a gold
   clock, a result row, three ornate betting boxes, a chip tray with Repeat.
   Loaded after style.css on the three pages. The panel follows the
   screenshot's look; everything around it keeps the house style.
   Art: the pieces are CSS stand-ins until Martin's picture is cut up into
   /game-art/ (see the wiki page); each piece reads its image off one custom
   property, so the swap is a few lines here and nothing in the script. */

/* ==========================================================================
   THE ART EXEMPTION (written down in round seventeen; the round-thirteen
   audit said this block was missing and 155 colours could not be judged
   until it existed).

   Everything painted with a --g- token, the .g-chip / .g-tok chip colours
   and the card backs is the TABLE'S ART: sampled off Martin's own pictures
   (game-art/, cut by tools/cut-table-art.py) or matched to them. The house
   style does not judge it, the same way it does not judge the frames or the
   slot reels. What IS held to the house style in this file: the sheet, the
   backdrop, the buttons around the game, the hint line, the mini bar --
   anything that is chrome, not art.
   ========================================================================== */
:root {
  --g-gold: #FFD36B; --g-gold-2: #B8780A; --g-cream: #F6EEDC;
  --g-red: #C1121F; --g-red-2: #5E0F10; --g-blue: #1C4FD6; --g-blue-2: #0C1F5E;
  --g-amber: #9A6A1E; --g-amber-2: #4A3008;
  /* 2026-08-21, Martin: "I want it to look exactly like this", and his picture
     is a whole screen, not a panel with the chat above it. The table now fills
     everything from the top of the phone down to the bottom bar. Before this it
     was min(62dvh, 580px), which is why the dragon and the tiger were cropped,
     the cards were 54 px tall and the chip row would not fit. */
  --g-h: calc(100dvh - 3.1rem - env(safe-area-inset-bottom));
  --g-art-bg: none; --g-art-tie: none;
  /* Round thirteen (2026-08-20): cut out of Martin's new picture by
     tools/cut-table-art.py. The old head-only dragon and tiger and the red
     and blue cards are still in game-art if he wants them back. */
  --g-art-dragon: url(/game-art/box-dragon.webp); --g-art-tiger: url(/game-art/box-tiger.webp);
  --g-art-tie2:   url(/game-art/box-tie.webp);
  --g-art-card-red: url(/game-art/card-dragon.webp); --g-art-card-blue: url(/game-art/card-tiger.webp);
  --g-art-clock: url(/game-art/clock.png);
}

/* ---- the coin ---- */
.gcoin {
  position: fixed; right: .85rem; bottom: calc(4.2rem + env(safe-area-inset-bottom)); z-index: 19;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid #FFE79A; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #FFF1A8, #FFC531 45%, #B8780A 100%);
  box-shadow: 0 0 18px rgba(255,197,49,.7), 0 4px 12px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.gcoin .gcoin-ring {
  position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#FF6A00 calc(var(--left, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.gcoin .gcoin-n {
  position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%);
  font-family: var(--round); font-size: .6rem; font-weight: 700; color: #FFE45C; line-height: 1.5;
  background: #000000; border: 1px solid rgba(255,197,49,.7); border-radius: 999px; padding: 0 .4rem; white-space: nowrap;
}
.gcoin.hidden, .gmini.hidden, .gpanel.hidden { display: none; }
body.game-open .gcoin, body.game-mini .gcoin { display: none; }
/* On Chat and Live the coin sits IN the send row, at its right end (Martin's
   ask 2026-08-19: "put the dragon tiger icon beside it on the right side of
   the send message so its not on top of it"). It used to float above the box
   and cover the newest line. The row keeps a gap on its right for it, so the
   coin has a place of its own and never sits on the words or on Send. */
.lobby ~ .gcoin, .live-page ~ .gcoin {
  bottom: calc(3.5rem + env(safe-area-inset-bottom));
  right: .7rem;                      /* the same edge the send row uses */
  width: 2.9rem; height: 2.9rem;     /* 46 px: still a thumb's worth */
  font-size: 1.25rem;
}
.lobby .say, .live-page .chatbox .say { padding-right: 3.5rem; }
/* the little coin count under it would fall off the row */
.lobby ~ .gcoin .gcoin-n, .live-page ~ .gcoin .gcoin-n { bottom: -.5rem; font-size: .55rem; }
@media (min-width: 700px) { .gcoin { right: calc(50% - 20rem); } }

/* ---- the room makes way: the page is alive above the panel ---- */
body.game-open .lobby, body.game-open .live-page { bottom: calc(var(--g-h) + 3.1rem + env(safe-area-inset-bottom)); }
body.game-open .lobby .say, body.game-open .lobby .login-bar, body.game-open .live-page .chatbox .say, body.game-open .live-page .chatbox .login-bar { display: none; }
body.game-open .live-page .stage-grid { grid-template-columns: repeat(3, 1fr); }
body.game-open .live-page .spot { aspect-ratio: 4 / 3; }
body.game-open .live-page .stage-reactions, body.game-open .live-page .stage-note:empty { display: none; }
body.game-mini .lobby, body.game-mini .live-page { bottom: calc(5.9rem + env(safe-area-inset-bottom)); }
body.game-open.has-nav .home-members, body.game-mini.has-nav .home-members { padding-bottom: calc(var(--g-h) + 4rem); }

/* ---- the mini bar ---- */
.gmini {
  position: fixed; left: .5rem; right: .5rem; bottom: calc(3.35rem + env(safe-area-inset-bottom)); z-index: 19;
  display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem .3rem .35rem; cursor: pointer;
  background: linear-gradient(90deg, var(--g-red-2), var(--g-blue-2)); border: 1px solid var(--g-gold); border-radius: 999px;
  box-shadow: 0 0 16px rgba(255,211,107,.45), 0 4px 12px rgba(0,0,0,.6);
  font-family: var(--sans); font-size: .66rem; color: var(--g-cream); white-space: nowrap; overflow: hidden;
}
.gmini .gm-clock { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #3A1A00; background: radial-gradient(circle at 50% 45%, #FFF7D6 0 48%, #FFB020 50% 62%, #B8780A 64%); }
.gmini .gm-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gmini .gm-text b { color: #FFE45C; font-weight: 700; }
/* the game's name in the minimised bar: white, so it reads as a name rather
   than as one of the gold numbers beside it (2026-08-21) */
.gmini .gm-text b.gm-game { color: #FFFFFF; font-weight: 800; }
.gmini .gm-open { flex: 0 0 auto; border: 1px solid rgba(255,211,107,.6); border-radius: 999px; padding: .1rem .5rem; color: #FFE9A8; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 700px) { .gmini { left: calc(50% - 13rem); right: calc(50% - 13rem); } }

/* ---- the panel ---- */
.gpanel {
  position: fixed; left: 0; right: 0; bottom: calc(3.1rem + env(safe-area-inset-bottom)); z-index: 18;
  /* The table fills the phone now, and a tall screen has more height than
     Martin's square picture accounts for. The spare height goes into ONE gap
     above the footer (see .g-foot margin-top) rather than being shared out
     between every row, which left loose bands everywhere, and rather than
     stretching the three boxes out of shape, which is what cropped the art. */
  height: var(--g-h); display: flex; flex-direction: column; gap: .35rem; padding: .45rem .5rem .4rem;
  color: var(--g-cream); font-family: var(--sans); overflow: hidden; touch-action: manipulation;
  border-top: 2px solid var(--g-gold); border-radius: var(--r) var(--r) 0 0;
  /* Round twelve (2026-08-20): black, the way Martin's new picture has it.
     The red and blue flame art used to fill the whole panel edge to edge and
     everything sat on top of it; in the new picture the ground is black and
     the three boxes carry all the colour. The flame files are still in
     public/game-art in case he wants them back. */
  background: var(--void);
  box-shadow: 0 -10px 30px rgba(0,0,0,.65);
  animation: g-up .28s ease-out;
}
@keyframes g-up { from { transform: translateY(30px); } to { transform: none; } }   /* slide only: a fade showed the page through the panel (tester 2026-08-19) */
@media (prefers-reduced-motion: reduce) { .gpanel { animation: none; } }
@media (min-width: 700px) { .gpanel { left: calc(50% - 14rem); right: calc(50% - 14rem); border-radius: var(--r) var(--r) 0 0; } }
/* the darkening wash over the flame art went with the flame art */
.gpanel > * { position: relative; }
.gpanel button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gpanel .hidden { display: none !important; }

/* top row: five controls (round eight, 2026-08-19). Each button is a 2.75rem
   (44 px) hit area; the gold circle drawn inside it is a touch smaller. */
.g-top { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.g-ic {
  position: relative; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; padding: 0; background: none;
  color: #3A2200; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.g-ic::before {
  content: ""; position: absolute; inset: .2rem; border-radius: 50%; border: 1px solid #FFE9A8;
  background: radial-gradient(circle at 35% 30%, #FFE9A8, #D9A52A 60%, #7A4E08); box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.g-ic .g-ic-f { position: relative; z-index: 1; line-height: 1; }
.g-ic.on::before { box-shadow: 0 0 0 2px #FFE45C, 0 2px 6px rgba(0,0,0,.5); }
.g-ic.g-menu-btn { font-size: 1.35rem; }
.g-ic.x { font-size: 1.2rem; }
.g-ic.x::before { background: radial-gradient(circle at 35% 30%, #FFD7D7, #FF6A6A 55%, #8A1010); border-color: #FFB3B3; }
.g-ic.x .g-ic-f { color: #fff; }
.g-top5 {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .2rem; padding: .2rem .5rem;
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,211,107,.4); border-radius: 999px;
}
.g-top5 small { font-family: var(--sans); font-size: .58rem; font-weight: 800; letter-spacing: .12em; color: var(--g-gold); margin-right: .15rem; }
.g-top5 .badge.sm { width: 1.25rem; height: 1.25rem; font-size: .6rem; box-shadow: none; border: 1px solid #FFE9A8; }
.g-top5 .g-none { font-family: var(--sans); font-size: .56rem; color: rgba(246,238,220,.7); }

/* cards and clock */
/* Three equal columns. It was 1fr auto 1fr, which let the two cards grow and
   squeezed the clock down to 62 px between them; in Martin's picture the clock
   is the same size as a card, not a third of one. */
.g-mid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: .3rem; padding: .2rem .5rem; flex: 0 0 auto; }
/* 2026-08-21: the cards were 54 x 77 px, small enough to miss. In Martin's
   picture they are the second biggest thing on the screen after the boxes.
   Sized as a share of their own grid column, NOT in vw: the app is always a
   phone-shaped column of at most 432 px, so a vw is the whole desktop window
   and means nothing here. */
.g-card { justify-self: center; width: 96%; aspect-ratio: 5 / 7; height: auto; perspective: 500px; }
.g-card .g-in { position: relative; width: 100%; height: 100%; transition: transform .55s; transform-style: preserve-3d; }
.g-card.snap .g-in { transition: none; }
.g-card.flipped .g-in { transform: rotateY(180deg); }
.g-card .g-back, .g-card .g-face { position: absolute; inset: 0; border-radius: var(--r-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
/* Round thirteen (2026-08-20): the gold-on-black cards from Martin's new
   picture, a dragon medallion on one and a tiger on the other, instead of the
   red and blue pair. The gold edge is his too. */
.g-card .g-back { border: 2px solid var(--g-gold); background: var(--g-art-card-red) center / cover, #0A0A0C; }
.g-card.t .g-back { background: var(--g-art-card-blue) center / cover, #0A0A0C; }
.g-card .g-back::after { content: ""; position: absolute; inset: .35rem; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; background: radial-gradient(circle, rgba(255,255,255,.35) 0 22%, transparent 24%); }
/* A real playing card (2026-08-21). Rank and suit small in the top-left, the
   same upside down in the bottom-right, the suit large in the middle. Sized in
   percentages of the card, so it holds at any card size. */
.g-card .g-face {
  transform: rotateY(180deg); background: #FDFDFB; color: #151518;
  display: block; position: absolute; overflow: hidden;
  font-family: var(--sans); font-weight: 800; line-height: 1;
  border: 1px solid rgba(0,0,0,.18);
}
.g-card .g-face .g-cn { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .98; }
.g-card .g-face .g-cn.tl { top: 6%; left: 7%; }
.g-card .g-face .g-cn.br { bottom: 6%; right: 7%; transform: rotate(180deg); }
.g-card .g-face .g-cn b { font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; }
.g-card .g-face .g-cn i { font-style: normal; font-size: 1.1rem; margin-top: .04em; }
.g-card .g-face .g-pip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.4rem; line-height: 1; opacity: .95; }
.g-card .g-face.red { color: #D0202A; }
.g-card.win .g-face { box-shadow: 0 0 0 2px var(--g-gold), 0 0 22px rgba(255,211,107,.9); }
.g-clock {
  width: 88%; aspect-ratio: 1; height: auto; justify-self: center; border-radius: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--g-art-clock) center / cover, radial-gradient(circle at 50% 45%, #FFF7D6 0 48%, #FFB020 50% 62%, #B8780A 64% 100%);
  box-shadow: 0 0 18px rgba(255,176,32,.8), 0 3px 8px rgba(0,0,0,.6); color: #3A1A00; text-align: center;
}
.g-clock::before, .g-clock::after { content: ""; position: absolute; top: -.4rem; width: 1.3rem; height: .85rem; border-radius: 99px 99px 0 0; background: #FF8A1F; }
.g-clock::before { left: .25rem; transform: rotate(-30deg); } .g-clock::after { right: .25rem; transform: rotate(30deg); }
.g-clock b { font-family: var(--round); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.g-clock small { font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; max-width: 5rem; }
.g-clock.word b { font-size: .78rem; letter-spacing: .02em; }
.g-clock.tick b { animation: g-tick .5s; }
@keyframes g-tick { 0% { transform: scale(1.2); } 100% { transform: none; } }

/* result row */
.g-res { display: flex; align-items: center; gap: .25rem; padding: .22rem .55rem; background: rgba(0,0,0,.4); border-radius: 999px; flex: 0 0 auto; overflow: hidden; }
.g-res > span { font-family: var(--sans); font-size: .6rem; color: var(--g-cream); white-space: nowrap; }
.g-res-row { display: flex; gap: .22rem; overflow: hidden; }
.g-res-row i {
  flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--sans); font-size: .42rem; font-weight: 900; color: #3A2200;
}
.g-res-row i.d { background: radial-gradient(circle at 35% 30%, #FF9A6A, #C1121F); }
.g-res-row i.t { background: radial-gradient(circle at 35% 30%, #8AB4FF, #1C4FD6); }
.g-res-row i.x { background: radial-gradient(circle at 35% 30%, #FFE9A8, #B8780A); }
.g-res-row i.s { outline: 1px solid #FFE45C; outline-offset: 1px; }
.g-res-row i.new { box-shadow: 0 0 8px #FFE45C; }
.g-res-row i:first-child { animation: g-pop .4s; }
@keyframes g-pop { from { transform: scale(0); } to { transform: none; } }

/* the three boxes */
/* The three boxes keep roughly the shape they have in Martin's picture (a bit
   taller than wide, about 0.8). Before 2026-08-21 they were flex: 1 and simply
   ate whatever height was left, which on a full-height table made them 135 wide
   by 440 tall - a ratio of 0.31 - and that is why the dragon and the tiger were
   cropped down to fur and scales. */
/* The boxes keep roughly the shape they have in Martin's picture (about 0.75
   wide-to-tall). Twice now, letting them eat the spare height of a tall phone
   has cropped the animals: at 0.31 they were fur and scales, at 0.38 the
   dragon's head was gone. The height is capped and the spare space is shared
   above and below by `margin: auto 0` instead. */
.g-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; flex: 0 1 auto; min-height: 10rem; max-height: 12.5rem; }
.g-zone {
  position: relative; border-radius: var(--r); border: 2px solid var(--zb); background: var(--zg); padding: .3rem .2rem .3rem;
  display: flex; flex-direction: column; align-items: center; overflow: hidden; text-align: center;
  box-shadow: inset 0 0 16px rgba(0,0,0,.5), 0 0 12px -2px var(--zb);
}
.g-zone.d { --zb: #FF8A5A; --zg: linear-gradient(180deg, #B2221C, #5E0F10); }
.g-zone.x { --zb: var(--g-gold); --zg: linear-gradient(180deg, #9A6A1E, #4A3008); }
.g-zone.t { --zb: #6AA0FF; --zg: linear-gradient(180deg, #1F4FB8, #0C1F5E); }

.g-zone h5 { margin: 0; font-family: var(--round); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #FFE9A8; background: rgba(0,0,0,.38); border: 1px solid var(--zb); border-radius: 999px; padding: .05rem .5rem; position: relative; z-index: 2; }
.g-zone .g-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* the Tie box used to draw the word itself; it is his brush script now */
.g-zone .g-toks { position: absolute; inset: 1.6rem .2rem 2.4rem; pointer-events: none; }
.g-tok {
  position: absolute; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--round); font-size: .48rem; font-weight: 900; color: #000000; border: 2px dashed rgba(255,255,255,.85); box-shadow: 0 2px 5px rgba(0,0,0,.6);
  /* The slot is the chip's CENTRE, so its own width can never carry it over an
     edge of the box (2026-08-21). */
  transform: translate(-50%, -50%);
  /* NO animation on a chip landing, Martin's call 2026-08-21: "now it kind of
     bounce twice from faded before placing it... if i place it just scatters
     within the box. no fades or bounce." The flying chip from the tray is
     already the movement; the chip then fading and bouncing in on top of it was
     the same event animated twice. It simply appears where the flier landed. */
}
.g-tok.c5 { background: #5B8DEF; } .g-tok.c10 { background: #2ECC71; } .g-tok.c25 { background: #FF9A3C; } .g-tok.c50 { background: #F0296C; }
.g-tok.more { background: rgba(0,0,0,.8); color: #FFE9A8; border-style: solid; border-color: var(--g-gold); }
.g-zone .g-mult { margin-top: auto; position: relative; z-index: 2; font-family: var(--round); font-weight: 900; font-size: .8rem; color: #FFE9A8; background: rgba(0,0,0,.45); border: 1px solid var(--zb); border-radius: 5px; padding: 0 .6rem; text-shadow: 0 0 8px rgba(255,211,107,.6); }
.g-zone .g-pm { position: relative; z-index: 2; font-family: var(--sans); font-size: .56rem; color: var(--g-cream); line-height: 1.35; margin-top: .2rem; display: flex; gap: .5rem; justify-content: center; }
.g-zone .g-pm b { font-weight: 700; color: #FFE45C; }
/* The Suited Tie side bet. Martin 2026-08-21: "i put 100 on all three but the
   tie didnt register it" — it HAD registered, on Suited, because this
   button sat in the middle of the Tie box and was big enough that a natural tap
   on Tie landed on it instead. It is a small pill hard against the bottom of
   the box now, so the box means Tie and this means Suited. */
.g-zone .g-suited {
  position: relative; z-index: 2; margin-top: auto; align-self: center;
  font-family: var(--sans); font-size: .48rem; line-height: 1.15; color: #FFE9A8;
  background: rgba(0,0,0,.62); border: 1px dashed rgba(255,211,107,.6);
  border-radius: 999px; padding: .1rem .4rem;
  display: flex; flex-direction: row; align-items: center; gap: .3rem;
  max-width: 92%;
}
.g-zone .g-suited b { color: #FFE45C; }
.g-zone.win { box-shadow: 0 0 0 2px #FFE45C, 0 0 24px rgba(255,228,92,.9), inset 0 0 16px rgba(0,0,0,.5); }
.g-zone.dim { opacity: .55; }
.g-zone:disabled, .gpanel.locked .g-zone { cursor: default; }
.g-zone.pressed { transform: scale(.97); }

/* round, tray, hint */
.g-round { font-family: var(--sans); font-size: .56rem; color: #FFE9A8; padding-left: .2rem; flex: 0 0 auto; display: flex; justify-content: space-between; }
/* Two rows since 2026-08-21: money and buttons above, chips below. See the
   note in game-panel.js — one row cannot give a chip a 44 px thumb target at
   phone width. */
/* One row, Martin's call 2026-08-21 once MAX was removed. It fits at 390 px
   because there are six things on it, not seven: the coins, five chips and the
   repeat arrow, with every chip still a 44 px thumb target. */
.g-foot { margin-top: auto; display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; flex: 0 0 auto; background: linear-gradient(180deg, #4A1008, #2A0804); border: 1px solid rgba(255,211,107,.5); border-radius: 999px; }
/* Martin 2026-08-21: "the chips kind of shakes when the amount of coins you
   have changes". They were not shaking, they were being SHOVED: the coin count
   is in the same row and it counts up digit by digit after a win, so every
   frame it changed width and pushed the whole tray along. Two fixes, both
   needed: tabular-nums makes every digit the same width, and the min-width
   stops the box resizing when the number gains or loses a digit. */
.g-bal {
  display: flex; align-items: center; gap: .25rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 800; color: var(--g-cream);
  flex: 0 0 auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  min-width: 3.9rem;
}
.g-bal b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.g-bal i { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF1A8, #FFC531 50%, #B8780A); box-shadow: 0 0 6px rgba(255,197,49,.7); }
.g-bal.flash b { animation: g-tick .5s; }
.g-tray { flex: 1 1 auto; display: flex; justify-content: space-evenly; gap: .2rem; min-width: 0; }

.gpanel.locked .g-chip, .gpanel.locked .g-rep { opacity: .4; }
.g-rep { flex: 0 0 auto; font-family: var(--sans); font-size: .6rem; font-weight: 900; letter-spacing: .04em; color: #FFE9A8; background: linear-gradient(180deg, #C1121F, #7A0A12); border: 1px solid var(--g-gold); border-radius: 999px; padding: .45rem .65rem; }
.g-free { flex: 0 0 auto; display: flex; justify-content: center; }
.g-free button { width: 100%; font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3A1A00; background: radial-gradient(circle at 35% 30%, #FFF1A8, #FFC531 50%, #D9A52A); border: 1px solid #FFE79A; border-radius: 999px; padding: .55rem; box-shadow: 0 0 14px rgba(255,197,49,.6); }
.g-hint { margin: 0; font-family: var(--sans); font-size: .56rem; color: rgba(246,238,220,.78); text-align: center; flex: 0 0 auto; }
.g-login { display: block; text-align: center; font-family: var(--sans); font-size: .66rem; letter-spacing: .06em; color: var(--lime); text-decoration: none; border: 1px solid rgba(198,255,61,.5); border-radius: 999px; padding: .45rem; background: rgba(0,0,0,.6); flex: 0 0 auto; }

/* The message ("Even: your 2,000 back", "Too late, next round"). Martin's catch
   2026-08-21 from his phone: it sat at the bottom, ON the chips, hiding the very
   things you tap. It sits in the empty space above the chip row now, which the
   square reference picture leaves over on a tall phone anyway. */
.g-ribbon {
  position: absolute; left: 50%; bottom: 5.6rem; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  font-family: var(--sans); font-weight: 900; font-size: .82rem; color: #3A1A00; padding: .4rem 1rem; border-radius: 999px; border: 2px solid #FFF7D6;
  background: linear-gradient(180deg, #FFE9A8, #FFC531); box-shadow: 0 0 24px rgba(255,197,49,.9); animation: g-pop .3s;
}
.g-ribbon.lost { background: linear-gradient(180deg, #2A2A30, #1C1C20); color: #F6EEDC; border-color: #8B8B93; box-shadow: 0 0 14px rgba(0,0,0,.7); }

/* sheets inside the panel: who, top 5, history, rules */
.g-sheet { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.975); padding: .5rem .7rem .7rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; color: var(--text); }
.g-sheet .g-sh-top { display: flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g-gold); }
.g-sheet .g-sh-top button { border: 1px solid rgba(255,211,107,.5); background: none; color: var(--g-gold); border-radius: 999px; padding: .15rem .6rem; font-family: var(--sans); font-size: .7rem; }
.g-sheet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.g-sheet li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.g-sheet li .g-won { margin-left: auto; font-family: var(--sans); color: #FFE45C; }
.g-sheet li .g-pos { font-family: var(--sans); font-size: .7rem; color: var(--g-gold); width: 1.2rem; }
.g-sheet .g-note { font-size: .82rem; color: var(--text-2); margin: 0; }
.g-sheet table { width: 100%; border-collapse: collapse; font-size: .8rem; color: var(--text-2); }
.g-sheet td, .g-sheet th { padding: .35rem .3rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-sheet th { font-family: var(--sans); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.g-sheet td b { color: var(--text); }
.g-sheet .g-hist { display: flex; flex-wrap: wrap; gap: .3rem; }
.g-sheet .g-hist i { width: 1.5rem; height: 1.5rem; font-size: .5rem; }
.g-sheet .g-toggle { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .88rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .7rem; background: #151518; }
.g-sheet .g-toggle button { font-family: var(--sans); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,211,107,.5); border-radius: 999px; padding: .25rem .7rem; background: none; color: var(--g-gold); }
.g-sheet .g-toggle button.on { background: rgba(255,211,107,.15); box-shadow: 0 0 10px rgba(255,211,107,.4); }

/* Home: the biggest win under the top 10 */
.big-win { width: 100%; margin: .4rem 0 0; font-family: var(--sans); font-size: .72rem; color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.5); background: rgba(255,228,92,.07); border: 1px solid rgba(255,228,92,.3); border-radius: 999px; padding: .35rem .7rem; text-align: center; }
.big-win.none { color: var(--text-3); text-shadow: none; background: none; border-color: var(--line); }
/* A win line in the chat */
.sys-win { text-align: center; font-family: var(--sans); font-size: .7rem; color: #FFE45C; text-shadow: 0 0 8px rgba(255,228,92,.5); letter-spacing: .03em; }
.sys-win b { color: #FFE45C; font-weight: 700; }

/* ---- the art (Martin's pictures, 2026-08-19, cut out in tools/cut-game-art.py) ---- */
.g-card .g-back { background: var(--g-art-card-red) center / cover no-repeat; border: 0; }
.g-card.t .g-back { background: var(--g-art-card-blue) center / cover no-repeat; }
.g-card .g-back::after { display: none; }
/* Martin's own alarm-clock picture (round thirteen). Grown 2026-08-21: it was
   pinned at 3.9 x 5.1rem, which on the full-height table left it 62 px wide
   between two 112 px cards, while in his picture the clock is the biggest thing
   on that row. Everything inside it is a PERCENTAGE now, so the number and the
   word BET stay in the right place on the face at any size. */
.g-clock {
  width: 98%; max-width: 9.2rem; aspect-ratio: 39 / 51; height: auto; justify-self: center;
  border-radius: 0; box-shadow: none;
  background: var(--g-art-clock) center / contain no-repeat;
  padding-top: 25.5%; box-sizing: border-box;
}
.g-clock::before, .g-clock::after { display: none; }
.g-clock b, .g-clock small { position: relative; z-index: 2; color: #FFE9A8; text-shadow: 0 0 10px rgba(255,197,49,.8); }
.g-clock .g-face-bg { position: absolute; left: 50%; top: 57%; width: 65%; aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2A1606, #0B0603 70%); z-index: 1; box-shadow: inset 0 0 10px rgba(0,0,0,.8); }
/* Round thirteen (2026-08-20): Martin's new creatures, cut out of his picture
   by tools/cut-table-art.py, in place of the old heads. cover rather than
   contain, because the crop IS the creature and its flames and is meant to
   fill the box's art area. The Tie box now carries his brush script instead
   of the app drawing the word itself. Full colour, not the old 30% ghost.
   His picture has DRAGON, X2 and Pot . Me baked in and the app draws all
   three, so the crop deliberately stops short of both rows of his pills. */
/* center TOP since 2026-08-21: the boxes take the spare height on a tall phone,
   and anchoring the picture to the top means a taller box trims flames off the
   bottom instead of slicing the animal's head off. */
.g-zone.d .g-art { font-size: 0; background: var(--g-art-dragon) center top / cover no-repeat; opacity: 1; filter: none; inset: .2rem .25rem .25rem; border-radius: var(--r-sm); }
.g-zone.t .g-art { font-size: 0; background: var(--g-art-tiger) center top / cover no-repeat; opacity: 1; filter: none; inset: .2rem .25rem .25rem; border-radius: var(--r-sm); }
.g-zone.x .g-art { font-size: 0; background: var(--g-art-tie2) center top / cover no-repeat; opacity: 1; filter: none; inset: .2rem .25rem .25rem; border-radius: var(--r-sm); }
.g-res-row i.d { background: url(/game-art/dragon.png) center / 140% auto no-repeat, radial-gradient(circle at 35% 30%, #FF9A6A, #C1121F); }
.g-res-row i.t { background: url(/game-art/tiger.png) center / 140% auto no-repeat, radial-gradient(circle at 35% 30%, #8AB4FF, #1C4FD6); }
/* A soft grey disc under each chip picture, so the dark chip body reads on the dark tray and in the boxes. */
.g-tok { color: #FFFFFF; text-shadow: 0 0 4px #000, 0 0 6px #000; }

.g-tok { width: 1.45rem; height: 1.45rem; font-size: .5rem; }
.g-tok.more { background-image: none; background-color: rgba(0,0,0,.85); border: 1px solid var(--g-gold); color: #FFE9A8; }
.gcoin .gcoin-face { font-size: 0; width: 2.3rem; height: 2.3rem; background: url(/game-art/dragon.png) center / cover no-repeat; border-radius: 50%; }
.gmini .gm-clock { background: url(/game-art/clock.png) center / contain no-repeat, radial-gradient(circle, #2A1606 40%, transparent 42%); color: #FFE9A8; width: 2.1rem; height: 2.1rem; padding-top: .45rem; box-sizing: border-box; font-size: .7rem; }

/* ---- motion and the win moment (Martin's tap-through 2026-08-19) ---- */
.g-ic.x { margin-left: auto; }
.g-clock.hot b { color: #FF5A5A; text-shadow: 0 0 12px rgba(255,90,90,.9); animation: g-pulse .5s ease-in-out infinite alternate; }
@keyframes g-pulse { from { transform: scale(1); } to { transform: scale(1.18); } }
.g-zone.win { animation: g-shimmer 1.2s ease-in-out infinite alternate; }
@keyframes g-shimmer { from { box-shadow: 0 0 0 2px #FFE45C, 0 0 18px rgba(255,228,92,.7), inset 0 0 16px rgba(0,0,0,.5); } to { box-shadow: 0 0 0 3px #FFF7D6, 0 0 34px rgba(255,228,92,1), inset 0 0 10px rgba(255,228,92,.25); } }
.g-zone.lost { animation: g-shake .45s ease-in-out; }
@keyframes g-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.g-zone .g-pm b.pop { animation: g-tick .4s; display: inline-block; }
/* a chip flying from the tray into a box */
.g-fly { position: fixed; z-index: 60; width: 2.2rem; height: 2.2rem; border-radius: 50%; pointer-events: none; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: .62rem; font-weight: 900; color: #fff; text-shadow: 0 0 4px #000, 0 0 8px #000; background-size: cover; }
/* confetti */
.g-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 7; }
.g-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .95; animation: g-fall linear forwards; }
@keyframes g-fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }
/* the win card */
.g-winbig {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); z-index: 8; text-align: center; pointer-events: none;
  padding: .9rem 1.6rem; border-radius: var(--r); border: 2px solid #FFF7D6; color: #3A1A00;
  background: radial-gradient(circle at 50% 20%, #FFF7D6, #FFD36B 55%, #E0A020); box-shadow: 0 0 40px rgba(255,211,107,1), 0 8px 30px rgba(0,0,0,.6);
  animation: g-winpop .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
.g-winbig.big { background: radial-gradient(circle at 50% 20%, #FFF7D6, #FFC531 50%, #FF6A00); border-color: #FFE9A8; }
.g-winbig small { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.g-winbig b { display: block; font-family: var(--sans); font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.g-winbig em { display: block; font-style: normal; font-size: .8rem; font-weight: 700; margin-top: .15rem; }
@keyframes g-winpop { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.g-winbig.out { animation: g-winout .4s ease-in forwards; }
@keyframes g-winout { to { transform: translate(-50%, -60%) scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g-zone.win, .g-zone.lost, .g-clock.hot b, .g-confetti i, .g-fly { animation: none !important; } }

/* ---- round seven: daily chips, missions, trends, six chips and MAX, Dragon Night ---- */
.g-tray { gap: .22rem; }
.g-rep { width: 2.1rem; height: 2.1rem; padding: 0; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
.g-bal { font-size: .72rem; }
/* the result row's streak badge */
/* the missions dot (on the ≡ since round eight) */
.g-dot { position: absolute; right: .1rem; top: .1rem; z-index: 2; width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid #000000; font-style: normal; font-size: .45rem; display: flex; align-items: center; justify-content: center; line-height: 1; }
.g-dot.on { background: #F0296C; box-shadow: 0 0 8px #F0296C; }
.g-dot.tick { background: #2ECC71; color: #000000; font-weight: 900; }
.g-dot.hidden { display: none; }
/* the daily chips card */
/* missions */
.g-mis { border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .65rem; background: #151518; display: flex; flex-direction: column; gap: .3rem; }
.g-mis-t { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; color: var(--text); gap: .5rem; }
.g-mis-t b { font-family: var(--sans); color: #FFE45C; white-space: nowrap; }
.g-mis-bar { height: .45rem; border-radius: 999px; background: #2A2A30; overflow: hidden; }
.g-mis-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFC531, #FF6A00); transition: width .4s; }
.g-mis.done { border-color: rgba(46,204,113,.5); }
.g-mis.done .g-mis-bar i { background: #2ECC71; }
.g-mis small { font-family: var(--sans); font-size: .62rem; color: var(--text-3); }
/* trends */
.g-counts { display: flex; gap: .4rem; }
.g-counts div { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: .45rem .3rem; text-align: center; font-family: var(--sans); font-size: .62rem; color: var(--text-2); display: flex; flex-direction: column; gap: .1rem; }
.g-counts b { font-size: 1.15rem; color: var(--text); }
.g-counts .d b { color: #FF6A6A; } .g-counts .t b { color: #8AB4FF; } .g-counts .x b { color: #2ECC71; }
.g-streakline { margin: 0; font-family: var(--sans); font-size: .7rem; color: #FFE45C; }
.g-k { margin: .2rem 0 0; font-family: var(--round); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.g-road { display: flex; gap: .2rem; overflow-x: auto; background: #151518; border: 1px solid var(--line); border-radius: var(--r); padding: .4rem; }
.g-road-col { display: flex; flex-direction: column; gap: .15rem; flex: 0 0 auto; }
.g-road-col i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid transparent; position: relative; display: block; }
.g-road-col i.d { border-color: #FF4D4D; } .g-road-col i.t { border-color: #5B8DEF; } .g-road-col i.x { border-color: #2ECC71; background: rgba(46,204,113,.25); }
.g-road-col i.s::after { content: ""; position: absolute; right: -3px; top: -3px; width: .35rem; height: .35rem; border-radius: 50%; background: #FFE45C; }
.g-road-col small { font-family: var(--sans); font-size: .5rem; color: var(--text-3); }
.g-gold { margin: .3rem 0 0; font-family: var(--sans); font-size: .68rem; color: var(--g-gold); text-shadow: 0 0 8px rgba(255,211,107,.5); }
.g-boss { font-family: var(--round); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #FF9A3C; background: rgba(255,154,60,.08); border: 1px solid rgba(255,154,60,.5); border-radius: var(--r); padding: .6rem; }
/* Dragon Night */
.g-zone.x.night { box-shadow: 0 0 0 2px #FFE45C, 0 0 22px rgba(255,228,92,.8), inset 0 0 16px rgba(0,0,0,.5); }
.g-zone.x.night .g-mult { color: #FFE45C; border-color: #FFE45C; text-shadow: 0 0 10px rgba(255,228,92,.9); }
.g-banner {
  position: fixed; left: .5rem; right: .5rem; top: calc(.5rem + env(safe-area-inset-top)); z-index: 17; cursor: pointer;
  display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--g-gold);
  background: linear-gradient(90deg, #5E0F10, #B2221C 40%, #1C4FD6); color: #FFE9A8; font-family: var(--sans); font-size: .68rem; letter-spacing: .04em;
  box-shadow: 0 0 16px rgba(255,211,107,.55), 0 4px 12px rgba(0,0,0,.6);
}
.g-banner.hidden { display: none; }
.g-banner b { margin-left: auto; background: rgba(0,0,0,.4); border-radius: 999px; padding: .05rem .5rem; color: #FFE45C; }
.g-banner-ic { font-size: .9rem; }
@media (min-width: 700px) { .g-banner { left: calc(50% - 14rem); right: calc(50% - 14rem); } }
/* make room for the banner on the pages that pin their layout */
body.game-night .lobby, body.game-night .live-page { top: 2.4rem; }
body.game-night .home-members { padding-top: 2.2rem; }
/* the top row: nothing wraps; TOP 5 takes the room in the middle */
.g-top5 { gap: .12rem; padding: .15rem .4rem; flex-wrap: nowrap; overflow: hidden; min-width: 0; min-height: 2.1rem; box-sizing: border-box; }
.g-top5 small { font-size: .5rem; white-space: nowrap; letter-spacing: .08em; }
.g-top5 .badge.sm { width: 1.1rem; height: 1.1rem; font-size: .5rem; flex: 0 0 auto; }
.g-top5 .g-top5-faces { display: flex; gap: .1rem; overflow: hidden; }
@media (max-width: 360px) { .g-top5 small { display: none; } }

/* the coin on Chat and Live must not sit on the end of the newest lines (tester 2026-08-19): the last three lines stop short of it; the rule lives in lobby.css since the pills of round eight */
/* visual pass 2026-08-19: sheets fully opaque and only as tall as their content; Home dims behind the panel */
.g-sheet { background: #000000; bottom: auto; max-height: 100%; border-radius: 0 0 var(--r) var(--r); box-shadow: 0 10px 24px rgba(0,0,0,.6); border-bottom: 1px solid rgba(255,211,107,.35); }
body.game-open .home-members { opacity: .45; transition: opacity .25s; }

/* the menu under ≡ (round eight, 2026-08-19): Missions, Trends, Rules and
   sound, and Dragon Night for the boss. Inside the panel, under the button,
   never past the right edge; each row a 44 px tap. */
.gpanel .g-menu {
  position: absolute; right: .5rem; top: 3.35rem; z-index: 7; min-width: 12.5rem; max-width: calc(100% - 1rem);
  display: flex; flex-direction: column; padding: .25rem; border-radius: var(--r); border: 1px solid rgba(255,211,107,.6);
  background: #1A0604; box-shadow: 0 0 20px rgba(0,0,0,.8), 0 0 14px rgba(255,211,107,.25); animation: g-pop .18s ease-out; transform-origin: top right;
}
.gpanel .g-mrow {
  display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .6rem; border: 0; border-radius: var(--r);
  background: none; color: #FFE9A8; font-family: var(--sans); font-size: .92rem; text-align: left; width: 100%;
}
.gpanel .g-mrow + .g-mrow { border-top: 1px solid rgba(255,211,107,.2); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.gpanel .g-mrow:active { background: rgba(255,211,107,.1); }
.g-mrow .g-mrow-ic { width: 1.4rem; text-align: center; flex: 0 0 auto; font-size: 1rem; font-weight: 800; }
.g-mrow .g-mrow-w { flex: 1; white-space: nowrap; }
.g-mrow .g-mhint { flex: 0 0 auto; font-family: var(--sans); font-size: .62rem; letter-spacing: .04em; white-space: nowrap; }
.g-mrow .g-mhint.on { color: #F0296C; text-shadow: 0 0 8px rgba(240,41,108,.7); }
.g-mrow .g-mhint.tick { color: #2ECC71; text-shadow: 0 0 8px rgba(46,204,113,.6); }
.g-mrow .g-mhint.dim { color: var(--text-3); }

/* ==========================================================================
   The seven chips, drawn to Martin's picture of 2026-08-20.

   They are DRAWN, not a picture. Round twelve re-coloured his old chip photos
   with filters and he said plainly they did not match. His new ones are flat
   shapes -- a ring of white segments, a dashed ring, a middle disc, a number
   -- so drawing them lands exactly and stays sharp at any size, where cutting
   them out of the screenshot would have given 56 px to show at 100.

   Every colour below was sampled off his picture, not guessed:
     silver body #979694   middle #F0EEEF   black number
     crimson    #D8355C            #D8355C   white number
     gold       #EFB83B            #F6DA71   black number
   ========================================================================== */
/* .gpanel button sets color: inherit and beats a plain .g-chip on
   specificity, which left every number the panel's cream and the silver and
   gold chips looking blank. Named with the panel so it wins. */
.gpanel .g-chip, .gpanel .g-tok, .g-chip, .g-tok {
  /* `relative` is for the CHIPS in the tray, which sit in a row and need a
     positioning context for their dashed inner ring. A .g-tok on a box must
     stay `absolute`: it is placed by a left/top percentage inside .g-toks, and
     this rule quietly turned every one of them relative, so they lined up in a
     row and each percentage nudged it from there instead of placing it. That is
     why chips wandered outside their box and appeared to come from nowhere
     (Martin, 2026-08-21). Re-asserted just below. */
  position: relative;
  border-radius: 50%;
  border: 0;
  background:
    /* the middle disc the number sits on */
    radial-gradient(circle at 50% 50%, var(--c-mid) 0 56%, transparent 56.5%),
    /* eight white segments around the rim */
    repeating-conic-gradient(from 22.5deg, #FFFFFF 0deg 22.5deg, var(--c-body) 22.5deg 45deg);
  color: var(--c-ink);
  font-family: var(--sans); font-weight: 800;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* the dashed ring just inside the rim */
.gpanel .g-chip::before, .gpanel .g-tok::before, .g-chip::before, .g-tok::before {
  content: ""; position: absolute; inset: 13%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.92);
  pointer-events: none;
}
/* THE FIVE CHIPS (2026-08-21, Martin: "make sure all the chips a different
   colors like casinos"). Before this, seven chips shared three colours: two
   grey, two pink, three gold, so the tray read as one thing.

   These are the real casino denominations, in the order a house actually uses
   them, so the colour tells you the value before the number does: red is the
   cheap chip, green next, black the hundred, purple the five hundred, and
   gold the top one. Five different hues, none of them the app's pink.

   Measured against their own ink, all five pass the 4.5 a small number needs:
     20  red    #C8202F on white  5.67      500  purple #6B2FA5 on white 8.16
     50  green  #12854A on white  4.69     1000  gold   #D99A17 on dark  8.30
     100 black  #17171C on white 17.86
   The black chip is 1.18 against the black table and that is correct: a chip
   is drawn with eight white segments around its rim, which is what gives it
   its outline, exactly like a real black chip on a dark felt. */
/* A chip on a BOX is placed, not laid out. It has to win over the shared rule
   above, so it is stated after it. */
.g-zone .g-toks .g-tok { position: absolute; }

.g-chip.c20,  .g-tok.c20  { --c-body: #C8202F; --c-mid: #C8202F; --c-ink: #FFFFFF; }
.g-chip.c50,  .g-tok.c50  { --c-body: #12854A; --c-mid: #12854A; --c-ink: #FFFFFF; }
.g-chip.c100, .g-tok.c100 { --c-body: #17171C; --c-mid: #17171C; --c-ink: #FFFFFF; }
.g-chip.c500, .g-tok.c500 { --c-body: #6B2FA5; --c-mid: #6B2FA5; --c-ink: #FFFFFF; }
.g-chip.c1k,  .g-tok.c1k  { --c-body: #D99A17; --c-mid: #E9B944; --c-ink: #14000A; }
/* Amounts that are no longer in the tray but are still drawn on bets kept from
   rounds before 2026-08-21. */
.g-chip.c10,  .g-tok.c10  { --c-body: #979694; --c-mid: #F0EEEF; --c-ink: #14000A; }
.g-chip.c5k,  .g-tok.c5k  { --c-body: #EDB53E; --c-mid: #F0D26B; --c-ink: #14000A; }
.g-chip.c10k, .g-tok.c10k { --c-body: #F5BB3D; --c-mid: #F3D468; --c-ink: #14000A; }
.g-chip.c5,   .g-tok.c5   { --c-body: #979694; --c-mid: #F0EEEF; --c-ink: #14000A; }
.g-chip.c25,  .g-tok.c25  { --c-body: #12854A; --c-mid: #12854A; --c-ink: #FFFFFF; }

/* Five chips instead of seven, so they FIT: the seven needed 256 px in a
   228 px tray and were cut off at both edges on a phone. The sideways scroll
   stays as a safety for a very narrow phone, but at 390 px nothing is cut.
   Bigger, too, which is what lets the top one say 1000 instead of 1K. */
/* NO SLIDING, Martin's call 2026-08-21: "chips are still cut off on the side and
   your able to slide it can you remove the slide". A row you can push sideways
   hides half its own buttons and reads as broken. It has to FIT, so the row
   never scrolls and the chips share the width that is actually there. */
.g-tray { overflow: visible; }
.g-chip {
  flex: 1 1 0; min-width: 0; max-width: 3.1rem;
  aspect-ratio: 1; width: auto; height: auto;
  font-size: .72rem;
}
/* THE CHIP IN YOUR HAND (2026-08-21). Martin: "the black chip has a yellow glow
   around". It was a gold ring and a gold glow, which on a black chip reads as
   part of the chip and on the gold chip barely shows at all - so the one thing
   that says which chip you are about to bet with was the least clear on two of
   the five. It is white now, lifts further, and sits on a dark halo, so it
   reads the same on red, green, black, purple and gold alike. */
.g-chip.sel { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px rgba(0,0,0,.85), 0 6px 14px rgba(0,0,0,.6); transform: translateY(-3px) scale(1.04); border-radius: 50%; }

/* A chip you cannot afford is greyed rather than hidden, so the ladder still
   reads as a ladder. Martin was told the 10K is out of reach for now. */
.g-chip.poor { opacity: .34; }

/* ==========================================================================
   Round twelve (2026-08-20): the top row from Martin's new picture.
   Dark circles with white glyphs instead of gold coins, and the close is the
   only coloured one. Same five controls, same 44px hit areas.
   ========================================================================== */
.g-ic::before {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}
.g-ic { color: #FFFFFF; }
.g-ic .g-ic-f { color: #FFFFFF; }
.g-ic-svg {
  position: relative; z-index: 1; width: 1.35rem; height: 1.35rem;
  fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* the menu keeps its gold, because the gold dot on it is how you know
   something is waiting behind it */
.g-ic.g-menu-btn::before { border-color: rgba(255,215,0,.5); }
.g-ic.g-menu-btn .g-ic-f { color: var(--gold); }
/* leaving is the one red thing up here, the way the picture has it */
.g-ic.x::before { background: var(--red); border-color: #FF6B6B; }
.g-ic.x .g-ic-f { color: #FFFFFF; }

/* TOP 5 sits on the black ground now, not on the flame art */
.g-top5 { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* the balance coin, gold on black */
.g-bal i { box-shadow: 0 0 8px -1px var(--gold); }

/* The chip bar in Martin's new picture is charcoal, not the old table-felt
   red, because the ground behind it is black now and a red bar on black read
   as a leftover from the flame art. The repeat stays red: it is the one thing
   on the bar that undoes something. */
.g-foot {
  background: var(--panel);
  border: 1px solid var(--line);
}
.g-round { color: var(--text-2); }
.g-hint { color: var(--text-3); }
.g-bal { color: #FFFFFF; }
.g-bal i { background: radial-gradient(circle at 34% 30%, #FFF3A0, var(--gold) 62%, #C8A400); }

/* ==========================================================================
   The games tray (round twelve, 2026-08-20). Martin's ask: the play coin by
   the send button becomes a tray and future games live in it. Same sheet
   shape as the gift tray, from the house style.
   ========================================================================== */
.gtr { position: fixed; inset: 0; z-index: 62; }
.gtr-back { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .2s ease; }
.gtr.up .gtr-back { opacity: 1; }
.gtr-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 27rem; margin-inline: auto;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: .55rem .9rem calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease;
  box-shadow: 0 -18px 50px -20px rgba(240,41,108,.5);
}
.gtr.up .gtr-sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .gtr-back, .gtr-sheet { transition: none; } }
body.gtr-open { overflow: hidden; }

.gtr-handle {
  display: block; width: 2.4rem; height: .28rem; margin: .1rem auto .8rem;
  border-radius: 999px; background: rgba(255,255,255,.5); border: 0; padding: 0; cursor: pointer;
}
.gtr-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.gtr-head b { font-family: var(--round); font-weight: 800; font-size: 1.15rem; color: #FFFFFF; }
.gtr-x {
  margin-left: auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}

/* The games are tiles, not a list (Martin, 2026-08-20: "instead of a list,
   can you do it just the icon?"). Three across, so a fourth and a fifth game
   drop in without the sheet getting taller. Each one is the game's own art
   with its name under it. */
.gtr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.gtr-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: .85rem .4rem .7rem; cursor: pointer; text-align: center;
  font: inherit; color: inherit; min-height: 2.75rem;
}
.gtr-ic {
  width: 3.4rem; height: 3.4rem; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.gtr-ic img { width: 82%; height: 82%; object-fit: contain; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)); }
.gtr-tile.gold .gtr-ic { border-color: rgba(255,215,0,.4); box-shadow: inset 0 0 16px -8px var(--gold); }
.gtr-tile.red  .gtr-ic { border-color: rgba(225,45,45,.45); box-shadow: inset 0 0 16px -8px var(--red); }
.gtr-tile b {
  font-size: .78rem; font-weight: 800; color: #FFFFFF;
  line-height: 1.2; overflow-wrap: anywhere;
}
/* A game that does not take coins yet says so on its own tile, so two tiles
   that look the same are not read as doing the same thing. */
.gtr-tag {
  font-style: normal; font-size: .58rem; font-weight: 700;
  color: var(--text-2); background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .4rem;
}
.gtr-tile:active { background: rgba(255,255,255,.07); }

.gtr-note { margin: .8rem 0 0; text-align: center; font-size: .72rem; color: var(--text-3); }

/* a game whose row shows its own art rather than a drawn icon */
.gtr-ic img { width: 1.9rem; height: 1.9rem; object-fit: contain; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }


/* ---- 2026-08-21, Martin's three catches on the table -------------------- */

/* "the image on dragon and tiger doesnt go all the way down in the card": the
   picture used to stop 2.9rem short of the bottom to leave a plain strip for
   the X2 pill and the Pot/Me line. It now runs to the edge of the box the way
   his picture has it, and those two sit ON the picture instead of under it.
   They get a dark fade behind them so a name never lands unreadable on flames. */
.g-zone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45) 55%, rgba(0,0,0,.72));
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  pointer-events: none; z-index: 1;
}
/* Everything in the box sits above the dark fade. NOTE: .g-toks is deliberately
   NOT in this list. It is `position: absolute; inset: ...` so it can fill the
   box and spread the chips across it by percentage; forcing `relative` on it
   collapsed it to nothing and every chip landed on the same point, some of them
   outside the box entirely (2026-08-21, caught by looking at a real repeat).
   It only needs the z-index, which works on an absolute box already. */
.g-zone > .g-mult, .g-zone > .g-pm, .g-zone > .g-suited, .g-zone > h5 { position: relative; z-index: 2; }
.g-zone > .g-toks { z-index: 2; }
/* the pot line is the last thing in the box, hard against the bottom */
.g-zone > .g-pm { margin-top: auto; }

/* "the chips are cut off on top": a chosen chip lifts 2 px and wears a glow,
   and the row had no room above it for either. */
.g-tray { padding: .55rem .1rem .35rem; }

/* The board sits in the middle of the space above the chips (2026-08-21).
   Martin's picture is drawn on a square; a phone is much taller, so once the
   table went full-height there was a band of black left over. It cannot go to
   the three boxes - twice, letting them grow cropped the animals - so the group
   from the cards down to the round line is centred in it instead, and the chips
   stay on the bottom where a thumb is. */
.gpanel .g-mid { margin-top: auto; }
.gpanel .g-round { margin-bottom: auto; }


/* Narrow phones (2026-08-21). The row must fit without sliding, so on a small
   screen the coins and the repeat arrow give up their spare width first and the
   chips keep theirs: a chip is what you tap, and it has to stay a 44 px target.
   Measured at 360 px: without this the chips fall to 39. */
@media (max-width: 400px) {
  .g-foot { gap: .3rem; padding: .45rem .4rem; }
  .g-bal { font-size: .72rem; min-width: 3.1rem; gap: .15rem; }
  .g-bal i { width: .85rem; height: .85rem; }
  .g-rep { width: 1.85rem; height: 1.85rem; font-size: .9rem; }
  .g-tray { gap: .15rem; }
}

/* the build stamp in How it works: quiet, it is a serial number not a feature */
.g-note.build { opacity: .55; font-size: .62rem; letter-spacing: .04em; }


/* Betting is shut for the last few seconds of the clock (2026-08-21). The boxes
   go quiet and stop taking a tap, so the screen and the server agree about when
   it is too late. */
.gpanel.shut .g-zone { opacity: .55; }
.gpanel.shut .g-zone, .gpanel.shut .g-chip, .gpanel.shut .g-rep { pointer-events: none; }
.g-clock.shut b { color: #FF9A3C; }