:root{
  --room:#15120f;--panel:#231e19;--panel2:#2e2721;--line:#40362d;--ink:#efe8db;--mut:#aba192;
  --felt:#1d5c44;--felt2:#13412f;--felt3:#237052;--feltink:#e2efe7;--feltmut:#b5d6c6;
  --rail:#4a3424;--rail2:#6a4e38;
  --ivory:#f4ecdb;--dark:#1b1612;--brass:#e3b45e;--brassink:#2e2106;--clay:#e3705c;--clayline:#6e362c;--up:#7fd3a4;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--line) transparent}
body{margin:0;background:var(--room);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--brass);color:var(--brassink)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ivory);outline-offset:2px}
button{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background-color .15s,border-color .15s,filter .15s,transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
button:hover:not(:disabled){border-color:#5d5044}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.4;cursor:not-allowed}
button svg{width:18px;height:18px;flex:none}
.b-call{background:var(--ivory);color:var(--dark);border-color:var(--ivory);font-weight:700}
.b-bet{background:var(--brass);color:var(--brassink);border-color:var(--brass);font-weight:700}
.b-call:hover:not(:disabled),.b-bet:hover:not(:disabled){filter:brightness(1.07);border-color:transparent}
.b-fold{background:transparent;color:var(--clay);border-color:var(--clayline);font-weight:700}
.b-fold:hover:not(:disabled){background:#e3705c14;border-color:var(--clay)}
.b-quiet{background:transparent}
.big{width:100%;padding:15px;font-size:17px}
input{background:var(--room);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;caret-color:var(--brass)}
input:focus{outline:2px solid var(--brass);outline-offset:-1px}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input::placeholder{color:#8e8577}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--brass);height:30px;cursor:pointer}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:2px solid var(--ivory);outline-offset:2px}
kbd{font:600 11px/1 system-ui,sans-serif;opacity:.55;border:1px solid currentColor;border-radius:4px;padding:2px 4px}
@media(hover:none){kbd{display:none}}
.mut{color:var(--mut)}

/* ---------- shell ---------- */
.game{max-width:1160px;margin:0 auto;padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;min-height:100vh;min-height:100dvh}
.bar{display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;margin:0}
.mark{width:20px;height:20px;border-radius:50%;background:var(--brass);border:3px dashed #fff9;flex:none}
.meta{color:var(--mut);font-size:13px;margin-left:4px}
.bar .sp{flex:1}
.ibtn{background:transparent;padding:8px 11px;font-size:14px}
.ibtn svg{width:17px;height:17px}
@media(max-width:700px){.ibtn span{display:none}.ibtn{padding:8px 9px}.brand span{display:none}.meta{margin-left:0;font-size:13.5px;color:var(--ink);font-weight:600}}

/* ---------- table ---------- */
.table{position:relative;width:100%;height:min(calc(100vw * .55),calc(100dvh - 330px));min-height:400px;--rx:42%;--ry:36.5%;--bx:.64;--by:.6}
.felt{position:absolute;inset:13.5% 8%;border-radius:50%;background:radial-gradient(ellipse at 50% 38%,var(--felt3) 0%,var(--felt) 48%,var(--felt2) 100%);border:12px solid var(--rail);outline:1px solid var(--rail2);box-shadow:0 22px 44px -14px #000d,inset 0 3px 26px #0007}
.felt::before{content:"";position:absolute;inset:11% 9%;border-radius:50%;border:1px dashed #ffffff1c}
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--feltink)}
.board{display:flex;gap:6px;margin-bottom:4px}
.card{width:34px;height:48px;border-radius:5px;border:1.5px dashed #ffffff30;transition:background-color .2s}
.card.on{border:3px solid var(--ivory);background:repeating-linear-gradient(45deg,#a8382f 0 3px,#8b2b25 3px 6px);box-shadow:0 3px 5px -1px #0008}
.pot{font-size:52px;font-weight:800;color:var(--brass);line-height:1;letter-spacing:-.025em}
.potlbl{font-size:13px;color:var(--feltmut);margin-top:-2px}
.sidepots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sidepots span{background:#0000003d;border-radius:99px;padding:2px 10px;font-size:12.5px;color:var(--feltmut)}
.sidepots b{color:var(--brass)}
.status{font-size:14px;min-height:1.45em;color:var(--feltmut);max-width:100%}
.status.hint{color:var(--ivory);font-weight:600}
.status.win{color:var(--ivory);font-weight:600}

.seat{position:absolute;left:calc(50% + var(--rx) * var(--c));top:calc(50% + var(--ry) * var(--s));transform:translate(-50%,-50%);width:140px;padding:8px 11px 9px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-align:left;box-shadow:0 8px 16px -6px #000c;display:flex;flex-direction:column;align-items:stretch;gap:0;z-index:2}
.seat:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}
.seat .nm{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;min-width:0}
.seat .nm>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.seat .stk{font-size:21px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.seat .sub{font-size:12px;color:var(--mut);min-height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat.turn{border-color:var(--ivory);outline:2px solid var(--ivory);outline-offset:2px;animation:turn .28s cubic-bezier(.2,.8,.2,1)}
.seat.turn::after{content:"To act";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:var(--ivory);color:var(--dark);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:2px 8px;white-space:nowrap}
.seat.fold{opacity:.5}
.seat.out{opacity:.4}
@keyframes turn{from{outline-offset:10px;outline-color:transparent}}
.dbtn{width:19px;height:19px;border-radius:50%;background:var(--ivory);color:var(--dark);font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;flex:none;box-shadow:0 1px 2px #0008}
.blind{font-size:10px;font-weight:800;color:var(--brass);border:1px solid #e3b45e66;border-radius:4px;padding:0 4px;line-height:15px;flex:none}
.st-fold{color:var(--clay)}.st-all{color:var(--brass);font-weight:700}
.up{color:var(--up)}.dn{color:var(--clay)}

.bet{position:absolute;left:calc(50% + var(--rx) * var(--c) * var(--bx));top:calc(50% + var(--ry) * var(--s) * var(--by));transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:99px;background:#00000047;color:var(--ivory);font-weight:700;font-size:13px;z-index:1;white-space:nowrap}
.chip{width:17px;height:17px;border-radius:50%;background:var(--brass);border:3px dashed #fffb;flex:none}

/* ---------- action dock ---------- */
.dock{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));width:100%;max-width:760px;margin:6px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 -6px 32px -12px #000,0 12px 30px -10px #000c;display:flex;flex-direction:column;gap:12px;z-index:5}
.who{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.who .nm{font-size:18px;font-weight:700}
.who .mut{font-size:14px}
.who .owe{color:var(--ivory);font-weight:600}
.acts{display:grid;grid-template-columns:1fr 1.35fr 1.35fr;gap:8px}
.acts.two{grid-template-columns:1fr 2fr}
.acts button{padding:15px 10px;font-size:16px;min-height:54px;white-space:nowrap}
.sizer{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:var(--room);border:1px solid var(--line)}
.sizer .row{display:flex;gap:8px;align-items:center}
.seg{display:flex;gap:6px;flex:1}
.seg button{flex:1;padding:8px 6px;font-size:13px;background:var(--panel)}
.sizer #rv{width:112px;flex:none;text-align:center;font-size:17px;font-weight:700;padding:8px;background:var(--panel)}
.step{width:40px;height:40px;padding:0;flex:none;background:var(--panel)}
.sizer input[type=range]{flex:1;min-width:0}

.dock h2{margin:0;font-size:17px}
.dock p{margin:0}
.potrow{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--line)}
.potrow .ph{display:flex;justify-content:space-between;font-weight:600}
.potrow .ph b{color:var(--brass)}
.picks{display:flex;gap:8px;flex-wrap:wrap}
.picks button{min-width:96px}
.picks button.sel{background:var(--brass);color:var(--brassink);border-color:var(--brass);font-weight:700}
.picks button.sel::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brassink)}
.results{display:flex;flex-direction:column;gap:3px;font-weight:600;font-size:16px}
.results div:first-child{color:var(--brass)}

/* ---------- setup ---------- */
.setup{max-width:540px;margin:0 auto;padding:6vh 16px 32px}
.setup-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 20px 44px -18px #000}
.setup h1{margin:0 0 4px;font-size:26px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.setup h1 .mark{width:24px;height:24px}
.setup p{margin:0}
.seats{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;gap:8px;align-items:center}
.snum{width:30px;height:30px;border-radius:50%;background:var(--felt);color:var(--feltink);font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}
.srow button{padding:0;width:40px;height:40px;flex:none;background:transparent;border-color:transparent;color:var(--mut)}
.srow button:hover:not(:disabled){color:var(--clay);border-color:var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid3 label,dialog label{font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:5px}

/* ---------- dialogs ---------- */
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:22px;width:min(400px,calc(100vw - 32px))}
dialog::backdrop{background:#0b0908b3}
dialog h3{margin:0 0 14px;font-size:18px;display:flex;align-items:center;gap:10px}
dialog h3 .x{margin-left:auto}
dialog .fields{display:flex;flex-direction:column;gap:12px}
dialog .row{display:flex;gap:8px;margin-top:10px}
dialog .row button{flex:1}
.x{width:36px;height:36px;padding:0;background:transparent;border-color:transparent;color:var(--mut)}
dialog.drawer{margin:0 0 0 auto;height:100%;max-height:none;width:min(380px,92vw);border-radius:0;border-width:0 0 0 1px;padding:0;display:flex;flex-direction:column}
dialog.drawer:not([open]){display:none}
dialog.drawer h3{padding:18px 18px 12px;margin:0;border-bottom:1px solid var(--line)}
.loglist{overflow:auto;padding:4px 18px 24px;font-size:14px}
.loglist div{padding:4px 0;color:var(--mut)}
.loglist div.sep{color:var(--ink);font-weight:700;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.loglist div.sep:first-child{border-top:0;margin-top:4px}
#toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-8px);background:var(--ivory);color:var(--dark);padding:9px 16px;border-radius:99px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;box-shadow:0 8px 20px -6px #000}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- phone: portrait table ---------- */
@media(max-width:640px){
  .game{padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:6px}
  .table{height:auto;min-height:0;aspect-ratio:3/3.9;--rx:35.5%;--ry:41%;--bx:.5;--by:.55}
  .felt{inset:8.5% 14.5%;border-width:9px}
  .center{width:48%;gap:5px}
  .board{gap:4px}
  .card{width:22px;height:31px;border-radius:4px}
  .card.on{border-width:2px}
  .pot{font-size:32px}
  .potlbl,.status{font-size:12.5px}
  .seat{width:90px;padding:6px 7px 7px;border-radius:10px}
  .seat .nm{font-size:12px;gap:4px}
  .seat .stk{font-size:15.5px}
  .seat .sub{font-size:11px}
  .dbtn{width:16px;height:16px;font-size:9.5px}
  .blind{font-size:9px;padding:0 3px;line-height:13px}
  .seat.turn::after{font-size:9.5px;bottom:-10px}
  .table.dense{aspect-ratio:3/4.3;--rx:38%;--ry:42%}
  .dense .seat{width:76px;padding:5px 6px 6px}
  .dense .seat .stk{font-size:14px}
  .dense .seat .nm{font-size:11.5px}
  .dense .seat .sub{font-size:10.5px}
  .bet{font-size:12px;padding:1px 7px 1px 2px}
  .chip{width:14px;height:14px;border-width:2.5px}
  .dock{padding:12px;gap:10px;border-radius:16px}
  .acts button{font-size:15px;padding:13px 6px}
  .acts kbd{display:none}
  .sizer{padding:8px}
  .sizer .row.top{flex-wrap:wrap}
  .sizer #rv{width:100%;order:-1}
  .grid3{gap:8px}
  .setup-card{padding:18px}
}

/* ---------- playing cards (card modes) ---------- */
.pc{width:34px;height:48px;border-radius:5px;background:#fbf7ee;color:#1b1612;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-weight:800;line-height:1;box-shadow:0 2px 5px -1px #0009;flex:none;user-select:none}
.pc b{font-size:15px;letter-spacing:-.03em}
.pc i{font-style:normal;font-size:15px}
.pc.red{color:#c43a2c}
.pc.back{background:repeating-linear-gradient(45deg,#a8382f 0 3px,#8b2b25 3px 6px);border:3px solid var(--ivory)}
.pc.lg{width:46px;height:64px;border-radius:7px}
.pc.lg b,.pc.lg i{font-size:20px}
.pc.sm{width:21px;height:29px;border-radius:3px;box-shadow:0 1px 2px #0008}
.pc.sm b{font-size:10px}.pc.sm i{font-size:10px}
.pc.sm.back{border-width:2px}
.pc.deal{animation:deal .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes deal{from{transform:translateY(-10px) scale(.9);opacity:0}}
.board.real{gap:6px}
.board.real .pc{width:44px;height:62px;border-radius:6px}
.board.real .pc b,.board.real .pc i{font-size:19px}
.board.real .card{width:44px;height:62px;border-radius:6px}
.seat .row2{display:flex;align-items:center;justify-content:space-between;gap:6px}
.seat .hole{display:flex;gap:3px}
.seat.won{border-color:var(--brass);outline:2px solid var(--brass);outline-offset:2px}
.seat.me{background:var(--panel2)}
.seat .you{font-size:10px;font-weight:800;color:var(--dark);background:var(--ivory);border-radius:4px;padding:0 4px;line-height:15px;flex:none}
.seat .tagb{font-size:10px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:0 4px;line-height:15px;flex:none}
.seat .sub .hn{color:var(--ivory)}
.seat.won .sub .hn{color:var(--brass)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6b6258;flex:none}
.dot.on{background:var(--up)}

/* dock additions */
.hand{display:flex;align-items:center;gap:12px;min-width:0}
.hand .cards{display:flex;gap:6px;flex:none}
.hinfo{min-width:0;display:flex;flex-direction:column;gap:2px}
.hand .hn{font-weight:700;font-size:17px;line-height:1.25}
.hand .line{font-size:14px;color:var(--mut);display:flex;align-items:center;gap:0 6px;flex-wrap:wrap}
.hand .line b{color:var(--ink)}
.hand .owe{color:var(--ivory);font-weight:600}
.timer{font-weight:700;color:var(--brass)}
.game.cm .table{height:min(calc(100vw * .5),calc(100dvh - 390px))}
.think{display:inline-flex;gap:4px}
.think i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:think 1s infinite ease-in-out}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}
@keyframes think{50%{opacity:.25;transform:translateY(-2px)}}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.row-btns button{flex:1}
.roomchip{font-weight:700;letter-spacing:.08em}

/* ---------- setup: mode picker ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode{flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:4px;padding:12px;border-radius:14px;background:var(--room)}
.mode svg{width:22px;height:22px;color:var(--mut);margin-bottom:4px}
.mode b{font-size:14.5px}
.mode span{font-size:12.5px;color:var(--mut);line-height:1.35}
.mode.on{border-color:var(--brass);background:#e3b45e14}
.mode.on svg{color:var(--brass)}
.fieldset{display:flex;flex-direction:column;gap:12px}
.lbl{font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:5px}
.segc{display:flex;gap:6px}
.segc button{flex:1;padding:9px 6px;font-size:14px;background:var(--room)}
.segc button.on{background:var(--ivory);color:var(--dark);border-color:var(--ivory);font-weight:700}
.stepper{display:flex;align-items:center;gap:8px}
.stepper output{min-width:44px;text-align:center;font-size:18px;font-weight:800}
.stepper button{width:40px;height:40px;padding:0;background:var(--room)}
.check{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--brass)}
.tabs{display:flex;border-bottom:1px solid var(--line);gap:4px}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px;color:var(--mut);font-weight:600}
.tabs button.on{color:var(--ink);border-bottom-color:var(--brass)}
.err{color:var(--clay);font-size:13.5px;margin:0}

/* ---------- lobby ---------- */
.code{font-size:40px;font-weight:800;letter-spacing:.16em;color:var(--brass);line-height:1}
.plist{display:flex;flex-direction:column}
.plist .pr{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.plist .pr:first-child{border-top:0}
.plist .pr .nm{font-weight:600}
.plist .pr .sp{flex:1}
.plist .pr .x{width:32px;height:32px}
.pill{font-size:11px;font-weight:700;border:1px solid var(--line);color:var(--mut);border-radius:99px;padding:1px 8px}
.summary{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--mut)}
.summary b{color:var(--ink);font-weight:600}

@media(max-width:640px){
  .modes{grid-template-columns:1fr}
  .mode{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
  .mode svg{margin:0;flex:none}
  .mode div{display:flex;flex-direction:column;gap:1px}
  .board.real{gap:4px}
  .board.real .pc,.board.real .card{width:28px;height:40px;border-radius:4px}
  .board.real .pc b,.board.real .pc i{font-size:12.5px}
  .pc.sm{width:17px;height:24px}
  .pc.sm b,.pc.sm i{font-size:9px}
  .dense .pc.sm{width:14px;height:20px}
  .dense .pc.sm b,.dense .pc.sm i{font-size:8px}
  .seat .row2{gap:3px}
  .pc.lg{width:40px;height:56px}
  .pc.lg b,.pc.lg i{font-size:17px}
  .hand .hn{font-size:15px}
  .hand .line{font-size:13px}
  .seat .tagb{display:none}
  .status.act{display:none}
  .game.cm .table{height:auto}
  .game.cm .table:not(.dense){aspect-ratio:3/3.6}
  .game.cm .table:not(.dense) .seat{width:100px}
  .game.cm .dense .seat{width:82px}
  .dense .hole > .pc.back{display:none}
  .sizer .row.top{flex-wrap:nowrap}
  .sizer .seg button{padding:8px 2px;font-size:12.5px}
  .sizer #rv{width:72px;order:0;font-size:15px}
  .code{font-size:32px}
}
/* ---------- showdown explanation ---------- */
.sumry{display:flex;flex-direction:column;gap:10px}
.sumry .h{font-weight:700;font-size:16px;color:var(--brass)}
.sumry .why{font-size:14px;color:var(--ink);margin-top:2px}
.sumry .why+.why{color:var(--mut);font-size:13px}
.sumry .unc .h{color:var(--mut);font-weight:600;font-size:14px}
.hands{border-top:1px solid var(--line);padding-top:8px}
.hands summary{cursor:pointer;color:var(--mut);font-size:13px;padding:2px 0 6px}
.hands summary:hover{color:var(--ink)}
.hrow{display:grid;grid-template-columns:minmax(64px,120px) auto 1fr;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.hrow .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .five{display:flex;gap:3px}
.hrow .hn{font-size:13.5px;color:var(--mut)}
.hrow.win .nm,.hrow.win .hn{color:var(--brass)}
.pc.own{outline:2px solid var(--brass);outline-offset:1px}
.pc.dim{opacity:.32}
.board.real .use .pc:not(.back){outline:2px solid var(--brass);outline-offset:2px}
.fl.dim{opacity:.32}
@media(max-width:640px){.hrow{grid-template-columns:62px auto;gap:4px 10px}.hrow .hn{grid-column:2}.sumry .h{font-size:15px}}
/* ---------- cards that turn over ---------- */
.fl{--w:34px;--h:48px;display:inline-block;position:relative;width:var(--w);height:var(--h);perspective:700px;flex:none}
.fl .fi{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.75,.25,1)}
.fl .pc{position:absolute;inset:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fl .pc.back{transform:rotateY(180deg)}
.fl.hid .fi{transform:rotateY(180deg)}
.fl.sm{--w:21px;--h:29px}.fl.sm .pc{border-radius:3px}.fl.sm .pc b,.fl.sm .pc i{font-size:10px}.fl.sm .pc.back{border-width:2px}
.fl.lg{--w:46px;--h:64px}.fl.lg .pc{border-radius:7px}.fl.lg .pc b,.fl.lg .pc i{font-size:20px}
.fl.bd{--w:44px;--h:62px}.fl.bd .pc{border-radius:6px}.fl.bd .pc b,.fl.bd .pc i{font-size:19px}
[data-a="peek"]{cursor:pointer;-webkit-user-select:none;user-select:none}
.hand .cards[data-a="peek"]:hover .fl .fi{transform:translateY(-2px)}
.hand .cards[data-a="peek"]:hover .fl.hid .fi{transform:rotateY(180deg) translateY(-2px)}
.hinfo .priv{display:none;color:var(--mut);font-weight:600}
.hinfo.hid .real{display:none}
.hinfo.hid .priv{display:inline}
.flyc{pointer-events:none;box-shadow:0 8px 16px -6px #000c}

/* ---------- hand rankings viewer ---------- */
#ranks{padding:0;margin:0;border:0;background:transparent;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;overflow:auto}
#ranks[open]{display:grid;place-items:center}
#ranks::backdrop{background:#0b0908f7}
#ranks figure{margin:0;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#ranks img{display:block;width:auto;height:auto;max-width:min(92vw,640px);max-height:calc(100dvh - 70px);border-radius:12px;box-shadow:0 24px 50px -16px #000;pointer-events:auto;animation:rankin .28s cubic-bezier(.2,.8,.2,1)}
#ranks figcaption{color:var(--mut);font-size:13px}
@keyframes rankin{from{opacity:0;transform:scale(.96) translateY(8px)}}

@media(max-width:700px){.meta .bl{display:none}.ibtn{padding:8px 8px}.bar{gap:6px}}
@media(max-width:640px){
  .fl.sm{--w:17px;--h:24px}.fl.sm .pc b,.fl.sm .pc i{font-size:9px}
  .dense .fl.sm{--w:14px;--h:20px}.dense .fl.sm .pc b,.dense .fl.sm .pc i{font-size:8px}
  .fl.lg{--w:40px;--h:56px}.fl.lg .pc b,.fl.lg .pc i{font-size:17px}
  .fl.bd{--w:28px;--h:40px}.fl.bd .pc{border-radius:4px}.fl.bd .pc b,.fl.bd .pc i{font-size:12.5px}
  #ranks figure{padding:10px}
  .game.cm .seat .you{display:none}
  #ranks img{max-width:calc(100vw - 20px);max-height:calc(100dvh - 56px)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}