:root{
  --bg:#0f1226; --card:#1d2145; --card2:#242a58;
  --ink:#eaf0ff; --muted:#9aa3d0; --line:#333a72;
  --win:#3ddc97; --lose:#ff5d73; --draw:#ffd166; --accent:#4da3ff; --gold:#ffd166;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:"PingFang HK","Microsoft JhengHei","Noto Sans HK",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%, #263073 0%, var(--bg) 55%) fixed;
  color:var(--ink); display:flex; flex-direction:column; align-items:center;
  min-height:100dvh; padding:16px; overflow-x:hidden; user-select:none;
}
.wrap{width:100%; max-width:520px; display:flex; flex-direction:column; gap:14px; flex:1;}
header{text-align:center; padding:6px 0 2px; position:relative;}
.soundbtn{position:absolute; right:0; top:2px; appearance:none; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:18px; line-height:1; width:40px; height:40px;
  border-radius:12px; cursor:pointer; padding:0;}
.soundbtn:active{transform:translateY(1px);}
header h1{font-size:clamp(30px,9vw,44px); margin:0; letter-spacing:6px; text-shadow:0 4px 24px rgba(77,163,255,.35);}
header .sub{color:var(--muted); font-size:13px; margin-top:4px;}
.screen{display:none; flex-direction:column; gap:14px; animation:fade .25s ease;}
.screen.active{display:flex;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.btn{
  appearance:none; border:1px solid var(--line); background:linear-gradient(180deg,var(--card2),var(--card));
  color:var(--ink); font-size:18px; font-weight:700; padding:16px 18px; border-radius:16px; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.btn:active{transform:translateY(2px) scale(.99);}
.btn.primary{background:linear-gradient(180deg,#5bb0ff,#2f7fe0); border-color:#2f7fe0; color:#04122b;}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--line);}
.btn.small{font-size:15px; padding:11px 14px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.joinrow{display:flex; gap:10px;}
.input{flex:1; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:14px;
  padding:0 16px; font-size:20px; letter-spacing:6px; text-transform:uppercase; text-align:center;}
.input::placeholder{letter-spacing:2px; font-size:15px; color:var(--muted); text-transform:none;}
.hint{color:var(--muted); font-size:12.5px; text-align:center; margin:2px 0 0;}

.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; text-align:center; display:flex; flex-direction:column; gap:12px;}
.label{color:var(--muted); font-size:13px;}
.roomcode{font-size:44px; font-weight:800; letter-spacing:12px; color:var(--gold); text-indent:12px;}
.linkbox{word-break:break-all; font-size:12px; color:var(--muted); background:#12152e; border-radius:10px; padding:8px;}
.status{text-align:center; font-size:16px; padding:10px; border-radius:12px; background:var(--card); border:1px solid var(--line);}

.scoreboard{display:flex; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 16px;}
.sb{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:70px;}
.sbname{font-size:13px; color:var(--muted);}
.sbscore{font-size:34px; font-weight:800;}
.sbmid{font-size:13px; color:var(--muted);}

.timerow{display:flex; justify-content:space-between; align-items:center; min-height:20px; padding:0 4px; font-size:14px; font-weight:700;}
#timer{color:var(--accent);}
#streak{color:var(--draw);}

.arena{display:flex; align-items:center; justify-content:center; gap:18px; padding:10px 0;}
.handbox{display:flex; flex-direction:column; align-items:center; gap:6px;}
.hand{font-size:84px; line-height:1; width:120px; height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); border-radius:24px; transition:transform .15s ease;}
.hand.shake{animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.hand.pop{animation:pop .38s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{0%{transform:scale(.35); opacity:.15} 60%{transform:scale(1.16); opacity:1} 100%{transform:scale(1)}}
.tag{font-size:13px; color:var(--muted);}
.vs{font-weight:800; color:var(--muted); font-size:20px;}

.result{text-align:center; font-size:22px; font-weight:800; min-height:30px;}
.result.win{color:var(--win);} .result.lose{color:var(--lose);} .result.draw{color:var(--draw);}

.pick{display:flex; gap:12px;}
.pickbtn{flex:1; appearance:none; border:1px solid var(--line); background:linear-gradient(180deg,var(--card2),var(--card));
  border-radius:18px; padding:14px 0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink);
  transition:transform .08s ease, border-color .2s, box-shadow .2s; box-shadow:0 6px 16px rgba(0,0,0,.22);}
.pickbtn .em{font-size:44px;} .pickbtn .cn{font-size:18px; font-weight:800;}
.pickbtn:active{transform:translateY(2px) scale(.98);}
.pickbtn.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 8px 20px rgba(77,163,255,.3);}
.pickbtn:disabled{opacity:.5;}

.statusline{text-align:center; font-size:13px; color:var(--muted); min-height:18px;}
.endrow{display:flex; gap:10px; justify-content:center;}
footer{text-align:center; color:var(--muted); font-size:11.5px; padding:8px 0 4px;}