:root{
  --bg1:#2b1233; --bg2:#0c0610; --gold:#e2b85a; --gold2:#f6dc93; --ink:#f3ecf7; --mute:#b9a6c4;
  --panel:rgba(255,255,255,.05); --line:rgba(226,184,90,.35);
  --cw:52px; --ch:72px;
  --s:#1d1b22; --c:#16884a; --d:#1f5fc8; --h:#d42a45;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg2);color:var(--ink);font-family:"Hiragino Sans","Noto Sans CJK JP","Noto Sans JP",system-ui,sans-serif;overscroll-behavior:none}
#app{min-height:100%;background:radial-gradient(120% 80% at 50% 0%,var(--bg1),var(--bg2) 70%);max-width:520px;margin:0 auto;position:relative;overflow:hidden}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.btn{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:700}
.btn:disabled{opacity:.35}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1505;border-color:#f8e3a8}
.btn.big{width:100%;padding:14px;font-size:17px;margin-top:10px}
.btn.small{padding:8px 10px;font-size:13px}
.btn.danger{color:#ff9aa8}
.link{background:none;border:0;color:var(--gold2);text-decoration:underline;margin-top:12px;font-size:14px}
.icon-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;min-width:40px;height:36px;font-size:16px}
.icon-btn.small{font-size:12px;min-width:44px}

/* Lobby */
#lobby{padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;min-height:100vh}
.preview-tag{position:absolute;top:10px;right:10px;font-size:11px;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--gold2)}
.title-img{width:56%;max-width:240px;margin-top:4px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.title{margin:2px 0 10px;font-size:30px;letter-spacing:.08em;color:var(--gold2);font-weight:900}
.title span{font-size:18px;color:var(--ink);letter-spacing:.2em}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;text-align:left}
.fld{display:block;font-size:12px;color:var(--mute);margin-bottom:8px}
.fld select{display:block;width:100%;margin-top:4px;padding:10px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{background:#1a0b1f;color:var(--ink)}
.fld .fixed{margin-top:4px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--ink);font-size:14px;line-height:1.25}.fld .fixed small{display:block;color:var(--mute);font-size:11px}
.fld input{display:block;width:100%;margin-top:4px;padding:10px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);font-size:16px}
.row2{display:flex;gap:8px}.row2>.fld{flex:1}
.seg{display:flex;gap:4px;margin-top:4px}
.seg button{flex:1;padding:9px 4px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);font-size:13px;line-height:1.15;font-weight:700}
.seg button.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1505}
.joinrow{display:flex;gap:8px;margin-top:10px}
.joinrow input{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--ink);font-size:17px;letter-spacing:.2em;text-transform:uppercase}
.note{font-size:11px;color:var(--mute)}

