:root {
    --bg: #050506;
    --panel: rgba(15, 16, 18, 0.78);
    --panel-2: rgba(255, 255, 255, 0.055);
    --line: rgba(255, 255, 255, 0.13);
    --text: #f6f7fb;
    --muted: #a9b0bd;
    --yellow: #fff200;
    --red: #ff1f35;
    --cyan: #34d9ff;
    --green: #62f2a8;
    --radius: 10px;
    --shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 31, 53, 0.16), transparent 28rem),
        radial-gradient(circle at 86% 16%, rgba(255, 242, 0, 0.10), transparent 25rem),
        linear-gradient(135deg, #050506 0%, #0b0c10 56%, #050506 100%);
    font-family: Inter, system-ui, sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.arena-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.38;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.ring-lights {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ring-lights span {
    position: absolute;
    top: -18vh;
    width: 24vw;
    height: 80vh;
    background: linear-gradient(to bottom, rgba(255, 242, 0, 0.2), transparent 70%);
    filter: blur(18px);
    transform-origin: top;
    animation: sweepLight 8s ease-in-out infinite;
}

.ring-lights span:nth-child(1) {
    left: 5%;
    transform: rotate(18deg);
}

.ring-lights span:nth-child(2) {
    left: 42%;
    animation-delay: -2.5s;
}

.ring-lights span:nth-child(3) {
    right: 2%;
    transform: rotate(-18deg);
    animation-delay: -5s;
}

.arena-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 22px;
    align-items: center;
    min-height: 96px;
    padding: 16px clamp(18px, 4vw, 70px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(18px);
}

.academy-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.academy-mark img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255, 242, 0, 0.32));
}

.arena-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.arena-header nav a,
.sound-arm,
.topbar-actions a,
.admin-sidebar a {
    display: inline-grid;
    min-height: 42px;
    place-items: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.arena-header nav a:hover,
.sound-arm:hover,
.sound-arm.is-on,
.topbar-actions a:hover,
.admin-sidebar a:hover,
.admin-sidebar a.is-active {
    color: var(--text);
    border-color: rgba(255, 242, 0, 0.34);
    background: rgba(255, 242, 0, 0.08);
    transform: translateY(-2px);
}

.arena-hero {
    position: relative;
    width: min(1240px, calc(100% - 32px));
    min-height: calc(100svh - 96px);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.76fr);
    align-items: center;
    gap: 44px;
    margin: 0 auto;
    padding: 58px 0;
}

.hero-copy {
    display: grid;
    gap: 18px;
}

.eyebrow {
    margin: 0;
    color: var(--yellow);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-copy h1,
.section-head h2,
.admin-topbar h1 {
    margin: 0;
    font-family: "Bebas Neue", Inter, sans-serif;
    font-size: clamp(4.6rem, 11vw, 9.5rem);
    line-height: 0.84;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 34px rgba(255, 31, 53, 0.42);
}

.hero-lead {
    max-width: 680px;
    margin: 0;
    color: #dfe3ec;
    font-size: 1.04rem;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.arena-btn {
    position: relative;
    isolation: isolate;
    display: inline-grid;
    min-height: 50px;
    place-items: center;
    padding: 0 22px;
    border: 1px solid rgba(255, 242, 0, 0.36);
    border-radius: 8px;
    color: #101010;
    background: linear-gradient(135deg, var(--yellow), #ffcc14);
    box-shadow: 0 18px 48px rgba(255, 242, 0, 0.18);
    font-weight: 950;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.arena-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: translateX(-120%);
    transition: transform 580ms ease;
}

.arena-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px rgba(255, 242, 0, 0.24);
}

.arena-btn:hover::before {
    transform: translateX(120%);
}

.arena-btn.ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.champion-stage {
    position: relative;
    min-height: 650px;
    display: grid;
    align-items: end;
    justify-items: center;
    cursor: pointer;
    perspective: 1000px;
}

.fighter-hologram {
    position: relative;
    width: min(460px, 100%);
    aspect-ratio: 0.72 / 1;
    display: grid;
    align-items: end;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 242, 0, 0.16), transparent 23rem),
        rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow), 0 0 54px rgba(255, 31, 53, 0.18);
    transform: rotateY(-6deg);
    animation: fighterIdle 4s ease-in-out infinite;
}

