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

:root { --ink:#171914; --panel:#151b16; --panel-2:#1b221c; --line:#3d493b; --paper:#e5e7d7; --muted:#93a08c; --gold:#e3b45a; --green:#91a778; --red:#d86a58; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:#090c09; color:var(--paper); font-family:"Space Grotesk",Arial,sans-serif; }
body { background:radial-gradient(circle at 73% 10%,rgba(87,116,84,.15),transparent 30rem),#090c09; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; padding:0 24px 44px; }
.topbar { max-width:1500px; margin:auto; padding:19px 0 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.1em; }
.brand,.top-meta { display:flex; align-items:center; gap:11px; }
.brand-mark { color:var(--gold); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#7fbc73; box-shadow:0 0 0 5px rgba(127,188,115,.12),0 0 18px rgba(127,188,115,.65); }
.slash { color:#4f5c4c; }
.layout { max-width:1500px; margin:0 auto; padding-top:42px; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:26px; align-items:start; }
.game-panel,.score-card,.note-card,.legend-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(28,36,28,.92),rgba(14,19,14,.96)); box-shadow:0 26px 80px rgba(0,0,0,.22); }
.game-panel { min-width:0; padding:26px; }
.panel-heading { display:flex; justify-content:space-between; gap:22px; align-items:end; padding-bottom:24px; }
.eyebrow,.legend-title { color:var(--gold); font:10px "DM Mono",monospace; letter-spacing:.13em; }
h1 { margin:15px 0 0; font-size:clamp(42px,5.5vw,84px); line-height:.84; letter-spacing:-.085em; font-weight:600; }
h1 em { color:var(--green); font-style:normal; }
.panel-heading p { margin:19px 0 0; color:#aab5a1; font-size:14px; }
.round-readout { min-width:92px; padding-left:17px; border-left:1px solid var(--line); display:grid; gap:4px; color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.08em; }
.round-readout strong { color:var(--gold); font:34px "DM Mono",monospace; letter-spacing:-.08em; }
.round-readout small { color:#647060; font-size:8px; }
.status-row { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0; display:flex; justify-content:space-between; gap:14px; color:var(--gold); font:10px "DM Mono",monospace; letter-spacing:.08em; }
.status-row span:last-child { color:var(--muted); text-align:right; }
.stage-frame { position:relative; margin-top:14px; overflow:hidden; border:1px solid #52634e; background:#102418; isolation:isolate; }
#gameCanvas { width:100%; aspect-ratio:16/9; display:block; image-rendering:auto; }
.stage-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.48) 100%),linear-gradient(180deg,rgba(0,0,0,.14),transparent 22%,transparent 78%,rgba(0,0,0,.3)); mix-blend-mode:multiply; }
.stage-corner { position:absolute; z-index:2; color:rgba(241,239,200,.85); font:9px "DM Mono",monospace; letter-spacing:.08em; text-shadow:0 1px 2px #08110a; pointer-events:none; }
.top-left { top:13px; left:14px; }.top-right { top:13px; right:14px; }.bottom-left { bottom:12px; left:14px; color:rgba(224,206,126,.8); }.bottom-right { bottom:12px; right:14px; color:rgba(241,239,200,.6); }
.control-deck { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:end; gap:22px; padding:22px 0 18px; border-bottom:1px solid var(--line); }
.control-block label { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; }.control-block label b { color:var(--gold); font-weight:400; }
input[type=range] { width:100%; accent-color:var(--gold); cursor:pointer; }
.primary-button,.secondary-button,.text-button { border:1px solid var(--gold); padding:13px 15px; font:10px "DM Mono",monospace; letter-spacing:.07em; transition:background .18s,color .18s,transform .18s; }
.primary-button { min-width:174px; color:var(--ink); background:var(--gold); }.primary-button span { margin-left:10px; font-size:14px; }.primary-button:hover { transform:translateY(-2px); background:#f1c872; }
.secondary-button { color:var(--gold); background:transparent; border-color:#606444; }.secondary-button:hover { background:rgba(227,180,90,.1); }
.text-button { color:var(--muted); background:transparent; border-color:transparent; }.text-button:hover { color:var(--paper); }
.action-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; padding-top:14px; }
.info-column { display:grid; gap:14px; }
.score-card,.note-card,.legend-card { padding:17px; }
.score-line { display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; }.score-line:last-child { padding:0; margin:0; border:0; }.score-line strong { color:var(--gold); font:17px "DM Mono",monospace; }
.note-card ul { list-style:none; display:grid; gap:15px; padding:0; margin:17px 0 0; }.note-card li { display:grid; grid-template-columns:24px 1fr; gap:8px; color:#aeb8a6; font-size:12px; line-height:1.45; }.note-card li span { color:var(--gold); font:10px "DM Mono",monospace; }
.legend-card { color:var(--muted); font:10px/1.8 "DM Mono",monospace; }.legend-card > div:not(.legend-title):not(.legend-foot) { display:flex; align-items:center; gap:9px; }.legend-title { margin-bottom:10px; }.legend-foot { margin-top:15px; padding-top:11px; border-top:1px solid var(--line); color:#6e796b; font-size:9px; line-height:1.45; }
kbd { min-width:30px; padding:2px 5px; border:1px solid #596752; color:var(--paper); text-align:center; font:9px "DM Mono",monospace; }
@media (max-width:1080px) { .layout { grid-template-columns:1fr; }.info-column { grid-template-columns:repeat(3,1fr); }.score-card { grid-column:span 1; }.note-card { grid-column:span 1; }.legend-card { grid-column:span 1; } }
@media (max-width:760px) { .app-shell { padding:0 12px 28px; }.topbar { font-size:8px; }.top-meta { gap:6px; }.top-meta .slash { display:none; }.game-panel { padding:16px; }.panel-heading { align-items:start; flex-direction:column; }.round-readout { border-left:0; border-top:1px solid var(--line); width:100%; padding:12px 0 0; grid-template-columns:auto auto auto; align-items:center; }.round-readout strong { font-size:25px; }.control-deck { grid-template-columns:1fr 1fr; gap:16px; }.primary-button { grid-column:1 / -1; width:100%; }.action-row { display:grid; grid-template-columns:1fr 1fr; }.text-button { grid-column:1 / -1; }.info-column { grid-template-columns:1fr; }.score-card,.note-card,.legend-card { grid-column:auto; } }
@media (max-width:480px) { .topbar { align-items:start; flex-direction:column; gap:8px; }.stage-corner { font-size:7px; }.top-left { top:8px; left:8px; }.top-right { top:8px; right:8px; }.bottom-left { bottom:8px; left:8px; }.bottom-right { bottom:8px; right:8px; }.action-row { grid-template-columns:1fr; }.text-button { grid-column:auto; } }