:root { color-scheme: dark; --bg:#080d12; --panel:#10171d; --line:#243239; --muted:#82918d; --text:#e9f0ed; --green:#a9f36c; --mono:"DM Mono",Consolas,monospace; --sans:"Manrope","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(ellipse at 28% 0%,rgba(37,69,60,.2),transparent 42%),var(--bg); font-family:var(--sans); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.15; background-image:linear-gradient(rgba(130,168,151,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(130,168,151,.06) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
button,a { font:inherit; } button { color:inherit; }
.arcade-shell { position:relative; width:min(1370px,calc(100% - 64px)); margin:0 auto; }
.arcade-topbar { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(138,160,151,.13); }
.arcade-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:11px; font-weight:800; letter-spacing:.13em; }
.arcade-brand b { color:var(--green); font-weight:800; }
.arcade-brand-mark { width:24px; height:24px; display:grid; grid-template-columns:repeat(2,7px); grid-template-rows:repeat(2,7px); gap:3px; transform:rotate(-12deg); }
.arcade-brand-mark i { border:1px solid var(--green); border-radius:2px; box-shadow:0 0 8px #a9f36655; }
.arcade-top-note,.arcade-home { color:#82918a; font:9px var(--mono); letter-spacing:.08em; }
.arcade-top-note { display:flex; align-items:center; gap:8px; }
.arcade-top-note i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.arcade-home { color:#bdc9c1; text-decoration:none; transition:color .2s; }.arcade-home:hover { color:var(--green); }
.arcade-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:38px; padding:42px 0 55px; align-items:start; }
.arcade-main { min-width:0; }
.arcade-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:0 auto 17px; width:min(100%,960px); }
.arcade-eyebrow,.arcade-board-top,.arcade-board-footer,.arcade-card-label,.arcade-foot,.arcade-mini-label { font-family:var(--mono); letter-spacing:.07em; }
.arcade-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 9px; color:#80908d; font-size:8px; }
.arcade-eyebrow span { width:18px; height:1px; background:var(--green); }
.arcade-heading h1 { margin:0; font-size:clamp(28px,3.3vw,40px); line-height:1.08; letter-spacing:-.06em; }
.arcade-description { margin:8px 0 0; color:#91a09a; font-size:11px; line-height:1.6; }
.mode-switch,.series-switch { height:32px; display:inline-flex; align-items:center; gap:7px; padding:0 9px; border:1px solid #2b3b36; border-radius:18px; background:#111a1a; color:#c5d0ca; font:8px var(--mono); letter-spacing:.04em; white-space:nowrap; cursor:pointer; transition:border-color .2s; }
.mode-switch:hover,.series-switch:hover { border-color:#6d9856; }
.switch-orb { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.switch-state { color:var(--green); }
.mode-switch.is-off .switch-orb,.series-switch.is-off .switch-orb { background:#74817c; box-shadow:none; }
.mode-switch.is-off .switch-state,.series-switch.is-off .switch-state { color:#8b9993; }
.arcade-board-frame { width:min(100%,960px); margin:0 auto; padding:11px; border:1px solid #26343a; border-radius:8px; background:linear-gradient(145deg,rgba(20,30,33,.95),rgba(11,17,22,.97)); box-shadow:0 22px 60px #0005,inset 0 1px #ffffff08; }
.arcade-board-top { height:27px; display:flex; align-items:flex-start; justify-content:space-between; padding:1px 3px 8px; color:#788781; font-size:8px; }
.arcade-board-top span:first-child { display:flex; align-items:center; gap:7px; }
.arcade-board-top .mini-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); }
#gameState { color:var(--green); }.is-alert { color:#ff927b !important; }
.arcade-board { position:relative; overflow:hidden; border-radius:4px; background:#0b1517; line-height:0; }
.arcade-board canvas { display:block; width:100%; height:auto; aspect-ratio:16/10; }
.arcade-overlay { position:absolute; inset:0; z-index:2; display:grid; place-items:center; line-height:1.5; background:rgba(5,10,12,.68); backdrop-filter:blur(4px); }
.arcade-overlay[hidden] { display:none; }
.arcade-overlay-card { width:min(370px,calc(100% - 30px)); padding:27px 24px 23px; text-align:center; border:1px solid #34483d; border-radius:8px; background:rgba(13,22,21,.96); box-shadow:0 18px 60px #0008; }
.overlay-mark { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 13px; border:1px solid #49683b; border-radius:50%; color:var(--green); font-size:21px; }
.overlay-kicker { margin:0 0 7px; color:var(--green); font:8px var(--mono); letter-spacing:.1em; }
.arcade-overlay h2 { margin:0 0 8px; font-size:22px; letter-spacing:-.04em; }
.arcade-overlay p:not(.overlay-kicker) { margin:0 auto 17px; max-width:290px; color:#a0ada6; font-size:11px; line-height:1.65; }
.arcade-overlay-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.arcade-button { height:39px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 13px; border:1px solid #2a373c; border-radius:5px; background:#172126; color:#c1ccc8; font-size:10px; font-weight:700; cursor:pointer; transition:transform .16s,border-color .16s; }
.arcade-button:hover { transform:translateY(-1px); border-color:#647a61; }
.arcade-button.primary { border:0; background:var(--green); color:#13200f; }
.arcade-button.log { color:var(--green); border-color:#34513a; background:transparent; }
.arcade-button[hidden] { display:none; }
.arcade-board-footer { min-height:30px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 3px 0; color:#73827d; font-size:8px; }
.arcade-decision { overflow:hidden; max-width:50%; text-overflow:ellipsis; white-space:nowrap; color:#a6b2aa; }
.arcade-controls { width:min(100%,960px); display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:13px auto 0; }
.arcade-controls .arcade-button { height:38px; }
.sound-settings { height:38px; display:inline-flex; align-items:center; gap:8px; padding:0 9px; border:1px solid #29383b; border-radius:5px; background:#111a1e; }
.sound-toggle { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:transparent; color:#b8c6be; cursor:pointer; font:8px var(--mono); letter-spacing:.04em; white-space:nowrap; }
.sound-toggle.is-off,.sound-toggle.is-off .sound-icon { color:#75827e; }
.sound-icon { color:var(--green); font-size:13px; }
#soundVolume { width:58px; height:3px; accent-color:var(--green); }
.arcade-manual-hint { margin-left:auto; color:#788680; font-size:9px; }
.arcade-side { display:flex; flex-direction:column; gap:12px; padding-top:44px; }
.arcade-stat-card,.arcade-info-card,.arcade-log-card { border:1px solid #202d32; border-radius:7px; background:linear-gradient(145deg,rgba(17,25,30,.95),rgba(13,19,23,.95)); }
.arcade-stat-card { padding:17px 18px; }
.arcade-card-label { display:flex; justify-content:space-between; gap:10px; color:#87938f; font-size:8px; }
.arcade-score { padding:17px 0 15px; }
.arcade-score small { display:block; color:#72817c; font:8px var(--mono); letter-spacing:.07em; }
.arcade-score strong { display:block; margin-top:2px; font-size:49px; font-weight:600; line-height:1.05; letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
.arcade-divider { height:1px; margin-bottom:8px; background:#222e32; }
.arcade-metric { display:flex; align-items:baseline; justify-content:space-between; padding:7px 0; color:#899691; font-size:10px; }
.arcade-metric strong { color:#dce5e0; font:12px var(--mono); font-variant-numeric:tabular-nums; }
.arcade-metric .accent { color:var(--green); }
.arcade-info-card { padding:16px 18px; background:linear-gradient(130deg,#14211d,#101a1b 65%,#111b1c); border-color:#293b33; }
.arcade-info-card h2 { margin:13px 0 6px; font-size:14px; letter-spacing:-.03em; }
.arcade-info-card p { margin:0; color:#93a099; font-size:10px; line-height:1.65; }
.arcade-scanline { height:1px; margin:14px 0 10px; background:#293833; }
.arcade-scanline span { display:block; width:32%; height:1px; background:var(--green); box-shadow:0 0 7px var(--green); animation:arcade-scan 2.4s ease-in-out infinite alternate; }
@keyframes arcade-scan { to { transform:translateX(190%); } }
.arcade-info-foot { display:flex; justify-content:space-between; color:#718078; font:7px var(--mono); letter-spacing:.06em; }
.arcade-info-foot strong { color:var(--green); font-weight:400; }
.arcade-log-card { padding:12px 14px; color:#9aa69f; font-size:9px; line-height:1.6; }
.arcade-foot { display:flex; justify-content:space-between; gap:10px; padding:2px 1px; color:#596762; font-size:7px; }
kbd { display:inline-grid; min-width:18px; height:16px; place-items:center; padding:0 4px; border:1px solid #2b383a; border-radius:3px; color:#a5b1ab; font:8px var(--mono); background:#111a1d; }
@media(max-width:1000px) { .arcade-shell{width:min(100% - 36px,850px)} .arcade-layout{grid-template-columns:1fr;gap:23px;padding-top:30px}.arcade-side{padding-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.arcade-stat-card{grid-row:span 2}.arcade-foot{grid-column:1/-1} }
@media(max-width:560px) { .arcade-shell{width:calc(100% - 20px)}.arcade-topbar{height:60px}.arcade-top-note{display:none}.arcade-layout{padding-top:22px}.arcade-heading{align-items:flex-start;flex-direction:column;gap:10px}.arcade-heading h1{font-size:28px}.arcade-board-frame{padding:7px}.arcade-board-top{font-size:7px}.arcade-board-footer{font-size:7px}.arcade-manual-hint{margin-left:0}.arcade-side{display:flex}.arcade-overlay-card{padding:20px 15px}.arcade-score strong{font-size:42px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }