@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Orbitron:wght@500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#080912;--panel:#111522;--line:#282e49;--cyan:#5ff5e8;--pink:#ff4ca6;--orange:#ffb45c;--text:#f0f4ff;--muted:#8992b0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:22px 14px 28px;background:radial-gradient(ellipse at 50% -15%,#20294a 0%,transparent 55%),var(--bg);color:var(--text);font-family:'Noto Sans KR',sans-serif}
button{font:inherit}
.app{width:min(790px,100%);margin:0 auto}
.header{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.logo{display:grid;place-items:center;flex:0 0 52px;height:52px;background:#111a2a;border:1px solid var(--cyan);box-shadow:0 0 20px #5ff5e822,inset 0 0 18px #5ff5e80b;font:800 17px Orbitron,sans-serif;color:var(--cyan);letter-spacing:-2px}
.logo span{color:var(--pink)}
.heading{flex:1;min-width:0}
.kicker{margin:0 0 5px;color:var(--cyan);font:500 9px 'DM Mono',monospace;letter-spacing:2.2px}
h1{margin:0;font:700 clamp(17px,3.5vw,25px) Orbitron,sans-serif;letter-spacing:-.7px}
h1 span{font:600 10px 'Noto Sans KR',sans-serif;color:var(--pink);letter-spacing:0;vertical-align:middle;margin-left:5px}
.audio-controls{display:flex;gap:7px}
.control-btn{padding:9px 10px;background:#121727;border:1px solid #343c5b;color:#d7e3fa;font-size:10px;white-space:nowrap;cursor:pointer}
.control-btn.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #5ff5e817}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:8px;margin-bottom:11px}
.stat,.pattern-stat{padding:10px 12px;background:linear-gradient(135deg,#141a2b,#0d111e);border:1px solid #29324b;min-width:0}
.stat small,.pattern-stat small{display:block;margin-bottom:6px;color:var(--muted);font-size:10px}
.stat strong{font:500 clamp(18px,3.7vw,25px) 'DM Mono',monospace}
.stat strong span{font-size:11px;color:#8796b2;margin-left:3px}
.stat.hot{border-color:#703052}.stat.hot strong{color:var(--pink)}
.pattern-stat strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px 'DM Mono',monospace;color:var(--cyan)}
.arena-wrap{padding:10px;background:#0d111c;border:1px solid #2d3650;box-shadow:0 0 32px #0007}
.arena-topline{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 9px;color:#8996b2;font:10px 'DM Mono',monospace;letter-spacing:1px}
.live-dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
#dangerText{color:var(--orange)}
.arena{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #37425f;background:#090d18}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 3px,#91a5d6 4px);mix-blend-mode:screen}
.overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:16px;background:#070a13d9;backdrop-filter:blur(3px)}
.overlay.hidden{display:none}
.modal{width:min(430px,100%);padding:clamp(19px,4vw,30px);background:#101625;border:1px solid #3e4d6a;box-shadow:0 0 0 4px #080b13,0 0 38px #5ff5e810;text-align:center}
.sigil{display:grid;place-items:center;width:49px;height:49px;margin:0 auto 16px;border:1px solid var(--cyan);color:var(--cyan);font:500 30px Orbitron,sans-serif;box-shadow:0 0 20px #5ff5e825}
.sigil.danger{color:var(--pink);border-color:var(--pink);box-shadow:0 0 20px #ff4ca625}
.modal h2{margin:8px 0 14px;font-size:clamp(22px,4.5vw,30px);line-height:1.4;letter-spacing:-1px}
.modal h2 em{color:var(--cyan);font-style:normal}
.modal>p:not(.kicker):not(.record-message){color:#aab5d0;font-size:12px;line-height:2}
.modal b{color:var(--orange)}
.keys{display:flex;justify-content:center;align-items:center;gap:5px;margin:20px 0;color:#aab5d0;font-size:11px}
kbd{min-width:29px;padding:6px 7px;background:#1a2336;border:1px solid #485674;border-bottom-width:3px;color:#f0f4ff;font:12px 'DM Mono',monospace}
.keys span{margin-left:6px}
.primary-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid #a2fff5;background:var(--cyan);color:#071216;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 0 20px #5ff5e821;transition:filter .15s,transform .15s}
.primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.primary-btn span{font-size:19px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}
.result-grid div{padding:12px;background:#0b111d;border:1px solid #2b3851}
.result-grid small{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.result-grid strong{font:600 23px Orbitron,sans-serif;color:var(--cyan)}
.record-message{color:#ffcf80;font:500 10px 'DM Mono',monospace;letter-spacing:1px;margin:0 0 15px}
.record-message.hidden{display:none}
footer{display:flex;justify-content:space-between;gap:12px;margin-top:13px;color:#77839f;font:9px 'DM Mono',monospace;letter-spacing:.3px;line-height:1.7}
footer span:last-child{text-align:right;white-space:nowrap}
@media(max-width:560px){body{padding:14px 9px 22px}.header{flex-wrap:wrap;gap:9px}.logo{flex-basis:43px;height:43px}.audio-controls{width:100%;margin-left:52px;margin-top:-2px}.control-btn{flex:1}.stats{grid-template-columns:1fr 1fr}.stat,.pattern-stat{padding:9px 11px}.stat strong{font-size:22px}.arena-wrap{padding:6px}.modal{padding:17px}.sigil{width:40px;height:40px;font-size:24px;margin-bottom:11px}footer{flex-direction:column}footer span:last-child{text-align:left}}

.home-btn{width:100%;margin-top:9px;padding:11px 14px;border:1px solid #39435d;background:#151b2b;color:#cbd5eb;font-size:12px;font-weight:700;cursor:pointer}.home-btn:hover{border-color:var(--cyan);color:var(--cyan)}.audio-hint{margin:10px 0 0!important;color:#7f91ad!important;font-size:10px!important;line-height:1.6!important}