/* ============================================================
   JLPT 联网排位对战 — 纯CSS视觉（无图片/无图标库）
   富士山背景 + 樱花/雪花粒子 + 全屏对战流程
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --sakura:#ffb7c5;
  --sakura-deep:#f78fb3;
  --snow:#eef6ff;
  --green:#37d67a;
  --green-dark:#1fae5c;
  --ink:#f3f6ff;
  --ink-dim:rgba(255,255,255,.72);
  --glass:rgba(20,28,52,.42);
  --glass-brd:rgba(255,255,255,.16);
  --red:#ff5c5c;
  /* rank v2: E灰(0-2) D青铜(3-5) C银白(6-8) B金(9-11) A蓝(12-14) S紫(15-17) MASTER黑金(18) */
  --rank-0:#6f7682; --rank-1:#8b93a1; --rank-2:#a7afbc;
  --rank-3:#9c6a3d; --rank-4:#bd8550; --rank-5:#d99d63;
  --rank-6:#aeb6c2; --rank-7:#cdd4de; --rank-8:#e9edf3;
  --rank-9:#d3a43c; --rank-10:#f0c75e; --rank-11:#ffd97a;
  --rank-12:#3d8be0; --rank-13:#5aa7ff; --rank-14:#82bcff;
  --rank-15:#9154dd; --rank-16:#b27af0; --rank-17:#cf9bff;
  --rank-18:#ffcf6b;
  --gm-gold:#ffe08a;  /* GRAND MASTER 红金 */
  --gm-red:#ff5c7a;
}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  background:#0d1326; color:var(--ink); overflow:hidden;
  user-select:none;
}
/* ============ 富士山背景（纯CSS） ============ */
#bg{position:fixed; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(180deg,#1b2a54 0%,#24386e 26%,#c96f92 60%,#f3b48c 78%,#fbe0b0 92%);
}
#bg .mt{position:absolute; left:50%; bottom:-3%; width:112%; height:82%; transform:translateX(-50%);
  clip-path:polygon(0 100%, 0 90%, 16% 78%, 27% 70%, 39% 44%, 47% 22%, 53% 22%, 61% 44%, 73% 70%, 84% 78%, 100% 90%, 100% 100%);
  background:linear-gradient(180deg,#6b5470 0%,#4a3a58 40%,#2c2540 78%,#1b1830 100%);}
#bg .mt::before{content:""; position:absolute; left:0; right:0; top:0; height:30%;
  clip-path:inherit; background:linear-gradient(180deg,#fff8f2 0%, #f4e6e8 40%, rgba(240,214,220,.0) 82%);
  filter:blur(2px); opacity:.92;}
#bg .mtline{position:absolute; left:50%; bottom:-3%; width:112%; height:82%; transform:translateX(-50%);
  clip-path:polygon(0 100%, 0 90%, 16% 78%, 27% 70%, 39% 44%, 47% 22%, 53% 22%, 61% 44%, 73% 70%, 84% 78%, 100% 90%, 100% 100%);
  background:linear-gradient(180deg, rgba(180,120,160,.5), rgba(120,70,110,.18) 55%, transparent 70%);}
#bg .cloud{position:absolute; border-radius:40px; background:rgba(255,255,255,.20); filter:blur(6px);}
#bg .cloud.c1{left:8%; top:20%; width:180px; height:26px; animation:drift 60s linear infinite;}
#bg .cloud.c2{right:10%; top:38%; width:230px; height:30px; animation:drift 80s linear infinite reverse;}
@keyframes drift{from{transform:translateX(-40px);}to{transform:translateX(60px);}}



/* ============ 粒子：左侧樱花 / 右侧雪花 ============ */
#particles{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.petal,.flake{position:absolute; top:-4%; opacity:0;}
.petal{width:17px; height:17px; background:radial-gradient(circle at 30% 30%, #ffe3ec, var(--sakura) 60%, var(--sakura-deep));
  border-radius:70% 30% 70% 30%; left:0; animation:sakuraFall linear infinite;}
.flake{width:13px; height:13px; background:radial-gradient(circle,#ffffff,#d9ecff); border-radius:50%; right:0;
  animation:snowFall linear infinite;}
@keyframes sakuraFall{
  0%{transform:translate3d(0,-4vh,0) rotate(0deg); opacity:0;}
  8%{opacity:.9;}
  100%{transform:translate3d(var(--sway,30px),108vh,0) rotate(560deg); opacity:.15;}
}
@keyframes snowFall{
  0%{transform:translate3d(0,-4vh,0) translateX(0); opacity:0;}
  10%{opacity:.95;}
  50%{transform:translate3d(var(--sway2,-18px),52vh,0);}
  100%{transform:translate3d(calc(var(--sway2,-18px) * -1),108vh,0); opacity:.25;}
}

/* ============ 通用面板与按钮 ============ */
.glass{background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-brd); border-radius:22px; box-shadow:0 8px 32px rgba(0,0,0,.28);}
.round-btn{width:58px; height:58px; border-radius:50%; background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s, background .15s; font-size:15px; font-weight:600; flex-shrink:0;}
.round-btn:active{transform:scale(.92);}
.round-btn .ic{font-size:22px; line-height:1;}

/* ============ 视图容器 ============ */
.view{position:fixed; inset:0; z-index:2; display:none; flex-direction:column;
  padding:16px; max-width:960px; margin:0 auto;}
.view.active{display:flex;}

/* ============ 排位大厅 ============ */
#view-lobby{align-items:center; justify-content:flex-start; padding-top:max(18px, 3vh);}
.lobby-top{position:relative; width:100%; display:flex; justify-content:flex-end; gap:12px; margin-bottom:12px;}
.next-rank-badge{position:absolute; right:0; top:calc(100% + 10px); width:64px; height:64px; border-radius:50%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(255,200,80,.18), rgba(255,160,40,.08)); border:2px solid rgba(255,200,80,.35);
  box-shadow:0 0 12px rgba(255,180,60,.15), inset 0 1px 0 rgba(255,255,255,.08); cursor:help; transition:all .2s; z-index:3;}
#first-win-badge{right:0; top:calc(100% + 86px);} /* 首胜徽章:升段奖励正下方(64px高+12px间距) */
#weekend-badge,#ai-free-badge{right:0; top:calc(100% + 162px);} /* 活动徽章(疯狂周末/AI不限次):首胜正下方,二者共用同一位置(时间互斥) */

.next-rank-badge:hover{border-color:rgba(255,200,80,.6); box-shadow:0 0 18px rgba(255,180,60,.3);}
.next-rank-badge.claimed{opacity:.4; filter:grayscale(.7);}
.next-rank-badge.max{background:linear-gradient(135deg, rgba(180,140,255,.18), rgba(120,80,200,.08)); border-color:rgba(180,140,255,.35);}
.nr-rank{font-size:15px; font-weight:800; color:#ffd76a; letter-spacing:.5px; line-height:1.1;}
.nr-gold{font-size:11px; font-weight:700; color:#ffb347; margin-top:2px; line-height:1.1;}
.lobby-main{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
@property --ang{syntax:'<angle>'; initial-value:0deg; inherits:false;}
.rank-badge{position:relative; width:108px; height:108px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid transparent; font-size:56px; font-weight:900; letter-spacing:1px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), rgba(255,255,255,.03) 55%, rgba(0,0,0,.22)) padding-box,
    conic-gradient(from var(--ang,0deg), transparent 0deg, var(--rc,#8a92a0) 70deg, #ffffff 130deg, var(--rc,#8a92a0) 200deg, transparent 280deg, transparent 360deg) border-box;
  box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 24px rgba(140,190,255,.22), inset 0 1px 0 rgba(255,255,255,.25);
  animation:badgeRing 3.6s linear infinite;
  transition:box-shadow .3s;}
.rank-badge::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;}
/* E(0-2) tie hui */
.rank-badge[data-rank="0"]::after,.rank-badge[data-rank="1"]::after,.rank-badge[data-rank="2"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(238,242,248,.9), rgba(150,160,175,.36) 42%, rgba(111,118,130,.16) 66%, transparent 82%);
  box-shadow:inset 0 0 20px rgba(150,160,175,.5), inset 2px -4px 14px rgba(120,128,140,.32);}
/* D(3-5) bronze */
.rank-badge[data-rank="3"]::after,.rank-badge[data-rank="4"]::after,.rank-badge[data-rank="5"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(255,244,232,.92), rgba(217,157,99,.4) 42%, rgba(156,106,61,.18) 66%, transparent 82%);
  box-shadow:inset 0 0 22px rgba(217,157,99,.55), inset 2px -4px 14px rgba(160,110,64,.36);}
/* C(6-8) silver */
.rank-badge[data-rank="6"]::after,.rank-badge[data-rank="7"]::after,.rank-badge[data-rank="8"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(252,253,255,.95), rgba(212,220,235,.42) 42%, rgba(174,182,194,.2) 66%, transparent 82%);
  box-shadow:inset 0 0 22px rgba(214,224,240,.6), inset 2px -4px 14px rgba(190,200,218,.4);}
