/* Online table — navy felt, leather rail with a warm glow, four-colour deck, clay-style chips.
   Self-contained dark styling; sizes follow the table box (container units) so phone, tablet, PC and TV all fit. */
.gt {
  --tc: #4ea1ff;
  --navy-0: #050a1a;
  --navy-1: #0b1838;
  --felt-a: #1a3a86;
  --felt-b: #0f2558;
  --felt-c: #0a1a42;
  --rail-a: #1b2236;
  --rail-b: #0c111e;
  --glow: #f2a65a;
  --gold: #f3c164;
  --ink: #f2f5fa;
  --mute: #93a1bd;
  position: relative; display: grid; color: var(--ink); background: radial-gradient(120% 80% at 50% 40%, #0d1a3a, var(--navy-0));
  font-family: "Noto Sans", "Noto Sans JP", system-ui, sans-serif; user-select: none; -webkit-user-select: none; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gt .num { font-variant-numeric: tabular-nums; }
.gt button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; border: 0; }
.gt button:disabled { opacity: .45; cursor: default; }

/* ---------- header ---------- */
.gt-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; font-size: 13px; }
.gt-tno { display: inline-flex; align-items: baseline; gap: .35em; background: var(--tc); color: #06101f; font-weight: 900; border-radius: 999px; padding: 1px 11px; line-height: 1.5; }
.gt-tno small { font-size: .66em; letter-spacing: .12em; }
.gt-lv { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; white-space: nowrap; }
.gt-lv small { font-size: .7em; letter-spacing: .12em; color: var(--mute); font-weight: 700; }
.gt-lv .ante { color: var(--gold); }
.gt-sp { flex: 1; }
.gt-hno { color: var(--mute); font-size: .85em; font-weight: 700; white-space: nowrap; }
@media (max-width: 400px) { .gt-phone .gt-hno, .gt-phone .gt-lv > small:first-child { display: none; } .gt-phone .gt-head { gap: 8px; } }

/* ---------- stage + table ---------- */
.gt-stage { position: relative; min-height: 0; container-type: size; }
.gt-rail {
  position: absolute; inset: 5cqh 9cqw; border-radius: 999px;
  background: linear-gradient(160deg, var(--rail-a), var(--rail-b) 60%), var(--rail-b);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -3px 8px rgba(0, 0, 0, .5);
}
.gt-felt {
  position: absolute; inset: 3.2cqmin; border-radius: 999px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 42%, var(--felt-a), var(--felt-b) 58%, var(--felt-c)),
    var(--felt-b);
  box-shadow: 0 0 0 1.5px var(--glow), 0 0 14px 2px rgba(242, 166, 90, .55), inset 0 0 26px rgba(242, 166, 90, .28), inset 0 0 70px rgba(0, 0, 0, .45);
}
/* subtle cloth texture */
.gt-felt::before { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.gt-line { position: absolute; inset: 9cqmin; border-radius: 999px; border: 1px solid rgba(160, 190, 255, .16); }
.gt-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.gt-layer, .gt-fly { position: absolute; inset: 0; pointer-events: none; }
.gt-layer > * { pointer-events: auto; }
.gt-center {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; justify-items: center; gap: 1.2cqh; text-align: center; width: 66cqw;
}

/* ---------- pots ---------- */
.gt-pot { display: grid; justify-items: center; gap: 4px; }
.gt-pot > span:last-child { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(3, 8, 22, .62); border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: clamp(13px, 3.4cqw, 22px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gt-pot small, .gt-sides small { font-size: .62em; letter-spacing: .14em; color: var(--mute); font-weight: 800; }
.gt-sides { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gt-sides span { display: inline-flex; gap: 6px; align-items: baseline; background: rgba(3, 8, 22, .5); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: clamp(11px, 2.6cqw, 16px); box-shadow: inset 0 0 0 1px rgba(243, 193, 100, .35); }
.gt-total { font-size: clamp(10px, 2.2cqw, 13px); color: var(--mute); font-weight: 700; }
.gt-board { display: flex; gap: .35em; justify-content: center; font-size: min(4.3cqw, 3.4cqh); }
.gt-wait { color: #c9d6f2; font-weight: 800; font-size: clamp(13px, 3.4cqw, 20px); background: rgba(3, 8, 22, .5); padding: 8px 16px; border-radius: 999px; }

/* ---------- result: who took the pot ---------- */
.gt-result { display: grid; gap: 6px; animation: gtPop .35s cubic-bezier(.2, .8, .2, 1) both; }
.gt-result .res { background: linear-gradient(180deg, rgba(10, 20, 48, .94), rgba(5, 10, 26, .94)); border-radius: 14px; padding: 8px 16px 9px; box-shadow: 0 0 0 1.5px var(--gold), 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(243, 193, 100, .35); }
.gt-result small { display: block; font-size: 10px; letter-spacing: .16em; color: var(--gold); font-weight: 800; }
.gt-result .who { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gt-result .nm { font-weight: 900; font-size: clamp(15px, min(4.4cqw, 5.4cqh), 30px); }
.gt-result .won { font-weight: 900; font-size: clamp(13px, min(3.8cqw, 4.6cqh), 26px); color: var(--gold); }
.gt-result .hand { font-weight: 800; font-size: clamp(11px, min(2.8cqw, 3.4cqh), 17px); color: #ffe2a6; }
.gt-result .hand.quiet { color: var(--mute); }
@keyframes gtPop { from { opacity: 0; transform: scale(.86); } }

/* ---------- cards ---------- */
.pc {
  position: relative; display: inline-block; flex: none; width: 2.5em; height: 3.5em; border-radius: .26em; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #f2f2ee); color: #121318;
  box-shadow: 0 .06em .18em rgba(0, 0, 0, .45), inset 0 0 0 .03em rgba(0, 0, 0, .12);
}
.pc .ix { position: absolute; left: .16em; top: .14em; display: grid; justify-items: center; gap: .04em; }
.pc .ix b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: .95em; letter-spacing: -.04em; }
.pc .ix i { width: .62em; height: .62em; display: block; }
.pc .pip { position: absolute; right: .2em; bottom: .26em; width: 1.35em; height: 1.35em; }
.pc svg { width: 100%; height: 100%; display: block; }
.pc .face { position: absolute; inset: .32em .22em .26em .78em; border-radius: .14em; display: grid; place-items: center; align-content: center; gap: .05em;
  background: linear-gradient(160deg, #fff4cf, #f6d27b 55%, #e2a93b); box-shadow: inset 0 0 0 .05em currentColor, inset 0 0 0 .1em #fff8e0; }
.pc .face b { font-family: Georgia, "Times New Roman", serif; font-size: 1.05em; font-weight: 700; }
.pc .face i { width: .62em; height: .62em; display: block; }
.pc.h { color: #d4202c; }
.pc.c { color: #0f7a3d; }
.pc.d { color: #1d4fd8; }
.pc.back {
  background:
    repeating-linear-gradient(45deg, rgba(243, 193, 100, .28) 0 .05em, transparent .05em .32em),
    repeating-linear-gradient(-45deg, rgba(243, 193, 100, .28) 0 .05em, transparent .05em .32em),
    linear-gradient(160deg, #1f3e8f, #0c1d4d);
  box-shadow: inset 0 0 0 .1em #f6f1e2, inset 0 0 0 .14em rgba(243, 193, 100, .8), 0 .06em .18em rgba(0, 0, 0, .45);
}
.pc.slot { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(190, 210, 255, .18); }
.pc.xs { font-size: clamp(7px, 2.2cqw, 12px); }
.pc.xs .pip, .pc.xs .face { display: none; }
.pc.xs .ix { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pc.xs .ix b { font-size: 1.25em; }
.pc.xs .ix i { width: .95em; height: .95em; }
.pc.lg { font-size: 26px; }
.pc.deal { animation: gtFlip .38s cubic-bezier(.2, .8, .2, 1) both; }
.pc.hi { box-shadow: 0 0 0 .08em var(--gold), 0 0 .5em rgba(243, 193, 100, .8); transform: translateY(-.12em); }
.pc.dim { filter: brightness(.55) saturate(.6); }
@keyframes gtFlip { from { opacity: 0; transform: rotateY(90deg) translateY(-.3em); } }

/* ---------- chips ---------- */
/* Simple, slim chips: a flat coloured disc seen slightly from above, thin edge, no stripes, no backing. */
.gchips { display: inline-flex; align-items: flex-end; gap: .08em; font-size: clamp(9px, 2.4cqmin, 15px); background: none; }
.gchips .gstack { position: relative; width: 1.2em; height: calc(.46em + (var(--n, 1) - 1) * .12em + .1em); }
.gchip {
  --c: #2f6fe6;
  position: absolute; left: 0; bottom: calc(var(--i) * .12em + .08em); width: 1.2em; height: .46em; border-radius: 50%;
  background: radial-gradient(ellipse 90% 80% at 50% 30%, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 75%);
  box-shadow: 0 .08em 0 color-mix(in srgb, var(--c) 62%, #000);
}
.gchip:first-child { box-shadow: 0 .08em 0 color-mix(in srgb, var(--c) 62%, #000), 0 .14em .2em rgba(0, 0, 0, .35); }
.gchip.blue { --c: #2f6fe6; }
.gchip.green { --c: #1f9d55; }
.gchip.red { --c: #e0393e; }
.gchip.purple { --c: #8150e6; }
.gchip.orange { --c: #f39a2b; }
.gchip.black { --c: #3a3f4c; }
.gchips.pile { font-size: clamp(10px, 2.8cqmin, 17px); }
.gchips.flying { position: absolute; z-index: 20; transform: translate(-50%, -50%); transition: left .7s cubic-bezier(.3, .7, .2, 1), top .7s cubic-bezier(.3, .7, .2, 1), opacity .4s .9s; }
.gchips.flying.go { opacity: 0; }

/* ---------- seats ---------- */
.gt-seat {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; display: grid; justify-items: center;
  font-size: clamp(9px, min(2.7cqw, 1.9cqh), 15px); width: 7.4em; text-align: center;
}
.gt-seat .av { position: relative; width: 3.4em; height: 3.4em; border-radius: 50%; display: grid; place-items: center; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #3a4a72, #1a2442); box-shadow: 0 0 0 .14em rgba(255, 255, 255, .14), 0 .3em .7em rgba(0, 0, 0, .5); }
.gt-seat .ini { font-weight: 900; font-size: 1.35em; }
.gt-seat .ring { position: absolute; inset: -.32em; border-radius: 50%; display: none;
  background: conic-gradient(var(--tc) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(1.7em + 1px), #000 calc(1.7em + 2px)); mask: radial-gradient(circle, transparent calc(1.7em + 1px), #000 calc(1.7em + 2px)); }
.gt-seat.acting .ring { display: block; }
.gt-seat .ring.bank { background: conic-gradient(var(--gold) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .1) 0); }
.gt-seat .ring.hurry { background: conic-gradient(#ff4d5a calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .1) 0); }
.gt-seat.acting .av { box-shadow: 0 0 0 .14em var(--tc), 0 0 1.4em var(--tc); }
.gt-seat .plate { margin-top: -.5em; z-index: 2; display: grid; min-width: 6.4em; max-width: 7.4em; padding: .25em .6em .3em; border-radius: .6em;
  background: linear-gradient(180deg, rgba(14, 22, 44, .96), rgba(6, 10, 22, .96)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 .3em .8em rgba(0, 0, 0, .5); }
.gt-seat .nm { font-size: .92em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #dfe6f5; }
.gt-seat .st { font-size: 1.05em; font-weight: 900; color: var(--gold); }
.gt-seat .hole { display: flex; gap: .12em; margin-bottom: -.9em; z-index: 0; }
.gt-seat .hole .pc:first-child { transform: rotate(-7deg); }
.gt-seat .hole .pc:last-child { transform: rotate(7deg); }
.gt-seat .hole.mucked { opacity: .5; }
.gt-seat.me .av { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); color: #06101f; }
.gt-seat.folded .av, .gt-seat.folded .plate, .gt-seat.out, .gt-seat.away .av { opacity: .42; }
.gt-seat.lost .av, .gt-seat.lost .plate { opacity: .55; }
.gt-seat.win .av { box-shadow: 0 0 0 .2em var(--gold), 0 0 1.8em rgba(243, 193, 100, .9); }
.gt-seat.win .plate { box-shadow: 0 0 0 1.5px var(--gold), 0 0 1.2em rgba(243, 193, 100, .55); }
.gt-seat.empty { width: auto; }
.gt-seat.empty .av { width: 2.4em; height: 2.4em; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(160, 190, 255, .2); }
.gt-seat.empty .no { font-size: .9em; color: rgba(190, 210, 255, .35); font-weight: 700; }

/* action tags */
.gt-seat .tag { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin-top: .25em; z-index: 4; white-space: nowrap;
  font-size: .82em; font-weight: 900; letter-spacing: .06em; padding: .14em .7em; border-radius: 999px; animation: gtPop .25s both; }
.gt-seat.tagup .tag { top: auto; bottom: 100%; margin: 0 0 .25em; }
.tag.sb, .tag.bb { background: #24324f; color: #c7d4f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.tag.check { background: #3a4660; color: #e6ecf8; }
.tag.call { background: #1f6feb; color: #fff; }
.tag.bet { background: #f08a16; color: #1b0f00; }
.tag.raise { background: #f05a16; color: #fff; }
.tag.reraise { background: #d4202c; color: #fff; box-shadow: 0 0 .8em rgba(212, 32, 44, .7); }
.tag.fold { background: #151b2a; color: #7f8aa3; }
.tag.wait { background: #151b2a; color: var(--mute); font-weight: 700; }
.tag.win { background: linear-gradient(180deg, #ffd884, #e8a73a); color: #2a1700; font-size: .95em; box-shadow: 0 0 1em rgba(243, 193, 100, .8); }

/* ALL IN marker (chip style) */
.gt-seat .allin { position: absolute; right: -.4em; top: 1.2em; z-index: 5; width: 3.2em; height: 3.2em; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #2a0a0e 0 52%, transparent 53%), repeating-conic-gradient(from 10deg, #d4202c 0 30deg, #ffd6d9 30deg 45deg);
  box-shadow: 0 0 0 .12em #8f0f18, 0 0 1em rgba(212, 32, 44, .75); animation: gtPop .3s both; }
.gt-seat .allin b { font-size: .62em; font-weight: 900; letter-spacing: .02em; color: #fff; }

/* bets in front of the seats */
.gt-bet { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: .3em; }
.gt-bet .amt { font-size: clamp(10px, 2.5cqw, 15px); font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 6px rgba(0, 0, 0, .5); }

/* DEALER button */
.gt-dealer { --d: clamp(28px, 7.4cqmin, 52px); position: absolute; transform: translate(-50%, -50%); z-index: 2; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ffffff, #e9e9e4); color: #111; display: grid; place-items: center; align-content: center;
  box-shadow: inset 0 0 0 calc(var(--d) * .05) #fff, inset 0 0 0 calc(var(--d) * .08) #c4c8d0, 0 .2em .5em rgba(0, 0, 0, .55); font-size: calc(var(--d) * .2); }
.gt-dealer b { font-weight: 900; letter-spacing: .02em; line-height: 1; }
.gt-dealer i { width: 1.6em; height: 1.6em; display: block; }
.gt-dealer svg { width: 100%; height: 100%; }

/* ---------- dock: my cards + actions ---------- */
.gt-dock { display: grid; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(8, 14, 32, .96), #060b18); box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
.gt-mine { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.gt-hole { display: flex; gap: 6px; }
.gt-hole .pc:first-child { transform: rotate(-4deg); }
.gt-hole .pc:last-child { transform: rotate(4deg); }
.gt-hole .pc.hi:first-child { transform: rotate(-4deg) translateY(-4px); }
.gt-hole .pc.hi:last-child { transform: rotate(4deg) translateY(-4px); }
.gt-hole.folded { opacity: .35; }
.gt-mine-info { display: grid; gap: 1px; min-width: 0; }
.gt-mine-info .made { color: var(--gold); font-weight: 900; font-size: 15px; }
.gt-mine-info .stk { font-weight: 900; font-size: 18px; display: flex; gap: 6px; align-items: baseline; }
.gt-mine-info small { color: var(--mute); font-size: 10px; letter-spacing: .14em; }
.gt-mine-info .bank { color: var(--mute); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.gt-mine-empty { color: var(--mute); font-size: 13px; }

.gt-bar { display: grid; gap: 8px; min-height: 60px; align-content: end; }
.gt-status { text-align: center; color: #b9c6e2; font-weight: 800; font-size: 14px; padding: 4px 0; }
.gt-status.small { font-size: 12px; color: var(--mute); }
.gt-after { display: grid; gap: 6px; }
.gt-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.gbtn { min-height: 56px; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 6px; font-weight: 900; font-size: 16px; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 0 rgba(0, 0, 0, .35); transition: transform .08s, filter .15s; touch-action: manipulation; }
.gbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(0, 0, 0, .35); }
.gbtn small { font-size: 11px; font-weight: 700; opacity: .85; letter-spacing: 0; }
.gbtn.fold { background: linear-gradient(180deg, #3b2230, #2a1520); color: #ffb1bb; }
.gbtn.check, .gbtn.call { background: linear-gradient(180deg, #2f6fe6, #1c4fb8); color: #fff; }
.gbtn.raise { background: linear-gradient(180deg, #ffbf5c, #f08a16); color: #2a1500; }
.gbtn.back { background: #1c2438; color: #c4cee6; }
.gbtn.show { background: linear-gradient(180deg, #ffd884, #e8a73a); color: #2a1700; }
.gbtn.go { grid-column: span 2; }
.gt-timebar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gt-timebar i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--tc); transition: width .15s linear; }
.gt-timebar.other i { background: rgba(190, 210, 255, .45); }
.gt-timebar.bank i { background: var(--gold); }
.gt-timebar.hurry i { background: #ff4d5a; }

/* pre-actions while waiting */
.gt-pre { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.gpre { min-height: 44px; border-radius: 12px; background: #131b2e; color: #c4cee6; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gpre .box { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 2px #5b6886; flex: none; }
.gpre.on { background: #16274c; color: #fff; box-shadow: inset 0 0 0 1.5px var(--tc); }
.gpre.on .box { background: var(--tc); box-shadow: none; }

/* raise panel */
.gt-raise { display: grid; gap: 10px; }
.gt-dock { position: relative; }
.gt-raise .sheet { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 10; display: grid; gap: 10px; padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(10, 17, 36, .97), rgba(6, 11, 24, .98)); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45), 0 -1px 0 rgba(243, 193, 100, .3); animation: gtSheet .2s ease-out both; }
@keyframes gtSheet { from { opacity: 0; transform: translateY(12px); } }
.gt-raise .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gpst { min-height: 44px; border-radius: 10px; background: #18213a; color: #e6ecf8; display: grid; place-items: center; align-content: center; gap: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gpst b { font-size: 13px; font-weight: 900; }
.gpst small { font-size: 10px; color: var(--mute); font-weight: 700; }
.gpst.on { background: #2a1e08; box-shadow: inset 0 0 0 1.5px var(--gold); }
.gpst.on small { color: var(--gold); }
.gpst.allin { background: linear-gradient(180deg, #4a1218, #2c0a0e); }
.gpst.allin b { color: #ffb1bb; }
.gt-raise .row1 { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.gstep { height: 44px; border-radius: 12px; background: #18213a; font-size: 22px; font-weight: 900; color: #e6ecf8; }
.gt-raise input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; touch-action: none; }
.gt-raise input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #f08a16 var(--fill, 0%), #24304d var(--fill, 0%)); }
.gt-raise input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #f08a16 var(--fill, 0%), #24304d var(--fill, 0%)); }
.gt-raise input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%;
  background: radial-gradient(circle, #2a1500 0 34%, transparent 36%), repeating-conic-gradient(#ffbf5c 0 30deg, #fff2d6 30deg 45deg); box-shadow: 0 0 0 3px #f08a16, 0 4px 10px rgba(0, 0, 0, .5); }
.gt-raise input[type=range]::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: radial-gradient(circle, #2a1500 0 34%, transparent 36%), repeating-conic-gradient(#ffbf5c 0 30deg, #fff2d6 30deg 45deg); box-shadow: 0 0 0 3px #f08a16, 0 4px 10px rgba(0, 0, 0, .5); }
.amtbox { display: grid; }
.gt-raise .amt { width: 100%; min-width: 0; min-height: 56px; border-radius: 14px; border: 0; background: #0d1426; color: var(--gold); text-align: center; font-size: 20px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(243, 193, 100, .45); user-select: text; -webkit-user-select: text; }
.gt-raise .gt-acts { grid-template-columns: 1fr 1.3fr 1.6fr; grid-auto-flow: row; }
.gt-raise .gbtn.go { grid-column: auto; font-size: 15px; }

.gt-away { display: grid; gap: 8px; text-align: center; color: var(--gold); font-weight: 800; font-size: 13px; }

/* ---------- phone / player page ---------- */
.gt-phone { grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 22px; height: calc(100dvh - var(--sat) - var(--nh) - var(--sab) - 18px); min-height: 440px; }
.gt-phone[data-orient="portrait"] .gt-rail { inset: 7cqh 13cqw 6cqh; }

/* Wide box (PC, tablet, phone sideways): table across, dock split into cards | actions. */
.gt-phone[data-orient="landscape"] .gt-rail { inset: 9cqh 9cqw 9cqh; }
.gt-phone[data-orient="landscape"] .gt-center { width: 44cqw; }
.gt-phone[data-orient="landscape"] .gt-board { font-size: min(2.9cqw, 5.4cqh); }
.gt-phone[data-orient="landscape"] .gt-seat { font-size: clamp(9px, min(1.55cqw, 2.6cqh), 15px); }
.gt-phone[data-orient="landscape"] .pc.xs { font-size: clamp(7px, 1.4cqw, 12px); }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .gt-phone .gt-dock { grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.25fr); align-items: end; gap: 16px; padding: 10px 16px 14px; }
  .gt-phone .gt-bar { min-height: 0; position: relative; }
  .gt-phone .gt-raise .presets { grid-template-columns: repeat(8, 1fr); }
}
/* Phone held sideways: table on the left, cards and buttons in a column on the right. */
@media (orientation: landscape) and (max-height: 540px) {
  .gt-phone { height: calc(100dvh - var(--sat) - var(--sab) - 12px); min-height: 0; grid-template-columns: 1fr minmax(250px, 36%); grid-template-rows: auto minmax(0, 1fr); border-radius: 16px; }
  .gt-phone .gt-head { grid-column: 1 / -1; padding: 4px 10px; }
  .gt-phone .gt-stage { grid-row: 2; grid-column: 1; }
  .gt-phone .gt-dock { grid-row: 2; grid-column: 2; grid-template-columns: 1fr; align-content: end; gap: 8px; padding: 6px 8px 8px; }
  .gt-phone .gt-mine { min-height: 0; }
  .gt-phone .pc.lg { font-size: 17px; }
  .gt-phone .gbtn { min-height: 46px; font-size: 14px; }
  .gt-phone .gt-raise .sheet { position: static; padding: 0; background: none; box-shadow: none; border-radius: 0; animation: none; }
  .gt-phone .gt-raise .presets { grid-template-columns: repeat(4, 1fr); }
  .gt-phone .gpst { min-height: 36px; }
}

/* ---------- TV spectator ---------- */
.gt-tv { grid-template-rows: auto 1fr; height: 100%; border-radius: 1vw; }
.gt-tv .gt-head { padding: 1vh 1.4vw; font-size: 2.1vh; }
.gt-tv .gt-rail { inset: 8cqh 7cqw; }
.gt-tv .gt-center { width: 46cqw; }
.gt-tv .gt-board { font-size: min(3cqw, 5.6cqh); }
.gt-tv .gt-seat { font-size: min(1.5cqw, 2.6cqh); }
.gt-tv .pc.xs { font-size: min(1.4cqw, 2.4cqh); }
.gt-tv .gt-clock { font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .pc.deal, .gt-result, .tag, .allin { animation: none; } .gchips.flying { transition: none; } }

/* ---------- level clock in the middle of the table ---------- */
.gt-clockbox { display: grid; justify-items: center; gap: 1px; padding: 3px 12px 4px; border-radius: 10px; background: rgba(3, 8, 22, .38); box-shadow: inset 0 0 0 1px rgba(160, 190, 255, .12); line-height: 1.15; }
.gt-clockbox .row { display: flex; align-items: baseline; gap: 8px; }
.gt-clockbox .lv { font-size: clamp(9px, 2.2cqmin, 13px); font-weight: 800; letter-spacing: .1em; color: var(--mute); }
.gt-clockbox .tm { font-size: clamp(13px, 3.4cqmin, 22px); font-weight: 900; color: #e9eefb; }
.gt-clockbox .bl { font-size: clamp(10px, 2.5cqmin, 15px); font-weight: 800; color: var(--gold); }
.gt-clockbox.paused .tm { color: var(--mute); }

/* dead button: drawn on an empty seat */
.gt-dealer.dead { opacity: .85; }

/* ---------- confetti from both sides ---------- */
.gt-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
body > .gt-confetti, .gt-resmodal > .gt-confetti { position: fixed; }
.gt-confetti i { position: absolute; border-radius: 2px; background: var(--c); opacity: 0; animation: gtConfetti var(--d) cubic-bezier(.15, .7, .3, 1) forwards; }
.gt-confetti i.l { left: -10px; }
.gt-confetti i.r { right: -10px; }
@keyframes gtConfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .6)); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.15), calc(var(--y) * .2 + 30vh)) rotate(var(--r)); }
}

/* ---------- result card ---------- */
.gt-rescard {
  --a: #9fb0d4; --b: #5d6d8f;
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; text-align: center; color: #f2f5fa;
  padding: 26px 22px 22px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, #1b2f6b, #0a1430 70%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 70%, transparent), 0 24px 60px rgba(0, 0, 0, .55);
  font-family: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
}
.gt-rescard.gold { --a: #f6c94e; --b: #b9781c; background: radial-gradient(120% 90% at 50% 0%, #4a3410, #1a1206 55%, #0b0a12); box-shadow: 0 0 0 2px #f6c94e, 0 0 40px rgba(246, 201, 78, .45), 0 24px 60px rgba(0, 0, 0, .6); }
.gt-rescard.silver { --a: #e3e8ef; --b: #8d97a6; }
.gt-rescard.bronze { --a: #e2a56b; --b: #8a4f20; }
.gt-rescard .rays { position: absolute; left: 50%; top: 92px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(rgba(246, 201, 78, .32) 0 8deg, transparent 8deg 20deg); animation: gtSpin 16s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
@keyframes gtSpin { to { transform: rotate(360deg); } }
.gt-rescard .emblem { position: relative; width: 112px; height: 112px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); animation: gtEmblem .7s cubic-bezier(.2, 1.4, .3, 1) both; }
.gt-rescard.gold .emblem { width: 140px; height: 140px; filter: drop-shadow(0 0 22px rgba(246, 201, 78, .7)) drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.gt-rescard .emblem svg { width: 100%; height: 100%; display: block; }
@keyframes gtEmblem { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
.gt-rescard .kicker { position: relative; font-size: 12px; font-weight: 900; letter-spacing: .28em; color: var(--a); }
.gt-rescard .place { position: relative; font-size: 64px; font-weight: 900; line-height: 1; background: linear-gradient(180deg, #fff, var(--a) 55%, var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-rescard.gold .place { font-size: 84px; }
.gt-rescard .place small { font-size: .36em; margin-left: 2px; }
.gt-rescard .who { position: relative; font-size: 20px; font-weight: 900; }
.gt-rescard .prize { position: relative; margin-top: 8px; display: grid; gap: 2px; padding: 10px 18px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 60%, transparent); min-width: 70%; }
.gt-rescard .prize small { font-size: 10px; letter-spacing: .24em; color: var(--a); font-weight: 900; }
.gt-rescard .prize b { font-size: 22px; font-weight: 900; color: #fff; }
.gt-rescard .prize.none { font-size: 13px; color: #93a1bd; font-weight: 700; }
.gt-rescard .meta { position: relative; margin-top: 6px; font-size: 12px; color: #93a1bd; font-weight: 700; }
.gt-resmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 18, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: gtFade .25s both; }
.gt-resmodal.leaving { animation: gtFadeOut .25s both; }
.gt-resmodal .box { width: min(380px, 100%); display: grid; gap: 12px; animation: gtPop .4s cubic-bezier(.2, .8, .2, 1) both; }
.gt-resmodal .gbtn { min-height: 50px; }
@keyframes gtFade { from { opacity: 0; } }
@keyframes gtFadeOut { to { opacity: 0; } }
.gt-resinline { display: grid; gap: 12px; max-width: 420px; margin: 8px auto 0; width: 100%; }
@media (prefers-reduced-motion: reduce) { .gt-confetti { display: none; } .gt-rescard .rays, .gt-rescard .emblem { animation: none; } }
.gt-champ { background: linear-gradient(180deg, #1b2f6b, #0a1430); color: #fff; border-radius: 20px; padding: 14px 18px; text-align: center; display: grid; gap: 4px; box-shadow: 0 0 0 1.5px #f6c94e; }
.gt-champ b { font-size: 20px; color: #f6c94e; }