@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#f7f4ed; --muted:#a8a4ad; --dark:#080910; --panel:#151724; --acid:#d7ff44; color-scheme:dark; font-family:"Space Grotesk",system-ui,sans-serif; background:var(--dark); color:var(--ink); }
* { box-sizing:border-box; } body { min-width:320px; margin:0; background:radial-gradient(ellipse 60% 40% at 50% -10%,#39305e 0%,transparent 65%),var(--dark); } button { font:inherit; color:inherit; cursor:pointer; }.shell { width:min(1240px,calc(100% - 40px)); margin:auto; padding:24px 0 60px; }
.site-header { min-height:58px; display:flex; align-items:center; justify-content:space-between; }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; letter-spacing:-.08em; font-size:27px; line-height:.75; }.brand b { font-weight:700; }.brand em { color:var(--acid); font-style:normal; }.brand small { display:block; margin-top:7px; color:var(--muted); font:8px "DM Mono",monospace; letter-spacing:.15em; }.brand-mark { display:grid; width:35px; height:35px; place-items:center; border-radius:10px 10px 2px 10px; color:var(--dark); background:var(--acid); font-weight:700; letter-spacing:0; }.header-actions { display:flex; gap:12px; align-items:center; }.disc-note { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.12em; }.ghost-button { min-height:38px; padding:0 13px; border:1px solid #363a4c; border-radius:8px; background:#171925; font-size:13px; }.ghost-button:hover { border-color:var(--acid); } kbd { margin-left:5px; padding:2px 4px; border:1px solid #4e5060; border-radius:3px; color:#a6a3af; font:10px "DM Mono",monospace; }
.menu-layout { display:grid; min-height:clamp(500px,70vh,740px); grid-template-columns:minmax(0,1.22fr) minmax(330px,.78fr); overflow:hidden; border:1px solid #45485a; border-radius:20px; background:#12141e; box-shadow:0 30px 100px rgba(0,0,0,.42); }.menu-stage { position:relative; overflow:hidden; background:#05060a; }.menu-image { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; }.page-indicator { position:absolute; top:27px; left:30px; display:flex; align-items:baseline; gap:7px; text-shadow:0 2px 8px #000; }.page-indicator span { color:var(--acid); font:10px "DM Mono",monospace; letter-spacing:.12em; }.page-indicator b { font-size:32px; letter-spacing:-.08em; }.page-indicator i { color:#d4d0d9; font:13px "DM Mono",monospace; font-style:normal; }.page-nav { position:absolute; right:24px; bottom:24px; display:flex; gap:8px; }.page-button { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(255,255,255,.5); border-radius:8px; background:rgba(10,12,18,.8); backdrop-filter:blur(8px); }.page-button span { color:var(--acid); font-size:21px; line-height:1; }.page-button small { font:12px "DM Mono",monospace; }.page-button:hover { border-color:var(--acid); background:#171a24; }
.game-strip { display:grid; grid-template-rows:repeat(10,minmax(0,1fr)); gap:7px; padding:18px; background:linear-gradient(155deg,#1c2030,#11131e); }.game-choice { display:flex; min-width:0; align-items:center; gap:10px; overflow:hidden; padding:0 11px; border:1px solid #343849; border-radius:8px; background:#171a28; text-align:left; transition:.18s transform,.18s border-color,.18s background; }.game-choice span { flex:0 0 auto; color:var(--acid); font:10px "DM Mono",monospace; letter-spacing:.08em; }.game-choice b { overflow:hidden; flex:1; font-size:15px; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }.game-choice i { flex:0 0 auto; color:#aaa7b0; font:9px "DM Mono",monospace; font-style:normal; letter-spacing:.08em; }.game-choice:hover { border-color:var(--acid); background:#242a3a; transform:translateX(-2px); }.game-choice:hover i { color:var(--acid); }
@media (max-width:820px) { .shell { width:min(100% - 24px,1240px); padding-top:14px; }.disc-note { display:none; }.menu-layout { grid-template-columns:minmax(0,1fr) 290px; border-radius:14px; }.page-indicator { top:18px; left:20px; }.page-nav { right:16px; bottom:16px; }.game-strip { padding:12px; }.game-choice { gap:7px; padding:0 8px; }.game-choice i { display:none; } }
@media (max-width:590px) { .brand { font-size:23px; }.header-actions { gap:0; }.ghost-button { width:39px; padding:0; font-size:0; }.ghost-button kbd { margin:0; font-size:10px; }.menu-layout { min-height:700px; grid-template-columns:1fr; grid-template-rows:360px 340px; }.menu-stage { min-height:0; }.menu-image { object-position:left center; }.page-indicator { top:14px; left:15px; }.page-indicator span { display:none; }.page-indicator b { font-size:27px; }.page-nav { right:12px; bottom:12px; }.page-button small { display:none; }.game-strip { gap:6px; padding:11px; }.game-choice { min-height:0; }.game-choice b { font-size:14px; } }