:root{
    --bg:#070d24;
    --panel:rgba(13,20,48,.96);
    --panel-soft:rgba(22,32,68,.72);
    --panel-border:rgba(120,200,255,.24);
    --text:#eaf3ff;
    --text-dim:rgba(190,215,255,.60);
    --accent:#5ff2d0;
    --accent2:#ffd76e;
    --warn:#ffb066;
    --shadow:0 20px 60px rgba(0,0,0,.55);
}
html[data-theme="bright"]{
    --bg:#e6f0fb;
    --panel:rgba(255,255,255,.98);
    --panel-soft:rgba(244,249,255,.90);
    --panel-border:rgba(25,75,145,.26);
    --text:#0a1830;
    --text-dim:rgba(20,45,90,.65);
    --accent:#00796b;
    --accent2:#a06a00;
    --warn:#b85500;
    --shadow:0 20px 60px rgba(40,80,150,.22);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    background:var(--bg);color:var(--text);
    -webkit-font-smoothing:antialiased;user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .35s ease,color .35s ease;
}
button{font-family:inherit;}
[hidden]{display:none !important;}

/* 屏幕阅读器可见 / 视觉隐藏 */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   SVG 图标基础
   ============================================================ */
.icon{
    display:inline-block;
    width:1em;height:1em;
    vertical-align:-0.125em;
    fill:currentColor;
    flex:0 0 auto;
}

/* ============================================================
   页面骨架
   ============================================================ */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;}

/* ---------- 顶部单行信息栏（自适应） ---------- */
.topbar{
    flex:0 0 auto;
    display:flex;align-items:center;
    gap:14px;
    height:60px;
    padding:0 16px;
    background:var(--panel);
    border-bottom:1px solid var(--panel-border);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    z-index:20;
    box-shadow:0 2px 20px rgba(0,0,0,.20);
    width: 100%;
}

/* 品牌区 */
.brand{
    display:flex;align-items:center;gap:9px;
    flex:0 0 auto;
    padding-right:6px;
}
.brand-icon{
    font-size:19px;color:var(--accent);
    text-shadow:0 0 14px var(--accent);
    animation:spinSlow 10s linear infinite;display:inline-block;
}
@keyframes spinSlow{to{transform:rotate(360deg);}}
.brand-name{font-size:15px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.brand-sub{font-size:11px;color:var(--text-dim);white-space:nowrap;}

/* 统计区 */
.stats{
    flex:1 1 auto;
    display:flex;align-items:center;
    gap:10px;
    min-width:0;
    overflow:hidden;
    justify-content:center;
}
.stat{
    display:flex;align-items:center;gap:8px;
    flex:0 0 auto;
    height:42px;
    padding:0 12px;
    border-radius:11px;
    background:rgba(127,180,255,.08);
    border:1px solid rgba(140,190,255,.12);
    line-height:1;
    transition:transform .2s ease,border-color .2s;
}
.stat-icon{font-size:16px;color:var(--text-dim);opacity:.88;flex:0 0 auto;}
.stat-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;line-height:1.05;}
.stat-body label{
    font-size:9.5px;color:var(--text-dim);
    letter-spacing:.08em;white-space:nowrap;margin-bottom:2px;
}
.stat-body b{
    font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
    white-space:nowrap;color:var(--text);
}
.stat-body b.accent{color:var(--accent);}
.stat-body b.gold{color:var(--accent2);}

/* 操作区 */
.actions{
    flex:0 0 auto;
    display:flex;align-items:center;
    gap:8px;
}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:36px;
    padding:0 12px;border-radius:10px;
    border:1px solid var(--panel-border);
    background:rgba(127,180,255,.08);
    color:var(--text);font-size:12.5px;font-weight:600;
    cursor:pointer;white-space:nowrap;
    transition:background .16s ease,border-color .16s ease,transform .12s ease;
    line-height:1;
}
.btn:hover{background:rgba(95,242,208,.18);border-color:var(--accent);}
.btn:active{transform:scale(.95);}
.btn .icon{font-size:13px;}
.btn.primary{
    background:linear-gradient(135deg,var(--accent),#3fd0e0);
    color:#06182a;border-color:transparent;
    box-shadow:0 4px 18px rgba(95,242,208,.35);
}
.btn.primary:hover{filter:brightness(1.08);}
.btn.icon-only{padding:0 10px;min-width:36px;}

/* ---------- 游戏画布区 ---------- */
#stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;}
#game{display:block;width:100%;height:100%;touch-action:none;}

#mobile-tip{
    position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    padding:9px 18px;border-radius:12px;
    background:rgba(255,180,90,.18);border:1px solid rgba(255,180,90,.42);
    color:var(--warn);font-size:12.5px;font-weight:600;
    display:none;pointer-events:none;z-index:12;backdrop-filter:blur(8px);
}

