:root{
    --bg-0:#070c16; --bg-1:#0e1626; --bg-2:#16243d;
    --line:rgba(120,170,255,.16);
    --ink:#e8f0ff; --ink-dim:#8fa3c4;
    --gold:#ffd45e; --orange:#ff7a3c; --green:#4fd18b; --red:#ff5f5f; --cyan:#5ec8ff;
}
*{ box-sizing:border-box; }
html,body{
    height:100%; margin:0; padding:0;
    background:var(--bg-0); color:var(--ink);
    font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    overflow:hidden; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button{ font-family:inherit; }
a{ color:var(--cyan); }
a:hover{ color:#8fdcff; }

/* ============================================================
 *  整体纵向布局：头部(一行指标) + 装备栏 + 画布舞台
 * ============================================================ */
.g-app{ display:flex; flex-direction:column; height:100vh; height:100dvh; width:100%; }

/* ---------- 头部一行布局 ---------- */
.g-head{
    position:relative; z-index:20; flex:0 0 auto;
    display:flex; align-items:center; gap:12px;
    padding:7px 12px; min-height:54px;
    background:linear-gradient(180deg,#101c31,#0a1220);
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 20px rgba(0,0,0,.55);
}
.g-head-left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; }
.g-back{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:9px; text-decoration:none;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    color:var(--ink); font-size:14px; transition:.18s;
}
.g-back:hover{ background:rgba(120,170,255,.22); color:#fff; transform:translateX(-2px); }
.g-title{
    margin:0; font-size:15px; font-weight:800; letter-spacing:.5px; white-space:nowrap;
    background:linear-gradient(90deg,#ffd45e,#ff9a3c); -webkit-background-clip:text;
    background-clip:text; color:transparent;
}
.g-sub{ font-size:11px; color:var(--ink-dim); white-space:nowrap; }

/* 实时打字指标 */
.g-stats{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; overflow:hidden; }
.g-stat{
    display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
    padding:4px 9px; border-radius:8px; font-size:12.5px; line-height:1.25; white-space:nowrap;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
    transition:.2s;
}
.g-stat .glyphicon{ font-size:12px; opacity:.9; }
.g-stat b{ font-weight:800; font-variant-numeric:tabular-nums; font-size:13.5px; }
.g-stat small{ color:var(--ink-dim); font-size:10.5px; }
.g-stat.is-score b{ color:var(--gold); }
.g-stat.is-score .glyphicon{ color:var(--gold); }
.g-stat.is-hit .glyphicon{ color:var(--green); }
.g-stat.is-combo .glyphicon{ color:var(--orange); }
.g-stat.is-acc .glyphicon{ color:var(--cyan); }
.g-stat.is-wpm .glyphicon{ color:#c39bff; }
.g-stat.pulse{ animation:statPulse .38s ease; }
@keyframes statPulse{ 0%{transform:scale(1)} 45%{transform:scale(1.13); background:rgba(255,212,94,.22)} 100%{transform:scale(1)} }

/* 工具按钮 */
.g-tools{ display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.g-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    height:32px; min-width:32px; padding:0 9px; border-radius:9px; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    color:var(--ink); font-size:13px; transition:.16s; outline:none;
}
.g-btn:hover{ background:rgba(120,170,255,.24); border-color:rgba(120,170,255,.4); transform:translateY(-1px); }
.g-btn:active{ transform:translateY(0) scale(.96); }
.g-btn.off{ opacity:.42; }
.g-btn .glyphicon{ font-size:14px; }

/* 进度条 */
.g-progress{
    position:absolute; left:0; bottom:0; height:3px; width:100%;
    background:rgba(255,255,255,.05); overflow:hidden;
}
.g-progress i{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg,#ff9a3c,#ffd45e,#4fd18b);
    box-shadow:0 0 12px rgba(255,180,60,.8);
    transition:width .35s cubic-bezier(.2,.9,.3,1);
}

/* ---------- 装备栏（独立一行，紧凑规整） ---------- */
.g-gearbar{
    flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:6px 14px; min-height:40px;
    background:linear-gradient(180deg,#0c1524,#0a111c);
    border-bottom:1px solid var(--line);
}
.g-gear{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 11px 4px 8px; border-radius:9px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
    font-size:12.5px; line-height:1.2; white-space:nowrap;
    transition:.2s; cursor:pointer; user-select:none;
}
.g-gear kbd{
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; border-radius:5px; font-size:10.5px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
    color:#fff; font-family:"Roboto Mono",ui-monospace,monospace; padding:0;
}
.g-gear .gi{ font-size:14px; line-height:1; }
.g-gear .gn{ color:var(--ink-dim); font-weight:700; }
.g-gear .gc{ color:var(--ink-dim); font-weight:800; font-variant-numeric:tabular-nums; }
.g-gear.has{
    background:linear-gradient(180deg,rgba(255,212,94,.16),rgba(255,212,94,.05));
    border-color:rgba(255,212,94,.38);
    box-shadow:0 0 0 1px rgba(255,212,94,.1) inset;
}
.g-gear.has kbd{ background:rgba(255,212,94,.9); border-color:rgba(255,212,94,.9); color:#3a2408; }
.g-gear.has .gi{ color:var(--gold); }
.g-gear.has .gn{ color:#fff; }
.g-gear.has .gc{ color:var(--gold); }
.g-gear.has:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,180,60,.28); }
.g-gear:not(.has){ opacity:.55; cursor:not-allowed; }
.g-gear.active{
    background:linear-gradient(180deg,rgba(94,200,255,.22),rgba(94,200,255,.06));
    border-color:rgba(94,200,255,.55);
}
.g-gear.active .gi, .g-gear.active .gc{ color:var(--cyan); }
.g-gear-status{
    flex:1 1 auto; min-width:80px; text-align:right;
    font-size:12px; font-weight:800; color:var(--gold);
    letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 舞台 ---------- */
.g-stage{
    position:relative; flex:1 1 auto; min-height:0;
    display:flex; align-items:center; justify-content:center; padding:8px;
    background:radial-gradient(ellipse at 50% 0%, #14213a 0%, #070c16 72%);
}
#gameCanvas{
    display:block; border-radius:12px; touch-action:none;
    box-shadow:0 12px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(120,170,255,.12);
}

/* ============================================================
 *  弹出层（全部水平+垂直居中）
 * ============================================================ */
.modal{ text-align:center; padding:0 !important; }
.modal::before{
    content:""; display:inline-block; height:100%; vertical-align:middle; margin-right:-.05em;
}
.modal-dialog{
    display:inline-block; text-align:left; vertical-align:middle;
    margin:16px auto !important; width:calc(100% - 32px); max-width:450px;
}
.modal-content{
    background:linear-gradient(180deg,#17253f,#0d1626);
    border:1px solid rgba(120,170,255,.22); border-radius:16px;
    box-shadow:0 30px 90px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
    color:var(--ink); overflow:hidden;
}
.modal-header{
    border-bottom:1px solid rgba(120,170,255,.14); padding:16px 20px 12px; text-align:center; position:relative;
}
.modal-title{ font-size:24px; color: #fac24b; font-weight:800; margin:0; letter-spacing:.6px; }
.modal-header .g-close{
    position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:9px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
    color:var(--ink-dim); cursor:pointer; transition:.16s; line-height:1;
}
.modal-header .g-close:hover{ background:rgba(255,95,95,.28); color:#fff; }
.modal-body{ padding:18px 20px; max-height:calc(100vh - 220px); overflow-y:auto; }
.modal-footer{ border-top:1px solid rgba(120,170,255,.14); padding:14px 20px; text-align:center; }
.modal-backdrop.in{ opacity:.72; }

/* 按钮 */
.btn-g{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 22px; border-radius:11px; font-size:14px; font-weight:800; cursor:pointer;
    border:1px solid transparent; transition:.18s; text-decoration:none !important; outline:none;
    margin:4px;
}
.btn-gold{
    background:linear-gradient(180deg,#ffd45e,#f2a52c); color:#3a2408;
    box-shadow:0 6px 22px rgba(255,180,60,.42), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,180,60,.6); color:#3a2408; }
.btn-ghost{
    background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.14);
}
.btn-ghost:hover{ background:rgba(120,170,255,.24); color:#fff; transform:translateY(-2px); }
.btn-g:active{ transform:translateY(0) scale(.97); }

/* 设置项 */
.set-row{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px dashed rgba(120,170,255,.12); }
.set-row:last-child{ border-bottom:0; }
.set-label{ flex:0 0 74px; font-size:13px; color:var(--ink-dim); font-weight:700; padding-top:5px; }
.set-opts{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; }
.opt{
    padding:7px 14px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:var(--ink-dim); transition:.16s; user-select:none;
}
.opt:hover{ background:rgba(120,170,255,.18); color:#fff; }
.opt.on{
    background:linear-gradient(180deg,rgba(255,212,94,.9),rgba(242,165,44,.9));
    color:#3a2408; border-color:rgba(255,212,94,.9);
    box-shadow:0 4px 16px rgba(255,180,60,.4);
}

/* 开场介绍 */
.start-intro{
    text-align:center; font-size:14px; line-height:1.8; color:#cfdcf2;
    margin:0 0 16px; padding:12px 16px; border-radius:11px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.start-intro b{ color:var(--gold); }
.start-settings{
    border-top:1px dashed rgba(120,170,255,.12);
    padding-top:6px;
}

/* 规则文本 */
.rule-list{ list-style:none; padding:0; margin:0; }
.rule-list li{
    position:relative; padding:8px 0 8px 28px; font-size:13.5px; line-height:1.65; color:#cfdcf2;
    border-bottom:1px dashed rgba(120,170,255,.1);
}
.rule-list li:last-child{ border-bottom:0; }
.rule-list li .glyphicon{
    position:absolute; left:0; top:9px; font-size:13px; color:var(--gold);
}
.rule-list li b{ color:#fff; }
.kbd{
    display:inline-block; padding:1px 7px; margin:0 2px; border-radius:5px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
    font-family:"Roboto Mono",ui-monospace,Menlo,monospace; font-size:12px; color:#fff;
}

/* 结算面板 */
.result-head{ text-align:center; padding:6px 0 12px; }
.result-badge{
    display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px;
    border-radius:50%; margin-bottom:10px; font-size:34px;
    animation:badgePop .6s cubic-bezier(.2,1.6,.4,1) both;
}
.result-badge.win{ background:radial-gradient(circle at 35% 30%,#ffe58a,#f2a52c); color:#5a3a00; box-shadow:0 0 44px rgba(255,200,80,.75); }
.result-badge.lose{ background:radial-gradient(circle at 35% 30%,#7c8bab,#3a4560); color:#dfe8f7; box-shadow:0 0 34px rgba(90,120,180,.5); }
@keyframes badgePop{ 0%{transform:scale(.2) rotate(-40deg); opacity:0} 100%{transform:scale(1) rotate(0); opacity:1} }
.result-title{ font-size:23px; font-weight:900; letter-spacing:1px; margin:0 0 6px; text-align:center; }
.result-title.win{ color:var(--gold); text-shadow:0 0 26px rgba(255,200,80,.55); }
.result-title.lose{ color:#a9bcd8; }
.result-score{
    font-size:44px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; text-align:center;
    background:linear-gradient(180deg,#fff,#ffd45e); -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:scoreIn .55s .12s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes scoreIn{ 0%{transform:translateY(18px) scale(.85); opacity:0} 100%{transform:none; opacity:1} }
.result-score small{ font-size:14px; color:var(--ink-dim); -webkit-text-fill-color:var(--ink-dim); font-weight:700; }

.result-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:16px 0 4px;
}
.result-item{
    display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
    animation:itemIn .45s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes itemIn{ 0%{transform:translateY(12px); opacity:0} 100%{transform:none; opacity:1} }
.result-item .glyphicon{ font-size:16px; color:var(--gold); flex:0 0 auto; }
.result-item .k{ font-size:12px; color:var(--ink-dim); flex:1 1 auto; }
.result-item .v{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }

/* 音效提示 Toast（居中） */
.g-toast-wrap{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:2050;
}
.g-toast{
    padding:12px 26px; border-radius:13px; font-size:15px; font-weight:800; letter-spacing:.5px;
    background:linear-gradient(180deg,rgba(30,44,72,.97),rgba(14,22,38,.97));
    border:1px solid rgba(120,170,255,.35); color:#fff;
    box-shadow:0 16px 50px rgba(0,0,0,.75);
    opacity:0; transform:translateY(14px) scale(.94); transition:.28s cubic-bezier(.2,1.2,.4,1);
}
.g-toast.show{ opacity:1; transform:none; }
.g-toast .glyphicon{ margin-right:8px; color:var(--gold); }

/* 撒花层：位于所有弹出层之上 */
#fxCanvas{
    position:fixed; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:2060;
}

/* 响应式 */
@media (max-width:1180px){ .g-stat.is-wpm{ display:none; } }
@media (max-width:1000px){ .g-stat.is-acc{ display:none; } .g-sub{ display:none; } }
@media (max-width:840px){
    .g-stat.is-combo{ display:none; }
    .g-title{ font-size:13.5px; }
    .g-gearbar{ padding:5px 8px; gap:6px; }
    .g-gear{ padding:3px 8px 3px 6px; font-size:11.5px; }
    .g-gear .gn{ display:none; }
}
@media (max-width:640px){
    .g-stat{ padding:3px 7px; font-size:11.5px; }
    .g-stat b{ font-size:12px; }
    .g-head{ gap:8px; padding:6px 8px; min-height:48px; }
    .result-grid{ grid-template-columns:1fr; }
    .result-score{ font-size:36px; }
}
@media (max-height:620px){
    .g-gearbar{ display:none; }
}