:root{
  --bg:#eef1f9;--bg2:#e6eaf6;--card:#fff;--ink:#1b2140;--muted:#6d7595;--line:#e4e8f4;
  --brand:#5b5bf0;--brand-d:#3f3fcf;--mint:#00c2b8;--good:#22c55e;--bad:#ef4444;--warn:#f59e0b;--gold:#fbbf24;
  --radius:18px;--shadow:0 12px 34px -14px rgba(45,55,120,.28);
  --pinkyL:#f87171;--ringL:#fbbf24;--midL:#34d399;--indexL:#60a5fa;
  --indexR:#818cf8;--midR:#22d3ee;--ringR:#f472b6;--pinkyR:#fb923c;--thumb:#cbd5e1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#f4f0ff,transparent),var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
button{font-family:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}   /* 面向电脑用户,放宽版心 */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:11px 22px;border-radius:13px;transition:.16s}
.btn-fill{background:var(--brand);color:#fff;box-shadow:0 10px 22px -10px var(--brand)}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px var(--brand)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ── header ── */
header{position:sticky;top:0;z-index:30;background:rgba(238,241,249,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;height:64px;gap:14px}
.logo{font-weight:800;font-size:20px;display:flex;align-items:center;gap:10px}
.logo .m{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--mint));display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 6px 14px -6px var(--brand)}
.logo span{color:var(--brand)}
nav .spacer{flex:1}
.nav-tools{margin-left:16px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;white-space:nowrap;transition:.15s}
.nav-tools:hover{color:var(--brand);border-color:var(--brand)}
.oprog{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.oprog .track{width:120px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.oprog .fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--mint));width:0;transition:width .5s}
.guest{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:99px}

