/* ============================================================
   设计令牌（统一颜色变量，便于维护与主题扩展）
   ============================================================ */
:root{
    --bg-deep:#080b11;
    --panel-1:#1b2436;
    --panel-2:#111826;
    --gold:#f5c518;
    --gold-lt:#ffd24a;
    --gold-dk:#a87600;
    --blue:#60c8ff;
    --blue-dk:#1a5d99;
    --green:#4ade80;
    --red:#ff5d5d;
    --orange:#ff8a3d;
    --line:rgba(255,255,255,.09);
    --txt:#e8eef7;
    --txt-dim:#8fa3bf;
}
*{box-sizing:border-box;}
html,body{
    height:100%;margin:0;padding:0;
    background:var(--bg-deep);
    color:var(--txt);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
}
body{user-select:none;-webkit-user-select:none;}

/* 屏幕阅读器专用（SEO + 无障碍） */
.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;
}

/* ============================================================
   整体布局
   ============================================================ */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* ---------- 头部 ---------- */
.gh{
    flex:0 0 auto;display:flex;align-items:center;gap:10px;
    padding:6px 12px;
    background:linear-gradient(180deg,#1e2940 0%,#131a28 100%);
    border-bottom:2px solid rgba(245,197,24,.22);
    box-shadow:0 4px 18px rgba(0,0,0,.45);
    z-index:30;min-height:56px;
}
.gh-brand{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.gh-logo{
    font-size:22px;line-height:1;
    filter:drop-shadow(0 0 6px rgba(245,197,24,.55));
    animation:pickSwing 2.6s ease-in-out infinite;
}
@keyframes pickSwing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.gh-title{display:flex;flex-direction:column;line-height:1.05;}
.gh-title b{font-size:16px;letter-spacing:2px;color:var(--gold-lt);text-shadow:0 0 12px rgba(245,197,24,.35);}
.gh-title small{font-size:10px;color:var(--txt-dim);letter-spacing:1px;}

.gh-stats{
    flex:1 1 auto;display:flex;gap:6px;align-items:center;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 0;
}
.gh-stats::-webkit-scrollbar{display:none;}
.stat{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:62px;padding:3px 9px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--line);border-radius:8px;
    transition:border-color .2s,background .2s;
}
.stat.hot{border-color:rgba(245,197,24,.55);background:rgba(245,197,24,.1);}
.stat.danger{border-color:rgba(255,90,90,.6);background:rgba(255,90,90,.12);animation:pulseDanger 1s infinite;}
@keyframes pulseDanger{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.35)}50%{box-shadow:0 0 0 6px rgba(255,90,90,0)}}
.stat-k{font-size:10px;color:var(--txt-dim);letter-spacing:.5px;white-space:nowrap;}
.stat-v{font-size:15px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25;}
.stat-v.gold{color:var(--gold-lt);text-shadow:0 0 10px rgba(245,197,24,.5);}
.stat-v.warn{color:#ff7a59;}
.stat-v.combo{color:#7ee787;}

.gh-props{
    flex:0 0 auto;display:flex;gap:5px;align-items:center;
    padding:3px 8px;border-radius:9px;
    background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.prop-chip{
    display:flex;align-items:center;gap:3px;
    font-size:12px;font-weight:700;color:#cbd8ea;
    padding:2px 6px;border-radius:6px;
    background:rgba(255,255,255,.05);
    transition:all .2s;white-space:nowrap;cursor:help;
}
.prop-chip.active{color:#fff;box-shadow:0 0 12px rgba(245,197,24,.5);}
.prop-chip#chipBomb.active{background:rgba(255,138,61,.22);box-shadow:0 0 12px rgba(255,138,61,.5);}
.prop-chip#chipPower.active{background:rgba(96,200,255,.22);box-shadow:0 0 12px rgba(96,200,255,.6);}
.prop-chip#chipLuck.active{background:rgba(126,231,135,.22);box-shadow:0 0 12px rgba(126,231,135,.6);}
.prop-chip .pc-num{color:var(--gold-lt);font-variant-numeric:tabular-nums;}

.gh-actions{flex:0 0 auto;display:flex;gap:6px;}
.gh-actions .btn{
    border-radius:8px;font-size:12px;font-weight:700;
    padding:5px 12px;border:none;
    box-shadow:0 2px 0 rgba(0,0,0,.35);
    transition:transform .12s,box-shadow .12s;
}
.gh-actions .btn:active{transform:translateY(2px);box-shadow:none;}

@media (max-width:1024px){.gh-title{display:none;}}
@media (max-width:900px){
    .gh{padding:5px 8px;gap:6px;}
    .stat{min-width:52px;padding:2px 6px;}
    .stat-k{font-size:9px;}.stat-v{font-size:13px;}
    .gh-props{padding:2px 5px;}.prop-chip{font-size:11px;padding:2px 4px;}
}
@media (max-width:680px){
    .gh-props{display:none;}
    .gh-actions .btn{padding:4px 8px;font-size:11px;}
}

/* ---------- 舞台 ---------- */
.stage{
    position:relative;flex:1 1 auto;min-height:0;
    background:radial-gradient(ellipse at 50% 0%,#16203a 0%,#080b11 70%);
    overflow:hidden;
}
#gameCanvas{display:block;width:100%;height:100%;}

/* ============================================================
   统一按钮系统（修复配色，明确优先级）
   ============================================================ */
/* 主按钮：金色（用于开始游戏 / 进入下一关 / 再来一局） */
.ui-btn-gold,
.ov .ui-btn-gold,
.ov-card .ui-btn-gold{
    display:flex !important;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(180deg,#ffd94a 0%,#e8a900 100%) !important;
    color:#3b2600 !important;
    font-weight:900 !important;letter-spacing:2px;
    border:none !important;border-radius:12px !important;
    padding:12px 18px !important;
    box-shadow:0 5px 0 #a87600,0 10px 22px rgba(245,197,24,.3) !important;
    transition:filter .12s,transform .12s,box-shadow .12s !important;
    cursor:pointer;text-decoration:none !important;
    font-size:15px !important;line-height:1.4 !important;
    width:100%;
}
.ui-btn-gold:hover{filter:brightness(1.08);color:#3b2600 !important;}
.ui-btn-gold:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #a87600 !important;}
.ui-btn-gold .glyphicon{font-size:15px;}

/* 次按钮：蓝色（用于更多游戏等） */
.ui-btn-blue,
.ov .ui-btn-blue,
.ov-card .ui-btn-blue{
    display:flex !important;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(180deg,#5eb8ff 0%,#2b8ee0 100%) !important;
    color:#ffffff !important;
    font-weight:900 !important;letter-spacing:2px;
    border:none !important;border-radius:12px !important;
    padding:12px 18px !important;
    box-shadow:0 5px 0 #1a5d99,0 10px 22px rgba(96,200,255,.3) !important;
    transition:filter .12s,transform .12s,box-shadow .12s !important;
    cursor:pointer;text-decoration:none !important;
    font-size:15px !important;line-height:1.4 !important;
}
.ui-btn-blue:hover{filter:brightness(1.08);color:#fff !important;}
.ui-btn-blue:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #1a5d99 !important;}
.ui-btn-blue .glyphicon{font-size:15px;}

/* 双按钮行（结算 / 开始界面） */
.ui-btn-row{display:flex;gap:10px;justify-content:center;width:100%;}
.ui-btn-row .ui-btn-gold{flex:2;}
.ui-btn-row .ui-btn-blue{flex:1;}

/* 单按钮行（商店） */
.ui-btn-block{width:100%;}

/* ============================================================
   覆盖层
   ============================================================ */
.ov{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:14px;background:rgba(5,8,14,.82);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    z-index:20;animation:fadeIn .28s ease;
}
.ov.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.ov-card{
    width:100%;max-width:640px;max-height:100%;overflow-y:auto;
    padding:22px 24px 20px;border-radius:18px;
    background:linear-gradient(180deg,#1a2438 0%,#0f1626 100%);
    border:1px solid rgba(245,197,24,.28);
    box-shadow:0 22px 60px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
    animation:popIn .34s cubic-bezier(.2,1.3,.4,1);
    text-align:center;
}
@keyframes popIn{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}

.ov-title{
    font-size:26px;font-weight:900;letter-spacing:3px;
    color:var(--gold-lt);
    text-shadow:0 0 22px rgba(245,197,24,.5),0 3px 0 rgba(0,0,0,.4);
    margin:0 0 6px;
}
.ov-sub{font-size:13px;color:var(--txt-dim);margin-bottom:16px;letter-spacing:.6px;}

.bank-label{
    font-size:12px;color:var(--txt-dim);letter-spacing:2px;
    margin:6px 0 10px;position:relative;
}
.bank-label::before,.bank-label::after{
    content:'';position:absolute;top:50%;width:26%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(245,197,24,.4));
}
.bank-label::before{left:0;}
.bank-label::after{right:0;transform:scaleX(-1);}

.bank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.bank-btn{
    display:flex;align-items:center;gap:10px;padding:11px 13px;text-align:left;
    border-radius:12px;cursor:pointer;
    background:rgba(255,255,255,.04);
    border:2px solid rgba(255,255,255,.1);
    color:var(--txt);transition:all .18s ease;font-family:inherit;
}
.bank-btn:hover{background:rgba(245,197,24,.1);border-color:rgba(245,197,24,.45);transform:translateY(-2px);}
.bank-btn.active{
    background:linear-gradient(135deg,rgba(245,197,24,.22),rgba(245,197,24,.06));
    border-color:var(--gold);
    box-shadow:0 0 18px rgba(245,197,24,.32);
}
.bank-btn .bk-icon{font-size:22px;line-height:1;}
.bank-btn .bk-name{font-size:14px;font-weight:800;letter-spacing:1px;display:block;}
.bank-btn .bk-desc{font-size:11px;color:var(--txt-dim);margin-top:2px;display:block;}

.ov-hint{margin-top:14px;font-size:11.5px;color:var(--txt-dim);line-height:1.8;letter-spacing:.4px;}
.ov-hint kbd{
    background:#26324a;border-radius:5px;padding:1px 6px;
    border:1px solid #3d4d6b;color:#ffe9a0;font-size:11px;box-shadow:0 1px 0 #000;
}

/* 商店 */
.shop-money{font-size:14px;color:var(--txt-dim);margin-bottom:14px;letter-spacing:1px;}
.shop-money b{color:var(--gold-lt);font-size:20px;text-shadow:0 0 12px rgba(245,197,24,.5);}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.shop-item{
    padding:13px 8px 11px;border-radius:13px;cursor:pointer;
    background:rgba(255,255,255,.04);
    border:2px solid rgba(255,255,255,.1);
    transition:all .18s ease;font-family:inherit;color:var(--txt);
    display:flex;flex-direction:column;align-items:center;gap:5px;
}
.shop-item:hover:not(.disabled){border-color:var(--gold);background:rgba(245,197,24,.1);transform:translateY(-3px);}
.shop-item.disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.7);}
.shop-item .si-icon{font-size:26px;line-height:1;}
.shop-item .si-name{font-size:13px;font-weight:800;letter-spacing:1px;}
.shop-item .si-price{font-size:12px;color:var(--gold-lt);font-weight:700;}
.shop-item .si-desc{font-size:10.5px;color:var(--txt-dim);line-height:1.5;}
.shop-item .si-own{font-size:10.5px;color:#7ee787;font-weight:700;}

@media (max-width:560px){
    .bank-grid{grid-template-columns:1fr;}
    .shop-grid{grid-template-columns:1fr;}
    .ov-card{padding:18px 16px;}
    .ov-title{font-size:21px;}
}

/* 结算统计 */
.over-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px;}
.over-stat{
    background:rgba(255,255,255,.05);border:1px solid var(--line);
    border-radius:11px;padding:9px 6px;
    display:flex;flex-direction:column;align-items:center;gap:3px;
}
.over-stat .os-k{font-size:10.5px;color:var(--txt-dim);letter-spacing:.8px;display:flex;align-items:center;gap:4px;}
.over-stat .os-k .glyphicon{font-size:11px;color:var(--gold-lt);opacity:.85;}
.over-stat .os-v{font-size:19px;font-weight:800;color:var(--gold-lt);font-variant-numeric:tabular-nums;}
@media (max-width:560px){.over-stats{grid-template-columns:repeat(2,1fr);}}

/* 错误分析面板 */
.error-analysis{
    margin-bottom:14px;padding:12px 14px;border-radius:12px;
    background:rgba(255,138,61,.08);
    border:1px solid rgba(255,138,61,.3);
    text-align:left;
}
.ea-title{
    font-size:12.5px;font-weight:800;color:#ffb87a;
    letter-spacing:1px;margin-bottom:8px;
    display:flex;align-items:center;gap:6px;
}
.ea-title .glyphicon{font-size:13px;}
.ea-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.ea-chip{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;border-radius:8px;
    background:rgba(255,93,93,.15);
    border:1px solid rgba(255,93,93,.4);
    font-family:"Consolas","Monaco",monospace;
    font-size:13px;font-weight:800;color:#ffc9c9;
}
.ea-chip b{color:#ff8a8a;font-size:11px;}
.ea-advice{
    font-size:11.5px;line-height:1.7;color:#c3cfe0;
    padding-top:8px;border-top:1px dashed rgba(255,255,255,.12);
}
.ea-advice .hl{color:var(--gold-lt);font-weight:700;}

/* ============================================================
   Bootstrap Modal 定制
   ============================================================ */
.modal-content{
    background:linear-gradient(180deg,#1a2438,#0f1626);
    border:1px solid rgba(245,197,24,.3);
    border-radius:16px;color:var(--txt);
    box-shadow:0 24px 64px rgba(0,0,0,.8);
}
.modal-header{border-bottom:1px solid rgba(245,197,24,.18);padding:14px 18px;}
.modal-title{font-weight:900;letter-spacing:2px;color:var(--gold-lt);font-size:17px;}
.modal-header .close{color:#fff;opacity:.7;text-shadow:none;font-size:24px;}
.modal-header .close:hover{opacity:1;color:var(--gold-lt);}
.modal-body{padding:16px 20px;max-height:66vh;overflow-y:auto;}
.modal-footer{border-top:1px solid rgba(255,255,255,.08);padding:10px 18px;}

.rule-sec{margin-bottom:16px;}
.rule-sec h5{
    font-size:13px;font-weight:800;color:var(--gold-lt);
    letter-spacing:1.5px;margin:0 0 7px;
    display:flex;align-items:center;gap:6px;
}
.rule-sec h5::before{content:'';width:3px;height:13px;background:var(--gold);border-radius:2px;}
.rule-sec p,.rule-sec li{font-size:12.5px;line-height:1.85;color:#c3cfe0;margin:0 0 4px;}
.rule-sec ul{padding-left:18px;margin:0;}
.rule-sec .hl{color:var(--gold-lt);font-weight:700;}
.rule-sec .k{
    display:inline-block;background:#26324a;border:1px solid #3d4d6b;
    border-radius:5px;padding:0 6px;margin:0 2px;
    font-size:11.5px;color:#ffe9a0;box-shadow:0 1px 0 #000;
}

.setting-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.09);
    gap:12px;
}
.setting-row:last-child{border-bottom:none;}
.setting-row .sr-label{font-size:13px;font-weight:600;letter-spacing:.6px;}
.setting-row .sr-label small{display:block;font-size:11px;color:var(--txt-dim);font-weight:400;margin-top:2px;}
.setting-row input[type=range]{width:130px;accent-color:var(--gold);flex:0 0 auto;}
.switch{
    position:relative;width:48px;height:26px;border-radius:14px;cursor:pointer;
    background:#2a3448;border:1px solid #3b4863;transition:all .2s;flex:0 0 auto;
}
.switch::after{
    content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;
    border-radius:50%;background:#8fa3bf;transition:all .22s cubic-bezier(.3,1.4,.5,1);
}
.switch.on{background:linear-gradient(90deg,#e8a900,#ffd94a);border-color:#ffd94a;}
.switch.on::after{left:24px;background:#3b2600;}
.switch:focus{outline:2px solid rgba(245,197,24,.6);outline-offset:2px;}

/* 底部提示条 */
#typeHint{
    position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
    padding:8px 20px;border-radius:20px;
    background:rgba(10,15,25,.88);
    border:1px solid rgba(245,197,24,.35);
    font-size:12.5px;letter-spacing:1px;color:#ffe9a0;
    pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;
    z-index:10;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
    box-shadow:0 8px 24px rgba(0,0,0,.6);
}
#typeHint.show{opacity:1;transform:translateX(-50%) translateY(-2px);}
#typeHint.hint-ok{border-color:rgba(74,222,128,.6);color:#a7f3d0;}
#typeHint.hint-err{border-color:rgba(255,93,93,.6);color:#ffc9c9;}
#typeHint.hint-info{border-color:rgba(96,200,255,.6);color:#c7e9ff;}

/* 启动遮罩 */
#bootMask{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:#080b11;color:var(--gold-lt);
    font-size:15px;letter-spacing:3px;
    transition:opacity .4s;
}
#bootMask.gone{opacity:0;pointer-events:none;}