@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;600;800&display=swap');

:root { color-scheme: dark; --ink:#eef4ff; --cyan:#56efff; --violet:#9b7bff; --pink:#ff4f8b; --panel:rgba(8,13,30,.82); }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:#050713; color:var(--ink); font-family:'Noto Sans KR',sans-serif; }
canvas { display:block; width:100%; height:100%; background:#070b18; }
.screen { position:fixed; inset:0; display:grid; place-items:center; z-index:20; background:radial-gradient(circle at 50% 35%,rgba(73,46,159,.3),rgba(3,5,13,.94) 55%); }
.screen.hidden,.hidden { display:none!important; }
.title-card,.result-card,.pause-card { text-align:center; max-width:760px; padding:48px; }
.eyebrow { margin:0 0 12px; color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.28em; }
h1 { margin:0; font-family:'Black Han Sans',sans-serif; font-size:clamp(64px,10vw,132px); line-height:.75; letter-spacing:-.04em; text-shadow:0 0 45px rgba(93,82,255,.45); }
h1 span { color:transparent; -webkit-text-stroke:2px var(--cyan); }
.subtitle { margin:32px 0; color:#aeb7cd; }
button { font:inherit; cursor:pointer; border:0; color:white; }
.primary { min-width:210px; padding:16px 30px; border-radius:5px; background:linear-gradient(120deg,#6c58ff,#c048ff); font-weight:800; letter-spacing:.08em; box-shadow:0 8px 34px rgba(115,62,255,.35); transition:.18s; }
.primary:hover { transform:translateY(-2px); filter:brightness(1.15); }
.secondary { padding:15px 28px; border:1px solid #58617a; border-radius:5px; background:#11182b; font-weight:700; }
.controls { display:flex; justify-content:center; gap:12px; margin-top:38px; }
.controls div { display:grid; gap:4px; min-width:110px; padding:12px; border:1px solid #26304b; border-radius:6px; background:rgba(12,19,40,.65); }
.controls strong { color:var(--cyan); font-size:13px; }.controls span { color:#8d98b3; font-size:11px; }
.version { position:absolute; bottom:22px; font-size:10px; letter-spacing:.18em; color:#58617a; }
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
.panel { position:absolute; top:18px; padding:12px 16px; border:1px solid rgba(107,132,190,.25); border-radius:7px; background:var(--panel); backdrop-filter:blur(8px); box-shadow:0 8px 28px rgba(0,0,0,.2); }
.hud-left { left:18px; width:240px; }.hud-center { left:50%; transform:translateX(-50%); display:grid; min-width:160px; text-align:center; }.hud-right { right:18px; display:flex; gap:18px; font-size:12px; }.hud-right strong { color:var(--cyan); font-size:16px; margin-left:4px; }
.hearts { height:27px; color:var(--pink); font-size:21px; letter-spacing:4px; text-shadow:0 0 12px var(--pink); }
.meter-label { display:flex; justify-content:space-between; color:#8f9bb8; font-size:10px; }.meter { height:3px; margin-top:7px; overflow:hidden; background:#293149; }.meter i { display:block; height:100%; width:0; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
#phase-label { color:var(--cyan); font-size:12px; letter-spacing:.12em; }#phase-time { font-size:22px; font-weight:800; }
.soul-message { position:absolute; left:50%; top:62%; transform:translate(-50%,-50%); display:grid; gap:8px; text-align:center; text-shadow:0 2px 20px #000; }.soul-message strong { color:#b8d8ff; font-size:32px; }.soul-message span { color:#cad2e4; }
.announcement { position:absolute; left:50%; top:28%; transform:translate(-50%,-50%); font:38px 'Black Han Sans'; color:white; text-align:center; text-shadow:0 0 28px var(--violet); opacity:0; transition:.25s; }.announcement.show { opacity:1; }
.icon-button { pointer-events:auto; position:absolute; right:20px; bottom:20px; width:42px; height:42px; border:1px solid #3a4564; border-radius:50%; background:rgba(10,16,34,.8); }
.result-card { width:min(720px,92vw); }.result-card h2,.pause-card h2 { margin:5px 0 8px; font:56px 'Black Han Sans'; }.result-card>p:nth-of-type(2) { color:#aab4cb; }
.scoreboard { margin:28px 0; border:1px solid #2c3652; border-radius:7px; overflow:hidden; background:rgba(7,12,27,.82); }.score-row { display:grid; grid-template-columns:42px 1fr repeat(3,82px); align-items:center; padding:10px 14px; border-bottom:1px solid #202943; font-size:13px; }.score-row:last-child { border:0; }.score-row.header { color:#727e99; font-size:10px; }.score-row.you { color:var(--cyan); background:rgba(64,224,255,.06); }.score-row span:nth-child(2) { text-align:left; font-weight:700; }
.result-actions { display:flex; justify-content:center; gap:10px; }.compact { background:rgba(3,5,13,.75); backdrop-filter:blur(6px); }
@media(max-width:650px){.hud-left{width:190px}.hud-right{top:92px}.controls{gap:5px}.controls div{min-width:90px}.score-row{grid-template-columns:30px 1fr repeat(3,58px);padding:9px 7px}.title-card{padding:20px}}