:root {
  --bg: #0b100e;
  --panel: #1c2430;
  --panel-2: #2a3444;
  --line: #0d1118;
  --edge: #3b4659; /* light inner edge of pixel panels */
  --text: #f3f1ea;
  --muted: #9aa6b8;
  --accent: #f4c552;
  --accent-2: #ffe08a;
  --green: #4bc292;
  --red: #e2463c;
  --blue: #1d8fe0;
  --orange: #f0a020;
  /* Table sizes scale with the width of the play area (.main is a size container). */
  --seat-cw: clamp(28px, 4.8cqw, 56px); /* seat card width */
  --cw: var(--seat-cw);
  --bw: clamp(40px, 7cqw, 80px); /* board card width */
  --av: clamp(34px, 6cqw, 72px); /* seat avatar size */
  --seat-w: clamp(84px, 17cqw, 190px);
  --seat-font: clamp(17px, 2.2cqw, 26px);
  --px: clamp(2.6px, .47cqw, 5.2px); /* one dealer pixel */
  --big: clamp(70px, 8.5cqw, 120px); /* your own cards at the bottom */
  --gpx: calc(var(--px) * .75); /* one glove pixel */
  --chip: calc(var(--px) * .42); /* one chip pixel */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
html { background: #080b10; }
body {
  /* Match a 90% browser zoom without asking every player to change their browser. */
  zoom: .9;
  min-height: calc(100vh * 1.111112);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 220, 150, .08), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, .55) 100%),
    repeating-conic-gradient(#141b24 0 25%, #11171f 0 50%) 0 0 / 8px 8px;
  color: var(--text);
  font: 27px/1.35 "Tiny5", ui-monospace, monospace;
  font-synthesis: none; /* the pixel font has one weight; fake bold would smear the pixels */
  -webkit-tap-highlight-color: transparent;
}
body.fallout {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 120, 40, .35), transparent 70%),
    repeating-conic-gradient(#33241a 0 25%, #2b1e15 0 50%) 0 0 / 8px 8px;
}