.fighter-hologram::before,
.fighter-image::before,
.profile-media::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 0 48%, rgba(255, 255, 255, 0.08) 50%, transparent 52%);
    background-size: 100% 8px;
    opacity: 0.18;
    mix-blend-mode: screen;
}

.fighter-hologram img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vertical-meter,
.card-meter,
.power-tower {
    position: absolute;
    display: grid;
    place-items: end center;
    width: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.vertical-meter {
    left: 0;
    top: 9%;
    height: 78%;
}

.vertical-meter::before,
.card-meter::before,
.power-tower::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--score) * 1%);
    background: linear-gradient(to top, var(--red), var(--yellow), var(--green));
    box-shadow: 0 0 22px rgba(255, 242, 0, 0.32);
}

.vertical-meter span,
.card-meter span {
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 6px;
    border-radius: 50%;
    color: #080808;
    background: var(--yellow);
    font-weight: 950;
}

.fighter-titleplate {
    position: absolute;
    right: 10px;
    bottom: 32px;
    left: 74px;
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(255, 242, 0, 0.28);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(14px);
}

.fighter-titleplate span,
.fighter-info span {
    color: var(--yellow);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
}

.fighter-titleplate strong {
    font-size: 1.42rem;
}

.arena-strip {
    width: min(1240px, calc(100% - 32px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 auto;
}

.arena-strip article,
.fighter-card,
.profile-panel,
.admin-topbar,
.admin-panel,
.admin-sidebar,
.login-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.arena-strip article {
    min-height: 96px;
    display: grid;
    gap: 6px;
    padding: 18px;
}

.arena-strip span {
    color: var(--muted);
    font-weight: 900;
}

.arena-strip strong {
    color: var(--yellow);
    font-size: 2rem;
}

.roster-zone {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 72px 0 80px;
}

.section-head {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.section-head h2,
.admin-topbar h1 {
    font-size: clamp(3rem, 6vw, 5.4rem);
}

.filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin-bottom: 18px;
}

input,
textarea,
select {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    outline: 0;
    padding: 10px 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
}

textarea {
    resize: vertical;
}

.filter-panel button,
.admin-roster button,
.user-form button,
.inline-user-edit button,
.studio-controls button,
.gallery-admin button {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    font-weight: 950;
}

.filter-panel button.is-active,
.filter-panel button:hover,
.admin-roster button:hover,
.user-form button:hover,
.studio-controls button:hover,
.gallery-admin button:hover {
    color: #080808;
    border-color: var(--yellow);
    background: var(--yellow);
}

.fighter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fighter-card {
    position: relative;
    overflow: hidden;
    animation: cardEnter 620ms ease both;
    animation-delay: var(--delay);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.fighter-card:hover {
    transform: translateY(-8px) rotateX(2deg);
    border-color: rgba(255, 242, 0, 0.42);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), 0 0 32px rgba(255, 31, 53, 0.18);
}

.fighter-card.is-hidden {
    display: none;
}

.fighter-image {
    position: relative;
    width: 100%;
    aspect-ratio: 0.82 / 1;
    display: block;
    overflow: hidden;
    border: 0;
    background: #08090d;
}

.fighter-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease, filter 420ms ease;
}

.fighter-card:hover .fighter-image img {
    transform: scale(1.08);
    filter: saturate(1.18) contrast(1.08);
}

.card-meter {
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 42px;
    height: 126px;
}

.card-meter span {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
}

.fighter-info {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.fighter-info h3 {
    min-height: 54px;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
}

.fighter-info p {
    margin: 0;
    color: var(--muted);
}

.fighter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fighter-tags b {
    display: inline-grid;
    min-height: 28px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #dfe3ec;
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.72rem;
}

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
    transition: background 220ms ease;
}

.profile-modal.is-open {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.78);
}

.profile-panel {
    position: relative;
    width: min(1080px, 100%);
    max-height: calc(100svh - 36px);
    display: grid;
    grid-template-columns: minmax(300px, 0.84fr) 1fr;
    gap: 18px;
    padding: 16px;
    overflow: auto;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: transform 260ms ease, opacity 260ms ease;
}

