/* =========================================================================
   外滩狂飙 · BUND RUSH — 样式表
   主题色：紫 #6a4c9c / 翠绿 #00a67e / 霓虹青 #00e5ff
   设计语言：赛博朋克 + 像素故障风 + 切角科技感面板
   ========================================================================= */

/* ---------- 全局变量 ---------- */
:root{
    --c-purple:#6a4c9c;
    --c-green:#00a67e;
    --c-cyan:#00e5ff;
    --c-red:#ff2b4e;
    --c-bg:#0a0118;
    --font-num:'Orbitron', 'Segoe UI', sans-serif;
    --font-pixel:'Press Start 2P', monospace;
}

/* ---------- 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
    width:100%;height:100%;overflow:hidden;
    background:var(--c-bg);
    font-family:var(--font-num);
    color:#eafffb;
    -webkit-user-select:none;user-select:none;
}

.hidden{display:none !important;}

/* 游戏主容器（承载震屏动画） */
#game-wrap{position:fixed;inset:0;overflow:hidden;}
#canvas-holder{position:absolute;inset:0;z-index:1;}
#canvas-holder canvas{display:block;}

/* =========================================================================
   特效层
   ========================================================================= */
/* 氮气速度线：径向放射细线 */
#speedlines{
    position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
    transition:opacity .25s ease;
    background:
        repeating-radial-gradient(circle at 50% 45%,
            rgba(0,229,255,0) 0px, rgba(0,229,255,0) 42px,
            rgba(0,229,255,.16) 43px, rgba(0,229,255,.16) 44px);
    mix-blend-mode:screen;
}
#speedlines.on{opacity:1;animation:speedpulse .5s ease-in-out infinite alternate;}
@keyframes speedpulse{from{transform:scale(1);}to{transform:scale(1.12);}}

/* 碰撞红色暗角 */
#vignette{
    position:absolute;inset:0;z-index:6;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(255,43,78,0) 40%, rgba(255,43,78,.55) 100%);
    opacity:0;transition:opacity .4s ease;
}
#vignette.on{opacity:1;transition:opacity .06s ease;}

/* 浮动数字层 */
#float-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;}
.float-num{
    position:absolute;transform:translate(-50%,0);
    font-family:var(--font-num);font-weight:700;font-size:22px;
    color:var(--c-cyan);text-shadow:0 0 12px var(--c-cyan);
    animation:floatup 1s ease-out forwards;white-space:nowrap;
}
.float-num.purple{color:#c48aff;text-shadow:0 0 12px var(--c-purple);}
@keyframes floatup{
    from{opacity:1;transform:translate(-50%,0);}
    to{opacity:0;transform:translate(-50%,-90px);}
}

/* =========================================================================
   HUD（左上速度 / 积分，右上距离，底部道具）
   ========================================================================= */
#hud{position:absolute;inset:0;z-index:9;pointer-events:none;padding:18px;}
.hud-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:12px;}
.hud-right{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-end;}

