:root{
    --ink:#f8effb;
    --ink-dim:rgba(248,239,251,.68);
    --rose:#ff9bc4;
    --gold:#ffd166;
    --sky:#8ecae6;
    --mint:#9fe08a;
    --plum:#1a1030;
    --line:rgba(255,255,255,.13);
    --bar-h:58px;
}
*{ -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
    margin:0; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 0%, #3a2158 0%, #22143e 45%, #0c0718 100%);
    color:var(--ink);
    font-family:"Quicksand","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column;
    height:100vh; height:100dvh;
}

/* ---------- 顶部工具条：单行展示全部实时指标 ---------- */
.game-bar{
    flex:0 0 auto; height:var(--bar-h);
    display:flex; align-items:center; gap:12px;
    padding:0 14px;
    background:linear-gradient(180deg, rgba(58,33,88,.96), rgba(26,16,48,.94));
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 22px rgba(0,0,0,.45);
    position:relative; z-index:30;
}
.bar-left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.icon-btn{
    width:34px; height:34px; line-height:34px; text-align:center;
    border-radius:10px; border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    color:var(--ink); font-size:14px; padding:0;
    transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s;
    cursor:pointer; outline:none; text-decoration:none !important;
}
.icon-btn:hover{ background:rgba(255,155,196,.24); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,155,196,.28); }
.icon-btn:active{ transform:translateY(0) scale(.95); }
.icon-btn.is-off{ opacity:.42; }
.icon-btn:focus-visible{ box-shadow:0 0 0 3px rgba(255,209,102,.55); }
.game-title{
    font-size:15px; font-weight:800; letter-spacing:.5px; margin:0; white-space:nowrap;
    background:linear-gradient(90deg,#ffd166,#ff9bc4);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.game-title small{ font-size:11px; font-weight:600; color:var(--ink-dim); margin-left:6px; -webkit-text-fill-color:var(--ink-dim); }

/* 实时指标 */
.bar-metrics{
    flex:1 1 auto; display:flex; align-items:center; justify-content:center;
    gap:8px; min-width:0; overflow:hidden;
}
.metric{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:9px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.07);
    font-size:12px; color:var(--ink-dim); white-space:nowrap;
    transition:background .2s, color .2s, box-shadow .2s;
}
.metric .glyphicon{ font-size:12px; }
.metric b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; font-size:13px; }
.metric.hit{ background:rgba(255,209,102,.24); color:#fff; box-shadow:0 0 16px rgba(255,209,102,.38); }
.metric.hit b{ color:var(--gold); }
.m-gauge .glyphicon{ color:var(--rose); }
.m-combo .glyphicon{ color:#ff7a3a; }
.m-acc  .glyphicon{ color:var(--mint); }
.m-wpm  .glyphicon{ color:var(--sky); }
.m-score .glyphicon{ color:var(--gold); }

/* 进度细条 */
.bar-progress{
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:rgba(255,255,255,.07); overflow:hidden;
}
.bar-progress i{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg,#ff9bc4,#ffd166,#8ecae6);
    transition:width .12s linear;
    box-shadow:0 0 10px rgba(255,209,102,.8);
}
.bar-tools{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

/* ---------- 舞台 ---------- */
.stage-wrap{
    flex:1 1 auto; min-height:0; position:relative;
    display:flex; align-items:center; justify-content:center;
    padding:10px;
}
#gameCanvas{
    display:block; border-radius:16px; cursor:pointer;
    box-shadow:0 20px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,0,0,.4);
    background:#0c0718;
    touch-action:manipulation;
}

/* ---------- 弹窗：水平 + 垂直居中 ---------- */
.modal{ text-align:center; padding:0 !important; }
.modal::before{
    content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-4px;
}
.modal-dialog{ display:inline-block; text-align:left; vertical-align:middle; margin:12px auto; max-width:580px; width:calc(100% - 28px); }
.modal-backdrop.in{ opacity:.72; }
.modal-backdrop{ background:#0c0718; }

.game-modal{
    border-radius:18px; border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(170deg,#33204f 0%, #201438 60%, #160d26 100%);
    box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
    color:var(--ink); overflow:hidden;
    animation:modalPop .28s cubic-bezier(.2,1.2,.4,1);
}
@keyframes modalPop{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }
.game-modal .modal-header{ border:0; padding:18px 22px 6px; text-align:center; }
.game-modal .modal-title{
    font-size:20px; font-weight:900; letter-spacing:.6px; margin:0;
    background:linear-gradient(90deg,#ffd166,#ff9bc4);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.game-modal .modal-title .glyphicon{ -webkit-text-fill-color:var(--rose); background:none; margin-right:6px; }
.game-modal .modal-body{ padding:10px 22px 6px; }
.game-modal .modal-footer{ border:0; padding:12px 22px 20px; text-align:center; }
.game-modal .modal-footer .btn{ margin:4px 5px; }

/* 设置项 */
.opt-group{ margin-bottom:14px; text-align:left; }
.opt-label{
    font-size:12px; font-weight:800; color:var(--ink-dim);
    letter-spacing:.6px; margin-bottom:7px; display:flex; align-items:center; gap:6px;
}
.opt-label .glyphicon{ color:var(--rose); }
.opt-list{ display:flex; flex-wrap:wrap; gap:7px; }
.opt-btn{
    flex:1 1 118px; min-width:104px;
    border-radius:11px; padding:8px 10px; cursor:pointer;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:var(--ink); text-align:left; font-size:13px; line-height:1.25;
    transition:all .18s ease; outline:none;
}
.opt-btn b{ display:block; font-weight:800; font-size:13px; }
.opt-btn small{ display:block; font-size:10.5px; color:var(--ink-dim); margin-top:2px; }
.opt-btn:hover{ background:rgba(255,155,196,.16); border-color:rgba(255,155,196,.5); transform:translateY(-1px); }
.opt-btn[aria-pressed="true"]{
    background:linear-gradient(140deg, rgba(255,155,196,.32), rgba(255,209,102,.22));
    border-color:rgba(255,209,102,.75);
    box-shadow:0 0 0 1px rgba(255,209,102,.35), 0 6px 18px rgba(255,155,196,.28);
}
.opt-btn[disabled]{ opacity:.35; cursor:not-allowed; }

/* 按钮 */
.btn{ border-radius:11px; font-weight:800; letter-spacing:.4px; transition:all .18s ease; }
.btn:focus{ outline:none; }
.btn .glyphicon{ margin-right:5px; font-size:12px; vertical-align:1px; }
.btn-gold{
    background:linear-gradient(140deg,#ffd166,#ff9bc4); border:0; color:#2a1030;
    box-shadow:0 8px 22px rgba(255,155,196,.36);
}
.btn-gold:hover,.btn-gold:focus{ color:#2a1030; filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,155,196,.5); }
.btn-ghost{
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:var(--ink);
}
.btn-ghost:hover,.btn-ghost:focus{ background:rgba(255,255,255,.14); color:#fff; transform:translateY(-1px); }
.btn-lg{ padding:10px 30px; font-size:15px; }

/* 快捷键提示 */
.kbd{
    display:inline-block; min-width:20px; padding:1px 6px; margin:0 2px;
    border-radius:6px; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2); border-bottom-width:2px;
    font-family:ui-monospace,Consolas,monospace; font-size:11px; font-weight:700; color:#fff;
}
.hint-line{ font-size:12px; color:var(--ink-dim); margin-top:10px; text-align:center; }

/* 规则文本 */
.rule-list{ list-style:none; padding:0; margin:0; text-align:left; }
.rule-list li{
    position:relative; padding:7px 0 7px 26px; font-size:13px; line-height:1.62; color:rgba(248,239,251,.9);
    border-bottom:1px dashed rgba(255,255,255,.08);
}
.rule-list li:last-child{ border-bottom:0; }
.rule-list li .glyphicon{
    position:absolute; left:2px; top:10px; color:var(--gold); font-size:13px;
}
.rule-list li b{ color:#fff; }

/* 结算面板 */
.end-head{ text-align:center; padding:6px 0 12px; }
.end-emoji{ font-size:44px; line-height:1; display:block; margin-bottom:6px; animation:endPulse 1.4s ease-in-out infinite; }
@keyframes endPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.12) } }
.end-title{
    font-size:24px; font-weight:900; margin:0 0 4px;
    background:linear-gradient(90deg,#ffd166,#ff9bc4);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.end-score{
    font-size:44px; font-weight:900; line-height:1.05; letter-spacing:1px;
    color:var(--gold); font-variant-numeric:tabular-nums;
    text-shadow:0 0 26px rgba(255,209,102,.6), 0 4px 0 rgba(0,0,0,.28);
}
.end-score small{ font-size:13px; color:var(--ink-dim); font-weight:700; margin-left:6px; letter-spacing:0; }
.end-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:8px; margin-top:14px;
}
.end-item{
    display:flex; align-items:center; gap:9px;
    padding:9px 12px; border-radius:11px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08);
}
.end-item .glyphicon{ font-size:15px; color:var(--rose); flex:0 0 auto; }
.end-item .lbl{ font-size:11.5px; color:var(--ink-dim); flex:1 1 auto; }
.end-item .val{ font-size:13px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }

/* 胜利 / 失败 动效 */
.win-fx{ animation:winGlow 1.6s ease-in-out infinite; }
@keyframes winGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(255,209,102,.35), 0 0 40px rgba(255,209,102,.28) } 50%{ box-shadow:0 0 0 1px rgba(255,209,102,.8), 0 0 70px rgba(255,209,102,.55) } }
.lose-fx{ animation:loseShake .5s ease-in-out; }
@keyframes loseShake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-8px) } 40%{ transform:translateX(8px) } 60%{ transform:translateX(-5px) } 80%{ transform:translateX(5px) } }

