.fx{--fx-accent:var(--gold)}.fx-rail{gap:.5rem;height:clamp(20rem,44vw,29rem);display:flex}.fx-tab{isolation:isolate;cursor:pointer;min-width:0;box-shadow:0 0 0 1px var(--border-subtle);transition:flex-grow .56s var(--ease-out), box-shadow .3s ease;background:#0b0a10;border:0;border-radius:16px;flex:1 1 0;padding:0;position:relative;overflow:hidden}.fx-tab.is-active{box-shadow:0 0 0 1px color-mix(in srgb, var(--fx-tab) 70%, transparent), 0 24px 48px -28px #000000e6;flex-grow:4.4}.fx-tab:not(:disabled):active{scale:.99}.fx-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.fx-tab__scene{filter:saturate(.55)brightness(.5);transition:filter .48s;position:absolute;inset:0}.fx-tab.is-active .fx-tab__scene{filter:none}.fx-tab__bg,.fx-tab__fg{object-fit:cover;object-position:50% 30%;transition:transform .9s var(--ease-out)}.fx-tab__bg{transform:scale(1.06)}.fx-tab__fg{transform:scale(1.02)translateY(1%)}.fx-tab.is-active .fx-tab__bg{transform:none}.fx-tab.is-active .fx-tab__fg{transform:scale(1.04)translateY(-1%)}.fx-tab__shade{z-index:1;background:linear-gradient(#0000 45%,#08060c8c 72%,#08060cf0 100%);position:absolute;inset:0}.fx-tab:after{content:"";z-index:3;background:var(--fx-tab);transform-origin:0;height:3px;transition:transform .56s var(--ease-out);position:absolute;inset:auto 0 0;transform:scaleX(0)}.fx-tab.is-active:after{transform:scaleX(1)}.fx-tab__label{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:.2rem;padding:0 .4rem 1rem;display:flex;position:absolute;inset:auto 0 0}.fx-tab__name{text-overflow:ellipsis;max-width:100%;font-family:var(--font-display);letter-spacing:.04em;color:var(--text-secondary);white-space:nowrap;font-size:.72rem;font-weight:700;line-height:1.1;transition:color .3s;overflow:hidden}.fx-tab__sub{font-family:var(--font-body);color:var(--text-secondary);white-space:nowrap;font-size:.8rem;display:none}.fx-tab.is-active .fx-tab__label{text-align:left;align-items:flex-start;padding:0 1.4rem 1.35rem}.fx-tab.is-active .fx-tab__name{letter-spacing:.01em;color:var(--text-primary);text-shadow:0 4px 18px #000000b3;font-size:clamp(1.5rem,3vw,2.1rem)}.fx-tab.is-active .fx-tab__sub{animation:fx-rise .42s var(--ease-out) both;display:block}.fx-tab.is-active .fx-tab__name{animation:fx-rise .42s var(--ease-out) both}@keyframes fx-rise{0%{opacity:0;transform:translateY(8px)}}@media (hover:hover) and (pointer:fine){.fx-tab:not(.is-active):hover .fx-tab__scene{filter:saturate(.85)brightness(.78)}.fx-tab:not(.is-active):hover .fx-tab__name{color:var(--text-primary)}}.fx-panel{gap:2rem 3rem;margin-top:1.75rem;display:grid}.fx-panel__line{border-left:2px solid var(--fx-accent);font-family:var(--font-display);color:var(--text-primary);margin:0;padding-left:1rem;font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:600;line-height:1.3}.fx-panel__play{max-width:34rem;color:var(--text-secondary);margin:1.1rem 0 .4rem;line-height:1.65}.fx-panel__heroes-title{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .75rem;font-size:.78rem;font-weight:600}.fx-heroes{grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.fx-hero{text-decoration:none;display:block}.fx-hero__frame{aspect-ratio:2/3;background:radial-gradient(ellipse 90% 55% at 50% 100%, color-mix(in srgb, var(--hero-accent,var(--gold)) 38%, transparent), transparent 75%), linear-gradient(180deg, #171520, #0e0c14);box-shadow:0 0 0 1px var(--border-subtle);transition:box-shadow .24s ease, transform .32s var(--ease-out);border-radius:10px;display:block;position:relative;overflow:hidden}.fx-hero__art{object-fit:contain;object-position:50% 100%;transition:transform .7s var(--ease-out);padding:6% 4% 0}.fx-hero__name{font-family:var(--font-display);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin-top:.5rem;font-size:.82rem;font-weight:700;display:block;overflow:hidden}.fx-hero__role{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;display:block;overflow:hidden}@media (hover:hover) and (pointer:fine){.fx-hero:hover .fx-hero__frame{box-shadow:0 0 0 1px var(--gold), 0 14px 28px -16px #000000e6;transform:translateY(-3px)}.fx-hero:hover .fx-hero__art{transform:scale(1.05)translateY(-2%)}.fx-hero:hover .fx-hero__name{color:var(--gold-bright)}}.fx-hero:active .fx-hero__frame{transition-duration:var(--dur-press);transform:scale(.97)}@media (min-width:900px){.fx-panel{grid-template-columns:minmax(0,1fr) minmax(0,27rem);align-items:start}}@media (max-width:639px){.fx-rail{gap:.35rem;height:15rem}.fx-tab{border-radius:12px;min-width:2.75rem}.fx-tab.is-active{flex-grow:3}.fx-tab:not(.is-active) .fx-tab__label{display:none}.fx-tab.is-active .fx-tab__label{padding:0 .7rem .85rem}.fx-tab.is-active .fx-tab__name{font-size:1.05rem}.fx-tab__sub{font-size:.72rem}.fx-panel{gap:1.5rem;margin-top:1.25rem}.fx-heroes{gap:.4rem}.fx-hero__name{font-size:.72rem}.fx-hero__role{font-size:.64rem}}@media (max-width:400px){.fx-tab{min-width:2.25rem}.fx-tab.is-active .fx-tab__label{padding-inline:.55rem}.fx-tab.is-active .fx-tab__name{font-size:.95rem}}@media (prefers-reduced-motion:reduce){.fx-tab,.fx-tab__scene,.fx-tab__bg,.fx-tab__fg,.fx-tab:after,.fx-hero__frame,.fx-hero__art{transition:none}.fx-tab.is-active .fx-tab__name,.fx-tab.is-active .fx-tab__sub{animation:none}}