/* ============================================================
   弹层
   ============================================================ */
.modal{
    position:fixed;inset:0;z-index:100;
    display:none;align-items:center;justify-content:center;
    padding:20px;
    background:rgba(4,8,22,.66);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
html[data-theme="bright"] .modal{background:rgba(30,60,110,.32);}
.modal.open{display:flex;}
.modal-card{
    width:min(640px,100%);
    max-height:88vh;overflow-y:auto;
    padding:32px;border-radius:24px;
    background:var(--panel);
    border:1px solid var(--panel-border);
    box-shadow:var(--shadow);
    animation:pop .28s cubic-bezier(.2,.9,.3,1.35);
}
.modal-card.wide{width:min(820px,100%);}
@keyframes pop{from{transform:scale(.93) translateY(14px);opacity:0;}to{transform:none;opacity:1;}}

/* ✅ 弹层标题居中 */
.modal-card h2{
    font-size:22px;margin-bottom:12px;letter-spacing:.02em;
    display:flex;align-items:center;justify-content:center;gap:11px;
    line-height:1.3;text-align:center;
}
.modal-card h2 .icon{color:var(--accent);font-size:20px;}
.modal-card h3{
    font-size:14px;margin:26px 0 14px;color:var(--accent);
    letter-spacing:.04em;font-weight:700;
    display:flex;align-items:center;gap:8px;
}
.modal-card h3 .icon{font-size:13px;}
.modal-card p.desc{
    font-size:13px;color:var(--text-dim);
    line-height:1.8;margin-bottom:18px;text-align:center;
}

/* 选项组 */
.opt-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:4px;}
.opt{
    flex:1 1 140px;min-width:120px;
    padding:16px 18px;border-radius:14px;
    border:1.5px solid var(--panel-border);
    background:rgba(127,180,255,.06);
    color:var(--text);cursor:pointer;text-align:left;
    transition:.16s ease;
    display:flex;flex-direction:column;gap:7px;
}
.opt:hover{background:rgba(95,242,208,.12);border-color:var(--accent);}
.opt.sel{
    background:linear-gradient(135deg,rgba(95,242,208,.24),rgba(95,242,208,.08));
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent) inset,0 8px 24px rgba(95,242,208,.18);
}
.opt-head{display:flex;align-items:center;gap:9px;}
.opt-head .icon{font-size:16px;color:var(--accent);}
.opt .t{font-size:14.5px;font-weight:700;line-height:1.2;}
.opt .s{font-size:11.5px;color:var(--text-dim);line-height:1.5;}

/* 开始按钮组 */
.start-row{margin-top:32px;}
.start-row .btn.start{
    width:100%;height:58px;padding:0 22px;font-size:17px;border-radius:15px;
    font-weight:800;letter-spacing:.04em;
}
.start-row .btn.start .icon{font-size:18px;}
.secondary-row{
    margin-top:16px;display:flex;gap:12px;justify-content:center;
}
.secondary-row .btn{
    height:38px;padding:0 18px;font-size:12.5px;border-radius:22px;
    background:transparent;border:1px solid var(--panel-border);
    color:var(--text-dim);
}
.secondary-row .btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(95,242,208,.10);}
.secondary-row .btn .icon{font-size:13px;}

