:root{color-scheme:dark;--pink:#ff3978;--red:#ec174c;--cream:#ffe6d4;--ink:#11040e;--violet:#48203d}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 15%,#48152f 0,#170713 48%,#080207 100%);font-family:Inter,system-ui,sans-serif;color:white;touch-action:none;user-select:none}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}main{height:100%;max-width:920px;margin:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}header{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{line-height:.82;letter-spacing:.08em;transform:rotate(-2deg)}.brand span{display:block;font:800 clamp(11px,2vw,17px)/1 sans-serif;color:#ff9bbe;text-transform:uppercase}.brand strong{font:950 clamp(25px,5vw,46px)/.9 sans-serif;color:#fff;text-shadow:0 0 18px #ff377e}.stats{display:flex;gap:7px}.stats div{min-width:78px;padding:7px 10px;border:1px solid #7f345d;border-radius:12px;background:#160812cc}.stats small{display:block;color:#d99ab5;font-size:9px;letter-spacing:.16em}.stats b{font:800 clamp(14px,2.4vw,20px)/1.4 ui-monospace,monospace;color:#fff}.stage{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;border:1px solid #7b2d58;border-radius:20px;background:#090208;box-shadow:0 0 35px #e7196550,inset 0 0 35px #000;overflow:hidden}.stage canvas{display:block;height:100%;max-width:100%;width:auto;aspect-ratio:19/21}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#090208b8;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay h1{margin:0;color:white;font:950 clamp(38px,8vw,72px)/.83 sans-serif;letter-spacing:-.05em;text-shadow:0 3px 0 #b20b43,0 0 30px #ff3b85}.overlay p{line-height:1.5;color:#ffd4e3}.overlay button,.side-actions button{border:1px solid #ff6f9f;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ed174d,#a70953);font-weight:900;letter-spacing:.08em;padding:12px 25px;box-shadow:0 5px 18px #0008}.controls{display:flex;align-items:center;justify-content:center;gap:20px}.dpad{display:none;grid-template-columns:46px 46px 46px;gap:3px}.dpad button,.side-actions button{min-height:42px}.dpad button{border:1px solid #a34b72;border-radius:11px;background:#2b1023;color:white;font-size:17px}.side-actions{display:flex;gap:7px}.side-actions button{font-size:10px;padding:9px 14px;background:#24101f}.help{margin:0;text-align:center;color:#b97d98;font-size:11px}
@media(pointer:coarse),(max-width:720px){main{padding:7px;gap:5px}.brand strong{font-size:24px}.brand span{font-size:9px}.stats div{min-width:62px;padding:5px 6px}.stats div:nth-child(2){display:none}.stats b{font-size:14px}.stage{border-radius:13px}.dpad{display:grid}.controls{justify-content:space-between}.side-actions{flex-direction:column}.side-actions button{min-height:29px;padding:5px 10px}.help{display:none}}
@media(max-height:650px){header{position:absolute;z-index:2;top:8px;left:10px;right:10px;pointer-events:none}.brand{display:none}.stats div{background:#120812e8}.stage{height:100%}.controls{position:absolute;z-index:3;bottom:8px;left:8px;right:8px;pointer-events:none}.controls button{pointer-events:auto;opacity:.82}}
.overlay input{width:min(260px,75%);margin:0 0 12px;padding:12px 16px;border:1px solid #ff75a4;border-radius:999px;background:#170812;color:#fff;text-align:center;font-size:16px}.bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;font-size:10px;color:#b97d98}.bottom p{margin:0}.bottom .help{text-align:left}.signature{text-align:right;letter-spacing:.08em;color:#d39ab3}.player b{max-width:120px;display:block;overflow:hidden;text-overflow:ellipsis}#sync.pending{border-color:#ffe270;color:#ffe270}dialog{width:min(440px,calc(100% - 24px));max-height:80vh;border:1px solid #a63e70;border-radius:18px;background:#170812;color:#fff;padding:18px;box-shadow:0 25px 80px #000}dialog::backdrop{background:#090208cc;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0}.dialog-head button,.tabs button{border:1px solid #a63e70;border-radius:999px;background:#301027;color:white;padding:8px 13px}.dialog-head button{font-size:22px}.tabs{display:flex;gap:7px;margin:15px 0}.tabs button[aria-pressed="true"]{background:#b20b43}.tabs+ p{color:#d5a4ba;font-size:12px}#scores{padding:0;margin:12px 0;list-style:none;max-height:45vh;overflow:auto}#scores li{display:flex;justify-content:space-between;gap:15px;padding:10px 3px;border-bottom:1px solid #6b294b}#scores span{color:#ff9abd;font-size:12px}@media(max-width:720px){.player{display:none}.bottom{grid-template-columns:1fr auto}.bottom .help{display:none}.signature{text-align:right}.side-actions{display:grid;grid-template-columns:1fr 1fr}.side-actions #full{grid-column:1/-1}}