/*!
 * 太空侵略者 · space-invaders
 * 独立设计系统「太空 CRT」：深空黑 + 荧光绿 + 品红 + 电蓝
 * 字体层级：等宽像素标题、发光字；画布带扫描线叠层与荧光边框
 */
.siv-page, .siv-modal, .siv-toast {
    --siv-bg: #f0f3ee;
    --siv-card: #ffffff;
    --siv-card2: #e9efe7;
    --siv-line: #ced9c9;
    --siv-ink: #17221a;
    --siv-ink2: #617061;
    --siv-green: #2f8f38;
    --siv-green-soft: rgba(47, 143, 56, .12);
    --siv-pink: #b32c6f;
    --siv-cyan: #147d92;
    --siv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}
:root[data-theme="dark"] .siv-page, :root[data-theme="dark"] .siv-modal, :root[data-theme="dark"] .siv-toast {
    --siv-bg: #080c09;
    --siv-card: #101710;
    --siv-card2: #162017;
    --siv-line: #2a3a2b;
    --siv-ink: #e7f7e6;
    --siv-ink2: #95ad94;
    --siv-green: #7cf65c;
    --siv-green-soft: rgba(124, 246, 92, .13);
    --siv-pink: #ff5fae;
    --siv-cyan: #4ad9f2;
}
/* 浅色主题：页面亮、街机屏幕保持深色，是完整的浅色设计 */
:root:not([data-theme="dark"]) .siv-hero { --siv-hero-bg: #101b10; }
.siv-page { background: var(--siv-bg); color: var(--siv-ink); font-family: var(--siv-mono); font-size: 14px; line-height: 1.75; }
.siv-page *, .siv-page *::before, .siv-page *::after { box-sizing: border-box; }
.siv-wrap { max-width: 1140px; margin: 0 auto; padding: 20px 16px 12px; }
.siv-page .detail-breadcrumb { margin: 0 0 16px; font-size: 12px; color: var(--siv-ink2); }
.siv-page .detail-breadcrumb a { color: var(--siv-green); text-decoration: none; }
.siv-page .detail-breadcrumb .sep { margin: 0 8px; opacity: .6; }

/* ---------- Hero ---------- */
.siv-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: center; padding: 26px 30px; border: 1px solid var(--siv-line); border-radius: 8px; background: radial-gradient(90% 120% at 100% 0, rgba(179, 44, 111, .13), transparent 60%), linear-gradient(150deg, #0d160d, #172517); color: #e8fbe4; }
:root:not([data-theme="dark"]) .siv-hero { background: radial-gradient(90% 120% at 100% 0, rgba(255, 95, 174, .18), transparent 60%), linear-gradient(150deg, #101b10, #1b2c1a); }
.siv-kicker { font-size: 10px; letter-spacing: .2em; color: #7cf65c; }
.siv-hero h1 { margin: 10px 0 6px; font: 800 clamp(28px, 3.5vw, 42px)/1.2 var(--siv-mono); letter-spacing: .04em; color: #7cf65c; text-shadow: 0 0 16px rgba(124, 246, 92, .45); }
.siv-sub { margin: 0 0 18px; color: #b9cfb6; font-size: 14px; }
.siv-sub b { color: #ff8acb; }
.siv-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.siv-cta { cursor: pointer; border: 0; border-radius: 4px; padding: 11px 24px; font: 800 14px var(--siv-mono); color: #071007; background: #7cf65c; box-shadow: 0 0 22px rgba(124, 246, 92, .45); }
.siv-cta:hover { filter: brightness(1.1); }
.siv-ghost, .siv-mini { cursor: pointer; border: 1px solid #355036; border-radius: 4px; background: #162417; color: #d9f2d3; font: 700 12px var(--siv-mono); padding: 10px 16px; }
.siv-mini { padding: 7px 11px; border-color: var(--siv-line); background: var(--siv-card); color: var(--siv-ink); }
.siv-mini:disabled { opacity: .45; cursor: not-allowed; }
.siv-ghost:hover, .siv-mini:hover:not(:disabled) { border-color: #7cf65c; color: #7cf65c; }
.siv-hero-note { margin: 14px 0 0; font-size: 11px; color: #9fbb9c; }
.siv-alien { justify-self: center; text-align: center; color: #7cf65c; text-shadow: 0 0 12px rgba(124, 246, 92, .6); }
.siv-alien pre { margin: 0; font: 700 15px/1.3 var(--siv-mono); }
.siv-alien span { display: block; margin-top: 12px; color: #ff5fae; letter-spacing: 1.2em; font-size: 13px; }

/* ---------- 面板 ---------- */
.siv-panel { margin-top: 18px; border: 1px solid var(--siv-line); border-radius: 8px; background: var(--siv-card); overflow: hidden; }
.siv-topbar { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--siv-line); background: var(--siv-green-soft); }
.siv-metric { padding: 10px 12px; border-right: 1px dashed var(--siv-line); }
.siv-metric:last-child { border-right: 0; }
.siv-metric span { display: block; font-size: 9px; letter-spacing: .12em; color: var(--siv-ink2); }
.siv-metric b { font: 800 18px var(--siv-mono); color: var(--siv-green); }
.siv-main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.siv-stage { min-width: 0; position: relative; padding: 16px; background: #050905; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.siv-stage::after { content: ''; position: absolute; inset: 16px; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px); }
.siv-stage canvas { width: min(480px, 100%); height: auto; border: 2px solid #2c4a2c; border-radius: 4px; background: #030603; image-rendering: pixelated; }
.siv-overlay { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; padding: 10px 16px; border: 1px solid #7cf65c; border-radius: 4px; background: rgba(4, 10, 4, .9); color: #7cf65c; font-size: 12px; pointer-events: none; }
.siv-overlay[hidden] { display: none !important; }
.siv-controls { position: relative; z-index: 3; display: flex; gap: 10px; }
.siv-controls button { min-width: 60px; padding: 9px 14px; border: 1px solid #3c6b3c; border-radius: 4px; background: #10200f; color: #7cf65c; font: 800 13px var(--siv-mono); cursor: pointer; }
.siv-controls button:active { background: #7cf65c; color: #061006; }

/* ---------- 侧栏 ---------- */
.siv-side { min-width: 0; padding: 16px; border-left: 1px solid var(--siv-line); background: var(--siv-card2); }
.siv-side-title { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; color: var(--siv-green); }
.siv-side-title:not(:first-child) { margin-top: 18px; }
.siv-l { display: block; margin: 8px 0 4px; font-size: 11px; color: var(--siv-ink2); }
.siv-input { width: 100%; min-width: 0; border: 1px solid var(--siv-line); border-radius: 4px; padding: 8px 9px; background: var(--siv-card); color: var(--siv-ink); font: 12px var(--siv-mono); }
.siv-input:focus { outline: 2px solid var(--siv-green); outline-offset: 1px; }
.siv-validate { min-height: 20px; margin: 6px 0 0; font-size: 11px; color: var(--siv-pink); }
.siv-row { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.siv-score { font: 11px/2 var(--siv-mono); }
.siv-score div { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--siv-line); }
.siv-score b { color: var(--siv-green); }
.siv-rank { margin: 0; padding-left: 18px; font: 11px/1.9 var(--siv-mono); color: var(--siv-ink2); max-height: 110px; overflow: auto; }

/* ---------- 实验室 ---------- */
.siv-lab { margin-top: 18px; padding: 22px; border: 1px solid var(--siv-line); border-radius: 8px; background: var(--siv-card); }
.siv-lab-head h2 { margin: 0 0 4px; font-size: 18px; color: var(--siv-green); }
.siv-lab-head p { margin: 0 0 16px; font-size: 12px; color: var(--siv-ink2); }
.siv-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.siv-lab-box { min-width: 0; padding: 16px; border: 1px dashed var(--siv-line); border-radius: 6px; background: var(--siv-card2); }
.siv-lab-box label { display: block; margin-bottom: 8px; font-size: 11px; }
.siv-ta { width: 100%; min-width: 0; border: 1px solid var(--siv-line); border-radius: 4px; padding: 8px; background: var(--siv-card); color: var(--siv-ink); font: 12px/1.6 var(--siv-mono); resize: vertical; }
.siv-batch { margin-top: 10px; font: 11px/1.9 var(--siv-mono); white-space: pre-wrap; color: var(--siv-green); }
.siv-note { font: 11px/1.9 var(--siv-mono); color: var(--siv-ink2); }

/* ---------- 弹窗 / toast ---------- */
.siv-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 8, 3, .85); }
.siv-modal[hidden] { display: none !important; }
.siv-modal-box { position: relative; width: min(400px, 100%); padding: 28px; border: 2px solid #7cf65c; border-radius: 6px; background: #0b150b; color: #e7f7e6; text-align: center; box-shadow: 0 0 42px rgba(124, 246, 92, .2); }
.siv-modal-x { position: absolute; right: 12px; top: 6px; border: 0; background: transparent; font-size: 25px; color: #9fbb9c; cursor: pointer; }
.siv-modal-badge { font-size: 10px; letter-spacing: .26em; color: #ff5fae; }
.siv-modal-box h2 { margin: 10px 0 4px; font-size: 23px; color: #7cf65c; }
.siv-modal-box p { margin: 0 0 14px; color: #9fbb9c; font-size: 12px; }
.siv-modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; font-size: 11px; }
.siv-modal-stats div { padding: 8px 2px; border: 1px solid #2c4a2c; }
.siv-modal-stats b { display: block; font-size: 18px; color: #4ad9f2; }
.siv-modal-label { display: block; margin-bottom: 6px; font-size: 11px; color: #9fbb9c; }
.siv-modal-input { width: 100%; margin-bottom: 14px; padding: 8px 10px; border: 1px solid #2c4a2c; border-radius: 4px; background: #122012; color: #e7f7e6; font: 12px var(--siv-mono); }
.siv-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9500; padding: 10px 18px; border-radius: 4px; background: #7cf65c; color: #061006; font: 12px var(--siv-mono); opacity: 0; pointer-events: none; transition: opacity .25s; }
.siv-toast.on { opacity: 1; }

@media (max-width: 940px) {
    .siv-hero { grid-template-columns: 1fr; }
    .siv-alien { display: none; }
    .siv-main { grid-template-columns: 1fr; }
    .siv-side { border-left: 0; border-top: 1px solid var(--siv-line); }
    .siv-lab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .siv-topbar { grid-template-columns: repeat(3, 1fr); }
    .siv-metric { padding: 8px; }
    .siv-metric b { font-size: 15px; }
    .siv-hero h1 { font-size: 27px; }
}