@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&family=Syne:wght@700;800&display=swap');
:root { --void:#140816; --ink:#ffe9c8; --muted:#a88878; --neon:#ff6bd6; --green:#7cffb2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--void); color:var(--ink); font-family:'Newsreader',Georgia,serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.crop { position:fixed; inset:12px; pointer-events:none; z-index:5; }
.crop i { position:absolute; width:14px; height:14px; border:1px solid rgba(255,107,214,.3); }
.crop i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.crop i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.crop i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.crop i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.nav,.eyebrow,.hud span,.actions button,.keys,.pad button,.overlay-bar,.overlay-help { font-family:'IBM Plex Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.nav { display:flex; justify-content:space-between; align-items:center; max-width:1440px; margin:0 auto; padding:22px 5vw 0; color:var(--muted); }
.nav strong { color:var(--neon); font-weight:500; margin-left:10px; }
.nav a:hover { color:var(--neon); }
.layout { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.3fr); gap:3vw; max-width:1440px; margin:0 auto; padding:28px 5vw 40px; align-items:center; }
.copy { min-width:0; }
.eyebrow { color:var(--neon); margin:0 0 14px; }
h1 { margin:0 0 14px; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(40px,5.4vw,72px); line-height:.84; letter-spacing:-.06em; }
h1 em { font-family:'Newsreader',serif; font-style:italic; font-weight:500; color:var(--neon); }
.lede { color:var(--muted); font-size:16px; line-height:1.5; max-width:380px; }
.hud { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 12px; }
.hud div { border-top:1px solid rgba(255,233,200,.16); padding-top:8px; }
.hud span { display:block; color:var(--muted); margin-bottom:6px; }
.hud strong { font-family:'Syne',sans-serif; font-size:20px; }
.status { min-height:2.6em; color:var(--green); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button, .pad button { background:var(--neon); color:#1a0810; border:0; padding:12px 14px; }
.actions .ghost { background:transparent; color:var(--ink); border:1px solid rgba(255,233,200,.2); }
.keys { color:var(--muted); }
kbd { display:inline-block; padding:1px 5px; border:1px solid rgba(255,233,200,.25); text-transform:none; letter-spacing:0; }
#mall { display:block; width:100%; height:min(70vh,620px); background:#0c050e; border:1px solid rgba(255,107,214,.2); }
#mall:focus { outline:2px solid var(--neon); outline-offset:3px; }
.pad { display:none; grid-template-columns:1fr 1.4fr 1fr; gap:8px; margin-top:10px; }
.overlay { position:fixed; inset:0; z-index:8; background:rgba(8,2,10,.92); display:flex; flex-direction:column; padding:8vh 6vw; }
.overlay[hidden] { display:none; }
.overlay-bar { display:flex; justify-content:space-between; color:var(--neon); margin-bottom:10px; }
.overlay-bar button { background:transparent; color:var(--ink); border:1px solid rgba(255,233,200,.3); padding:8px 10px; }
#game { flex:1; width:100%; background:#050308; border:1px solid rgba(255,107,214,.25); }
.overlay-help { color:var(--muted); margin:10px 0 0; }
.foot { display:flex; justify-content:space-between; max-width:1440px; margin:0 auto; padding:0 5vw 28px; color:var(--muted); }
.foot a:hover { color:var(--neon); }
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  #mall { height:52vw; min-height:260px; }
  .pad { display:grid; }
  .nav p { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; } }