/* Blackjack game client layout. Look "Graphite & Vermilion" from design/game-client (approved);
   components (cards, chips, decision bar, totals, results) come from /assets/art/table.css. */
:root{--ink:#0b0c0d;--felt:#24282b;--felt2:#181b1d;--panel:#16191b;--line:rgba(233,228,216,.12);--chalk:#e9e4d8;--mut:#8f9490;
--ver:#e8502e;--ver2:#b93c1e;--sage:#9dd3a6;--card:#f6f1e6;--blk:#1b1c1e;--off:rgba(233,228,216,.28)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#060707;color:var(--chalk);font:14px/1.35 "IBM Plex Sans","Segoe UI",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible{outline:2px solid #cdb98f;outline-offset:2px}
[hidden]{display:none!important}
.phone-only{display:none!important}

.frame{position:relative;overflow:hidden;width:100vw;height:100vh;height:100dvh;
  background:radial-gradient(90% 70% at 50% 35%,var(--felt) 0,var(--felt2) 70%,var(--ink) 100%);
  display:grid;grid-template-rows:60px minmax(0,1fr) 132px}

/* top bar */
.top{display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25);min-width:0}
.wm{height:34px;width:auto;display:block}
.top .sp{flex:1}
.rid{color:var(--mut);font-size:12px;white-space:nowrap}
.bal{text-align:right;line-height:1.1;white-space:nowrap}.bal small{display:block;color:var(--mut);font-size:11px}
.bal strong{font:600 18px "IBM Plex Mono",ui-monospace,monospace}
.iconbtn{min-width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;padding:0 10px;white-space:nowrap}
.iconbtn.on{border-color:var(--ver);color:var(--ver)}

/* table */
.table{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:18px;min-height:0}
.shoe{position:absolute;right:28px;top:16px;--bj-card-w:56px;transform:rotate(-8deg);opacity:.9}
.zone{display:flex;flex-direction:column;align-items:center;gap:8px}
.zlab{color:var(--mut);font-size:12px;letter-spacing:2px;text-transform:uppercase;display:flex;gap:8px;align-items:center;min-height:28px}
.cards{min-height:calc(var(--bj-card-w) * 1.4)}
.arc{width:760px;max-width:96vw;height:96px;margin:4px 0 0}
.arc text{fill:var(--off);font:600 12px "IBM Plex Sans",sans-serif;letter-spacing:2.5px}
.arc path.l{stroke:var(--line);fill:none;stroke-width:1.5}
.status{min-height:26px;font-size:15px;font-weight:600;text-align:center}
.status.mut{color:var(--mut);font-weight:400}
.status.warn{color:var(--ver)}
.hands{min-height:calc(var(--bj-card-w) * 1.4 + 60px);margin-top:10px}
.hand{position:relative}
.hand .hb{font-size:12px;color:var(--mut);min-height:16px}
.res{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--panel);border:1px solid var(--line);z-index:2}
.res.win{background:var(--sage);color:var(--blk);border-color:transparent}
.res.lose{color:var(--mut)}
.res.bust{background:var(--ver);color:#fff;border-color:transparent}
.bj-hands.bj-strip{justify-content:flex-start;width:100%;max-width:100vw;padding:4px 15vw;scroll-behavior:auto}
/* hand 70vw + 15vw side padding: the first and the last hand can sit in the middle too */
.bj-hands.bj-strip .bj-hand{min-width:70vw}
.dots{display:flex;gap:6px;justify-content:center;margin-top:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--off)}.dots i.on{background:var(--ver)}

