/* 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. */

: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;
  --g-h: min(62dvh, 580px);
  --g-art-bg: none; --g-art-tie: none;
  --g-art-dragon: url(/game-art/dragon.png); --g-art-tiger: url(/game-art/tiger.png);
  --g-art-card-red: url(/game-art/card-red.png); --g-art-card-blue: url(/game-art/card-blue.png);
  --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(--mono); font-size: .6rem; font-weight: 700; color: #FFE45C; line-height: 1.5;
  background: #05070C; 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(--mono); 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; }
.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;
  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: 16px 16px 0 0;
  background:
    url(/game-art/flames-left.jpg) left top / auto 100% no-repeat,
    url(/game-art/flames-right.jpg) right top / auto 100% no-repeat,
    radial-gradient(ellipse 60% 70% at 8% 40%, rgba(255,110,0,.55), transparent 70%),
    radial-gradient(ellipse 60% 70% at 92% 40%, rgba(40,120,255,.55), transparent 70%),
    linear-gradient(90deg, #3A0A0A 0%, #8A1A0E 28%, #3C1230 50%, #0E2A7A 72%, #07143A 100%);
  background-color: #2A0C12;
  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: 16px 16px 0 0; } }
.gpanel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0, rgba(58,10,10,.55) 18%, rgba(60,18,48,.7) 50%, rgba(14,42,122,.55) 82%, transparent 100%); }
.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(--mono); 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(--mono); font-size: .56rem; color: rgba(246,238,220,.7); }

