:root{--bg:#150b2e;--panel:rgba(255,255,255,.14);--line:rgba(255,255,255,.25);--text:#fff7ff;--muted:#f8c7ff;--pink:#ff8bdc;--gold:#ffd166}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 30% 10%,rgba(255,139,220,.25),transparent 25%),radial-gradient(circle at 80% 5%,rgba(139,233,255,.18),transparent 25%),linear-gradient(180deg,#14072b,#31115a 52%,#170926);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button{font:inherit}#shell{width:min(1120px,100%);margin:0 auto;padding:16px}#topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}h1{margin:0;font-size:clamp(28px,5vw,54px);letter-spacing:.02em;text-shadow:0 4px 20px rgba(255,139,220,.45)}#topbar p{margin:0;color:var(--muted);font-weight:800;letter-spacing:.25em;text-transform:uppercase}
#installBtn,#startBtn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;color:#2b1246;background:linear-gradient(135deg,var(--gold),#fff3a9);box-shadow:0 12px 30px rgba(255,209,102,.28)}
#gameWrap{position:relative;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#050316;box-shadow:0 30px 90px rgba(0,0,0,.45)}canvas{display:block;width:100%;aspect-ratio:16/9;image-rendering:pixelated;background:#07031a;touch-action:none;user-select:none;-webkit-user-select:none}
.panel{position:absolute;inset:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line);border-radius:24px;background:rgba(21,11,46,.84);backdrop-filter:blur(14px);padding:18px}.panel h2{font-size:clamp(30px,5vw,60px);margin:0 0 6px;text-shadow:0 0 22px rgba(255,139,220,.55)}.sub{margin:0 0 16px;color:#ffe1fb}
#characterGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(820px,100%);margin:10px 0 16px}.char{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;border-radius:22px;padding:14px;background:rgba(255,255,255,.11);color:var(--text);cursor:pointer}.char.selected{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,209,102,.18),0 0 35px rgba(255,209,102,.22)}.char strong{font-size:22px}.char small{color:#ffe1fb}
.avatar{width:66px;height:66px;border-radius:28px;position:relative;box-shadow:inset 0 -8px rgba(0,0,0,.1),0 10px 30px rgba(0,0,0,.25)}.avatar:before,.avatar:after{content:"";position:absolute;background:#3a2144;border-radius:50%;width:7px;height:9px;top:30px}.avatar:before{left:22px}.avatar:after{right:22px}.avatar.sky{background:linear-gradient(160deg,#f4eaff,#c7b6ff)}.avatar.lumi{background:linear-gradient(160deg,#fff2b8,#ffc76b)}.avatar.vega{background:linear-gradient(160deg,#4b247f,#1a0b3b)}
.controls{max-width:760px;font-size:13px;color:#ffe6fb}#hud{position:absolute;left:12px;right:12px;top:12px;display:none;align-items:center;gap:10px;flex-wrap:wrap;pointer-events:none}#hud span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 11px;background:rgba(9,3,24,.62);font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.3)}#status{margin-left:auto;color:#fff2a8}
#mobileControls{position:absolute;z-index:50;left:8px;right:8px;bottom:8px;display:none;justify-content:center;flex-wrap:wrap;gap:6px;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}#mobileControls button{pointer-events:auto;width:58px;height:58px;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(255,255,255,.18);color:#fff;font-weight:1000;font-size:18px;backdrop-filter:blur(10px)}
#notes{margin-top:14px;border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:16px}#notes h2{margin:0 0 6px}#notes p{margin:0;color:#ffe1fb}.hidden{display:none!important}@media(max-width:1100px),(hover:none),(pointer:coarse){#shell{padding:8px}#mobileControls{display:flex}}@media(max-width:720px){#characterGrid{grid-template-columns:1fr}.panel{inset:8px;overflow:auto;justify-content:flex-start}#mobileControls button{width:44px;height:44px}}

.hub-return{position:fixed;z-index:9999;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:2px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(34,20,75,.82);color:#fff;text-decoration:none;font:800 13px/1 system-ui,-apple-system,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(10px)}.hub-return:hover{transform:translateY(-1px);background:#6d28d9}

@supports (-webkit-touch-callout:none){#mobileControls{display:flex!important}#mobileControls button{-webkit-tap-highlight-color:transparent}}