/* =====================================================================
 * N14 / 47 · 合金弹头迷你版 —— 独立皮肤「街机机台」
 * 木纹机台框 + 灯箱 marquee + CRT 扫描线 Canvas + 圆形街机按键。
 * 主题：只消费公共导航写入的 <html data-theme>，不自建开关。
 * ===================================================================== */

.ms-page {
    --nx-bg:        #efe9dc;
    --nx-bg-2:      #e6ded0;
    --nx-surface:   #fbf7ee;
    --nx-surface-2: #f2ecdf;
    --nx-surface-3: #e7dfcd;
    --nx-ink:       #25261d;
    --nx-ink-2:     #565742;
    --nx-ink-3:     #8d8a72;
    --nx-line:      #d9d0ba;
    --nx-line-2:    #eae3d4;
    --nx-a:         #3f5a36;
    --nx-b:         #e08a2b;
    --nx-tint:      #e6ecdd;
    --nx-deep:      #2d4426;
    --ms-cab:       #2a3126;
    --ms-cab-2:     #3b4434;
    --ms-screen:    #0a1108;
    --tsk-card: #fbf7ee; --tsk-line: #d9d0ba; --tsk-faint: #8d8a72; --tsk-sub: #565742; --tsk-ink: #25261d;
}
:root[data-theme="dark"] .ms-page {
    --nx-bg:        #0d100c;
    --nx-bg-2:      #131810;
    --nx-surface:   #1a2018;
    --nx-surface-2: #222a1f;
    --nx-surface-3: #2c3627;
    --nx-ink:       #eef2e5;
    --nx-ink-2:     #b7c0a6;
    --nx-ink-3:     #86917a;
    --nx-line:      #33402e;
    --nx-line-2:    #263023;
    --nx-a:         #93b57d;
    --nx-b:         #e8a44e;
    --nx-tint:      rgba(147, 181, 125, .16);
    --nx-deep:      #b9d7a2;
    --ms-cab:       #161c14;
    --ms-cab-2:     #222b1c;
    --ms-screen:    #050a04;
    --tsk-card: #1a2018; --tsk-line: #33402e; --tsk-faint: #86917a; --tsk-sub: #b7c0a6; --tsk-ink: #eef2e5;
}

.ms-page .n14-hero h1 em { color: var(--nx-b); }
.ms-hero { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ms-note { margin-top: 18px; max-width: 52ch; }

/* 街机机台 */
.ms-cabinet { background: var(--ms-cab); border: 3px solid #59634a; border-radius: 18px; padding: 12px; box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); }
.ms-marquee { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-radius: 9px 9px 3px 3px; background: linear-gradient(100deg, var(--nx-b), #f0b45a 55%, var(--nx-b)); color: #2b1b06; }
.ms-marquee span { font-family: var(--nx-mono); font-size: 20px; font-weight: 800; letter-spacing: .18em; }
.ms-marquee small { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .08em; opacity: .8; }
.ms-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #1b2218; margin: 9px 0; border-radius: 6px; overflow: hidden; }
.ms-hud div { background: var(--ms-cab-2); padding: 8px 10px; }
.ms-hud span { display: block; font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .14em; color: #a5b394; }
.ms-hud b { display: block; font-family: var(--nx-mono); font-size: 17px; color: #f0c477; line-height: 1.35; }

.ms-screen { position: relative; background: var(--ms-screen); border: 5px solid #10160e; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 34px rgba(0,0,0,.8); }
.ms-screen canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: pointer; }
.ms-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); opacity: .55; }
.ms-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px; box-shadow: inset 0 0 60px rgba(0,0,0,.5); }

.ms-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 11px; }
.ms-touch { display: flex; gap: 8px; }
.ms-key { width: 46px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,.14); border-bottom-width: 5px; background: #4c5741; color: #f3f6e9; font-family: var(--nx-mono); font-size: 15px; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; }
.ms-key:active, .ms-key[data-on="1"] { transform: translateY(2px); border-bottom-width: 3px; background: var(--nx-a); }
.ms-key--fire { background: #a4442f; width: 58px; border-radius: 24px; font-size: 12px; }
.ms-key--fire:active, .ms-key--fire[data-on="1"] { background: #c85c3c; }
.ms-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ms-actions .n14-btn { background: var(--ms-cab-2); border-color: #4d5a42; color: #eef2e5; }
.ms-actions .n14-btn:hover { color: #fff; border-color: var(--nx-b); }
.ms-actions .n14-btn--primary { background: var(--nx-b); border-color: var(--nx-b); color: #2b1b06; }
.ms-sound { color: #c7d2b9; font-size: 11.5px; }
.ms-status { margin: 10px 4px 2px; font-family: var(--nx-mono); font-size: 10.5px; line-height: 1.7; color: #a5b394; }

.ms-split { align-items: start; }
.ms-codearea { font-family: var(--nx-mono); font-size: 12px; min-height: 150px; }
.ms-bindmsg { margin-top: 14px; white-space: pre-line; }
.ms-scorewrap { max-height: 230px; overflow: auto; }
.ms-page .n14-table tbody tr[data-ms-active="1"] td { background: var(--nx-tint); }

@media (max-width: 980px) {
    .ms-hero { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ms-cabinet { padding: 8px; }
    .ms-marquee span { font-size: 15px; }
    .ms-hud b { font-size: 13px; }
    .ms-key { width: 40px; height: 38px; }
    .ms-key--fire { width: 50px; }
}