/* ==========================================================================
   The table  ·  shared by /blackjack and /counting-room  ·  v9 (10/8/26, flat; the tag reads The play)
   The table on the flat system: a solid dark rail, a solid green band, a solid
   felt with the gold layout lines and the house print, big ivory cards fanned
   in the hand and dealt from the shoe, flat chips with edge spots, a console
   that is one dark block. Mikey's tip lives on the buttons: the play he would
   make wears his tag, and one line says why. No gradients, glows or shadows.
   The game scripts are untouched; everything here is skin plus one small
   page script (table.js) that stacks the chips and moves the tag.
   ========================================================================== */
.game{
  --felt:#146a44; --rail:#1a1614; --inlay:rgba(232,197,107,.6);
  --print:rgba(232,197,107,.6); --line-felt:rgba(255,255,255,.18);
  --ivory:#fbf8ef; --card-red:#c9303d; --card-ink:#17191b;
  --chip-5:#c9303d; --chip-25:#25b34b; --chip-100:#1f2222; --chip-500:#6b3fc9; --chip-1:#c9303d; --chip-2:#25b34b; --chip-10:#6b3fc9;
  position:relative;
}

/* ---- the rail ---- */
.table{position:relative;border-radius:20px;padding:0;overflow:hidden;background:var(--rail);border:1px solid var(--edge);}
.table__head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:12px 18px;background:var(--green);color:var(--green-ink);}
.table__name{font-family:var(--display);text-transform:uppercase;font-size:21px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;}
.table__name::before{content:"";width:26px;height:26px;flex:0 0 auto;border-radius:6px;background:rgba(6,35,15,.18) url(/assets/lowballers-wordmark.png) center / 20px auto no-repeat;}
.table__rules{font-size:12px;font-weight:700;opacity:.85;}
@media (max-width:440px){.table__rules{font-size:11px;}}

/* ---- the felt: one solid block, the layout drawn in gold ---- */
.felt{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:420px;padding:22px 18px 18px;margin:10px 10px 0;border-radius:14px;overflow:hidden;
  background:var(--felt);border:2px solid var(--inlay);}
.layout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.layout .arc{fill:none;stroke:var(--inlay);stroke-width:2;}
.layout .arc2{fill:none;stroke:rgba(232,197,107,.3);stroke-width:1;}
.layout .print{font-family:var(--display);font-size:15px;letter-spacing:.16em;fill:var(--print);text-transform:uppercase;}
.layout .spot{fill:none;stroke:var(--line-felt);stroke-width:2;}
.layout .spotlabel{font-family:var(--body);font-weight:700;font-size:9px;letter-spacing:.14em;fill:var(--line-felt);text-transform:uppercase;}
.area{position:relative;z-index:2;}
.area.dealer{padding-top:0;}
.area.center{min-height:30px;display:flex;align-items:center;justify-content:center;}
.area.player{padding-bottom:6px;}
.seat,.zonehdr,.handlab{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;}
.seat .lab,.zonehdr .pill,.handlab > span:first-child{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,197,107,.85);display:inline-flex;align-items:center;gap:6px;
  min-height:0;padding:0;border:none;background:none;border-radius:0;}