.profile-modal.is-open .profile-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.52);
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 11px;
    width: 18px;
    height: 2px;
    background: var(--text);
}

.modal-close::before {
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.profile-media {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
}

.profile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.power-tower {
    right: 14px;
    bottom: 14px;
    height: 72%;
}

.profile-copy {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 10px;
}

.profile-copy h2 {
    margin: 0;
    font-family: "Bebas Neue", Inter, sans-serif;
    font-size: clamp(3rem, 6vw, 5.2rem);
    line-height: 0.92;
}

.profile-copy p {
    margin: 0;
    color: #dfe3ec;
    line-height: 1.75;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-stats article,
.achievement-board > div {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.profile-stats span,
.achievement-board span {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-stats strong,
.achievement-board strong {
    font-size: 1.24rem;
}

.achievement-board {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    gap: 10px;
}

.achievement-board ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #dfe3ec;
}

.gallery-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.gallery-rail button {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.gallery-rail img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.players-admin {
    min-height: 100svh;
}

.admin-shell {
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
}

.admin-topbar h1 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
}

.topbar-actions {
    display: flex;
    gap: 8px;
}

.admin-alert {
    margin-bottom: 14px;
    padding: 13px 16px;
    border-radius: var(--radius);
    font-weight: 900;
}

.admin-alert.success {
    border: 1px solid rgba(98, 242, 168, 0.34);
    color: var(--green);
    background: rgba(98, 242, 168, 0.08);
}

.admin-alert.error {
    border: 1px solid rgba(255, 31, 53, 0.34);
    color: #ff9aaa;
    background: rgba(255, 31, 53, 0.08);
}

.login-card {
    width: min(420px, 100%);
    display: grid;
    gap: 12px;
    margin: 80px auto 0;
    padding: 18px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.admin-sidebar strong {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.admin-panel {
    padding: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel-head h2,
.panel-head h3 {
    margin: 0;
}

.panel-head span {
    color: var(--yellow);
    font-weight: 950;
}

.admin-roster {
    display: grid;
    gap: 10px;
}

.admin-roster article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.admin-roster img {
    width: 62px;
    height: 62px;
    border-radius: 8px;
    object-fit: cover;
}

.admin-roster strong,
.admin-roster span {
    display: block;
}

.admin-roster span {
    color: var(--muted);
    font-size: 0.84rem;
}

.admin-roster a,
.admin-roster button {
    display: grid;
    min-width: 64px;
    min-height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 900;
}

.player-form,
.user-form,
.inline-user-edit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.player-form label,
.login-card label,
.user-form label,
.inline-user-edit label,
.studio-controls label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 900;
}

.span-2 {
    grid-column: 1 / -1;
}

.check-line {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.check-line input {
    width: auto;
    min-height: 18px;
}

.image-studio {
    padding: 14px;
    border: 1px solid rgba(255, 242, 0, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 242, 0, 0.035);
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) 1fr;
    gap: 14px;
}

.studio-canvas-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #09090c;
}

.studio-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
}

.studio-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.gallery-admin {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.gallery-admin label {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.gallery-admin img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

.permission-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-pills label {
    position: relative;
    display: inline-flex;
}

.permission-pills input {
    position: absolute;
    opacity: 0;
}

.permission-pills span {
    display: inline-grid;
    min-height: 36px;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
}

.permission-pills input:checked + span {
    color: #080808;
    background: var(--yellow);
}

.inline-user-edit {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.sound-arm.is-on {
    color: #080808;
    border-color: rgba(255, 242, 0, 0.7);
    background: linear-gradient(135deg, var(--yellow), #ffb21a);
    box-shadow: 0 0 22px rgba(255, 242, 0, 0.24);
}

.sound-arm.is-muted {
    color: #fff;
    border-color: rgba(255, 31, 53, 0.46);
    background: rgba(255, 31, 53, 0.14);
}

.hero-lead {
    max-width: 720px;
    font-size: clamp(1.08rem, 1.55vw, 1.38rem);
    font-weight: 800;
    color: #f5f7ff;
    text-shadow: 0 0 20px rgba(255, 31, 53, 0.22);
}

.arena-strip article {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    background:
        linear-gradient(135deg, rgba(255, 242, 0, 0.055), rgba(255, 31, 53, 0.035)),
        rgba(255, 255, 255, 0.035);
}

.arena-strip article::after {
    content: "";
    position: absolute;
    inset: auto 16px 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--yellow), transparent);
    opacity: 0.68;
    animation: statPulse 2.2s ease-in-out infinite;
}

.arena-strip span {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.arena-strip strong {
    font-family: "Bebas Neue", Inter, sans-serif;
    font-size: 3rem;
    line-height: 0.9;
    text-shadow: 0 0 24px rgba(255, 242, 0, 0.34);
}

.vertical-meter,
.card-meter,
.power-tower {
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.02)),
        rgba(0,0,0,0.54);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,0.08),
        0 0 24px rgba(255, 242, 0, 0.13);
}

.vertical-meter::before,
.card-meter::before,
.power-tower::before {
    background:
        repeating-linear-gradient(to top, rgba(255,255,255,0.22) 0 2px, transparent 2px 14px),
        linear-gradient(to top, #ff243d 0%, #ff8a12 32%, #fff200 62%, #5df2a8 100%);
    box-shadow:
        0 0 18px rgba(255, 31, 53, 0.42),
        0 0 30px rgba(255, 242, 0, 0.36);
    animation: meterCharge 1.6s ease-in-out infinite;
}

.vertical-meter::after,
.card-meter::after,
.power-tower::after {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: inherit;
    pointer-events: none;
}

.power-tower {
    width: 68px;
    border-radius: 22px;
}

.power-tower span {
    z-index: 2;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 50%;
    color: #080808;
    background: var(--yellow);
    font-weight: 950;
    box-shadow: 0 0 24px rgba(255, 242, 0, 0.58);
}

.combat-card {
    cursor: pointer;
    transform-style: preserve-3d;
}

.fighter-grid {
    gap: 24px;
}

.fighter-card {
    isolation: isolate;
    overflow: visible;
    animation:
        cardEnterFade 620ms ease both,
        cardRosterIdle 4.6s ease-in-out infinite;
    animation-delay: var(--delay), calc(var(--delay) + 640ms);
    will-change: transform;
}

.fighter-card > * {
    position: relative;
    z-index: 2;
}

.fighter-card:hover {
    border-color: rgba(255, 242, 0, 0.62);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.52),
        0 0 38px rgba(255, 31, 53, 0.26),
        0 0 22px rgba(255, 242, 0, 0.18);
}

.fighter-card.is-pointer-active {
    animation: none;
}

.fighter-card.is-sound-hit {
    animation: cardHit 420ms ease both;
}

.arena-footer {
    width: min(1240px, calc(100% - 32px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 auto 28px;
    padding: 20px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: var(--muted);
    font-weight: 850;
}

.arena-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
    font-weight: 950;
    text-shadow: 0 0 18px rgba(255,242,0,0.28);
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

.gotic-mark {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255,242,0,0.24);
}

.fighter-showreel {
    width: min(1240px, calc(100% - 32px));
    display: grid;
    gap: 18px;
    margin: -24px auto 38px;
}

.section-head.compact {
    margin-bottom: 0;
}

.section-head.compact h2 {
    margin: 0;
    font-family: "Bebas Neue", Inter, sans-serif;
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    line-height: 0.9;
}

.showreel-track {
    display: flex;
    flex-direction: row-reverse;
    gap: 18px;
    min-height: 390px;
    overflow: hidden;
    padding: 18px 10px 26px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background:
        radial-gradient(circle at 90% 20%, rgba(255,242,0,0.08), transparent 18rem),
        radial-gradient(circle at 8% 80%, rgba(255,31,53,0.12), transparent 22rem),
        rgba(255,255,255,0.03);
}

.show-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 min(230px, 24vw);
    min-height: 344px;
    display: grid;
    align-items: end;
    overflow: visible;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: #09090c;
    box-shadow: 0 24px 70px rgba(0,0,0,0.42);
    cursor: pointer;
    transform: translateY(10px) scale(0.92);
    opacity: 0.38;
    filter: grayscale(0.62) brightness(0.48);
    transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 520ms ease, filter 520ms ease, border-color 520ms ease;
}

.show-card.is-active {
    transform: translateY(-8px) scale(1.08);
    opacity: 1;
    filter: none;
    border-color: rgba(255,242,0,0.52);
    box-shadow: 0 34px 92px rgba(0,0,0,0.54), 0 0 44px rgba(255,242,0,0.22);
}

.showreel-track.is-sliding .show-card:first-child {
    transform: translateX(-120%) translateY(-8px) scale(0.98);
    opacity: 0;
}

.show-card img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.show-card::before,
.show-card::after,
.fighter-card::before,
.fighter-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.show-card::before,
.fighter-card::before {
    inset: 9% -17px -24px;
    z-index: -1;
    padding: 0;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 0% 34%, rgba(255,228,84,0.92) 0 7%, rgba(255,113,18,0.72) 12%, transparent 30%),
        radial-gradient(ellipse at 100% 42%, rgba(255,238,90,0.86) 0 8%, rgba(255,76,21,0.78) 14%, transparent 33%),
        radial-gradient(ellipse at 48% 106%, rgba(255,246,97,0.92) 0 10%, rgba(255,93,20,0.78) 19%, rgba(255,31,53,0.52) 34%, transparent 62%);
    filter: blur(9px) saturate(1.35);
    mix-blend-mode: screen;
    opacity: 0.78;
    transform: none;
    animation: sideFlameReal 980ms ease-in-out infinite;
    -webkit-mask: none;
    mask: none;
}

.show-card::after,
.fighter-card::after {
    right: -12px;
    bottom: -34px;
    left: -12px;
    z-index: -1;
    height: 134px;
    border-radius: 0 0 28px 28px;
    background:
        radial-gradient(ellipse at 18% 68%, rgba(255,242,0,0.84) 0 8%, rgba(255,117,18,0.68) 15%, transparent 34%),
        radial-gradient(ellipse at 48% 58%, rgba(255,244,92,0.92) 0 9%, rgba(255,83,21,0.76) 18%, transparent 42%),
        radial-gradient(ellipse at 78% 70%, rgba(255,213,59,0.76) 0 8%, rgba(255,31,53,0.66) 18%, transparent 36%);
    clip-path: polygon(0 100%, 7% 56%, 14% 100%, 23% 34%, 31% 100%, 42% 45%, 52% 100%, 62% 28%, 72% 100%, 83% 42%, 92% 100%, 100% 52%, 100% 100%);
    filter: blur(6px) saturate(1.65);
    mix-blend-mode: screen;
    opacity: 0.88;
    animation: bottomFlameReal 720ms ease-in-out infinite;
}

.show-card-copy,
.fighter-info {
    position: relative;
    z-index: 3;
    align-self: end;
    width: 100%;
    min-height: 48%;
    display: grid;
    align-content: end;
    gap: 8px;
    padding: 180px 16px 16px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: linear-gradient(to bottom, transparent 0%, rgba(7,7,10,0.86) 62%, rgba(7,7,10,0.98) 100%);
}

.show-card-copy span {
    color: var(--yellow);
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.show-card-copy strong {
    font-size: 1.3rem;
}

.show-card-meter {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: grid;
    width: 42px;
    height: 126px;
    place-items: end center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: rgba(0,0,0,0.42);
}

.show-card-meter::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(var(--score) * 1%);
    background: linear-gradient(to top, var(--red), var(--yellow), var(--green));
}

.show-card-meter span {
    z-index: 1;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    margin-bottom: 5px;
    border-radius: 50%;
    color: #080808;
    background: var(--yellow);
    font-size: 0.78rem;
    font-weight: 950;
}

.fighter-card {
    min-height: 510px;
    display: grid;
    align-items: end;
    overflow: visible;
    border-color: rgba(255,255,255,0.12);
    background: #09090c;
}

.fighter-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
}

.fighter-image img {
    border-radius: inherit;
}

.fighter-card:hover {
    border-color: rgba(255,117,18,0.45);
}

.fighter-card > * {
    z-index: 2;
}

.fighter-card .card-meter {
    z-index: 4;
}

.fighter-info h3 {
    min-height: 0;
}

.gotic-mark {
    display: none;
}

.arena-footer a:hover {
    color: #fff;
    transform: translateY(-2px);
    text-shadow: 0 0 24px rgba(255,31,53,0.48), 0 0 18px rgba(255,242,0,0.32);
}

@keyframes sweepLight {
    0%,
    100% {
        opacity: 0.25;
        transform: rotate(16deg) translateX(-5vw);
    }
    50% {
        opacity: 0.6;
        transform: rotate(-10deg) translateX(5vw);
    }
}

@keyframes fighterIdle {
    0%,
    100% {
        transform: rotateY(-6deg) translateY(0);
    }
    50% {
        transform: rotateY(4deg) translateY(-12px);
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardEnterFade {
    from {
        opacity: 0;
        filter: blur(8px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes cardRosterIdle {
    0%,
    100% {
        transform: translateY(0) rotateY(-4deg) rotateX(0);
    }
    50% {
        transform: translateY(-12px) rotateY(4deg) rotateX(1.6deg);
    }
}

@keyframes meterCharge {
    0%,
    100% {
        filter: saturate(1) brightness(1);
    }
    50% {
        filter: saturate(1.25) brightness(1.18);
    }
}

@keyframes fireTrace {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 180px 260px;
    }
}

@keyframes sideFlameReal {
    0%,
    100% {
        opacity: 0.66;
        transform: translateY(0) scaleX(0.96);
        filter: blur(9px) saturate(1.32) brightness(1);
    }
    34% {
        opacity: 0.92;
        transform: translateY(-5px) scaleX(1.04);
        filter: blur(10px) saturate(1.55) brightness(1.12);
    }
    68% {
        opacity: 0.78;
        transform: translateY(3px) scaleX(1.01);
        filter: blur(8px) saturate(1.45) brightness(1.06);
    }
}

@keyframes bottomFlameReal {
    0%,
    100% {
        clip-path: polygon(0 100%, 7% 56%, 14% 100%, 23% 34%, 31% 100%, 42% 45%, 52% 100%, 62% 28%, 72% 100%, 83% 42%, 92% 100%, 100% 52%, 100% 100%);
        transform: translateY(0) scaleY(0.96);
    }
    50% {
        clip-path: polygon(0 100%, 8% 38%, 16% 100%, 25% 52%, 34% 100%, 45% 24%, 55% 100%, 65% 48%, 74% 100%, 84% 30%, 94% 100%, 100% 45%, 100% 100%);
        transform: translateY(-7px) scaleY(1.08);
    }
}

@keyframes cardHit {
    0% { transform: translateY(-8px) scale(1); }
    42% { transform: translateY(-14px) scale(1.025); }
    100% { transform: translateY(-8px) scale(1); }
}

@keyframes statPulse {
    0%,
    100% {
        opacity: 0.24;
        transform: scaleX(0.62);
    }
    50% {
        opacity: 0.82;
        transform: scaleX(1);
    }
}

@media (max-width: 980px) {
    .arena-header,
    .arena-hero,
    .profile-panel,
    .admin-layout,
    .studio-grid {
        grid-template-columns: 1fr;
    }

    .arena-strip,
    .fighter-grid,
    .profile-stats,
    .gallery-admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .champion-stage {
        min-height: 540px;
    }
}

@media (max-width: 680px) {
    .arena-header {
        position: relative;
        grid-template-columns: 1fr;
    }

    .arena-header nav,
    .topbar-actions,
    .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .arena-hero {
        min-height: auto;
        padding-top: 30px;
    }

    .arena-strip,
    .fighter-grid,
    .filter-panel,
    .profile-stats,
    .achievement-board,
    .gallery-rail,
    .player-form,
    .user-form,
    .inline-user-edit,
    .studio-controls,
    .gallery-admin,
    .admin-roster article {
        grid-template-columns: 1fr;
    }

    .arena-footer {
        display: grid;
        text-align: center;
        justify-items: center;
    }

    .vertical-meter {
        left: 10px;
    }

    .profile-media {
        min-height: 420px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}