/* ── views ── */
.view{display:none;padding:26px 0 80px}
.view.on{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── path hero ── */
.phero{text-align:center;padding:8px 0 4px}
.phero h1{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.01em}
.phero h1 span{background:linear-gradient(120deg,var(--brand),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero p{color:var(--muted);margin-top:6px;font-size:14.5px}
.review-banner{max-width:600px;margin:16px auto 0;background:#fff7ea;border:1px solid #ffe4b3;color:#a86e12;border-radius:14px;padding:11px 16px;font-size:14px;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}

/* 首页两侧浮窗（在主框架之外，只在宽屏 + 学习地图时出现） */
.floatwin{position:fixed;top:50%;transform:translateY(-50%);width:212px;z-index:25;display:none;
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:20px 16px;text-align:center;animation:fwin .4s}
@keyframes fwin{from{opacity:0;transform:translateY(-50%) scale(.94)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.floatwin.show{display:block}
.floatwin.fw-left{left:24px}
.floatwin.fw-right{right:24px}
.floatwin .fw-emoji{font-size:30px;line-height:1}
.floatwin .fw-title{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:6px;letter-spacing:.02em}
.floatwin .fw-big{font-size:44px;font-weight:900;line-height:1.05;margin-top:4px;color:var(--warn)}
.floatwin .fw-sub{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4}
/* 霸主轮播：多个竞技场的榜首定时滑动切换 */
.floatwin .fw-slides{overflow:hidden;margin-top:4px}
.floatwin .fw-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.floatwin .fw-slide{flex:0 0 100%;min-width:100%}
.floatwin .fw-game{font-size:11px;font-weight:800;color:#c07a12;background:#fff3d9;border-radius:99px;padding:2px 9px;display:inline-block}
.floatwin .fw-dots{display:flex;gap:5px;justify-content:center;margin-top:9px}
.floatwin .fw-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s}
.floatwin .fw-dots i.on{background:#e0952a;width:17px;border-radius:99px}
.floatwin .fw-name{font-size:17px;font-weight:800;margin-top:5px;color:var(--ink);word-break:break-all}
.floatwin .fw-score{font-size:13px;color:var(--muted);margin-top:2px}
.floatwin .fw-score b{font-size:22px;font-weight:900;color:var(--brand)}
.floatwin .fw-since{font-size:11.5px;color:#e0952a;font-weight:700;margin-top:5px;background:#fff7e6;border-radius:99px;padding:3px 10px;display:inline-block}
.floatwin .fw-btn{margin-top:14px;width:100%;padding:9px;border-radius:11px;background:var(--brand);color:#fff;font-weight:700;font-size:13px;box-shadow:0 8px 18px -8px var(--brand);transition:.16s}
.floatwin .fw-btn:hover{transform:translateY(-2px)}
.floatwin.fw-right .fw-btn{background:#e0952a;box-shadow:0 8px 18px -8px #e0952a}
/* 窗口够宽（两侧有空间）才显示浮窗，否则退回顶部横幅 */
/* 浮窗贴在视口两侧,视口不够宽就会压到正文上(版心 1180 + 两侧各 252 ≈ 1684)*/
@media(max-width:1699px){ .floatwin.show{display:none} }
@media(min-width:1440px){ .review-banner{display:none!important} }
.review-banner b{color:var(--warn)}
.review-banner button{color:var(--warn);font-weight:700;border-bottom:2px solid var(--warn)}

/* ── units as grid ── */
.unit{margin-top:22px}
.unit-head{display:flex;align-items:center;gap:14px;background:var(--uc);color:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.unit-head::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;background:rgba(255,255,255,.13);border-radius:50%}
.unit-head .num{font-size:30px;font-weight:800;opacity:.9;line-height:1;z-index:1}
.unit-head .t{z-index:1}
.unit-head .t small{opacity:.85;font-size:12px;letter-spacing:.1em;font-weight:700}
.unit-head .t h3{font-size:19px;font-weight:800;margin:1px 0}
.unit-head .t p{font-size:12.5px;opacity:.9}
.unit-head .u-stars{margin-left:auto;font-size:13px;white-space:nowrap;background:rgba(0,0,0,.16);padding:5px 12px;border-radius:99px;z-index:1}

.unit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px;position:relative}
/* 连接箭头 */
.ncard{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px 12px;box-shadow:var(--shadow);cursor:pointer;transition:.16s;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}
.ncard:not(.locked):hover{transform:translateY(-4px);border-color:var(--brand)}
.ncard .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:var(--bg2);transition:.16s}
.ncard .nt{font-size:14px;font-weight:800;line-height:1.25}
.ncard .ns{font-size:11px;color:var(--muted)}
.ncard .nstars{font-size:12px;letter-spacing:1px;color:#dbe0ee;height:15px}
.ncard .nstars b{color:var(--gold)}
.ncard .badge{position:absolute;top:8px;right:8px;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px}
.ncard .badge.review{background:#fff4e5;color:var(--warn);border:1px solid #ffe0b2}
/* 类型图标底色 */
.ncard.type-lesson .ic{color:var(--brand)}
.ncard.type-review .ic{color:var(--warn)}
.ncard.type-game .ic{color:var(--mint)}
.ncard.type-test  .ic{color:#e11d48}
.ncard.type-entest .ic{color:#2563eb}
.ncard.type-cntest .ic{color:#dc2626}
.ncard.type-arena .ic{color:#e0952a;background:#fff7e6}
.ncard.type-arena{border-color:#f4c04a}
.ncard.type-chase .ic{color:#2563eb;background:#e8f0ff}
.ncard.type-chase{border-color:#9ec1ff}
.ncard.type-chase.done .ic{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff}
.ncard.type-entest.done .ic{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff}
.ncard.type-cntest.done .ic{background:linear-gradient(135deg,#dc2626,#f87171);color:#fff}
/* 状态 */
.ncard.done .ic{background:linear-gradient(135deg,var(--brand),var(--mint));color:#fff}
.ncard.type-review.done .ic{background:linear-gradient(135deg,var(--warn),#fbbf24)}
.ncard.type-game.done   .ic{background:linear-gradient(135deg,var(--mint),#5eead4)}
.ncard.type-test.done   .ic{background:linear-gradient(135deg,#e11d48,#fb7185)}
.ncard.cur{border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,91,240,.16),var(--shadow)}
.ncard.cur .ic{animation:pulse 1.6s infinite}
.ncard.cur .go{position:absolute;top:-9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:2px 11px;border-radius:99px;box-shadow:var(--shadow)}
.ncard.review-due{box-shadow:0 0 0 3px #ffe4b3,var(--shadow)}
.ncard.locked{opacity:.6;cursor:not-allowed;background:#f4f6fb}
.ncard.locked .ic{background:#e9edf7;color:#b6bdd4}
.ncard.locked .lk{position:absolute;bottom:10px;right:12px;font-size:13px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(91,91,240,.5)}50%{box-shadow:0 0 0 10px rgba(91,91,240,0)}}

/* ── lesson player ── */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.topbar h2{font-size:20px;font-weight:800}
.topbar .spacer{flex:1}
.pbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 16px;min-width:90px;text-align:center;box-shadow:var(--shadow)}
.stat b{font-size:24px;font-weight:800;display:block;line-height:1.1}
.stat.wpm b{color:var(--brand)}.stat.acc b{color:var(--good)}.stat.err b{color:var(--bad)}
.stat small{font-size:11px;color:var(--muted)}
.textbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);
  font-size:26px;line-height:1.9;letter-spacing:.5px;user-select:none;min-height:120px;
  font-family:"SF Mono",ui-monospace,Consolas,monospace;white-space:normal;overflow-wrap:break-word;word-break:break-word}
.textbox .word{display:inline-block;white-space:nowrap}
.textbox .ch{color:#bcc3d8;position:relative;border-radius:3px}
.textbox .ch.done{color:var(--ink)}
.textbox .ch.wrong{color:var(--bad);background:#fde8e8}
.textbox .ch.sp{display:inline}
.textbox .ch.sp.wrong{background:#fbb;border-radius:3px}
.textbox .ch.cur::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-3px;height:3px;background:var(--brand);border-radius:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.hint{text-align:center;color:var(--muted);font-size:13px;margin:12px 0}
.site-foot{margin-top:44px;padding:24px 0 34px;border-top:1px solid var(--line);
  text-align:center;font-size:13px;color:var(--muted);letter-spacing:.02em}
.site-foot a{color:var(--muted);font-weight:600;text-decoration:none}
.site-foot .foot-tools{color:var(--brand)}
.site-foot .foot-sep{margin:0 8px;opacity:.5}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.lesson-tip{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 16px;
  background:#fff7e6;border:1px solid #ffe1a6;border-left:4px solid var(--warn);border-radius:12px;
  color:#7a5a12;font-size:13.5px;line-height:1.7}
.lesson-tip .ti{font-size:16px;flex:none;line-height:1.4}
.lesson-tip b{color:var(--warn);font-weight:800}
.video-box{margin:14px 0;border-radius:14px;overflow:hidden;background:#000;position:relative}
.video-box video{display:block;width:100%;max-height:80vh;background:#000}
.video-fallback{padding:60px 20px;text-align:center;color:var(--muted);background:var(--bg2);font-size:14px}
.star-rule{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px;font-size:12.5px}
.star-rule span{background:#fff;border:1px solid var(--line,#e6e9f2);border-radius:99px;padding:4px 12px;color:var(--muted);white-space:nowrap}
.star-rule span b{color:#f5a623;font-weight:800}
.star-rule span .req{color:var(--ink,#333);font-weight:700}
.unit-head.ulocked{filter:grayscale(.35) brightness(.94)}
.unit-head .u-lock{margin-left:10px;font-size:12px;background:rgba(0,0,0,.22);padding:5px 12px;border-radius:99px;z-index:1;white-space:nowrap;cursor:help}

/* keyboard */
/* --kw = 一个键位单元(键宽+间距)，阶梯缩进与手掌定位都基于它 */
.kbstage{position:relative;width:761px;max-width:100%;margin:14px auto 0;padding-bottom:96px}
.kb{--kw:53px;--pad:66px;--shiftw:112px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;width:fit-content;margin:0 auto}
.kb .row{display:flex;gap:7px}
/* 真实键盘的阶梯错位：每往下一行缩进半个键；下排两端是 Shift，故整行左移 --pad */
.kb .row:nth-child(1){margin-left:var(--pad)}
.kb .row:nth-child(2){margin-left:calc(var(--pad) + var(--kw)*.5)}
.kb .row:nth-child(3){margin-left:0}
.kb .row.srow{margin-left:calc(var(--pad) + var(--kw)*3.264)}
.key.shift{width:var(--shiftw);font-size:11px;letter-spacing:.02em;text-transform:none}
.key{width:46px;height:46px;border-radius:11px;background:#fff;border:1px solid var(--line);border-bottom:3px solid #d7ddec;display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--muted);text-transform:uppercase;transition:.08s}
.key.wide{width:230px}
.key[data-f]{border-bottom-color:var(--kbf)}
.key.next{color:#fff;background:var(--brand);border-color:var(--brand);border-bottom-color:var(--brand-d);transform:translateY(1px);box-shadow:0 7px 16px -6px var(--brand)}
.key.hit{background:#e9fbef;border-color:var(--good)}
.key.miss{background:#fdecec;border-color:var(--bad);animation:shake .18s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* 半透明双手：轮廓 60% 透明、填充 90% 透明，对应手指随目标键联动 */
.hands{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none;z-index:4;overflow:visible}
.hands .palm{fill:#7cc0ff;fill-opacity:.10;stroke:#7cc0ff;stroke-opacity:.40;stroke-width:2;stroke-linejoin:round}
/* 手指绕指根旋转（--ang）指向目标键 */
.hands .fg{transform:rotate(var(--ang,0deg));transform-origin:var(--ox) var(--oy);transition:transform .22s cubic-bezier(.4,1.4,.5,1)}
/* 指头绕指根伸长（--stretch）够到目标键，--press 是按下去那一点点 */
.hands .fgr{fill:var(--fc,#7cc0ff);fill-opacity:.10;stroke:var(--fc,#7cc0ff);stroke-opacity:.40;stroke-width:2;
  transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(var(--press,0px)) scaleY(var(--stretch,1));
  transition:transform .22s cubic-bezier(.4,1.4,.5,1),fill-opacity .18s ease,stroke-opacity .18s ease,filter .18s ease}
/* 该按这个键 → 对应手指亮起 + 呼吸光 */
.hands .fg.active .fgr{stroke-opacity:1;
  filter:drop-shadow(0 0 7px var(--fc,#7cc0ff));animation:fgpulse 1.1s ease-in-out infinite alternate}
@keyframes fgpulse{from{fill-opacity:.30}to{fill-opacity:.52}}
/* 窄屏键盘会缩小、与手掌比例对不上，直接隐藏双手 */
@media(max-width:760px){ .hands{display:none} .kbstage{padding-bottom:0;width:auto} }

.legend{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:13px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

/* ── modal ── */
.overlay{position:fixed;inset:0;background:rgba(18,22,48,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.on{display:flex;animation:fade .2s}
.modal{background:#fff;border-radius:24px;padding:34px;max-width:430px;width:100%;text-align:center;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:pop .3s}
/* 姿势视频：放大窗口（须在 .modal 之后，否则被 430px 覆盖）*/
.modal.modal-wide{max-width:1160px;width:calc(100vw - 48px);padding:26px}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.modal .big{font-size:50px;letter-spacing:6px;margin-bottom:4px}
.modal h2{font-size:23px;font-weight:800}
.modal .sub{color:var(--muted);font-size:14px;margin-top:4px}
.modal .res{display:flex;gap:12px;justify-content:center;margin:22px 0}
.modal .res .s{flex:1;background:var(--bg);border-radius:14px;padding:12px 8px}
.modal .res b{font-size:26px;font-weight:800;display:block}
.modal .res small{color:var(--muted);font-size:12px}
.modal .save-tip{background:#f1f2ff;border:1px solid #e0e2ff;border-radius:12px;padding:11px;font-size:13px;color:var(--brand);margin-bottom:16px}
.modal .row{display:flex;gap:10px}
.modal .row .btn{flex:1;justify-content:center}

/* ── game ── */
.gamewrap{background:linear-gradient(180deg,#0e1330,#1c1250);border-radius:var(--radius);padding:20px;color:#fff;box-shadow:var(--shadow)}
.gtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.gtop .gs b{font-size:22px}.gtop .gs small{opacity:.7;font-size:12px;display:block}
.gcombo{font-weight:800;color:#fde047;font-size:16px;transition:transform .1s}
.gcombo.bump{transform:scale(1.3)}
.timebar{height:8px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;margin-bottom:8px}
.timebar .fill{height:100%;background:linear-gradient(90deg,#22d3ee,#5b5bf0);width:100%;transition:width 1s linear}
.lives{text-align:right;font-size:17px;letter-spacing:2px;margin-bottom:10px;height:22px}
.field{position:relative;height:clamp(420px,68vh,680px);overflow:hidden;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.word-drop{position:absolute;padding:5px 11px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-weight:700;font-size:17px;white-space:nowrap;font-family:"SF Mono",monospace;letter-spacing:1px}
.word-drop.target{border-color:#22d3ee;box-shadow:0 0 14px rgba(34,211,238,.6)}
.word-drop .wc{color:#e5e9f5}
.word-drop .wc.typed{color:#22d3ee;text-shadow:0 0 8px #22d3ee}
.ship{position:absolute;bottom:8px;left:50%;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:26px solid #22d3ee;transform:translateX(-50%);transform-origin:50% 72%;transition:transform .08s;filter:drop-shadow(0 0 8px rgba(34,211,238,.8));z-index:5}
.bullet{position:absolute;width:4px;height:14px;margin:-7px 0 0 -2px;background:#a7f3ff;border-radius:2px;box-shadow:0 0 8px #22d3ee;z-index:4}
.boom{position:absolute;font-size:24px;pointer-events:none;animation:boom .4s forwards;z-index:6}
@keyframes boom{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.bubble{position:absolute;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;text-transform:uppercase;background:radial-gradient(circle at 35% 30%,#fff,#c7d2fe);color:var(--brand-d);border:2px solid #a5b4fc;box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.bubble.pop{animation:bpop .2s forwards}
@keyframes bpop{to{transform:scale(1.6);opacity:0}}
.ginput{margin-top:12px;display:flex;gap:10px}
.ginput input{flex:1;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:16px;outline:none;font-family:"SF Mono",monospace}
.ginput input::placeholder{color:rgba(255,255,255,.5)}
.gtip{opacity:.7;font-size:12.5px;margin-top:8px;text-align:center}
.gover{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px;background:rgba(10,13,35,.72)}
.gover h2{font-size:26px;font-weight:800;margin-bottom:8px}
.gover p{opacity:.9;margin-bottom:16px}
.gover p b{color:#22d3ee}
.gover .grow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── 中文测速 ── */
/* 中文测速：每字上下两格——示例在上、你打的字在下、逐字对照 */
.cn-target{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:12px;line-height:1}
.cncell{display:inline-flex;flex-direction:column;align-items:center;gap:5px;margin:5px 3px;min-width:28px;vertical-align:top}
.cncell .tgt{font-size:22px;color:#8b93ad;line-height:1.25}
.cncell .usr{font-size:22px;line-height:1.25;min-height:28px;min-width:18px;color:var(--ink);border-bottom:2px solid #eceff6;border-radius:3px;padding:0 2px}
.cncell .usr.ok{color:var(--good);border-bottom-color:var(--good)}
.cncell .usr.bad{color:#fff;background:var(--bad);border-bottom-color:var(--bad)}
.cncell.cur .usr{border-bottom-color:var(--brand);box-shadow:0 2px 0 var(--brand)}
.cn-input{width:100%;min-height:56px;resize:vertical;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;font-size:18px;line-height:1.6;font-family:inherit;outline:none;box-shadow:var(--shadow);color:var(--muted)}
.cn-input:focus{border-color:var(--brand)}

/* ── 竞技场 ── */
.arena-hero{text-align:center;background:linear-gradient(135deg,#e11d48,#7c3aed);color:#fff;border-radius:var(--radius);padding:34px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.arena-hero::after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;background:rgba(255,255,255,.13);border-radius:50%}
.arena-hero .ah-badge{font-size:44px}
.arena-hero h2{font-size:26px;font-weight:800;margin-top:6px}
.arena-hero p{opacity:.9;margin-top:6px;font-size:14px}
.login-gate{text-align:center;background:var(--card);border:1px dashed var(--brand);border-radius:var(--radius);padding:30px 24px;margin-top:16px;box-shadow:var(--shadow)}
.login-gate .lg-icon{font-size:38px}
.login-gate h3{font-size:20px;font-weight:800;margin:8px 0 6px}
.login-gate p{color:var(--muted);font-size:14.5px;max-width:460px;margin:0 auto 18px}
.login-gate p b{color:var(--brand)}
.login-gate .btn[disabled]{opacity:.55;cursor:not-allowed}
.login-gate .gate-note{font-size:13px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);
  border-radius:12px;padding:10px 14px;max-width:520px;margin:0 auto 16px;line-height:1.75}
.login-gate .gate-note b{color:var(--warn)}
.login-gate .gate-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lb-preview{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:16px;box-shadow:var(--shadow)}
.lb-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:16px;margin-bottom:8px}
.lb-head span{font-size:12px;color:var(--muted);font-weight:600}
.lb-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;padding:9px 6px;border-top:1px solid var(--line)}
.lb-row.me{background:#fff7ed;border-radius:8px;box-shadow:inset 0 0 0 1px #ffd7a8}
.lb-row.me .nm{color:#d4622a}
.lb-row .rk{font-weight:800;color:var(--muted);text-align:center}
.lb-row .rk.top{color:#fff;background:var(--gold);width:26px;height:26px;line-height:26px;border-radius:50%;margin:0 auto}
.lb-row:nth-child(2) .rk.top{background:#c0c0c0}
.lb-row:nth-child(3) .rk.top{background:#cd7f32}
.lb-row .nm{font-weight:600}
.lb-row .sc{font-weight:800;color:var(--brand)}
.lb-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:10px}

/* 弹幕射击(canvas) */
.shooter-stage{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#05060f}
#shooter-canvas{display:block;width:100%;height:clamp(460px,74vh,780px);background:#05060f;touch-action:none}
.shooter-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:rgba(255,255,255,.45);font-size:12.5px;pointer-events:none;letter-spacing:.3px}
.shooter-input{display:none;width:100%;margin-top:10px;padding:11px 15px;border:1px solid var(--line);border-radius:11px;font-size:18px;outline:none;color:var(--ink);font-family:inherit}
.shooter-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,111,230,.14)}
#view-shooter.cn .shooter-input{display:block}

/* 警察抓小偷(canvas) */
.chase-stage{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#eaf4ff}
#chase-canvas{display:block;width:100%;height:clamp(420px,68vh,660px);background:#eaf4ff;touch-action:none}
.chase-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:rgba(30,40,70,.5);font-size:12.5px;pointer-events:none;letter-spacing:.3px}
/* 底部打字条：仿金山，已打=蓝、光标、待打=黑，往前滚 */
.chase-typebar{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:10px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.chase-typebar .cs-top{display:flex;align-items:center;gap:12px}
.cs-input{display:none;width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:17px;outline:none;color:var(--ink);font-family:inherit}
.cs-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,111,230,.14)}
.chase-typebar.cn .cs-input{display:block}
.chase-typebar .knob{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c3ccdf);border:1px solid #b6bfd6}
.chase-typebar .stream{position:relative;flex:1;min-width:0;height:36px;overflow:hidden;
  font-family:ui-monospace,"SF Mono",Consolas,"Courier New",monospace;font-size:21px}
.chase-typebar .line{position:absolute;left:0;top:50%;white-space:pre;transform:translateY(-50%);will-change:transform}
.chase-typebar .done{color:var(--brand);font-weight:700}
.chase-typebar .caret{color:var(--ink);font-weight:700;background:rgba(43,111,230,.16);border-radius:3px;box-shadow:inset 0 -2px 0 var(--brand)}
.chase-typebar .caret.bad{color:var(--bad);background:#fde8e8;box-shadow:inset 0 -2px 0 var(--bad)}
.chase-typebar .todo{color:#8b93ad}

@media(max-width:640px){
  .unit-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media(max-width:760px){ .nav-tools{margin-left:10px;padding:5px 9px;font-size:12px} }
/* 窄屏顶栏放不下就换行,不牺牲进度条和登录态 */
@media(max-width:700px){ header nav{flex-wrap:wrap;height:auto;min-height:64px;padding:9px 0;gap:8px} }
@media(max-width:560px){
  .key{width:30px;height:40px;font-size:12px;border-radius:8px}.key.wide{width:150px}
  .kb{--kw:37px;--pad:46px;--shiftw:78px}
  .key.shift{font-size:9px}
  .textbox{font-size:21px;padding:20px}
  .oprog .track{width:80px}
}

/* 排行榜底部的头像昵称同步入口（只在认不出自己时出现）*/
.lb-tip{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:13px;line-height:1.5}
.lb-tip b{font-weight:700}
.lb-tip-go{flex:none;padding:6px 14px;border-radius:999px;
  background:var(--brand,#4f8cff);color:#fff;text-decoration:none;font-weight:700;font-size:13px}