/* bet spots */
.spots{display:flex;gap:34px;align-items:flex-end;margin-top:14px}
.spot{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.ring{width:96px;height:96px;border-radius:50%;border:2px dashed var(--off);display:grid;place-items:center;transition:border-color .15s}
.spot.main .ring{width:124px;height:124px;border:3px solid var(--chalk)}
.spot:hover:not(.off) .ring{border-color:var(--ver)}
.spot .nm{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.spot .nm b{color:var(--chalk);font:500 12px "IBM Plex Mono",monospace;letter-spacing:0}
.spot.off{opacity:.35;cursor:not-allowed}
.stack .bj-chip{display:block;width:46px;height:46px;cursor:inherit}
.spot .flag{position:absolute;top:-14px;white-space:nowrap;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--panel);border:1px solid var(--line);color:var(--mut);z-index:2}
.spot .flag.win{background:var(--sage);color:var(--blk);border-color:transparent}
.tip{display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:240px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12px;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:5}
.tip h4{font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.tip .pl{display:flex;justify-content:space-between;padding:2px 0;color:var(--mut)}.tip .pl b{color:var(--chalk);font:500 12px "IBM Plex Mono",monospace}
body[data-phase=betting] .spot:hover .tip,body[data-phase=settled] .spot:hover .tip{display:block}
.sidepay{margin:8px 12px 0;padding:10px 12px;font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--mut)}
.sidepay b{color:var(--chalk)}

/* chips rack */
.chips{display:flex;gap:12px;align-items:center}
.chips .bj-chip{border-radius:50%}
.chips .bj-chip.on{box-shadow:0 0 0 3px var(--chalk)}

/* bottom bar */
.bar{display:flex;align-items:center;padding:0 24px;border-top:1px solid var(--line);background:rgba(0,0,0,.35);min-width:0}
.betbar,.playbar{display:flex;align-items:center;gap:14px;width:100%}
.betbar .sp{flex:1}
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;gap:8px;white-space:nowrap}
.btn:disabled{opacity:.32}
.btn.pri{background:var(--ver);border-color:var(--ver);color:#fff;min-width:170px;min-height:64px;font-size:18px;border-radius:14px}
.btns{display:flex;gap:8px}
.row2{display:flex;gap:14px;align-items:center}
.betsum{line-height:1.15;white-space:nowrap}.betsum small{display:block;color:var(--mut);font-size:11px}.betsum strong{font:600 18px "IBM Plex Mono",monospace}
.playbar .bj-acts{flex:1}
.bj-acts:not(.phone) .big,.bj-acts:not(.phone) .small{display:contents}
.bj-act{min-width:120px}
.dealerbar{width:100%;text-align:center;color:var(--mut);font-size:15px}
.tog{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 14px;border:1px dashed var(--off);border-radius:10px;font-weight:600;width:100%}
.tog small{color:var(--mut);font-weight:400}
.tog.open{border-color:var(--ver)}

/* insurance prompt, result banner, toast */
.prompt{position:absolute;right:70px;top:46%;transform:translateY(-50%);width:420px;max-width:calc(100% - 24px);border-color:var(--chalk);z-index:6}
.prompt .bj-act{min-width:150px}
.banner{position:absolute;right:90px;top:46%;margin-top:-50px;z-index:4;background:rgba(12,13,14,.82)}
.banner.win,.banner.bj,.banner.bigwin{border-color:var(--sage)}
.banner .sub{letter-spacing:0;text-transform:none;margin-top:2px}
.toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:var(--chalk);color:var(--blk);border-radius:10px;padding:10px 16px;font-weight:600;z-index:7;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast small{display:block;font-weight:400;color:#555;font-size:12px}

/* menu, modal */
.menu{position:absolute;right:16px;top:64px;width:290px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:9;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu button{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:46px;padding:0 12px;border-radius:8px;text-align:left}
.menu button:hover{background:rgba(255,255,255,.05)}
.menu button+button{border-top:1px solid var(--line)}
.menu .sw{width:38px;height:22px;border-radius:999px;background:var(--off);position:relative;flex:none}
.menu .sw:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--chalk)}
.menu .sw.on{background:var(--ver)}.menu .sw.on:after{left:19px}
.menu .lang{color:var(--mut);font-size:12px}
.modal{position:absolute;inset:0;background:rgba(6,7,7,.72);display:grid;place-items:center;z-index:10}
.pop{width:680px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pop .ph{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.pop .ph h2{font:600 20px Fraunces,Georgia,serif}
.pop .pb{padding:16px 20px;overflow:auto}
.pop h3{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.pop ul,.pop ol{padding-left:18px}.pop li{margin:3px 0}
.pop p.note,.note{color:var(--mut);font-size:12px;margin-top:10px}
.mut{color:var(--mut)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{text-align:left;color:var(--mut);font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.t td{padding:8px;border-bottom:1px solid var(--line)}
#histTable tr[data-i]{cursor:pointer}#histTable tr[data-i]:hover td{background:rgba(255,255,255,.03)}
.t td.n{font-family:"IBM Plex Mono",monospace;text-align:right}.t th.n{text-align:right}
.t tr.sel td{background:rgba(232,80,46,.08)}
.t .w{color:var(--sage)}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid var(--off);color:var(--mut);letter-spacing:.5px;text-transform:uppercase}
.tag.v{border-color:var(--ver);color:var(--ver)}
.det{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.det .cards{min-height:0;display:flex;gap:4px;flex-wrap:wrap}
.det .bj-card.mini{--bj-card-w:38px;filter:none}
.sm{font-size:11px}
.strat{display:grid;grid-template-columns:44px repeat(10,1fr);gap:2px;font:500 11px "IBM Plex Mono",monospace;text-align:center}
.strat span{padding:3px 0;border-radius:3px;background:rgba(255,255,255,.05)}
.strat .H{background:#3a3f43}.strat .S{background:var(--ver2);color:#fff}.strat .D,.strat .Ds{background:#5d8a65;color:#fff}
.strat .P{background:#8a5a9a;color:#fff}.strat .R{background:var(--chalk);color:var(--blk)}.strat .h{background:transparent;color:var(--mut)}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 16px}
.kv span:nth-child(even){font-family:"IBM Plex Mono",monospace;text-align:right}
.err{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.err .e{border:1px solid var(--line);border-radius:12px;padding:14px}
.err .e h4{font-size:14px;margin-bottom:4px}.err .e p{color:var(--mut);font-size:12px;margin-bottom:10px}

/* disconnect veil */
.veil{position:absolute;inset:0;background:rgba(6,7,7,.62);z-index:11;display:grid;place-items:center}
.lost{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 28px;width:440px;max-width:calc(100vw - 32px);text-align:center}
.lost h3{font:600 22px Fraunces,Georgia,serif;margin:12px 0 6px}
.lost p{color:var(--mut)}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--off);border-top-color:var(--ver);margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:4s}}
.bj-reduce .spin{animation-duration:4s}

/* loading / test login */
.loading{position:absolute;inset:0;z-index:12;background:#060707;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center}
.loading .wm{height:48px}
.loading p{color:var(--mut)}
.login{display:flex;flex-direction:column;gap:8px;width:280px;max-width:100%}
.login input{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--chalk);font:inherit}
.login small{color:var(--mut)}

/* short desktop screens (laptops, 720 px high) */
@media (min-width:601px) and (max-height:820px){
  :root{--bj-card-w:64px}
  .frame{grid-template-rows:56px minmax(0,1fr) 112px}
  .table{padding-top:8px}
  .arc{height:64px}
  .ring{width:76px;height:76px}.spot.main .ring{width:96px;height:96px}
  .spots{margin-top:6px}
  .btn.pri{min-height:56px}
  .bj-act{min-height:60px}
}

/* phone portrait */
@media (max-width:600px){
  .phone-only:not([hidden]){display:flex!important}
  .hide-sm{display:none!important}
  .frame{display:flex;flex-direction:column}
  .top{height:52px;gap:8px;padding:0 10px;flex:none}
  .wm{height:26px}
  .bal strong{font-size:16px}
  .table{flex:1;padding-top:8px}
  .shoe{--bj-card-w:36px;right:12px;top:6px}
  .arc{width:370px;height:56px;margin:0}
  .arc text{font-size:9px;letter-spacing:1px}
  .status{font-size:13px;min-height:22px;padding:0 8px}
  .hands{gap:10px;min-height:calc(var(--bj-card-w) * 1.4 + 56px)}
  .hands.fit{transform:scale(.8);transform-origin:50% 0}
  .bj-hand{padding:8px}
  .spots{gap:16px;margin-top:6px}
  .ring{width:62px;height:62px}.spot.main .ring{width:84px;height:84px}
  .stack .bj-chip{width:36px;height:36px}
  .spot .nm{font-size:10px;letter-spacing:1px}
  .spot .nm b{font-size:11px}
  body:not(.side-open) .spot.side.empty{display:none}
  .tip{display:none!important}
  .bar{flex:none;padding:10px 12px calc(14px + env(safe-area-inset-bottom))}
  .betbar,.playbar{flex-direction:column;align-items:stretch;gap:10px}
  .chips{justify-content:space-between;gap:4px}
  .btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .btns .btn{padding:0 4px;font-size:13px}
  .row2 .betsum{flex:none}
  .row2 .btn.pri{flex:1;min-width:0;min-height:54px;font-size:17px}
  .dealerbar{padding:20px 0}
  /* mockups m05/m06: Hit and Stand on top, Double / Split / Surrender below */
  .bj-acts.phone{flex-direction:column}
  .prompt{right:auto;left:12px;width:calc(100% - 24px);top:auto;bottom:8px;transform:none;padding:16px}
  .prompt .bj-ins-btns{display:grid;grid-template-columns:1fr 1fr}
  .prompt .bj-act{min-width:0}
  .table>*{flex-shrink:0}
  .hands{margin-top:14px}
  .res{top:-8px}
  .table:has(#banner:not([hidden])) .arc{display:none} /* room for the banner under the spots */
  /* in the flow under the spots, so it never covers the bet-spot labels */
  .banner{position:static;width:calc(100% - 24px);margin:8px 12px 0;padding:6px 16px;background:rgba(12,13,14,.95)}
  .banner strong{font-size:26px}
  .toast{top:8px;white-space:normal;width:calc(100% - 24px)}
  .menu{right:8px;top:56px;width:calc(100% - 16px);max-width:320px}
  .modal{place-items:end stretch}
  .pop{width:100%;max-width:none;max-height:90dvh;border-radius:20px 20px 0 0;border-bottom:0}
  .pop .pb{padding:12px 16px;font-size:13px}
  .lost{width:340px;padding:20px}
}