/* Table */
/* 17:20 balance: safe-area margins top/bottom, whole layout vertically centered (auto margins = safe centering), gaps from fitCards (--sgap) */
#table{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;--sgap:8px;--ocw:22px;--och:31px;padding:calc(12px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px))}
#table>*{flex:none}
#table>.topbar{margin-top:auto}
#table>#opps,#table>#center,#table>#myArea{margin-top:var(--sgap)}
.topbar{display:flex;align-items:center;gap:8px;height:42px}
.tinfo{flex:1;line-height:1.15}
#modeLbl{font-size:13px;font-weight:800;color:var(--gold2)}
#roomLbl{font-size:11px;color:var(--mute)}
.round{font-size:12px;color:var(--mute);display:flex;gap:3px;align-items:center}
.round i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);display:inline-block}
.round i.on{background:var(--gold)}
.chipbtn{padding:0 10px;font-weight:800;color:var(--gold2)}
.chipbtn::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:radial-gradient(circle,#fff6 30%,transparent 32%),conic-gradient(var(--gold) 0 25%,#7a2a8a 0 50%,var(--gold) 0 75%,#7a2a8a 0)}

#opps{display:flex;gap:6px;justify-content:center}
.opp{flex:1;min-width:0;max-width:340px;background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:8px 8px 6px;position:relative}
.opp.turn{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 0 18px rgba(226,184,90,.25)}
.ohead{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:6px}
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px;color:#2a1505;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.oname{font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ochips{color:var(--gold2);font-weight:800}
.badge{font-size:10px;padding:2px 6px;border-radius:99px;font-weight:800}
.badge.fl{background:linear-gradient(90deg,#ff6fd8,#ffb86b);color:#2a0b22}
.badge.btn-d{background:#fff;color:#111;border-radius:50%;width:18px;height:18px;padding:0;display:grid;place-items:center}
.badge.off{background:#444;color:#ccc}
.ostate{font-size:10px;color:var(--mute)}

.board{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:6px;min-height:calc(var(--ch) + 4px);border-radius:12px;padding:2px 4px}
.row .cards{display:flex;gap:4px;flex:none}
.row .lbl{flex:1;font-size:11px;line-height:1.2;color:var(--mute);min-width:0}
.row .lbl b{display:block;color:var(--ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .roy{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:99px;background:rgba(226,184,90,.18);color:var(--gold2);font-weight:800;font-size:11px}
.row .pt{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:99px;font-weight:900;font-size:11px}
.pt.w{background:#1f8a4c;color:#fff}.pt.l{background:#a2283c;color:#fff}.pt.t{background:#555;color:#fff}
.board.me .row{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.board.me .row.drop{border-color:var(--gold);background:rgba(226,184,90,.12)}
.board.me .row.target{border-style:dashed;border-color:rgba(226,184,90,.6)}
.board.me .row.top .cards{margin-left:calc(var(--cw) + 4px)}
.opp .row{min-height:auto;padding:0}
.opp .board{gap:var(--ogap,4px)}
.opp .row.top .cards{margin-left:calc(var(--ocw) + 3px)}
.opp .row .cards{gap:3px}
.opp .row .lbl{font-size:9.5px}.opp .row .lbl b{font-size:10px}

.slot{width:var(--cw);height:var(--ch);border-radius:7px;border:1.5px dashed rgba(255,255,255,.14);flex:none}
.opp .slot{width:var(--ocw);height:var(--och);border-radius:4px;border-width:1px}

.card{width:var(--cw);height:var(--ch);border-radius:7px;background:linear-gradient(180deg,#fffdf7,#f1ead9);position:relative;flex:none;color:var(--s);box-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.25);user-select:none;-webkit-user-select:none;touch-action:none}
.card .r{position:absolute;left:5px;top:2px;font-weight:900;font-size:calc(var(--cw) * .44);line-height:1;letter-spacing:-.04em}
.card .su{position:absolute;right:4px;bottom:1px;font-size:calc(var(--cw) * .52);line-height:1}
.card .s2{position:absolute;left:6px;top:calc(var(--cw) * .48);font-size:calc(var(--cw) * .25);line-height:1}
.card.s{color:var(--s)}.card.c{color:var(--c)}.card.d{color:var(--d)}.card.h{color:var(--h)}
.card.joker{background:linear-gradient(160deg,#2e0f3a,#120616);border:1.5px solid var(--gold);color:var(--gold2)}
.card.joker img{position:absolute;inset:14% 10% 22%;width:80%;height:64%;object-fit:contain}
.card.joker .jt{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:calc(var(--cw) * .2);font-weight:900;letter-spacing:.05em}
.card.back{background:repeating-linear-gradient(45deg,#4b1d5a 0 5px,#3a1446 5px 10px);border:1.5px solid var(--gold)}
.card.back::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1.5px solid rgba(226,184,90,.6)}
.card.sel{transform:translateY(-10px);box-shadow:0 0 0 2px var(--gold),0 8px 16px rgba(0,0,0,.4)}
.card.new{box-shadow:0 0 0 2px #7fd7ff,0 4px 10px rgba(0,0,0,.25)}
.card.dim{opacity:.38}
.card .sub{position:absolute;top:3px;left:50%;transform:translateX(-50%);padding:1px 4px;border-radius:6px;background:#fff;color:#2a1505;border:1px solid var(--gold);font-size:calc(var(--cw) * .24);font-weight:900;white-space:nowrap;line-height:1.15;z-index:2}
.opp .card{width:var(--ocw);height:var(--och);border-radius:4px}
.opp .card .r{font-size:calc(var(--ocw) * .5);left:3px;top:1px}
.opp .card .su{font-size:calc(var(--ocw) * .5);right:2px}
.opp .card .s2{display:none}
.opp .card .sub{font-size:8px;top:1px;padding:0 2px}
.drag{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-60%) scale(1.08)}

#center{text-align:center;padding:0}
#status{font-size:13px;font-weight:800;min-height:18px}
#status .fl{background:linear-gradient(90deg,#ff6fd8,#ffb86b);-webkit-background-clip:text;color:transparent}
.tbar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);margin:4px 24px 0;overflow:hidden}
#timerFill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .25s linear}
#timerFill.low{background:#e0455d}
#myArea{flex:none}
#myMeta{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);padding:2px 6px}
#myMeta .warn{color:#ff7b8e;font-weight:900}
#handArea{display:flex;flex-direction:column;margin-top:6px;margin-bottom:auto}
#hand{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:calc(var(--ch) + 16px);padding:10px 4px 4px;border-radius:16px;background:rgba(0,0,0,.25)}
#hand.fl{--cw:var(--fcw,36px);--ch:var(--fch,52px);gap:4px;min-height:calc(2 * var(--ch) + 18px);align-content:flex-start}
#controls{display:flex;gap:6px;align-items:center;padding-top:8px}
#controls #okBtn{flex:1;padding:10px 8px;font-size:16px;white-space:nowrap;line-height:1.1}
#controls #okBtn small{display:block;font-size:10px;font-weight:700;opacity:.8}
#controls .btn.small{white-space:nowrap}
.tb.used{opacity:.4}

.overlay{position:fixed;inset:0;background:rgba(5,2,8,.62);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;background:linear-gradient(180deg,#2a1232,#150a1a);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;max-height:88vh}
.sheet.scroll{overflow:auto}
.sheet h3{margin:0 0 4px;color:var(--gold2)}
#resBody{overflow:auto}
.rhead{font-size:20px;font-weight:900;text-align:center;margin:2px 0 6px}
.rhead.win{color:#8ef0b0}.rhead.lose{color:#ff8ea0}
.vs{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 10px;margin-bottom:8px;background:rgba(255,255,255,.03)}
.vs .t{display:flex;justify-content:space-between;font-weight:800;margin-bottom:4px}
.vs table{width:100%;border-collapse:collapse;font-size:12px}
.vs td{padding:2px 0}.vs td:last-child{text-align:right;font-weight:800}
.flmsg{text-align:center;font-weight:900;font-size:15px;padding:6px;border-radius:12px;background:linear-gradient(90deg,rgba(255,111,216,.25),rgba(255,184,107,.25));margin-bottom:8px}
.pos{color:#8ef0b0}.neg{color:#ff8ea0}
.hrow{border-bottom:1px solid rgba(255,255,255,.07);padding:6px 0;font-size:13px}
.roytbl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:11.5px}
.roytbl div{background:rgba(255,255,255,.04);border-radius:10px;padding:6px}
.roytbl h4{margin:0 0 4px;color:var(--gold2);font-size:12px}
.roytbl p{margin:1px 0;display:flex;justify-content:space-between}
.roytbl p span:first-child{color:#9fe2b9}
#rulesBody p,#rulesBody li{font-size:13px;line-height:1.55}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#000c;border:1px solid var(--line);padding:8px 14px;border-radius:12px;z-index:60;font-size:13px}
.wait{text-align:center;padding:30px 10px;color:var(--mute);font-size:14px}
.wait b{display:block;font-size:30px;letter-spacing:.2em;color:var(--gold2);margin:6px 0}
/* colour scheme picker (lobby + in-game menu) */
.themePick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.themePick button{display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:5px;border-radius:12px;border:1.5px solid var(--line);background:rgba(0,0,0,.25);text-align:left}
.themePick button.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.themePick .sw{position:relative;display:block;height:34px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.themePick .sw i{position:absolute;display:block}
.themePick .sw .c{left:8px;top:6px;width:16px;height:22px;border-radius:3px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.themePick .sw .a{left:30px;right:8px;top:9px;height:16px;border-radius:6px}
.themePick .sw .d{right:6px;top:4px;width:6px;height:6px;border-radius:50%}
.themePick .nm{font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.themePick .nm b{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:4px;border-radius:50%;background:var(--gold);color:var(--accink,#2a1505);font-size:10.5px;vertical-align:1px}

/* 17:46 hand names never cut: rank part + category wrap as units; fitLabels() shrinks font / shortens if still too wide */
.row .lbl b.hn{display:flex;flex-wrap:wrap;align-items:baseline;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;word-break:keep-all}
.row .lbl b.hn>span{white-space:nowrap}