/* cards and clock */
.g-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; padding: 0 .6rem; flex: 0 0 auto; }
.g-card { justify-self: center; width: 3.4rem; height: 4.8rem; perspective: 400px; }
.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: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.g-card .g-back { border: 2px solid var(--g-cream); background: var(--g-art-card-red) center / cover, repeating-linear-gradient(45deg, #C1121F 0 3px, #E5383B 3px 6px); }
.g-card.t .g-back { background: var(--g-art-card-blue) center / cover, repeating-linear-gradient(45deg, #1C4FD6 0 3px, #3A7BFF 3px 6px); }
.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%); }
.g-card .g-face { transform: rotateY(180deg); background: #FBF8F0; color: #1A1A1A; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5rem; line-height: 1; font-family: var(--sans); }
.g-card .g-face small { font-size: .95rem; line-height: 1; margin-top: .1rem; }
.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: 3.6rem; height: 3.6rem; 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: -.3rem; width: .95rem; height: .6rem; border-radius: 99px 99px 0 0; background: #FF8A1F; }
.g-clock::before { left: .3rem; transform: rotate(-30deg); } .g-clock::after { right: .3rem; transform: rotate(30deg); }
.g-clock b { font-family: var(--mono); font-size: 1.45rem; font-weight: 900; line-height: 1; }
.g-clock small { font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; max-width: 3rem; }
.g-clock.word b { font-size: .62rem; 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(--mono); 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(--mono); 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 */
.g-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; flex: 1 1 auto; min-height: 7rem; }
.g-zone {
  position: relative; border-radius: 10px; 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); --za: var(--g-art-tie); }
.g-zone.t { --zb: #6AA0FF; --zg: linear-gradient(180deg, #1F4FB8, #0C1F5E); }
.g-zone h5 { margin: 0; font-family: var(--mono); 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; font-size: 3.6rem; opacity: .3; filter: saturate(.7); pointer-events: none; }
.g-zone .g-art.word { font-family: var(--mono); font-weight: 900; font-size: 1.7rem; color: var(--g-gold); opacity: .5; filter: none; }
.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(--mono); font-size: .48rem; font-weight: 900; color: #05070C; border: 2px dashed rgba(255,255,255,.85); box-shadow: 0 2px 5px rgba(0,0,0,.6);
  animation: g-drop .35s ease-out;
}
@keyframes g-drop { from { transform: translateY(-18px) scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
.g-tok.c5 { background: #5B8DEF; } .g-tok.c10 { background: #3BFF9E; } .g-tok.c25 { background: #FF9A3C; } .g-tok.c50 { background: #FF3DA6; }
.g-tok.more { background: rgba(5,7,12,.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(--mono); 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(--mono); 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; }
.g-zone .g-suited { position: relative; z-index: 2; margin-top: .15rem; font-family: var(--mono); font-size: .5rem; line-height: 1.25; color: #FFE9A8; background: rgba(0,0,0,.45); border: 1px dashed rgba(255,211,107,.6); border-radius: 8px; padding: .12rem .45rem; display: flex; flex-direction: column; align-items: center; }
.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(--mono); font-size: .56rem; color: #FFE9A8; padding-left: .2rem; flex: 0 0 auto; display: flex; justify-content: space-between; }
.g-foot { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; flex: 0 0 auto; background: linear-gradient(180deg, #4A1008, #2A0804); border: 1px solid rgba(255,211,107,.5); border-radius: 999px; }
.g-bal { display: flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .78rem; font-weight: 800; color: var(--g-cream); flex: 0 0 auto; }
.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; display: flex; justify-content: center; gap: .4rem; }
.g-chip { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px dashed rgba(255,255,255,.85); padding: 0; font-family: var(--mono); font-size: .66rem; font-weight: 900; color: #05070C; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.g-chip.c5 { background: #5B8DEF; } .g-chip.c10 { background: #3BFF9E; } .g-chip.c25 { background: #FF9A3C; } .g-chip.c50 { background: #FF3DA6; }
.g-chip.sel { box-shadow: 0 0 0 2px #FFE45C, 0 0 14px rgba(255,228,92,.9); transform: translateY(-2px); }
.gpanel.locked .g-chip, .gpanel.locked .g-rep { opacity: .4; }
.g-rep { flex: 0 0 auto; font-family: var(--mono); 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(--mono); 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(--mono); 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(--mono); 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(5,7,12,.6); flex: 0 0 auto; }

/* the ribbon over the hint */
.g-ribbon {
  position: absolute; left: 50%; bottom: .45rem; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  font-family: var(--mono); 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, #3A3F4A, #1C2028); color: #F6EEDC; border-color: #8C9FB8; 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(5,7,12,.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(--mono); 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(--mono); 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(--mono); color: #FFE45C; }
.g-sheet li .g-pos { font-family: var(--mono); 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(--mono); 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: 8px; padding: .5rem .7rem; background: #0A0F17; }
.g-sheet .g-toggle button { font-family: var(--mono); 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(--mono); 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(--mono); 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; }
.g-clock {
  width: 3.9rem; height: 5.1rem; border-radius: 0; box-shadow: none;
  background: var(--g-art-clock) center / contain no-repeat; padding-top: 1.3rem; 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: 2.55rem; height: 2.55rem; 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); }
.g-zone.d .g-art { font-size: 0; background: var(--g-art-dragon) center 38% / contain no-repeat; opacity: .95; filter: none; inset: .2rem .25rem 2.9rem; }   /* the one and only head, whole and centred (Martin 2026-08-19: faces cut off; then two heads overlapping) */
.g-zone.t .g-art { font-size: 0; background: var(--g-art-tiger) center 38% / contain no-repeat; opacity: .95; filter: none; inset: .2rem .25rem 2.9rem; }
.g-zone.x .g-art { font-size: 1.7rem; background: none; }
.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); }
.g-chip, .g-tok { border: 0; color: #F6EEDC; text-shadow: 0 0 6px #000, 0 0 2px #000; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: none; }
/* A soft grey disc under each chip picture, so the dark chip body reads on the dark tray and in the boxes. */
.g-chip.c5, .g-tok.c5 { background: url(/game-art/chip-5.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); }
.g-chip.c10, .g-tok.c10 { background: url(/game-art/chip-10.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); }
.g-chip.c25, .g-tok.c25 { background: url(/game-art/chip-25.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); }
.g-chip.c50, .g-tok.c50 { background: url(/game-art/chip-50.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); }
.g-chip { font-size: .78rem; font-weight: 900; color: #FFFFFF; text-shadow: 0 0 4px #000, 0 0 8px #000, 0 1px 0 #000; }
.g-tok { color: #FFFFFF; text-shadow: 0 0 4px #000, 0 0 6px #000; }
.g-chip { width: 2.5rem; height: 2.5rem; font-size: .72rem; }
.g-chip.sel { box-shadow: 0 0 0 2px #FFE45C, 0 0 16px rgba(255,228,92,.9); transform: translateY(-2px); border-radius: 50%; }
.g-tok { width: 1.45rem; height: 1.45rem; font-size: .5rem; }
.g-tok.more { background-image: none; background-color: rgba(5,7,12,.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(--mono); 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: 16px; 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(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; }
.g-winbig b { display: block; font-family: var(--mono); 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-chip { width: 2.05rem; height: 2.05rem; font-size: .62rem; }
.g-chip.c100, .g-tok.c100 { background: url(/game-art/chip-5.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); filter: hue-rotate(52deg) saturate(1.2); }
.g-chip.c500, .g-tok.c500 { background: url(/game-art/chip-25.png) center / cover no-repeat, radial-gradient(circle, #3A4150 0 62%, transparent 64%); filter: hue-rotate(18deg) saturate(1.5) brightness(1.15); }
.g-chip.c100.sel, .g-chip.c500.sel { filter: none; }
.g-chip.c100.sel { background-image: url(/game-art/chip-5.png); filter: hue-rotate(52deg) saturate(1.2) drop-shadow(0 0 6px #FFE45C); }
.g-chip.c500.sel { background-image: url(/game-art/chip-25.png); filter: hue-rotate(18deg) saturate(1.5) brightness(1.15) drop-shadow(0 0 6px #FFE45C); }
.g-max { flex: 0 0 auto; font-family: var(--mono); font-size: .56rem; font-weight: 900; letter-spacing: .06em; color: #FFE9A8; background: rgba(0,0,0,.35); border: 1px solid var(--g-gold); border-radius: 999px; padding: .4rem .45rem; }
.g-max.sel { background: #FFE45C; color: #3A1A00; box-shadow: 0 0 12px rgba(255,228,92,.9); }
.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 */
.g-streak { flex: 0 0 auto; margin-left: auto; font-family: var(--mono); font-size: .52rem; font-weight: 800; color: #FFE45C; background: rgba(0,0,0,.5); border: 1px solid rgba(255,211,107,.55); border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; }
/* 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 #05070C; font-style: normal; font-size: .45rem; display: flex; align-items: center; justify-content: center; line-height: 1; }
.g-dot.on { background: #FF3DA6; box-shadow: 0 0 8px #FF3DA6; }
.g-dot.tick { background: #3BFF9E; color: #05070C; font-weight: 900; }
.g-dot.hidden { display: none; }
/* the daily chips card */
.g-daily { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 8; text-align: center; padding: .8rem 1.4rem; border-radius: 16px; 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; min-width: 11rem; cursor: pointer; }
.g-daily small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; }
.g-daily b { display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.g-daily em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; margin-top: .15rem; }
.g-days { display: flex; gap: .25rem; justify-content: center; margin-top: .45rem; }
.g-days i { width: 1.25rem; height: 1.25rem; border-radius: 50%; font-style: normal; font-family: var(--mono); font-size: .55rem; display: flex; align-items: center; justify-content: center; background: rgba(58,26,0,.12); border: 1px solid rgba(58,26,0,.35); }
.g-days i.on { background: #3A1A00; color: #FFE9A8; }
.g-daily.out { animation: g-winout .4s ease-in forwards; }
/* missions */
.g-mis { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; background: #0A0F17; 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(--mono); color: #FFE45C; white-space: nowrap; }
.g-mis-bar { height: .45rem; border-radius: 999px; background: #1B2637; 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(59,255,158,.5); }
.g-mis.done .g-mis-bar i { background: #3BFF9E; }
.g-mis small { font-family: var(--mono); 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: 8px; padding: .45rem .3rem; text-align: center; font-family: var(--mono); 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: #3BFF9E; }
.g-streakline { margin: 0; font-family: var(--mono); font-size: .7rem; color: #FFE45C; }
.g-k { margin: .2rem 0 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.g-road { display: flex; gap: .2rem; overflow-x: auto; background: #0A0F17; border: 1px solid var(--line); border-radius: 8px; 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: #3BFF9E; background: rgba(59,255,158,.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(--mono); font-size: .5rem; color: var(--text-3); }
.g-gold { margin: .3rem 0 0; font-family: var(--mono); font-size: .68rem; color: var(--g-gold); text-shadow: 0 0 8px rgba(255,211,107,.5); }
.g-boss { font-family: var(--mono); 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: 8px; 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(--mono); 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; }
.g-max { padding: .32rem .4rem; font-size: .52rem; }
@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: #05070C; bottom: auto; max-height: 100%; border-radius: 0 0 14px 14px; 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: 10px; 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: 6px;
  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 6px 6px; }
.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(--mono); font-size: .62rem; letter-spacing: .04em; white-space: nowrap; }
.g-mrow .g-mhint.on { color: #FF3DA6; text-shadow: 0 0 8px rgba(255,61,166,.7); }
.g-mrow .g-mhint.tick { color: #3BFF9E; text-shadow: 0 0 8px rgba(59,255,158,.6); }
.g-mrow .g-mhint.dim { color: var(--text-3); }