/* PoshakOS games: Minesweeper and Solitaire. Each era swaps the tokens at the top of .ms and .sol. */
.gm-th{display:block;overflow:hidden}
.gm-th svg{display:block;width:100%;height:100%}
#os[data-era="1984"] .gm-th{filter:grayscale(1) contrast(1.3)}

/* ---------- Minesweeper ---------- */
.win[data-app="mines"] .bd{display:flex;flex-direction:column}
.ms{--cs:30px;--gap:2px;--r:5px;--panel:rgba(255,255,255,.6);--panel-sh:0 1px 3px rgba(15,30,60,.1),inset 0 0 0 1px rgba(255,255,255,.7);
  --hid:linear-gradient(#fbfcfe,#e2e8f1);--hid2:var(--hid);--hid-sh:inset 0 0 0 1px rgba(20,40,80,.13),0 1px 0 rgba(20,40,80,.06);
  --open:#eef1f6;--open2:var(--open);--open-sh:inset 0 0 0 1px rgba(20,40,80,.05);--led-bg:#151b26;--led-fg:#ff5b4e;--ink:#1b1f27;
  --n1:#2563eb;--n2:#16a34a;--n3:#dc2626;--n4:#4338ca;--n5:#b45309;--n6:#0d9488;--n7:#1b1f27;--n8:#64748b;
  flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ms-lv{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ms-lv button,.ms-flag{all:unset;cursor:pointer;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.ms-lv button.on,.ms-flag[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ms-lv button:focus-visible,.ms-flag:focus-visible,.ms-face:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ms-flag svg{width:15px;height:15px;color:currentColor}
.ms-panel{background:var(--panel);border-radius:14px;padding:12px;box-shadow:var(--panel-sh);max-width:100%;box-sizing:border-box}
.ms-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.ms-led{font:600 20px/1 var(--mono);letter-spacing:1px;background:var(--led-bg);color:var(--led-fg);padding:6px 8px;border-radius:7px;min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}
.ms-face{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--hid);box-shadow:var(--hid-sh)}
.ms-face:active{transform:scale(.94)}
.ms-face svg{width:28px;height:28px}
.ms-grid{display:grid;grid-template-columns:repeat(var(--c),var(--cs));grid-auto-rows:var(--cs);gap:var(--gap);touch-action:manipulation}
.ms-c{all:unset;box-sizing:border-box;width:var(--cs);height:var(--cs);display:grid;place-items:center;background:var(--hid);border-radius:var(--r);box-shadow:var(--hid-sh);font:700 calc(var(--cs)*.56)/1 var(--font);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ms-c.alt{background:var(--hid2)}
.ms-c:not(.o):active{filter:brightness(.93)}
.ms-c.o{background:var(--open);box-shadow:var(--open-sh);cursor:default}
.ms-c.o.alt{background:var(--open2)}
.ms-c:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ms-c svg{width:66%;height:66%;grid-area:1/1}
.ms-c svg.fl{color:var(--ink)}
.ms-c svg.mn{color:var(--ink)}
.ms-c.boom{background:#ff5b4e!important}
.ms-c.n1{color:var(--n1)}.ms-c.n2{color:var(--n2)}.ms-c.n3{color:var(--n3)}.ms-c.n4{color:var(--n4)}.ms-c.n5{color:var(--n5)}.ms-c.n6{color:var(--n6)}.ms-c.n7{color:var(--n7)}.ms-c.n8{color:var(--n8)}
.ms-foot{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--soft);flex-wrap:wrap;justify-content:center}
.ms-tip{margin:0;font-size:12px;color:var(--soft);text-align:center}
#os.phone .ms{padding:14px 8px}

/* 1984: one bit */
#os[data-era="1984"] .ms{--gap:0px;--r:0;--panel:#fff;--panel-sh:inset 0 0 0 1px #000;--hid:#fff;--hid-sh:inset 0 0 0 1px #000,inset -2px -2px 0 1px #000;
  --open:#fff;--open-sh:inset 0 0 0 .5px #000;--led-bg:#fff;--led-fg:#000;--ink:#000;--n1:#000;--n2:#000;--n3:#000;--n4:#000;--n5:#000;--n6:#000;--n7:#000;--n8:#000}
#os[data-era="1984"] .ms-panel{border-radius:0}
#os[data-era="1984"] .ms-led{border-radius:0;box-shadow:inset 0 0 0 1px #000;font-family:"VT323",monospace;font-size:24px;font-weight:400}
#os[data-era="1984"] .ms-face{border-radius:0}
#os[data-era="1984"] .ms-face svg,#os[data-era="1984"] .ms-c svg{filter:grayscale(1) contrast(2)}
#os[data-era="1984"] .ms-lv button,#os[data-era="1984"] .ms-flag{border-radius:6px;border:1px solid #000;color:#000}
#os[data-era="1984"] .ms-lv button.on,#os[data-era="1984"] .ms-flag[aria-pressed="true"]{background:#000;color:#fff}
#os[data-era="1984"] .ms-c.boom{background:#000!important}
#os[data-era="1984"] .ms-c.boom svg.mn{color:#fff}
#os[data-era="1984"] .ms-tip,#os[data-era="1984"] .ms-foot{color:#000}

/* 1995: the one everybody played */
#os[data-era="1995"] .win[data-app="mines"] .bd{background:#c0c0c0}
#os[data-era="1995"] .ms{--gap:0px;--r:0;--panel:#c0c0c0;--panel-sh:inset -3px -3px #808080,inset 3px 3px #fff;--hid:#c0c0c0;--hid-sh:inset -2px -2px #808080,inset 2px 2px #fff;
  --open:#c0c0c0;--open-sh:inset 1px 1px #808080;--led-bg:#000;--led-fg:#ff0000;--ink:#000;
  --n1:#0000ff;--n2:#008000;--n3:#ff0000;--n4:#000080;--n5:#800000;--n6:#008080;--n7:#000;--n8:#808080}
#os[data-era="1995"] .ms-panel{border-radius:0;padding:8px}
#os[data-era="1995"] .ms-head{padding:5px 6px;box-shadow:inset 2px 2px #808080,inset -2px -2px #fff;margin-bottom:8px}
#os[data-era="1995"] .ms-led{border-radius:0;font-family:"Courier New",monospace;font-weight:700;font-size:22px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
#os[data-era="1995"] .ms-face{border-radius:0;width:34px;height:34px}
#os[data-era="1995"] .ms-face:active{transform:none;box-shadow:inset 1px 1px #808080}
#os[data-era="1995"] .ms-grid{border:3px solid;border-color:#808080 #fff #fff #808080}
#os[data-era="1995"] .ms-c{font-family:Tahoma,"Microsoft Sans Serif",sans-serif}
#os[data-era="1995"] .ms-c:not(.o):active{filter:none;box-shadow:inset 1px 1px #808080}
#os[data-era="1995"] .ms-lv button,#os[data-era="1995"] .ms-flag{border-radius:0;border:0;background:#c0c0c0;color:#000;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="1995"] .ms-lv button.on,#os[data-era="1995"] .ms-flag[aria-pressed="true"]{background:#c0c0c0;color:#000;box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080,inset -2px -2px #dfdfdf;font-weight:700}
#os[data-era="1995"] .ms-tip,#os[data-era="1995"] .ms-foot{color:#000}

/* 2001: Aqua gel */
#os[data-era="2001"] .ms{--r:6px;--panel:repeating-linear-gradient(#f4f4f4 0 2px,#e9e9e9 2px 4px);--panel-sh:0 2px 8px rgba(0,0,0,.18),inset 0 0 0 1px #b9bec6;
  --hid:linear-gradient(#d9ecff,#8cc1f7 48%,#62a4ef 52%,#a6d2ff);--hid-sh:inset 0 0 0 1px #3d7bc9,inset 0 2px 2px rgba(255,255,255,.7);--open:#fff;--open-sh:inset 0 0 0 1px #c5cbd3;--led-bg:#1c2a1c;--led-fg:#9cff7a}
/* 2007: glossy */
#os[data-era="2007"] .ms{--r:6px;--panel:linear-gradient(rgba(40,30,80,.75),rgba(15,10,40,.85));--panel-sh:0 10px 30px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.3);
  --hid:linear-gradient(#8f9bf0,#5767d6 49%,#4251c4 51%,#7a8cf0);--hid-sh:inset 0 0 0 1px rgba(20,20,80,.6),inset 0 1px rgba(255,255,255,.6);--open:rgba(255,255,255,.92);--open-sh:inset 0 0 0 1px rgba(0,0,0,.1);--led-bg:#000;--led-fg:#5ff3ff}
#os[data-era="2007"] .ms-led{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* 2013: flat */
#os[data-era="2013"] .ms{--gap:0px;--r:0;--panel:#fff;--panel-sh:none;--hid:#aad751;--hid2:#a2d149;--hid-sh:none;--open:#e5c29f;--open2:#d7b899;--open-sh:none;--led-bg:#4a752c;--led-fg:#fff;
  --n1:#1976d2;--n2:#388e3c;--n3:#d32f2f;--n4:#7b1fa2;--n5:#ff8f00;--n6:#0097a7;--n7:#424242;--n8:#9e9e9e}
#os[data-era="2013"] .ms-led{font-family:var(--font);font-weight:300;border-radius:4px}
#os[data-era="2013"] .ms-face{background:#fff;box-shadow:none}
#os[data-era="2013"] .ms-c:not(.o):hover{filter:brightness(1.08)}
/* now: glass */
#os[data-era="now"] .ms-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- Solitaire ---------- */
.win[data-app="sol"] .bd,#os[data-era="1995"] .win[data-app="sol"] .bd{display:flex;flex-direction:column;overflow:hidden;background:none;padding:0}
.sol{--felt:radial-gradient(120% 90% at 50% 0%,#2f8f5a,#155f38 60%,#0d4428);--back:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 3px,transparent 3px 8px),linear-gradient(135deg,#3d6fe0,#7a4ed8);
  --back-sh:inset 0 0 0 3px #fff,0 1px 2px rgba(0,0,0,.35);--face-sh:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.08);--cr:7px;--red:#d42a2a;--blk:#1a1a1a;--slot:inset 0 0 0 2px rgba(255,255,255,.22);
  --bar-bg:rgba(255,255,255,.14);--bar-fg:#fff;
  flex:1;display:flex;flex-direction:column;min-height:0;background:var(--felt);color:#fff;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sol-bar{display:flex;gap:8px;align-items:center;padding:9px 12px 4px;font-size:13px;flex-wrap:wrap}
.sol-bar button{all:unset;cursor:pointer;padding:5px 12px;border-radius:999px;background:var(--bar-bg);color:var(--bar-fg);font-weight:500}
.sol-bar button:hover{filter:brightness(1.15)}
.sol-bar button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.sol-st{margin-left:auto;opacity:.85;font-variant-numeric:tabular-nums}
.sol-b{position:relative;flex:1;min-height:0;touch-action:none;overflow:hidden}
.sol-slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:var(--cr);box-shadow:var(--slot);box-sizing:border-box;display:grid;place-items:center;color:rgba(255,255,255,.3)}
.sol-slot[data-p="stock"]{cursor:pointer}
.sol-slot svg{width:42%;height:42%;stroke-width:2.2}
.sol-k{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:var(--cr);background:#fff;color:var(--blk);box-shadow:var(--face-sh);transition:transform .24s cubic-bezier(.2,.8,.2,1);will-change:transform;font-family:var(--font);overflow:hidden;cursor:pointer;box-sizing:border-box}
.sol-k.red{color:var(--red)}
.sol-k .k-tl,.sol-k .k-br{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:calc(var(--cw)*.23);line-height:.95}
.sol-k .k-tl{left:7%;top:5%}
.sol-k .k-br{right:7%;bottom:5%;transform:rotate(180deg)}
.sol-k b{font-weight:700;letter-spacing:-.04em}
.sol-k i{font-style:normal;font-size:.9em}
.sol-k .k-md{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-size:calc(var(--cw)*.46);line-height:1}
.sol-k .k-md em{font-style:normal;font-weight:700;font-size:.62em;margin-bottom:-.1em}
.sol-k.dn{background:var(--back);box-shadow:var(--back-sh)}
.sol-k.dn>*{visibility:hidden}
.sol-k.drag{transition:none;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.sol-k.shake{animation:solshake .32s}
@keyframes solshake{25%{rotate:-4deg}50%{rotate:3deg}75%{rotate:-2deg}}
.sol-fx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2000}
.sol-msg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2001;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:999px;background:rgba(10,20,15,.82);color:#fff;font-size:13px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sol-msg b{font-size:15px}
.sol-msg span{opacity:.8}
.sol-msg button{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;background:#fff;color:#123;font-weight:600}
#os.phone .sol-msg{flex-wrap:wrap;justify-content:center;white-space:normal;border-radius:16px;width:calc(100% - 48px);text-align:center}
#os.phone .sol-k .k-br{display:none}

#os[data-era="1984"] .sol{--felt:#fff;--back:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/4px 4px;--back-sh:inset 0 0 0 1px #000,inset 0 0 0 3px #fff;--face-sh:inset 0 0 0 1px #000;--cr:4px;--red:#000;--slot:inset 0 0 0 1px #000;--bar-bg:#fff;--bar-fg:#000;color:#000}
#os[data-era="1984"] .sol-bar button{border:1px solid #000;border-radius:6px;font-family:"VT323",monospace;font-size:17px;padding:2px 10px}
#os[data-era="1984"] .sol-slot{color:#000}
#os[data-era="1984"] .sol-msg{background:#fff;color:#000;border:2px solid #000;border-radius:0;box-shadow:3px 3px 0 #000}
#os[data-era="1984"] .sol-msg button{background:#000;color:#fff;border-radius:6px}
#os[data-era="1995"] .sol{--felt:#008000;--back:repeating-linear-gradient(45deg,#1030b0 0 2px,#4a6af0 2px 4px);--back-sh:inset 0 0 0 1px #000,inset 0 0 0 3px #fff;--face-sh:inset 0 0 0 1px #000;--cr:4px;--red:#ff0000;--blk:#000;--slot:inset 0 0 0 1px #004000;--bar-bg:#c0c0c0;--bar-fg:#000}
#os[data-era="1995"] .sol-bar{background:#c0c0c0;color:#000;padding:4px 6px;box-shadow:inset 0 -1px #808080}
#os[data-era="1995"] .sol-bar button{border-radius:0;padding:3px 10px;font-weight:400;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="1995"] .sol-k{font-family:"Times New Roman",serif}
#os[data-era="1995"] .sol-msg{border-radius:0;background:#c0c0c0;color:#000;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="1995"] .sol-msg button{border-radius:0;background:#c0c0c0;color:#000;font-weight:400;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="2001"] .sol{--felt:repeating-linear-gradient(rgba(255,255,255,.04) 0 2px,transparent 2px 4px),linear-gradient(#2c7a46,#1b5a33);--back:linear-gradient(#dcefff,#7fb6f2 48%,#4f93e6 52%,#9fd0ff);--back-sh:inset 0 0 0 1px #2f6cbf,inset 0 0 0 3px #fff,0 2px 4px rgba(0,0,0,.35);--bar-bg:linear-gradient(#fff,#d9dde3);--bar-fg:#111}
#os[data-era="2007"] .sol{--felt:radial-gradient(110% 80% at 50% 0%,#2a6e47,#0a2a19 70%);--back:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#6a2ec8,#c8338e);--back-sh:inset 0 0 0 2px rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.5);--bar-bg:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.08))}
#os[data-era="2013"] .sol{--felt:#1e9e63;--back:#ef5350;--back-sh:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(0,0,0,.06);--face-sh:inset 0 0 0 1px rgba(0,0,0,.08);--cr:6px;--red:#e53935;--blk:#263238;--slot:inset 0 0 0 1.5px rgba(255,255,255,.45);--bar-bg:rgba(255,255,255,.2)}
#os[data-era="2013"] .sol-k b{font-weight:400}

/* ---------- Blackjack ---------- */
.win[data-app="bj"] .bd,#os[data-era="1995"] .win[data-app="bj"] .bd{display:flex;flex-direction:column;overflow:hidden;background:none;padding:0}
.bj{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--felt:var(--grain),radial-gradient(60% 70% at 50% 30%,#35a066,#1a7444 55%,#0e4e2c);--room:radial-gradient(120% 90% at 50% 0%,#2e2622,#120d0b);--rail:linear-gradient(#6a3820,#43200f 60%,#2c1409);--print:rgba(240,204,128,.75);--back:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 3px,transparent 3px 8px),linear-gradient(135deg,#3d6fe0,#7a4ed8);
  --back-sh:inset 0 0 0 3px #fff,0 1px 3px rgba(0,0,0,.4);--face-sh:0 2px 5px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.08);--cr:7px;--red:#d42a2a;--blk:#1a1a1a;
  --bar-bg:rgba(255,255,255,.14);--bar-fg:#fff;--ctl:rgba(0,0,0,.22);--go:#ffd75e;--go-fg:#1d1a10;--ink:#fff;--cw:58px;
  flex:1;display:flex;flex-direction:column;min-height:0;background:var(--room);color:var(--ink);user-select:none;-webkit-user-select:none;font-size:13px;position:relative}
.bj button{font:inherit}
.bj-bar{display:flex;gap:8px;align-items:center;padding:9px 12px 4px;flex-wrap:wrap}
.bj-tabs{display:flex;background:rgba(0,0,0,.2);border-radius:999px;padding:2px}
.bj-tabs button,.bj-pill{all:unset;cursor:pointer;padding:5px 12px;border-radius:999px;font-weight:500}
.bj-tabs button[aria-selected="true"]{background:#fff;color:#123}
.bj-pill{background:var(--bar-bg);color:var(--bar-fg)}
.bj-pill[aria-pressed="true"]{background:#fff;color:#123}
.bj-pill.ghost{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.bj-bar button:focus-visible,.bj-ctl button:focus-visible,.bj-lobby button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.bj-room{display:flex;gap:6px;align-items:center}.bj-room:empty{display:none}
.bj-room b{font:600 13px var(--mono);letter-spacing:.08em;margin-right:2px}
.bj-sp{flex:1}
.bj-info{opacity:.85;font-variant-numeric:tabular-nums}.bj-info b{font-weight:700}
.bj-t{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 14px 40px;overflow:auto;overflow-x:hidden;isolation:isolate}
/* the table: a padded leather rail, and the felt inside it, curving toward the players */
.bj-t:before,.bj-t:after{content:"";position:absolute;z-index:0;pointer-events:none}
.bj-t:before{left:-14%;right:-14%;top:-45%;bottom:6px;border-radius:0 0 50% 50%/0 0 18% 18%;background:var(--rail);box-shadow:0 16px 34px rgba(0,0,0,.55),inset 0 -3px 0 rgba(255,255,255,.1),inset 0 -14px 18px rgba(0,0,0,.35)}
.bj-t:after{left:calc(-14% + 20px);right:calc(-14% + 20px);top:-45%;bottom:26px;border-radius:0 0 50% 50%/0 0 17% 17%;background:var(--felt);box-shadow:inset 0 -2px 0 rgba(255,214,140,.3),inset 0 -50px 70px rgba(0,0,0,.35),inset 0 30px 60px rgba(0,0,0,.25)}
.bj-t>:not(.bj-shoe):not(.bj-burst){position:relative;z-index:1}
.bj-t[hidden],.bj-ctl[hidden]{display:none}
.bj-felt{display:block;width:min(520px,92%);flex:none;margin:-4px 0 -8px;overflow:visible}
.bj-felt path{fill:none;stroke:none}
.bj-felt .ln{stroke:var(--print)!important;stroke-width:1.2;opacity:.7}
.bj-felt text{stroke:none;fill:var(--print);font:600 11.5px var(--font);letter-spacing:.3em;text-anchor:middle}
.bj-felt text.big{font:700 19px Georgia,"Times New Roman",serif;letter-spacing:.14em}

.bj-shoe{position:absolute;z-index:1;right:16px;top:10px;width:30px;height:40px;border-radius:5px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden;display:flex;align-items:flex-end}
.bj-shoe i{display:block;width:100%;background:var(--back);transition:height .4s}
.bj-dealer{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:calc(var(--cw)*1.42 + 26px)}
.bj-lbl{font-weight:600;opacity:.9;display:flex;gap:6px;align-items:center}
.bj-tot{display:inline-block;background:rgba(0,0,0,.35);color:#fff;border-radius:999px;padding:1px 8px;font-weight:600;font-variant-numeric:tabular-nums;font-size:12px}
.bj-tot:empty{display:none}
.bj-msg{min-height:20px;text-align:center;font-size:14px;max-width:520px;line-height:1.4;padding:4px 10px;border-radius:10px}
.bj-msg.tip{background:rgba(0,0,0,.28)}
.bj-seats{display:flex;gap:18px;justify-content:center;align-items:flex-end;width:100%;flex-wrap:wrap}
.bj-seats.many{gap:12px;--cw:52px}
.bj-seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px 8px;border-radius:14px;min-width:110px;transition:background .2s,box-shadow .2s}
.bj-seat{gap:2px}
.bj-seat.turn{box-shadow:0 0 0 2px var(--go),0 0 24px rgba(255,215,94,.35)}
.bj-seat.gone{opacity:.45}
.bj-hands{display:flex;gap:12px;align-items:flex-end}
.bj-hand{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px;border-radius:10px}
.bj-hand.on{background:rgba(255,215,94,.18)}
.bj-under{position:absolute;z-index:2;top:-6px;right:-12px;display:flex}
.bj-under .bj-tot{box-shadow:0 2px 6px rgba(0,0,0,.35)}
.r-bj .bj-under{display:none}
.bj-spot{position:relative;width:54px;height:54px;border-radius:50%;margin:2px 0 14px;box-shadow:inset 0 0 0 2px var(--print),inset 0 0 0 6px rgba(0,0,0,.08)}
.bj-amt{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.bj-stack{position:absolute;left:50%;bottom:17px;width:38px;height:22px;margin-left:-19px}
.bj-stack:has(+.pay){left:calc(50% - 13px)}
.bj-stack.pay{left:calc(50% + 13px)}
.bj-stack i{position:absolute;left:0;bottom:calc(var(--i)*4px);width:38px;height:22px;border-radius:50%;
  background:radial-gradient(closest-side,var(--cc) 0 56%,#fff 58% 64%,var(--cc) 66%),repeating-conic-gradient(from 8deg,var(--cc) 0 22.5deg,#fff 0 45deg);
  box-shadow:0 3px 0 var(--cd,rgba(0,0,0,.45)),0 4px 4px rgba(0,0,0,.3),inset 0 0 0 1.5px var(--cc)}
.bj-stack .c1{--cc:#d9dee8}.bj-stack .c5{--cc:#d23a3a}.bj-stack .c25{--cc:#1f8a4c}.bj-stack .c100{--cc:#20242c}.bj-stack .c500{--cc:#7a3fc4}
.bj-stack.take{opacity:0}
.bj-stack.take.fx{animation:bjtake .7s .5s ease-in both}
.bj-stack.pay.fx{animation:bjpay .6s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes bjtake{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-240px) scale(.7)}}
@keyframes bjpay{from{opacity:0;transform:translateY(-240px) scale(.7)}}
.r-lose .bj-amt,.r-bust .bj-amt,.r-sur .bj-amt{opacity:.5;text-decoration:line-through}
.bj-burst{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 65%,rgba(255,215,94,.5),transparent 60%);animation:bjburst 2.6s .5s both}
.bj-burst b{font:800 46px Georgia,serif;color:#ffd75e;text-shadow:0 2px 0 #7a5a00,0 8px 26px rgba(0,0,0,.55);animation:bjburstt 2.6s .5s both}
@keyframes bjburst{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
@keyframes bjburstt{0%{transform:scale(.4) rotate(-8deg)}15%{transform:scale(1.12) rotate(-4deg)}25%,100%{transform:scale(1) rotate(-4deg)}}
.bj-res{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) rotate(-6deg);padding:3px 9px;border-radius:7px;background:#fff;color:#123;font-weight:700;font-size:12px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.35);animation:bjpop .35s .15s both}
.r-win .bj-res,.r-bj .bj-res{background:var(--go);color:var(--go-fg)}
.r-lose .bj-res,.r-bust .bj-res{background:#2a2a2a;color:#fff}
.r-lose .bj-cards,.r-bust .bj-cards,.r-sur .bj-cards{opacity:.6;transition:opacity .4s .5s}
@keyframes bjpop{from{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg)}}
.bj-name{display:flex;gap:4px 7px;align-items:baseline;justify-content:center;flex-wrap:wrap;line-height:1.3;text-align:center;max-width:180px}
.bj-name b{font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bj-name span{opacity:.85;font-variant-numeric:tabular-nums;font-size:12px}
.bj-name .bj-st{font-size:11px;opacity:.7}.bj-name .bj-st.ok{opacity:1;color:var(--go)}
.bj-timer{position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.bj-timer i{display:block;height:100%;width:100%;background:var(--go);transition:width 1s linear}
.bj-empty{opacity:.7}
.bj-cards{display:flex;min-height:calc(var(--cw)*1.42)}
.bj-k{position:relative;flex:none;width:var(--cw);height:calc(var(--cw)*1.42);border-radius:var(--cr);background:#fff;color:var(--blk);box-shadow:var(--face-sh);font-family:var(--font);overflow:hidden;box-sizing:border-box}
.bj-k+.bj-k{margin-left:calc(var(--cw)*-.58)}
.bj-k.red{color:var(--red)}
.bj-k .k-tl{position:absolute;left:7%;top:5%;display:flex;flex-direction:column;align-items:center;font-size:calc(var(--cw)*.24);line-height:.95}
.bj-k b{font-weight:700;letter-spacing:-.04em}
.bj-k i{font-style:normal;font-size:.9em}
.bj-k .k-md{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-size:calc(var(--cw)*.46);line-height:1;padding-left:22%}
.bj-k .k-md em{font-style:normal;font-weight:700;font-size:.62em;margin-bottom:-.1em}
.bj-k.dn{background:var(--back);box-shadow:var(--back-sh)}
.bj-k.ghost{background:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.bj-k.in{animation:bjin .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d)*var(--step,270ms))}
.bj-k.flip{animation:bjflip .45s ease both}
@keyframes bjin{from{opacity:0;transform:translate(260px,-200px) rotate(16deg)}}
@keyframes bjflip{0%{transform:rotateY(90deg)}100%{transform:none}}
.bj-ctl{display:flex;gap:10px 14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 12px 12px;background:var(--ctl);min-height:52px}
.bj-ctl button{all:unset;cursor:pointer;box-sizing:border-box}
.bj-ctl button[disabled]{opacity:.35;cursor:default}
.bj-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bj-acts button,.bj-betbox button,.bj-ctl>button:not(.bj-c){display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;background:#fff;color:#123;font-weight:600;font-size:13.5px}
.bj-ctl button.ghost{background:rgba(255,255,255,.14);color:#fff}
.bj-ctl button.go,.bj-acts button[data-a="hit"]{background:var(--go);color:var(--go-fg)}
.bj-ctl kbd{font:500 10.5px var(--mono);opacity:.5;padding:0 4px;border-radius:4px;box-shadow:inset 0 0 0 1px currentColor}
.bj-chips{display:flex;gap:8px}
.bj-ctl .bj-c{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;
  background:radial-gradient(circle,var(--cc) 0 52%,#fff 53% 58%,var(--cc) 59%),repeating-conic-gradient(from 8deg,var(--cc) 0 22.5deg,#fff 0 45deg);
  background-blend-mode:normal;box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 0 0 3px var(--cc);transition:transform .12s}
.bj-c span{text-shadow:0 1px 1px rgba(0,0,0,.4)}
.bj-ctl .bj-c:not([disabled]):hover{transform:translateY(-3px)}
.bj-ctl .bj-c:not([disabled]):active{transform:translateY(0) scale(.95)}
.bj-c.c5{--cc:#d23a3a}.bj-c.c25{--cc:#1f8a4c}.bj-c.c100{--cc:#20242c}.bj-c.c500{--cc:#7a3fc4}
.bj-betbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.bj-bet{display:flex;flex-direction:column;align-items:center;min-width:74px;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.1}
.bj-bet small{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.bj-wait{opacity:.85}.bj-wait.sm{font-size:12px;opacity:.65;width:100%;text-align:center}
.bj-lobby{flex:1;display:grid;place-items:center;padding:20px;overflow:auto}
.bj-lobby[hidden]{display:none}
.bj-card{width:100%;max-width:360px;display:grid;gap:12px;background:rgba(0,0,0,.25);border-radius:18px;padding:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bj-card h3{margin:0;font-size:19px}
.bj-card p{margin:0;opacity:.85;line-height:1.45}
.bj-card label{display:grid;gap:5px;font-weight:600;font-size:12px}
.bj-card input{font:inherit;font-size:15px;font-weight:400;padding:9px 12px;border-radius:10px;border:0;background:#fff;color:#123;outline:none;min-width:0}
.bj-card input:focus{box-shadow:0 0 0 3px var(--go)}
.bj-card button{all:unset;cursor:pointer;text-align:center;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px}
.bj-card button.go{background:var(--go);color:var(--go-fg)}
.bj-card button.ghost{background:rgba(255,255,255,.16);color:#fff}
.bj-card button[disabled]{opacity:.5;cursor:default}
.bj-or{display:flex;align-items:center;gap:10px;opacity:.6;font-size:12px}.bj-or:before,.bj-or:after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}
.bj-join{display:flex;gap:8px}.bj-join input{flex:1;text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono)}
.bj-err{font-size:13px;min-height:1em;color:#ffe08a}
#os.phone .bj{--cw:50px}
#os.phone .bj-felt{margin-bottom:-10px}
#os.phone .bj-seats{flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;padding-bottom:4px}
#os.phone .bj-seat{min-width:96px}
#os.phone .bj-ctl .bj-c{width:38px;height:38px}
#os.phone .bj-info{width:100%;order:9;font-size:12px}
#os.phone .bj-seats.many{--cw:42px}

#os[data-era="1984"] .bj{--room:#fff;--rail:#000;--print:#000;--felt:#fff;--back:repeating-conic-gradient(#000 0 25%,#fff 0 50%) 0 0/4px 4px;--back-sh:inset 0 0 0 1px #000,inset 0 0 0 3px #fff;--face-sh:inset 0 0 0 1px #000;--cr:4px;--red:#000;--bar-bg:#fff;--bar-fg:#000;--ctl:#fff;--go:#000;--go-fg:#fff;--ink:#000}
#os[data-era="1984"] .bj-ctl{border-top:2px solid #000}
#os[data-era="1984"] .bj-ctl button,#os[data-era="1984"] .bj-pill,#os[data-era="1984"] .bj-tabs button,#os[data-era="1984"] .bj-card button{border-radius:6px!important;box-shadow:inset 0 0 0 1px #000;background:#fff;color:#000;font-family:"VT323",monospace;font-size:17px}
#os[data-era="1984"] .bj-ctl button.go,#os[data-era="1984"] .bj-tabs button[aria-selected="true"],#os[data-era="1984"] .bj-card button.go,#os[data-era="1984"] .bj-acts button[data-a="hit"]{background:#000;color:#fff}
#os[data-era="1984"] .bj-c{--cc:#000!important}
#os[data-era="1984"] .bj-tot,#os[data-era="1984"] .bj-res,#os[data-era="1984"] .bj-chip{background:#fff!important;color:#000!important;box-shadow:inset 0 0 0 1px #000}
#os[data-era="1984"] .bj-card,#os[data-era="1984"] .bj-msg.tip,#os[data-era="1984"] .bj-tabs{background:#fff;box-shadow:inset 0 0 0 2px #000}
#os[data-era="1984"] .bj-card input{box-shadow:inset 0 0 0 1px #000}
#os[data-era="1995"] .bj{--room:#808080;--rail:#5a3818;--print:rgba(255,255,160,.75);--felt:#008000;--back:repeating-linear-gradient(45deg,#1030b0 0 2px,#4a6af0 2px 4px);--back-sh:inset 0 0 0 1px #000,inset 0 0 0 3px #fff;--face-sh:inset 0 0 0 1px #000;--cr:4px;--red:#ff0000;--blk:#000;--ctl:#c0c0c0;--go:#ffff00;--go-fg:#000}
#os[data-era="1995"] .bj-bar{background:#c0c0c0;color:#000;padding:4px 6px;box-shadow:inset 0 -1px #808080}
#os[data-era="1995"] .bj-ctl{color:#000;box-shadow:inset 0 1px #fff}
#os[data-era="1995"] .bj-ctl button:not(.bj-c),#os[data-era="1995"] .bj-pill,#os[data-era="1995"] .bj-tabs button,#os[data-era="1995"] .bj-card button{border-radius:0!important;background:#c0c0c0!important;color:#000!important;font-weight:400;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="1995"] .bj-tabs{background:none;gap:2px}
#os[data-era="1995"] .bj-tabs button[aria-selected="true"],#os[data-era="1995"] .bj-pill[aria-pressed="true"]{font-weight:700;box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080,inset -2px -2px #dfdfdf}
#os[data-era="1995"] .bj-k{font-family:"Times New Roman",serif}
#os[data-era="1995"] .bj-card{border-radius:0;background:#c0c0c0;color:#000;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
#os[data-era="1995"] .bj-card input{border-radius:0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
#os[data-era="1995"] .bj-err{color:#800000}
#os[data-era="1995"] .bj-wait,#os[data-era="1995"] .bj-bet{color:#000}
#os[data-era="2001"] .bj{--room:linear-gradient(#e9ecf1,#c9ced7);--bar-bg:linear-gradient(#fff,#d9dde3);--bar-fg:#111}
#os[data-era="2001"] .bj[data-felt="classic"]{--rail:linear-gradient(#b9bec8,#7d8592);--felt:repeating-linear-gradient(rgba(255,255,255,.04) 0 2px,transparent 2px 4px),linear-gradient(#2c7a46,#1b5a33)}
#os[data-era="2001"] .bj[data-back="blue"]{--back:linear-gradient(#dcefff,#7fb6f2 48%,#4f93e6 52%,#9fd0ff);--back-sh:inset 0 0 0 1px #2f6cbf,inset 0 0 0 3px #fff,0 2px 4px rgba(0,0,0,.35)}
#os[data-era="2007"] .bj{--bar-bg:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.08))}
#os[data-era="2007"] .bj[data-felt="classic"]{--felt:radial-gradient(110% 80% at 50% 0%,#2a6e47,#0a2a19 70%)}
#os[data-era="2007"] .bj[data-back="blue"]{--back:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(135deg,#6a2ec8,#c8338e);--back-sh:inset 0 0 0 2px rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.5)}
#os[data-era="2013"] .bj{--room:#263238;--face-sh:inset 0 0 0 1px rgba(0,0,0,.08);--cr:6px;--red:#e53935;--blk:#263238;--bar-bg:rgba(255,255,255,.2);--ctl:rgba(0,0,0,.12)}
#os[data-era="2013"] .bj[data-felt="classic"]{--rail:#37474f;--print:rgba(255,255,255,.55);--felt:#1e9e63}
#os[data-era="2013"] .bj[data-back="blue"]{--back:#ef5350;--back-sh:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(0,0,0,.06)}
#os[data-era="2013"] .bj-k b{font-weight:400}
#os[data-era="2013"] .bj-c{box-shadow:none}
#os[data-era="1984"] .bj-stack i{--cc:#000!important;--cd:#000}
#os[data-era="1984"] .bj-t:after{box-shadow:inset 0 0 0 2px #000}
#os[data-era="1984"] .bj-burst{background:none}#os[data-era="1984"] .bj-burst b{color:#000;text-shadow:3px 3px 0 #fff,-3px -3px 0 #fff}
#os[data-era="2001"] .bj-bar,#os[data-era="2001"] .bj-ctl{color:#111}
#os[data-era="2001"] .bj-tabs{background:rgba(0,0,0,.1)}
#os[data-era="2001"] .bj-ctl button.ghost{background:rgba(0,0,0,.1);color:#111}
#os[data-era="2001"] .bj-bet,#os[data-era="2001"] .bj-wait{color:#111}
#os[data-era="2013"] .bj-t:before,#os[data-era="2013"] .bj-t:after{box-shadow:none}
.bj-gear{display:grid;place-items:center;padding:5px 7px}
.bj-gear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.bj-set{position:absolute;z-index:30;top:46px;right:10px;width:300px;max-width:calc(100% - 20px);max-height:calc(100% - 60px);overflow:auto;box-sizing:border-box;padding:14px 16px 16px;border-radius:16px;
  background:rgba(22,20,18,.94);color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:bjset .18s ease-out}
.bj-set[hidden]{display:none}
@keyframes bjset{from{opacity:0;transform:translateY(-6px)}}
.bj-set button{all:unset;cursor:pointer;box-sizing:border-box}
.bj-set button:focus-visible{outline:2px solid var(--go);outline-offset:2px}
.bj-set-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.bj-set-h button{opacity:.6;padding:2px 6px}
.bj-set h4{margin:14px 0 7px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;font-weight:600}
.bj-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bj-sw button{display:grid;justify-items:center;gap:4px;font-size:10.5px;text-align:center;line-height:1.15;opacity:.8}
.bj-sw button[aria-pressed="true"]{opacity:1}
.bj-sw i{display:block;width:100%;aspect-ratio:1.3;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bj-sw button[data-back] i{aspect-ratio:.72;width:46%}
.bj-sw:has([data-back]){grid-template-columns:repeat(5,1fr)}
.bj-sw button[aria-pressed="true"] i{box-shadow:0 0 0 2px rgba(22,20,18,1),0 0 0 4px var(--go)}
.bj-seg{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:3px}
.bj-seg button{flex:1;text-align:center;padding:6px 0;border-radius:999px;font-size:13px}
.bj-seg button[aria-pressed="true"]{background:#fff;color:#123;font-weight:600}
.bj-tg{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:13px;cursor:pointer}
.bj-tg input{appearance:none;-webkit-appearance:none;flex:none;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.2);position:relative;margin:0;cursor:pointer;transition:background .15s}
.bj-tg input:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.bj-tg input:checked{background:#34c759}.bj-tg input:checked:after{transform:translateX(14px)}
.bj-tg input:focus-visible{outline:2px solid var(--go);outline-offset:2px}
.bj-reset{display:block;width:100%;text-align:center;margin-top:12px;padding:8px;border-radius:10px;background:rgba(255,80,80,.16);color:#ffb4b4;font-size:13px;font-weight:600}
.bj-note{margin:10px 0 0;font-size:11px;opacity:.5;line-height:1.4}
.bj[data-totals="off"] .bj-tot{display:none}
#os.phone .bj-set{top:84px}
#os[data-era="1984"] .bj-set{background:#fff;color:#000;border-radius:0;box-shadow:0 0 0 2px #000,4px 4px 0 #000}
#os[data-era="1984"] .bj-seg{background:#fff;box-shadow:inset 0 0 0 1px #000}#os[data-era="1984"] .bj-seg button[aria-pressed="true"]{background:#000;color:#fff}
#os[data-era="1984"] .bj-tg input{background:#fff;box-shadow:inset 0 0 0 1px #000}#os[data-era="1984"] .bj-tg input:after{background:#000}#os[data-era="1984"] .bj-tg input:checked{background:#000}#os[data-era="1984"] .bj-tg input:checked:after{background:#fff}
#os[data-era="1995"] .bj-set{background:#c0c0c0;color:#000;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;-webkit-backdrop-filter:none;backdrop-filter:none}
#os[data-era="1995"] .bj-seg{background:none;border-radius:0}#os[data-era="1995"] .bj-seg button{border-radius:0}#os[data-era="1995"] .bj-seg button[aria-pressed="true"]{background:#000080;color:#fff}
#os[data-era="1995"] .bj-reset{background:none;color:#800000;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff;border-radius:0}