/* 居中的 Toast */
#toastBox{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:20000;
}
.toast-item{
    pointer-events:none; max-width:78vw;
    padding:12px 24px; border-radius:14px;
    background:rgba(34,20,56,.96); border:1px solid rgba(255,209,102,.5);
    color:#fff; font-size:14px; font-weight:700; letter-spacing:.4px;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 30px rgba(255,209,102,.25);
    animation:toastIn .26s cubic-bezier(.2,1.3,.4,1);
    display:inline-flex; align-items:center; gap:8px;
}
.toast-item .glyphicon{ color:var(--gold); font-size:15px; }
@keyframes toastIn{ from{ transform:translateY(14px) scale(.94); opacity:0 } to{ transform:none; opacity:1 } }
.toast-item.out{ animation:toastOut .3s ease forwards; }
@keyframes toastOut{ to{ transform:translateY(-14px) scale(.94); opacity:0 } }

/* 响应式 */
@media (max-width: 900px){
    .metric{ padding:3px 7px; font-size:11px; }
    .metric b{ font-size:12px; }
    .game-title small{ display:none; }
}
@media (max-width: 720px){
    :root{ --bar-h:52px; }
    .game-bar{ gap:6px; padding:0 8px; }
    .game-title{ font-size:13px; }
    .icon-btn{ width:30px; height:30px; line-height:30px; font-size:12px; }
    .metric{ padding:2px 6px; gap:3px; font-size:10px; }
    .metric .glyphicon{ display:none; }
    .metric b{ font-size:11.5px; }
}
@media (max-width: 560px){
    .bar-metrics .metric:nth-child(n+4){ display:none; }
}