input, button { font: inherit; color: inherit; }
input {
  background: #0e131b;
  border: 3px solid var(--line);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .4);
  border-radius: 0;
  padding: 7px 10px;
  width: 100%;
  min-width: 0;
}
input:focus { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Chunky pixel buttons with a hard drop shadow. */
.btn {
  --b: var(--panel-2);
  background: var(--b);
  border: 3px solid var(--line);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 4px 0 var(--line);
  border-radius: 0;
  padding: 7px 14px;
  margin-bottom: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), 0 0 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { --b: var(--accent); color: #2a1d02; font-weight: 700; }
.btn.danger { --b: #4a2427; color: #ff9a8f; }
.btn.wide { width: 100%; margin-top: 10px; }

.panel {
  background: var(--panel);
  border: 3px solid var(--line);
  box-shadow: inset 3px 3px 0 var(--edge), inset -3px -3px 0 rgba(0, 0, 0, .3), 0 6px 0 rgba(0, 0, 0, .35);
  padding: 14px 16px;
}
.panel h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.panel h3 { margin: 12px 0 4px; font-size: 18px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 18px; color: var(--muted); }
.span2 { grid-column: span 2; }
.error { color: var(--red); min-height: 1.4em; }
.toggle { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 20px; cursor: pointer; }
.panel .btn { font-size: 22px; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; box-shadow: none; }
.fx-tests { margin-top: 10px; }
input[type=range] { accent-color: var(--accent); padding: 0; border: 0; background: none; box-shadow: none; }

/* ---------- avatars ---------- */

.avatar {
  width: var(--av); height: var(--av);
  overflow: hidden;
  background: #f4f1e8;
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--plate, #4b5872);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  padding: 0;
  position: relative;
}
.avatar img { width: 100%; height: 100%; display: block; }
.avatar .initial { font-weight: 700; font-size: calc(var(--av) * .5); color: #2a332f; }
.avatar.big { --av: 100px; cursor: pointer; }
.avatar.mid { --av: 56px; cursor: pointer; }

/* ---------- lobby ---------- */

.lobby { max-width: 470px; margin: 0 auto; padding: 40px 16px; display: flex; flex-direction: column; gap: 18px; }
.lobby h1 { margin: 0 0 4px; font-size: 64px; letter-spacing: .02em; text-shadow: 0 4px 0 #000; }
.logo { color: var(--accent); }
.profile-card { display: flex; gap: 16px; align-items: center; }
.profile-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#code { text-transform: uppercase; letter-spacing: .25em; font-weight: 700; }

/* ---------- game layout ---------- */

.game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: calc(100vh * 1.111112); }
/* On desktop the table stays on screen while the side panel scrolls. */
.main { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; position: sticky; top: 0; height: calc(100vh * 1.111112); }
.side { display: flex; flex-direction: column; gap: 14px; padding: 12px; border-left: 3px solid var(--line); background: rgba(0, 0, 0, .25); }

/* The top bar floats over the empty top corners so the dealer can use the space. */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 9; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 10px 16px; color: var(--muted); font-size: 24px; pointer-events: none; }
.topbar b { color: var(--accent); letter-spacing: .15em; }
.code-copy {
  pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-weight: 700; letter-spacing: .15em;
  text-decoration: underline dotted; text-underline-offset: 4px; text-shadow: 0 2px 0 #000;
}
.code-copy:hover { color: var(--accent-2); }
.conn { background: var(--red); color: #fff; padding: 2px 10px; font-size: 21px; }

.me-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.me-head h2 { margin: 0; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 28px; }
.me-chips { color: var(--accent); font-weight: 700; }

/* ---------- the table ---------- */

.table-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  /* room on top for the dealer standing behind the table */
  padding: calc(47 * var(--px) + 8px) clamp(40px, 9cqw, 110px) clamp(40px, 6cqw, 80px);
}
/* Never taller than the screen leaves room for (dealer + seats + action bar). */
.table { position: relative; width: 100%; max-width: min(1060px, calc((100vh * 1.111112 - 47 * var(--px) - var(--big) * .7 - 224px) * 16 / 9)); aspect-ratio: 16 / 9; }

/* The pixel-art table canvases cover the table box plus a 6% margin for the rail. */
.tbl { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; image-rendering: pixelated; z-index: 1; pointer-events: none; }
.tbl-ruined { display: none; }
.wasteland .tbl-normal { display: none; }
.wasteland .tbl-ruined { display: block; }
.felt-logo {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  font-weight: 700; letter-spacing: .4em; font-size: clamp(17px, 2.5vw, 34px);
  color: rgba(0, 0, 0, .18); white-space: nowrap; z-index: 1; pointer-events: none;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .06);
}
.wasteland .felt-logo { opacity: 0; }

.center {
  position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 66%;
  text-align: center;
  /* Above the seats: a player's plate may reach the board, but must never hide its cards. */
  z-index: 5; pointer-events: none;
}
.board { display: flex; gap: 8px; }
.pot { font-weight: 700; font-size: 28px; min-height: 1.6em; display: flex; align-items: center; gap: 10px; text-shadow: 0 3px 0 #000; }
.result { font-size: 25px; color: #fff; text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; min-height: 1.4em; }
.nuked { font-size: 37px; font-weight: 700; color: #c9ff4a; letter-spacing: .1em; text-shadow: 0 3px 0 #000; animation: radpulse 1.4s steps(2) infinite; }

/* ---------- cards ---------- */

.card {
  display: block;
  width: var(--cw); height: calc(var(--cw) * 97 / 73);
  flex: none;
  user-select: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
  transition: transform .15s steps(3);
}
.card.slot { width: var(--bw); height: calc(var(--bw) * 97 / 73); border: 3px dashed rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .12); filter: none; }
/* After a showdown: the cards that won are raised with a gold outline, the rest are dimmed. */
.card.hl {
  filter: drop-shadow(3px 0 0 var(--accent)) drop-shadow(-3px 0 0 var(--accent)) drop-shadow(0 3px 0 var(--accent)) drop-shadow(0 -3px 0 var(--accent)) drop-shadow(0 8px 0 rgba(0, 0, 0, .45));
  transform: translateY(calc(var(--cw) * -.28));
  position: relative; z-index: 2;
}
.card.dim { filter: brightness(.5) saturate(.4); }
.board .card { --cw: var(--bw); }

.card.deal { animation: dealin .14s steps(2) both; }
@keyframes dealin { from { opacity: 0; transform: scale(.6); } }
.card.flip { animation: flipin .24s steps(3) both; }
@keyframes flipin { from { opacity: 0; transform: scaleX(0); } }

/* ---------- seats ---------- */

.seat {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: var(--seat-w);
  z-index: 3;
  transition: opacity .25s, filter 1.2s;
}
/* The card row keeps its normal height, so bigger cards grow upward and the plate doesn't move. */
.seat .cards { display: flex; align-items: flex-end; height: calc(var(--seat-cw) * 97 / 73 * .62); margin-bottom: -4px; }
.seat.revealed { --cw: calc(var(--seat-cw) * 1.6); }
.seat.revealed .cards { z-index: 3; position: relative; }
.seat .cards .card:nth-child(1) { rotate: -6deg; margin-right: calc(var(--cw) * -.22); }
.seat .cards .card:nth-child(2) { rotate: 6deg; margin-top: 3px; }

.seat .plate {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--av) * .14);
  background: var(--plate, #1e2433);
  border: 3px solid var(--line);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .16), inset -3px -3px 0 rgba(0, 0, 0, .3), 0 5px 0 rgba(0, 0, 0, .5);
  padding: 3px calc(var(--av) * .2) 3px 3px;
  min-width: calc(var(--seat-w) * .9);
  z-index: 1;
}
.seat .plate-text { min-width: 0; text-align: left; }
.seat .name { font-size: var(--seat-font); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--seat-w) * .5); text-shadow: 0 2px 0 #000; }
.seat .stack { font-size: var(--seat-font); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
.seat .status {
  margin-top: 6px; font-size: calc(var(--seat-font) * .85); font-weight: 600;
  background: #0d1118; border: 2px solid #000; padding: 0 8px; white-space: nowrap;
}
.seat .host { color: var(--accent); margin-right: 3px; }
.seat .offline { display: inline-block; width: 8px; height: 8px; background: var(--red); margin-right: 5px; vertical-align: middle; }
.seat.turn .plate { border-color: var(--accent); box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--accent), 0 5px 0 rgba(0, 0, 0, .5); animation: turnblink 1s steps(2) infinite; }
@keyframes turnblink { 50% { box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--accent-2), 0 5px 0 rgba(0, 0, 0, .5); } }
.seat.winner .plate { border-color: var(--green); box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--green); }
.seat.winner .status { background: var(--green); color: #04150c; }
.seat.folded, .seat.out { opacity: .45; }
.seat.me.folded { opacity: .7; }
.seat.is-allin .stack { color: #ff7b52; }
.seat.allin-boom { animation: allin .8s steps(8); }
.seat.allin-boom .plate { box-shadow: 0 0 0 3px #000, 0 0 0 7px #ff6a1a; }
@keyframes allin {
  0%, 100% { transform: translate(-50%, -50%); }
  15% { transform: translate(-50%, -50%) scale(1.18) rotate(-4deg); }
  30% { transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
  45% { transform: translate(-50%, -50%) scale(1.06) rotate(-2deg); }
}
.won { position: absolute; top: -18px; font-weight: 700; font-size: 37px; color: var(--accent-2); text-shadow: 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000; pointer-events: none; z-index: 2; }
.won.float { animation: floatup 1.2s steps(8) both; }
@keyframes floatup { from { opacity: 0; transform: translateY(30px); } 40% { opacity: 1; transform: translateY(-6px); } }

.timer { position: absolute; left: 4px; right: 4px; bottom: -9px; height: 6px; background: #000; overflow: hidden; }
.timer span { display: block; height: 100%; background: var(--accent); transition: width .2s steps(2); }
.timer span.low { background: var(--red); }

/* ---------- chips, bets, puck ---------- */

.chips { position: relative; display: inline-block; width: calc(16 * var(--chip)); height: calc(12 * var(--chip)); flex: none; }
.chip-img { position: absolute; left: 0; bottom: calc(var(--i) * 2.2 * var(--chip)); width: calc(16 * var(--chip)); }
/* Drawn above the players, so nothing can hide a bet or the dealer button. */
.bet, .puck { position: absolute; transform: translate(-50%, -50%); z-index: 4; }
.bet { display: flex; align-items: center; gap: 6px; font-size: 25px; font-weight: 700; text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet .chips { margin-top: -10px; }
.bet.pop { animation: pop .3s steps(3); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.pot .chips { margin-top: -12px; }
.puck { width: calc(14 * var(--chip) * 1.3); }

/* ---------- the dealer ---------- */

/* His waist sits just behind the top of the rail (which is 3.75% above the table box). */
.croupier {
  position: absolute; left: 50%; bottom: 102.5%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 0;
  animation: breathe 1.6s steps(1) infinite;
}
@keyframes breathe { 50% { translate: 0 var(--px); } }
.croupier-body, .croupier-head { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.croupier-body img { width: calc(48 * var(--px)); display: block; }
/* The skeleton's pelvis (28 extra rows = 14 dealer pixels) hangs down behind the table edge. */
.dealer-skeleton .croupier-body img { margin-bottom: calc(var(--px) * -14); }
.croupier-head {
  position: relative; z-index: 1;
  width: calc(22 * var(--px)); height: calc(22 * var(--px));
  margin-bottom: calc(var(--px) * -2.5); /* sits on the neck */
  animation: look 7s steps(1) infinite;
}
.croupier-head img { width: 100%; height: 100%; display: block; }
/* Pictures are transparent around the edges: outline the actual shape on hover. */
.croupier-head:hover img, .croupier-body:hover img { filter: drop-shadow(3px 0 0 var(--accent)) drop-shadow(-3px 0 0 var(--accent)) drop-shadow(0 -3px 0 var(--accent)); }
@keyframes look { 35% { translate: var(--px) 0; } 50% { translate: 0 0; } 78% { translate: calc(var(--px) * -1) 0; } 90% { translate: 0 0; } }

.glove {
  position: absolute; left: 41%; top: 14%;
  width: calc(23 * var(--gpx));
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}
.glove-r { left: 59%; }
.glove-inner { position: relative; animation: gbob 1.4s steps(1) infinite; }
.glove-r .glove-inner { animation-delay: -.7s; }
@keyframes gbob { 50% { translate: 0 var(--gpx); } }
.glove img { width: 100%; display: block; filter: drop-shadow(0 calc(var(--gpx) * 2) 0 rgba(0, 0, 0, .35)); }
.glove .g-grip { position: absolute; inset: 0; opacity: 0; animation: tap 3.7s steps(1) infinite; }
.glove .g-rest { animation: tap-rest 3.7s steps(1) infinite; }
.glove-r .g-grip, .glove-r .g-rest { animation-duration: 4.6s; }
/* idle finger drumming: a quick curl every few seconds */
@keyframes tap { 0%, 84% { opacity: 0; } 88% { opacity: 1; } 92% { opacity: 0; } 95% { opacity: 1; } }
@keyframes tap-rest { 0%, 84% { opacity: 1; } 88% { opacity: 0; } 92% { opacity: 1; } 95% { opacity: 0; } }
.glove.busy .glove-inner, .glove.busy img { animation: none; }
.glove.busy .g-grip { opacity: 0; }
.glove.busy .g-rest { opacity: 1; }
.glove.gripping .g-grip { opacity: 1; }
.glove.gripping .g-rest { opacity: 0; }

#fly { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.fly-card { position: absolute; width: var(--cw); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
.fly-card.board-fly { width: var(--bw); }
.fly-chips { position: absolute; width: calc(16 * var(--chip) * 1.4); }

/* ---------- the nuclear wasteland ---------- */

.ruin { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s; z-index: 1; }
.wasteland .ruin { opacity: 1; }
.ruin .ember { position: absolute; width: var(--s); height: var(--s); background: #ff9a2a; box-shadow: 0 0 0 2px rgba(255, 90, 0, .5); animation: ember 1.6s steps(2) infinite alternate; }
@keyframes ember { from { opacity: .3; } to { opacity: 1; } }
.ruin .rad {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  font-size: clamp(37px, 7vw, 85px); color: #b6ff3a;
  text-shadow: 0 4px 0 #000;
  animation: radpulse 1.8s steps(2) infinite;
}
@keyframes radpulse { 50% { opacity: .45; } }
.ruin::after { /* radioactive haze */
  content: ''; position: absolute; inset: -10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(140, 255, 60, .12), transparent 60%);
  mix-blend-mode: screen;
  animation: radpulse 3s steps(2) infinite;
}
/* After a nuke things are scorched and knocked a little askew, but stay easy to read. */
.wasteland .seat { filter: grayscale(.35) sepia(.45) brightness(.9); rotate: calc(var(--tilt) * .2); }
.wasteland .seat .plate { background: #2a1d14; border-color: #000; }
.wasteland .card:not(.hl):not(.dim) { filter: sepia(.4) brightness(.9); }
.wasteland .board .card:nth-child(odd) { rotate: 2deg; translate: 0 1px; }
.wasteland .board .card:nth-child(even) { rotate: -2deg; translate: 0 -1px; }
.wasteland .puck, .wasteland .bet { filter: brightness(.5) sepia(1); }

/* Effects canvas sits above everything. */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; display: none; image-rendering: pixelated; }
.fx-shake { animation: shake 2.8s cubic-bezier(.2, .6, .4, 1); }
@keyframes shake {
  0% { transform: translate(0, 0); }
  2% { transform: translate(-18px, 12px) rotate(-1deg); }
  4% { transform: translate(16px, -14px) rotate(1deg); }
  7% { transform: translate(-14px, -10px); }
  10% { transform: translate(12px, 12px) rotate(.6deg); }
  14% { transform: translate(-10px, 6px); }
  19% { transform: translate(8px, -8px); }
  25% { transform: translate(-6px, 5px); }
  33% { transform: translate(5px, -4px); }
  45% { transform: translate(-3px, 3px); }
  60% { transform: translate(2px, -2px); }
  80% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ---------- action bar ---------- */

.actionbar {
  position: sticky; bottom: 0;
  background: var(--panel);
  border-top: 3px solid var(--line);
  box-shadow: inset 0 3px 0 var(--edge);
  padding: 12px 16px;
  /* A fixed size: buttons, messages and your cards come and go inside it without resizing it. */
  height: 160px;
  display: flex; align-items: stretch; justify-content: center; gap: clamp(16px, 3cqw, 40px);
  z-index: 8;
}
/* The buttons always start at the top, so they're in the same spot whatever else is shown. */
.controls { flex: 0 1 600px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.controls > .hint:only-child { margin: auto 0; } /* a lone message is centred */

/* Your own cards: a fixed slot (kept even when empty, so the buttons never move). The cards and
   labels are pinned inside it and the cards rise out of the bar into the space below the table. */
.my-cards { position: relative; flex: none; width: calc(var(--big) * 2.1); }
.my-cards > * { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.big-cards { display: flex; bottom: 86px; }
.my-cards .my-hand-name { bottom: 46px; }
.my-cards .my-win { bottom: 2px; }
.card.big { --cw: var(--big); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .5)); }
.big-cards .card:nth-child(1) { rotate: -5deg; margin-right: calc(var(--big) * -.12); }
.big-cards .card:nth-child(2) { rotate: 5deg; }
.big-cards .card.dim { filter: brightness(.5) saturate(.4); }
.big-cards .card.hl { filter: drop-shadow(4px 0 0 var(--accent)) drop-shadow(-4px 0 0 var(--accent)) drop-shadow(0 4px 0 var(--accent)) drop-shadow(0 -4px 0 var(--accent)); }
.my-hand-name { font-weight: 700; color: var(--accent-2); text-shadow: 0 2px 0 #000; white-space: nowrap; }
.my-win {
  padding: 1px 10px;
  background: var(--accent); color: #2a1d02; border: 2px solid #000; box-shadow: 0 3px 0 #000;
  white-space: nowrap; animation: turnblink 1s steps(2) infinite;
}
.my-cards.folded .big-cards { opacity: .4; filter: grayscale(.8); }
.my-cards.folded .my-hand-name { color: var(--muted); }
.actionbar .hint { color: var(--muted); }
.myhand { font-size: 25px; color: var(--muted); }
.myhand b { color: var(--accent-2); }
.buttons { display: flex; gap: 12px; width: 100%; max-width: 600px; }
.btn.act { flex: 1; padding: 8px 8px; font-weight: 700; font-size: 30px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.btn.precheck.on { --b: var(--green); color: #04150c; }
.btn.fold { --b: var(--red); }
.btn.check, .btn.call { --b: var(--blue); }
.btn.raise { --b: var(--orange); }
.raise-row { display: flex; gap: 6px; align-items: center; width: 100%; max-width: 600px; }
.raise-row input[type=range] { flex: 1; }
.raise-row input[type=number] { width: 100px; flex: none; }
.chip { background: var(--panel-2); border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); padding: 3px 10px; font-size: 22px; cursor: pointer; white-space: nowrap; }
.chip:active { transform: translateY(3px); box-shadow: none; }

/* Big pixel beacon shown while it is your turn, above the action bar. */
.turn-light {
  position: absolute; right: 16px; bottom: calc(100% + 12px); z-index: 140;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 176px; padding: 12px 10px;
  background: #2a1d02; color: var(--accent);
  border: 4px solid var(--line);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .4), 0 6px 0 var(--line);
  cursor: pointer; user-select: none;
  animation: tl-blink .9s steps(2) infinite;
}
.turn-light:active { transform: translateY(4px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .18), 0 2px 0 var(--line); }
.tl-lamp {
  position: relative; width: 86px; height: 86px; margin-top: 4px;
  background: var(--red); border: 5px solid var(--line);
  box-shadow: 0 0 0 5px var(--accent);
}
.tl-lamp::before {
  content: ''; position: absolute; inset: 14px; background: var(--accent-2);
  box-shadow: inset 0 0 0 6px var(--accent), inset 0 -10px 0 #f08a24;
  animation: tl-flash .45s steps(2) infinite;
}
.tl-lamp::after {
  content: ''; position: absolute; inset: -19px; border: 4px solid rgba(244, 197, 82, .45);
  animation: tl-ring 1.2s steps(3) infinite;
}
.tl-text { font-weight: 700; font-size: 29px; line-height: 1; letter-spacing: .08em; text-shadow: 0 3px 0 #000; }
.tl-sub { font-size: 18px; line-height: 1.1; letter-spacing: .04em; color: var(--accent-2); text-shadow: 0 2px 0 #000; }
@keyframes tl-blink { 50% { background: #170f00; color: var(--accent-2); } }
@keyframes tl-flash { 50% { background: var(--red); box-shadow: inset 0 0 0 6px var(--accent-2), inset 0 -10px 0 #f08a24; } }
@keyframes tl-ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.18); opacity: 0; } }

/* ---------- side panels ---------- */

.ledger { width: 100%; border-collapse: collapse; font-size: 22px; font-variant-numeric: tabular-nums; }
.ledger th { text-align: right; color: var(--muted); font-weight: 500; padding: 2px 4px; }
.ledger td { text-align: right; padding: 3px 4px; border-top: 2px solid var(--line); }
.ledger th:first-child, .ledger td:first-child { text-align: left; }
.ledger tr.left td { color: var(--muted); }
.up { color: var(--green); }
.down { color: var(--red); }
.settle { margin: 0; padding-left: 18px; font-size: 22px; }
.money { color: var(--muted); }
.log { max-height: 220px; overflow-y: auto; font-size: 22px; color: var(--muted); }
.log div { padding: 1px 0; }

.toast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  background: #2b1a19; border: 3px solid var(--red); box-shadow: 0 4px 0 #000; color: #ffd9d6;
  padding: 10px 16px; z-index: 200; max-width: calc(100% - 32px);
}

/* ---------- MS Paint ---------- */

.paint-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 150; display: flex; align-items: center; justify-content: center; padding: 12px; }
.w98 {
  background: #c0c0c0; color: #000;
  font: 18px/1.3 Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 0 20px 50px rgba(0, 0, 0, .6);
  padding: 3px;
  max-width: 100%; max-height: 100%; overflow: auto;
}
/* The Paint window is square, and roomier than the old auto-sized one. */
.paint { width: min(868px, calc(100vw - 24px), calc(100vh - 24px)); aspect-ratio: 1; display: flex; flex-direction: column; }
.w98 input { background: initial; border: initial; box-shadow: none; padding: 0; }
.w98-sunken { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; }
.w98-btn {
  background: #c0c0c0; color: #000; border: 0; border-radius: 0; cursor: pointer;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  padding: 4px 10px; font: inherit;
}
.w98-btn:active, .w98-btn.on { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; background: #d4d4d4; }
.w98-title {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font-weight: 700; padding: 3px 3px 3px 6px;
}
.w98-title-btns { display: flex; gap: 2px; }
.w98-tb {
  width: 18px; height: 16px; padding: 0; font: 700 17px/1 Tahoma, sans-serif; color: #000;
  background: #c0c0c0; border: 0; cursor: pointer;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.w98-menu { display: flex; gap: 14px; padding: 3px 6px; }
.w98-menu span { cursor: default; }
.p-body { display: flex; gap: 4px; padding: 2px; flex: 1; min-height: 0; }
.p-toolbox { display: flex; flex-direction: column; gap: 6px; width: 58px; flex: none; }
.p-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.p-tool { width: 28px; height: 28px; padding: 0; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.p-options { display: flex; flex-direction: column; gap: 2px; padding: 4px; min-height: 70px; align-items: stretch; background: #c0c0c0; }
.p-opt { height: 14px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.p-opt span { display: block; width: 36px; background: #000; }
.p-opt.on { background: #000080; }
.p-opt.on span { background: #fff; }
.p-opt .shape-out { height: 9px !important; width: 26px; background: transparent !important; border: 1px solid currentColor; color: #000; }
.p-opt .shape-fill { height: 9px !important; width: 26px; background: #808080 !important; border: 1px solid #000; }
.p-opt.on .shape-out { color: #fff; }
.p-canvas-area { background: #808080; padding: 6px; flex: 1; display: flex; align-items: flex-start; overflow: auto; min-width: 0; min-height: 0; }
.p-canvas {
  width: calc(min(524px, calc(100vw - 130px)) * var(--p-zoom, 1)); flex: none; aspect-ratio: 1;
  image-rendering: pixelated; cursor: crosshair; touch-action: none;
  background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 12px 12px; /* shows transparency */
  box-shadow: 1px 1px 0 #000;
}
.p-clear { width: 16px; height: 32px; flex: none; background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.p-palette { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.p-current { position: relative; width: 32px; height: 32px; flex: none; background: #c0c0c0; }
.p-current div { position: absolute; width: 14px; height: 14px; box-shadow: inset 0 0 0 1px #000; }
.p-fg { left: 5px; top: 5px; z-index: 1; }
.p-bg { left: 13px; top: 13px; }
.p-swatches { display: grid; grid-template-columns: repeat(14, 16px); grid-auto-rows: 16px; gap: 0; }
.p-swatch { width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset 0 0 0 2px rgba(0, 0, 0, .15); }
.p-edit-colors { position: relative; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 23px; }
.p-edit-colors input, .p-plate-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; }
.p-profile { display: flex; gap: 12px; align-items: center; padding: 6px 4px; border-top: 1px solid #808080; box-shadow: 0 1px 0 #fff inset; flex-wrap: wrap; }
.p-preview { display: flex; align-items: center; gap: 6px; }
.p-preview-avatar { width: 40px; height: 40px; image-rendering: pixelated; box-shadow: 0 0 0 2px #000; background: #fff; }
.p-preview-plate { padding: 4px 12px; background: #1e2433; color: #fff; font-weight: 700; }
.p-plates { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.p-plate { position: relative; width: 20px; height: 20px; padding: 0; border: 1px solid #000; cursor: pointer; }
.p-plate.on { outline: 2px dotted #000; outline-offset: 2px; }
.p-plate-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.p-footer { display: flex; gap: 6px; align-items: center; padding: 4px 2px 2px; flex-wrap: wrap; }
.p-size { display: flex; align-items: center; gap: 4px; }
.p-size select {
  font: inherit; color: #000; background: #fff; border: 0; padding: 2px 2px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}

/* ---------- phones & small screens ---------- */

@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; }
  .main { position: static; height: auto; }
  .side { border-left: 0; border-top: 3px solid var(--line); }
  .table-wrap { padding: 165px 80px 90px; }
}

@media (max-width: 600px) {
  :root { --seat-cw: 30px; --bw: 34px; --av: 38px; --px: 2.9px; --gpx: 2.1px; --chip: 1.1px; --big: 64px; }
  .table-wrap { padding: calc(47 * var(--px) + 6px) 40px 40px; }
  .topbar { position: static; }
  /* On phones: your cards on top, the buttons below, each in a fixed-height box. */
  .actionbar { flex-direction: column; gap: 8px; height: auto; }
  .my-cards { width: 100%; height: 94px; }
  .big-cards { bottom: 2px; left: calc(50% - 8px); transform: translateX(-100%); }
  .my-cards .my-hand-name, .my-cards .my-win { left: calc(50% + 4px); transform: none; }
  .my-cards .my-hand-name { bottom: 58px; }
  .my-cards .my-win { bottom: 14px; }
  .controls { width: 100%; flex: none; height: 160px; }
  .table { aspect-ratio: 3 / 4; max-width: none; }
  .seat { width: 96px; }
  .glove { top: 10%; }
  .glove-l { left: 40%; }
  .glove-r { left: 60%; }
  .seat .plate { min-width: 0; gap: 4px; padding: 2px 6px 2px 2px; border-width: 2px; }
  .seat .name { font-size: 18px; max-width: 52px; }
  .seat .stack { font-size: 18px; }
  .seat .status { font-size: 17px; padding: 0 5px; margin-top: 4px; }
  .avatar { border-width: 2px; box-shadow: inset 0 0 0 2px var(--plate, #4b5872); }
  .won { font-size: 24px; }
  .board { gap: 3px; }
  .center { width: 88%; top: 58%; }
  .result { font-size: 21px; }
  .pot { font-size: 22px; }
  .felt-logo { top: 33%; letter-spacing: .2em; }
  .bet { font-size: 18px; gap: 3px; }
  .btn.act { font-size: 24px; padding: 8px 4px; }
  .turn-light { right: 10px; bottom: calc(100% + 8px); width: 142px; padding: 9px 8px; }
  .tl-lamp { width: 64px; height: 64px; }
  .tl-text { font-size: 24px; }
  .tl-sub { font-size: 16px; }
  .raise-row { flex-wrap: wrap; }
  .raise-row input[type=range] { order: 5; flex-basis: 100%; }
  .raise-row input[type=number] { flex: 1; }
  .p-swatches { grid-template-columns: repeat(14, 14px); grid-auto-rows: 14px; }
  .p-swatch { width: 14px; height: 14px; }
  .p-clear { height: 28px; }
}