:root{--navy:#071a34;--panel:rgba(5,24,51,.90);--gold:#ffd12c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07101e;color:#fff;font-family:Impact,"Arial Black","Noto Sans KR",sans-serif}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#163e6c,#050910 75%)}
#app{position:relative;width:min(1500px,100vw);aspect-ratio:5/3;max-height:100vh;overflow:hidden;background:#0791f5;box-shadow:0 24px 80px #000b;isolation:isolate}canvas{display:block;width:100%;height:100%}
#hud{position:absolute;z-index:4;inset:0 0 auto;min-height:145px;pointer-events:none;background:linear-gradient(180deg,rgba(0,15,39,.24),transparent)}.hud-panel{border:2px solid rgba(62,145,232,.58);border-radius:15px;background:linear-gradient(145deg,rgba(5,31,66,.96),rgba(4,20,46,.89));box-shadow:inset 0 1px #ffffff24,0 5px 15px #001b4070;text-shadow:0 3px 0 #0008}
.hud-left{position:absolute;left:24px;top:18px;width:445px}#brand{height:88px;display:flex;align-items:center;gap:12px;padding:7px 17px}.moon{display:grid;place-items:center;width:62px;height:62px;border:3px solid #f8e69a;border-radius:50%;color:#ffd21f;background:#0a3566;font:70px/55px Georgia;transform:rotate(-20deg);box-shadow:0 0 18px #43a8ff99}#brand strong{display:block;font-size:39px;line-height:.95;letter-spacing:-1px;font-style:italic}.hud-panel em{color:var(--gold);font-style:normal}#brand small{display:block;margin-top:7px;color:#ffca23;font:12px/1 Arial;font-weight:900;letter-spacing:.9px}
#playerCard{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px;width:330px;min-height:69px;margin-top:7px;padding:7px 11px}.avatar{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;border:2px solid #91c6ff;background:linear-gradient(#556275,#131c2a);font-size:27px;color:#ffcf2e}#playerCard b{font:17px Arial;font-weight:900}#playerCard i{color:#27b9ff;font-style:normal}#playerCard small{display:block;margin-top:5px;font:11px Arial;letter-spacing:.3px}.crown{color:var(--gold)}.hearts{grid-column:2/4;color:#ff3158;font:19px Arial;font-weight:900}.hearts .empty{color:#50708e}
#scorePanel{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:304px;padding:7px 10px 9px}.score-row{display:flex;justify-content:center;align-items:center;gap:11px}.helmet{display:grid;place-items:center;width:53px;height:53px;border-radius:50%;background:#111b2d;border:3px solid #8796a9;color:#b8c2cc;font:30px Arial}.score-row small,#best small{display:block;font:16px Arial;font-weight:900;font-style:italic}.score-row strong{display:block;color:var(--gold);font-size:43px;line-height:.85;letter-spacing:2px}.meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px;border-radius:9px;padding:5px 10px;background:#061a38;font:14px Arial;font-weight:900}.meta span+span{border-left:1px solid #ffffff2b;padding-left:12px}#difficulty{color:#69d9ff}
.hud-right{position:absolute;right:25px;top:18px;display:flex;gap:12px;align-items:stretch}#best{min-width:212px;height:71px;padding:8px 20px;display:flex;align-items:center;gap:16px}#best>span{font-size:33px}#best strong{color:var(--gold);font-size:31px;line-height:1}.icon-btn{pointer-events:auto;width:68px;height:71px;margin:0;color:#fff;font:32px/1 Arial;font-weight:900;cursor:pointer;transition:.15s}.icon-btn:hover{filter:brightness(1.3);transform:translateY(-1px)}#pauseBtn{font-size:38px}#soundBtn{font-size:27px}
#toastLayer{position:absolute;z-index:6;inset:0;pointer-events:none}.toast{position:absolute;color:#ffe132;font-size:34px;-webkit-text-stroke:2px #2a1300;text-shadow:0 4px 0 #0008;animation:floatUp .8s ease-out forwards}@keyframes floatUp{to{transform:translateY(-80px) scale(1.1);opacity:0}}
#moveControls{position:absolute;z-index:7;left:18px;bottom:18px;display:none;gap:12px;pointer-events:none}#moveControls button{pointer-events:auto;width:72px;height:72px;border:2px solid #69b9ff;border-radius:50%;background:linear-gradient(145deg,rgba(5,31,66,.9),rgba(4,20,46,.82));box-shadow:inset 0 1px #fff4,0 5px 14px #00152da0;color:#fff;font:30px/1 Arial;font-weight:900;touch-action:none;user-select:none}#moveControls button:active{transform:scale(.93);filter:brightness(1.35)}
#overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:linear-gradient(#00153144,#001020b8);backdrop-filter:blur(2px)}#overlay.hidden{display:none}.card{width:min(560px,88vw);padding:33px;border:2px solid #3c9cf5;border-radius:24px;text-align:center;background:linear-gradient(150deg,rgba(4,32,68,.97),rgba(3,14,34,.96));box-shadow:0 20px 70px #001020e6,inset 0 1px #fff3}.eyebrow{margin:0;color:#58cfff!important;font:12px Arial!important;font-weight:900!important;letter-spacing:4px}.card h1{margin:8px 0 13px;font-size:50px;font-style:italic}.card h1 span,.card h1 em{color:#ffd321}.card p{font:16px/1.7 Arial;color:#d9e8f7}.card button{margin-top:7px;border:0;border-radius:12px;padding:15px 37px;background:linear-gradient(#ffe04a,#ffad0c);color:#0b1d32;font:20px Impact;letter-spacing:1px;cursor:pointer;box-shadow:0 5px 0 #9d5d00}.card small{display:block;margin-top:18px;color:#8fb4d6;font:11px Arial;letter-spacing:1px}
@media(max-width:900px),(pointer:coarse){#moveControls{display:flex}}@media(max-width:900px){.hud-left{left:10px;top:8px;transform:scale(.72);transform-origin:top left}#scorePanel{top:8px;transform:translateX(-50%) scale(.72);transform-origin:top center}.hud-right{right:10px;top:8px;transform:scale(.72);transform-origin:top right}}@media(max-width:600px){#playerCard{display:none}.hud-left{transform:scale(.56)}#scorePanel{transform:translateX(-50%) scale(.56)}.hud-right{transform:scale(.56)}.card h1{font-size:38px}#moveControls{left:10px;bottom:10px;gap:8px}#moveControls button{width:58px;height:58px;font-size:24px}}