html, body {
    width: 100%; height: 100%; margin: 0; padding: 0;
    overflow: hidden;
    background: #0a0f1c;
    font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
body.theme-light {
    --hud-bg: rgba(255,255,255,.82);
    --hud-fg: #12324f;
    --hud-sub: rgba(18,50,79,.58);
    --panel-bg: rgba(18, 24, 42, 0.90);
    --panel-fg: #e8f0ff;
    --panel-sub: rgba(232,240,255,.62);
    --panel-border: rgba(120, 180, 255, 0.20);
    --accent: #4fc3f7;
    --accent-2: #66bb6a;
    --danger: #ef5350;
    --shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
body.theme-dark {
    --hud-bg: rgba(8,14,30,.78);
    --hud-fg: #e6f0ff;
    --hud-sub: rgba(230,240,255,.58);
    --panel-bg: rgba(14, 20, 36, 0.94);
    --panel-fg: #e8f0ff;
    --panel-sub: rgba(232,240,255,.62);
    --panel-border: rgba(120, 180, 255, 0.22);
    --accent: #4fc3f7;
    --accent-2: #66bb6a;
    --danger: #ef5350;
    --shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   画布
   ============================================================ */
#game-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    display: block; z-index: 0;
}
#fx-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    display: block; z-index: 3000;
    pointer-events: none;
}

/* ============================================================
   顶部 HUD
   ============================================================ */
.hud {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 14px;
    background: var(--hud-bg);
    color: var(--hud-fg);
    border-bottom: 1px solid var(--panel-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background .35s ease, color .35s ease;
    font-size: 13px;
    min-height: 58px;
    box-sizing: border-box;
}
.hud-left, .hud-right {
    display: flex; align-items: center; gap: 6px;
    flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.hud-center {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 auto; min-width: 130px; padding: 0 6px;
}

.back-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(127,127,127,.12);
    border: 1px solid var(--panel-border);
    color: inherit; text-decoration: none;
    font-weight: 600; font-size: 13px; white-space: nowrap;
    transition: background .18s, transform .12s;
}
.back-link:hover, .back-link:focus {
    background: rgba(79,195,247,.22);
    color: inherit; text-decoration: none;
}
.back-link:active { transform: scale(.95); }
.back-link .glyphicon { font-size: 12px; }

.stat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 8px;
    background: rgba(127,127,127,.10);
    border: 1px solid var(--panel-border);
    white-space: nowrap; line-height: 1.25;
    transition: transform .15s ease, background .2s;
}
.stat .glyphicon { font-size: 12px; opacity: .78; }
.stat .s-label { font-size: 11px; color: var(--hud-sub); }
.stat .s-value {
    font-weight: 700; font-size: 15px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.stat.is-hot { animation: statPop .32s ease; }
@keyframes statPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.16); background: rgba(255,213,79,.35); }
    100% { transform: scale(1); }
}

