:root{--cc-red: #e32301;--cc-orange: #e6701e;--cc-cream: #f1cd7a;--cc-white: #ffffff;--cc-sky: #bbddfe;--cc-blue: #0482fe;--cc-navy: #004589;--cc-black: #080808;--cc-stripe: linear-gradient(90deg, var(--cc-red) 0 15%, var(--cc-orange) 15% 30%, var(--cc-cream) 30% 45%, var(--cc-white) 45% 57%, var(--cc-sky) 57% 72%, var(--cc-blue) 72% 87%, var(--cc-navy) 87% 100%);--bg: var(--cc-black);--bg-2: #111112;--panel: rgba(13, 13, 14, .9);--line: #262628;--line-soft: #333336;--ink: var(--cc-white);--muted: #9ea7b3;--accent: var(--cc-blue);--hp-high: #4fcf3f;--hp-mid: var(--cc-cream);--hp-low: var(--cc-red);--hp-track: #4a4a4a;--display: "Perfectly Nineties", "Instrument Serif", Georgia, "Times New Roman", serif;--body: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;--mono: "Supply Mono", "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;color-scheme:dark;--vw: 100vw}@supports (width: 100dvw){:root{--vw: 100dvw}}*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased}.grain:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{min-height:100vh}.arena{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--bg)}.stagearea,.viewport{position:relative;container-type:size;overflow:hidden}.sidebar{display:flex;flex-direction:column;gap:10px;min-height:0}.topbar{display:flex;align-items:center;gap:14px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.brand{display:flex;align-items:center;min-width:0;font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--ink);white-space:nowrap}.brand-logo{height:22px;width:auto;max-width:100%;display:block}.brand-mark{display:none;height:24px;width:auto}.transport,.mute{white-space:nowrap;flex:none}.transport{margin-left:auto;padding:3px 8px;border:1px solid var(--line-soft);color:var(--muted);background:#08080899}.transport-ably,.transport-relay{color:var(--hp-high);border-color:var(--hp-high)}.mute{background:#08080899;border:1px solid var(--line-soft);color:var(--ink);padding:5px 10px;letter-spacing:inherit;text-transform:inherit;font-family:inherit;font-size:inherit}.mute:hover{border-color:var(--cc-blue);color:var(--cc-sky)}.mute.needs-tap{border-color:var(--cc-blue);color:var(--cc-sky);animation:pulse-border 1.6s ease-in-out infinite}@keyframes pulse-border{0%,to{box-shadow:0 0 #0482fe80}50%{box-shadow:0 0 0 5px #0482fe00}}.howto-btn{background:#08080899;border:1px solid var(--line-soft);color:var(--cc-sky);padding:5px 10px;letter-spacing:inherit;text-transform:inherit;font-family:inherit;font-size:inherit;white-space:nowrap;flex:none}.howto-btn:hover{border-color:var(--cc-blue);color:var(--cc-white)}.howto-btn:disabled{opacity:.5}.scene{position:absolute;--w: max(100cqw, calc(100cqh * var(--ar)));--h: max(100cqh, calc(100cqw / var(--ar)));width:var(--w);height:var(--h);left:clamp(calc(100cqw - var(--w)),calc(50cqw - var(--w) * var(--fx)),0px);top:clamp(calc(100cqh - var(--h)),calc(50cqh - var(--h) * var(--fy)),0px);background:#0c1226;overflow:hidden;isolation:isolate}.layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.frame{opacity:0;transition:opacity .7s ease;will-change:opacity}.frame.on{opacity:1}.frame.final{transition-delay:.35s}.fx-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dmg-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.scene.hit{animation:shake 1.38s cubic-bezier(.36,.07,.19,.97) both}.scene.hit .frame.on{animation:flash 1.3s ease-out both}.scene.stagehit{animation:shake 1.9s cubic-bezier(.36,.07,.19,.97) both}.scene.stagehit .frame.on{animation:flash 1.7s ease-out both}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-.7%,.4%)}20%{transform:translate(.6%,-.3%)}30%{transform:translate(-.5%,.25%)}40%{transform:translate(.45%,.3%)}50%{transform:translate(-.35%,-.15%)}60%{transform:translate(.25%,.15%)}70%{transform:translate(-.17%,.1%)}80%{transform:translate(.1%,-.05%)}90%{transform:translate(-.05%)}}@keyframes flash{0%{filter:brightness(1.7) saturate(1.8) sepia(.5) hue-rotate(-40deg)}to{filter:none}}.dmg{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-weight:700;font-size:clamp(20px,4.5cqmin,46px);color:#fff;text-shadow:0 2px 0 #7a1a1a,0 0 14px rgba(224,78,58,.9),0 0 2px #000;animation:float-up 1.95s ease-out both;white-space:nowrap}.dmg.big{font-size:clamp(28px,7cqmin,72px);color:var(--cc-cream);text-shadow:0 3px 0 #7a4a00,0 0 18px rgba(241,205,122,.9);animation-duration:2.4s}.dmg.callout{font-size:clamp(16px,3.2cqmin,34px);letter-spacing:.08em;text-transform:uppercase;animation-duration:2.8s;white-space:nowrap}.dmg.super{color:var(--cc-sky);text-shadow:0 2px 0 var(--cc-navy),0 0 18px rgba(4,130,254,.9),0 0 2px #000}.dmg.crit{color:var(--cc-orange);text-shadow:0 2px 0 #7a2a00,0 0 18px rgba(230,112,30,.95),0 0 2px #000}.dmg.goal{color:var(--cc-cream)}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-170%) scale(1)}}.victory-banner{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;display:grid;justify-items:center;gap:.35em;text-align:center;font-size:clamp(30px,9cqmin,120px);opacity:0;transition:opacity 1.6s ease .9s;pointer-events:none}.victory-banner:before,.victory-banner:after{content:"";display:block;width:44%;height:4px;background:var(--cc-stripe)}.victory-eyebrow{font-family:var(--mono);font-size:.22em;letter-spacing:.3em;text-transform:uppercase;color:var(--cc-sky);text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.8);margin-top:.4em}.victory-title{font-family:var(--display);font-weight:400;font-size:1em;line-height:.95;letter-spacing:.02em;color:var(--cc-cream);text-shadow:0 0 28px rgba(241,205,122,.5),0 3px 0 #3a2a00,0 0 2px #000}.victory-subtitle{font-family:var(--mono);font-weight:700;font-size:.24em;letter-spacing:.22em;text-transform:uppercase;color:var(--cc-white);text-shadow:0 1px 0 #000,0 0 12px rgba(0,0,0,.8);margin-bottom:.5em}.victory-banner.show{opacity:1}.white-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none}.white-flash.go{animation:whiteout 1.2s ease-out both}@keyframes whiteout{0%{opacity:0}15%{opacity:1}to{opacity:0}}.hud{font-size:15px;padding:0;filter:drop-shadow(0 .5em 0 rgba(0,0,0,.45))}.hud-loading{padding:.9em 1em;color:var(--muted);font-family:var(--mono);font-size:12px}.hpbox-outer{--notch: 1.75em;background:#1c1c1c;padding:.2em;clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}.hpbox{--notch: 1.6em;background:linear-gradient(180deg,#f4f4f4,#e2e2e2);color:#1c1c1c;padding:.65em .95em .8em;clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}.hpbox-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;padding-right:1.5em;margin-bottom:.5em}.hpbox-name{margin:0;font-family:var(--body);font-weight:800;font-size:1.13em;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hpbox-level{flex:none;font-family:var(--mono);font-size:.8em;letter-spacing:.04em;color:#444}.hpbox-level b{font-weight:700;font-size:1.25em;color:#1c1c1c;margin-left:.15em}.hp-row{display:grid;gap:.25em;margin-bottom:.5em}.hp-row:last-child{margin-bottom:0}.hp-track-wrap{display:flex;align-items:center;gap:.4em;background:#2a2a2a;border-radius:.4em;padding:.2em .35em .2em .4em}.hp-tag{font-family:var(--mono);font-weight:700;font-size:.73em;line-height:1;letter-spacing:.04em;color:var(--cc-cream);text-shadow:1px 1px 0 #000}.hp-track{flex:1 1 auto;height:.67em;background:var(--hp-track);border-radius:.2em;overflow:hidden}.hp-fill{height:100%;border-radius:.2em;background:var(--hp-high);transition:width .45s cubic-bezier(.2,.8,.2,1),background-color .3s}.hp-main .hp-track{height:.93em}.hp-main .hp-tag{font-size:.87em}.tone-mid .hp-fill{background:var(--hp-mid)}.tone-low .hp-fill,.tone-ko .hp-fill{background:var(--hp-low)}.hud-status{margin:0 0 .5em;font-family:var(--mono);font-size:.73em;letter-spacing:.06em;text-transform:uppercase;color:#555}.hud-status.defeated{color:var(--cc-red);font-weight:700}.hp-defeated{display:grid;gap:.55em;padding-top:.5em;border-top:2px solid #c9c9c9}.hp-defeated-banner{margin:0;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.45em .8em;border:2px solid var(--cc-red);border-radius:.3em;background:#1a0a0a;color:var(--cc-red);font-family:var(--body);font-weight:800;font-size:1.15em;letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 0 .8em #e3230159,0 0 .6em #e3230159}.hp-defeated-banner svg{font-size:1.15em;filter:drop-shadow(0 0 .2em rgba(227,35,1,.8))}.hp-defeated-phases{margin:0;display:flex;align-items:center;justify-content:space-between;gap:.6em;font-family:var(--mono);font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:#2a2a2a}.hp-phase-gems{display:inline-flex;gap:.45em}.hp-gem{display:inline-block;width:.9em;height:.9em;transform:rotate(45deg);background:#cfcfcf;border:1px solid #9a9a9a}.hp-gem.on{background:linear-gradient(135deg,#fff3b0,#f1cd7a 45%,#c9932a);border-color:#a8731c;box-shadow:0 0 .35em #f1cd7acc}.hp-defeated-note{margin:0;font-family:var(--mono);font-size:.72em;letter-spacing:.04em;color:#555;text-align:center}.hud-time{margin:0 0 .5em;font-family:var(--mono);font-size:.73em;letter-spacing:.06em;text-transform:uppercase;color:#555}.hud-time-row{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;margin:0}.hud-time-value{font-weight:700;font-size:1.15em;color:#1c1c1c;font-variant-numeric:tabular-nums}.hud-time-note{margin:.1em 0 0;font-size:.85em;letter-spacing:.04em;text-transform:none;color:#666;text-align:right}.hud-time.urgent .hud-time-value,.hud-time.over .hud-time-value{color:var(--cc-red)}.hud-goals{display:grid;gap:.4em;padding-top:.5em;border-top:2px solid #c9c9c9}.hud-goals .hp-row{grid-template-columns:minmax(0,1fr) 7.4em;align-items:center;gap:.5em;margin-bottom:0}.hud-goals .hp-track{height:.53em}.hud-goals .hp-tag{font-size:.67em}.hud-goals .hp-row{--goal: transparent}.hud-goals .hp-track-wrap{box-shadow:inset .25em 0 0 var(--goal);padding-left:.6em}.hp-meta{display:grid;text-align:right;line-height:1.15}.hp-meta-label{font-family:var(--body);font-weight:600;font-size:.73em;color:#333;white-space:nowrap}.hp-meta-val{font-family:var(--mono);font-size:.67em;color:#555;font-variant-numeric:tabular-nums;white-space:nowrap}.tone-ko .hp-meta-val{color:var(--cc-red);font-weight:700}.hud-overlay{position:absolute;z-index:2;left:2cqw;top:2cqw;width:clamp(250px,24cqw,420px);font-size:clamp(12px,.95cqw,17px)}.hud-stacked{display:none}.feed{position:relative;background:var(--panel);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;min-height:0}.feed-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-sky);margin:0 0 10px}.feed-empty{color:var(--muted);margin:0;font-size:13px}.feed-list{list-style:none;margin:0;padding:0 6px 0 0;display:grid;align-content:start;gap:8px;font-size:13px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;overscroll-behavior:contain}.feed-list::-webkit-scrollbar{width:6px}.feed-list::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:3px}.feed-list li{display:grid;gap:2px;padding:0 0 8px 10px;border-bottom:1px solid var(--line);border-left:3px solid transparent}.feed-list li:last-child{border-bottom:0}.feed-list li.super{border-left-color:var(--cc-blue);background:linear-gradient(90deg,rgba(4,130,254,.14),transparent 60%)}.feed-list li.crit{border-left-color:var(--cc-orange);background:linear-gradient(90deg,rgba(230,112,30,.16),transparent 60%)}.feed-list li.both{border-left-color:var(--cc-cream);background:linear-gradient(90deg,rgba(241,205,122,.16),transparent 60%)}.feed-list li.ko{border-left-color:var(--cc-red)}.feed-list li.ko .feed-what{color:var(--cc-cream)}.feed-user{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;font-family:var(--mono);font-size:12px;letter-spacing:.02em}.feed-name{flex:none;white-space:nowrap;font-weight:700;color:var(--cc-white)}.feed-points{flex:none;padding:0 5px;border:1px solid var(--line-soft);color:var(--muted);font-size:10px}.feed-points{color:var(--cc-sky);border-color:var(--line-soft)}.feed-list li.super .feed-points{color:var(--cc-blue);border-color:var(--cc-blue)}.feed-list li.crit .feed-points{color:var(--cc-orange);border-color:var(--cc-orange)}.feed-list li.both .feed-points{color:var(--cc-cream);border-color:var(--cc-cream)}.feed-bonus{flex:0 1 auto;min-width:0;font-size:10px;letter-spacing:.05em;text-transform:uppercase}.feed-list li.super .feed-bonus{color:var(--cc-sky)}.feed-list li.crit .feed-bonus{color:var(--cc-orange)}.feed-list li.both .feed-bonus{color:var(--cc-cream)}.feed-what{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.feed-what em{font-style:normal;color:var(--ink)}.feed-what .pack{color:var(--cc-cream);font-weight:600}.feed-what .prize{color:var(--cc-sky)}.prize{cursor:zoom-in;text-decoration:underline dotted var(--line-soft);text-underline-offset:2px}.prize:hover,.prize:focus-visible{color:var(--cc-blue);outline:none}.prize-preview{position:fixed;z-index:30;pointer-events:none;background:var(--cc-black);border:1px solid var(--line-soft);box-shadow:0 16px 40px #0009;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;animation:pop-in .14s ease-out both}.prize-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--cc-stripe);opacity:.08}.prize-preview img{width:100%;height:100%;min-height:0;object-fit:contain;padding:10px;opacity:0;transition:opacity .2s;position:relative}.prize-preview.loaded img{opacity:1}.prize-preview-name{position:relative;padding:6px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes pop-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.feed-what strong{color:var(--ink)}.gate{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#080808cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.gate-card{position:relative;overflow:hidden;max-width:440px;margin:16px;padding:30px 30px 26px;background:var(--cc-black);border:1px solid var(--line-soft);text-align:center;display:grid;gap:14px}.gate-card:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--cc-stripe)}.gate-card h1{font-family:var(--display);font-weight:400;font-size:44px;line-height:.95;margin:8px 0 0;letter-spacing:-.01em}.gate-card p{margin:0 0 4px;color:var(--muted);font-size:15px}.gate-enter{background:var(--cc-blue);color:#fff;border:0;padding:14px 18px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}.gate-enter:hover{background:#1f8fff}.gate-quiet{background:none;border:1px solid var(--line-soft);color:var(--muted);padding:10px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}.app.gated .arena{filter:saturate(.6)}.howto-big{position:absolute;z-index:2;right:2cqw;bottom:2cqw;font-size:clamp(12px,.95cqw,17px);display:flex;align-items:center;gap:.7em;padding:.55em 1em .55em .6em;background:linear-gradient(180deg,#f4f4f4,#e2e2e2);color:#1c1c1c;border:0;--notch: 1.2em;clip-path:polygon(var(--notch) 0,100% 0,100% 100%,0 100%,0 var(--notch));filter:drop-shadow(0 .5em 0 rgba(0,0,0,.45));cursor:pointer;text-align:left}.howto-big:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 0 .2em #1c1c1c;clip-path:inherit}.howto-big-mark{display:grid;place-items:center;width:1.4em;padding:0 .1em;color:#1c1c1c;font-family:var(--display);font-size:2.4em;line-height:1}.howto-big-text{display:grid;gap:.1em}.howto-big-label{font-family:var(--body);font-weight:800;font-size:1.05em;letter-spacing:.02em;text-transform:uppercase}.howto-big-sub{font-family:var(--mono);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:#555}.howto-big:hover .howto-big-mark{color:var(--cc-blue)}.howto-big:focus-visible{outline:3px solid var(--cc-blue);outline-offset:2px}.howto-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:16px;background:#080808bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.howto{position:relative;overflow:hidden;width:min(520px,100%);max-height:90vh;overflow-y:auto;padding:30px 30px 26px;background:var(--cc-black);border:1px solid var(--line-soft);display:grid;gap:16px}.howto:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--cc-stripe)}.howto>*{position:relative}.howto h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;margin:8px 0 0}.howto-lines{margin:0;padding-left:1.3em;display:grid;gap:10px;color:var(--ink);font-size:15px;line-height:1.5}.howto-lines li::marker{color:var(--cc-blue);font-family:var(--mono);font-weight:700}.howto-window{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.7}.howto-window span{display:inline-block;width:4.5em;color:var(--cc-sky);text-transform:uppercase}.howto .battle-join{justify-self:start}.howto-close{position:absolute;top:14px;right:12px;width:32px;height:32px;background:none;border:1px solid var(--line-soft);color:var(--muted);font-size:20px;line-height:1}.howto-close:hover{color:var(--ink);border-color:var(--cc-blue)}.debug{position:fixed;left:12px;bottom:12px;z-index:20;font-size:12px;max-width:min(420px,calc(100vw - 24px))}.debug-toggle{width:100%;text-align:left;background:#000;color:#9fd;border:1px solid #245;padding:6px 10px;font-family:ui-monospace,monospace}.debug-body{background:#000000e6;border:1px solid #245;border-top:0;padding:8px;display:grid;gap:6px}.debug-row{display:flex;flex-wrap:wrap;gap:6px}.debug-row button{background:#10203a;color:#cfe;border:1px solid #2a4a6a;padding:4px 8px;font-family:ui-monospace,monospace;font-size:12px}.debug-head{margin:4px 0 0;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7fb}.debug-label{align-self:center;font-family:ui-monospace,monospace;font-size:11px;color:#9ab;min-width:3.5em}.debug-row .debug-clear{background:#3a1d10;border-color:#7a3a1a;color:#fda}.debug-row button:disabled{opacity:.4}.battle-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.battle-join{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--cc-blue);color:#fff;text-decoration:none;font-weight:700}.battle-join:hover{background:#1f8fff}.battle-explainer{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-weight:700;background:#08080899}.battle-explainer:hover{border-color:var(--cc-blue);color:var(--cc-sky)}.battle-tactics{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}.battle-social{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line-soft);color:var(--ink);background:#08080899}.battle-social:hover{border-color:var(--cc-blue);color:var(--cc-sky)}@media(orientation:landscape)and (min-width:1100px)and (min-height:501px){.arena{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);--sidebar: clamp(300px, 24vw, 380px)}.sidebar{order:-1}.arena[data-sidebar=right]{grid-template-columns:minmax(0,1fr) var(--sidebar)}.arena[data-sidebar=right] .sidebar{order:2;border-right:0;border-left:1px solid var(--line)}.sidebar{position:relative;padding:0 12px max(12px,env(safe-area-inset-bottom));border-right:1px solid var(--line);background:var(--bg);container-type:inline-size}.topbar{flex-wrap:wrap;gap:8px 10px}.brand{flex:1 0 100%}.transport{margin-left:0}.mute{margin-left:auto}.sidebar:before{content:"";flex:none;height:6px;margin:0 -12px;background:var(--cc-stripe)}.sidebar>*{position:relative;z-index:1}.topbar{margin:0 -12px}.feed{flex:1 1 auto}.sidebar .hud-stacked{display:none}.stagearea{background:radial-gradient(80% 70% at 50% 45%,#141416,var(--bg) 75%)}.stagearea:before{content:"";position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;pointer-events:none;background-image:url(/brand/cc-symbol-tile.svg),url(/brand/cc-symbol-tile.svg);background-size:280px 280px,280px 280px;background-position:0 0,140px 140px;background-repeat:repeat,repeat;opacity:.05;transform:rotate(-24deg)}.stagearea>*{position:relative}.battle-links{position:absolute;left:0;right:0;top:18px;z-index:3;padding:0 16px}.viewport{position:absolute;--vpw: min(100cqw, calc(100cqh * var(--ar)), calc(var(--cw) * 1px * var(--max-scale)));width:var(--vpw);height:calc(var(--vpw) / var(--ar));left:calc(50cqw - var(--vpw) / 2);top:calc(50cqh - var(--vpw) / var(--ar) / 2);box-shadow:0 0 0 1px var(--line),0 30px 80px #00000080}}@media(orientation:landscape)and (max-width:1099px),(orientation:landscape)and (max-height:500px){.stagearea,.viewport{position:absolute;top:0;right:0;bottom:0;left:0}.sidebar{display:contents}.topbar{position:absolute;left:0;right:0;top:0;z-index:3;background:linear-gradient(to bottom,#060914b3,#06091400);pointer-events:none}.topbar>*{pointer-events:auto}.feed{position:absolute;z-index:2}.battle-links{position:absolute;left:max(14px,env(safe-area-inset-left));right:calc(min(320px,42vw) + max(16px,env(safe-area-inset-right)) + 12px);bottom:max(12px,env(safe-area-inset-bottom));z-index:3;justify-content:flex-start;gap:8px 12px}.battle-tactics-text{display:none}.hud-overlay{left:max(14px,env(safe-area-inset-left));top:calc(46px + env(safe-area-inset-top));width:min(300px,40vw);font-size:12px}.howto-big{right:max(14px,env(safe-area-inset-right));bottom:auto;top:calc(46px + env(safe-area-inset-top));font-size:11px}.feed{right:max(16px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(320px,42vw);max-height:36vh;padding:8px 10px}.brand-logo{display:none}.brand-mark{display:block}.howto-btn{padding:5px 8px}.transport{display:none}.hud{font-size:14px}.hud-status{margin-bottom:.4em}.hp-row{margin-bottom:8px}.hud-goals .hp-row{margin-bottom:6px}.hud-total{margin-top:6px;padding-top:6px;font-size:11px}.feed-list{gap:5px;font-size:12px}}@media(orientation:portrait){html,body{height:auto}.arena{position:static;overflow:visible;min-height:var(--vh, 100vh);display:flex;flex-direction:column}.stagearea,.sidebar{display:contents}.topbar{order:0;position:sticky;top:0;z-index:5;flex:none;padding-bottom:8px;background:linear-gradient(to bottom,var(--bg) 70%,rgba(8,8,8,0))}.hud-overlay{display:none}.hud-stacked{display:block;order:1;position:static;flex:none;width:auto;margin:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}.viewport{order:2;position:relative;flex:none;margin-top:10px;height:min(calc(var(--vw) / var(--mcrop) / var(--ar)),50vh)}.battle-links{order:3;flex:none;margin:12px 10px 0}.scene{--h: 100cqh;--w: calc(100cqh * var(--ar));top:0;left:clamp(calc(100cqw - var(--w)),calc(50cqw - var(--w) * var(--mfx)),0px)}.howto-big{font-size:11px;right:10px;bottom:10px}.feed{order:4;flex:none;max-height:none;margin:10px max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.feed-list{max-height:62vh}}@media(max-width:700px){.brand-logo{display:none}.brand-mark{display:block}.hud{font-size:14px}.hud-status{margin-bottom:.4em}.hp-row{margin-bottom:8px}.hp-track{height:12px}.hud-goals{padding-top:6px}.hud-goals .hp-row{margin-bottom:6px}.hud-total{margin-top:6px;padding-top:6px;font-size:11px}.feed{padding:8px 10px}.feed-list{gap:5px;font-size:12px}.debug{max-width:calc(100vw - 24px)}}@media(prefers-reduced-motion:reduce){.scene.hit,.scene.stagehit{animation:none}.dmg{animation-duration:1.6s}.hp-fill,.frame{transition:none}}