/* 切角科技感面板 */
.panel{
    position:relative;min-width:190px;padding:12px 16px 14px;
    background:rgba(5,2,16,.55);
    border:1px solid rgba(0,229,255,.5);
    box-shadow:0 0 18px rgba(0,229,255,.35), inset 0 0 22px rgba(106,76,156,.28);
    backdrop-filter:blur(4px);
    clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.panel::before{ /* 顶部紫色装饰条 */
    content:'';position:absolute;top:0;left:12px;right:0;height:2px;
    background:linear-gradient(90deg,var(--c-purple),var(--c-cyan));
}
.panel-label{
    font-size:11px;letter-spacing:3px;color:var(--c-cyan);
    text-shadow:0 0 8px rgba(0,229,255,.8);margin-bottom:6px;
}
.panel-value{display:flex;align-items:baseline;gap:6px;font-weight:700;line-height:1;}
.panel-value span:first-child{font-size:34px;color:#fff;text-shadow:0 0 14px rgba(0,229,255,.9);}
.panel-value .unit{font-size:13px;color:var(--c-cyan);}

/* 能量条 */
.bar{height:5px;margin-top:8px;background:rgba(0,229,255,.12);overflow:hidden;}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--c-green),var(--c-cyan));box-shadow:0 0 10px var(--c-cyan);transition:width .12s linear;}
.combo-bar i{background:linear-gradient(90deg,#c48aff,var(--c-purple));box-shadow:0 0 10px var(--c-purple);}

#combo-line{margin-top:10px;font-size:12px;letter-spacing:2px;color:#c48aff;}
#combo-line b{font-size:16px;color:#fff;text-shadow:0 0 10px var(--c-purple);}

/* 顶部中央距离 */
#dist-panel{
    position:absolute;top:18px;left:50%;transform:translateX(-50%);
    min-width:130px;text-align:center;font-size:24px;font-weight:700;
}
#dist-panel span{color:var(--c-green);text-shadow:0 0 12px rgba(0,166,126,.9);}

/* 道具状态栏 */
#power-bar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:14px;}
.pu{
    display:flex;align-items:center;gap:8px;padding:8px 12px;
    background:rgba(5,2,16,.6);border:1px solid rgba(0,229,255,.4);
    clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.pu-icon{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:18px;color:#04101a;background:var(--c-cyan);
    box-shadow:0 0 14px var(--c-cyan);
    clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.pu-icon.shield-icon{background:var(--c-green);box-shadow:0 0 14px var(--c-green);}
.pu .bar{width:70px;margin-top:0;}
.pu .bar i.full{width:100%;}

/* =========================================================================
   中央提示 Toast
   ========================================================================= */
#toast{
    position:absolute;top:32%;left:50%;transform:translateX(-50%);z-index:9;
    font-family:var(--font-pixel);font-size:24px;letter-spacing:4px;color:#fff;
    text-shadow:0 0 16px var(--c-cyan),0 0 32px var(--c-purple);
    opacity:0;pointer-events:none;white-space:nowrap;
}
#toast.on{animation:toastin .9s ease forwards;}
@keyframes toastin{
    0%{opacity:0;transform:translateX(-50%) scale(.6);}
    25%{opacity:1;transform:translateX(-50%) scale(1.15);}
    60%{opacity:1;transform:translateX(-50%) scale(1);}
    100%{opacity:0;transform:translateX(-50%) scale(1);}
}

/* =========================================================================
   遮罩层（菜单 / 倒计时 / 暂停 / 结算）
   ========================================================================= */
.overlay{
    position:absolute;inset:0;z-index:20;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg, rgba(20,6,42,.86), rgba(2,20,16,.86));
    backdrop-filter:blur(3px);
}
.overlay.transparent{background:transparent;backdrop-filter:none;pointer-events:none;}

.menu-box{
    text-align:center;padding:44px 54px;max-width:min(92vw,640px);
    background:rgba(6,2,18,.5);
    border:1px solid rgba(106,76,156,.6);
    box-shadow:0 0 40px rgba(106,76,156,.4), inset 0 0 60px rgba(0,166,126,.06);
    clip-path:polygon(0 22px,22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}

/* ---------- 像素故障标题 ---------- */
.title-glitch{
    position:relative;font-family:var(--font-pixel);
    font-size:46px;letter-spacing:8px;color:#fff;font-weight:bold;
    text-shadow:0 0 18px var(--c-cyan),0 0 40px var(--c-purple);
    margin-bottom:18px;
}
.title-glitch.small{font-size:34px;}
.title-glitch.red{text-shadow:0 0 18px var(--c-red),0 0 40px var(--c-purple);}
.title-glitch::before,.title-glitch::after{
    content:attr(data-text);position:absolute;left:0;top:0;width:100%;
    overflow:hidden;
}
.title-glitch::before{
    color:var(--c-cyan);z-index:-1;
    animation:glitchA 2.2s infinite steps(1);
}
.title-glitch::after{
    color:var(--c-red);z-index:-2;
    animation:glitchB 1.7s infinite steps(1);
}
@keyframes glitchA{
    0%,88%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);}
    90%{transform:translate(-4px,-2px);clip-path:inset(10% 0 55% 0);}
    94%{transform:translate(3px,1px);clip-path:inset(60% 0 10% 0);}
}
@keyframes glitchB{
    0%,80%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);}
    84%{transform:translate(4px,2px);clip-path:inset(40% 0 30% 0);}
    90%{transform:translate(-3px,-1px);clip-path:inset(15% 0 65% 0);}
}
.title-glitch.red::before{color:var(--c-red);}
.title-glitch.red::after{color:var(--c-cyan);}