/* 设置行 */
.setting-line{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 0;border-bottom:1px dashed rgba(140,190,255,.16);
    font-size:13.5px;
}
.setting-line:last-child{border-bottom:none;}
.setting-line > span{display:flex;align-items:center;gap:10px;font-weight:600;}
.setting-line > span .icon{color:var(--text-dim);font-size:15px;}
.seg{
    display:inline-flex;border-radius:10px;overflow:hidden;
    border:1px solid var(--panel-border);
    background:rgba(127,180,255,.06);
}
.seg button{
    padding:8px 15px;border:none;background:transparent;
    color:var(--text-dim);font-size:12.5px;font-weight:600;cursor:pointer;
    transition:.15s;
}
.seg button.on{background:var(--accent);color:#06182a;}
input[type=range]{width:150px;accent-color:var(--accent);cursor:pointer;}

/* 规则列表 */
.rule-list{list-style:none;font-size:13px;line-height:1.95;color:var(--text);}
.rule-list li{padding-left:26px;position:relative;margin-bottom:8px;}
.rule-list li::before{
    content:"◆";position:absolute;left:0;top:0;
    color:var(--accent);font-size:10px;line-height:2.5;
}
.rule-list b{color:var(--accent2);}

/* 报告 */
.report-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
    gap:12px;margin:20px 0;
}
.report-cell{
    padding:16px 10px;border-radius:15px;
    background:rgba(127,180,255,.08);
    border:1px solid var(--panel-border);
    text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:5px;
}
.report-cell .ic{color:var(--text-dim);font-size:18px;margin-bottom:3px;display:block;}
.report-cell label{
    display:block;font-size:10.5px;color:var(--text-dim);
    letter-spacing:.06em;margin-bottom:4px;
}
.report-cell b{font-size:22px;font-variant-numeric:tabular-nums;color:var(--accent);}
.report-cell b.gold{color:var(--accent2);}

.comment-box{
    padding:18px 20px;border-radius:15px;
    background:linear-gradient(135deg,rgba(95,242,208,.13),rgba(255,215,110,.09));
    border:1px solid rgba(95,242,208,.28);
    font-size:13.5px;line-height:1.8;margin:12px 0 22px;
    display:flex;gap:14px;align-items:flex-start;
}
.comment-box .icon{color:var(--accent2);font-size:18px;flex:0 0 auto;margin-top:2px;}

.heat-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center;}
.heat-chip{
    padding:7px 13px;border-radius:20px;
    font-size:12px;font-weight:700;
    background:rgba(255,176,102,.16);
    border:1px solid rgba(255,176,102,.42);
    color:var(--warn);
    display:inline-flex;align-items:center;gap:7px;
}
.heat-chip .icon{font-size:11px;}

.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.btn-row .btn{flex:1 1 140px;height:48px;justify-content:center;font-size:14px;}
.btn-row .btn .icon{font-size:14px;}

/* ============================================================
   响应式：按重要度逐级隐藏
   ============================================================ */
/* 1100px：隐藏品牌副标题、按钮文字 */
@media (max-width:1100px){
    .brand-sub{display:none;}
    .btn span.lbl{display:none;}
    .btn{padding:0 10px;min-width:36px;}
}
/* 900px：隐藏品牌名、用时指标 */
@media (max-width:900px){
    .topbar{gap:10px;padding:0 12px;}
    .brand-name{display:none;}
    .stat{min-width:64px;padding:0 9px;gap:6px;}
    .stat-body b{font-size:14px;}
    .stat[data-key="time"]{display:none;}
}
/* 720px：隐藏进度指标、高度压缩 */
@media (max-width:720px){
    .topbar{height:54px;gap:8px;padding:0 10px;}
    .stat{height:36px;min-width:54px;padding:0 7px;gap:4px;}
    .stat-icon{display:none;}
    .stat-body label{font-size:8.5px;}
    .stat-body b{font-size:12.5px;}
    .stat[data-key="progress"]{display:none;}
    .btn{height:32px;}
    #mobile-tip{display:block;}
}
/* 560px：隐藏正确率，仅保留 WPM 与关卡 */
@media (max-width:560px){
    .stats{gap:6px;}
    .stat[data-key="acc"]{display:none;}
    .stat{min-width:48px;}
    .actions{gap:6px;}
    .btn.icon-only{min-width:32px;padding:0 8px;}
}
/* 420px：隐藏关卡名，仅保留 WPM */
@media (max-width:420px){
    .stat[data-key="level"]{display:none;}
}

/* ============================================================
   弹层按钮自适应
   ============================================================ */
@media (max-width:540px){
    .modal-card{padding:22px;}
    .opt{flex:1 1 100%;}
    .btn-row .btn{flex:1 1 100%;}
}