:root{
  --bg:#0e1621; --card:#17212b; --card2:#1d2a35; --line:#263span;
  --line:#243447; --txt:#e9eef5; --muted:#7d8fa3;
  --pri:#3390ec; --ok:#2ecc71; --warn:#f0a832; --dan:#e5484d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overscroll-behavior:none}
#app{max-width:520px;margin:0 auto;padding:10px 12px 20px}
.small{font-size:12px}.muted{color:var(--muted)}.center{text-align:center}
h3{margin:8px 0}
#topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--card);border-radius:14px;padding:8px 12px;margin-bottom:12px}
.me{display:flex;gap:9px;align-items:center}
.me img{width:38px;height:38px;border-radius:50%;background:var(--card2);object-fit:cover}
.chip-badge{background:var(--card2);border:1px solid var(--line);color:var(--txt);
  border-radius:20px;padding:8px 14px;font-weight:700;font-size:15px}
.screen{display:none;animation:fade .2s}.screen.active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{background:var(--card);border-radius:16px;padding:14px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{border:0;border-radius:12px;padding:13px 12px;font-size:15px;font-weight:600;
  color:#fff;background:var(--card2);cursor:pointer;transition:.15s;width:100%}
.btn:active{transform:scale(.97);opacity:.85}
.btn.primary{background:var(--pri)} .btn.ok{background:var(--ok)}
.btn.warn{background:var(--warn)} .btn.danger{background:var(--dan)}
.btn.ghost{background:var(--card2);border:1px solid var(--line)}
.btn.big{padding:17px;font-size:17px} .btn.sm{padding:9px;font-size:13px}
.btn.sq{width:52px;flex:0 0 52px} .btn:disabled{opacity:.35}
.tab{flex:1;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:11px;padding:11px;font-weight:600;font-size:14px}
.tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.bet-box{background:var(--card2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.bet-row{align-items:center}#bet-value{flex:1;text-align:center;font-size:26px;font-weight:800}
.spinner{width:38px;height:38px;margin:10px auto;border:3px solid var(--line);
  border-top-color:var(--pri);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* игра */
#opponents{display:flex;gap:8px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.opp{background:var(--card);border-radius:12px;padding:8px 11px;text-align:center;min-width:92px;
  border:2px solid transparent;font-size:12px}
.opp.turn{border-color:var(--warn)} .opp.out{opacity:.4}
.opp img{width:30px;height:30px;border-radius:50%;object-fit:cover}
#deck-zone{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}
.deck-count,.timer{font-size:12px;color:var(--muted)}
.timer span{color:var(--warn);font-weight:700}
#table{min-height:150px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  align-content:center;background:#132030;border-radius:16px;padding:12px;margin-bottom:8px}
.pair{position:relative;width:52px;height:76px}
.pair .def{position:absolute;left:11px;top:11px}
.pcard{width:52px;height:76px;border-radius:7px;background:#fff;color:#111;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;box-shadow:0 2px 6px #0007;user-select:none}
.pcard.red{color:#d32f2f} .pcard.back{background:linear-gradient(135deg,#3390ec,#1b5fa8)}
.card-mini{width:40px;height:58px;border-radius:6px;background:#fff;color:#111;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.card-mini.red{color:#d32f2f}
#hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
#hand .pcard{cursor:pointer;transition:.15s}
#hand .pcard.sel{transform:translateY(-14px);box-shadow:0 0 0 3px var(--pri)}
#hand .pcard.dim{opacity:.45}
#actions{display:flex;gap:8px;margin-top:6px}
.slot-target{outline:3px dashed var(--ok);outline-offset:2px;border-radius:8px;cursor:pointer}
/* модалка/тост */
#modal-root{position:fixed;inset:0;display:none;background:#000a;z-index:99;
  align-items:flex-end;justify-content:center}
#modal-root.open{display:flex}
.modal{background:var(--card);width:100%;max-width:520px;border-radius:18px 18px 0 0;
  padding:18px;max-height:85vh;overflow:auto;animation:up .22s}
@keyframes up{from{transform:translateY(60px)}to{transform:none}}
.modal>*{margin-bottom:9px}
.list-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--card2);border-radius:12px;padding:11px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);
  background:#000d;border:1px solid var(--line);border-radius:12px;padding:11px 18px;
  transition:.25s;opacity:0;z-index:120;font-size:14px;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%);opacity:1}