.subtitle{
    font-size:13px;letter-spacing:6px;color:var(--c-cyan);
    text-shadow:0 0 10px rgba(0,229,255,.8);margin-bottom:26px;
}

/* 操作说明 */
.controls-hint{font-size:15px;letter-spacing:1px;margin-bottom:10px;color:#d7f6ff;}
.key{
    display:inline-block;min-width:26px;padding:4px 7px;margin:0 2px;text-align:center;
    font-weight:700;color:var(--c-cyan);
    border:1px solid rgba(0,229,255,.6);border-bottom-width:3px;
    box-shadow:0 0 10px rgba(0,229,255,.3);background:rgba(0,229,255,.06);
}
.tip-line{font-size:13px;color:#9fd9cf;letter-spacing:1px;margin-bottom:22px;}

/* 最佳成绩榜 */
.best-board{margin:0 auto 24px;max-width:320px;font-size:14px;}
.best-board .row{
    display:flex;justify-content:space-between;padding:7px 14px;margin-bottom:6px;
    background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.25);
    clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.best-board .row .rk{color:var(--c-purple);font-weight:700;}
.best-board .row .sc{color:var(--c-green);font-weight:700;text-shadow:0 0 8px rgba(0,166,126,.7);}
.best-board .empty{color:#6b6b8a;font-size:13px;padding:8px;}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-block;margin:8px;padding:15px 44px;cursor:pointer;
    font-family:var(--font-num);font-weight:700;font-size:17px;letter-spacing:5px;
    color:#04101a;background:linear-gradient(90deg,var(--c-green),var(--c-cyan));
    border:none;box-shadow:0 0 22px rgba(0,166,126,.55);
    clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.15);box-shadow:0 0 34px rgba(0,229,255,.8);}
.btn:active{transform:translateY(1px) scale(.98);}
/* 开始按钮呼吸动画 */
#btn-start{animation:btnBreath 2s ease-in-out infinite;}
@keyframes btnBreath{
    0%,100%{box-shadow:0 0 22px rgba(0,166,126,.55);filter:brightness(1);}
    50%{box-shadow:0 0 38px rgba(0,229,255,.8);filter:brightness(1.15);}
}
.btn.ghost{
    background:transparent;color:var(--c-cyan);
    border:1px solid rgba(0,229,255,.6);box-shadow:0 0 14px rgba(0,229,255,.25);
}
.btn.ghost:hover{background:rgba(0,229,255,.1);}

.any-key{margin-top:14px;font-size:12px;letter-spacing:2px;color:#7a8ba6;animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:.4;}50%{opacity:1;}}
.credit{margin-top:22px;font-size:11px;letter-spacing:2px;color:#5a4a7a;}

/* ---------- 倒计时 ---------- */
#count-num{
    font-family:var(--font-pixel);font-size:120px;color:#fff;
    text-shadow:0 0 30px var(--c-cyan),0 0 70px var(--c-purple);
}
#count-num.pop{animation:countpop .75s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes countpop{
    0%{opacity:0;transform:scale(2.4);}
    40%{opacity:1;transform:scale(1);}
    100%{opacity:1;transform:scale(1);}
}

/* ---------- 结算统计 ---------- */
#new-record{
    display:inline-block;margin-bottom:18px;padding:8px 22px;
    font-family:var(--font-pixel);font-size:16px;letter-spacing:3px;color:#04101a;
    background:linear-gradient(90deg,#ffd76a,var(--c-green));
    box-shadow:0 0 26px rgba(255,215,106,.7);
    clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
    animation:recordflash .6s ease-in-out infinite alternate;
}
@keyframes recordflash{from{filter:brightness(1);}to{filter:brightness(1.4);}}

.stats-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 22px;
}
.stat{
    padding:12px 14px;background:rgba(0,229,255,.05);
    border:1px solid rgba(0,229,255,.25);
    clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.stat-label{display:block;font-size:12px;letter-spacing:2px;color:#8fb8c9;margin-bottom:6px;}
.stat-value{font-size:22px;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(0,229,255,.6);}
.stat-value.big{font-size:34px;color:var(--c-green);text-shadow:0 0 14px rgba(0,166,126,.9);}

/* =========================================================================
   震屏（碰撞时给主容器加 .shake）
   ========================================================================= */
#game-wrap.shake{animation:screenshake .45s linear;}
@keyframes screenshake{
    0%,100%{transform:translate(0,0);}
    12%{transform:translate(-12px,6px);}
    25%{transform:translate(10px,-8px);}
    38%{transform:translate(-9px,-6px);}
    50%{transform:translate(8px,7px);}
    63%{transform:translate(-6px,4px);}
    76%{transform:translate(5px,-4px);}
    88%{transform:translate(-3px,2px);}
}

/* =========================================================================
   新增玩法样式
   ========================================================================= */

/* ---- 能量槽面板 ---- */
.energy-panel{min-width:190px !important;}
.energy-row{display:flex;align-items:center;gap:8px;margin-top:4px;}
.energy-bar{flex:1;height:12px !important;margin-top:0 !important;border:1px solid rgba(0,229,255,.3);}
.energy-bar i{background:linear-gradient(90deg,var(--c-green),var(--c-cyan)) !important;
    box-shadow:0 0 10px var(--c-cyan) !important;transition:width .15s ease;}
.energy-bar i.full-glow{background:linear-gradient(90deg,#ffd76a,var(--c-green),var(--c-cyan)) !important;
    box-shadow:0 0 16px #ffd76a !important;animation:energyFull .6s ease-in-out infinite alternate;}
@keyframes energyFull{from{filter:brightness(1);}to{filter:brightness(1.5);}}
#energy-text{font-size:18px;font-weight:700;color:var(--c-green);text-shadow:0 0 8px rgba(0,166,126,.8);min-width:30px;text-align:right;}

/* ---- 极限超载提示 ---- */
#overload-prompt{
    position:absolute;top:48%;left:50%;transform:translateX(-50%);z-index:9;
    font-family:var(--font-pixel);font-size:18px;letter-spacing:3px;color:#ffd76a;
    text-shadow:0 0 16px #ffd76a,0 0 36px var(--c-purple);
    animation:overloadPulse .5s ease-in-out infinite alternate;pointer-events:none;white-space:nowrap;
}
@keyframes overloadPulse{from{opacity:.6;transform:translateX(-50%) scale(.95);}to{opacity:1;transform:translateX(-50%) scale(1.08);}}
.key-big{
    display:inline-block;padding:4px 12px;margin:0 4px;font-weight:700;color:#04101a;
    background:linear-gradient(90deg,#ffd76a,var(--c-green));
    box-shadow:0 0 14px rgba(255,215,106,.7);
    clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}

/* ---- 红球过载红色动态边框 ---- */
#redborder{
    position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
    transition:opacity .2s ease;
    box-shadow:inset 0 0 80px rgba(255,43,78,.6),inset 0 0 200px rgba(255,43,78,.25);
    border:4px solid rgba(255,43,78,.8);
}
#redborder.on{opacity:1;animation:redPulse .4s ease-in-out infinite alternate;}
@keyframes redPulse{from{box-shadow:inset 0 0 60px rgba(255,43,78,.4),inset 0 0 160px rgba(255,43,78,.15);}to{box-shadow:inset 0 0 120px rgba(255,43,78,.7),inset 0 0 260px rgba(255,43,78,.35);}}

/* ---- 黑块数据腐化黑白噪点闪烁 ---- */
#noiseflash{
    position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;
    background-image:
        repeating-conic-gradient(rgba(255,255,255,.15) 0deg 1deg,transparent 1deg 3deg),
        repeating-conic-gradient(rgba(0,0,0,.3) 0deg 2deg,transparent 2deg 5deg);
    background-size:4px 4px,6px 6px;
    mix-blend-mode:overlay;
}
#noiseflash.on{opacity:1;animation:noiseFlicker .08s steps(1) infinite;}
@keyframes noiseFlicker{
    0%{transform:translate(0,0);}25%{transform:translate(-3px,2px);}
    50%{transform:translate(2px,-3px);}75%{transform:translate(-2px,-2px);}100%{transform:translate(3px,1px);}
}

/* ---- 关卡升级蓝色震动 ---- */
#game-wrap.blueshake{animation:blueshake .3s linear;}
@keyframes blueshake{
    0%,100%{transform:translate(0,0);filter:none;}
    20%{transform:translate(-6px,3px);filter:hue-rotate(20deg) brightness(1.1);}
    40%{transform:translate(5px,-4px);filter:hue-rotate(20deg) brightness(1.1);}
    60%{transform:translate(-4px,-3px);filter:none;}
    80%{transform:translate(3px,2px);filter:none;}
}

/* ---- 死亡爆炸遮罩 ---- */
#death-overlay{
    position:absolute;inset:0;z-index:15;pointer-events:none;
    background:rgba(0,0,0,0);transition:background 1.2s ease;
}
#death-overlay.on{background:rgba(0,0,0,.92);}

/* ---- 死亡红色冲击波（从屏幕中心向外扩散） ---- */
#shockwave{
    position:absolute;inset:0;z-index:16;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
}
#shockwave::before{
    content:'';width:0;height:0;border-radius:50%;
    border:4px solid rgba(255,43,78,.9);
    box-shadow:0 0 40px rgba(255,43,78,.6),inset 0 0 40px rgba(255,43,78,.4);
    opacity:0;
}
#shockwave.on::before{animation:shockwave-expand .8s ease-out forwards;}
@keyframes shockwave-expand{
    0%{width:0;height:0;opacity:1;border-width:8px;}
    50%{opacity:.8;border-width:5px;}
    100%{width:140vmax;height:140vmax;opacity:0;border-width:1px;}
}

