/* ===== 星空竞技（桌面 + 移动共用） ===== */
#arenaRoot{
  position:fixed; inset:0; z-index:200; display:none;
  background:radial-gradient(120% 80% at 50% -10%, #1a1450, #0b0930 60%);
  color:var(--ink); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#arenaRoot .ar-wrap{max-width:680px; margin:0 auto; padding:18px 16px 90px; min-height:100%}
#arenaRoot h1.ar-logo{font-size:clamp(22px,6vw,30px); text-align:center; margin:6px 0 2px}
#arenaRoot .ar-sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:16px}
#arenaRoot .ar-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
#arenaRoot .ar-back{background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; font-size:13px}
#arenaRoot .ar-back:active{transform:scale(.96)}
#arenaRoot .ar-cards{display:grid; gap:12px}
#arenaRoot .ar-card{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:18px; padding:16px}
#arenaRoot .ar-card h3{margin:0 0 4px; font-size:17px}
#arenaRoot .ar-card p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}
#arenaRoot .ar-btn{display:block; width:100%; margin-top:12px; border:none; border-radius:14px;
  padding:14px; font-size:15px; font-weight:800; cursor:pointer; color:#1a1030;
  background:linear-gradient(135deg,#ffd76b,#ff9e57); box-shadow:0 6px 18px rgba(255,160,80,.35)}
#arenaRoot .ar-btn.ghost{background:rgba(255,255,255,.08); color:var(--ink); border:1px solid var(--line); box-shadow:none}
#arenaRoot .ar-btn:disabled{opacity:.45; cursor:not-allowed}
#arenaRoot .ar-btn:active{transform:scale(.98)}
#arenaRoot .ar-field{margin-top:12px}
#arenaRoot .ar-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
#arenaRoot .ar-field input,#arenaRoot .ar-field select{width:100%; box-sizing:border-box; padding:11px 12px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--ink); font-size:14px}
#arenaRoot .ar-row{display:flex; gap:10px}
#arenaRoot .ar-row>*{flex:1}
#arenaRoot .ar-status{text-align:center; color:var(--gold); font-size:13px; min-height:18px; margin:10px 0}

/* 大厅 */
#arenaRoot .ar-code{font-size:38px; font-weight:900; letter-spacing:6px; text-align:center; color:var(--gold);
  text-shadow:0 0 18px rgba(255,200,80,.5); margin:6px 0}
#arenaRoot .ar-share{display:flex; gap:8px; margin:10px 0}
#arenaRoot .ar-share input{flex:1; padding:10px; border-radius:10px; border:1px solid var(--line);
  background:rgba(0,0,0,.25); color:var(--muted); font-size:12px}
#arenaRoot .ar-players{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
#arenaRoot .ar-player{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 8px; font-size:13px}
#arenaRoot .ar-player .av{font-size:20px}
#arenaRoot .ar-player .sc{color:var(--gold); font-weight:800; margin-left:4px}
#arenaRoot .ar-player.owner::after{content:"房主"; font-size:10px; background:var(--gold); color:#1a1030;
  border-radius:999px; padding:1px 6px; margin-left:4px; font-weight:800}
#arenaRoot .ar-player.off{opacity:.5}
#arenaRoot .ar-friends{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
#arenaRoot .ar-friend{font-size:12px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:999px; padding:6px 10px; cursor:pointer}
#arenaRoot .ar-friend:active{transform:scale(.96)}
#arenaRoot .ar-sec-title{font-size:13px; color:var(--muted); margin:18px 0 6px; font-weight:700}

/* 答题 */
#arenaRoot .ar-qnum{text-align:center; color:var(--muted); font-size:13px; margin-bottom:8px}
#arenaRoot .ar-ring-wrap{display:flex; justify-content:center; margin:6px 0 14px}
#arenaRoot .ar-q{font-size:19px; font-weight:800; text-align:center; line-height:1.5; margin-bottom:16px}
#arenaRoot .ar-opts{display:grid; gap:10px}
#arenaRoot .ar-opt{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); cursor:pointer; font-size:15px; transition:.15s}
#arenaRoot .ar-opt:active{transform:scale(.98)}
#arenaRoot .ar-opt .k{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--gold); flex:none}
#arenaRoot .ar-opt.ok{border-color:#37d67; background:rgba(55,214,103,.18); color:#c9ffd8}
#arenaRoot .ar-opt.no{border-color:#ff5b5b; background:rgba(255,91,91,.16); color:#ffd6d6}
#arenaRoot .ar-opt.lock{pointer-events:none; opacity:.8}
#arenaRoot .ar-opt.dim{opacity:.4}
#arenaRoot .ar-next{text-align:center; color:var(--gold); font-size:14px; margin-top:14px; min-height:20px}
#arenaRoot .ar-wait{text-align:center; color:var(--muted); font-size:13px; margin-top:10px}

/* 结果 */
#arenaRoot .ar-result-head{text-align:center; margin:4px 0 10px}
#arenaRoot .ar-result-head .big{font-size:46px}
#arenaRoot .ar-board{display:flex; flex-direction:column; gap:8px; margin-top:10px}
#arenaRoot .ar-rank{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:14px; padding:12px 14px}
#arenaRoot .ar-rank.me{border-color:var(--gold); box-shadow:0 0 16px rgba(255,200,80,.3)}
#arenaRoot .ar-rank .pos{width:30px; text-align:center; font-size:20px; font-weight:900}
#arenaRoot .ar-rank .av{font-size:26px}
#arenaRoot .ar-rank .info{flex:1}
#arenaRoot .ar-rank .nm{font-weight:800; font-size:15px}
#arenaRoot .ar-rank .tt{font-size:12px; color:var(--gold)}
#arenaRoot .ar-rank .sc{text-align:right}
#arenaRoot .ar-rank .sc b{font-size:20px; color:var(--gold)}
#arenaRoot .ar-rank .sc small{display:block; color:var(--muted); font-size:11px}
#arenaRoot .ar-badge{display:inline-block; font-size:12px; background:rgba(255,200,80,.16);
  border:1px solid rgba(255,200,80,.4); color:var(--gold); border-radius:999px; padding:3px 10px; margin:3px 4px 0 0}
#arenaRoot canvas.ar-confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:210}
#arenaRoot .ar-records{display:flex; flex-direction:column; gap:8px}
#arenaRoot .ar-record{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.05); cursor:pointer}
#arenaRoot .ar-record .tt{font-weight:800; color:var(--gold)}
#arenaRoot .ar-record .meta{margin-left:auto; text-align:right; color:var(--muted); font-size:12px}
#arenaRoot .ar-record .sc{font-weight:900; color:var(--ink)}

/* 移动端：竞技层不再盖住底部导航栏，留出 tab 栏高度（含安全区） */
@media (max-width:600px){
  #arenaRoot{ bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}