:root{--bg:#0b1220;--panel:#121c30;--panel2:#18263f;--bd:#26344f;--fg:#eaf0fb;--mut:#8fa3c4;--ac:#34d399;--ac2:#10b981;--gold:#fbbf24;--danger:#f87171;--red:#d92d2d;--cw:62px;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(900px 500px at 50% -10%,#16304f 0,transparent 70%),var(--bg);color:var(--fg);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:env(safe-area-inset-bottom);overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
h1{font-size:clamp(30px,6vw,44px);margin:6px 0;letter-spacing:-.02em}
h2{font-size:17px;margin:0 0 10px}
.mut{color:var(--mut)}.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.15em}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:4px}
/* header */
#hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(11,18,32,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.brand{font-weight:800;letter-spacing:-.02em;font-size:18px}
.hdr-r{display:flex;gap:8px;align-items:center}
.code-chip{font:700 16px ui-monospace,Menlo,monospace;letter-spacing:.25em;padding:6px 12px 6px 16px;border:1px dashed var(--gold);color:var(--gold);border-radius:10px;background:transparent;cursor:pointer}
/* layout */
#layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1120px;margin:0 auto;padding:16px}
body.inroom #layout{grid-template-columns:minmax(0,1fr) 320px}
#side{display:none}
body.inroom #side{display:flex;flex-direction:column;gap:12px;position:sticky;top:70px;height:calc(100vh - 90px);background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:12px;overflow:hidden}
.side-h{display:none;justify-content:space-between;align-items:center}
#fab{display:none}
@media(max-width:899px){
  :root{--cw:50px}
  body.inroom #layout{grid-template-columns:minmax(0,1fr);padding:10px}
  body.inroom #side{position:fixed;left:0;right:0;bottom:0;top:auto;height:72vh;z-index:40;border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .25s;padding-bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px #000a}
  body.side-open #side{transform:none}
  .side-h{display:flex}
  body.inroom #fab{display:flex;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:52px;height:52px;border-radius:50%;border:0;background:var(--ac);color:#04281c;font-size:22px;align-items:center;justify-content:center;box-shadow:0 6px 20px #0008}
  #fab i{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:#fff;font:700 12px/20px system-ui;text-align:center;font-style:normal}
}
/* panels & controls */
.panel{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin:12px 0}
.hero{text-align:center;padding:24px 0 8px}
input,select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);outline:none}
input:focus,select:focus{border-color:var(--ac)}
#code{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-weight:700}
.btn{appearance:none;border:0;border-radius:10px;padding:11px 18px;font-weight:700;background:var(--ac);color:#04281c;cursor:pointer;transition:transform .08s,filter .15s,opacity .15s;white-space:nowrap}
.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:scale(.97)}
.btn.sm{padding:8px 12px;font-size:14px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--bd)}
.btn.warn{background:var(--gold);color:#3a2a00}
.btn.danger{background:var(--danger);color:#3a0707}
.btn:disabled{opacity:.4;cursor:not-allowed}
.ico{border:1px solid var(--bd);background:transparent;border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--fg)}
.ico:hover{background:var(--panel2)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.c{justify-content:center}
.row>input{flex:1;min-width:0}
.invite{border-color:var(--ac)}
/* players & chips */
#plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#plist li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--panel2)}
#plist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ac);flex:none}.off .dot{background:#64748b}
.tag{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--bd);color:var(--mut)}
.tag.gold{background:rgba(251,191,36,.18);color:var(--gold)}
#hostctl{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px dashed var(--bd);border-radius:10px;font-size:14px}
#hostctl:empty{display:none}
#hostctl label{display:flex;align-items:center;gap:8px;margin:0;color:var(--fg)}
#hostctl input[type=checkbox]{width:auto}
.chat{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}
#clog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px;overscroll-behavior:contain}
.cm{background:var(--panel2);padding:6px 10px;border-radius:12px;max-width:92%;word-break:break-word;font-size:14px}
.cm b{color:var(--ac);font-size:12px;display:block}.cm.me{align-self:flex-end;background:#0f3b30}.cm.me b{color:var(--gold)}
#cform{display:flex;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--bd);font-size:14px;transition:all .2s}
.chip.turn{background:var(--gold);color:#3a2a00;border-color:var(--gold);box-shadow:0 0 0 4px rgba(251,191,36,.2)}
.chip b{background:rgba(0,0,0,.25);border-radius:99px;padding:0 8px;font-weight:600}
/* lobby */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.game{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:6px}
.game h3{margin:0;font-size:17px}.game p{margin:0;color:var(--mut);font-size:13px;flex:1}
/* table & status */
.msg{min-height:24px;text-align:center;color:var(--gold);font-weight:600;margin:6px 0}
.status{text-align:center;font-size:17px;font-weight:700;margin:8px 0}
.help{color:var(--mut);font-size:13px;text-align:center;margin:6px 0}
.tbar{position:relative;height:26px;border-radius:99px;background:var(--panel);border:1px solid var(--bd);overflow:hidden;margin:6px 0}
.tbar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#0f766e,var(--ac));transition:width .25s linear}
.tbar.low i{background:linear-gradient(90deg,#b91c1c,var(--danger))}
.tbar span{position:relative;display:block;text-align:center;font-size:13px;font-weight:700;line-height:24px;text-shadow:0 1px 2px #000a}
.table{display:flex;justify-content:center;align-items:center;gap:clamp(14px,4vw,34px);flex-wrap:wrap;padding:18px 8px;margin:10px 0;border-radius:20px;background:radial-gradient(ellipse at center,#1f7f5f 0,#0e4a38 75%);border:1px solid #1d6a50;box-shadow:inset 0 0 40px #0006}
.pile{display:flex;flex-direction:column;align-items:center;gap:6px;color:#d6efe5;font-size:13px}
.hand{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:20px 2px 6px;min-height:calc(var(--cw)*1.4 + 26px)}
.hand.dense{--cw:44px;gap:4px}
@media(min-width:900px){.hand.dense{--cw:54px}}
/* cards */
.card{position:relative;width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.14);background:linear-gradient(#fff,#f4f1e8);color:#15181c;border:1px solid #c9c3b2;box-shadow:0 2px 6px rgba(0,0,0,.35);padding:0;display:inline-block;flex:none;transition:transform .15s,box-shadow .15s,opacity .15s;font-family:Georgia,"Times New Roman",serif;font-weight:700}
.card.red{color:var(--red)}
.card i{position:absolute;font-style:normal;font-size:calc(var(--cw)*.24);line-height:1;white-space:pre}
.card .tl{top:6%;left:9%}.card .br{bottom:6%;right:9%;transform:rotate(180deg)}
.card .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*.5)}
button.card{cursor:pointer}
button.card:hover:not(:disabled):not(.dim){transform:translateY(-6px)}
.card.sel{transform:translateY(-16px)!important;box-shadow:0 0 0 3px var(--gold),0 10px 18px rgba(0,0,0,.45)}
.card.dim{opacity:.45;cursor:default}
.card.glow{box-shadow:0 0 0 3px var(--ac),0 0 22px rgba(52,211,153,.6)}
.card.back{background:repeating-linear-gradient(45deg,#1e3a8a,#1e3a8a 6px,#274aa8 6px,#274aa8 12px);border:3px solid #fff}
.card.empty{background:transparent;border:2px dashed rgba(255,255,255,.25);box-shadow:none}
.card.big{--cw:88px}.card.mini{--cw:38px}
.card.pop{animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.uno{color:#fff;border:3px solid #fff;font-family:system-ui,sans-serif;font-weight:800}
.uno .mid{inset:18% 10%;border-radius:50%;background:rgba(255,255,255,.95);transform:rotate(-24deg);font-size:calc(var(--cw)*.4)}
.uno .mid span{transform:rotate(24deg)}
.uno.u0{background:#d8352f;--k:#d8352f}.uno.u1{background:#eab308;--k:#b98900}.uno.u2{background:#2f9e44;--k:#2f9e44}.uno.u3{background:#1f6fd1;--k:#1f6fd1}.uno.u4{background:#161a22;--k:#161a22}
.uno .mid{color:var(--k)}
.uno.u4 .mid{background:conic-gradient(#d8352f 0 25%,#eab308 0 50%,#2f9e44 0 75%,#1f6fd1 0);color:#fff;text-shadow:0 1px 3px #000}
.uno.u1 i{color:#3a2a00}
.swatch{display:inline-block;border-radius:8px;padding:1px 10px;color:#fff;font-weight:700}
.swatch.u0{background:#d8352f}.swatch.u1{background:#eab308;color:#3a2a00}.swatch.u2{background:#2f9e44}.swatch.u3{background:#1f6fd1}
.picker{display:flex;gap:10px;justify-content:center;margin:10px 0;flex-wrap:wrap}
.picker .btn{color:#fff;min-width:78px}.picker .btn.u1{color:#3a2a00}
.picker .suit{background:#fff;color:#15181c;font-size:24px;padding:6px 18px}.picker .suit.red{color:var(--red)}
.reveal{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px 0;align-items:center;font-size:14px}
.score{display:flex;flex-direction:column;gap:8px;margin:10px 0;text-align:left}
.score div{display:grid;grid-template-columns:90px 1fr 44px;gap:8px;align-items:center;font-size:14px}
.score .bar{height:8px;border-radius:99px;background:var(--bd);overflow:hidden}.score .bar i{display:block;height:100%;background:var(--ac)}
.winner{text-align:center;padding:18px;margin:12px 0;border-radius:18px;background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(52,211,153,.14));border:1px solid var(--gold);animation:pop .35s}
.winner h2{font-size:26px;margin:2px 0 8px}.trophy{font-size:40px}
.pulse{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(248,113,113,.25)}}
.conn{position:fixed;top:calc(env(safe-area-inset-top) + 56px);left:50%;transform:translateX(-50%);z-index:50;font-size:12px;padding:3px 12px;border-radius:99px;background:var(--danger);color:#3a0707;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s}
.conn.show{opacity:1}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 76px);transform:translateX(-50%) translateY(20px);background:#000d;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;transition:all .25s;pointer-events:none;z-index:60;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}