*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:#0a0c11;
    font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    color:#e8e2d4;user-select:none;-webkit-user-select:none}

/* 顶部工具条 */
.topbar{position:relative;z-index:30;display:flex;align-items:center;gap:10px;
    height:56px;padding:0 12px;background:linear-gradient(180deg,#1c1f28 0%,#12141b 100%);
    border-bottom:1px solid rgba(214,183,120,.22);box-shadow:0 2px 14px rgba(0,0,0,.55);
    flex-wrap:nowrap;overflow:hidden}
.tb-group{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tb-group.center{flex:1 1 auto;justify-content:center;min-width:0;overflow:hidden}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:8px;border:1px solid rgba(214,183,120,.28);background:rgba(255,255,255,.045);
    color:#d6b778;font-size:15px;cursor:pointer;transition:all .16s ease;flex:0 0 auto}
.tb-btn:hover{background:rgba(214,183,120,.2);color:#ffe9b8;transform:translateY(-1px)}
.tb-btn:active{transform:translateY(0) scale(.94)}
.tb-btn.off{color:#6d6a60;border-color:rgba(255,255,255,.08)}
.tb-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.tb-title b{font-size:14px;letter-spacing:.5px;color:#f3d9a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title span{font-size:11px;color:rgba(232,226,212,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
    white-space:nowrap;transition:transform .16s ease}
.metric .glyphicon{font-size:12px;opacity:.85}
.metric em{font-style:normal;font-weight:700;font-size:14px;font-family:"SF Mono",Consolas,Menlo,monospace;
    color:#f4ecd8;letter-spacing:.3px}
.metric label{margin:0;font-size:10px;font-weight:400;color:rgba(232,226,212,.5);cursor:default}
.metric.pop{transform:scale(1.14)}
.m-score .glyphicon{color:#ffd35a}
.m-combo .glyphicon{color:#ff8a5c}
.m-acc .glyphicon{color:#7fe07a}
.m-wpm .glyphicon{color:#8ec5ff}
.m-hp .glyphicon{color:#ff6b5a}
.m-hp.warn em{color:#ff6b5a;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:1180px){.metric label{display:none}.metric{padding:4px 7px}.tb-title span{display:none}}
@media(max-width:900px){.tb-title{display:none}.m-wpm{display:none}}
@media(max-width:640px){.m-combo,.m-acc{display:none}.topbar{height:50px;padding:0 8px;gap:6px}}

#stageWrap{position:absolute;left:0;right:0;top:56px;bottom:0;display:flex;align-items:center;
    justify-content:center;background:radial-gradient(ellipse at 50% 40%,#141821 0%,#080a0e 75%);
    overflow:hidden}
@media(max-width:640px){#stageWrap{top:50px}}
#gameCanvas{display:block;border-radius:6px;
    box-shadow:0 10px 50px rgba(0,0,0,.75),0 0 0 1px rgba(214,183,120,.16);
    cursor:crosshair;touch-action:manipulation}
#stageWrap::after{content:'';position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 160px 40px rgba(0,0,0,.55)}

/* 模态框 */
.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:12px auto;
    max-width:600px;width:calc(100% - 24px)}
.modal-backdrop.in{opacity:.78}
.gm-panel{border-radius:14px;border:1px solid rgba(214,183,120,.3);
    background:linear-gradient(180deg,#1c2029 0%,#11141b 100%);
    box-shadow:0 22px 70px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07);
    color:#e8e2d4;overflow:hidden}
.gm-head{padding:16px 22px 12px;border-bottom:1px solid rgba(214,183,120,.18);
    display:flex;align-items:center;gap:10px}
.gm-head .glyphicon{font-size:20px;color:#d6b778}
.gm-head h4{margin:0;font-size:17px;font-weight:700;color:#f3d9a4;letter-spacing:1px}
.gm-body{padding:18px 22px;max-height:64vh;overflow-y:auto;font-size:13.5px;
    line-height:1.85;color:rgba(232,226,212,.9)}
.gm-body h5{font-size:13px;color:#d6b778;font-weight:700;margin:14px 0 6px;letter-spacing:.5px}
.gm-body h5:first-child{margin-top:0}
.gm-body ul{padding-left:18px;margin:0}
.gm-body li{margin:3px 0}
.gm-body .kbd{display:inline-block;min-width:20px;padding:1px 6px;margin:0 1px;
    border-radius:4px;background:#2a2f3b;border:1px solid #3d4350;border-bottom-width:2px;
    font-family:Consolas,monospace;font-size:11.5px;color:#ffd88a;text-align:center}
.gm-foot{padding:14px 22px 18px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
    border-top:1px solid rgba(214,183,120,.14);background:rgba(0,0,0,.18)}
.btn-gm{border-radius:8px;padding:9px 20px;font-size:13.5px;font-weight:600;
    border:1px solid rgba(214,183,120,.42);background:rgba(214,183,120,.1);color:#f3d9a4;
    transition:all .16s ease}
.btn-gm:hover,.btn-gm:focus{background:rgba(214,183,120,.28);color:#fff6e0;
    border-color:#d6b778;outline:none}
.btn-gm.primary{background:linear-gradient(180deg,#d6b778 0%,#b8913f 100%);color:#20180a;
    border-color:#e6cd94;box-shadow:0 3px 12px rgba(214,183,120,.3)}
.btn-gm.primary:hover{background:linear-gradient(180deg,#e8cd94 0%,#d0a851 100%);color:#141008}
.btn-gm.ghost{background:transparent;border-color:rgba(255,255,255,.18);
    color:rgba(232,226,212,.75)}
.btn-gm.ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* 选项 */
.opt-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.opt{flex:1 1 90px;min-width:84px;padding:10px 8px;border-radius:10px;text-align:center;
    border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;
    transition:all .18s ease;font-size:13px;line-height:1.4;position:relative}
.opt:hover{background:rgba(214,183,120,.14);border-color:rgba(214,183,120,.45);transform:translateY(-1px)}
.opt.active{background:linear-gradient(180deg,rgba(214,183,120,.28),rgba(214,183,120,.12));
    border-color:#d6b778;color:#ffe9b8;
    box-shadow:0 0 0 1px rgba(214,183,120,.35) inset,0 4px 12px rgba(0,0,0,.3)}
.opt .emoji{font-size:20px;display:block;margin-bottom:2px}
.opt small{display:block;font-size:10.5px;opacity:.6;margin-top:2px}

/* 统计卡片 */
.stat-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(214,183,120,.16);border-radius:10px;padding:12px 8px 10px;
    text-align:center;margin-bottom:10px;transition:all .2s ease}
.stat-card:hover{background:rgba(214,183,120,.1);border-color:rgba(214,183,120,.4);
    transform:translateY(-2px)}
.stat-card .glyphicon{font-size:20px;margin-bottom:4px;display:block}
.stat-card .stat-value{font-size:19px;font-weight:800;
    font-family:"SF Mono",Consolas,monospace;letter-spacing:.5px}
.stat-card .stat-label{font-size:11px;color:rgba(232,226,212,.55);margin-top:2px}
.stars{font-size:30px;letter-spacing:8px;color:#ffd35a;text-align:center;margin:6px 0 10px;
    text-shadow:0 0 22px rgba(255,211,90,.55)}

/* 设置项 */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.06)}
.set-row:last-child{border-bottom:none}
.set-row>span{font-size:13px}
.set-row>span small{display:block;font-size:11px;color:rgba(232,226,212,.45);margin-top:1px}
.switch{position:relative;width:48px;height:26px;border-radius:14px;background:#2a2f3b;
    border:1px solid #3d4350;cursor:pointer;transition:all .2s;flex:0 0 auto}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
    border-radius:50%;background:#7a8298;transition:all .2s}
.switch.on{background:rgba(127,224,122,.25);border-color:#7fe07a}
.switch.on::after{left:24px;background:#7fe07a}

/* 屏幕键盘 */
#softKb{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(16,18,24,.97);padding:6px 4px 10px;border-top:1px solid rgba(214,183,120,.2)}
#softKb .krow{display:flex;justify-content:center;gap:3px;margin:3px 0}
#softKb .key{flex:1 1 0;max-width:44px;height:38px;display:flex;align-items:center;
    justify-content:center;border-radius:6px;background:#242a36;border:1px solid #333b4a;
    border-bottom-width:2px;font-size:14px;color:#d8dde8;font-weight:600}
#softKb .key:active{background:#3a4356;transform:translateY(1px)}
#softKb .key.wide{max-width:70px;font-size:12px}