:root{--accent:#9edabb;--accent-rgb:158,218,187;--ink:#080e19;--glass:#121e2b;--quiet:#8fa4ad;--line-soft:rgba(164,195,205,.13)}
body[data-game="meteor-storm"],body[data-game="star-siege"]{--accent:#9abce8;--accent-rgb:154,188,232}
body[data-game="air-raid"],body[data-game="missile-defense"]{--accent:#e4be8a;--accent-rgb:228,190,138}
body[data-game="sector-assault"]{--accent:#8ed5d3;--accent-rgb:142,213,211}
body[data-game="egg-catcher"],body[data-game="autodrom"]{--accent:#c8d4a0;--accent-rgb:200,212,160}
body[data-game="blockfall"]{--accent:#b7ade0;--accent-rgb:183,173,224}
body{--green:var(--accent);background:radial-gradient(ellipse at 16% 0%,rgba(var(--accent-rgb),.075),transparent 48%),radial-gradient(ellipse at 94% 50%,#1a2a3a38,transparent 55%),var(--ink);color:#e5edf0}
body::before{opacity:.08;background-size:64px 64px}
.arcade-shell{width:min(1320px,calc(100% - 64px))}
.arcade-layout{grid-template-columns:minmax(0,1fr) 254px;gap:26px;padding-top:36px}
.arcade-topbar,.topbar{border-bottom-color:var(--line-soft)}
.arcade-brand b,.brand-accent{color:var(--accent)}
.arcade-heading h1{font-weight:700;letter-spacing:-.045em}
.arcade-description{max-width:610px;color:#91a6b0;line-height:1.75}
.arcade-eyebrow{color:#7f99a2;letter-spacing:.13em;font-size:8px}
.arcade-board-frame{padding:12px;border-radius:15px;border-color:#334650;background:linear-gradient(155deg,#1b2a34,#0e1824 55%);box-shadow:0 26px 80px #0007,inset 0 1px #d1ecff12}
.arcade-board{border-radius:7px;box-shadow:0 0 0 1px #0008,inset 0 0 30px #0005}
.arcade-board-top,.arcade-board-footer{color:#7c97a3;font-size:8px;letter-spacing:.085em}
.arcade-board-top{height:30px;align-items:center;padding-bottom:9px}
.arcade-board-footer{padding-top:12px;min-height:30px;gap:8px}
.arcade-board-top .mini-dot,.switch-orb{background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.4)}
#gameState,.arcade-decision,.switch-state{color:var(--accent)}
.arcade-side{gap:14px;padding-top:48px}
.arcade-stat-card,.arcade-info-card,.arcade-log-card{border-radius:12px;border-color:var(--line-soft);background:linear-gradient(145deg,#15232edb,#0e1824eb);box-shadow:inset 0 1px #e5ffff05}
.arcade-stat-card{padding:20px}
.arcade-score strong{font-size:54px;font-weight:500;letter-spacing:-.065em;color:#edf4f1;text-shadow:0 0 28px rgba(var(--accent-rgb),.1)}
.arcade-info-card{padding:18px;background:linear-gradient(140deg,rgba(var(--accent-rgb),.07),#101b27 78%)}
.arcade-info-card h2{font-size:16px;line-height:1.35;margin-top:18px;font-weight:650}
.arcade-info-card p{color:#8fa7af;line-height:1.8;font-size:10px}
.arcade-card-label{font-size:8px;color:#91a8af}
.arcade-scanline{background:#263940}.arcade-scanline span{background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.35)}
.arcade-info-foot{font-size:6px;letter-spacing:.04em}.arcade-info-foot strong{color:var(--accent)}
.arcade-button{border-radius:7px;border-color:#30434d;background:#14212b;color:#c7d6dc;min-height:36px;transition:background .18s,transform .18s,border-color .18s}
.arcade-button:hover{background:#20323c;border-color:#5e7a83;transform:translateY(-1px)}
.arcade-button.primary{background:var(--accent);border-color:var(--accent);color:#10242a;font-weight:700;box-shadow:0 3px 16px rgba(var(--accent-rgb),.1)}
.mode-switch,.series-switch{background:#13212a;border-color:#2b414b;height:32px;font-size:7px;color:#b0c2cc}
.arcade-controls{gap:9px;margin-top:16px;align-items:center}
.sound-settings{flex-wrap:wrap;gap:9px;max-width:100%;padding:6px 9px;border:1px solid #243b45;border-radius:9px;background:#101c27}
.sound-toggle{font-size:8px;color:#b8cbd1}.sound-settings input[type="range"]{width:62px;accent-color:var(--accent)}
.effects-control{display:inline-flex;align-items:center;gap:5px;padding-left:8px;border-left:1px solid #30434d;line-height:1}
.effects-control button{background:none;border:0;padding:4px 0;color:#9bb4bc;font:7px var(--mono);cursor:pointer;white-space:nowrap}
.effects-control button[aria-pressed="false"]{opacity:.5}
.effects-control input[type="range"]{width:45px}
.arcade-manual-hint{color:#637e8a;font-size:8px}
.arcade-overlay{background:#040c17b0;backdrop-filter:blur(7px)}
.arcade-overlay-card{border-radius:15px;border-color:#42616b;background:linear-gradient(140deg,#172e36,#0e1926);box-shadow:0 30px 100px #0008}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{width:min(1160px,calc(100% - 56px))}
.intro{padding:65px 0 35px}.intro h1{font-weight:650;letter-spacing:-.055em;max-width:770px}
.intro-copy{max-width:640px;line-height:1.8;color:#90a7b1}
.game-grid{gap:20px}
.game-card{border-radius:14px;border-color:#283c49;background:linear-gradient(145deg,#172530,#0e1825);box-shadow:inset 0 1px #e0faff08}
.game-card:hover{transform:translateY(-5px);border-color:#638c92;box-shadow:0 25px 65px #0006}
.game-art{height:190px;margin:12px 12px 0;border-radius:8px;border-color:#284550}
.game-art.has-cover{height:auto;aspect-ratio:16/9;background:#0b1620}
.game-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s;filter:none}
.game-card:hover .game-art img{transform:scale(1.035)}
.game-art.has-cover>*:not(img){display:none}.game-art.has-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff05,transparent 35%,#02091218);box-shadow:inset 0 0 0 1px #ffffff0a;pointer-events:none}
.card-top{font-size:7px;letter-spacing:.1em;color:#7895a2}.card-status{color:#adc8bb;font-size:6px;letter-spacing:.08em}.card-status i{background:#9acbb0;box-shadow:0 0 7px #9acbb044}
.card-copy h2{font-size:25px;letter-spacing:-.035em}.card-copy>p:last-child{font-size:11px;color:#91a8b2;line-height:1.75}
.card-copy{padding:20px 20px 16px}.card-bottom{border-color:#263e49;color:#8eafb8;font-size:7px}
.footer{border-color:var(--line-soft)}
body[data-game="snake"] .board-frame,body[data-game="blockfall"] .board-frame{border-color:#344a54;border-radius:14px;box-shadow:0 25px 70px #0006}
body[data-game="blockfall"] .blockfall-frame{background:linear-gradient(155deg,#242a42,#111d2a);border-radius:12px}
@media(min-width:701px) and (max-width:1000px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.arcade-layout{grid-template-columns:1fr}.arcade-shell{width:min(880px,calc(100% - 32px))}.arcade-side{padding-top:0;display:grid;grid-template-columns:1fr 1fr}.arcade-side .arcade-stat-card{grid-row:span 2}.arcade-board-frame{max-width:880px}}
@media(max-width:560px){.arcade-shell,.shell{width:calc(100% - 20px)}.arcade-layout{gap:18px;padding-top:24px}.arcade-side{display:flex}.arcade-heading h1{font-size:30px}.arcade-board-frame{padding:8px;border-radius:10px}.arcade-board-footer{font-size:6px;flex-wrap:wrap}.arcade-controls{gap:7px}.arcade-button{font-size:9px;padding:0 10px}.sound-settings{width:100%;justify-content:center}.intro{padding-top:38px}.intro h1{font-size:41px}.game-art{height:195px}.effects-control input[type="range"]{width:65px}}
@media(prefers-reduced-motion:reduce){.game-card:hover,.arcade-button:hover{transform:none}.game-card:hover .game-art img{transform:none}}

/* Keep the existing quiet palette; the preview is a small, silent model scene. */
.game-card{--card-accent:#9edabb;position:relative;isolation:isolate}
.game-card[data-preview-game="blockfall"]{--card-accent:#b7ade0}
.game-card[data-preview-game="meteor-storm"],.game-card[data-preview-game="star-siege"]{--card-accent:#9abce8}
.game-card[data-preview-game="air-raid"],.game-card[data-preview-game="missile-defense"]{--card-accent:#e4be8a}
.game-card[data-preview-game="egg-catcher"],.game-card[data-preview-game="autodrom"]{--card-accent:#c8d4a0}
.game-card:is(:hover,:focus-visible){border-color:var(--card-accent);transform:translateY(-3px);box-shadow:0 20px 45px #0005,inset 0 1px #e0faff10}
.game-card:focus-visible{outline:2px solid var(--card-accent);outline-offset:4px}
.game-card .card-bottom strong{color:var(--card-accent);display:grid;place-items:center;width:25px;height:25px;border:1px solid #9dbfc326;border-radius:50%;font-size:14px}
.game-card.is-previewing .card-status i{background:var(--card-accent)}
.game-art.has-cover>.game-preview{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .26s;pointer-events:none}
.game-card.is-previewing .game-preview[data-ready="true"]{opacity:1}
.game-art.has-cover>.preview-badge{display:flex;align-items:center;gap:6px;position:absolute;inset-inline-start:12px;bottom:12px;z-index:2;padding:6px 8px;border:1px solid #c8e8df2b;border-radius:4px;background:#0c1728de;color:#dceae4;font:8px var(--mono);letter-spacing:.07em;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;pointer-events:none}
.preview-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--card-accent)}
.game-card.is-previewing .preview-badge{opacity:1;transform:none}
body:is([data-game="snake"],[data-game="blockfall"]) .app-shell{width:min(1320px,calc(100% - 64px))}
body:is([data-game="snake"],[data-game="blockfall"]) .layout{grid-template-columns:minmax(0,660px) 280px;justify-content:center;gap:28px;padding-top:36px}
body:is([data-game="snake"],[data-game="blockfall"]) :is(.game-heading,.board-frame,.control-row){width:100%}
body:is([data-game="snake"],[data-game="blockfall"]) .side-column{padding-top:48px}
body:is([data-game="snake"],[data-game="blockfall"]) :is(.stats-card,.record-card,.about-card){border-radius:12px;border-color:var(--line-soft);background:linear-gradient(145deg,#15232edb,#0e1824eb)}
body:is([data-game="snake"],[data-game="blockfall"]) .board-frame{background:linear-gradient(155deg,#1b2a34,#0e1824 55%)}
body:is([data-game="snake"],[data-game="blockfall"]) .board-wrap{border-radius:7px}
@media(max-width:1050px){body:is([data-game="snake"],[data-game="blockfall"]) .layout{grid-template-columns:minmax(0,1fr) 250px;gap:22px}}
@media(max-width:760px){body:is([data-game="snake"],[data-game="blockfall"]) .app-shell{width:min(560px,calc(100% - 24px))}body:is([data-game="snake"],[data-game="blockfall"]) .layout{display:flex;padding-top:28px}body:is([data-game="snake"],[data-game="blockfall"]) .side-column{padding-top:0}}
@media(prefers-reduced-motion:reduce){.game-card:is(:hover,:focus-visible){transform:none}.game-preview,.preview-badge{transition:none!important}}