/* ---- 轻微震屏（黑块撞击等非致命伤害） ---- */
#game-wrap.shake-light{animation:screenshake-light .3s linear;}
@keyframes screenshake-light{
    0%,100%{transform:translate(0,0);}
    20%{transform:translate(-5px,3px);}
    40%{transform:translate(4px,-3px);}
    60%{transform:translate(-3px,2px);}
    80%{transform:translate(2px,-1px);}
}

/* ---- 距离面板标签 ---- */
#dist-panel .panel-label{text-align:center;font-size:10px;letter-spacing:2px;margin-bottom:2px;}
#dist-panel span:last-child{font-size:24px !important;}

/* ---- 危险等级指示器（4格逐级点亮） ---- */
#danger-level{
    display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px;
}
.dl-label{
    font-family:var(--font-pixel);font-size:8px;color:rgba(255,43,78,.6);
    letter-spacing:1px;margin-right:3px;
}
.dl-cell{
    width:16px;height:8px;
    background:rgba(255,43,78,.08);
    border:1px solid rgba(255,43,78,.2);
    clip-path:polygon(0 2px,2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%);
    transition:all .3s ease;
}
.dl-cell.on{
    background:linear-gradient(90deg,#ff2b4e,#ff6b3a);
    border-color:#ff2b4e;
    box-shadow:0 0 8px rgba(255,43,78,.7);
}

/* ---- 浮动文字增强（积分提示） ---- */
.float-num.green{color:var(--c-green) !important;text-shadow:0 0 12px var(--c-green) !important;}
.float-num.red{color:var(--c-red) !important;text-shadow:0 0 12px var(--c-red) !important;}

/* =========================================================================
   血条系统（5格）
   ========================================================================= */
#health-bar{
    position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:9;
    display:flex;align-items:center;gap:10px;
}
.health-label{
    font-family:var(--font-pixel);font-size:14px;color:var(--c-red);
    text-shadow:0 0 10px rgba(255,43,78,.8);letter-spacing:2px;
}
.health-cells{display:flex;gap:5px;}
.health-cell{
    width:26px;height:22px;
    background:rgba(255,43,78,.08);
    border:2px solid rgba(255,43,78,.25);
    clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
    transition:all .2s ease;
}
.health-cell.full{
    background:linear-gradient(135deg,#ff2b4e,#ff6b8a);
    border-color:rgba(255,43,78,.7);
    box-shadow:0 0 10px rgba(255,43,78,.6),inset 0 0 8px rgba(255,107,138,.4);
}
.health-cell.empty{
    background:rgba(255,43,78,.03);
    border-color:rgba(255,43,78,.12);
    box-shadow:none;
}
/* 受伤闪红 */
#health-bar.hit .health-cell.full{animation:hpFlash .3s ease;}
@keyframes hpFlash{0%,100%{filter:brightness(1);}50%{filter:brightness(2.5);}}

/* =========================================================================
   暂停按钮
   ========================================================================= */
.pause-btn{
    position:absolute;top:18px;right:220px;z-index:10;
    width:42px;height:42px;cursor:pointer;
    background:rgba(5,2,16,.6);border:1px solid rgba(0,229,255,.5);
    box-shadow:0 0 14px rgba(0,229,255,.3);
    clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
    display:flex;align-items:center;justify-content:center;gap:4px;
    pointer-events:auto;transition:all .15s ease;
}
.pause-btn span{
    display:block;width:4px;height:16px;
    background:var(--c-cyan);box-shadow:0 0 6px var(--c-cyan);
}
.pause-btn:hover{
    background:rgba(0,229,255,.15);border-color:var(--c-cyan);
    box-shadow:0 0 22px rgba(0,229,255,.6);transform:scale(1.08);
}
.pause-btn:active{transform:scale(.95);}

/* =========================================================================
   Boss血条系统
   ========================================================================= */
#boss-hud{
    position:absolute;top:130px;left:50%;transform:translateX(-50%);z-index:9;
    width:60%;max-width:520px;
    animation:bossAppear .5s ease-out;
}
@keyframes bossAppear{
    0%{opacity:0;transform:translateX(-50%) scale(.7);}
    100%{opacity:1;transform:translateX(-50%) scale(1);}
}
.boss-label{
    font-family:var(--font-pixel);font-size:13px;color:var(--c-red);
    text-shadow:0 0 12px rgba(255,43,78,.9);text-align:center;margin-bottom:6px;
    letter-spacing:3px;
    animation:bossLabelPulse 1.5s ease-in-out infinite alternate;
}
@keyframes bossLabelPulse{
    from{text-shadow:0 0 8px rgba(255,43,78,.6);}
    to{text-shadow:0 0 16px rgba(255,43,78,1),0 0 30px rgba(255,43,78,.5);}
}
.boss-bar{
    height:14px;background:rgba(0,0,0,.7);
    border:2px solid rgba(255,43,78,.5);
    box-shadow:0 0 18px rgba(255,43,78,.4),inset 0 0 12px rgba(0,0,0,.6);
    clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
    position:relative;overflow:hidden;
}
.boss-health{
    height:100%;width:100%;
    background:linear-gradient(90deg,#ff2b4e,#ff6b3a,#ffd76a);
    box-shadow:0 0 12px rgba(255,43,78,.8);
    transition:width .3s ease-out;
    position:relative;
}
.boss-health::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
    animation:bossBarShine 2s linear infinite;
}
@keyframes bossBarShine{
    0%{transform:translateX(-100%);}
    100%{transform:translateX(100%);}
}
.boss-phase-indicator{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    display:flex;gap:5px;
}
.phase-dot{
    width:7px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.15);
    box-shadow:0 0 3px rgba(0,0,0,.5);
    transition:all .3s ease;
}
.phase-dot.active{
    background:#ff2b4e;
    box-shadow:0 0 8px rgba(255,43,78,.9);
}

/* =========================================================================
   响应式（竖屏 / 小屏适配）
   ========================================================================= */
@media (max-width:640px){
    .panel{min-width:150px;padding:9px 12px 11px;}
    .panel-value span:first-child{font-size:26px;}
    #dist-panel{font-size:18px;min-width:96px;}
    .title-glitch{font-size:30px;letter-spacing:5px;}
    .title-glitch.small{font-size:24px;}
    .menu-box{padding:30px 24px;}
    .stats-grid{grid-template-columns:1fr;}
    #count-num{font-size:80px;}
    .controls-hint{font-size:13px;}
    .btn{padding:13px 30px;font-size:15px;letter-spacing:3px;}
    .pause-btn{right:170px;width:36px;height:36px;}
    .health-cell{width:20px;height:18px;}
    .health-label{font-size:11px;}
    #boss-hud{top:115px;width:80%;}
    .boss-label{font-size:10px;letter-spacing:2px;}
    .boss-bar{height:10px;}
}