:root{--bg:#06101f;--panel:rgba(11,20,39,.84);--panel2:rgba(18,31,58,.78);--line:rgba(127,239,255,.24);--cyan:#46f6ff;--pink:#ff4fd8;--violet:#8b5cff;--green:#63ff9b;--yellow:#ffe066;--red:#ff5570;--text:#ecfbff;--muted:#98a9bc;--shadow:0 24px 80px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#030714;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;color:var(--text)}canvas{position:fixed;inset:0;width:100%;height:100%;background:radial-gradient(circle at 50% 45%,#14244a 0%,#071225 45%,#02050d 100%)}.hidden{display:none!important}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;z-index:10}.menu-screen{overflow:auto}.backdrop-grid{position:fixed;inset:-30%;background:linear-gradient(rgba(70,246,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,79,216,.08) 1px,transparent 1px);background-size:52px 52px;transform:perspective(700px) rotateX(58deg) translateY(20%);filter:blur(.2px);opacity:.8;animation:gridMove 8s linear infinite}@keyframes gridMove{to{background-position:0 52px,52px 0}}.hero-card,.panel,.modal-card{position:relative;width:min(980px,100%);max-height:calc(100vh - 34px);overflow:auto;background:linear-gradient(145deg,rgba(13,24,48,.94),rgba(7,14,29,.9));border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow), inset 0 0 50px rgba(70,246,255,.04);padding:28px}.hero-card:before,.panel:before,.modal-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(70,246,255,.18),transparent 25%,transparent 70%,rgba(255,79,216,.15))}.hero-card{max-width:860px}.logo-pulse{width:78px;height:78px;border-radius:24px;background:radial-gradient(circle,var(--cyan),transparent 62%),linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 0 36px rgba(70,246,255,.55);animation:pulse 1.6s ease-in-out infinite alternate}@keyframes pulse{from{transform:scale(.98);filter:hue-rotate(0)}to{transform:scale(1.04);filter:hue-rotate(30deg)}}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--cyan);font-weight:800;font-size:12px;margin:14px 0 4px}.lead{font-size:18px;color:#c8d7e8;line-height:1.55;max-width:680px}h1{font-size:clamp(44px,8vw,92px);line-height:.86;margin:8px 0 18px;letter-spacing:-.06em;text-shadow:0 0 32px rgba(70,246,255,.22)}h1 span{color:transparent;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text}h2{font-size:clamp(32px,5vw,60px);margin:4px 0 12px}h3{font-size:28px;margin:6px 0 16px}.quick-panel,.tab-body,.notice{position:relative;border:1px solid var(--line);background:rgba(4,10,23,.42);border-radius:18px;padding:14px;margin-top:16px}label{display:block;color:#cdd8e6;font-size:13px;font-weight:700;margin:10px 0 6px}input,select,textarea{width:100%;border:1px solid rgba(127,239,255,.25);background:rgba(2,8,18,.75);color:var(--text);border-radius:14px;padding:12px 14px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,246,255,.14)}.row{display:flex;gap:12px;margin-top:12px}.row.two>*{flex:1}.primary,.secondary,.ghost,.mini-btn,.touch-btn{border-radius:14px;padding:12px 16px;font-weight:900;letter-spacing:.02em}.primary{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#02101a;box-shadow:0 0 24px rgba(70,246,255,.22)}.secondary{background:rgba(70,246,255,.12);border:1px solid rgba(70,246,255,.35)}.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}button:hover{filter:brightness(1.12)}.menu-tabs{display:flex;gap:8px;margin-top:18px}.tab{flex:1;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:12px;font-weight:900}.tab.active{background:rgba(70,246,255,.15);border-color:rgba(70,246,255,.4)}.auth-grid{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px}.small,.muted{color:var(--muted);line-height:1.5}.notice.danger{border-color:rgba(255,85,112,.45);background:rgba(255,85,112,.12)}.wide{width:min(1040px,100%)}.room-code{font-size:64px;font-weight:1000;letter-spacing:.18em;text-align:center;border:1px solid rgba(70,246,255,.35);border-radius:22px;padding:16px;margin:16px 0;background:rgba(0,0,0,.24);text-shadow:0 0 22px rgba(70,246,255,.6)}.copy-row{display:flex;gap:10px}.copy-row input{flex:1}.room-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.player-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:16px 0}.player-card{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:16px;padding:12px}.player-card b{display:block}.player-card span{color:var(--muted);font-size:12px}.hud{position:fixed;inset:14px 14px auto 14px;z-index:5;pointer-events:none}.hud-top{display:flex;gap:8px;flex-wrap:wrap}.chip{background:rgba(3,8,18,.72);border:1px solid rgba(127,239,255,.22);border-radius:14px;padding:8px 12px;min-width:88px;box-shadow:0 8px 28px rgba(0,0,0,.25)}.chip span{display:block;font-size:10px;color:var(--muted);font-weight:900}.chip b{font-size:18px}.hud-bars{margin-top:8px;display:grid;gap:6px;max-width:420px}.bar-wrap{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;color:#cbd8e8;font-size:12px;font-weight:900}.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;border:1px solid rgba(255,255,255,.08)}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#ff9a9a);border-radius:999px}.bar.xp i{background:linear-gradient(90deg,var(--cyan),var(--violet))}.bar.rift i{background:linear-gradient(90deg,var(--pink),var(--yellow))}.team-panel{position:fixed;right:16px;top:92px;width:220px;display:grid;gap:6px}.team-row{background:rgba(3,8,18,.7);border:1px solid rgba(127,239,255,.18);border-radius:12px;padding:8px}.team-row b{display:flex;justify-content:space-between}.mini-hp{height:5px;background:rgba(255,255,255,.12);border-radius:999px;margin-top:5px;overflow:hidden}.mini-hp i{display:block;height:100%;background:var(--green)}.mini-btn{position:fixed;right:16px;top:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);pointer-events:auto}.touch{position:fixed;inset:auto 0 0 0;z-index:6;pointer-events:none;padding:20px;display:flex;justify-content:space-between;align-items:flex-end}.stick{width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(127,239,255,.24);position:relative;pointer-events:auto}.knob{position:absolute;left:40px;top:40px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 25px rgba(70,246,255,.35)}.touch-actions{display:grid;gap:12px;pointer-events:auto}.touch-btn{width:94px;height:94px;border-radius:50%;background:rgba(70,246,255,.12);border:1px solid rgba(70,246,255,.35)}.rift-btn{background:rgba(255,79,216,.15);border-color:rgba(255,79,216,.45)}.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.58);backdrop-filter:blur(8px)}.modal-card{width:min(520px,100%)}.modal-card.large{width:min(760px,100%)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card-choice{min-height:170px;border-radius:18px;border:1px solid rgba(127,239,255,.25);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));padding:14px;text-align:left}.card-choice .rarity{font-size:11px;text-transform:uppercase;color:var(--yellow);letter-spacing:.12em}.card-choice h4{font-size:20px;margin:8px 0}.leaderboard-list{display:grid;gap:8px;margin-top:12px}.leader-row{display:grid;grid-template-columns:40px 1fr 90px 80px;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}.how-list{line-height:1.7;color:#d0dced}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}.report-card{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:16px;padding:14px}.report-card span{display:block;color:var(--muted);font-size:12px}.report-card b{font-size:26px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;background:rgba(4,10,23,.92);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);max-width:min(560px,90%)}@media (max-width:760px){.hero-card,.panel,.modal-card{padding:18px;border-radius:20px}.auth-grid,.room-settings,.cards{grid-template-columns:1fr}.row.two{flex-direction:column}.copy-row{flex-direction:column}.team-panel{display:none}.hud{inset:8px 8px auto 8px}.chip{min-width:74px;padding:6px 8px}.chip b{font-size:15px}.bar-wrap{grid-template-columns:34px 1fr 34px}.touch{display:flex}.room-code{font-size:42px}.menu-tabs{flex-direction:column}}@media (pointer:fine){.touch{display:none!important}}