.zonehdr .ic{width:13px;height:13px;}
.seat .badge,.zonehdr .badge,.badge,.handlab .v{min-width:32px;height:28px;padding:0 10px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:#0a0b0b;color:#fff;font-family:var(--display);font-size:17px;letter-spacing:.02em;border:1px solid rgba(255,255,255,.12);}
.divider{display:none;}
.cards-row{min-height:112px;display:flex;align-items:center;justify-content:center;}
.cards{display:flex;justify-content:center;align-items:flex-end;padding:6px 0 4px;}
.cards .card:not(:first-child){margin-left:-32px;}
.hands-multi{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:wrap;}
.handbox{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;padding:0 4px;border-radius:10px;}
.handbox.active:not(:only-child){box-shadow:inset 0 -3px 0 0 var(--gold);padding:3px 6px 6px;}
.banner .msg{display:inline-block;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;background:#0a0b0b;color:#fff;opacity:0;transition:opacity .18s;border:1px solid rgba(232,197,107,.4);}
.banner .msg.show{opacity:1;}
.banner .msg.win{color:var(--win);} .banner .msg.lose{color:var(--loss);} .banner .msg.push{color:var(--gold);}
[hidden]{display:none!important;}

/* ---- chips: flat discs with edge spots ---- */
.chip-btn,.betspot .chip{--c:#c9303d;--spot:rgba(255,255,255,.92);border-radius:50%;position:relative;background:var(--c);border:4px dashed var(--spot);}
.chip-btn::before,.betspot .chip::before{content:"";position:absolute;inset:16%;border-radius:50%;border:2px solid var(--spot);opacity:.7;}
.chip-btn[data-v="100"],.betspot .chip[style*="chip-100"]{--spot:#e8c56b;}

/* your bet, stacked on the spot (table.js keeps it in sync with the ledger) */
.betspot{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;margin-top:6px;pointer-events:none;}
.betspot .lab{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,197,107,.7);}
.betspot .stack{position:relative;width:46px;height:46px;flex:0 0 auto;}
.betspot .chip{position:absolute;left:0;width:46px;height:46px;}
.betspot .amt{font-family:var(--display);font-size:15px;color:var(--gold);background:#0a0b0b;padding:3px 9px;border-radius:6px;border:1px solid rgba(232,197,107,.4);}
.betspot.empty .stack,.betspot.empty .amt{visibility:hidden;}

/* result: the stamp */
.result{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:8;display:flex;align-items:center;gap:14px;
  padding:12px 22px;border-radius:10px;background:#0a0b0b;color:#fff;white-space:nowrap;pointer-events:none;border:1px solid rgba(255,255,255,.14);opacity:0;transition:opacity .18s ease;}
.result.show{opacity:1;animation:stamp .4s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes stamp{from{transform:translate(-50%,-50%) scale(1.35) rotate(-3deg);}to{transform:translate(-50%,-50%) scale(1) rotate(0);}}
.result__word{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,6vw,34px);line-height:1;}
.result__amt{font-weight:700;font-size:clamp(13px,3.6vw,17px);}
.result.win{background:var(--win);color:#06230f;border-color:var(--win);}
.result.bj{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);}
.result.lose{background:var(--loss);color:#2a0609;border-color:var(--loss);}
.result.push{background:#3a3f3d;color:#fff;border-color:#3a3f3d;}

/* ---- cards ---- */
.card{--w:clamp(60px,16.5vw,78px);--h:calc(var(--w)*1.4);--rot:0deg;width:var(--w);height:var(--h);border-radius:9px;position:relative;flex:0 0 auto;overflow:hidden;
  background:var(--ivory);border:1px solid rgba(0,0,0,.22);transform-origin:50% 110%;transform:rotate(var(--rot));
  animation:deal .5s cubic-bezier(.2,.8,.25,1) both;}
/* the fan: each card in the hand sits at a slightly different angle */
.cards .card:nth-child(1){--rot:-5deg;} .cards .card:nth-child(2){--rot:-1.5deg;} .cards .card:nth-child(3){--rot:2deg;} .cards .card:nth-child(4){--rot:5.5deg;} .cards .card:nth-child(5){--rot:9deg;} .cards .card:nth-child(n+6){--rot:12deg;}
.cards .card:only-child{--rot:0deg;}
.cards .card:first-child:nth-last-child(2){--rot:-3deg;} .cards .card:nth-child(2):last-child{--rot:3deg;}
@keyframes deal{from{opacity:0;transform:translate(90px,-120px) rotate(14deg) scale(.86);}to{opacity:1;transform:rotate(var(--rot));}}
.card .corner{position:absolute;font-family:var(--display);line-height:.9;text-align:center;z-index:2;}
.card .corner.tl{top:7px;left:8px;} .card .corner.br{bottom:7px;right:8px;transform:rotate(180deg);}
.card .corner .r{font-size:clamp(17px,4.6vw,22px);display:block;letter-spacing:.01em;}
.card .corner .s{font-family:var(--body);font-size:clamp(11px,3vw,14px);display:block;margin-top:1px;}
.card .pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(32px,9.5vw,46px);line-height:1;z-index:1;}
.card .stamp{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--display);font-size:8px;letter-spacing:.14em;color:rgba(0,0,0,.18);z-index:2;}
.card.red{color:var(--card-red);} .card.black{color:var(--card-ink);}
/* the back: black with a gold frame, the Lowballers logo in the middle */
.card.back{background:#141616;border-color:rgba(0,0,0,.5);}
.card.back::before{content:"";position:absolute;inset:5px;border:2px solid var(--gold);border-radius:5px;}
.card.back::after{content:"";position:absolute;inset:0;background:url(/assets/lowballers-logo.png) center / 52% no-repeat;}
.card.flip-in{animation:flipIn .45s ease both;}
@keyframes flipIn{from{transform:rotateY(90deg) rotate(var(--rot));opacity:.4;}to{transform:rotateY(0) rotate(var(--rot));opacity:1;}}
.card.counting{animation:countflash .5s ease;}
@keyframes countflash{30%{box-shadow:0 0 0 3px var(--gold);}}
.card.sweep{animation:sweepOut .3s ease forwards!important;}
@keyframes sweepOut{to{opacity:0;transform:translateY(56px) rotate(var(--rot)) scale(.9);}}
.countpop{position:absolute;z-index:9;transform:translate(-50%,-100%);font-family:var(--display);font-size:22px;padding:3px 10px;border-radius:6px;background:#0a0b0b;color:#fff;pointer-events:none;animation:pop 1.2s ease forwards;}
.countpop.pos{background:var(--win);color:#06230f;} .countpop.neg{background:var(--loss);color:#2a0609;} .countpop.neu{background:#3a3f3d;}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-80%);}15%{opacity:1;transform:translate(-50%,-110%);}80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-150%);}}

/* ---- the console: one dark block ---- */
.console{padding:16px 18px 16px;margin:10px;border-radius:14px;background:var(--ink-2);border:1px solid var(--edge);}
.ledger{display:grid;grid-template-columns:1fr 1.3fr;border-bottom:1px solid var(--edge);margin-bottom:14px;font-variant-numeric:tabular-nums;}
.ledger .cell{padding:4px 0 12px;position:relative;}
.ledger .cell + .cell{border-left:1px solid var(--edge);padding-left:16px;}
.ledger .k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-2);}
.ledger .v{display:block;font-family:var(--display);font-size:30px;line-height:1.05;margin-top:2px;color:#fff;}
.ledger .cell.bal .v{color:var(--gold);}
.ledger .v.pop{animation:betpop .22s ease;}
@keyframes betpop{50%{transform:scale(1.06);color:var(--green-3);}}
.clr{position:absolute;top:4px;right:0;font-size:11px;font-weight:700;color:var(--mute);border:1px solid var(--edge-2);border-radius:6px;padding:5px 10px;background:var(--ink-3);}
.clr:hover{color:#fff;border-color:rgba(255,255,255,.3);}
.clr:disabled{opacity:.3;cursor:not-allowed;}
.chiphint{text-align:center;font-size:11px;font-weight:600;color:var(--mute-2);margin-bottom:8px;}
.chiptray{display:flex;gap:14px;justify-content:center;margin:4px 0 16px;}
.chip-btn{width:58px;height:58px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-size:17px;letter-spacing:.02em;transition:transform .12s ease,filter .12s ease;}
.chip-btn .den{position:relative;z-index:2;}
.chip-btn[data-v="5"]{--c:var(--chip-5);} .chip-btn[data-v="25"]{--c:var(--chip-25);} .chip-btn[data-v="100"]{--c:var(--chip-100);} .chip-btn[data-v="500"]{--c:var(--chip-500);}
.chip-btn[data-v="1"]{--c:var(--chip-1);} .chip-btn[data-v="2"]{--c:var(--chip-2);} .chip-btn[data-v="10"]{--c:var(--chip-10);}
.chip-btn[data-v="100"] .den{color:var(--gold);}
.chip-btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.08);}
.chip-btn:active:not(:disabled){transform:translateY(1px);}
.chip-btn:disabled{opacity:.3;cursor:not-allowed;filter:saturate(.4);}
.game .btn{position:relative;border-radius:10px;font-weight:700;font-size:15px;min-height:52px;padding:0 12px;color:#fff;background:var(--ink-3);border:1px solid var(--edge-2);transition:background .12s,opacity .12s,border-color .12s;}
.game .btn:hover:not(:disabled){background:#2a2f2d;border-color:rgba(255,255,255,.3);}
.game .btn:disabled{opacity:.35;cursor:not-allowed;}
.game .btn.full{width:100%;}
.game .btn.flex{flex:1 1 0;min-width:0;}
.game .btn.deal{background:var(--green);color:var(--green-ink);min-height:56px;font-size:16px;border-color:var(--green);}
.game .btn.deal:hover:not(:disabled){background:#2cc455;border-color:#2cc455;}
.game .btn.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);}
.game .btn.gold:hover:not(:disabled){background:#f0d488;border-color:#f0d488;}
/* Mikey's tag: the play he would make */
.game .btn.rec{border-color:var(--gold);color:var(--gold);background:var(--count-tile);}
.game .btn.rec:hover:not(:disabled){background:#2e2818;border-color:var(--gold);}
.game .btn.rec::after{content:"The play";position:absolute;top:-10px;right:8px;font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--gold);color:var(--gold-ink);}
.actions,.livetools{display:flex;gap:8px;}
.livetools{margin-top:8px;}
/* the one line under the buttons */
.coach,.tipbar{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:14px;min-height:22px;font-size:13px;line-height:1.4;color:var(--mute);opacity:.45;transition:opacity .2s ease;}
.coach.show,.tipbar.show{opacity:1;}
.coach__label,.tipbar .tt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
.coach__move,.tipbar .move{font-family:var(--display);text-transform:uppercase;font-size:18px;line-height:1;color:#fff;}
.coach.show .coach__move,.tipbar.show .move{color:var(--gold);}
.coach__why,.tipbar .why{color:var(--mute);}
.tipbar .dot{display:none;}
.rec-pill{font-size:12px;color:var(--mute);text-align:center;margin-top:10px;line-height:1.5;}
.rec-pill b{color:var(--paper);font-weight:600;}
.freepill{display:none;align-items:center;justify-content:center;gap:6px;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--gold-ink);margin:10px 10px 0;border-radius:10px;background:var(--gold);}
.freepill.show{display:flex;}
.legalmini{text-align:center;font-size:11px;color:var(--mute-2);margin-top:12px;}

@media (max-width:540px){
  .table{border-radius:16px;}
  .felt{min-height:380px;padding:16px 10px 14px;margin:8px 8px 0;border-radius:12px;}
  .area.player{padding-bottom:4px;}
  .cards .card:not(:first-child){margin-left:-28px;}
  .console{padding:14px 14px 14px;margin:8px;border-radius:12px;}
  .chiptray{gap:11px;}
  .chip-btn{width:54px;height:54px;font-size:15px;}
  .actions,.livetools{gap:7px;}
  .game .btn{font-size:13.5px;padding:0 6px;}
  .ledger .v{font-size:26px;}
  .layout .print{font-size:12px;}
  .freepill{margin:8px 8px 0;}
}