.timer-big {
    font-size: 26px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    color: #2e9e5b;
    text-shadow: 0 0 18px rgba(66,220,140,.35);
    transition: color .3s ease, transform .15s ease;
}
.timer-big.warn {
    color: #ffb300;
    text-shadow: 0 0 18px rgba(255,179,0,.5);
}
.timer-big.danger {
    color: #ef5350;
    text-shadow: 0 0 22px rgba(239,83,80,.6);
    animation: timerPulse .55s infinite alternate;
}
.timer-big.infinite {
    color: #4fc3f7;
    text-shadow: 0 0 18px rgba(79,195,247,.55);
    letter-spacing: 0;
}
@keyframes timerPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}
.timer-bar {
    width: 100%; height: 6px; margin-top: 3px;
    background: rgba(127,127,127,.20);
    border-radius: 4px; overflow: hidden;
    position: relative;
}
.timer-fill {
    height: 100%; width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #43a047, #66bb6a);
    transition: background .3s ease, width .15s linear;
}
.timer-fill.warn { background: linear-gradient(90deg, #f9a825, #ffb300); }
.timer-fill.danger { background: linear-gradient(90deg, #e53935, #ef5350); }
/* 无限模式进度条：蓝色流动光带 */
.timer-fill.infinite {
    background: linear-gradient(90deg, #29b6f6, #4fc3f7, #81d4fa, #4fc3f7, #29b6f6);
    background-size: 200% 100%;
    animation: infiniteFlow 2.2s linear infinite;
}
@keyframes infiniteFlow {
    from { background-position: 0% 50%; }
    to   { background-position: -200% 50%; }
}

.hud-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 8px; cursor: pointer;
    background: rgba(127,127,127,.10);
    border: 1px solid var(--panel-border);
    color: inherit; font-size: 13px; line-height: 1.2;
    transition: background .18s, transform .12s;
}
.hud-btn:hover { background: rgba(127,127,127,.24); }
.hud-btn:active { transform: scale(.94); }
.hud-btn .glyphicon { font-size: 13px; }

@media (max-width: 1100px) {
    .stat .s-label { display: none; }
    .hud { padding: 6px 8px; gap: 6px; font-size: 12px; min-height: 52px; }
    .stat { padding: 3px 6px; gap: 3px; }
    .stat .s-value { font-size: 13px; }
    .hud-btn .btn-text { display: none; }
    .hud-btn { padding: 5px 7px; }
    .hud-center { min-width: 96px; }
    .timer-big { font-size: 22px; }
    .back-link .link-text { display: none; }
}
@media (max-width: 620px) {
    .hud-left .stat:nth-of-type(3) { display: none; }
    .hud-center { min-width: 78px; }
    .timer-big { font-size: 18px; }
    .hud { gap: 3px; padding: 5px 6px; }
    .hud-right .stat { padding: 2px 5px; }
}

/* ============================================================
   模态遮罩层（flex + margin:auto 双向居中，且不裁剪）
   ============================================================ */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    display: none;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    background: rgba(3, 6, 15, 0.74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.overlay.show { display: flex; animation: ovFade .22s ease; }
@keyframes ovFade { from { opacity: 0; } to { opacity: 1; } }

.ov-box {
    margin: auto;
    width: 100%;
    max-width: 620px;
    padding: 26px 26px 22px;
    border-radius: 20px;
    background: var(--panel-bg);
    color: var(--panel-fg);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    text-align: center;
    animation: ovPop .3s cubic-bezier(.2,.9,.3,1.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-sizing: border-box;
}
@keyframes ovPop {
    from { transform: translateY(16px) scale(.95); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ov-box.ov-sm { max-width: 470px; }
.ov-box.ov-wide { max-width: 780px; }

.ov-title {
    margin: 0 0 6px;
    font-size: 26px; font-weight: 800; letter-spacing: 1px;
}
.ov-title.title-win  { color: #66e39a; text-shadow: 0 0 26px rgba(76,220,140,.65); }
.ov-title.title-lose { color: #ff7b7b; text-shadow: 0 0 26px rgba(255,90,90,.55); }
.ov-sub {
    margin: 0 0 18px;
    font-size: 14px; line-height: 1.65; color: var(--panel-sub);
}
.ov-btns {
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
    margin-top: 18px;
}
.ov-btns .btn { min-width: 118px; }
.ov-btns .btn i.glyphicon { margin-right: 5px; }

.overlay .btn-default {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
    color: #e8f0ff;
}
.overlay .btn-default:hover,
.overlay .btn-default:focus {
    background: rgba(255,255,255,.18);
    color: #fff; border-color: rgba(255,255,255,.35);
}
.overlay .btn-primary {
    background: linear-gradient(135deg, #4fc3f7, #1e88e5);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(30,136,229,.4);
}
.overlay .btn-primary:hover,
.overlay .btn-primary:focus {
    background: linear-gradient(135deg, #6fd3ff, #2196f3);
    box-shadow: 0 8px 26px rgba(30,136,229,.55);
}
.overlay .btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.20);
    color: #e8f0ff;
}
.overlay .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }

/* ---- 开始面板专用布局 ---- */
.start-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 6px 0 4px;
    text-align: left;
}
.start-opt-group .opt-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    color: var(--panel-fg);
    margin-bottom: 8px;
}
.start-opt-group .opt-head .glyphicon { color: var(--accent); font-size: 13px; }
.start-opt-group .opt-head .opt-hint {
    font-size: 11px; font-weight: 400; color: var(--panel-sub);
    margin-left: auto;
}
/* 平铺选项按钮组：等分 */
.seg-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.seg-tiles button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    color: var(--panel-fg);
    font-size: 13px; font-weight: 600;
    transition: background .18s, border-color .18s, transform .12s;
}
.seg-tiles button .tile-sub {
    font-size: 10px; font-weight: 400; opacity: .62;
}
.seg-tiles button:hover { background: rgba(255,255,255,.10); }
.seg-tiles button:active { transform: scale(.96); }
.seg-tiles button.active {
    background: linear-gradient(135deg, #4fc3f7, #1e88e5);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(30,136,229,.4);
}
.seg-tiles button.active .tile-sub { opacity: .85; }

/* 三个主按钮一行 */
.start-actions {
    display: flex; align-items: stretch; justify-content: center;
    gap: 10px; margin: 22px 0 0;
}
.start-actions .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-weight: 600;
}
.start-actions .btn .glyphicon { margin-right: 4px; }
.start-actions .btn-start-main {
    flex: 1 1 auto;
    max-width: 280px;
    font-size: 16px; font-weight: 800; letter-spacing: 1px;
    padding: 12px 20px;
}
.start-actions .btn-side {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 13px;
}
@media (max-width: 520px) {
    .start-actions { flex-wrap: wrap; }
    .start-actions .btn-start-main { order: -1; flex-basis: 100%; max-width: 100%; }
    .start-actions .btn-side { flex: 1 1 0; }
    .seg-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* 底部统计文本区 */
.start-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--panel-sub);
}
.start-footer .sf-item {
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.start-footer .sf-item .glyphicon { font-size: 12px; opacity: .75; }
.start-footer .sf-item b {
    color: var(--panel-fg); font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.start-footer .sf-dot {
    opacity: .35; font-size: 14px; user-select: none;
}
.start-footer .sf-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent);
    text-decoration: none; font-weight: 600;
    padding: 3px 8px; border-radius: 6px;
    transition: background .18s, color .18s;
}
.start-footer .sf-link:hover {
    background: rgba(79,195,247,.14);
    color: #81d4fa; text-decoration: none;
}
.start-footer .sf-link .glyphicon { font-size: 12px; }

/* 结束面板指标网格 */
.result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 16px 0 4px;
}
.result-cell {
    padding: 11px 6px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
}
.result-cell .r-label {
    display: block; font-size: 11px; color: var(--panel-sub);
    margin-bottom: 3px; letter-spacing: .5px;
}
.result-cell .r-value {
    font-size: 20px; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #e8f0ff;
}
.result-cell .r-value.good { color: #66e39a; }
.result-cell .r-value.bad  { color: #ff7b7b; }
@media (max-width: 460px) {
    .result-grid { grid-template-columns: repeat(2, 1fr); }
    .ov-box { padding: 20px 16px 18px; }
    .ov-title { font-size: 22px; }
}

/* 设置项 */
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 0;
    border-bottom: 1px dashed rgba(255,255,255,.10);
    text-align: left;
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600;
}
.setting-label .glyphicon { opacity: .8; color: var(--accent); }
.setting-hint {
    display: block; font-size: 11px; font-weight: 400;
    color: var(--panel-sub); margin-top: 2px;
}
.seg {
    display: inline-flex; border-radius: 9px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    flex-wrap: wrap;
}
.seg button {
    border: 0; background: transparent; color: inherit;
    padding: 6px 12px; font-size: 13px; cursor: pointer;
    transition: background .18s, color .18s;
    outline: none;
}
.seg button + button { border-left: 1px solid rgba(255,255,255,.10); }
.seg button.active {
    background: linear-gradient(135deg, #4fc3f7, #1e88e5);
    color: #fff; font-weight: 700;
    box-shadow: inset 0 0 12px rgba(255,255,255,.15);
}

/* 规则说明卡片 */
.rule-list { text-align: left; margin: 4px 0 0; }
.rule-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 12px; margin-bottom: 9px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.rule-item:last-child { margin-bottom: 0; }
.rule-icon {
    flex: 0 0 38px; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    font-size: 17px; color: #fff;
    background: linear-gradient(135deg, #4fc3f7, #1e88e5);
    box-shadow: 0 4px 12px rgba(30,136,229,.35);
}
.rule-icon.ic-slow  { background: linear-gradient(135deg, #4dd0e1, #0288d1); box-shadow: 0 4px 12px rgba(2,136,209,.35); }
.rule-icon.ic-shot  { background: linear-gradient(135deg, #ffb74d, #f4511e); box-shadow: 0 4px 12px rgba(244,81,30,.35); }
.rule-icon.ic-aim   { background: linear-gradient(135deg, #aed581, #2e7d32); box-shadow: 0 4px 12px rgba(46,125,50,.35); }
.rule-icon.ic-key   { background: linear-gradient(135deg, #b39ddb, #5e35b1); box-shadow: 0 4px 12px rgba(94,53,177,.35); }
.rule-icon.ic-bug   { background: linear-gradient(135deg, #ff8a65, #bf360c); box-shadow: 0 4px 12px rgba(191,54,12,.35); }
.rule-icon.ic-inf   { background: linear-gradient(135deg, #4fc3f7, #0288d1); box-shadow: 0 4px 12px rgba(2,136,209,.35); }
.rule-text { flex: 1 1 auto; min-width: 0; }
.rule-text h5 {
    margin: 0 0 3px; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; gap: 6px; color: #fff;
}
.rule-text h5 .tag {
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 20px; background: var(--accent); color: #fff;
    letter-spacing: .5px;
}
.rule-text p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--panel-sub); }

/* 记分牌 */
.board-list { list-style: none; padding: 0; margin: 6px 0 0; text-align: left; }
.board-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px; font-size: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.10);
    color: #e8f0ff;
}
.board-list li:last-child { border-bottom: none; }
.board-list .rank {
    width: 24px; height: 24px; flex: 0 0 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 11px; font-weight: 800;
    background: rgba(255,255,255,.14);
}
.board-list li:nth-child(1) .rank { background: linear-gradient(135deg,#ffd54f,#f9a825); color:#4a2c00; }
.board-list li:nth-child(2) .rank { background: linear-gradient(135deg,#cfd8dc,#90a4ae); color:#22313f; }
.board-list li:nth-child(3) .rank { background: linear-gradient(135deg,#ffcc80,#ef6c00); color:#4a2c00; }
.board-list .b-score { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============================================================
   Toast 提示
   ============================================================ */
.toast-layer {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; z-index: 2500; pointer-events: none;
}
.toast-item {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 22px; border-radius: 999px;
    font-size: 15px; font-weight: 700; letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, rgba(30,136,229,.95), rgba(67,160,71,.95));
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    animation: toastIn .28s cubic-bezier(.2,.9,.3,1.3), toastOut .45s ease 1.15s forwards;
}
.toast-item .glyphicon { font-size: 16px; }
.toast-item.t-warn { background: linear-gradient(135deg, rgba(255,152,0,.95), rgba(244,67,54,.95)); }
.toast-item.t-cool { background: linear-gradient(135deg, rgba(79,195,247,.95), rgba(41,98,255,.95)); }
.toast-item.t-dizzy { background: linear-gradient(135deg, rgba(156,39,176,.95), rgba(103,58,183,.95)); }
@keyframes toastIn {
    from { transform: translateY(16px) scale(.9); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
    to { transform: translateY(-18px) scale(.94); opacity: 0; }
}

/* ============================================================
   屏幕震动 / 动画
   ============================================================ */
@keyframes shakeX {
    0%,100% { transform: translateX(0); }
    15% { transform: translateX(-9px); }
    30% { transform: translateX(8px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}
.shake { animation: shakeX .5s ease; }

@keyframes losePulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(.93) rotate(-1.2deg); }
    60%  { transform: scale(1.04) rotate(1deg); }
    100% { transform: scale(1); }
}
.lose-anim { animation: losePulse .75s ease; }

.ov-icon {
    font-size: 46px; line-height: 1; margin-bottom: 8px;
    display: inline-block;
}
.ov-icon.win  { color: #66e39a; animation: winBounce .9s cubic-bezier(.2,.9,.3,1.4); }
.ov-icon.lose { color: #ff7b7b; animation: losePulse .8s ease; }
@keyframes winBounce {
    0%   { transform: scale(0) rotate(-30deg); }
    55%  { transform: scale(1.25) rotate(8deg); }
    75%  { transform: scale(.94) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

.btn:focus, .hud-btn:focus { outline: 2px solid rgba(79,195,247,.7); outline-offset: 2px; }

#music { display: none; }

kbd {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-radius: 4px; padding: 1px 6px;
    font-size: 12px; border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
body.theme-light kbd { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.15); }