:root{--bg: #0b0d12;--panel: rgba(16, 19, 27, .88);--line: rgba(255, 255, 255, .1);--text: #e8ecf3;--muted: #8b93a7;--accent: #ffd34d;--attack: #ff5d5d;--defense: #4da3ff;--stamina: #4dd68c;--balance: #c27dff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0;touch-action:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}#intro{position:fixed;inset:0;z-index:30}#intro.fading{pointer-events:none}.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .35s ease-out;pointer-events:none}#intro.flash .intro-flash{opacity:.85;transition:none}.intro-title{position:absolute;top:18%;left:0;right:0;text-align:center;pointer-events:none;opacity:0;transition:opacity .5s}#intro.title-in .intro-title{opacity:1}.intro-name{font-size:clamp(40px,9vw,104px);font-weight:900;font-style:italic;letter-spacing:4px;color:#fff;text-shadow:0 0 24px #4dc3ff,0 0 60px rgba(77,195,255,.6),0 6px 0 rgba(0,0,0,.4)}.intro-name span{color:var(--accent);text-shadow:0 0 24px #ffb300,0 0 60px rgba(255,179,0,.5),0 6px 0 rgba(0,0,0,.4)}.intro-sub{margin-top:6px;font-size:clamp(18px,3.5vw,34px);font-weight:800;letter-spacing:10px;color:#bfeaff;text-shadow:0 0 16px #4dc3ff}#intro.title-in .intro-name{animation:intro-slam .55s cubic-bezier(.2,1.6,.4,1) both}#intro.title-in .intro-sub{animation:intro-rise .6s .3s ease-out both}#intro.fading .intro-title{opacity:0;transform:translateY(-30px) scale(.9);transition:opacity .5s,transform .5s}@keyframes intro-slam{0%{transform:scale(3);opacity:0;filter:blur(12px)}to{transform:scale(1);opacity:1;filter:blur(0)}}@keyframes intro-rise{0%{transform:translateY(20px);opacity:0;letter-spacing:24px}to{transform:none;opacity:1}}.intro-skip{position:absolute;right:20px;bottom:20px;padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:#00000059;color:#fff;font-size:13px;letter-spacing:1px}#intro.fading .intro-skip{opacity:0;transition:opacity .3s}body.intro-active .screen,body.intro-active #hud{display:none!important}.screen.visible .panel{animation:panel-in .5s ease-out both}@keyframes panel-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;pointer-events:none}.screen.visible{display:flex}.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;width:min(480px,100%);max-height:100%;overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel h1{margin:0 0 4px;font-size:32px;letter-spacing:1px}.panel h1 span{color:var(--accent)}.panel h2{margin:20px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:600}.tagline{margin:0;color:var(--muted);font-size:14px}.legal{margin:20px 0 0;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}.legal a,.credits a{color:var(--accent)}.credits{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.credits li{margin-bottom:8px}.field{width:100%;padding:10px 12px;background:#ffffff0f;border:1px solid var(--line);border-radius:10px;outline:none}.field:focus{border-color:var(--accent)}.bey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bey-card{padding:10px 8px;border-radius:10px;border:1px solid var(--line);background:#ffffff0a;text-align:left}.bey-card.selected{border-color:var(--accent);background:#ffd34d1a}.bey-card b{display:block;font-size:13px}.type{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:99px;background:#ffffff14}.type.Attack{color:var(--attack)}.type.Defense{color:var(--defense)}.type.Stamina{color:var(--stamina)}.type.Balance{color:var(--balance)}.preview{display:flex;gap:16px;align-items:center;margin-bottom:10px;padding:8px 14px 8px 8px;border-radius:12px;background:radial-gradient(circle at 25% 50%,rgba(255,211,77,.1),transparent 60%),#ffffff08;border:1px solid var(--line)}.preview-stage{width:168px;height:168px;flex:none}.preview-stage canvas{display:block;width:100%!important;height:100%!important}.preview-info{flex:1;min-width:0}.preview-name{font-size:20px;font-weight:800}.stats{margin-top:10px;display:flex;flex-direction:column;gap:5px}.stat{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.stat .bar{height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}.stat .bar div{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}@media(min-width:900px){.panel.wide{width:min(940px,100%);padding:28px 32px}.menu-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:32px}.menu-cols .preview-stage{width:190px;height:190px}}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{flex:1;padding:8px 4px;background:none;border:none;font-size:13px}.seg button.selected{background:#ffd34d26;color:var(--accent)}.btn{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:#ffffff0f;font-weight:600}.btn:hover{background:#ffffff1f}.btn.primary{background:var(--accent);color:#1a1400;border-color:transparent}.btn.primary:hover{filter:brightness(1.08)}.btn:disabled{opacity:.4;cursor:default}.btn.small{padding:8px 12px;font-size:13px}.stack{display:flex;flex-direction:column;gap:8px;margin-top:8px}.error{color:var(--attack);font-size:14px;min-height:1em;margin-top:12px}.code{font-size:44px;font-weight:800;letter-spacing:8px;color:var(--accent);text-align:center;margin:8px 0}.players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.players li{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:10px;background:#ffffff0a;font-size:14px}.players li .you{color:var(--accent);font-size:12px;margin-left:6px}.muted{color:var(--muted);font-size:13px}#hud{position:fixed;inset:0;pointer-events:none;display:none}#hud.visible{display:block}.scoreboard{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px}.chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-width:130px;font-size:13px}.chip.me{border-color:var(--accent)}.chip.out{opacity:.45}.chip .name{font-weight:700;display:flex;justify-content:space-between;gap:8px}.dots{display:flex;gap:3px;margin-top:4px}.dots i{width:10px;height:10px;border-radius:50%;background:#ffffff1f}.dots i.on{background:var(--accent)}.spinbar{height:5px;border-radius:3px;background:#ffffff1a;margin-top:6px;overflow:hidden}.spinbar div{height:100%;background:linear-gradient(90deg,#4dd68c,#ffd34d);transition:width .1s linear}.round-info{position:absolute;top:12px;right:12px;font-size:13px;color:var(--muted);text-align:right}.banner{position:absolute;top:30%;left:0;right:0;text-align:center;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.9)}.banner.visible{opacity:1;transform:scale(1)}.banner .big{font-size:clamp(36px,9vw,72px);font-weight:900;font-style:italic;letter-spacing:2px;color:var(--accent);text-shadow:0 4px 24px rgba(0,0,0,.6)}.banner .sub{font-size:18px;margin-top:4px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.launch{position:absolute;bottom:18%;left:50%;transform:translate(-50%);width:min(360px,80vw);text-align:center;display:none}.launch.visible{display:block}.launch .meter{height:18px;border-radius:9px;background:#ffffff1a;border:1px solid var(--line);overflow:hidden}.launch .fill{height:100%;background:linear-gradient(90deg,#4dd68c,#ffd34d 70%,#ff5d5d)}.launch .hint{margin-top:8px;font-size:14px;text-shadow:0 2px 6px rgba(0,0,0,.8)}.launch.locked .fill{filter:brightness(1.3)}.controls-help{position:absolute;bottom:12px;left:12px;font-size:12px;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:40}.toast.visible{opacity:1}.touch-pad,.touch-dash{position:fixed;bottom:28px;display:none;pointer-events:auto;touch-action:none}.touch-pad.visible,.touch-dash.visible{display:block}.touch-pad{left:28px;width:130px;height:130px;border-radius:50%;background:#ffffff14;border:1px solid var(--line)}.touch-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#ffffff40}.touch-dash{right:28px;width:92px;height:92px;border-radius:50%;border:none;background:#ffd34dd9;color:#1a1400;font-weight:800}@media(max-width:520px){.panel{padding:18px}.chip{min-width:0;padding:6px 8px;font-size:12px}.controls-help{display:none}.preview-stage{width:128px;height:128px}.preview{gap:10px}}