/* B(9-11) gold */
.rank-badge[data-rank="9"]::after,.rank-badge[data-rank="10"]::after,.rank-badge[data-rank="11"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(255,251,238,.95), rgba(246,208,124,.42) 44%, rgba(211,164,60,.2) 66%, transparent 82%);
  box-shadow:inset 0 0 24px rgba(246,208,124,.62), inset 2px -4px 14px rgba(232,182,84,.42);}
/* A(12-14) diamond blue */
.rank-badge[data-rank="12"]::after,.rank-badge[data-rank="13"]::after,.rank-badge[data-rank="14"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(235,250,255,.95), rgba(160,220,255,.38) 42%, rgba(61,139,224,.14) 66%, transparent 82%);
  box-shadow:inset 0 0 22px rgba(170,228,255,.65), inset 2px -4px 14px rgba(120,190,255,.35);}
/* S(15-17) amethyst */
.rank-badge[data-rank="15"]::after,.rank-badge[data-rank="16"]::after,.rank-badge[data-rank="17"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(255,240,255,.92), rgba(205,150,255,.4) 44%, rgba(145,84,221,.18) 66%, transparent 82%);
  box-shadow:inset 0 0 24px rgba(190,120,255,.6), inset 2px -4px 16px rgba(140,80,230,.4);}
/* MASTER(18) black-gold */
.rank-badge[data-rank="18"]::after{
  background:radial-gradient(circle at 32% 26%, rgba(255,248,225,.98), rgba(255,207,107,.55) 40%, rgba(214,150,40,.28) 64%, transparent 82%);
  box-shadow:inset 0 0 28px rgba(255,207,107,.8), inset 2px -4px 18px rgba(220,160,50,.55);
  animation:masterSheen 2.8s ease-in-out infinite;}
@keyframes masterSheen{0%,100%{filter:brightness(1);}50%{filter:brightness(1.28);}}
/* 段位字母：段位色流光 + 粗描边 + 多层阴影，几乎占满整个勋章 */
#rank-badge-letter{
  position:relative; z-index:2; font-size:68px; font-weight:900; letter-spacing:-2px; white-space:nowrap;
  line-height:1;
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #ffffff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px rgba(12,18,38,.95);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(0,0,0,.35));
  animation:rankFlow 3.2s linear infinite;}
.rank-badge.master{--rc:var(--rank-18); box-shadow:0 0 34px rgba(255,207,107,.6), 0 0 60px rgba(255,180,60,.3), inset 0 1px 0 rgba(255,255,255,.3);}
/* GRAND MASTER：红金外辉 + 红金脉动光泽（覆盖 MASTER 黑金 ::after，保留外层旋转环） */
.rank-badge.gm{--rc:var(--gm-gold); box-shadow:0 0 36px rgba(255,84,109,.6), 0 0 66px rgba(255,200,90,.4), inset 0 1px 0 rgba(255,255,255,.34);}
.rank-badge.gm::after{
  background:radial-gradient(circle at 32% 26%, rgba(255,250,235,.98), rgba(255,120,120,.5) 38%, rgba(255,190,80,.3) 62%, transparent 82%);
  box-shadow:inset 0 0 30px rgba(255,90,110,.85), inset 2px -4px 18px rgba(255,200,90,.6);
  animation:gmSheen 2s ease-in-out infinite;}
@keyframes gmSheen{0%,100%{filter:brightness(1) saturate(1);}50%{filter:brightness(1.35) saturate(1.25);}}
@keyframes badgeRing{to{--ang:360deg;}}
.rank-label{margin-top:10px; font-size:15px; font-weight:800; letter-spacing:3px; color:rgba(255,255,255,.88);
  -webkit-text-stroke:.5px rgba(255,255,255,.7); text-shadow:0 0 12px rgba(255,255,255,.3);}
