:root { color-scheme: dark; --ink:#07141d; --panel:#0c2230; --cyan:#36e3ff; --lime:#d8ff3e; --orange:#ff7a3d; --cream:#fff7df; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% -10%,#174359 0,#081821 48%,#040b10 100%); color:white; font-family:"Noto Sans KR",sans-serif; }
button { font:inherit; }
.shell { width:min(1480px,100%); margin:auto; padding:18px 24px 12px; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:13px; }
.logo-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px 5px 15px 5px; transform:rotate(-4deg); background:var(--lime); color:#07141d; font:900 27px Montserrat; box-shadow:0 0 28px #d8ff3e44; }
.brand p,.brand h1 { margin:0; }.brand p { color:#88aabd; font:700 10px Montserrat; letter-spacing:.22em; }.brand h1 { font:900 25px "Noto Sans KR"; letter-spacing:-.07em; }.brand em { color:var(--cyan); font-style:normal; }
.actions { display:flex; align-items:center; gap:9px; }.actions button { border:1px solid #335566; background:#0b202c; color:white; border-radius:12px; padding:11px 17px; cursor:pointer; transition:.2s; }.actions button:hover { border-color:var(--cyan); transform:translateY(-1px); }.actions .square { width:43px; padding:10px; font-size:20px; }
.status { padding:9px 13px; color:#9fbdcc; font-size:12px; font-weight:700; }.status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#6f8995; }.status.live i { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.game-stage { position:relative; aspect-ratio:16/9; border:1px solid #244353; border-radius:24px; overflow:hidden; background:#07141d; box-shadow:0 25px 80px #0009, inset 0 0 0 1px #ffffff08; }
#gameCanvas { display:block; width:100%; height:100%; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; padding:5%; background:linear-gradient(90deg,#06131bf2 0%,#07141ddf 45%,#07141db8 100%); backdrop-filter:blur(4px); transition:.3s; }.hidden { opacity:0!important; visibility:hidden!important; pointer-events:none!important; }
.intro-card { width:min(1020px,93%); display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:center; }
.eyebrow { color:var(--lime); margin:0 0 14px; font:800 12px Montserrat; letter-spacing:.2em; }.intro-copy h2 { margin:0; font:400 clamp(44px,6vw,86px)/.97 "Black Han Sans"; letter-spacing:-.06em; text-shadow:0 6px 30px #000; }.intro-copy h2 strong { color:var(--cyan); font-weight:inherit; -webkit-text-stroke:1px #a9f5ff; }.description { max-width:580px; color:#b8cbd5; font-size:16px; line-height:1.8; }
.primary { margin-top:15px; border:0; border-radius:14px; padding:17px 28px; background:var(--lime); color:#08141a; font-weight:900; font-size:18px; cursor:pointer; box-shadow:0 10px 35px #d8ff3e33; transition:.2s; }.primary:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 14px 45px #d8ff3e55; }.primary small { margin-left:22px; opacity:.55; font:800 10px Montserrat; }
.howto { padding:28px; border:1px solid #315161; border-radius:22px; background:#0b202dd9; box-shadow:0 18px 55px #0007; }.howto h3 { margin:0 0 20px; font-size:16px; }.key-row { display:flex; align-items:center; gap:7px; margin:10px 0; }.key-row span { margin-left:8px; color:#abc0ca; font-size:13px; }.howto>small { display:block; margin-top:22px; color:#6f909f; }
kbd { display:inline-grid; min-width:30px; height:29px; place-items:center; border:1px solid #547181; border-bottom-width:3px; border-radius:6px; background:#17303c; color:#e9faff; font:800 11px Montserrat; }.wide { width:73px; }
.motion-guide { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:17px; border-top:1px solid #294451; }.motion-guide i { width:29px; height:29px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--cyan); color:#07141d; font:900 12px Montserrat; font-style:normal; }.motion-guide span { font-size:13px; color:#9eb4bf; }.motion-guide b { display:block; color:white; font:800 10px Montserrat; letter-spacing:.1em; }
.camera-panel { position:absolute; z-index:4; right:18px; bottom:18px; width:min(26%,400px); aspect-ratio:16/9; overflow:hidden; border:2px solid var(--cyan); border-radius:15px; background:#07141d; box-shadow:0 12px 40px #000b,0 0 25px #36e3ff22; transition:.25s; }.camera-panel video,.camera-panel canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }.cam-label { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding:18px 10px 8px; background:linear-gradient(transparent,#061018df); font:800 8px Montserrat; letter-spacing:.12em; }.cam-label b { color:var(--lime); font-family:"Noto Sans KR"; letter-spacing:0; }
.result { background:#06131be8; }.result-card { text-align:center; }.result-card p { color:var(--lime); font:800 12px Montserrat; letter-spacing:.24em; }.result-card h2 { margin:0; font:400 53px "Black Han Sans"; }.final-score { margin:8px 0 -5px; color:var(--cyan); font:900 clamp(92px,14vw,170px)/1 Montserrat; letter-spacing:-.09em; text-shadow:0 0 45px #36e3ff55; }.result-card>span { color:#7898a7; font:800 10px Montserrat; letter-spacing:.25em; }
footer { height:55px; display:flex; align-items:center; justify-content:space-between; color:#7895a3; font-size:11px; }footer span { display:flex; align-items:center; gap:5px; font:700 10px Montserrat; }footer p { margin:0; text-align:center; }
@media(max-width:800px){.shell{padding:10px}.topbar{height:68px}.brand p,.status{display:none}.brand h1{font-size:19px}.actions button{padding:9px 11px;font-size:12px}.intro-card{grid-template-columns:1fr;gap:20px}.howto{display:none}.description{font-size:13px}.camera-panel{width:34%}footer p{display:none}.game-stage{border-radius:14px}}