.pt-wrap{width:min(420px,86vw); margin-top:24px;}
.pt-text{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.pt-text .pl{font-size:14px; font-weight:800; letter-spacing:2px; color:var(--ink-dim);}
.pt-text b{font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:1px; line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#cfe8ff 55%,#9fd0f5 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.55);
  filter:drop-shadow(0 0 12px rgba(120,200,255,.5));}
.pt-bar{height:16px; border-radius:10px; position:relative; background:rgba(0,0,0,.35); border:1px solid var(--glass-brd); overflow:hidden;}
.pt-fill{height:100%; border-radius:10px; width:0%;
  background:linear-gradient(90deg,#37d67a,#2eb9d4,#7a6ff0); transition:width .6s cubic-bezier(.2,.8,.2,1);}
.pt-marks{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; pointer-events:none;}
.pt-marks .mk{flex:1; display:flex; justify-content:center; align-items:center;}
.pt-marks .mk i{display:block; width:2px; height:8px; border-radius:1px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 1px 3px rgba(0,0,0,.28);}
.pt-marks .mk:first-child i,
.pt-marks .mk:last-child i{display:none;}
/* 刻度数字（进度条下方） */
.pt-ticks{display:flex; margin-top:6px; font-size:10px; color:var(--ink-dim);}
.pt-ticks span{flex:1; text-align:center;}
.stats-line{margin-top:14px; font-size:13px; color:var(--ink-dim); display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.stats-line b{color:var(--ink);}
.lobby-bottom{width:100%; display:flex; flex-direction:column; align-items:center; padding-bottom:max(14px,4vh);}
.online-tip{font-size:13px; color:var(--ink-dim); margin-bottom:12px;}
.online-tip b{color:var(--green); font-size:15px;}
.beian-line{width:100%; text-align:center; margin-top:10px; font-size:11px; color:var(--ink-dim); opacity:.55; padding:0 16px; box-sizing:border-box;}
.beian-line a{color:inherit; text-decoration:none;}
.match-btn{height:var(--mb-h); border-radius:calc(var(--mb-h)/2); border:none; cursor:pointer; background:linear-gradient(180deg,#4be08c,#27c56b); color:#063; font-size:28px; font-weight:900; letter-spacing:8px;
  box-shadow:0 10px 30px rgba(55,214,122,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s, box-shadow .2s;}
.match-btn:active{transform:scale(.96);}
.match-btn:disabled{filter:grayscale(.6) brightness(.7); cursor:not-allowed;}

/* ============ 匹配区：不掉分卡(金币) + 自控(机器人) + 匹配按钮 ============ */
.lobby-btns{--mb-h:80px; width:100%; max-width:min(560px,94vw); display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px;}
.side-btns{display:flex; align-items:center; gap:12px;}
.circle-btn{width:var(--mb-h); height:var(--mb-h); border-radius:50%; position:relative; flex-shrink:0;
  cursor:pointer; border:none; padding:0; background:none; outline:none;}
/* ---- 保分卡按钮：开/关宝石背景与机器人按钮完全一致，沿用发光/渐变特效 ---- */
.shield-btn{display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:background .25s, box-shadow .25s;}
.shield-btn.on{background:linear-gradient(180deg,#4be08c,#27c56b);
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);}
.shield-btn.off{background:linear-gradient(180deg,#ff9292,#ef4444);
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4);}
/* 中央次数数字：更大、高对比（亮白金属光泽 + 深描边阴影） */
.shield-num{font-size:calc(var(--mb-h) * 0.44); font-weight:900; line-height:1;
  background:linear-gradient(180deg,#ffffff 12%,#eef2f8 50%,#b9c5d5 92%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 5px rgba(0,0,0,.4));}
/* tooltip（悬停/长按显示，含重置倒计时） */
.cb-tip{position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%); z-index:30;
  background:rgba(14,20,38,.96); border:1px solid rgba(255,255,255,.18); color:var(--ink); font-size:12.5px;
  line-height:1.7; padding:9px 13px; border-radius:10px; white-space:nowrap; text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .18s;}
.cb-tip::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(14,20,38,.96);}
.shield-btn:hover .cb-tip, .shield-btn.tip-on .cb-tip, .bot-btn:hover .cb-tip, .bot-btn.tip-on .cb-tip{opacity:1;}
.cb-tip .tip-reset{color:rgba(255,255,255,.55); font-size:11.5px;}
.cb-tip .tip-note{display:block; color:rgba(255,255,255,.45); font-size:11px; margin-top:2px; line-height:1.6;}
/* 手机端：保持段落完整（不额外断行），仅移动盾牌提示框位置避免出屏 */
@media (max-width:767px){
  .cb-tip{white-space:nowrap;}
  .side-btns .shield-btn .cb-tip{left:0; right:auto; transform:none;}
  .side-btns .shield-btn .cb-tip::after{left:calc(var(--mb-h)/2); transform:none;}
}
/* ---- 自控（机器人）按钮：开=绿 / 关=红，与匹配按钮同款渐变 ---- */
.bot-btn{display:flex; align-items:center; justify-content:center; transition:background .25s, box-shadow .25s;
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);}
.bot-btn.on{background:linear-gradient(180deg,#4be08c,#27c56b);
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);}
.bot-btn.off{background:linear-gradient(180deg,#ff9292,#ef4444);
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4);}
.bot-head{position:relative; width:54%; height:44%; margin-top:12%; border-radius:26% 26% 20% 20%;
  background:linear-gradient(180deg,rgba(30,40,58,.96),rgba(12,18,30,.96));
  border:2px solid rgba(255,255,255,.3); box-shadow:inset 0 2px 4px rgba(0,0,0,.5);}
.bot-ant{position:absolute; top:-12%; left:50%; transform:translateX(-50%); width:4px; height:22%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.3)); border-radius:3px;}
.bot-ant::after{content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 0 6px rgba(255,255,255,.8);}
.bot-eye{position:absolute; top:36%; width:10px; height:13px; border-radius:50%;
  background:#0a0f1a; box-shadow:inset 0 1px 2px rgba(0,0,0,.9); transition:background .2s, box-shadow .2s;}
.bot-eye.l{left:20%;} .bot-eye.r{right:20%;}
.bot-btn.on .bot-eye{background:#fff; box-shadow:0 0 9px 2px rgba(255,255,255,.95);}
/* 结算页：不掉分卡提示 */
.settle-shield{display:none; margin-top:10px; padding:8px 14px; border-radius:10px; font-size:13px; font-weight:700;
  color:#ffe08a; background:rgba(255,180,60,.12); border:1px solid rgba(255,200,100,.35);}
.settle-shield.show{display:block;}

/* ============ 匹配等待 ============ */
#view-queue{align-items:center; justify-content:center; text-align:center;}
.queue-stopwatch{width:150px; height:150px; position:relative; margin-bottom:26px;}
.sw-dial{position:absolute; inset:0; border-radius:50%;
  border:3px solid rgba(55,214,122,.55);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(0,0,0,.28));
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 20px rgba(0,0,0,.35);}
.sw-dial::before{content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed rgba(55,214,122,.35);}
/* 60 个秒刻度（每 6° 一个） */
.sw-dial::after{content:""; position:absolute; inset:14px; border-radius:50%;
  background:repeating-conic-gradient(rgba(111,240,172,.5) 0deg 1deg, transparent 1deg 6deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));}
.sw-time{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:32px; font-weight:800; letter-spacing:1px; font-variant-numeric:tabular-nums;
  color:#eafff4; text-shadow:0 0 10px rgba(55,214,122,.6);}
#view-queue h2{font-size:22px; margin-bottom:10px; letter-spacing:1px;}
#view-queue .q-sub{color:var(--ink-dim); font-size:14px;}
.q-cancel{margin-top:26px; color:var(--ink-dim); font-size:14px; text-decoration:underline; cursor:pointer;}

/* ============ 确认弹窗 ============ */
#modal-confirm{position:fixed; inset:0; z-index:8; display:none; align-items:center; justify-content:center;
  background:rgba(6,10,22,.62); backdrop-filter:blur(6px); padding:20px;}
#modal-confirm.active{display:flex;}
.confirm-card{width:min(400px,92vw); padding:26px 24px 22px; text-align:center;}
.confirm-title{font-size:18px; font-weight:700; margin-bottom:4px;}
.confirm-sub{font-size:13px; color:var(--ink-dim); margin-bottom:16px;}
.confirm-ring{position:relative; width:96px; height:96px; margin:0 auto 16px;}
.confirm-ring svg{width:96px; height:96px; transform:rotate(-90deg);}
.confirm-ring circle{fill:none; stroke-width:7; stroke:rgba(255,255,255,.14);}
.confirm-ring circle.prog{stroke:var(--green); stroke-linecap:round; stroke-dasharray:282.7; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear;}
.confirm-ring .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800;}
.opp-row{display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 20px;}
.opp-ava{width:46px; height:46px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--ink);}
.opp-info{text-align:left; line-height:1.35;}
.opp-info .nm{font-size:16px; font-weight:700;}
.opp-info .rk{font-size:12px; color:var(--ink-dim);}
.accept-btn{width:100%; height:52px; border-radius:26px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#4be08c,#27c56b); color:#063; font-size:18px; font-weight:800; letter-spacing:4px;}
.accept-btn:disabled{filter:grayscale(.7) brightness(.75); cursor:not-allowed;}
.accept-btn.confirmed{background:linear-gradient(180deg,#aaa,#888); color:#fff; cursor:default; letter-spacing:2px;}

/* ============ 准备页 ============ */
#view-ready{justify-content:space-between; padding:18px;}
.ready-count{text-align:center; font-size:15px; color:var(--ink-dim); letter-spacing:2px; padding-top:6px;}
.ready-count b{font-size:34px; color:var(--ink); margin-left:6px;}
.ready-battle{display:flex; align-items:center; justify-content:space-between; gap:10px; flex:1; align-items:center;}
.ready-card{width:38%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px; text-align:center;}
.ready-ava{width:84px; height:84px; border-radius:50%; background:var(--glass); border:2px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800;}
.ready-card .nm{font-size:18px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ready-card .rk{font-size:13px; color:var(--ink-dim);}
.ready-vs{font-size:34px; font-weight:800; color:rgba(255,255,255,.35);}
.ready-levels{display:flex; justify-content:center; gap:10px; padding:12px 0 6px;}
.lv-chip{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border:1px solid var(--glass-brd); font-size:15px; font-weight:700; color:rgba(255,255,255,.45);
  transition:all .3s;}
.lv-chip.on{background:linear-gradient(180deg,rgba(255,150,160,.85),rgba(214,60,120,.75)); border-color:rgba(255,255,255,.5);
  color:#fff; box-shadow:0 0 18px rgba(255,120,160,.6);}
.ready-hint{text-align:center; font-size:12px; color:var(--ink-dim); padding-bottom:8px;}

/* ============ 对战页 ============ */
#view-battle{padding:10px 12px 14px;}
.battle-top{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px; position:relative;}
.battle-clock-wrap{display:flex; align-items:baseline; gap:6px;}
.battle-clock{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
.battle-penalty{font-size:13px; font-weight:700; color:#ffb36b; font-variant-numeric:tabular-nums;}
.finish-banner{position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:6;
  background:rgba(255,92,92,.16); border:1px solid rgba(255,92,92,.5); color:#ffd7d7;
  padding:8px 22px; border-radius:22px; font-size:14px; font-weight:700; letter-spacing:1px;
  box-shadow:0 6px 20px rgba(0,0,0,.3); white-space:nowrap;}
.finish-banner b{color:#ff8a8a; font-size:16px;}
.diff-tag{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; padding:3px 12px; border-radius:14px; min-width:96px; text-align:center;}
.diff-tag.lead{color:#37d67a; background:rgba(55,214,122,.14);}
.diff-tag.behind{color:#ff5c5c; background:rgba(255,92,92,.16);}
.diff-tag.even{color:var(--ink-dim); background:rgba(255,255,255,.06);}
.battle-body{flex:1; display:flex; gap:10px; min-height:0;}
.vbar{width:46px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 0;}
.vbar .who{font-size:11px; color:var(--ink-dim); max-width:46px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.vbar .bar{flex:1; width:14px; border-radius:8px; background:rgba(0,0,0,.35); border:1px solid var(--glass-brd); position:relative; overflow:hidden;}
.vbar .fill{position:absolute; bottom:0; left:0; right:0; height:0%; border-radius:8px; transition:height .5s cubic-bezier(.2,.8,.2,1);}
.vbar.mine .fill{background:linear-gradient(180deg,#4be08c,#1fae5c);}
.vbar.opp .fill{background:linear-gradient(180deg,#ff8fb0,#e04a76);}
.vbar .num{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;}
.vbar.opp{order:2;}
.battle-board{flex:1; display:flex; flex-direction:column; min-width:0;}
.q-card{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px 8px; min-height:0;}
.q-level{font-size:13px; font-weight:700; letter-spacing:2px; padding:3px 14px; border-radius:12px; background:rgba(255,255,255,.10); color:var(--ink-dim); margin-bottom:10px;}
.q-kana{font-size:clamp(34px,9vw,56px); font-weight:800; letter-spacing:4px; line-height:1.15; word-break:break-all;}
.q-kanji{margin-top:6px; font-size:clamp(18px,4.5vw,26px); color:var(--ink-dim); font-weight:600;}
/* 听力赛：音频播放区（自动播放+循环提示） */
.q-audio{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0 4px;}
.q-audio .audio-ic{width:56px; height:56px; border-radius:50%; border:1.5px solid var(--glass-brd); background:var(--glass);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--ink); box-shadow:0 4px 18px rgba(0,0,0,.18);}
.q-audio .audio-hint{font-size:12px; color:var(--ink-dim); letter-spacing:1px;}
/* 听力题选项：单词（加粗）+ 翻译 */
.opt .ow{font-weight:700; font-size:1.06em; letter-spacing:1px;}
.opt .om{margin-left:10px; color:var(--ink-dim); font-size:.88em; font-weight:500; flex-shrink:1; text-align:left;}
.q-count{font-size:12px; color:var(--ink-dim); margin-top:10px;}
.options{display:grid; grid-template-columns:1fr; gap:9px; padding:6px 2px 4px; width:100%;}
.opt{border-radius:14px; border:1.5px solid var(--glass-brd); background:var(--glass); color:var(--ink);
  font-size:15px; line-height:1.35; padding:13px 14px; cursor:pointer; text-align:left; transition:all .15s; min-height:48px; display:flex; align-items:center;}
.opt:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12);}
.opt:active{transform:scale(.98);}
.opt .ol{flex-shrink:0; width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,.10); margin-right:10px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-dim);}
.opt.wrong{opacity:.42; border-color:rgba(255,92,92,.4); background:rgba(60,20,20,.35); pointer-events:none;}
.opt.wrong .ol{background:rgba(255,92,92,.3); color:#ff9a9a;}
.opt.correct{opacity:1; border-color:rgba(55,214,122,.65); background:rgba(31,174,92,.28); pointer-events:none;}

/* ============ 结算页 ============ */
#view-settle{justify-content:space-between; padding:18px;}

/* ============ 等待结算页 ============ */
#view-finish{align-items:center; justify-content:center; padding:20px;}
.finish-box{width:min(460px,88vw); text-align:center; padding:36px 26px; border-radius:22px;
  display:flex; flex-direction:column; align-items:center; gap:12px;}
.finish-icon{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:32px; color:#37d67a; background:rgba(55,214,122,.14); border:1.5px solid rgba(55,214,122,.5);
  box-shadow:0 0 26px rgba(55,214,122,.3);}
.finish-title{font-size:24px; font-weight:900; letter-spacing:3px;}
.finish-sub{font-size:14px; color:var(--ink-dim);}
.finish-meta{font-size:15px; font-weight:700; color:#ffd7a8; font-variant-numeric:tabular-nums; margin-top:6px;}
.finish-count{margin-top:14px; font-size:17px; font-weight:800; color:#ff8a8a; letter-spacing:1px;}
.settle-result{text-align:center; padding-top:6vh;}
.settle-result .big{font-size:clamp(40px,12vw,66px); font-weight:900; letter-spacing:6px;}
.settle-result.win .big{color:#37d67a; text-shadow:0 0 30px rgba(55,214,122,.5);}
.settle-result.lose .big{color:#ff5c5c; text-shadow:0 0 30px rgba(255,92,92,.45);}
.settle-result.draw .big{color:#f0d36a; text-shadow:0 0 30px rgba(240,211,106,.45);}
.settle-result .sub{margin-top:10px; font-size:14px; color:var(--ink-dim);}
.settle-pt{width:min(560px,86vw); margin:22px auto 0; text-align:center;}
.settle-pt .lbl{font-size:13px; color:var(--ink-dim); margin-bottom:8px;}
.settle-pt .row{display:flex; justify-content:space-between; font-size:15px; margin-bottom:8px;}
.settle-pt .row b{font-size:20px;}
.delta-up{color:#37d67a;} .delta-down{color:#ff5c5c;} .delta-zero{color:var(--ink-dim);}
.settle-opp{margin-top:16px; font-size:13px; color:var(--ink-dim);}
.settle-opp b{color:var(--ink);}
.back-btn{margin:auto auto 10px; width:min(300px,70vw); height:54px; border-radius:27px; border:1.5px solid var(--glass-brd);
  background:var(--glass); color:var(--ink); font-size:17px; font-weight:700; letter-spacing:4px; cursor:pointer;}

/* ============ 登录弹窗 ============ */
#modal-login{position:fixed; inset:0; z-index:9; display:none; align-items:center; justify-content:center;
  background:rgba(6,10,22,.62); backdrop-filter:blur(6px); padding:20px;}
#modal-login.active{display:flex;}
.login-card{width:min(380px,92vw); padding:28px 24px;}
.login-card h3{font-size:20px; text-align:center; margin-bottom:4px;}
.login-card .tip{font-size:12px; color:var(--ink-dim); text-align:center; margin-bottom:18px;}
.login-card .field{margin-bottom:14px;}
.login-card .field label{display:block; font-size:12px; color:var(--ink-dim); margin-bottom:6px;}
.login-card input{width:100%; height:48px; border-radius:14px; border:1.5px solid var(--glass-brd); background:rgba(0,0,0,.28);
  color:var(--ink); font-size:16px; padding:0 14px; outline:none; transition:border .15s;}
.login-card input:focus{border-color:rgba(55,214,122,.6);}
.login-err{color:#ff8a8a; font-size:13px; min-height:18px; margin-bottom:8px; text-align:center;}
.login-btn{width:100%; height:50px; border-radius:25px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#4be08c,#27c56b); color:#063; font-size:17px; font-weight:800; letter-spacing:3px;}
.login-close{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,.1); color:var(--ink); font-size:16px; cursor:pointer;}

/* ============ 历史/排行榜弹窗 ============ */
#modal-list{position:fixed; inset:0; z-index:8; display:none; align-items:center; justify-content:center;
  background:rgba(6,10,22,.62); backdrop-filter:blur(6px); padding:18px;}
#modal-list.active{display:flex;}
.list-card{width:min(520px,94vw); max-height:82vh; display:flex; flex-direction:column;}
.list-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px;}
.list-head h3{font-size:17px;}
.list-close{width:30px; height:30px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:var(--ink); cursor:pointer;}
.list-body{flex:1; overflow-y:auto; padding:4px 14px 14px;}
.list-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; margin-bottom:8px; background:rgba(255,255,255,.05);}
.list-item .ava{width:38px; height:38px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0;}
.list-item .nm{flex:1; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list-item .rk{font-size:13px; font-weight:700; width:40px; text-align:center;}
.list-item .pt{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;}
.hist-item{display:flex; flex-direction:column; padding:11px 14px;}
.hist-top{display:flex; align-items:center; gap:10px;}
.hist-top .res{font-size:14px; font-weight:800; width:44px; text-align:center;}
.res-win{color:#37d67a;} .res-lose{color:#ff5c5c;} .res-draw{color:#f0d36a;}
.hist-top .vs{flex:1; font-size:14px; color:var(--ink-dim);}
.hist-top .dt{font-size:12px; color:var(--ink-dim); font-variant-numeric:tabular-nums;}
.hist-meta{margin-top:6px; font-size:12px; color:var(--ink-dim); display:flex; gap:14px; flex-wrap:wrap;}
.hist-meta b{color:var(--ink);}
.empty-tip{text-align:center; color:var(--ink-dim); font-size:14px; padding:30px 0;}

/* ============ Toast ============ */
#toast{position:fixed; left:50%; bottom:8%; transform:translateX(-50%) translateY(20px); z-index:12;
  background:rgba(18,26,48,.9); border:1px solid var(--glass-brd); color:var(--ink); padding:12px 22px; border-radius:14px;
  font-size:15px; opacity:0; pointer-events:none; transition:all .3s; max-width:86vw; text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============ 段位字母：段位色流光 + 灰白描边（大厅/确认/准备/列表） ============ */
.rank-badge span{
  -webkit-text-stroke:1.2px rgba(232,240,252,.9);
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #ffffff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rankFlow 3.2s linear infinite;
}
.opp-ava span, .ready-ava span, .list-item .ava span{
  -webkit-text-stroke:1.2px rgba(232,240,252,.9);
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #ffffff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rankFlow 3.2s linear infinite;
}
@keyframes rankFlow{0%{background-position:125% 0;}100%{background-position:-25% 0;}}

/* ============ MASTER username black-gold ============ */
.master-name{background:linear-gradient(115deg,#ffd97a,#fff3cf 45%,#ffb347 70%,#ffd97a) !important;
  background-size:220% 100%; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; animation:rankFlow 3.2s linear infinite;
  filter:drop-shadow(0 0 9px rgba(255,200,90,.5));}
/* GRAND MASTER 用户名：红金流动（优先级高于 master-name） */
.gm-name{font-weight:900; background:linear-gradient(115deg,#ff5c7a,#ffd98a 45%,#ff7a45 70%,#ff5c7a) !important;
  background-size:220% 100%; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; animation:rankFlow 3s linear infinite;
  filter:drop-shadow(0 0 9px rgba(255,110,90,.6));}
.gm-tag{display:inline-block; margin-left:6px; padding:1px 6px; font-style:normal; font-size:10px; font-weight:900;
  border-radius:8px; color:#231006; background:linear-gradient(115deg,#ffd98a,#ff8a5c); vertical-align:middle;}
.ava.gm-ava{box-shadow:0 0 12px rgba(255,90,110,.7); border-color:var(--gm-gold) !important;}

/* ============ 右侧常驻排行榜（PC/平板显示，手机隐藏） ============ */
#side-board{position:fixed; top:50%; right:16px; transform:translateY(-50%); z-index:5;
  width:250px; display:none; flex-direction:column; overflow:hidden;
  background:rgba(8,13,30,.26); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); border-radius:18px;
  box-shadow:0 8px 32px rgba(0,0,0,.28);}
.side-head{display:flex; align-items:center; gap:8px; padding:12px 14px 11px; font-size:14px; font-weight:800;
  letter-spacing:1px; color:var(--ink); border-bottom:1px solid rgba(255,255,255,.10); flex-shrink:0;}
.side-live{width:8px; height:8px; border-radius:50%; background:#37d67a; margin-left:auto; flex-shrink:0;
  box-shadow:0 0 8px rgba(55,214,122,.8); animation:livePulse 2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.side-body{flex:1; padding:9px 9px 12px;}
.side-item{display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:12px; margin-bottom:5px;
  background:rgba(255,255,255,.055);}
.side-item .no{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:rgba(255,255,255,.10); color:var(--ink-dim); flex-shrink:0;
  font-variant-numeric:tabular-nums;}
.side-item .no.top3{background:rgba(240,211,106,.20); color:#f0d36a;}
.side-item .ava{width:30px; height:30px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  color:#10162a; text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #fff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 10px rgba(0,0,0,.35);
  animation:rankFlow 3.2s linear infinite;}
@keyframes rankFlow{0%{background-position:100% 0;}100%{background-position:0% 0;}}
.side-item .nm{flex:1; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-item .pt{font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; flex-shrink:0;}
/* 侧板显示由「常驻排行榜」开关控制（JS 设置 display），不再按设备宽度隐藏；
   匹配/对局/结算期间由 JS 隐藏，回到主菜单按开关恢复。手机端开关开启时同样显示。 */

/* ============ 设置弹窗 ============ */
#modal-settings{position:fixed; inset:0; z-index:8; display:none; align-items:center; justify-content:center;
  background:rgba(6,10,22,.62); backdrop-filter:blur(6px); padding:18px;}
#modal-settings.active{display:flex;}
.settings-card{width:min(520px,94vw); max-height:82vh; display:flex; flex-direction:column; padding-bottom:14px;}
.settings-list{padding:4px 18px 14px; display:flex; flex-direction:column; gap:12px;}
.settings-item{display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:16px; background:rgba(255,255,255,.05); position:relative;}
.settings-txt{flex:1; min-width:0;}
.settings-txt .st-name{font-size:16px; font-weight:800; color:var(--ink);}
.settings-txt .st-hint{font-size:12.5px; color:var(--ink-dim); margin-top:4px; line-height:1.5;}
.settings-cooldown{font-size:12px; color:#ffb36b; font-weight:700; margin-top:5px; display:none;}
.settings-cooldown.show{display:block;}
/* Toggle 开关：关=红「关」/开=绿「开」，小圆圈滑动 */
.tgl{flex-shrink:0; display:inline-flex; align-items:center; cursor:pointer; user-select:none;}
.tgl-track{width:60px; height:30px; border-radius:15px; background:#e0574f; position:relative; transition:background .25s;
  border:1px solid rgba(255,255,255,.18);}
.tgl-track::before{content:'关'; position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:11px;
  font-weight:800; color:#fff; z-index:1; letter-spacing:1px;}
.tgl-track .thumb{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff;
  z-index:2; transition:left .25s; box-shadow:0 1px 4px rgba(0,0,0,.35);}
.tgl.on .tgl-track{background:#3ecf6e;}
.tgl.on .tgl-track::before{content:'开'; left:10px; right:auto;}
.tgl.on .tgl-track .thumb{left:33px;}
/* 选项 Tooltip（悬停/长按显示） */
.tip-wrap{position:relative;}
.tip-box{position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:30;
  background:rgba(14,20,38,.96); border:1px solid rgba(255,255,255,.18); color:var(--ink); font-size:12.5px;
  padding:8px 12px; border-radius:10px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .18s; max-width:220px; text-align:center; line-height:1.45;}
.tip-box::after{content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(14,20,38,.96);}
.tip-wrap:hover .tip-box, .tip-wrap.tip-on .tip-box{opacity:1;}

/* ============ 桌面端优化 ============ */
@media (min-width:768px){
  /* 右上角按钮更贴顶部右侧 */
  #view-lobby{padding-top:14px;}
  .lobby-top{margin-bottom:8px; padding-right:2px;}
  .options{grid-template-columns:1fr 1fr; gap:13px;}
  .opt{padding:18px 20px; font-size:17px; min-height:58px; border-radius:16px;}
  .opt .ol{width:30px; height:30px; font-size:15px; border-radius:9px;}
  .q-kana{font-size:66px;}
  .q-kanji{font-size:30px;}
  .q-level{font-size:16px; padding:5px 18px;}
  .q-count{font-size:14px;}
  .battle-clock{font-size:26px;}
  .diff-tag{font-size:16px; padding:5px 16px;}
  .vbar{width:76px; gap:10px;}
  .vbar .bar{width:18px;}
  .vbar .who{font-size:16px; max-width:76px;}
  .vbar .num{font-size:17px;}
  .round-btn{width:72px; height:72px; font-size:17px;}
  .round-btn .ic{font-size:28px;}
  .lobby-btns{--mb-h:88px; gap:16px; display:flex; align-items:center; justify-content:center;}
  /* side-btns removed */
  .match-btn{font-size:32px; letter-spacing:10px;}
  .rank-badge{width:128px; height:128px; font-size:68px;}
  #rank-badge-letter{font-size:82px;}
  .rank-label{font-size:19px; letter-spacing:4px;}
  .pt-text .pl{font-size:17px;}
  .pt-text b{font-size:38px;}
  .pt-bar{height:20px;}
  .pt-ticks{font-size:12px;}
  .pt-marks .mk i{height:10px;}
  .stats-line{font-size:17px; gap:26px;}
  .online-tip{font-size:16px;}
  .ready-ava{width:126px; height:126px; font-size:50px;}
  .ready-card .nm{font-size:25px;}
  .ready-card .rk{font-size:16px;}
  .ready-count{font-size:22px;}
  .lv-chip{width:68px; height:68px; font-size:19px;}
  .ready-hint{font-size:14px;}
  .settle-result .big{font-size:clamp(52px,8vw,78px);}
  .settle-result .sub{font-size:18px;}
  .settle-pt .lbl{font-size:15px;}
  .settle-pt .row{font-size:19px;}
  .settle-pt .row b{font-size:25px;}
  .settle-opp{font-size:17px;}
  .back-btn{height:64px; font-size:20px; width:min(360px,50vw);}
  .list-card{width:620px;}
  .list-item{padding:14px 16px;}
  .list-item .ava{width:46px; height:46px; font-size:18px;}
  .list-item .nm{font-size:17px;}
  .list-head h3{font-size:20px;}
  .login-card{width:460px; padding:34px 30px;}
  .login-card h3{font-size:24px;}
  .login-card input{height:54px; font-size:18px;}
  .login-btn{height:56px; font-size:19px;}
}
@media (min-width:1200px){
  .options{gap:16px;}
  .opt{padding:22px 26px; font-size:20px; min-height:70px;}
  .opt .ol{width:36px; height:36px; font-size:17px;}
  .q-kana{font-size:clamp(72px,7vw,96px);}
  .q-kanji{font-size:34px;}
  .battle-clock{font-size:34px;}
  .vbar{width:92px;}
  .vbar .bar{width:22px;}
  .vbar .who{font-size:19px; max-width:92px;}
  .vbar .num{font-size:20px;}
  .round-btn{width:84px; height:84px;}
  .round-btn .ic{font-size:34px;}
  .rank-badge{width:150px; height:150px; font-size:80px;}
  #rank-badge-letter{font-size:96px;}
  .pt-text b{font-size:46px;}
  .lobby-btns{--mb-h:92px;}
  .match-btn{font-size:36px;}
  .ready-ava{width:150px; height:150px; font-size:60px;}
  .lv-chip{width:80px; height:80px; font-size:22px;}
  .settle-result .big{font-size:90px;}
  .settle-result .sub{font-size:20px;}
  .list-card{width:720px;}
}

/* ============ 段位变化动画（晋级/降级，结算段位升降时触发，<5s 自动关闭） ============
   流程：圆球（段位流光背景板）弹出 → 流光环扫一圈覆盖旧段位 →
         新段位盖上去出现 → 新段位慢慢缩小消失；文字固定在圆球下方不动
         晋级「段位提升」= 银铁描边象牙白；降级「段位下降」= 红宝石光泽字 */
#promo-overlay{position:fixed; inset:0; z-index:50; display:none; opacity:0;
  align-items:center; justify-content:center;
  background:rgba(4,7,16,.55); backdrop-filter:blur(4px);}
#promo-overlay.active{display:flex; flex-direction:column; gap:34px;
  animation:maskIn .3s ease both, maskOut .4s ease 3.9s forwards;}
.promo-ball{position:relative; width:220px; height:220px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:3px solid transparent;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%, rgba(0,0,0,.24)) padding-box,
    conic-gradient(from var(--ang,0deg), transparent 0deg, var(--rc,#8a92a0) 70deg, #ffffff 130deg, var(--rc,#8a92a0) 200deg, transparent 280deg, transparent 360deg) border-box;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 34px rgba(140,190,255,.30), inset 0 1px 0 rgba(255,255,255,.3);}
/* 圆球弹出 + 末尾与段位一起渐变消失（active 时动态应用，确保每次重播） */
#promo-overlay.active .promo-ball{animation:promoPop .55s cubic-bezier(.2,1.4,.3,1) both, ballOut .6s ease 3.3s forwards;}
/* 新段位背景板层：流光扫过后浮现，替换旧段位背景板（--rc 由 JS 设为新段位色） */
.promo-ball-newbg{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:3px solid transparent;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%, rgba(0,0,0,.24)) padding-box,
    conic-gradient(from var(--ang,0deg), transparent 0deg, var(--rc,#8a92a0) 70deg, #ffffff 130deg, var(--rc,#8a92a0) 200deg, transparent 280deg, transparent 360deg) border-box;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 34px rgba(140,190,255,.30), inset 0 1px 0 rgba(255,255,255,.3);
  opacity:0;}
#promo-overlay.active .promo-ball-newbg{animation:newBgIn .5s ease 1.35s both, newBgOut .6s ease 3.3s forwards;}
/* 流光环：扫一圈覆盖旧段位 */
.promo-ring{position:absolute; inset:-16px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.95) 50deg, rgba(255,214,150,.92) 82deg, transparent 132deg, transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  opacity:0;}
#promo-overlay.active .promo-ring{animation:ringSweep .95s cubic-bezier(.6,.05,.4,1) .45s forwards;}
/* 旧段位字母（被流光扫过后覆盖消失） */
.promo-old{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:96px; font-weight:900; line-height:1; white-space:nowrap;
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #ffffff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; -webkit-text-stroke:2.4px rgba(15,22,42,.9);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
#promo-overlay.active .promo-old{animation:rankFlow 3.2s linear infinite, oldOut .3s ease 1.05s forwards;}
/* 新段位字母（流光扫完后盖上去，随后缩小消失） */
.promo-rank{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:96px; font-weight:900; line-height:1; white-space:nowrap; opacity:0;
  background:linear-gradient(115deg, var(--rc,#cfd6e0) 0%, var(--rc,#cfd6e0) 38%, #ffffff 50%, var(--rc,#cfd6e0) 62%, var(--rc,#cfd6e0) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; -webkit-text-stroke:2.4px rgba(15,22,42,.9);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
#promo-overlay.active .promo-rank{animation:rankFlow 3.2s linear infinite, newStamp .5s cubic-bezier(.2,1.4,.3,1) 1.4s both, shrinkAway .85s ease 3.2s forwards;}
/* 段位文字：固定最下方（银铁描边 + 象牙白光泽字），末尾随段位一起渐变淡出 */
.promo-text{font-size:clamp(34px,8vw,52px); font-weight:900; letter-spacing:6px;
  text-align:center; text-indent:6px; /* 抵消末尾 letter-spacing，保证与徽章视觉居中对齐 */
  background:linear-gradient(115deg, #edf1f4 0%, #fdf8ea 35%, #ffffff 50%, #f7f3e4 65%, #e8edf1 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.6px rgba(186,196,210,.92); text-shadow:0 0 20px rgba(232,238,248,.55);}
/* 降级「段位下降」：红宝石光泽字（深红→亮红→粉高光→深红，富有光泽） */
.promo-text.down{
  background:linear-gradient(115deg, #7c0f2c 0%, #c21f45 26%, #ff7f9c 44%, #ffdce4 50%, #ff4d6d 58%, #d82a52 78%, #7c0f2c 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.6px rgba(140,18,44,.95);
  text-shadow:0 0 24px rgba(255,70,110,.65), 0 2px 6px rgba(80,6,24,.5);}
#promo-overlay.active .promo-text{animation:textFade .6s ease 3.3s forwards;}
@keyframes promoPop{
  0%{transform:scale(.4); opacity:0;}
  62%{transform:scale(1.08); opacity:1;}
  100%{transform:scale(1); opacity:1;}}
@keyframes ringSweep{
  from{transform:rotate(0); opacity:0;}
  18%{opacity:1;}
  to{transform:rotate(360deg); opacity:0;}}
@keyframes oldOut{to{opacity:0; transform:scale(.8); filter:brightness(2.4) blur(1.5px);}}
@keyframes newStamp{
  0%{transform:scale(2.6); opacity:0; filter:brightness(2.6) blur(4px);}
  55%{transform:scale(.92); opacity:1; filter:none;}
  78%{transform:scale(1.08); opacity:1;}
  100%{transform:scale(1); opacity:1;}}
@keyframes shrinkAway{to{transform:scale(.5); opacity:0;}}
@keyframes newBgIn{to{opacity:1;}}
@keyframes ballOut{to{opacity:0;}}
@keyframes newBgOut{to{opacity:0;}}
@keyframes textFade{to{opacity:0;}}
@keyframes maskIn{from{opacity:0;} to{opacity:1;}}
@keyframes maskOut{to{opacity:0;}}

/* ============ 页脚版本号（版本同步，勿手动改，随移交包递增） ============ */
#app-ver{position:fixed; right:10px; bottom:6px; z-index:9; font-size:11px; color:rgba(255,255,255,.28);
  letter-spacing:1px; user-select:none; pointer-events:none;}
@media (min-width:768px){ #app-ver{font-size:13px; color:rgba(255,255,255,.35);} }

/* ============ 对战模式切换 ============ */
.mode-label{margin-bottom:10px; font-size:36px; font-weight:900; letter-spacing:10px; color:rgba(255,255,255,.9); text-shadow:0 2px 10px rgba(0,0,0,.6);
  text-transform:uppercase; user-select:none;}

/* 匹配按钮区：side-btns + match-area(mode-btn 1/4 + match-btn 3/4) */
.match-area{display:flex; align-items:center; gap:12px; flex:1; max-width:min(520px,92vw);}
.mode-btn{flex:0 0 auto; width:var(--mb-h); height:var(--mb-h); border-radius:calc(var(--mb-h)/2); cursor:pointer; padding:0;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s, box-shadow .2s; display:flex; align-items:center; justify-content:center;}
.mode-btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.36);}
.mode-btn:active{transform:scale(.96);}
.match-area .match-btn{flex:1; width:auto; min-width:0;}

/* 全屏模式选择弹层 */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); z-index:100;
  display:none; align-items:center; justify-content:center;}
.modal-overlay.active{display:flex;}
.mode-panel{width:min(420px,88vw); background:linear-gradient(160deg,#1e2230,#161924); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:28px 24px 20px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.mode-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.mode-title{font-size:20px; font-weight:800; letter-spacing:3px; color:rgba(255,255,255,.92); text-align:center; flex:1; margin-bottom:0;}
.mode-list{display:flex; flex-direction:column; gap:12px;}
.mode-item{padding:16px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  cursor:pointer; transition:all .15s;}
.mode-item:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.25);}
.mode-item.active{border-color:rgba(255,180,90,.6); background:rgba(255,150,80,.12); box-shadow:0 0 20px rgba(255,150,80,.15);}
.mode-name{font-size:17px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,.92); margin-bottom:4px;}
.mode-desc{font-size:12px; color:rgba(255,255,255,.5); letter-spacing:1px;}
.mode-close{margin-top:18px; text-align:center; font-size:14px; color:rgba(255,255,255,.45); cursor:pointer;
  padding:8px; letter-spacing:2px; transition:color .15s;}
.mode-close:hover{color:rgba(255,255,255,.8);}
/* 汉堡菜单图标 */
.hamburger{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:64%; height:64%;}
.hamburger span{display:block; width:100%; height:5px; background:#fff; border-radius:3px; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.25);}
.mode-btn:hover .hamburger span{background:#fff;}
.mode-btn:active .hamburger span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.mode-btn:active .hamburger span:nth-child(2){opacity:0;}
.mode-btn:active .hamburger span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* 菜单内开关区域 */
.mode-switches{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:12px;}
.switch-row{display:flex; align-items:center; justify-content:space-between; padding:10px 4px; cursor:pointer; border-radius:10px; transition:background .15s;}
.switch-row:hover{background:rgba(255,255,255,.05);}
.switch-info{flex:1;}
.switch-name{font-size:15px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:1px; margin-bottom:2px;}
.switch-desc{font-size:11.5px; color:rgba(255,255,255,.45);}
.switch-desc b{color:rgba(255,255,255,.7); font-weight:700;}
.switch-reset{display:block; margin-top:2px; color:rgba(255,214,130,.85); font-weight:600; letter-spacing:.5px;}
.switch-track{width:48px; height:28px; border-radius:14px; position:relative; flex-shrink:0; transition:background .2s;}
.switch-track.on{background:linear-gradient(180deg,#4be08c,#27c56b); box-shadow:0 0 12px rgba(55,214,122,.4);}
.switch-track.off{background:rgba(255,255,255,.15);}
.switch-thumb{position:absolute; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:left .2s;}
.switch-track.on .switch-thumb{left:23px;}
.switch-track.off .switch-thumb{left:3px;}

/* 响应式：大屏 match-area 宽度 */
@media (min-width:768px){
  .match-area{max-width:min(560px,60vw);}
  /* mode-btn hamburger */
}

/* ============ 音乐播放器 ============ */
.music-btn{margin-right:auto; overflow:hidden; position:relative;}
.vinyl{position:relative; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #1a1a1a 0%, #1a1a1a 18%, #2a2a2a 19%, #1a1a1a 22%, #2a2a2a 25%, #1a1a1a 28%, #2a2a2a 31%, #1a1a1a 34%, #2a2a2a 37%, #1a1a1a 40%, #2a2a2a 43%, #1a1a1a 46%, #0a0a0a 50%, #1a1a1a 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.4);}
.vinyl-disc{position:absolute; inset:0; border-radius:50%; animation:vinylSpin 4s linear infinite; animation-play-state:paused;}
.music-btn.playing .vinyl-disc{animation-play-state:running;}
.vinyl-center{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg,#ff6b9d,#c44569); box-shadow:0 0 4px rgba(255,107,157,.6); z-index:2;}
.tonearm{position:absolute; top:-2px; right:-2px; width:16px; height:3px; background:linear-gradient(90deg,#888,#ccc);
  border-radius:2px; transform-origin:right center; transform:rotate(35deg); z-index:3;
  box-shadow:0 1px 2px rgba(0,0,0,.5);}
.tonearm::after{content:''; position:absolute; left:-3px; top:-1px; width:5px; height:5px; border-radius:50%; background:#666;}
.music-btn.playing .tonearm{transform:rotate(15deg);}
@keyframes vinylSpin{to{transform:rotate(360deg);}}

/* 音乐面板 */
#modal-music{align-items:flex-end;}
.music-panel{width:min(480px,94vw); max-height:88vh; display:flex; flex-direction:column;
  background:linear-gradient(160deg,#1e2230,#161924); border:1px solid rgba(255,255,255,.12);
  border-radius:20px 20px 0 0; padding:0; overflow:hidden;}
.music-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.music-head h3{font-size:17px; font-weight:800; letter-spacing:1px;}
.music-now{display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:rgba(255,255,255,.03);}
.music-cover{width:56px; height:56px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:linear-gradient(135deg,#2a2f42,#1a1e2c); border:1px solid rgba(255,255,255,.1);
  background-size:cover; background-position:center;}
.music-info{flex:1; min-width:0;}
.music-name{font-size:15px; font-weight:700; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.music-progress{display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,.5);}
.music-bar{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; cursor:pointer;}
.music-fill{height:100%; width:0%; background:linear-gradient(90deg,#ff6b9d,#c44569); border-radius:2px; transition:width .2s;}
.music-controls{display:flex; align-items:center; justify-content:center; gap:18px; padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.mc-btn{width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.06);
  color:var(--ink); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;}
.mc-btn:active{transform:scale(.92);}
.mc-btn:hover{background:rgba(255,255,255,.12);}
.mc-play{width:48px; height:48px; font-size:20px; background:linear-gradient(135deg,#ff6b9d,#c44569); color:#fff;}
.mc-play:hover{background:linear-gradient(135deg,#ff7faa,#d45579);}
.music-list{flex:1; overflow-y:auto; padding:8px 12px 16px;}
.music-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  cursor:pointer; transition:background .15s; margin-bottom:4px;}
.music-item:hover{background:rgba(255,255,255,.06);}
.music-item.active{background:rgba(255,107,157,.15);}
.music-item .mi-cover{width:40px; height:40px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:linear-gradient(135deg,#2a2f42,#1a1e2c); border:1px solid rgba(255,255,255,.08);
  background-size:cover; background-position:center;}
.music-item .mi-name{flex:1; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.music-item .mi-play{font-size:14px; opacity:.6;}
.music-item.active .mi-play{opacity:1; color:#ff6b9d;}
.music-empty{text-align:center; padding:40px 20px; color:rgba(255,255,255,.4); font-size:13px; line-height:1.8;}

/* 音量滑块 */
.volume-slider{-webkit-appearance:none; appearance:none; width:120px; height:6px; border-radius:3px;
  background:rgba(255,255,255,.15); outline:none; cursor:pointer;}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#ff6b9d,#c44569); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3);}
.volume-slider::-moz-range-thumb{width:18px; height:18px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#ff6b9d,#c44569); cursor:pointer;}

/* 桌面端音乐面板居中 */
@media (min-width:768px){
  #modal-music{align-items:center;}
  .music-panel{border-radius:20px;}
}

.mi-star{font-size:16px; cursor:pointer; opacity:.5; transition:opacity .15s, transform .15s; user-select:none;}
.mi-star:hover{opacity:1; transform:scale(1.2);}




/* 房间弹层 */
.room-panel{ width:min(92vw, 380px); padding:18px; }
.room-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.room-head h3{ font-size:17px; margin:0; }
.room-actions{ display:flex; flex-direction:column; gap:12px; }
.room-action-btn{ height:50px; border-radius:25px; border:none; cursor:pointer;
  background:linear-gradient(180deg,#4be08c,#27c56b); color:#063; font-size:16px; font-weight:800; letter-spacing:2px; }
.room-action-btn.small{ width:88px; height:44px; flex:none; font-size:15px; }
.room-action-btn:active{ transform:scale(.96); }
.room-join-row{ display:flex; gap:10px; }
.room-code-input{ flex:1; height:44px; border-radius:12px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.12); color:var(--ink); font-size:18px; letter-spacing:6px; text-align:center; outline:none; }
.room-tip{ font-size:12px; color:var(--ink-dim); line-height:1.6; }

/* 创建房间表单 */
.room-form{ display:flex; flex-direction:column; gap:10px; }
.rf-label{ font-size:13px; font-weight:700; color:var(--ink); margin-top:4px; }
.rf-levels{ display:flex; flex-wrap:wrap; gap:8px; }
.rf-levels .lv-chip{ cursor:pointer; opacity:.55; border:1px solid rgba(255,255,255,.1); }
.rf-levels .lv-chip.on{ opacity:1; border-color:rgba(255,150,180,.6); box-shadow:0 0 10px rgba(255,120,160,.35); }
.rf-bos{ display:flex; gap:10px; }
.bo-btn{ flex:1; height:46px; border-radius:14px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.08); color:var(--ink); font-size:15px; font-weight:700; cursor:pointer; }
.bo-btn.active{ background:linear-gradient(180deg,#4be08c,#27c56b); color:#063; border-color:transparent; }
.rf-tip{ font-size:12px; color:var(--ink-dim); line-height:1.6; }

/* 房间大厅 */
.room-lobby{ width:min(94vw, 460px); margin:0 auto; display:flex; flex-direction:column; gap:16px; padding-top:18px; }
.room-lobby-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.room-code-show{ font-size:14px; color:var(--ink-dim); }
.room-code-show b{ font-size:22px; color:var(--ink); letter-spacing:3px; margin-left:4px; }
.room-meta{ font-size:12px; color:var(--ink-dim); }
.room-leave-btn{ padding:8px 16px; border-radius:20px; border:1px solid var(--glass-brd);
  background:rgba(255,80,80,.18); color:#ff8f8f; font-size:13px; cursor:pointer; }
.room-seats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.room-seat{ aspect-ratio:1; border-radius:16px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; cursor:pointer; transition:transform .15s; position:relative; min-width:0; padding:6px; }
.room-seat:hover{ transform:translateY(-2px); }
.room-seat.fight{ background:linear-gradient(180deg,rgba(255,150,160,.35),rgba(214,60,120,.3)); border-color:rgba(255,150,160,.6); }
.room-seat.spec{ background:linear-gradient(180deg,rgba(139,200,234,.25),rgba(90,140,220,.2)); border-color:rgba(139,200,234,.5); }
.room-seat.empty{ cursor:pointer; border-style:dashed; }
.room-seat.empty .seat-role{ color:var(--ink-dim); }
.room-seat.mine{ box-shadow:0 0 0 2px #4be08c; }
.room-seat .seat-role{ font-size:11px; color:var(--ink-dim); }
.room-seat .seat-name{ font-size:12px; font-weight:700; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-seat .seat-ava{ width:34px; height:34px; border-radius:50%; overflow:hidden; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.room-seat .seat-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.room-seat .seat-host{ position:absolute; top:4px; left:50%; transform:translateX(-50%); font-size:9px;
  background:linear-gradient(180deg,#ffd76e,#f0a020); color:#5a3c00; border-radius:8px; padding:1px 6px; font-weight:800; }
.room-start-zone{ display:flex; justify-content:center; --mb-h:64px; }
.room-start-zone .match-btn{ width:min(320px,80vw); font-size:24px; letter-spacing:6px; }
.room-wait-tip{ font-size:14px; color:var(--ink-dim); padding:14px 0; }
.room-seat-tip{ text-align:center; font-size:12px; color:var(--ink-dim); opacity:.8; }

/* 房间准备/回合信息 */
.room-round-info{ text-align:center; font-size:13px; color:var(--ink-dim); margin-top:10px; }

/* 房间对战 */
.room-battle-round{ text-align:center; font-size:15px; font-weight:800; color:var(--ink); padding:10px 0 2px; letter-spacing:2px; }

/* 观战视图 */
.spec-board{ display:flex; gap:14px; padding:16px; align-items:stretch; }
.spec-player{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 8px;
  border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--glass-brd); }
.spec-who{ font-size:14px; font-weight:800; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spec-ava{ width:52px; height:52px; border-radius:50%; overflow:hidden; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.spec-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.spec-bar{ width:100%; height:12px; border-radius:8px; background:rgba(0,0,0,.35); border:1px solid var(--glass-brd); overflow:hidden; }
.spec-bar .fill{ height:100%; width:0%; border-radius:8px; transition:width .4s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,#4be08c,#1fae5c); }
.spec-player.b .spec-bar .fill{ background:linear-gradient(90deg,#ff8fb0,#e04a76); }
.spec-num{ font-size:13px; font-weight:700; }
.spec-q{ font-size:15px; font-weight:700; color:var(--ink); text-align:center; min-height:22px; }
.spec-q .kana{ font-size:13px; color:var(--ink-dim); display:block; }
.spec-answer{ font-size:12px; color:var(--ink-dim); text-align:center; min-height:16px; }
.spec-answer.correct{ color:#4be08c; font-weight:700; }
.spec-answer.wrong{ color:#ff8f8f; font-weight:700; }
.spec-center{ width:120px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.spec-diff{ font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }
.spec-diff.ahead{ color:#4be08c; } .spec-diff.behind{ color:#ff8f8f; } .spec-diff.even{ color:var(--ink-dim); }
.spec-time{ font-size:15px; font-weight:700; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.spec-vs{ font-size:22px; font-weight:900; color:var(--ink); opacity:.6; }
.spec-score{ font-size:20px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; }

/* 房间结算 */
.room-settle-rounds{ width:min(92vw, 360px); margin:12px auto 0; display:flex; flex-direction:column; gap:6px; }
.rsr-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-brd); font-size:13px; }
.rsr-row.win{ background:rgba(75,224,140,.16); border-color:rgba(75,224,140,.5); }
.rsr-row .rsr-w{ font-weight:800; }


/* ============ 房间前端 v2(26.9.25 后重构) ============ */
/* 入口:菜单栏右上角(mode-list 右侧内嵌) */
.mode-top{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.mode-row{ display:flex; align-items:stretch; gap:12px; }
.mode-row .mode-item{ flex:1; min-width:0; }
.room-home-btn{
  position:relative; top:auto; right:auto; flex:1; min-width:0;
  width:auto; height:auto; padding:16px 18px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  cursor:pointer; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  transition:transform .15s, background .2s, border-color .2s; z-index:5;
}
.room-home-btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.25); }
.room-home-btn:active{ transform:scale(.9); }
/* 房间入口按钮:样式与模式按钮(mode-item)保持一致 */

/* 观战 v2:双侧完整答题卡 + 正确/答错高亮 */
.spec-board{ display:flex; gap:14px; padding:16px; align-items:stretch; }
.spec-player{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; padding:14px;
  border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--glass-brd); }
.spec-head{ display:flex; align-items:center; gap:10px; }
.spec-ava{ width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; }
.spec-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.spec-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.spec-who{ font-size:14px; font-weight:800; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spec-bar{ width:100%; height:10px; border-radius:8px; background:rgba(0,0,0,.35); border:1px solid var(--glass-brd); overflow:hidden; }
.spec-bar .fill{ height:100%; width:0%; border-radius:8px; transition:width .4s cubic-bezier(.2,.8,.2,1); background:linear-gradient(90deg,#4be08c,#1fae5c); }
.spec-player#spec-b-panel .spec-bar .fill{ background:linear-gradient(90deg,#ff8fb0,#e04a76); }
.spec-num{ font-size:12px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.spec-qcard{ border-radius:12px; background:rgba(0,0,0,.18); border:1px solid var(--glass-brd); padding:12px; }
.spec-q-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; }
.spec-q-level{ font-size:11px; font-weight:800; color:var(--ink-dim); background:rgba(255,255,255,.08); padding:2px 8px; border-radius:8px; flex:none; }
.spec-q-count{ font-size:11px; color:var(--ink-dim); }
.spec-q-kana{ font-size:18px; font-weight:800; color:var(--ink); text-align:center; margin:4px 0 2px; line-height:1.3; }
.spec-q-kanji{ font-size:14px; color:var(--ink-dim); text-align:center; margin-bottom:10px; }
.spec-options{ display:flex; flex-direction:column; gap:6px; }
.spec-opt{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--glass-brd); background:rgba(255,255,255,.06); font-size:14px; color:var(--ink); font-weight:600; min-width:0; }
.spec-opt .ol{ width:22px; height:22px; flex:none; border-radius:50%; background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--ink-dim); }
.spec-opt .ow{ font-weight:700; }
.spec-opt .om{ margin-left:6px; color:var(--ink-dim); font-size:.88em; font-weight:500; flex-shrink:1; text-align:left; }
.spec-opt.correct{ border-color:rgba(75,224,140,.75); background:rgba(75,224,140,.18); }
.spec-opt.correct .ol{ background:linear-gradient(180deg,#4be08c,#1fae5c); color:#063; }
.spec-opt.correct::after{ content:'✓'; margin-left:auto; color:#4be08c; font-weight:900; flex:none; }
.spec-opt.wrong{ border-color:rgba(255,90,90,.75); background:rgba(255,90,90,.16); }
.spec-opt.wrong .ol{ background:linear-gradient(180deg,#ff8f8f,#e04a5a); color:#5a0a0a; }
.spec-opt.wrong::after{ content:'✕'; margin-left:auto; color:#ff8f8f; font-weight:900; flex:none; }
.spec-center{ width:110px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.spec-score{ font-size:22px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; }
.spec-diff{ font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; }
.spec-diff.ahead{ color:#4be08c; } .spec-diff.behind{ color:#ff8f8f; } .spec-diff.even{ color:var(--ink-dim); }
.spec-time{ font-size:13px; font-weight:700; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.spec-vs{ font-size:13px; font-weight:800; color:var(--ink-dim); opacity:.7; }

/* 手机端适配 */
@media (max-width:767px){
  /* 座位:对战位两大卡 + 观战位三小卡(两行) */
  .room-seats{ display:flex; flex-wrap:wrap; gap:8px; }
  .room-seat{ flex:1 1 45%; aspect-ratio:auto; min-height:104px; gap:6px; padding:10px 6px; }
  .room-seat.spec{ flex:1 1 30%; min-height:84px; }
  .room-seat .seat-ava{ width:44px; height:44px; font-size:18px; }
  .room-seat.spec .seat-ava{ width:34px; height:34px; font-size:15px; }
  .room-seat .seat-name{ font-size:13px; }
  .room-seat .seat-role{ font-size:12px; }
  .room-seat .seat-host{ font-size:10px; }


  /* 观战:上下堆叠,中间盘变顶部横条 */
  .spec-board{ flex-direction:column; gap:10px; padding:10px; }
  .spec-center{ width:100%; flex-direction:row; justify-content:center; gap:18px; order:0; padding:6px 0; }
  .spec-player{ order:1; }
  .spec-q-kana{ font-size:20px; }
  .spec-opt{ padding:11px 12px; font-size:15px; }
}

/* 入口按钮默认隐藏，登录后由 JS 显示 */
.room-home-btn{ display:none; }

/* 观战:视图容器可滚动(头部固定,双答题卡区滚动),防 body 锁死导致 room_b 卡不可见 */
#view-room-spec.active{ display:flex; flex-direction:column; max-height:100%; overflow:hidden; }
#view-room-spec.active .spec-center{ flex:0 0 auto; }
#view-room-spec.active .spec-board{ flex:1 1 auto; overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; }

/* ============ 26.9.27 四项全能大厅 ============ */
#all4-board{ display:flex; flex-direction:column; gap:12px; align-items:stretch; width:100%; box-sizing:border-box; }
.all4-grid{ display:grid; grid-template-columns:repeat(2, minmax(100px, 120px)); gap:14px 16px; justify-content:center; margin:0 auto; width:auto; box-sizing:border-box; }
.all4-cell{ padding:0; background:transparent; border:none;
  display:flex; flex-direction:column; align-items:center; gap:4px; }
.all4-badge{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; color:#fff; background:rgba(0,0,0,.25);
  box-shadow:inset 0 0 0 2px var(--rc,#2a2f3a), 0 0 10px rgba(255,255,255,.08); }
.all4-badge.master{ box-shadow:inset 0 0 0 2px var(--gm-gold), 0 0 14px rgba(255,214,130,.35); }
.all4-badge.gm{ box-shadow:inset 0 0 0 3px var(--gm-gold), 0 0 18px rgba(255,214,130,.55); }
.all4-mn{ font-size:12px; font-weight:800; color:rgba(255,255,255,.85); letter-spacing:1px; }
.all4-pt{ font-size:12px; font-weight:700; color:var(--gold,#ffd682); font-variant-numeric:tabular-nums; }
.all4-streak{ font-size:11px; font-weight:600; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.all4-tip{ font-size:11.5px; color:rgba(255,255,255,.5); letter-spacing:.5px; text-align:center; padding:6px 4px 0; }
.all4-row{ display:flex; gap:8px; align-items:center; justify-content:center; }

/* 语法赛:解释文字较长,允许换行、字号略小 */
#view-battle .q-card.q-grammar .q-kana{ font-size:22px; }
#view-battle .q-card.q-grammar .q-kanji{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.85);
  max-height:7.8em; overflow-y:auto; padding:0 4px; box-sizing:border-box; }
@media (max-width:480px){
  .all4-badge{ width:34px; height:34px; font-size:16px; }
  #view-battle .q-card.q-grammar .q-kana{ font-size:19px; }
  #view-battle .q-card.q-grammar .q-kanji{ font-size:13px; }
}