:root {
    --ink: #050b09;
    --deep: #071612;
    --deep-soft: #0b211b;
    --jade: #123a31;
    --jade-light: #1d5a4b;
    --turquoise: #56d2bd;
    --turquoise-soft: rgba(86, 210, 189, 0.24);
    --gold: #c8a45d;
    --gold-light: #f0d58f;
    --gold-dark: #76592c;
    --parchment: #f2e8c8;
    --muted: #a9b8ad;
    --danger: #e48679;
    --success: #70d8ad;
    --panel: rgba(6, 21, 17, 0.86);
    --panel-light: rgba(14, 47, 39, 0.72);
    --border: rgba(203, 167, 91, 0.45);
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.54);
    --content-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--deep);
    color: var(--parchment);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.55;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

.site-background,
.admin-background {
    position: fixed;
    inset: 0;
    z-index: -8;
    background:
        linear-gradient(90deg, rgba(2, 9, 7, 0.94) 0%, rgba(5, 19, 15, 0.72) 43%, rgba(2, 10, 8, 0.88) 100%),
        linear-gradient(180deg, rgba(3, 12, 9, 0.12), rgba(3, 12, 9, 0.88)),
        url("../img/background/main-background.jpg") center / cover no-repeat;
    transform: scale(1.02);
    animation: background-breathe 24s ease-in-out infinite alternate;
}

.site-background::after,
.admin-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 32%, rgba(69, 197, 171, 0.13), transparent 27%),
        radial-gradient(circle at 25% 55%, rgba(200, 164, 93, 0.09), transparent 24%),
        linear-gradient(180deg, transparent 55%, rgba(2, 8, 6, 0.82));
}

@keyframes background-breathe {
    from { transform: scale(1.02); }
    to { transform: scale(1.09); }
}

.ambient {
    position: fixed;
    z-index: -6;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(110px);
    opacity: 0.2;
}

.ambient-one {
    top: -16rem;
    right: -10rem;
    background: #3bc1a9;
}

.ambient-two {
    bottom: -20rem;
    left: -12rem;
    background: #b78537;
}

.mist-layer {
    position: fixed;
    z-index: -5;
    inset: auto -15% 0;
    height: 42vh;
    pointer-events: none;
    opacity: 0.18;
    filter: blur(32px);
    background:
        radial-gradient(ellipse at 20% 70%, rgba(218, 240, 228, 0.45), transparent 42%),
        radial-gradient(ellipse at 70% 80%, rgba(190, 224, 211, 0.34), transparent 38%);
}

.mist-layer-one {
    animation: mist-move 30s linear infinite alternate;
}

.mist-layer-two {
    opacity: 0.1;
    transform: scaleX(-1);
    animation: mist-move 38s linear infinite alternate-reverse;
}

@keyframes mist-move {
    from { translate: -5% 0; }
    to { translate: 7% -2%; }
}

.particle-field {
    position: fixed;
    inset: 0;
    z-index: -4;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 12px var(--gold-light);
    opacity: 0;
    animation: particle-rise var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes particle-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.4);
    }
    18% { opacity: 0.75; }
    80% { opacity: 0.35; }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), -110vh, 0) scale(1.1);
    }
}

.site-header {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    max-width: none;
    min-height: 82px;
    margin: 10px auto 0;
    padding: 0 20px;
    border: 1px solid rgba(206, 169, 91, 0.26);
    border-radius: 28px;
    background: rgba(4, 16, 13, 0.78);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    transition: background 0.25s ease, margin 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.site-header.is-scrolled {
    width: 100%;
    margin-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: rgba(4, 16, 13, 0.94);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.brand-mark-centered {
    justify-content: center;
}

.brand-rune {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--border);
    transform: rotate(45deg);
    color: var(--gold-light);
    background: linear-gradient(135deg, rgba(200, 164, 93, 0.16), rgba(22, 76, 61, 0.48));
    box-shadow: inset 0 0 24px rgba(86, 210, 189, 0.09), 0 0 22px rgba(200, 164, 93, 0.12);
}

.brand-rune::first-letter {
    transform: rotate(-45deg);
}

.brand-mark strong,
.brand-mark small {
    display: block;
}

.brand-mark strong {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.brand-mark small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.67rem;
    letter-spacing: 0.27em;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 9px;
}

.main-navigation a {
    position: relative;
    padding: 12px 15px;
    color: #d7ddcf;
    font-size: 0.87rem;
    letter-spacing: 0.04em;
    transition: color 0.2s ease, background 0.2s ease;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 5px;
    left: 15px;
    height: 1px;
    transform: scaleX(0);
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    transition: transform 0.25s ease;
}

.main-navigation a:hover,
.main-navigation a.is-active {
    color: var(--gold-light);
}

.main-navigation a:hover::after,
.main-navigation a.is-active::after {
    transform: scaleX(1);
}

.main-navigation .navigation-admin {
    border: 1px solid rgba(200, 164, 93, 0.42);
    background: rgba(200, 164, 93, 0.08);
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid var(--border);
    background: rgba(7, 28, 23, 0.88);
}

.mobile-menu-button span {
    display: block;
    height: 1px;
    margin: 5px 0;
    background: var(--gold-light);
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.74fr);
    gap: 70px;
    align-items: center;
    width: min(calc(100% - 48px), var(--content-width));
    min-height: 100vh;
    margin: 0 auto;
    padding: 145px 0 70px;
}

.section-kicker {
    display: inline-block;
    color: var(--turquoise);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 760px;
    margin: 18px 0 22px;
    color: #f1ead1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.2rem, 6.8vw, 6.4rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.045em;
    text-shadow: 0 12px 45px rgba(0, 0, 0, 0.56);
}

.hero-copy h1 span {
    color: var(--gold-light);
    text-shadow:
        0 0 38px rgba(200, 164, 93, 0.19),
        0 12px 45px rgba(0, 0, 0, 0.56);
}

.hero-copy > p {
    max-width: 690px;
    color: #c5d0c6;
    font-size: 1.08rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin-top: 36px;
}

.fantasy-button {
    position: relative;
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 25px;
    border: 1px solid var(--gold);
    color: #fff6d6;
    background:
        linear-gradient(180deg, rgba(173, 133, 60, 0.36), rgba(50, 35, 16, 0.9)),
        #75572a;
    box-shadow:
        inset 0 0 0 1px rgba(255, 239, 187, 0.12),
        inset 0 -14px 30px rgba(24, 15, 5, 0.27),
        0 9px 26px rgba(0, 0, 0, 0.3),
        0 0 0 rgba(200, 164, 93, 0);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.fantasy-button::before {
    content: "";
    position: absolute;
    top: -140%;
    left: -28%;
    width: 34%;
    height: 380%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(255, 244, 194, 0.48), transparent);
    transition: left 0.55s ease;
}

.fantasy-button::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(249, 221, 145, 0.22);
    pointer-events: none;
}

.fantasy-button span {
    position: relative;
    z-index: 1;
}

.fantasy-button:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.13);
    box-shadow:
        inset 0 0 0 1px rgba(255, 239, 187, 0.16),
        0 12px 30px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(200, 164, 93, 0.22);
}

.fantasy-button:hover::before {
    left: 112%;
}

.fantasy-button:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

.fantasy-button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.62;
}

.fantasy-button-large {
    min-height: 57px;
    padding: 0 34px;
}

.ghost-button {
    padding: 14px 6px;
    border-bottom: 1px solid rgba(240, 213, 143, 0.4);
    color: var(--gold-light);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ghost-button:hover {
    border-color: var(--turquoise);
    color: var(--turquoise);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 28px;
    color: #91a096;
    font-size: 0.78rem;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #627169;
    box-shadow: 0 0 0 4px rgba(98, 113, 105, 0.12);
}

.status-dot.is-live {
    background: #63dfaf;
    box-shadow: 0 0 0 4px rgba(99, 223, 175, 0.12), 0 0 14px rgba(99, 223, 175, 0.7);
    animation: status-pulse 1.8s ease-in-out infinite;
}

@keyframes status-pulse {
    50% { box-shadow: 0 0 0 8px rgba(99, 223, 175, 0), 0 0 18px rgba(99, 223, 175, 0.78); }
}

.fantasy-panel {
    position: relative;
    border: 1px solid var(--border);
    background:
        linear-gradient(145deg, rgba(22, 66, 54, 0.3), rgba(4, 17, 14, 0.94)),
        var(--panel);
    box-shadow: var(--shadow), inset 0 0 70px rgba(70, 201, 173, 0.025);
    backdrop-filter: blur(12px);
}

.fantasy-panel::before,
.fantasy-panel::after {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
}

.fantasy-panel::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--gold-light);
    border-left: 2px solid var(--gold-light);
}

.fantasy-panel::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
}

.arena-card {
    min-height: 470px;
    padding: 34px;
}

.panel-ornament {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 110px;
    height: 22px;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    background: var(--deep);
}

.panel-ornament::before,
.panel-ornament::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.panel-ornament::before {
    left: 8px;
}

.panel-ornament::after {
    right: 8px;
    transform: scaleX(-1);
}

.arena-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-badge {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid rgba(150, 164, 155, 0.26);
    color: #8e9b93;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #66766d;
}

.live-badge.is-live {
    border-color: rgba(102, 224, 176, 0.35);
    color: #91f1ca;
}

.live-badge.is-live i {
    background: #64dfaf;
    box-shadow: 0 0 12px #64dfaf;
}

.arena-card h2 {
    margin: 37px 0 5px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}

.arena-mode {
    margin-top: 0;
    color: var(--muted);
}

.arena-status-line {
    display: flex;
    justify-content: space-between;
    margin: 24px 0;
    padding: 13px 0;
    border-top: 1px solid rgba(200, 164, 93, 0.16);
    border-bottom: 1px solid rgba(200, 164, 93, 0.16);
}

.arena-status-line span {
    color: var(--muted);
}

.arena-status-line strong {
    color: var(--turquoise);
}

.versus-placeholder {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin: 28px 0;
    text-align: center;
}

.versus-placeholder > div {
    display: grid;
    gap: 8px;
}

.fighter-sigil {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
}

.versus-placeholder b {
    color: var(--turquoise);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-style: italic;
}

.empty-arena {
    display: grid;
    min-height: 340px;
    place-items: center;
    align-content: center;
    text-align: center;
}

.empty-arena-icon {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gold-light);
    background: radial-gradient(circle, rgba(200, 164, 93, 0.14), transparent 67%);
    box-shadow: 0 0 40px rgba(200, 164, 93, 0.08);
    font-size: 1.8rem;
}

.empty-arena h2 {
    margin-top: 20px;
}

.empty-arena p {
    max-width: 360px;
    color: var(--muted);
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(calc(100% - 48px), var(--content-width));
    margin: -18px auto 0;
    border-top: 1px solid rgba(200, 164, 93, 0.28);
    border-bottom: 1px solid rgba(200, 164, 93, 0.28);
    background: rgba(3, 13, 10, 0.68);
    backdrop-filter: blur(12px);
}

.stat-strip article {
    position: relative;
    padding: 28px 24px;
    text-align: center;
}

.stat-strip article + article::before {
    content: "";
    position: absolute;
    top: 24%;
    bottom: 24%;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, rgba(200, 164, 93, 0.36), transparent);
}

.stat-strip strong {
    display: block;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    font-weight: 500;
}

.stat-strip span {
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.content-section {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 115px 0 10px;
}

.section-heading {
    max-width: 710px;
    margin-bottom: 42px;
}

.section-heading h2 {
    margin: 10px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5vw, 4.1rem);
    font-weight: 500;
}

.section-heading p {
    color: var(--muted);
    font-size: 1rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    min-height: 265px;
    padding: 30px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(240, 213, 143, 0.72);
    background:
        linear-gradient(145deg, rgba(27, 83, 67, 0.38), rgba(4, 17, 14, 0.94)),
        var(--panel);
}

.feature-icon {
    display: grid;
    width: 57px;
    height: 57px;
    place-items: center;
    border: 1px solid rgba(200, 164, 93, 0.36);
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
    font-size: 1.55rem;
}

.feature-card h3 {
    margin: 27px 0 10px;
    color: #eee3c4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.feature-card p {
    color: var(--muted);
    font-size: 0.92rem;
}

.champions-section {
    padding-bottom: 120px;
}

.champion-list {
    display: grid;
    gap: 12px;
}

.champion-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 24px;
}

.champion-crown {
    color: var(--gold-light);
    font-size: 1.5rem;
}

.champion-row strong,
.champion-row small {
    display: block;
}

.champion-row small {
    color: var(--muted);
}

.champion-row > span:last-child {
    color: var(--turquoise);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.empty-history {
    padding: 36px;
    color: var(--muted);
    text-align: center;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 28px 0 36px;
    border-top: 1px solid rgba(200, 164, 93, 0.18);
    color: #75847a;
    font-size: 0.75rem;
}

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-small {
    transition-delay: 0.08s;
}

.reveal-delay {
    transition-delay: 0.16s;
}

.toast {
    position: fixed;
    z-index: 80;
    top: 115px;
    right: 24px;
    display: grid;
    min-width: 300px;
    max-width: 430px;
    gap: 2px;
    padding: 15px 18px;
    border: 1px solid;
    background: rgba(5, 18, 14, 0.95);
    box-shadow: var(--shadow);
    animation: toast-in 0.45s ease both;
}

.toast-success {
    border-color: rgba(112, 216, 173, 0.55);
}

.toast-error {
    border-color: rgba(228, 134, 121, 0.55);
}

.toast strong {
    color: var(--gold-light);
}

.toast span {
    color: #d4ddd4;
    font-size: 0.88rem;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(25px);
    }
}

.alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid;
    background: rgba(3, 14, 11, 0.68);
    font-size: 0.9rem;
}

.alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.alert-success {
    border-color: rgba(112, 216, 173, 0.45);
    color: #aaf0cf;
}

.alert-error {
    border-color: rgba(228, 134, 121, 0.45);
    color: #f0b7ae;
}

.auth-shell,
.installer-shell,
.error-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 130px 24px 55px;
}

.auth-card,
.installer-card,
.error-card {
    width: min(100%, 520px);
    padding: 38px;
}

.auth-header,
.installer-header {
    margin: 40px 0 26px;
    text-align: center;
}

.auth-header h1,
.installer-header h1,
.error-card h1 {
    margin: 8px 0 10px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    font-weight: 500;
}

.auth-header p,
.installer-header p,
.error-card p {
    color: var(--muted);
}

.auth-form,
.installer-form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 7px;
}

.field span {
    color: #d7decf;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 49px;
    padding: 0 14px;
    border: 1px solid rgba(200, 164, 93, 0.3);
    outline: none;
    color: #f4edd5;
    background: rgba(2, 12, 9, 0.7);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--turquoise);
    box-shadow: 0 0 0 3px rgba(86, 210, 189, 0.08);
}

.field small {
    color: #798a7f;
    font-size: 0.75rem;
}

.auth-back {
    display: block;
    margin-top: 25px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

.auth-back:hover {
    color: var(--gold-light);
}

.installer-shell {
    padding-top: 55px;
}

.installer-card {
    width: min(100%, 760px);
}

.installer-form fieldset {
    margin: 0;
    padding: 24px;
    border: 1px solid rgba(200, 164, 93, 0.22);
}

.installer-form legend {
    padding: 0 10px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.field-wide {
    grid-column: 1 / -1;
}

.install-success {
    display: grid;
    justify-items: center;
    gap: 15px;
    padding-top: 35px;
    text-align: center;
}

.install-success h1 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
}

.install-success p {
    color: var(--muted);
}

.status-orb {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6a766f;
}

.status-orb-live {
    background: var(--success);
    box-shadow: 0 0 18px rgba(112, 216, 173, 0.78);
}

.error-card {
    text-align: center;
}

.error-code {
    display: block;
    color: var(--turquoise);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5rem;
    line-height: 1;
}

.error-card .fantasy-button {
    margin-top: 18px;
}

code {
    padding: 2px 5px;
    border: 1px solid rgba(200, 164, 93, 0.18);
    color: var(--gold-light);
    background: rgba(0, 0, 0, 0.24);
}

@media (max-width: 980px) {
    .main-navigation {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        display: none;
        width: min(320px, calc(100vw - 48px));
        padding: 12px;
        border: 1px solid var(--border);
        background: rgba(4, 16, 13, 0.97);
        box-shadow: var(--shadow);
    }

    .main-navigation.is-open {
        display: grid;
    }

    .mobile-menu-button {
        display: block;
    }

    .hero-section {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 150px;
    }

    .arena-card {
        width: min(100%, 620px);
    }

    .stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-strip article:nth-child(3)::before {
        display: none;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .site-header {
        width: calc(100% - 24px);
        min-height: 68px;
        margin-top: 10px;
        padding: 0 14px;
    }

    .site-header.is-scrolled {
        width: 100%;
    }

    .brand-rune {
        width: 38px;
        height: 38px;
    }

    .brand-mark strong {
        font-size: 0.84rem;
    }

    .brand-mark small {
        font-size: 0.57rem;
    }

    .hero-section,
    .content-section,
    .stat-strip,
    .site-footer {
        width: calc(100% - 24px);
    }

    .hero-section {
        padding-top: 120px;
    }

    .hero-copy h1 {
        font-size: clamp(2.8rem, 15vw, 4.8rem);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .fantasy-button,
    .hero-actions .ghost-button {
        width: 100%;
        text-align: center;
    }

    .arena-card,
    .auth-card,
    .installer-card,
    .error-card {
        padding: 26px 20px;
    }

    .stat-strip {
        grid-template-columns: 1fr;
    }

    .stat-strip article + article::before {
        top: 0;
        right: 20%;
        bottom: auto;
        left: 20%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(200, 164, 93, 0.36), transparent);
    }

    .champion-row {
        grid-template-columns: auto 1fr;
    }

    .champion-row > span:last-child {
        grid-column: 2;
    }

    .site-footer {
        align-items: center;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-wide {
        grid-column: auto;
    }

    .installer-form fieldset {
        padding: 18px;
    }

    .toast {
        top: 90px;
        right: 12px;
        left: 12px;
        min-width: 0;
    }
}

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

/* Paczka #2: publiczne karty graczy */
.players-shell,
.player-profile-shell {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 155px 0 110px;
}

.players-hero {
    max-width: 760px;
    margin-bottom: 36px;
}

.players-hero h1,
.player-profile-hero h1 {
    margin: 10px 0 15px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 500;
    line-height: 1;
}

.players-hero p {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.02rem;
}

.public-player-filter {
    margin-bottom: 28px;
    padding: 22px;
}

.public-player-filter form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr) auto auto;
    gap: 14px;
    align-items: end;
}

.public-player-filter .ghost-button {
    min-height: 49px;
    align-content: center;
    padding: 0 8px;
}

.public-player-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.public-player-card {
    display: grid;
    grid-template-rows: 260px 1fr;
    min-height: 560px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.public-player-card:hover {
    transform: translateY(-7px);
    border-color: rgba(240, 213, 143, 0.7);
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.45), 0 0 28px rgba(200, 164, 93, 0.1);
}

.public-player-avatar-wrap {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(200, 164, 93, 0.22);
    background:
        radial-gradient(circle at 50% 35%, rgba(86, 210, 189, 0.15), transparent 45%),
        rgba(2, 13, 10, 0.8);
}

.public-player-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.public-player-card:hover .public-player-avatar {
    transform: scale(1.04);
    filter: brightness(1.08);
}

.public-player-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5.5rem;
    background:
        radial-gradient(circle at 50% 40%, rgba(200, 164, 93, 0.17), transparent 45%),
        linear-gradient(145deg, rgba(19, 66, 53, 0.65), rgba(3, 15, 12, 0.95));
}

.public-legend-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 7px 10px;
    border: 1px solid var(--gold-light);
    color: #fff1b8;
    background: rgba(65, 43, 13, 0.86);
    box-shadow: 0 0 20px rgba(240, 213, 143, 0.22);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.public-player-card-body {
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.public-player-card-body h2 {
    margin: 6px 0 10px;
    color: #efe6ca;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    font-weight: 500;
}

.public-player-card-body p {
    display: -webkit-box;
    min-height: 69px;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.88rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.player-trophy-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 23px;
}

.player-trophy-track span {
    display: grid;
    height: 39px;
    place-items: center;
    border: 1px solid rgba(143, 153, 146, 0.18);
    color: #53635a;
    background: rgba(0, 0, 0, 0.15);
}

.player-trophy-track span.is-earned {
    border-color: rgba(200, 164, 93, 0.45);
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.09);
    box-shadow: inset 0 0 18px rgba(200, 164, 93, 0.06);
}

.public-player-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}

.public-player-stats span {
    padding-top: 12px;
    border-top: 1px solid rgba(200, 164, 93, 0.15);
    color: #7f9086;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.public-player-stats b {
    display: block;
    color: var(--turquoise);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-weight: 500;
}

.profile-back {
    display: inline-flex;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 0.82rem;
}

.profile-back:hover {
    color: var(--gold-light);
}

.player-profile-hero {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) minmax(180px, 0.42fr);
    gap: 34px;
    align-items: center;
    padding: 34px;
}

.profile-avatar-frame {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(200, 164, 93, 0.48);
    color: var(--gold-light);
    background: rgba(2, 12, 9, 0.68);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    box-shadow: inset 0 0 45px rgba(86, 210, 189, 0.08);
}

.profile-avatar-frame.is-legend {
    border-color: var(--gold-light);
    box-shadow:
        inset 0 0 45px rgba(240, 213, 143, 0.12),
        0 0 35px rgba(240, 213, 143, 0.17);
}

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

.profile-copy p {
    max-width: 660px;
    color: var(--muted);
}

.legend-title {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(240, 213, 143, 0.45);
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.07);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.profile-stat-stack {
    display: grid;
    gap: 10px;
}

.profile-stat-stack article {
    padding: 17px;
    border: 1px solid rgba(200, 164, 93, 0.18);
    background: rgba(0, 0, 0, 0.16);
}

.profile-stat-stack strong,
.profile-stat-stack span {
    display: block;
}

.profile-stat-stack strong {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 500;
}

.profile-stat-stack span {
    color: #7f9086;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.profile-section {
    padding-top: 95px;
}

.class-trophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.class-trophy-card {
    min-height: 230px;
    padding: 25px;
    opacity: 0.6;
    text-align: center;
}

.class-trophy-card.is-earned {
    opacity: 1;
    border-color: rgba(240, 213, 143, 0.66);
    background:
        radial-gradient(circle at 50% 24%, rgba(200, 164, 93, 0.17), transparent 36%),
        linear-gradient(145deg, rgba(42, 65, 36, 0.3), rgba(4, 17, 14, 0.94));
}

.class-trophy-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid rgba(200, 164, 93, 0.28);
    color: #647168;
    background: rgba(0, 0, 0, 0.15);
    font-size: 1.5rem;
}

.class-trophy-card.is-earned .class-trophy-icon {
    color: var(--gold-light);
    box-shadow: 0 0 28px rgba(200, 164, 93, 0.12);
}

.class-trophy-card h3 {
    margin: 0 0 12px;
    color: #e6ddc0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.class-trophy-card strong,
.class-trophy-card small {
    display: block;
}

.class-trophy-card strong {
    color: var(--turquoise);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.class-trophy-card small {
    margin-top: 5px;
    color: #73847a;
}

.profile-history-list {
    display: grid;
    gap: 12px;
}

.profile-history-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
}

.history-result {
    color: #8d9b92;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.history-result.is-win {
    color: var(--gold-light);
}

.profile-history-row strong,
.profile-history-row small {
    display: block;
}

.profile-history-row strong {
    color: #e5ddc2;
}

.profile-history-row small,
.profile-history-row time {
    color: #77887e;
    font-size: 0.75rem;
}

@media (max-width: 980px) {
    .public-player-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .player-profile-hero {
        grid-template-columns: 200px 1fr;
    }

    .profile-stat-stack {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 1fr);
    }

    .class-trophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .players-shell,
    .player-profile-shell {
        width: calc(100% - 24px);
        padding-top: 120px;
    }

    .public-player-filter form,
    .public-player-grid,
    .player-profile-hero,
    .class-trophy-grid {
        grid-template-columns: 1fr;
    }

    .public-player-card {
        min-height: 0;
    }

    .player-profile-hero {
        padding: 22px;
    }

    .profile-avatar-frame {
        width: min(100%, 280px);
        margin: 0 auto;
    }

    .profile-stat-stack {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .profile-history-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Paczka #3 — publiczne turnieje */
.public-page-shell {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 145px 0 120px;
}

.public-page-hero {
    max-width: 760px;
    margin-bottom: 46px;
}

.public-page-hero h1,
.tournament-public-heading h1 {
    margin: 8px 0 13px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 5.8rem);
    font-weight: 500;
    line-height: 0.98;
}

.public-page-hero p,
.tournament-public-heading p {
    color: var(--muted);
    font-size: 1rem;
}

.public-tournament-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.public-tournament-card {
    display: grid;
    min-height: 340px;
    padding: 27px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.public-tournament-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240, 213, 143, 0.65);
    background:
        linear-gradient(145deg, rgba(27, 83, 67, 0.38), rgba(4, 17, 14, 0.95)),
        var(--panel);
}

.public-tournament-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-tournament-emblem {
    display: grid;
    width: 49px;
    height: 49px;
    place-items: center;
    border: 1px solid rgba(200, 164, 93, 0.35);
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
    font-size: 1.2rem;
}

.public-tournament-card h2 {
    margin: 33px 0 6px;
    color: #eee4c9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}

.public-tournament-card > p {
    margin: 0;
    color: #829188;
    font-size: 0.8rem;
}

.public-tournament-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-self: end;
    margin-top: 28px;
}

.public-tournament-card-stats > span {
    display: grid;
    min-height: 72px;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(200, 164, 93, 0.14);
    color: #6f8076;
    font-size: 0.64rem;
    text-align: center;
    text-transform: uppercase;
}

.public-tournament-card-stats b {
    display: block;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
}

.public-tournament-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(200, 164, 93, 0.14);
    color: #6e7e75;
    font-size: 0.67rem;
}

.public-tournament-card > footer b {
    color: var(--turquoise);
    font-size: 0.75rem;
}

.empty-public-state {
    display: grid;
    min-height: 310px;
    place-items: center;
    align-content: center;
    padding: 35px;
    text-align: center;
}

.empty-public-state > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid rgba(200, 164, 93, 0.32);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.07);
    font-size: 1.45rem;
}

.empty-public-state h2,
.empty-public-state h3 {
    margin: 19px 0 7px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.empty-public-state p {
    max-width: 500px;
    color: var(--muted);
}

.tournament-public-detail {
    padding-top: 132px;
}

.public-back-link {
    display: inline-block;
    margin-bottom: 27px;
    color: #83948a;
    font-size: 0.78rem;
}

.public-back-link:hover {
    color: var(--gold-light);
}

.tournament-public-hero {
    margin-bottom: 42px;
}

.tournament-public-heading {
    display: flex;
    gap: 28px;
    align-items: flex-end;
    justify-content: space-between;
}

.tournament-public-heading h1 {
    max-width: 850px;
    font-size: clamp(2.7rem, 6vw, 5rem);
}

.tournament-public-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 35px;
    border-top: 1px solid rgba(200, 164, 93, 0.25);
    border-bottom: 1px solid rgba(200, 164, 93, 0.25);
    background: rgba(3, 14, 11, 0.48);
}

.tournament-public-stats article {
    position: relative;
    display: grid;
    min-height: 100px;
    place-items: center;
    align-content: center;
}

.tournament-public-stats article + article::before {
    content: "";
    position: absolute;
    top: 24%;
    bottom: 24%;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, rgba(200, 164, 93, 0.34), transparent);
}

.tournament-public-stats strong {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.9rem;
    font-weight: 500;
}

.tournament-public-stats span {
    color: #7c8d82;
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.public-tournament-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 25px;
    align-items: start;
}

.compact-section-heading {
    margin-bottom: 25px;
}

.compact-section-heading h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.public-participant-sidebar {
    position: sticky;
    top: 110px;
    padding: 24px;
}

.public-participant-sidebar > header h2 {
    margin: 6px 0 20px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.public-participant-list {
    display: grid;
    gap: 7px;
    max-height: 700px;
    overflow: auto;
    padding-right: 4px;
}

.public-participant-list > a {
    display: grid;
    grid-template-columns: 24px auto 1fr auto;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(200, 164, 93, 0.11);
    background: rgba(2, 13, 10, 0.42);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.public-participant-list > a:hover {
    border-color: rgba(86, 210, 189, 0.35);
    background: rgba(30, 88, 71, 0.18);
}

.public-participant-position {
    color: #62736a;
    font-size: 0.68rem;
    text-align: center;
}

.public-participant-list img,
.public-participant-list .player-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
}

.public-participant-list strong,
.public-participant-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-participant-list strong {
    color: #ddd7c2;
    font-size: 0.75rem;
}

.public-participant-list small {
    color: #708177;
    font-size: 0.62rem;
}

.public-participant-list em {
    color: var(--gold-light);
    font-size: 0.66rem;
    font-style: normal;
}

.public-empty-copy {
    color: var(--muted);
}

.public-bracket-scroll {
    overflow-x: auto;
    padding: 4px 3px 20px;
}

.public-bracket-board {
    display: flex;
    gap: 18px;
    min-width: max-content;
}

.public-bracket-round {
    display: flex;
    width: 245px;
    flex-direction: column;
}

.public-bracket-round > header {
    display: grid;
    min-height: 57px;
    place-items: center;
    align-content: center;
    border-bottom: 1px solid rgba(200, 164, 93, 0.25);
    text-align: center;
}

.public-bracket-round > header strong {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    font-weight: 500;
}

.public-bracket-round > header small {
    color: #718278;
    font-size: 0.62rem;
}

.public-bracket-round > div {
    display: flex;
    min-height: 430px;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    gap: 18px;
    padding: 15px 0;
}

.public-match-card {
    position: relative;
    border: 1px solid rgba(200, 164, 93, 0.2);
    background: rgba(2, 13, 10, 0.72);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.public-match-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -19px;
    width: 18px;
    height: 1px;
    background: rgba(200, 164, 93, 0.28);
}

.public-bracket-round:last-child .public-match-card::after,
.public-bracket-round.phase-third_place .public-match-card::after {
    display: none;
}

.public-match-number {
    display: block;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(200, 164, 93, 0.11);
    color: #607168;
    font-size: 0.58rem;
    letter-spacing: 0.07em;
}

.public-match-card > div {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: #acb9b0;
    font-size: 0.72rem;
}

.public-match-card > div + div {
    border-top: 1px solid rgba(200, 164, 93, 0.1);
}

.public-match-card > div b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
}

.public-match-card > div.is-winner {
    color: var(--success);
    background: rgba(112, 216, 173, 0.06);
}

.public-league-rounds {
    display: grid;
    gap: 12px;
}

.public-league-round {
    padding: 0;
}

.public-league-round summary {
    display: flex;
    min-height: 55px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: var(--gold-light);
    cursor: pointer;
}

.public-league-round summary span {
    color: #718278;
    font-size: 0.67rem;
}

.public-league-round > div {
    display: grid;
    gap: 1px;
    padding: 0 12px 12px;
}

.public-league-round article {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    min-height: 45px;
    padding: 0 11px;
    background: rgba(10, 35, 28, 0.4);
    color: #a9b5ad;
    font-size: 0.75rem;
}

.public-league-round article span:last-child {
    text-align: right;
}

.public-league-round article b {
    color: var(--gold-light);
}

@media (max-width: 1050px) {
    .public-tournament-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .public-tournament-layout {
        grid-template-columns: 1fr;
    }

    .public-participant-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .public-page-shell {
        width: calc(100% - 24px);
        padding-top: 115px;
    }

    .public-tournament-grid {
        grid-template-columns: 1fr;
    }

    .tournament-public-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tournament-public-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .tournament-public-stats article:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 440px) {
    .public-tournament-stats,
    .tournament-public-stats {
        grid-template-columns: 1fr;
    }

    .tournament-public-stats article + article::before {
        top: 0;
        right: 20%;
        bottom: auto;
        left: 20%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(200, 164, 93, 0.34), transparent);
    }
}

.public-live-arena {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 34px auto 0;
    padding: 30px;
}

.public-live-header,
.public-live-state,
.public-live-bottom,
.public-next-match > div,
.public-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.public-live-header h2 {
    margin: 4px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
}

.public-live-state a {
    color: var(--turquoise);
    font-size: .75rem;
}

.public-live-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    min-height: 250px;
    margin-top: 24px;
    padding: 25px;
    border-top: 1px solid rgba(200, 164, 93, .15);
    border-bottom: 1px solid rgba(200, 164, 93, .15);
    background: radial-gradient(circle at center, rgba(86, 210, 189, .07), transparent 58%);
}

.public-live-fighter {
    display: grid;
    justify-items: center;
    gap: 9px;
    text-align: center;
}

.public-live-avatar {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(200, 164, 93, .08);
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.public-live-fighter strong {
    color: #eee5ca;
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.public-live-fighter > b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 4.3rem;
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 0 25px rgba(200, 164, 93, .22);
}

.public-live-versus {
    text-align: center;
}

.public-live-versus small,
.public-live-versus span {
    display: block;
    color: #788b80;
    font-size: .7rem;
}

.public-live-versus strong {
    display: block;
    margin: 4px 0;
    color: var(--turquoise);
    font-family: Georgia, serif;
    font-size: 2.4rem;
    font-style: italic;
}

.public-live-bottom {
    margin-top: 20px;
}

.public-next-match,
.public-progress {
    flex: 1;
}

.public-next-match span,
.public-progress span {
    color: #77897f;
    font-size: .7rem;
    text-transform: uppercase;
}

.public-next-match strong,
.public-progress b {
    display: block;
    margin-top: 3px;
    color: #d7d2bf;
    font-size: .82rem;
}

.public-live-recent {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.public-live-recent article {
    padding: 10px;
    border: 1px solid rgba(200, 164, 93, .12);
    background: rgba(0, 0, 0, .15);
}

.public-live-recent small,
.public-live-recent strong {
    display: block;
}

.public-live-recent small {
    color: #6e8176;
    font-size: .62rem;
}

.public-live-recent strong {
    margin-top: 2px;
    color: #cfcbb9;
    font-size: .7rem;
}

.public-standings-section {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 70px auto 100px;
}

.public-standings-table {
    padding: 14px 22px;
}

.public-standings-table article {
    display: grid;
    grid-template-columns: 45px 1fr 130px 90px;
    gap: 12px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(200, 164, 93, .1);
}

.public-standings-table article:last-child {
    border-bottom: 0;
}

.public-standings-table article > span {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.public-standings-table strong {
    color: #e2ddc9;
}

.public-standings-table small {
    color: #77897f;
}

.public-standings-table b {
    color: var(--turquoise);
    text-align: right;
}

.public-match-card.status-live,
.bracket-match-card.status-live {
    border-color: rgba(86, 210, 189, .75) !important;
    box-shadow: 0 0 20px rgba(86, 210, 189, .2);
}

.public-match-card.status-finished,
.public-match-card.status-walkover {
    opacity: .82;
}

[data-live-feed].has-live-error::after {
    content: "Próba ponownego połączenia z LIVE…";
    display: block;
    margin-top: 10px;
    color: #d3a096;
    font-size: .7rem;
    text-align: center;
}

@media (max-width: 900px) {
    .public-live-recent {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .public-live-arena,
    .public-standings-section {
        width: calc(100% - 24px);
    }

    .public-live-arena {
        padding: 22px 16px;
    }

    .public-live-header,
    .public-live-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-live-scoreboard {
        grid-template-columns: 1fr;
    }

    .public-live-versus {
        order: 2;
    }

    .public-live-fighter:last-child {
        order: 3;
    }

    .public-live-recent {
        grid-template-columns: 1fr;
    }

    .public-standings-table article {
        grid-template-columns: 32px 1fr auto;
    }

    .public-standings-table small {
        grid-column: 2;
    }

    .public-standings-table b {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

.versus-placeholder > div > b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.8rem;
}

.home-versus-center small,
.home-versus-center span {
    display: block;
    color: #75877d;
    font-size: .64rem;
}

.home-versus-center > b {
    display: block;
    color: var(--turquoise);
    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-style: italic;
}

/* =========================================================
   v0.5.0 — Glass Fantasy UI + cinematic bracket animations
   ========================================================= */
:root {
    --radius-xs: 9px;
    --radius-sm: 13px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --glass-bg: rgba(8, 30, 24, 0.58);
    --glass-bg-strong: rgba(5, 22, 17, 0.78);
    --glass-border: rgba(225, 196, 126, 0.24);
    --glass-highlight: rgba(255, 255, 255, 0.075);
}

.site-header,
.fantasy-panel,
.arena-card,
.feature-card,
.public-live-arena,
.public-standings-table,
.empty-public-state,
.public-league-round,
.auth-card,
.installer-card,
.error-card,
.toast,
.alert {
    border-radius: var(--radius-lg);
}

.site-header,
.fantasy-panel,
.public-live-arena,
.public-standings-table,
.public-league-round,
.auth-card,
.installer-card,
.error-card {
    border-color: var(--glass-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 34%),
        linear-gradient(155deg, rgba(31, 89, 72, 0.36), rgba(3, 15, 12, 0.78)),
        var(--glass-bg);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 0 rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.fantasy-panel::before {
    inset: 1px;
    width: auto;
    height: auto;
    border: 1px solid rgba(240, 213, 143, 0.08);
    border-radius: calc(var(--radius-lg) - 2px);
}

.fantasy-panel::after {
    right: 16%;
    bottom: -1px;
    left: 16%;
    width: auto;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(86, 210, 189, 0.68), rgba(240, 213, 143, 0.8), transparent);
    filter: blur(0.3px);
}

.site-header {
    border-radius: 22px;
}

.site-header.is-scrolled {
    border-radius: 0 0 22px 22px;
}

.main-navigation .navigation-admin,
.mobile-menu-button,
.fantasy-button,
.ghost-button,
.field input,
.field select,
.field textarea,
.live-badge,
.feature-icon,
.fighter-sigil,
.public-live-avatar,
.player-avatar,
.player-avatar-fallback {
    border-radius: var(--radius-sm);
}

.fantasy-button {
    border-radius: 14px;
}

.fantasy-button::after {
    border-radius: 10px;
}

.brand-rune {
    border-radius: 12px;
}

.tournament-public-stats,
.stat-strip,
.glass-strip {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.045), transparent 42%),
        rgba(3, 18, 14, 0.53);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 15px 45px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.public-tournament-layout-full {
    display: block;
}

.public-participant-drawer {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 26px auto 34px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.public-participant-drawer[open] {
    border-color: rgba(86, 210, 189, 0.38);
    box-shadow:
        0 26px 80px rgba(0, 0, 0, 0.35),
        0 0 34px rgba(86, 210, 189, 0.08),
        inset 0 1px 0 var(--glass-highlight);
}

.public-participant-drawer > summary {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 16px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.public-participant-drawer > summary::-webkit-details-marker {
    display: none;
}

.participant-drawer-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(200, 164, 93, 0.3);
    border-radius: 14px;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.participant-drawer-title small,
.participant-drawer-title strong {
    display: block;
}

.participant-drawer-title small {
    color: var(--turquoise);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.participant-drawer-title strong {
    margin-top: 2px;
    color: #e8e1c9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    font-weight: 500;
}

.participant-drawer-count {
    padding: 7px 11px;
    border: 1px solid rgba(86, 210, 189, 0.22);
    border-radius: 999px;
    color: #9edbc9;
    background: rgba(86, 210, 189, 0.06);
    font-size: 0.7rem;
}

.participant-drawer-chevron {
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    border-right: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
    transition: transform 0.3s ease;
}

.public-participant-drawer[open] .participant-drawer-chevron {
    transform: rotate(225deg) translate(-3px, -3px);
}

.participant-drawer-content {
    padding: 0 22px 22px;
    border-top: 1px solid rgba(200, 164, 93, 0.12);
}

.public-participant-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 430px;
    padding: 18px 4px 2px 0;
}

.public-participant-list > a {
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent),
        rgba(2, 13, 10, 0.39);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.public-participant-list > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 18px rgba(86, 210, 189, 0.07);
}

.bracket-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
}

.bracket-visual-hint {
    margin-bottom: 9px;
    color: #72877b;
    font-size: 0.7rem;
}

.public-bracket-scroll {
    position: relative;
    overflow-x: auto;
    padding: 22px 18px 27px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 26%),
        radial-gradient(circle at 50% 40%, rgba(86, 210, 189, 0.055), transparent 45%),
        rgba(2, 13, 10, 0.54);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        0 24px 70px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    scrollbar-color: rgba(200, 164, 93, 0.5) rgba(0, 0, 0, 0.18);
}

.public-bracket-scroll::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(86, 210, 189, 0.025) 1px, transparent 1px),
        linear-gradient(rgba(86, 210, 189, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle, #000 0, transparent 78%);
}

.public-bracket-board {
    position: relative;
    z-index: 1;
    gap: 28px;
}

.public-bracket-round {
    width: 258px;
}

.public-bracket-round > header {
    min-height: 67px;
    margin-bottom: 10px;
    border: 1px solid rgba(200, 164, 93, 0.16);
    border-radius: 16px;
    background: rgba(7, 29, 23, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
}

.public-match-card {
    overflow: visible;
    border-color: rgba(200, 164, 93, 0.18);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 38%),
        rgba(2, 14, 11, 0.68);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(13px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.public-match-card:hover {
    z-index: 3;
    transform: translateY(-3px) scale(1.012);
    border-color: rgba(240, 213, 143, 0.42);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), 0 0 22px rgba(200, 164, 93, 0.07);
}

.public-match-card::after {
    right: -29px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, rgba(200, 164, 93, 0.2), rgba(86, 210, 189, 0.34));
    box-shadow: 0 0 8px rgba(86, 210, 189, 0.12);
}

.public-match-number {
    border-radius: 17px 17px 0 0;
}

.public-match-card > div:last-child {
    border-radius: 0 0 16px 16px;
}

.public-match-card > div b {
    border-radius: 8px;
}

.public-match-card > div.is-winner {
    color: #aef2cd;
    background: linear-gradient(90deg, rgba(112, 216, 173, 0.12), rgba(200, 164, 93, 0.06));
    text-shadow: 0 0 15px rgba(112, 216, 173, 0.16);
}

.public-match-card.status-live {
    animation: live-card-breathe 2.3s ease-in-out infinite;
}

@keyframes live-card-breathe {
    50% {
        border-color: rgba(86, 210, 189, 0.85);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 32px rgba(86, 210, 189, 0.22);
    }
}

.public-match-card.is-advance-origin {
    z-index: 4;
    border-color: rgba(240, 213, 143, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(240, 213, 143, 0.18), 0 0 38px rgba(200, 164, 93, 0.34) !important;
    animation: advance-origin-pulse 1.1s ease-in-out 4;
}

.public-match-card.is-advance-origin::after {
    background: linear-gradient(90deg, #e9bd62, #65e3b5, #e9bd62);
    background-size: 220% 100%;
    box-shadow: 0 0 14px rgba(112, 216, 173, 0.68), 0 0 22px rgba(200, 164, 93, 0.44);
    animation: bracket-trail-shimmer 0.8s linear infinite;
}

.public-match-card.is-advance-target {
    z-index: 4;
    border-color: rgba(112, 216, 173, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(112, 216, 173, 0.2), 0 0 42px rgba(112, 216, 173, 0.34) !important;
    animation: advance-target-arrival 1s ease-out 3;
}

@keyframes advance-origin-pulse {
    50% { transform: scale(1.025); filter: brightness(1.18); }
}

@keyframes advance-target-arrival {
    0% { transform: scale(0.96); filter: brightness(1.6); }
    55% { transform: scale(1.045); }
    100% { transform: scale(1); }
}

@keyframes bracket-trail-shimmer {
    to { background-position: -220% 0; }
}

.public-live-arena {
    position: relative;
    overflow: hidden;
}

.public-live-arena::before {
    content: "";
    position: absolute;
    inset: -60% -20%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 43%, rgba(255, 255, 255, 0.055) 49%, transparent 55%);
    transform: translateX(-55%);
    animation: glass-light-sweep 9s ease-in-out infinite;
}

@keyframes glass-light-sweep {
    0%, 58% { transform: translateX(-55%); opacity: 0; }
    68% { opacity: 0.75; }
    86%, 100% { transform: translateX(55%); opacity: 0; }
}

.public-live-scoreboard,
.live-overlay-scoreboard {
    border-radius: var(--radius-lg);
}

.public-live-recent article,
.public-standings-table article,
.champion-row {
    border-radius: 13px;
}

body.victory-cinema-open {
    overflow: hidden !important;
}

.victory-cinema {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: clamp(18px, 3vw, 42px);
    opacity: 0;
    isolation: isolate;
    transform: scale(1.02);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.victory-cinema.is-visible {
    opacity: 1;
    transform: scale(1);
}

.victory-cinema.is-closing {
    opacity: 0;
    transform: scale(1.025);
}

.victory-cinema-veil {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(31, 108, 85, 0.35), transparent 43%),
        radial-gradient(circle at 50% 110%, rgba(200, 164, 93, 0.18), transparent 46%),
        rgba(1, 8, 6, 0.93);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.victory-cinema-veil::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        linear-gradient(90deg, rgba(86, 210, 189, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(86, 210, 189, 0.06) 1px, transparent 1px);
    background-size: 65px 65px;
    mask-image: radial-gradient(circle, #000 0, transparent 76%);
}

.victory-cinema-close {
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 22px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(240, 213, 143, 0.28);
    border-radius: 50%;
    color: #d9cda8;
    background: rgba(6, 23, 18, 0.66);
    cursor: pointer;
    font-size: 1.5rem;
    backdrop-filter: blur(14px);
}

.victory-cinema-heading {
    position: relative;
    z-index: 2;
    text-align: center;
}

.victory-cinema-heading span {
    color: var(--turquoise);
    font-size: clamp(0.62rem, 1vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.34em;
}

.victory-cinema-heading h2 {
    margin: 3px 0 0;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 5.2rem);
    font-weight: 500;
    line-height: 1;
    text-shadow: 0 0 45px rgba(200, 164, 93, 0.28), 0 15px 45px rgba(0, 0, 0, 0.7);
}

.victory-cinema-heading p {
    margin: 7px 0 0;
    color: #81988b;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.victory-cinema-stage {
    min-height: 0;
}

.victory-cinema-board-frame {
    position: relative;
    display: grid;
    width: 100%;
    height: min(59vh, 650px);
    min-height: 300px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(225, 196, 126, 0.23);
    border-radius: clamp(20px, 3vw, 38px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 28%),
        radial-gradient(circle at center, rgba(86, 210, 189, 0.07), transparent 46%),
        rgba(4, 20, 16, 0.64);
    box-shadow:
        0 36px 100px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 90px rgba(86, 210, 189, 0.025);
    backdrop-filter: blur(22px) saturate(140%);
}

.victory-cinema-board-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.045), transparent 65%);
    transform: translateX(-100%);
    animation: cinema-glass-sweep 3.5s ease 0.5s 1;
}

@keyframes cinema-glass-sweep {
    to { transform: translateX(100%); }
}

.victory-cinema-board {
    --cinema-board-scale: 1;
    position: relative;
    z-index: 1;
    display: flex;
    gap: 34px;
    min-width: max-content;
    min-height: max-content;
    padding: 24px;
    transform: scale(var(--cinema-board-scale));
    transform-origin: center center;
    transition: transform 0.3s ease;
}

.victory-cinema-round {
    display: flex;
    width: 196px;
    flex-direction: column;
}

.victory-cinema-round > header {
    min-height: 40px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.78rem;
    text-align: center;
}

.victory-cinema-round > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    gap: 14px;
}

.victory-cinema-match {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(200, 164, 93, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 40%),
        rgba(2, 13, 10, 0.82);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    opacity: 0.6;
}

.victory-cinema-match::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -35px;
    width: 35px;
    height: 2px;
    background: rgba(200, 164, 93, 0.22);
}

.victory-cinema-round:last-child .victory-cinema-match::after {
    display: none;
}

.victory-cinema-match > small {
    display: block;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(200, 164, 93, 0.1);
    color: #53675c;
    font-size: 0.52rem;
}

.victory-cinema-match > div {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    color: #89988f;
    font-size: 0.62rem;
}

.victory-cinema-match > div + div {
    border-top: 1px solid rgba(200, 164, 93, 0.08);
}

.victory-cinema-match > div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.victory-cinema-match > div b {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 7px;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.08);
}

.victory-cinema-match > div.is-winner {
    color: #9ee8c4;
    background: rgba(112, 216, 173, 0.08);
}

.victory-cinema-match.is-origin,
.victory-cinema-match.is-destination {
    opacity: 1;
}

.victory-cinema-match.is-origin {
    border-color: rgba(240, 213, 143, 0.78);
    box-shadow: 0 0 32px rgba(200, 164, 93, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.victory-cinema-match.is-destination {
    border-color: rgba(86, 210, 189, 0.46);
}

.victory-cinema-match.is-arrival {
    border-color: rgba(112, 216, 173, 0.95);
    animation: cinema-arrival 1.2s ease-out 2;
}

@keyframes cinema-arrival {
    0% { transform: scale(0.96); box-shadow: 0 0 0 rgba(112, 216, 173, 0); }
    45% { transform: scale(1.06); box-shadow: 0 0 52px rgba(112, 216, 173, 0.5), 0 0 80px rgba(200, 164, 93, 0.18); }
    100% { transform: scale(1); }
}

.victory-cinema-podium-round {
    justify-content: center;
}

.victory-cinema-trophy {
    display: grid;
    min-height: 145px;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px solid rgba(240, 213, 143, 0.45);
    border-radius: 25px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, rgba(200, 164, 93, 0.2), transparent 68%),
        rgba(5, 22, 17, 0.76);
    box-shadow: 0 0 45px rgba(200, 164, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.victory-cinema-trophy span {
    font-size: 2.5rem;
}

.victory-cinema-trophy strong {
    max-width: 165px;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.victory-cinema-trophy.is-arrival {
    animation: trophy-arrival 1.25s ease-out 2;
}

@keyframes trophy-arrival {
    45% {
        transform: scale(1.08) rotate(1deg);
        box-shadow: 0 0 70px rgba(200, 164, 93, 0.52), 0 0 95px rgba(112, 216, 173, 0.24);
        filter: brightness(1.3);
    }
}

.victory-cinema-paths {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.victory-path-base,
.victory-path-energy {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.victory-path-base {
    stroke: rgba(200, 164, 93, 0.18);
    stroke-width: 5;
}

.victory-path-energy {
    stroke: url("#unused");
    stroke: #6fe5b8;
    stroke-width: 4;
    filter: drop-shadow(0 0 4px #6fe5b8) drop-shadow(0 0 11px rgba(237, 190, 91, 0.78));
}

.victory-cinema-token {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 190px;
    padding: 6px 10px 6px 6px;
    border: 1px solid rgba(240, 213, 143, 0.62);
    border-radius: 999px;
    color: #fff0bc;
    background: rgba(7, 30, 23, 0.92);
    box-shadow: 0 0 20px rgba(112, 216, 173, 0.42), 0 0 35px rgba(200, 164, 93, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, filter 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.victory-cinema.is-visible .victory-cinema-token {
    opacity: 1;
}

.victory-cinema-token > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    color: #113426;
    background: linear-gradient(135deg, #f0d58f, #63dfaf);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.victory-cinema-token strong {
    overflow: hidden;
    font-size: 0.67rem;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.victory-cinema-token.has-arrived {
    filter: brightness(1.4);
    box-shadow: 0 0 34px rgba(112, 216, 173, 0.75), 0 0 56px rgba(200, 164, 93, 0.42);
}

.victory-cinema-spark {
    position: absolute;
    z-index: 6;
    width: 5px;
    height: 5px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #f7d77c;
    box-shadow: 0 0 10px #70e1b3, 0 0 18px rgba(247, 215, 124, 0.7);
    pointer-events: none;
    animation: cinema-spark 0.82s ease-out forwards;
}

@keyframes cinema-spark {
    to {
        opacity: 0;
        transform: translate(var(--spark-x), var(--spark-y)) scale(0.2);
    }
}

.victory-cinema-result {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 0 13px;
    align-items: center;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.8,.2,1);
    text-align: center;
}

.victory-cinema-result.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.victory-cinema-result > span {
    grid-row: 1 / span 2;
    color: var(--gold-light);
    font-size: 2rem;
    filter: drop-shadow(0 0 16px rgba(200, 164, 93, 0.45));
}

.victory-cinema-result strong {
    color: #f6eccd;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 500;
}

.victory-cinema-result small {
    color: var(--turquoise);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

@media (max-width: 980px) {
    .public-participant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .public-participant-drawer {
        width: calc(100% - 24px);
    }

    .public-participant-drawer > summary {
        grid-template-columns: auto 1fr auto;
        padding: 14px 16px;
    }

    .participant-drawer-count {
        display: none;
    }

    .public-participant-grid {
        grid-template-columns: 1fr;
    }

    .bracket-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .public-bracket-scroll {
        padding: 14px 11px 22px;
        border-radius: 22px;
    }

    .victory-cinema {
        padding: 14px;
    }

    .victory-cinema-heading {
        padding: 0 38px;
    }

    .victory-cinema-board-frame {
        height: 58vh;
        min-height: 330px;
        border-radius: 22px;
    }

    .victory-cinema-token strong {
        display: none;
    }

    .victory-cinema-token {
        padding-right: 6px;
    }
}

.public-bracket-scroll {
    cursor: grab;
}

.public-bracket-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}


/* =========================================================
   v0.6.0 — tile bracket, loser path and champion finale
   ========================================================= */
.public-bracket-round {
    width: 270px;
}

.public-bracket-round > div {
    gap: 22px;
}

.public-match-card {
    display: grid;
    gap: 12px;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)), rgba(5, 21, 17, 0.5);
    backdrop-filter: blur(18px) saturate(132%);
    -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.public-match-card::after {
    right: -27px;
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(200,164,93,0.1), rgba(200,164,93,0.55));
}

.public-match-number {
    display: none;
}

.public-player-tile,
.public-match-card > div {
    position: relative;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    color: #dfe8dd;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.18);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease;
}

.public-player-tile span,
.public-match-card > div span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-player-tile + .public-player-tile,
.public-match-card > div + div {
    border-top: 1px solid rgba(200, 164, 93, 0.08);
}

.public-player-score.is-hidden {
    display: none !important;
}

.public-player-tile.is-winner,
.public-match-card > div.is-winner {
    color: #eff9ef;
    border-color: rgba(106, 229, 166, 0.52);
    background:
        linear-gradient(135deg, rgba(133,255,186,0.22), rgba(255,214,128,0.09)),
        rgba(32, 93, 72, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 24px rgba(106,229,166,0.2),
        0 12px 28px rgba(0,0,0,0.18);
}

.public-match-card.status-live .public-player-tile,
.public-match-card.status-live > div {
    border-color: rgba(86,210,189,.55);
    box-shadow: 0 0 25px rgba(86,210,189,.14), inset 0 1px 0 rgba(255,255,255,0.08);
}

.public-match-card.is-advance-origin .public-player-tile.is-winner,
.public-match-card.is-advance-origin > div.is-winner {
    animation: bracket-origin-pulse 1.2s ease-in-out 3;
}

.public-match-card.is-advance-target {
    box-shadow: 0 0 0 1px rgba(96, 225, 163, 0.2), 0 0 26px rgba(96, 225, 163, 0.18);
}

.public-match-card.is-loser-target {
    box-shadow: 0 0 0 1px rgba(247, 182, 90, 0.18), 0 0 24px rgba(247, 182, 90, 0.15);
}

.public-match-card.is-advance-origin::after,
.public-match-card.is-advance-target::after,
.public-match-card.is-loser-target::after {
    height: 4px;
    border-radius: 999px;
}

.public-match-card.is-advance-origin::after,
.public-match-card.is-advance-target::after {
    background: linear-gradient(90deg, rgba(110,255,170,0.25), rgba(238,214,107,0.92));
    box-shadow: 0 0 18px rgba(110,255,170,0.26);
}

.public-match-card.is-loser-target::after {
    background: linear-gradient(90deg, rgba(255,210,116,0.35), rgba(255,129,76,0.9));
    box-shadow: 0 0 18px rgba(255,159,76,0.24);
}

@keyframes bracket-origin-pulse {
    50% {
        transform: translateX(3px) scale(1.02);
        box-shadow: 0 0 26px rgba(106,229,166,0.34);
    }
}

.victory-cinema-heading p {
    max-width: 680px;
    color: #d8e6de;
}

.victory-cinema-round > header {
    min-height: 44px;
}

.victory-cinema-match {
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(6,21,17,0.52);
    backdrop-filter: blur(14px) saturate(132%);
    -webkit-backdrop-filter: blur(14px) saturate(132%);
}

.victory-cinema-match > small {
    display: none;
}

.victory-cinema-player-tile,
.victory-cinema-match > div {
    min-height: 50px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)), rgba(255,255,255,0.035);
}

.victory-cinema-player-tile b,
.victory-cinema-match > div b {
    display: none;
}

.victory-cinema-match > div.is-winner {
    border-color: rgba(110, 255, 170, 0.48);
    background: linear-gradient(135deg, rgba(122,255,176,0.2), rgba(255,214,128,0.08)), rgba(28,76,58,0.44);
    box-shadow: 0 0 20px rgba(106,229,166,0.15);
}

.victory-cinema-match.is-loser-destination {
    box-shadow: 0 0 0 1px rgba(255,179,85,0.12), 0 0 26px rgba(255,162,73,0.1);
}

.victory-cinema-trophy {
    border-radius: 26px;
}

.victory-cinema-trophy small {
    color: rgba(255,241,199,0.72);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.victory-path-energy.is-loser-path,
.victory-path-base.is-loser-path {
    stroke: rgba(255, 170, 80, 0.9);
    filter: drop-shadow(0 0 10px rgba(255,170,80,0.46));
}

.victory-cinema-token {
    min-width: 140px;
    padding-right: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(110,255,170,0.22), rgba(255,214,128,0.12)), rgba(9,30,24,0.92);
}

.victory-cinema-token.is-loser-token {
    background: linear-gradient(135deg, rgba(255,211,130,0.22), rgba(255,124,88,0.12)), rgba(28,18,10,0.92);
}

.victory-cinema-token.is-loser-token > span {
    color: #ffbc74;
    background: rgba(255, 161, 79, 0.16);
}

.victory-cinema-result {
    min-width: 340px;
    padding: 22px 26px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(7,27,22,0.76);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.victory-cinema-result strong {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.victory-cinema-result small {
    color: #d0d7ba;
    font-size: .82rem;
    letter-spacing: .14em;
}

.victory-cinema-confetti {
    position: absolute;
    width: 12px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe38a, #6df0ad);
    box-shadow: 0 0 14px rgba(255, 227, 138, 0.28);
    pointer-events: none;
    animation: cinema-confetti 2s ease-out forwards;
    animation-delay: var(--confetti-delay, 0ms);
}

.victory-cinema-confetti:nth-child(3n) {
    background: linear-gradient(90deg, #ffdd84, #ff9657);
}

.victory-cinema-confetti:nth-child(4n) {
    background: linear-gradient(90deg, #74f6cf, #f4dc8f);
}

@keyframes cinema-confetti {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(.7);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--confetti-x), var(--confetti-y), 0) rotate(var(--confetti-rotate)) scale(1.2);
    }
}

/* =========================================================
   v0.7.0 — polished bracket, connectors and duel entrance
   ========================================================= */
.public-bracket-board {
    position: relative;
    isolation: isolate;
    padding: 16px 18px 24px;
}

.public-bracket-round {
    position: relative;
    z-index: 2;
}

.bracket-connector-layer {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.bracket-connector-glow,
.bracket-connector-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bracket-connector-glow {
    stroke-width: 10;
    opacity: 0.12;
    filter: blur(3px);
}

.bracket-connector-line {
    stroke-width: 2.4;
}

.bracket-connector-line.is-pending,
.bracket-connector-glow.is-pending {
    stroke: rgba(201, 176, 112, 0.28);
}

.bracket-connector-line.is-complete.is-winner {
    stroke: #d7d878;
    filter: drop-shadow(0 0 4px rgba(101, 232, 167, 0.8));
    stroke-dasharray: 11 7;
    animation: bracket-line-flow 1.9s linear infinite;
}

.bracket-connector-glow.is-complete.is-winner {
    stroke: rgba(92, 232, 164, 0.72);
    opacity: 0.32;
}

.bracket-connector-line.is-complete.is-loser {
    stroke: #ffad63;
    filter: drop-shadow(0 0 4px rgba(255, 155, 71, 0.75));
    stroke-dasharray: 10 8;
    animation: bracket-line-flow 2.2s linear infinite;
}

.bracket-connector-glow.is-complete.is-loser {
    stroke: rgba(255, 152, 74, 0.62);
    opacity: 0.26;
}

.bracket-connector-line.is-pending.is-loser,
.bracket-connector-glow.is-pending.is-loser {
    stroke: rgba(204, 144, 82, 0.18);
}

@keyframes bracket-line-flow {
    to { stroke-dashoffset: -36; }
}

.public-player-tile,
.public-match-card > div {
    overflow: hidden;
}

.public-player-tile::before,
.public-match-card > div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 6px;
    height: 20px;
    border: 1px solid rgba(236, 207, 136, 0.42);
    border-radius: 999px;
    opacity: 0.62;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgba(98, 224, 173, 0.46), rgba(213, 177, 90, 0.42));
    box-shadow: 0 0 12px rgba(98, 224, 173, 0.15);
}

.public-player-tile::after,
.public-match-card > div::after {
    content: "";
    position: absolute;
    top: 0;
    right: -55%;
    width: 42%;
    height: 100%;
    transform: skewX(-24deg);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transition: right .55s ease, opacity .3s ease;
}

.public-player-tile:hover::after,
.public-match-card > div:hover::after {
    right: 120%;
    opacity: 1;
}

.public-player-tile span,
.public-match-card > div span {
    padding-left: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .82rem;
    letter-spacing: .018em;
}

.public-match-card.is-live-focus {
    z-index: 5;
    border-color: rgba(99, 227, 184, 0.74);
    box-shadow:
        0 0 0 1px rgba(223, 190, 106, 0.22),
        0 0 38px rgba(83, 223, 177, 0.28),
        0 22px 46px rgba(0,0,0,.36);
    animation: live-card-breathe 2.2s ease-in-out infinite;
}

.public-match-card.is-live-focus::before {
    content: "AKTUALNA WALKA";
    position: absolute;
    z-index: 4;
    top: -12px;
    left: 50%;
    padding: 4px 12px;
    border: 1px solid rgba(101, 229, 183, .44);
    border-radius: 999px;
    color: #baf7db;
    background: rgba(5, 33, 25, .94);
    box-shadow: 0 0 20px rgba(99, 227, 184, .2);
    transform: translateX(-50%);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .16em;
    white-space: nowrap;
}

@keyframes live-card-breathe {
    50% {
        transform: translateY(-3px) scale(1.018);
        filter: brightness(1.12);
        box-shadow:
            0 0 0 1px rgba(223, 190, 106, 0.32),
            0 0 52px rgba(83, 223, 177, 0.38),
            0 26px 52px rgba(0,0,0,.42);
    }
}

body.duel-intro-open {
    overflow: hidden !important;
}

.duel-intro {
    position: fixed;
    z-index: 9800;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: clamp(24px, 4vh, 46px);
    padding: 28px;
    opacity: 0;
    isolation: isolate;
    transform: scale(1.035);
    transition: opacity .42s ease, transform .42s ease;
}

.duel-intro.is-visible {
    opacity: 1;
    transform: scale(1);
}

.duel-intro.is-closing {
    opacity: 0;
    transform: scale(1.025);
}

.duel-intro-veil {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(45, 146, 113, .28), transparent 35%),
        linear-gradient(90deg, rgba(7, 24, 19, .96), rgba(1, 8, 6, .9), rgba(7, 24, 19, .96));
    backdrop-filter: blur(17px) saturate(138%);
    -webkit-backdrop-filter: blur(17px) saturate(138%);
}

.duel-intro-veil::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .24;
    background:
        linear-gradient(115deg, transparent 35%, rgba(255,255,255,.05) 50%, transparent 65%),
        repeating-linear-gradient(90deg, rgba(200,164,93,.05) 0 1px, transparent 1px 82px);
    animation: duel-veil-sweep 2.2s ease-in-out 1;
}

@keyframes duel-veil-sweep {
    from { transform: translateX(-20%); opacity: 0; }
    45% { opacity: .32; }
    to { transform: translateX(20%); opacity: .1; }
}

.duel-intro-round {
    color: var(--turquoise);
    font-size: clamp(.66rem, 1.2vw, .9rem);
    font-weight: 900;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.duel-intro-stage {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
    gap: clamp(28px, 6vw, 100px);
    align-items: center;
    width: min(1180px, 100%);
}

.duel-intro-fighter {
    position: relative;
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 13px;
    overflow: hidden;
    border: 1px solid rgba(225, 194, 119, .28);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
        rgba(5, 25, 20, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 72px rgba(0,0,0,.34);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.duel-intro-fighter::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 90deg, transparent, rgba(93, 229, 177, .13), transparent 35%, rgba(222, 186, 96, .12), transparent 70%);
    animation: duel-card-aura 5s linear infinite;
}

@keyframes duel-card-aura {
    to { transform: rotate(360deg); }
}

.duel-intro-fighter > * {
    position: relative;
    z-index: 1;
}

.duel-intro-fighter.is-left {
    transform: translateX(-90px) rotateY(8deg);
    animation: duel-fighter-left .72s cubic-bezier(.18,.82,.2,1) .16s forwards;
}

.duel-intro-fighter.is-right {
    transform: translateX(90px) rotateY(-8deg);
    animation: duel-fighter-right .72s cubic-bezier(.18,.82,.2,1) .16s forwards;
}

@keyframes duel-fighter-left {
    to { transform: translateX(0) rotateY(0); }
}

@keyframes duel-fighter-right {
    to { transform: translateX(0) rotateY(0); }
}

.duel-intro-fighter > span {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 1px solid rgba(240, 213, 143, .52);
    border-radius: 28px;
    color: #142f25;
    background: linear-gradient(135deg, #f1d88d, #6fe4b4);
    box-shadow: 0 0 36px rgba(91, 226, 172, .22), 0 0 55px rgba(221, 183, 91, .16);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8rem;
}

.duel-intro-fighter strong {
    max-width: 92%;
    overflow: hidden;
    color: #f3e8c6;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 3rem);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duel-intro-fighter small {
    color: #90a79a;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.duel-intro-versus {
    position: relative;
    z-index: 4;
    display: grid;
    min-width: 150px;
    place-items: center;
    text-align: center;
    transform: scale(.45) rotate(-8deg);
    animation: duel-vs-impact .62s cubic-bezier(.12,.88,.18,1.25) .62s forwards;
}

.duel-intro-versus i {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(238, 207, 129, .28);
    border-radius: 50%;
    box-shadow: 0 0 55px rgba(91, 226, 172, .18), inset 0 0 35px rgba(221, 183, 91, .08);
    animation: duel-vs-ring 2.1s ease-in-out infinite;
}

.duel-intro-versus strong {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.6rem, 7vw, 7rem);
    font-style: italic;
    line-height: 1;
    text-shadow: 0 0 24px rgba(95, 225, 174, .38), 0 0 54px rgba(220, 183, 92, .26);
}

.duel-intro-versus small {
    margin-top: 16px;
    color: #8ea197;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .15em;
}

@keyframes duel-vs-impact {
    75% { transform: scale(1.1) rotate(1deg); }
    to { transform: scale(1) rotate(0); }
}

@keyframes duel-vs-ring {
    50% { transform: scale(1.14); opacity: .55; }
}

.victory-cinema.is-final .victory-cinema-veil {
    background:
        radial-gradient(circle at 50% 45%, rgba(222, 183, 83, .32), transparent 34%),
        radial-gradient(circle at 50% 54%, rgba(72, 207, 151, .22), transparent 48%),
        rgba(1, 8, 6, .95);
}

.victory-cinema.is-final .victory-cinema-veil::before {
    content: "";
    position: absolute;
    inset: -45%;
    opacity: .22;
    background: repeating-conic-gradient(from 0deg, rgba(240,213,143,.2) 0 3deg, transparent 3deg 12deg);
    mask-image: radial-gradient(circle, #000 0 30%, transparent 70%);
    animation: final-rays 24s linear infinite;
}

@keyframes final-rays {
    to { transform: rotate(360deg); }
}

.victory-cinema.is-final .victory-cinema-heading h2 {
    color: #fff0b9;
    text-shadow: 0 0 24px rgba(255,223,124,.5), 0 0 70px rgba(93,226,170,.22), 0 18px 50px rgba(0,0,0,.7);
    animation: final-winner-title 2.6s ease-in-out infinite;
}

@keyframes final-winner-title {
    50% { transform: scale(1.025); filter: brightness(1.16); }
}

.victory-cinema.is-final .victory-cinema-board-frame {
    border-color: rgba(244, 211, 125, .48);
    box-shadow: 0 40px 120px rgba(0,0,0,.58), 0 0 72px rgba(211,177,85,.14), inset 0 1px 0 rgba(255,255,255,.09);
}

.victory-cinema.is-final .victory-cinema-trophy {
    position: relative;
    overflow: visible;
    border-color: rgba(255, 226, 146, .78);
    background:
        radial-gradient(circle at 50% 35%, rgba(255,229,143,.34), transparent 40%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
        rgba(18, 47, 37, .86);
    box-shadow: 0 0 60px rgba(232, 193, 92, .32), 0 0 100px rgba(95,225,174,.16), inset 0 1px 0 rgba(255,255,255,.12);
}

.victory-cinema.is-final .victory-cinema-trophy::before,
.victory-cinema.is-final .victory-cinema-trophy::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(243, 211, 126, .33);
    border-radius: 50%;
    pointer-events: none;
}

.victory-cinema.is-final .victory-cinema-trophy::before {
    inset: -22px;
    animation: final-trophy-ring 3s linear infinite;
}

.victory-cinema.is-final .victory-cinema-trophy::after {
    inset: -42px;
    border-style: dashed;
    animation: final-trophy-ring 6s linear infinite reverse;
}

@keyframes final-trophy-ring {
    to { transform: rotate(360deg); }
}

.victory-cinema.is-final .victory-cinema-result {
    border: 1px solid rgba(246, 216, 134, .46);
    box-shadow: 0 0 48px rgba(219,184,88,.2), inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-width: 860px) {
    .duel-intro-stage {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .duel-intro-fighter {
        width: min(100%, 520px);
        min-height: 150px;
        grid-template-columns: auto 1fr;
        justify-self: center;
        justify-items: start;
        padding: 22px;
    }

    .duel-intro-fighter > span {
        grid-row: 1 / span 2;
        width: 68px;
        height: 68px;
        font-size: 2rem;
    }

    .duel-intro-fighter strong {
        font-size: 1.6rem;
    }

    .duel-intro-versus {
        min-height: 80px;
    }

    .duel-intro-versus i {
        width: 100px;
        height: 100px;
    }

    .duel-intro-versus strong {
        font-size: 3.5rem;
    }
}


/* =========================================================
   v0.8.0 — Hall of Fame and Legends
   ========================================================= */
.glass-card {
    position: relative;
    border: 1px solid rgba(224, 194, 122, .22);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
        rgba(5, 23, 18, .58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.3);
    backdrop-filter: blur(22px) saturate(138%);
    -webkit-backdrop-filter: blur(22px) saturate(138%);
}

.hall-page-shell {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 150px 0 110px;
}

.hall-hero,
.legend-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    padding: 36px 0 42px;
}

.hall-hero h1,
.legend-hero h1 {
    margin: 8px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 7rem);
    font-weight: 500;
    line-height: .95;
}

.hall-hero p,
.legend-hero p {
    max-width: 760px;
    color: #b9c8bd;
}

.hall-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid rgba(224,194,122,.2);
    border-radius: 28px;
    background: rgba(5,22,17,.52);
    backdrop-filter: blur(18px);
}

.hall-stat-grid article {
    position: relative;
    padding: 26px 20px;
    text-align: center;
}

.hall-stat-grid article + article::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, rgba(224,194,122,.35), transparent);
}

.hall-stat-grid strong {
    display: block;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2.35rem;
    font-weight: 500;
}

.hall-stat-grid span {
    color: #7f9186;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hall-section {
    padding-top: 95px;
}

.hall-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hall-player-card {
    isolation: isolate;
    overflow: hidden;
    min-height: 335px;
    padding: 26px;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.hall-player-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240,213,143,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 85px rgba(0,0,0,.38), 0 0 30px rgba(200,164,93,.1);
}

.hall-player-card.is-legend {
    border-color: rgba(240,213,143,.62);
    background:
        linear-gradient(145deg, rgba(255,230,154,.11), rgba(79,217,176,.06)),
        rgba(7,27,21,.66);
}

.hall-card-glow {
    position: absolute;
    z-index: -1;
    inset: -55%;
    background: conic-gradient(from 0deg, transparent, rgba(86,210,189,.11), transparent 32%, rgba(240,213,143,.12), transparent 67%);
    animation: hall-card-spin 14s linear infinite;
}

.hall-player-card:not(.is-legend) .hall-card-glow {
    opacity: .35;
}

@keyframes hall-card-spin { to { transform: rotate(360deg); } }

.hall-player-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}

.hall-avatar {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(224,194,122,.35);
    border-radius: 24px;
    color: var(--gold-light);
    background: rgba(200,164,93,.09);
    font-family: Georgia, serif;
    font-size: 1.7rem;
}

.hall-avatar img,
.legend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hall-avatar.is-legend {
    box-shadow: 0 0 30px rgba(240,213,143,.25), 0 0 55px rgba(86,210,189,.12);
}

.hall-player-head small {
    color: #809288;
}

.hall-player-head h3 {
    margin: 2px 0 0;
    color: #f0e8cf;
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.hall-player-head em {
    display: block;
    margin-top: 5px;
    color: var(--gold-light);
    font-size: .62rem;
    font-style: normal;
    letter-spacing: .14em;
}

.hall-trophy-row,
.legend-trophies {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 28px;
}

.mini-trophy,
.legend-trophies > span {
    position: relative;
    display: grid;
    min-height: 95px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    color: #52645a;
    background: rgba(255,255,255,.025);
    text-align: center;
}

.mini-trophy b,
.legend-trophies b {
    font-size: 1.45rem;
}

.mini-trophy small,
.legend-trophies small {
    font-size: .58rem;
    letter-spacing: .04em;
}

.mini-trophy i,
.legend-trophies i {
    position: absolute;
    top: 6px;
    right: 7px;
    color: #e9dfbf;
    font-size: .58rem;
    font-style: normal;
}

.mini-trophy.is-earned,
.legend-trophies > span {
    color: var(--gold-light);
    border-color: rgba(224,194,122,.28);
    box-shadow: inset 0 0 26px rgba(200,164,93,.06), 0 0 16px rgba(200,164,93,.06);
}

.class-warrior.is-earned,
.legend-trophies .class-warrior,
.award-class-icon.class-warrior,
.profile-award-card.class-warrior { --class-accent: #e59163; }
.class-ninja.is-earned,
.legend-trophies .class-ninja,
.award-class-icon.class-ninja,
.profile-award-card.class-ninja { --class-accent: #66d6ad; }
.class-sura.is-earned,
.legend-trophies .class-sura,
.award-class-icon.class-sura,
.profile-award-card.class-sura { --class-accent: #b388ea; }
.class-shaman.is-earned,
.legend-trophies .class-shaman,
.award-class-icon.class-shaman,
.profile-award-card.class-shaman { --class-accent: #75bdf0; }

.mini-trophy.is-earned,
.legend-trophies > span,
.award-class-icon,
.profile-award-card {
    box-shadow: inset 0 0 28px color-mix(in srgb, var(--class-accent, var(--gold)) 12%, transparent), 0 0 18px color-mix(in srgb, var(--class-accent, var(--gold)) 8%, transparent);
}

.hall-player-card footer {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 17px;
    border-top: 1px solid rgba(224,194,122,.12);
    color: #7d8f84;
    font-size: .72rem;
}

.hall-player-card footer strong {
    color: #e8dfc5;
}

.award-timeline {
    display: grid;
    gap: 10px;
}

.award-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 15px 18px;
    border-radius: 20px;
}

.award-class-icon {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-accent, var(--gold)) 35%, transparent);
    border-radius: 15px;
    color: var(--class-accent, var(--gold-light));
    background: color-mix(in srgb, var(--class-accent, var(--gold)) 10%, transparent);
}

.award-entry a {
    color: #e9e2c9;
    font-weight: 700;
}

.award-entry small {
    display: block;
    color: #7c8e83;
}

.award-entry time {
    color: #8a9a90;
    font-size: .72rem;
}

.legend-hero {
    align-items: center;
    justify-content: flex-start;
}

.legend-hero-rune {
    display: grid;
    width: 115px;
    height: 115px;
    place-items: center;
    border: 1px solid rgba(240,213,143,.48);
    border-radius: 38px;
    color: var(--gold-light);
    background: radial-gradient(circle, rgba(240,213,143,.18), rgba(86,210,189,.05));
    box-shadow: 0 0 60px rgba(240,213,143,.12);
    font-size: 3rem;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.legend-card {
    isolation: isolate;
    overflow: hidden;
    padding: 36px;
    text-align: center;
}

.legend-aura {
    position: absolute;
    z-index: -1;
    inset: -35%;
    background: conic-gradient(transparent, rgba(240,213,143,.16), transparent 28%, rgba(86,210,189,.13), transparent 64%, rgba(240,213,143,.13), transparent);
    animation: hall-card-spin 11s linear infinite;
}

.legend-crown {
    color: var(--gold-light);
    font-size: 2rem;
    text-shadow: 0 0 24px rgba(240,213,143,.45);
}

.legend-avatar {
    display: grid;
    width: 125px;
    height: 125px;
    margin: 16px auto 20px;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(240,213,143,.55);
    border-radius: 42px;
    color: var(--gold-light);
    background: rgba(200,164,93,.1);
    box-shadow: 0 0 45px rgba(240,213,143,.18), 0 0 85px rgba(86,210,189,.1);
    font-family: Georgia, serif;
    font-size: 2.5rem;
}

.legend-card h2 {
    margin: 8px 0 3px;
    color: #fff1c8;
    font-family: Georgia, serif;
    font-size: 2.3rem;
    font-weight: 500;
}

.legend-card > strong {
    color: var(--gold-light);
    font-size: .7rem;
    letter-spacing: .24em;
}

.legend-card > p {
    margin: 24px auto 0;
    color: #a9b8ae;
}

.legend-card footer {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid rgba(224,194,122,.13);
    color: #7f9186;
    font-size: .72rem;
}

.legend-card .ghost-button {
    display: inline-block;
    margin-top: 20px;
}

.legend-empty {
    display: grid;
    min-height: 430px;
    place-items: center;
    align-content: center;
    padding: 40px;
    text-align: center;
}

.legend-empty > span {
    color: var(--gold-light);
    font-size: 4rem;
}

.legend-empty h2 {
    margin: 10px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2.3rem;
    font-weight: 500;
}

.legend-empty p {
    color: var(--muted);
}

.profile-award-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-award-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
}

.profile-award-card > span {
    color: var(--class-accent, var(--gold-light));
    font-size: 1.5rem;
}

.profile-award-card strong,
.profile-award-card small {
    display: block;
}

.profile-award-card strong {
    color: #e9e2ca;
}

.profile-award-card small,
.profile-award-card time {
    color: #7b8d82;
    font-size: .72rem;
}

@media (max-width: 980px) {
    .hall-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legend-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .hall-page-shell { width: calc(100% - 24px); padding-top: 115px; }
    .hall-hero { align-items: flex-start; flex-direction: column; }
    .hall-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .hall-stat-grid article:nth-child(3)::before { display: none; }
    .hall-card-grid { grid-template-columns: 1fr; }
    .profile-award-grid { grid-template-columns: 1fr; }
    .legend-hero { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
    .hall-stat-grid { grid-template-columns: 1fr; }
    .hall-stat-grid article + article::before { top: 0; right: 20%; bottom: auto; left: 20%; width: auto; height: 1px; }
    .hall-trophy-row, .legend-trophies { grid-template-columns: repeat(2, 1fr); }
    .award-entry { grid-template-columns: auto 1fr; }
    .award-entry time { grid-column: 2; }
}


/* v0.9.0 — klasy postaci na arenie */
.public-live-class {
    min-height: 1.2em;
    color: var(--turquoise);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   v0.10.0 — saved characters, exact bracket tile movement,
   and round-robin result cinema
   ========================================================= */
.profile-character-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.profile-character-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 86px;
    padding: 16px;
    border-radius: 22px;
}

.profile-character-card > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(228, 198, 124, .34);
    border-radius: 17px;
    color: var(--gold-light);
    background: rgba(225, 190, 102, .08);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.profile-character-card strong,
.profile-character-card small {
    display: block;
}

.profile-character-card strong {
    overflow: hidden;
    color: #eee6cb;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-character-card small {
    margin-top: 3px;
    color: var(--turquoise);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.victory-cinema-token {
    display: none !important;
}

.victory-moving-tile {
    position: absolute !important;
    z-index: 24;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0 16px;
    border: 1px solid rgba(114, 242, 172, .72) !important;
    border-radius: 18px !important;
    color: #f3faef !important;
    background:
        linear-gradient(135deg, rgba(116,255,180,.28), rgba(255,218,124,.14)),
        rgba(8, 39, 29, .94) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 0 34px rgba(100,239,166,.34),
        0 18px 35px rgba(0,0,0,.42) !important;
    pointer-events: none;
    transform-origin: top left;
    will-change: transform, opacity;
}

.victory-moving-tile.is-loser {
    border-color: rgba(255, 177, 86, .76) !important;
    background:
        linear-gradient(135deg, rgba(255,211,119,.25), rgba(255,112,70,.16)),
        rgba(49, 27, 13, .94) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 0 32px rgba(255,151,71,.3),
        0 18px 35px rgba(0,0,0,.42) !important;
}

.victory-moving-tile b {
    display: none !important;
}

.victory-cinema-player-tile.is-tile-arrival,
.victory-cinema-match > div.is-tile-arrival {
    animation: exact-tile-arrival 1.05s ease both;
}

.victory-cinema-player-tile.is-loser-tile-arrival,
.victory-cinema-match > div.is-loser-tile-arrival {
    animation: exact-loser-tile-arrival 1.05s ease both;
}

@keyframes exact-tile-arrival {
    0% { box-shadow: 0 0 0 rgba(100,239,166,0); }
    40% { transform: scale(1.045); box-shadow: 0 0 38px rgba(100,239,166,.5); }
    100% { transform: scale(1); }
}

@keyframes exact-loser-tile-arrival {
    0% { box-shadow: 0 0 0 rgba(255,151,71,0); }
    40% { transform: scale(1.045); box-shadow: 0 0 36px rgba(255,151,71,.45); }
    100% { transform: scale(1); }
}

.league-result-cinema {
    position: fixed;
    z-index: 170;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    opacity: 0;
    transition: opacity .42s ease;
}

.league-result-cinema.is-visible {
    opacity: 1;
}

.league-result-cinema.is-closing {
    opacity: 0;
}

.league-result-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(67, 210, 169, .15), transparent 46%),
        rgba(1, 9, 7, .9);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
}

.league-result-card {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    padding: clamp(28px, 4vw, 54px);
    border: 1px solid rgba(229, 198, 123, .42);
    border-radius: 36px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), transparent 38%),
        rgba(5, 25, 20, .86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 34px 110px rgba(0,0,0,.62);
    text-align: center;
    transform: translateY(30px) scale(.94);
    transition: transform .5s cubic-bezier(.2,.82,.22,1);
}

.league-result-cinema.is-visible .league-result-card {
    transform: translateY(0) scale(1);
}

.league-result-card h2 {
    margin: 7px 0 30px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 500;
}

.league-result-duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.league-result-duel article {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 96px;
    padding: 16px 20px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    text-align: left;
}

.league-result-duel article.is-winner {
    border-color: rgba(105, 232, 165, .58);
    background: linear-gradient(135deg, rgba(98,229,158,.2), rgba(221,185,91,.08));
    box-shadow: 0 0 32px rgba(92,224,158,.2);
}

.league-result-duel article > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(226,194,117,.32);
    border-radius: 18px;
    color: var(--gold-light);
    background: rgba(226,194,117,.08);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
}

.league-result-duel strong,
.league-result-duel small {
    display: block;
}

.league-result-duel strong {
    color: #f0ead7;
    font-size: 1.05rem;
}

.league-result-duel small {
    color: var(--turquoise);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.league-result-duel b {
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.1rem;
    font-weight: 500;
}

.league-result-duel > em {
    color: #71857a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.6rem;
    font-style: normal;
}

.league-result-winner {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-top: 28px;
    padding: 12px 20px;
    border: 1px solid rgba(231,198,117,.28);
    border-radius: 18px;
    background: rgba(231,198,117,.06);
}

.league-result-winner > span {
    color: var(--gold-light);
    font-size: 1.6rem;
}

.league-result-winner small,
.league-result-winner strong {
    display: block;
    text-align: left;
}

.league-result-winner small {
    color: #82968b;
    font-size: .6rem;
    letter-spacing: .13em;
}

.league-result-winner strong {
    color: #f5e9bf;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

@media (max-width: 900px) {
    .profile-character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .league-result-duel {
        grid-template-columns: 1fr;
    }

    .league-result-duel > em {
        line-height: 1;
    }
}

@media (max-width: 540px) {
    .profile-character-grid {
        grid-template-columns: 1fr;
    }

    .league-result-card {
        padding: 24px 16px;
        border-radius: 26px;
    }

    .league-result-duel article {
        grid-template-columns: 48px 1fr auto;
        padding: 12px;
    }

    .league-result-duel article > span {
        width: 46px;
        height: 46px;
    }
}

.victory-cinema-player-tile.is-awaiting-winner-tile,
.victory-cinema-player-tile.is-awaiting-loser-tile,
.victory-cinema-match > div.is-awaiting-winner-tile,
.victory-cinema-match > div.is-awaiting-loser-tile {
    opacity: .08;
    filter: blur(2px);
    transition: opacity .2s ease, filter .2s ease;
}


/* =========================================================
   v0.11.0 — fixed-size podium tile transition
   ========================================================= */
.victory-moving-tile.is-podium-moving-tile {
    transform-origin: center center;
    max-width: none;
    min-width: 0;
    border-radius: 18px;
}

.victory-cinema-podium-round .victory-cinema-trophy {
    min-width: 250px;
}

@media (max-width: 640px) {
    .victory-cinema-podium-round .victory-cinema-trophy {
        min-width: 210px;
    }
}


/* v0.16.0 — bilans pojedynków w tabeli publicznej */
.public-standings-table article {
    grid-template-columns: 45px minmax(180px, 1fr) 130px 72px 90px;
}

.standings-balance {
    justify-self: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

.standings-balance.is-positive {
    color: var(--success);
}

.standings-balance.is-negative {
    color: #ff9075;
}

@media (max-width: 640px) {
    .public-standings-table article {
        min-width: 620px;
        grid-template-columns: 32px minmax(180px, 1fr) 120px 70px 90px;
    }

    .public-standings-table {
        overflow-x: auto;
    }

    .public-standings-table small,
    .public-standings-table b {
        grid-column: auto;
        grid-row: auto;
    }
}


/* =========================================================
   v0.17.0 — General ELO ranking
   ========================================================= */
.elo-shell {
    width: min(calc(100% - 48px), var(--content-width));
    margin: 0 auto;
    padding: 150px 0 110px;
}

.elo-hero {
    max-width: 820px;
    margin-bottom: 36px;
}

.elo-hero h1 {
    margin: 10px 0 14px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 500;
}

.elo-hero p {
    color: var(--muted);
    font-size: 1.02rem;
}

.elo-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.elo-stat-grid article {
    padding: 22px;
    border: 1px solid rgba(200,164,93,.22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(4,18,14,.62);
    backdrop-filter: blur(16px);
}

.elo-stat-grid strong,
.elo-stat-grid span {
    display: block;
}

.elo-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2.2rem;
    font-weight: 500;
}

.elo-stat-grid span {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.elo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr);
    gap: 20px;
}

.elo-ranking-panel,
.elo-recent-panel {
    padding: 26px;
    border-radius: 28px;
}

.elo-table {
    display: grid;
}

.elo-table-row {
    display: grid;
    grid-template-columns: 44px minmax(220px, 1.5fr) 95px 75px 65px 70px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 8px 10px;
    border-top: 1px solid rgba(200,164,93,.11);
    color: #b9c7bd;
    font-size: .78rem;
}

.elo-table-row:not(.elo-table-heading):hover {
    border-radius: 16px;
    background: rgba(255,255,255,.035);
}

.elo-table-heading {
    min-height: 38px;
    border-top: 0;
    color: #72847a;
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.elo-position {
    color: var(--muted);
    font-family: Georgia, serif;
    font-size: 1.2rem;
    text-align: center;
}

.elo-position.is-podium {
    color: var(--gold-light);
    text-shadow: 0 0 18px rgba(200,164,93,.28);
}

.elo-player-cell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.elo-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--gold-light);
    background: rgba(200,164,93,.08);
    font-family: Georgia, serif;
}

.elo-player-cell strong,
.elo-player-cell small,
.elo-rating small {
    display: block;
}

.elo-player-cell strong {
    color: #e8e1c8;
}

.elo-player-cell small,
.elo-rating small {
    color: #708177;
    font-size: .65rem;
}

.elo-player-cell em {
    padding: 4px 6px;
    border: 1px solid rgba(200,164,93,.24);
    color: var(--gold-light);
    font-size: .55rem;
    font-style: normal;
    letter-spacing: .08em;
}

.elo-rating {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.15rem;
}

.elo-change {
    display: inline-grid;
    min-width: 48px;
    place-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-weight: 800;
}

.elo-change.is-positive,
.is-positive {
    color: #84f3bd;
}

.elo-change.is-positive {
    background: rgba(112,216,173,.1);
}

.elo-change.is-negative,
.is-negative {
    color: #f0a398;
}

.elo-change.is-negative {
    background: rgba(228,134,121,.1);
}

.elo-recent-list,
.profile-elo-history {
    display: grid;
    gap: 9px;
}

.elo-recent-list article,
.profile-elo-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(200,164,93,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
}

.elo-recent-list strong,
.elo-recent-list small,
.profile-elo-row strong,
.profile-elo-row small {
    display: block;
}

.elo-recent-list strong,
.profile-elo-row strong {
    color: #ded8c2;
}

.elo-recent-list small,
.profile-elo-row small,
.profile-elo-row time {
    color: #72847a;
    font-size: .66rem;
}

.elo-recent-list b {
    color: var(--gold-light);
}

.elo-rules-copy {
    margin-top: 20px;
    padding: 16px;
    border-radius: 17px;
    color: var(--muted);
    background: rgba(255,255,255,.025);
}

.elo-rules-copy strong {
    color: var(--gold-light);
}

.elo-rules-copy p {
    margin-bottom: 0;
    font-size: .78rem;
}

.player-card-elo {
    color: var(--gold-light) !important;
}

.profile-stat-stack-elo article small {
    display: block;
    color: #77897f;
    font-size: .62rem;
}

.profile-elo-row {
    padding: 15px 18px;
    border-radius: 20px;
}

.league-result-winner em {
    display: block;
    margin-top: 4px;
    color: #85efb9;
    font-size: .75rem;
    font-style: normal;
    letter-spacing: .08em;
}

@media (max-width: 980px) {
    .elo-layout {
        grid-template-columns: 1fr;
    }
    .elo-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .elo-table {
        overflow-x: auto;
    }
    .elo-table-row {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .elo-shell {
        width: calc(100% - 24px);
        padding-top: 120px;
    }
    .elo-stat-grid {
        grid-template-columns: 1fr;
    }
    .elo-ranking-panel,
    .elo-recent-panel {
        padding: 19px 14px;
    }
}


/* =========================================================
   v0.18.0 — hidden achievements
   ========================================================= */
.profile-achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.profile-achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    min-height: 190px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: 26px;
}

.profile-achievement-card::after {
    content: "";
    position: absolute;
    inset: auto -18% -55% 25%;
    height: 150px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--turquoise) 18%, transparent);
    filter: blur(44px);
    pointer-events: none;
}

.profile-achievement-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold-light) 48%, transparent);
    border-radius: 20px;
    color: var(--gold-light);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--gold) 18%, transparent);
    font-size: 1.75rem;
}

.profile-achievement-card small {
    color: var(--turquoise);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.profile-achievement-card h3 {
    margin: 5px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.32rem;
    font-weight: 500;
}

.profile-achievement-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: .84rem;
}

.profile-achievement-card time {
    color: color-mix(in srgb, var(--parchment) 65%, transparent);
    font-size: .7rem;
}

.profile-achievement-card.rarity-epic,
.profile-achievement-card.rarity-legendary {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 44px rgba(0,0,0,.22), 0 0 30px color-mix(in srgb, var(--gold) 10%, transparent);
}

.profile-achievement-card.rarity-legendary .profile-achievement-icon {
    animation: achievement-icon-pulse 2.8s ease-in-out infinite;
}

@keyframes achievement-icon-pulse {
    50% { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 42px color-mix(in srgb, var(--gold-light) 32%, transparent); }
}

.achievement-unlock-cinema {
    position: fixed;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .45s ease;
}

.achievement-unlock-cinema.is-visible { opacity: 1; }
.achievement-unlock-cinema.is-closing { opacity: 0; }

.achievement-unlock-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--turquoise) 12%, transparent), rgba(1,6,5,.9) 64%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.achievement-unlock-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(92vw, 620px);
    justify-items: center;
    padding: 42px 42px 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold-light) 52%, transparent);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)), color-mix(in srgb, var(--panel) 88%, transparent);
    box-shadow: 0 32px 100px rgba(0,0,0,.58), 0 0 60px color-mix(in srgb, var(--gold) 17%, transparent);
    text-align: center;
    transform: translateY(24px) scale(.94);
    transition: transform .5s cubic-bezier(.2,.85,.2,1), border-color .3s ease, box-shadow .3s ease;
}

.achievement-unlock-card.is-revealed { transform: translateY(0) scale(1); }

.achievement-unlock-card::before {
    content: "";
    position: absolute;
    inset: -80% -30%;
    background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--gold-light) 14%, transparent), transparent 30%);
    animation: achievement-aura-spin 8s linear infinite;
    pointer-events: none;
}

@keyframes achievement-aura-spin { to { transform: rotate(360deg); } }

.achievement-unlock-card > * { position: relative; z-index: 1; }

.achievement-unlock-card > span {
    color: var(--turquoise);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .28em;
}

.achievement-unlock-card > strong {
    display: grid;
    width: 106px;
    height: 106px;
    margin: 22px 0 17px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold-light) 62%, transparent);
    border-radius: 30px;
    color: var(--gold-light);
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), rgba(0,0,0,.12));
    box-shadow: 0 0 50px color-mix(in srgb, var(--gold-light) 22%, transparent);
    font-size: 3rem;
}

.achievement-unlock-card h2 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 6vw, 4.3rem);
    font-weight: 500;
    line-height: 1;
}

.achievement-unlock-card small {
    margin-top: 12px;
    color: var(--parchment);
    font-size: 1rem;
    font-weight: 800;
}

.achievement-unlock-card p {
    max-width: 480px;
    margin: 14px 0 20px;
    color: var(--muted);
}

.achievement-unlock-dots { display: flex; gap: 8px; }
.achievement-unlock-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.achievement-unlock-dots i.is-active { background: var(--gold-light); box-shadow: 0 0 12px var(--gold-light); }

.achievement-unlock-card.rarity-legendary {
    border-color: color-mix(in srgb, var(--gold-light) 82%, transparent);
    box-shadow: 0 32px 100px rgba(0,0,0,.58), 0 0 90px color-mix(in srgb, var(--gold-light) 30%, transparent);
}

.achievement-unlock-card.rarity-epic {
    border-color: color-mix(in srgb, var(--turquoise) 66%, var(--gold) 34%);
}

@media (max-width: 900px) {
    .profile-achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .profile-achievement-grid { grid-template-columns: 1fr; }
    .profile-achievement-card { min-height: 0; padding: 20px; }
    .achievement-unlock-card { padding: 34px 22px 28px; }
}


/* =========================================================
   v0.23.0 — public seasons
   ========================================================= */
.season-public-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 130px 0 70px;
}

.season-public-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 16px;
}

.season-public-tabs a {
    display: grid;
    gap: 3px;
    min-width: 180px;
    padding: 13px 15px;
    border: 1px solid rgba(200, 164, 93, .18);
    border-radius: var(--theme-radius-md, 16px);
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.season-public-tabs a:hover,
.season-public-tabs a.is-active {
    transform: translateY(-2px);
    border-color: rgba(200, 164, 93, .42);
    box-shadow: 0 0 24px rgba(200, 164, 93, .12);
}

.season-public-tabs strong {
    color: #eee5ca;
}

.season-public-tabs small {
    color: #8fa197;
}

@media (max-width: 640px) {
    .season-public-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 110px;
    }

    .season-public-tabs a {
        min-width: 100%;
    }
}


/* =========================================================
   v0.24.0 — maintenance page
   ========================================================= */
.maintenance-shell {
    width: min(860px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: 90px 0;
}

.maintenance-card {
    text-align: center;
    padding: clamp(32px, 7vw, 70px);
    border-color: rgba(200, 164, 93, .28);
    box-shadow: 0 0 60px rgba(200, 164, 93, .12), 0 0 90px rgba(56, 232, 255, .08);
}

.maintenance-rune {
    display: inline-grid;
    width: 82px;
    height: 82px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(200, 164, 93, .38);
    border-radius: 50%;
    background: rgba(200, 164, 93, .08);
    color: var(--gold-light);
    font-size: 2.2rem;
    text-shadow: 0 0 24px rgba(200, 164, 93, .55);
}

.maintenance-card h1 {
    margin: 8px 0 12px;
    color: #f3e4bd;
    font-size: clamp(2rem, 5vw, 4rem);
}

.maintenance-card p {
    max-width: 600px;
    margin: 0 auto 18px;
    color: #c6d6cf;
    font-size: 1.05rem;
    line-height: 1.7;
}

.maintenance-card small {
    color: #8fa197;
}


/* =========================================================
   v0.25.0 — prestige visuals, trophies and rarity
   ========================================================= */
.public-player-card,
.player-profile-hero,
.hall-player-card {
    --prestige-a: var(--theme-primary, #2d8067);
    --prestige-b: var(--theme-accent, #d6b35f);
    --prestige-glow: var(--theme-accent-soft, rgba(214,179,95,.22));
}

.public-player-card.prestige-0,
.player-profile-hero.prestige-0,
.hall-player-card.prestige-0 {
    --prestige-a: #5d6870;
    --prestige-b: #aeb6bd;
    --prestige-glow: rgba(174,182,189,.11);
}

.public-player-card.prestige-1,
.player-profile-hero.prestige-1,
.hall-player-card.prestige-1 {
    --prestige-a: #2bc77b;
    --prestige-b: #d6b35f;
    --prestige-glow: rgba(43,199,123,.18);
}

.public-player-card.prestige-2,
.player-profile-hero.prestige-2,
.hall-player-card.prestige-2 {
    --prestige-a: #2e8dff;
    --prestige-b: #f0d172;
    --prestige-glow: rgba(46,141,255,.22);
}

.public-player-card.prestige-3,
.player-profile-hero.prestige-3,
.hall-player-card.prestige-3 {
    --prestige-a: #a855f7;
    --prestige-b: #f4c96c;
    --prestige-glow: rgba(168,85,247,.25);
}

.public-player-card.prestige-4,
.player-profile-hero.prestige-4,
.hall-player-card.prestige-4,
.public-player-card.is-legend,
.player-profile-hero.is-legend,
.hall-player-card.is-legend {
    --prestige-a: #e5391f;
    --prestige-b: #ffb13b;
    --prestige-glow: rgba(255,106,37,.32);
}

.public-player-card::before,
.hall-player-card::before,
.player-profile-hero::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 14%, color-mix(in srgb, var(--prestige-b) 30%, transparent), transparent 28%),
        radial-gradient(circle at 20% 84%, color-mix(in srgb, var(--prestige-a) 24%, transparent), transparent 30%);
    opacity: .75;
}

.public-player-card > *,
.hall-player-card > *,
.player-profile-hero > * {
    position: relative;
    z-index: 1;
}

.public-player-card.prestige-1,
.public-player-card.prestige-2,
.public-player-card.prestige-3,
.public-player-card.prestige-4,
.public-player-card.is-legend {
    border-color: color-mix(in srgb, var(--prestige-b) 52%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 25px 70px rgba(0,0,0,.38),
        0 0 30px var(--prestige-glow);
}

.public-player-card.is-legend,
.hall-player-card.is-legend,
.player-profile-hero.is-legend {
    animation: legend-breath 3.8s ease-in-out infinite alternate;
}

@keyframes legend-breath {
    from { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 74px rgba(0,0,0,.42), 0 0 26px rgba(255,107,38,.2); }
    to { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 34px 92px rgba(0,0,0,.48), 0 0 52px rgba(255,107,38,.38); }
}

.player-prestige-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    color: color-mix(in srgb, var(--parchment) 70%, transparent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.player-prestige-label strong {
    color: var(--prestige-b);
    text-shadow: 0 0 16px var(--prestige-glow);
}

.player-trophy-track {
    position: relative;
    overflow: hidden;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--prestige-b) 28%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.16);
}

.player-trophy-track span {
    transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}

.player-trophy-track span.is-earned {
    color: var(--prestige-b);
    text-shadow: 0 0 14px var(--prestige-glow);
    filter: drop-shadow(0 0 8px var(--prestige-glow));
}

.public-player-card:hover .player-trophy-track span.is-earned {
    transform: translateY(-2px) scale(1.08);
}

.profile-legend-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 15px 18px;
    border: 1px solid color-mix(in srgb, var(--prestige-b) 34%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--prestige-a) 11%, transparent), color-mix(in srgb, var(--prestige-b) 8%, transparent)),
        rgba(0,0,0,.16);
}

.profile-legend-progress > span {
    color: #95a79c;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.profile-legend-progress > strong {
    color: var(--prestige-b);
    font-family: Georgia, serif;
    font-size: 1.4rem;
    text-shadow: 0 0 18px var(--prestige-glow);
}

.legend-progress-bar {
    position: relative;
    height: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--prestige-b) 22%, transparent);
    border-radius: 999px;
    background: rgba(0,0,0,.28);
}

.legend-progress-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--prestige-a), var(--prestige-b)),
        var(--prestige-b);
    box-shadow: 0 0 22px var(--prestige-glow);
}

.legend-title,
.public-legend-badge {
    background:
        linear-gradient(135deg, rgba(198,30,21,.72), rgba(255,139,36,.72)),
        rgba(0,0,0,.28);
    border-color: rgba(255,205,110,.6);
    color: #fff4c8;
    box-shadow: 0 0 24px rgba(255,111,34,.28);
}

.profile-achievement-card {
    --rarity-a: var(--theme-primary, #2d8067);
    --rarity-b: var(--theme-accent, #d6b35f);
    --rarity-glow: rgba(214,179,95,.14);
    background:
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--rarity-b) 17%, transparent), transparent 35%),
        linear-gradient(145deg, color-mix(in srgb, var(--rarity-a) 10%, transparent), rgba(0,0,0,.12)),
        rgba(255,255,255,.025);
    border-color: color-mix(in srgb, var(--rarity-b) 38%, transparent);
    box-shadow: 0 20px 54px rgba(0,0,0,.28), 0 0 24px var(--rarity-glow);
}

.profile-achievement-card.rarity-common {
    --rarity-a: #6b7280; --rarity-b: #cbd5e1; --rarity-glow: rgba(203,213,225,.12);
}

.profile-achievement-card.rarity-rare {
    --rarity-a: #16a34a; --rarity-b: #86efac; --rarity-glow: rgba(74,222,128,.20);
}

.profile-achievement-card.rarity-epic {
    --rarity-a: #7c3aed; --rarity-b: #d8b4fe; --rarity-glow: rgba(168,85,247,.24);
}

.profile-achievement-card.rarity-legendary {
    --rarity-a: #b7791f; --rarity-b: #facc15; --rarity-glow: rgba(250,204,21,.28);
}

.profile-achievement-card.rarity-secret {
    --rarity-a: #dc2626; --rarity-b: #fb923c; --rarity-glow: rgba(251,146,60,.30);
}

.profile-achievement-icon {
    border-color: color-mix(in srgb, var(--rarity-b) 58%, transparent);
    color: var(--rarity-b);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--rarity-b) 20%, transparent), transparent 68%),
        rgba(0,0,0,.18);
    box-shadow: 0 0 30px var(--rarity-glow);
}

.profile-achievement-card small,
.profile-achievement-card h3 {
    color: var(--rarity-b);
}

.class-trophy-card,
.mini-trophy,
.legend-trophies span,
.profile-award-card,
.award-class-icon {
    --class-a: var(--theme-primary, #2d8067);
    --class-b: var(--theme-accent, #d6b35f);
    --class-glow: rgba(214,179,95,.18);
}

.class-warrior { --class-a: #b43b22; --class-b: #f3c260; --class-glow: rgba(243,194,96,.24); }
.class-ninja { --class-a: #29193f; --class-b: #b9d6ff; --class-glow: rgba(185,214,255,.22); }
.class-sura { --class-a: #6c1dff; --class-b: #e29cff; --class-glow: rgba(226,156,255,.25); }
.class-shaman { --class-a: #1f8f72; --class-b: #83f5cc; --class-glow: rgba(131,245,204,.23); }

.class-trophy-card.is-earned {
    border-color: color-mix(in srgb, var(--class-b) 58%, transparent);
    background:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--class-b) 26%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 22%, transparent), rgba(0,0,0,.26)),
        var(--theme-panel, rgba(4,17,14,.94));
    box-shadow: 0 0 30px var(--class-glow);
}

.class-trophy-icon {
    border-radius: 22px;
    color: #657268;
    transition: transform .25s ease, box-shadow .25s ease;
}

.class-trophy-card.is-earned .class-trophy-icon,
.mini-trophy.is-earned b,
.legend-trophies span b,
.profile-award-card > span,
.award-class-icon {
    color: var(--class-b);
    text-shadow: 0 0 16px var(--class-glow);
}

.class-trophy-card.is-earned .class-trophy-icon {
    border-color: color-mix(in srgb, var(--class-b) 48%, transparent);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 68%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 18%, transparent), rgba(0,0,0,.26));
    box-shadow: 0 0 28px var(--class-glow);
}

.class-trophy-card.is-earned:hover .class-trophy-icon {
    transform: translateY(-3px) scale(1.04);
}

.mini-trophy {
    border-color: color-mix(in srgb, var(--class-b) 25%, transparent);
}

.mini-trophy.is-earned {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--class-b) 16%, transparent), transparent 68%),
        color-mix(in srgb, var(--class-a) 10%, transparent);
    border-color: color-mix(in srgb, var(--class-b) 54%, transparent);
    box-shadow: 0 0 22px var(--class-glow);
}

.hall-player-card.prestige-4 .hall-card-glow,
.hall-player-card.is-legend .hall-card-glow {
    opacity: .95;
    background:
        conic-gradient(from 0deg, transparent, rgba(255,107,38,.26), transparent 24%, rgba(255,210,94,.22), transparent 60%, rgba(210,36,22,.24), transparent);
}

.legend-card {
    border-color: rgba(255,177,59,.58);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,177,59,.16), transparent 34%),
        radial-gradient(circle at 15% 100%, rgba(229,57,31,.14), transparent 28%),
        rgba(11,4,4,.76);
    box-shadow:
        0 32px 90px rgba(0,0,0,.45),
        0 0 46px rgba(255,107,38,.22);
}

@media (max-width: 720px) {
    .profile-legend-progress {
        grid-template-columns: 1fr auto;
    }

    .legend-progress-bar {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   v0.26.0 — prestige ranks, titles and relic codex
   ========================================================= */
.public-player-title-badge,
.profile-prestige-title,
.hall-prestige-title,
.elo-prestige-title,
.legend-rank-title,
.prestige-badge {
    --rank-a: var(--theme-primary, #2d8067);
    --rank-b: var(--theme-accent, #d6b35f);
    --rank-glow: var(--theme-accent-soft, rgba(214,179,95,.2));
}

.rank-legend,
.public-player-title-badge.rank-legend,
.profile-prestige-title.rank-legend,
.hall-prestige-title.rank-legend,
.elo-prestige-title.rank-legend {
    --rank-a: #e5391f;
    --rank-b: #ffb13b;
    --rank-glow: rgba(255,111,34,.34);
}

.rank-mythic { --rank-a: #dc2626; --rank-b: #facc15; --rank-glow: rgba(250,204,21,.28); }
.rank-grandmaster { --rank-a: #7c3aed; --rank-b: #facc15; --rank-glow: rgba(168,85,247,.27); }
.rank-champion { --rank-a: #b7791f; --rank-b: #ffe28a; --rank-glow: rgba(255,226,138,.24); }
.rank-elite { --rank-a: #2563eb; --rank-b: #93c5fd; --rank-glow: rgba(147,197,253,.23); }
.rank-veteran { --rank-a: #15803d; --rank-b: #86efac; --rank-glow: rgba(134,239,172,.18); }
.rank-winner { --rank-a: #0f766e; --rank-b: #5eead4; --rank-glow: rgba(94,234,212,.18); }
.rank-fighter { --rank-a: #4b5563; --rank-b: #cbd5e1; --rank-glow: rgba(203,213,225,.13); }
.rank-rookie { --rank-a: #374151; --rank-b: #9ca3af; --rank-glow: rgba(156,163,175,.11); }

.public-player-title-badge,
.hall-prestige-title,
.elo-prestige-title,
.legend-rank-title {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--rank-b) 46%, transparent);
    border-radius: 999px;
    color: var(--rank-b);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rank-a) 16%, transparent), color-mix(in srgb, var(--rank-b) 8%, transparent)),
        rgba(0,0,0,.18);
    box-shadow: 0 0 18px var(--rank-glow);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.elo-prestige-title {
    margin-top: 4px;
    font-style: normal;
    font-size: .58rem;
}

.profile-prestige-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    max-width: 620px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--rank-b) 46%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--rank-b) 18%, transparent), transparent 40%),
        linear-gradient(135deg, color-mix(in srgb, var(--rank-a) 17%, transparent), rgba(0,0,0,.18));
    box-shadow: 0 0 28px var(--rank-glow);
}

.profile-prestige-title > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rank-b) 42%, transparent);
    border-radius: 16px;
    color: var(--rank-b);
    background: rgba(0,0,0,.18);
    font-size: 1.4rem;
    text-shadow: 0 0 16px var(--rank-glow);
}

.profile-prestige-title strong,
.profile-prestige-title small {
    display: block;
}

.profile-prestige-title strong {
    color: var(--rank-b);
    font-family: Georgia, serif;
    font-size: 1.18rem;
    text-shadow: 0 0 16px var(--rank-glow);
}

.profile-prestige-title small {
    margin-top: 3px;
    color: color-mix(in srgb, var(--parchment) 68%, transparent);
    font-size: .74rem;
    line-height: 1.35;
}

.profile-badge-rail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.prestige-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--rank-b) 34%, transparent);
    border-radius: 999px;
    background: rgba(0,0,0,.2);
    color: color-mix(in srgb, var(--parchment) 88%, transparent);
    font-size: .68rem;
    font-weight: 800;
}

.prestige-badge b {
    color: var(--rank-b);
    text-shadow: 0 0 12px var(--rank-glow);
}

.class-trophy-flavour {
    min-height: 40px;
    margin: -4px 0 12px;
    color: color-mix(in srgb, var(--muted) 90%, transparent);
    font-size: .76rem;
    line-height: 1.45;
}

.mini-trophy-name,
.legend-relic-name {
    display: block;
    margin-top: 3px;
    color: color-mix(in srgb, var(--class-b) 82%, transparent);
    font-size: .58rem;
    font-style: normal;
    line-height: 1.2;
}

.prestige-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 132px 0 70px;
}

.prestige-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 68px);
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 32%),
        radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--theme-primary) 24%, transparent), transparent 34%),
        var(--theme-panel, rgba(4,18,14,.78));
}

.prestige-hero h1 {
    max-width: 850px;
    margin: 8px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 500;
    line-height: .95;
    text-shadow: 0 0 36px var(--theme-accent-soft), 0 14px 48px rgba(0,0,0,.55);
}

.prestige-hero p {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.prestige-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 38px;
}

.prestige-stat-grid article {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius, 24px);
    background: rgba(255,255,255,.035);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.prestige-stat-grid strong,
.prestige-stat-grid span {
    display: block;
}

.prestige-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
}

.prestige-stat-grid span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.prestige-section {
    margin-top: 42px;
}

.prestige-rank-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.prestige-rank-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--rank-b) 34%, transparent);
    background:
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--rank-b) 18%, transparent), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--rank-a) 14%, transparent), rgba(0,0,0,.14)),
        var(--theme-panel, rgba(4,18,14,.78));
    box-shadow: 0 0 28px var(--rank-glow), 0 22px 60px rgba(0,0,0,.28);
}

.prestige-rank-card > span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--rank-b) 48%, transparent);
    border-radius: 18px;
    color: var(--rank-b);
    background: rgba(0,0,0,.18);
    font-size: 1.7rem;
    text-shadow: 0 0 18px var(--rank-glow);
}

.prestige-rank-card small {
    color: var(--rank-b);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.prestige-rank-card h3 {
    margin: 6px 0 9px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.prestige-rank-card p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.55;
}

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

.prestige-relic-card {
    display: grid;
    gap: 16px;
    min-height: 280px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--class-b) 34%, transparent);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--class-b) 20%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 16%, transparent), rgba(0,0,0,.16)),
        var(--theme-panel, rgba(4,18,14,.78));
    box-shadow: 0 0 26px var(--class-glow), 0 20px 60px rgba(0,0,0,.25);
}

.prestige-relic-card > span {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 50%, transparent);
    border-radius: 24px;
    color: var(--class-b);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--class-b) 22%, transparent), transparent 62%),
        rgba(0,0,0,.18);
    font-size: 2rem;
    text-shadow: 0 0 18px var(--class-glow);
}

.prestige-relic-card small {
    color: var(--class-b);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.prestige-relic-card h3 {
    margin: 6px 0 9px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.prestige-relic-card p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .prestige-stat-grid,
    .prestige-rank-grid,
    .prestige-relic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .prestige-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 110px;
    }

    .prestige-stat-grid,
    .prestige-rank-grid,
    .prestige-relic-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.27.0 — achievement codex and achievement prestige
   ========================================================= */
.achievement-shell {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 132px 0 74px;
}

.achievement-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 68px);
    margin-bottom: 20px;
    background:
        radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--theme-accent) 26%, transparent), transparent 34%),
        radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--theme-primary) 24%, transparent), transparent 30%),
        var(--theme-panel, rgba(4,18,14,.78));
}

.achievement-hero h1 {
    max-width: 900px;
    margin: 8px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 7vw, 6.1rem);
    font-weight: 500;
    line-height: .95;
    text-shadow: 0 0 36px var(--theme-accent-soft), 0 14px 48px rgba(0,0,0,.55);
}

.achievement-hero p {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.achievement-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.achievement-stat-grid article {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius, 24px);
    background:
        radial-gradient(circle at 70% 0%, var(--theme-accent-soft), transparent 38%),
        rgba(255,255,255,.035);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.achievement-stat-grid strong,
.achievement-stat-grid span {
    display: block;
}

.achievement-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
}

.achievement-stat-grid span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.achievement-rarity-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 14px;
}

.achievement-rarity-tabs a {
    --rarity-a: var(--theme-primary);
    --rarity-b: var(--theme-accent);
    --rarity-glow: var(--theme-accent-soft);
    display: grid;
    gap: 3px;
    min-width: 165px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 28%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rarity-a) 12%, transparent), rgba(0,0,0,.13)),
        rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.achievement-rarity-tabs a:hover,
.achievement-rarity-tabs a.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--rarity-b) 58%, transparent);
    box-shadow: 0 0 24px var(--rarity-glow);
}

.achievement-rarity-tabs strong {
    color: var(--rarity-b);
}

.achievement-rarity-tabs small {
    color: var(--muted);
}

.achievement-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
    gap: 20px;
    align-items: start;
}

.achievement-codex-panel,
.achievement-leaderboard,
.achievement-recent {
    padding: 24px;
}

.achievement-side-panel {
    display: grid;
    gap: 20px;
}

.achievement-codex-grid {
    display: grid;
    gap: 14px;
}

.achievement-codex-card,
.achievement-recent-list a {
    --rarity-a: var(--theme-primary);
    --rarity-b: var(--theme-accent);
    --rarity-glow: var(--theme-accent-soft);
}

.rarity-common { --rarity-a: #6b7280; --rarity-b: #cbd5e1; --rarity-glow: rgba(203,213,225,.12); }
.rarity-rare { --rarity-a: #16a34a; --rarity-b: #86efac; --rarity-glow: rgba(74,222,128,.20); }
.rarity-epic { --rarity-a: #7c3aed; --rarity-b: #d8b4fe; --rarity-glow: rgba(168,85,247,.24); }
.rarity-legendary { --rarity-a: #b7791f; --rarity-b: #facc15; --rarity-glow: rgba(250,204,21,.28); }
.rarity-secret { --rarity-a: #dc2626; --rarity-b: #fb923c; --rarity-glow: rgba(251,146,60,.30); }

.achievement-codex-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 17px;
    overflow: hidden;
    min-height: 180px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 38%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--rarity-b) 18%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--rarity-a) 12%, transparent), rgba(0,0,0,.14)),
        rgba(255,255,255,.024);
    box-shadow: 0 18px 54px rgba(0,0,0,.25), 0 0 24px var(--rarity-glow);
}

.achievement-codex-card::after {
    content: "";
    position: absolute;
    inset: auto -12% -52% 36%;
    height: 150px;
    border-radius: 50%;
    background: var(--rarity-glow);
    filter: blur(44px);
    pointer-events: none;
}

.achievement-codex-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 54%, transparent);
    border-radius: 20px;
    color: var(--rarity-b);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--rarity-b) 18%, transparent), transparent 68%),
        rgba(0,0,0,.18);
    box-shadow: 0 0 28px var(--rarity-glow);
    font-size: 1.8rem;
}

.achievement-codex-card > div {
    position: relative;
    z-index: 1;
}

.achievement-codex-card small {
    color: var(--rarity-b);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.achievement-codex-card h3 {
    margin: 5px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.achievement-codex-card p {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.55;
}

.achievement-codex-card em {
    display: block;
    color: color-mix(in srgb, var(--parchment) 72%, transparent);
    font-size: .78rem;
    font-style: normal;
}

.achievement-codex-card footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.achievement-codex-card footer span {
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 24%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--parchment) 80%, transparent);
    background: rgba(0,0,0,.18);
    font-size: .68rem;
    font-weight: 800;
}

.achievement-leader-list,
.achievement-recent-list {
    display: grid;
    gap: 10px;
}

.achievement-leader-list a,
.achievement-recent-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid rgba(200,164,93,.16);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: inherit;
    text-decoration: none;
}

.achievement-leader-list a.is-podium {
    border-color: rgba(255,207,95,.42);
    background:
        radial-gradient(circle at 0% 0%, rgba(255,207,95,.12), transparent 38%),
        rgba(255,255,255,.03);
}

.achievement-leader-list a > span,
.achievement-recent-list a > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(200,164,93,.22);
    border-radius: 12px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-weight: 900;
}

.achievement-recent-list a > span {
    color: var(--rarity-b);
    border-color: color-mix(in srgb, var(--rarity-b) 36%, transparent);
    box-shadow: 0 0 16px var(--rarity-glow);
}

.achievement-leader-list strong,
.achievement-leader-list small,
.achievement-recent-list strong,
.achievement-recent-list small {
    display: block;
}

.achievement-leader-list strong,
.achievement-recent-list strong {
    color: var(--gold-light);
}

.achievement-leader-list small,
.achievement-recent-list small {
    color: var(--muted);
    margin-top: 2px;
}

.achievement-leader-list b {
    color: var(--gold-light);
    white-space: nowrap;
}

.achievement-recent-list time {
    color: color-mix(in srgb, var(--parchment) 64%, transparent);
    font-size: .72rem;
}

.achievement-score-pill,
.achievement-score-profile strong {
    color: #fb923c !important;
    text-shadow: 0 0 18px rgba(251,146,60,.28);
}

@media (max-width: 980px) {
    .achievement-stat-grid,
    .achievement-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .achievement-shell {
        width: min(100% - 20px, 1240px);
        padding-top: 110px;
    }

    .achievement-codex-card {
        grid-template-columns: 1fr;
    }

    .achievement-rarity-tabs a {
        min-width: 100%;
    }
}


/* =========================================================
   v0.30.0 — epic landing / home 2.0
   ========================================================= */
.page-home-v2 .site-footer {
    margin-top: 70px;
}

.home-v2-shell {
    position: relative;
    overflow: hidden;
}

.home-v2-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    gap: clamp(26px, 5vw, 72px);
    align-items: center;
    width: min(calc(100% - 48px), 1440px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 142px 0 70px;
}

.home-hero-runes {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.home-hero-runes i {
    position: absolute;
    width: clamp(180px, 24vw, 380px);
    height: clamp(180px, 24vw, 380px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 68%);
    box-shadow: 0 0 80px color-mix(in srgb, var(--theme-primary, #56d2bd) 10%, transparent);
    opacity: .5;
    animation: home-rune-float 10s ease-in-out infinite alternate;
}

.home-hero-runes i:nth-child(1) {
    top: 16%;
    left: -9%;
}

.home-hero-runes i:nth-child(2) {
    top: 8%;
    right: 18%;
    animation-delay: -4s;
    transform: scale(.72);
}

.home-hero-runes i:nth-child(3) {
    right: -12%;
    bottom: 8%;
    animation-delay: -7s;
    transform: scale(1.15);
}

@keyframes home-rune-float {
    from { transform: translateY(-12px) rotate(0deg) scale(.88); opacity: .34; }
    to { transform: translateY(18px) rotate(28deg) scale(1.04); opacity: .58; }
}

.home-hero-copy h1 {
    max-width: 980px;
    margin: 12px 0 20px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.4rem, 8vw, 8.2rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.05em;
    text-shadow:
        0 0 34px color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent),
        0 18px 58px rgba(0,0,0,.72);
}

.home-hero-copy h1 span {
    color: color-mix(in srgb, var(--theme-accent-light, #fff0aa) 86%, #ffffff 14%);
}

.home-hero-copy p {
    max-width: 780px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 74%, transparent);
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.75;
}

.home-hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin: 32px 0 22px;
}

.home-hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.home-hero-badges span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 999px;
    background: rgba(0,0,0,.2);
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: .72rem;
    font-weight: 800;
}

.home-arena-panel {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    padding: clamp(24px, 4vw, 38px);
    border-radius: var(--theme-radius, 28px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 17%, transparent), transparent 42%),
        radial-gradient(circle at 100% 70%, color-mix(in srgb, var(--theme-primary, #56d2bd) 13%, transparent), transparent 34%),
        var(--theme-panel, rgba(4,17,14,.86));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 34px 100px rgba(0,0,0,.42),
        0 0 54px color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent);
}

.home-arena-glow {
    position: absolute;
    inset: -30% -20% auto;
    height: 330px;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent), transparent 68%);
    filter: blur(30px);
    opacity: .72;
    pointer-events: none;
}

.home-arena-panel header,
.home-panel-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.home-arena-panel h2,
.home-panel-header h2 {
    margin: 7px 0 0;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.home-arena-panel h2 {
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    line-height: 1;
}

.home-tournament-meta {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0;
    padding: 12px 0;
    border-top: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
}

.home-tournament-meta span {
    color: var(--muted);
}

.home-tournament-meta strong {
    color: var(--theme-primary, #56d2bd);
}

.home-live-duel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 260px;
    margin: 18px 0;
    text-align: center;
}

.home-live-duel article {
    display: grid;
    justify-items: center;
    min-height: 250px;
    padding: 20px 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 11%, transparent), transparent 52%),
        rgba(0,0,0,.18);
}

.home-live-duel article > span {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 42%, transparent);
    border-radius: 24px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 68%),
        rgba(0,0,0,.2);
    box-shadow: 0 0 30px color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.home-live-duel article strong,
.home-live-duel article small,
.home-live-duel article b {
    display: block;
}

.home-live-duel article strong {
    min-height: 2.2em;
    margin-top: 14px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.15rem, 2.6vw, 2.05rem);
    font-weight: 500;
    line-height: 1.05;
}

.home-live-duel article small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-live-duel article b {
    margin-top: 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 500;
    line-height: .88;
    text-shadow: 0 0 36px color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
}

.home-live-duel > div {
    display: grid;
    gap: 7px;
    min-width: 90px;
    color: var(--muted);
}

.home-live-duel > div small,
.home-live-duel > div span {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-live-duel > div em {
    color: var(--theme-primary, #56d2bd);
    font-family: Georgia, serif;
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    font-style: italic;
    line-height: 1;
    text-shadow: 0 0 30px color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
}

.home-progress {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.home-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-progress strong {
    color: var(--gold-light);
}

.home-progress i,
.home-legend-split i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.home-progress b,
.home-legend-split i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--theme-accent, #d9b763));
    box-shadow: 0 0 22px color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
}

.home-next-match {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.16);
}

.home-next-match span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-next-match strong {
    color: var(--gold-light);
}

.home-arena-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.home-empty-arena {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 420px;
    place-items: center;
    align-content: center;
    gap: 12px;
    text-align: center;
}

.home-empty-arena span {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.16);
    font-size: 2.1rem;
    box-shadow: 0 0 38px color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
}

.home-empty-arena strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.home-empty-arena p {
    max-width: 360px;
    margin: 0;
    color: var(--muted);
}

.home-v2-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(calc(100% - 48px), 1440px);
    margin: -22px auto 56px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.42), color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, rgba(0,0,0,.34)), rgba(0,0,0,.42));
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
}

.home-v2-stats article {
    position: relative;
    padding: 24px 18px;
    text-align: center;
}

.home-v2-stats article + article::before {
    content: "";
    position: absolute;
    top: 23%;
    bottom: 23%;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent), transparent);
}

.home-v2-stats strong,
.home-v2-stats span {
    display: block;
}

.home-v2-stats strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.1vw, 3rem);
    font-weight: 500;
}

.home-v2-stats span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto 24px;
}

.home-v2-grid-wide {
    align-items: start;
}

.home-panel {
    overflow: hidden;
    min-height: 390px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.home-panel-header {
    margin-bottom: 18px;
}

.home-panel-header a {
    color: var(--theme-accent-light, #fff0aa);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.home-empty-line {
    display: grid;
    min-height: 180px;
    place-items: center;
    padding: 25px;
    color: var(--muted);
    text-align: center;
}

.home-top-list,
.home-achievement-feed,
.home-result-feed {
    display: grid;
    gap: 12px;
}

.home-top-list a {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 20px;
    background: rgba(0,0,0,.18);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-top-list a:hover,
.home-top-list a.is-king {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 44%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent);
}

.home-top-list a > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.home-top-list i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 32%, transparent);
    border-radius: 16px;
    color: var(--gold-light);
    background: rgba(0,0,0,.2);
    font-family: Georgia, serif;
    font-style: normal;
}

.home-top-list strong,
.home-top-list small {
    display: block;
}

.home-top-list strong {
    color: var(--gold-light);
}

.home-top-list small {
    margin-top: 2px;
    color: var(--muted);
}

.home-top-list b {
    color: var(--gold-light);
    white-space: nowrap;
}

.home-legend-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.home-legend-split section {
    display: grid;
    gap: 6px;
    min-height: 220px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent), transparent 42%),
        rgba(0,0,0,.18);
}

.home-legend-split span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-legend-split strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 500;
}

.home-legend-split small {
    color: var(--muted);
}

.home-legend-split i {
    align-self: end;
    margin-top: auto;
}

.home-achievement-feed a,
.home-result-feed a {
    --rarity-a: var(--theme-primary, #56d2bd);
    --rarity-b: var(--theme-accent, #d9b763);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 22%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--rarity-b) 10%, transparent), transparent 42%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
}

.home-achievement-feed .rarity-common { --rarity-a: #6b7280; --rarity-b: #cbd5e1; }
.home-achievement-feed .rarity-rare { --rarity-a: #16a34a; --rarity-b: #86efac; }
.home-achievement-feed .rarity-epic { --rarity-a: #7c3aed; --rarity-b: #d8b4fe; }
.home-achievement-feed .rarity-legendary { --rarity-a: #b7791f; --rarity-b: #facc15; }
.home-achievement-feed .rarity-secret { --rarity-a: #dc2626; --rarity-b: #fb923c; }

.home-achievement-feed a > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 38%, transparent);
    border-radius: 14px;
    color: var(--rarity-b);
    background: rgba(0,0,0,.2);
    box-shadow: 0 0 18px color-mix(in srgb, var(--rarity-b) 14%, transparent);
}

.home-achievement-feed strong,
.home-achievement-feed small,
.home-result-feed strong,
.home-result-feed small {
    display: block;
}

.home-achievement-feed strong,
.home-result-feed strong {
    color: var(--gold-light);
}

.home-achievement-feed small,
.home-result-feed small {
    margin-top: 2px;
    color: var(--muted);
}

.home-achievement-feed time {
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 62%, transparent);
    font-size: .72rem;
}

.home-result-feed a {
    grid-template-columns: auto 1fr;
}

.home-result-feed a > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-result-feed a small {
    grid-column: 2;
}

.home-showcase-section,
.home-champions-section {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
    padding: 72px 0 0;
}

.home-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-showcase-card {
    min-height: 310px;
    padding: 30px;
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-showcase-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 48%, transparent);
    box-shadow: 0 28px 90px rgba(0,0,0,.34), 0 0 34px color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
}

.home-showcase-card span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: 18px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 1.7rem;
}

.home-showcase-card h3 {
    margin: 26px 0 10px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.home-showcase-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

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

.home-champion-card {
    display: grid;
    gap: 14px;
    min-height: 230px;
    padding: 24px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--theme-radius, 24px);
}

.home-champion-card.is-legend {
    border-color: rgba(255, 177, 59, .52);
    box-shadow: 0 0 38px rgba(255, 111, 34, .18), 0 24px 80px rgba(0,0,0,.3);
}

.home-champion-card > span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    border-radius: 18px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 1.6rem;
}

.home-champion-card strong,
.home-champion-card small,
.home-champion-card em {
    display: block;
}

.home-champion-card strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.home-champion-card small {
    margin-top: 4px;
    color: var(--muted);
}

.home-champion-card em {
    align-self: end;
    color: var(--theme-primary, #56d2bd);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .home-v2-hero,
    .home-v2-grid {
        grid-template-columns: 1fr;
    }

    .home-arena-panel {
        min-height: 0;
    }

    .home-v2-stats,
    .home-showcase-grid,
    .home-champion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .home-v2-hero,
    .home-v2-stats,
    .home-v2-grid,
    .home-showcase-section,
    .home-champions-section {
        width: min(calc(100% - 20px), 1440px);
    }

    .home-v2-hero {
        padding-top: 112px;
    }

    .home-live-duel,
    .home-v2-stats,
    .home-legend-split,
    .home-showcase-grid,
    .home-champion-grid {
        grid-template-columns: 1fr;
    }

    .home-v2-stats article + article::before {
        display: none;
    }

    .home-achievement-feed a,
    .home-top-list a {
        grid-template-columns: auto 1fr;
    }

    .home-top-list b,
    .home-achievement-feed time {
        grid-column: 2;
    }

    .home-panel-header {
        display: grid;
    }
}


/* =========================================================
   v0.31.0 — player profile 3.0 / career card
   ========================================================= */
.profile-career-dashboard {
    margin-top: 52px;
}

.career-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 22px;
    align-items: stretch;
}

.career-dashboard-grid-lower {
    grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
    margin-top: 22px;
}

.career-chart-card,
.career-rivals-card,
.career-classes-card,
.career-recent-card {
    overflow: hidden;
    min-height: 360px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.career-chart-card header,
.career-rivals-card header,
.career-classes-card header,
.career-recent-card header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.career-chart-card h3,
.career-rivals-card h3,
.career-classes-card h3,
.career-recent-card h3 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 500;
}

.career-chart-card header strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.3rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: .9;
    text-shadow: 0 0 28px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
}

.career-elo-chart {
    display: block;
    width: 100%;
    height: 260px;
    overflow: visible;
    margin-top: 20px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12));
}

.career-chart-axis {
    fill: none;
    stroke: color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent);
    stroke-width: 1.5;
}

.career-chart-line {
    fill: none;
    stroke: url(#careerLineGradient);
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--theme-accent, #d9b763) 26%, transparent));
}

.career-chart-point {
    fill: var(--theme-accent, #d9b763);
    stroke: rgba(0,0,0,.45);
    stroke-width: 3;
}

.career-chart-point.is-down {
    fill: #ff9f9f;
}

.career-chart-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.career-chart-meta span {
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 74%, transparent);
    background: rgba(0,0,0,.16);
    font-size: .7rem;
    font-weight: 800;
}

.career-empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

.career-rival-list,
.career-recent-list,
.career-class-list {
    display: grid;
    gap: 10px;
}

.career-rival-list a,
.career-recent-list a,
.career-class-list article {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 44%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.career-rival-list a {
    grid-template-columns: auto 1fr auto;
}

.career-recent-list a {
    grid-template-columns: auto 1fr auto;
}

.career-class-list article {
    grid-template-columns: auto 1fr;
}

.career-rival-list a:hover,
.career-recent-list a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
}

.career-rival-list a > span,
.career-recent-list a > span,
.career-class-list article > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
    border-radius: 15px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-family: Georgia, serif;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
}

.career-recent-list a.is-loss > span {
    color: #ffb4aa;
    border-color: rgba(255, 120, 110, .28);
}

.career-recent-list a.is-win > span {
    color: #a8ffd0;
    border-color: rgba(90, 230, 150, .28);
}

.career-rival-list strong,
.career-rival-list small,
.career-recent-list strong,
.career-recent-list small,
.career-class-list strong,
.career-class-list small {
    display: block;
}

.career-rival-list strong,
.career-recent-list strong,
.career-class-list strong {
    color: var(--gold-light);
}

.career-rival-list small,
.career-recent-list small,
.career-class-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
}

.career-rival-list b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.career-rival-list b.is-positive {
    color: #a8ffd0;
}

.career-rival-list b.is-negative {
    color: #ffb4aa;
}

.career-recent-list time {
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 62%, transparent);
    font-size: .72rem;
    font-weight: 800;
}

.career-class-list i {
    display: block;
    overflow: hidden;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.career-class-list i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--class-a, var(--theme-primary)), var(--class-b, var(--theme-accent)));
    box-shadow: 0 0 18px var(--class-glow, var(--theme-accent-soft));
}

.profile-career-timeline-section {
    margin-top: 74px;
}

.career-timeline {
    position: relative;
    display: grid;
    gap: 14px;
    margin-left: 18px;
}

.career-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 23px;
    width: 1px;
    background: linear-gradient(transparent, color-mix(in srgb, var(--theme-accent, #d9b763) 36%, transparent), transparent);
}

.career-timeline-event {
    --rarity-a: var(--theme-primary, #56d2bd);
    --rarity-b: var(--theme-accent, #d9b763);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    min-height: 92px;
    margin-left: 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 22%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--rarity-b) 9%, transparent), transparent 44%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
}

.career-timeline-event.rarity-common { --rarity-a: #6b7280; --rarity-b: #cbd5e1; }
.career-timeline-event.rarity-rare { --rarity-a: #16a34a; --rarity-b: #86efac; }
.career-timeline-event.rarity-epic { --rarity-a: #7c3aed; --rarity-b: #d8b4fe; }
.career-timeline-event.rarity-legendary { --rarity-a: #b7791f; --rarity-b: #facc15; }
.career-timeline-event.rarity-secret { --rarity-a: #dc2626; --rarity-b: #fb923c; }

.career-timeline-event > span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--rarity-b) 42%, transparent);
    border-radius: 16px;
    color: var(--rarity-b);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--rarity-b) 18%, transparent), transparent 68%),
        rgba(0,0,0,.28);
    box-shadow: 0 0 24px color-mix(in srgb, var(--rarity-b) 16%, transparent);
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.career-timeline-event small,
.career-timeline-event strong,
.career-timeline-event p {
    display: block;
}

.career-timeline-event small {
    color: var(--rarity-b);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.career-timeline-event strong {
    margin-top: 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.18rem;
    font-weight: 500;
}

.career-timeline-event p {
    margin: 5px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 980px) {
    .career-dashboard-grid,
    .career-dashboard-grid-lower {
        grid-template-columns: 1fr;
    }

    .career-chart-card,
    .career-rivals-card,
    .career-classes-card,
    .career-recent-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .career-rival-list a,
    .career-recent-list a,
    .career-class-list article,
    .career-timeline-event {
        grid-template-columns: 1fr;
    }

    .career-timeline {
        margin-left: 0;
    }

    .career-timeline::before {
        display: none;
    }

    .career-recent-list time {
        justify-self: start;
    }
}


/* =========================================================
   v0.32.0 — Hall of Fame 3.0 / trophy room
   ========================================================= */
.hall-v3-shell {
    width: min(calc(100% - 48px), 1440px);
}

.hall-v3-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .42fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: stretch;
    overflow: hidden;
    min-height: 520px;
    padding: clamp(34px, 6vw, 72px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--theme-accent, #d9b763) 19%, transparent), transparent 34%),
        radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.28);
    box-shadow: 0 34px 110px rgba(0,0,0,.4);
    isolation: isolate;
}

.hall-v3-hero-bg {
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent) 50%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in srgb, var(--theme-accent, #d9b763) 4%, transparent) 70px 71px);
    transform: rotate(-8deg);
    opacity: .75;
}

.hall-v3-hero h1 {
    max-width: 900px;
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8.4rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.hall-v3-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.hall-v3-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hall-v3-throne {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 360px;
    padding: 28px;
    border-radius: var(--theme-radius, 26px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,177,59,.18), transparent 46%),
        radial-gradient(circle at 50% 100%, rgba(229,57,31,.13), transparent 45%),
        rgba(0,0,0,.24);
}

.hall-v3-throne > span {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(255,177,59,.5);
    border-radius: 34px;
    color: #ffcf73;
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px rgba(255,128,35,.26);
    font-family: Georgia, serif;
    font-size: 3rem;
    animation: hall-throne-glow 2.4s ease-in-out infinite alternate;
}

@keyframes hall-throne-glow {
    from { filter: brightness(.95); transform: translateY(0); }
    to { filter: brightness(1.2); transform: translateY(-4px); }
}

.hall-v3-throne small,
.hall-v3-throne strong,
.hall-v3-throne em,
.hall-v3-throne a {
    display: block;
}

.hall-v3-throne small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hall-v3-throne strong {
    margin-top: 7px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 500;
}

.hall-v3-throne em {
    margin-top: 5px;
    color: var(--muted);
    font-style: normal;
}

.hall-v3-throne a {
    margin-top: 18px;
    color: var(--theme-accent-light, #fff0aa);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hall-v3-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 70px;
}

.hall-v3-stat-grid article {
    padding: 22px 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 40%),
        rgba(0,0,0,.22);
    text-align: center;
}

.hall-v3-stat-grid strong,
.hall-v3-stat-grid span {
    display: block;
}

.hall-v3-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 3.1rem);
    font-weight: 500;
}

.hall-v3-stat-grid span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hall-v3-relic-room,
.hall-v3-section {
    margin-top: 76px;
}

.hall-v3-class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.hall-v3-class-vitrine {
    --class-a: var(--theme-primary, #56d2bd);
    --class-b: var(--theme-accent, #d9b763);
    --class-glow: var(--theme-accent-soft, rgba(217,183,99,.16));
    overflow: hidden;
    min-height: 520px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--class-b) 32%, transparent);
    border-radius: var(--theme-radius, 26px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 12%, transparent), rgba(0,0,0,.18)),
        var(--theme-panel, rgba(4,17,14,.78));
    box-shadow: 0 0 28px var(--class-glow), 0 24px 70px rgba(0,0,0,.26);
}

.hall-v3-class-vitrine header {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

.hall-v3-class-vitrine header > span {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 48%, transparent);
    border-radius: 28px;
    color: var(--class-b);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--class-b) 22%, transparent), transparent 68%),
        rgba(0,0,0,.22);
    box-shadow: 0 0 34px var(--class-glow);
    font-size: 2.4rem;
    text-shadow: 0 0 16px var(--class-glow);
}

.hall-v3-class-vitrine small {
    color: var(--class-b);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hall-v3-class-vitrine h3 {
    margin: 6px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.hall-v3-class-vitrine p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.hall-v3-class-leaders {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.hall-v3-class-leaders a {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--class-b) 18%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.17);
    color: inherit;
    text-decoration: none;
}

.hall-v3-class-leaders a.is-class-king {
    border-color: color-mix(in srgb, var(--class-b) 54%, transparent);
    box-shadow: 0 0 22px var(--class-glow);
}

.hall-v3-class-leaders b {
    color: var(--class-b);
    font-size: .7rem;
    letter-spacing: .08em;
}

.hall-v3-class-leaders a > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 30%, transparent);
    border-radius: 13px;
    color: var(--class-b);
    background: rgba(0,0,0,.2);
    font-family: Georgia, serif;
}

.hall-v3-class-leaders strong,
.hall-v3-class-leaders small {
    display: block;
}

.hall-v3-class-leaders strong {
    color: var(--gold-light);
}

.hall-v3-class-leaders small {
    margin-top: 2px;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
}

.hall-v3-empty {
    display: grid;
    min-height: 150px;
    place-items: center;
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.hall-v3-race-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.hall-v3-race-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    min-height: 150px;
    padding: 18px;
    border-radius: 22px;
    color: inherit;
    text-decoration: none;
}

.hall-v3-race-avatar {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--prestige-b, var(--theme-accent)) 36%, transparent);
    border-radius: 22px;
    color: var(--gold-light);
    background: rgba(0,0,0,.22);
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.hall-v3-race-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hall-v3-race-card small,
.hall-v3-race-card strong,
.hall-v3-race-card em {
    display: block;
}

.hall-v3-race-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hall-v3-race-card strong {
    margin-top: 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.28rem;
    font-weight: 500;
}

.hall-v3-race-card em {
    margin-top: 3px;
    color: var(--muted);
    font-size: .76rem;
    font-style: normal;
}

.hall-v3-race-card i {
    display: block;
    overflow: hidden;
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.hall-v3-race-card i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--prestige-a, var(--theme-primary)), var(--prestige-b, var(--theme-accent)));
    box-shadow: 0 0 18px var(--prestige-glow, var(--theme-accent-soft));
}

.hall-v3-master-grid .hall-player-card {
    min-height: 470px;
}

.hall-v3-award-timeline .award-entry {
    border-color: color-mix(in srgb, var(--class-b, var(--theme-accent)) 24%, transparent);
    background:
        radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--class-b, var(--theme-accent)) 10%, transparent), transparent 44%),
        rgba(0,0,0,.14);
}

@media (max-width: 1180px) {
    .hall-v3-hero,
    .hall-v3-class-grid,
    .hall-v3-race-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hall-v3-hero {
        grid-template-columns: 1fr;
    }

    .hall-v3-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .hall-v3-shell {
        width: min(calc(100% - 20px), 1440px);
    }

    .hall-v3-class-grid,
    .hall-v3-race-grid,
    .hall-v3-stat-grid {
        grid-template-columns: 1fr;
    }

    .hall-v3-class-leaders a,
    .hall-v3-race-card {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.33.0 — seasons 2.0 / season crowns
   ========================================================= */
.season-v2-shell {
    width: min(calc(100% - 48px), 1440px);
    padding-top: 135px;
}

.season-v2-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .42fr);
    gap: clamp(24px, 5vw, 60px);
    align-items: stretch;
    overflow: hidden;
    min-height: 500px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.24);
    box-shadow: 0 34px 110px rgba(0,0,0,.38);
}

.season-v2-crown {
    position: absolute;
    top: -62px;
    right: 34%;
    color: color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    font-family: Georgia, serif;
    font-size: clamp(9rem, 18vw, 20rem);
    line-height: .8;
    transform: rotate(-10deg);
    pointer-events: none;
}

.season-v2-hero h1 {
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.season-v2-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.season-v2-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.season-v2-meta span {
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    background: rgba(0,0,0,.18);
    font-size: .72rem;
    font-weight: 800;
}

.season-v2-champion {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 330px;
    padding: 28px;
    border: 1px solid rgba(255, 177, 59, .36);
    border-radius: var(--theme-radius, 26px);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 177, 59, .18), transparent 45%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 44%),
        rgba(0,0,0,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 42px rgba(255, 177, 59, .12);
    text-align: center;
}

.season-v2-champion > span {
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 177, 59, .48);
    border-radius: 32px;
    color: #ffcf73;
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px rgba(255, 128, 35, .25);
    font-size: 3rem;
    animation: season-crown-float 2.5s ease-in-out infinite alternate;
}

@keyframes season-crown-float {
    from { transform: translateY(0); filter: brightness(.95); }
    to { transform: translateY(-5px); filter: brightness(1.18); }
}

.season-v2-champion small,
.season-v2-champion strong,
.season-v2-champion em,
.season-v2-champion a {
    display: block;
}

.season-v2-champion small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.season-v2-champion strong {
    margin-top: 7px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 500;
}

.season-v2-champion em {
    margin-top: 5px;
    color: var(--muted);
    font-style: normal;
}

.season-v2-champion a {
    margin-top: 18px;
    color: var(--theme-accent-light, #fff0aa);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.season-v2-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0 28px;
    padding: 14px;
    border-radius: 24px;
}

.season-v2-tabs a {
    display: grid;
    gap: 3px;
    min-width: 210px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.season-v2-tabs a:hover,
.season-v2-tabs a.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 48%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent);
}

.season-v2-tabs strong {
    color: var(--gold-light);
}

.season-v2-tabs small {
    color: var(--muted);
    line-height: 1.35;
}

.season-v2-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 70px;
}

.season-v2-stat-grid article {
    padding: 22px 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 40%),
        rgba(0,0,0,.2);
    text-align: center;
}

.season-v2-stat-grid strong,
.season-v2-stat-grid span {
    display: block;
}

.season-v2-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
}

.season-v2-stat-grid span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.season-v2-section {
    margin-top: 72px;
}

.season-v2-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.season-v2-podium-card {
    position: relative;
    display: grid;
    justify-items: center;
    min-height: 390px;
    padding: 26px;
    overflow: hidden;
    border-radius: var(--theme-radius, 26px);
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.season-v2-podium-card.podium-1 {
    transform: translateY(-16px);
    border-color: rgba(255, 207, 95, .56);
    box-shadow: 0 0 42px rgba(255, 207, 95, .18), 0 28px 90px rgba(0,0,0,.32);
}

.season-podium-medal {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 44%, transparent);
    border-radius: 26px;
    color: var(--gold-light);
    background: rgba(0,0,0,.22);
    font-size: 2.25rem;
    box-shadow: 0 0 32px color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
}

.season-podium-avatar {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    margin: 22px 0 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 32%, transparent);
    border-radius: 30px;
    color: var(--gold-light);
    background: rgba(0,0,0,.22);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.season-podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.season-v2-podium-card small,
.season-v2-podium-card strong,
.season-v2-podium-card em {
    display: block;
}

.season-v2-podium-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.season-v2-podium-card strong {
    margin-top: 5px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.65rem;
    font-weight: 500;
}

.season-v2-podium-card em {
    margin-top: 6px;
    color: var(--theme-accent-light, #fff0aa);
    font-style: normal;
    font-weight: 900;
}

.season-v2-podium-card footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 18px;
}

.season-v2-podium-card footer span {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(0,0,0,.16);
    font-size: .72rem;
    font-weight: 800;
}

.season-v2-podium-card footer .is-positive,
.season-v2-ranking-list .is-positive {
    color: #9dffc5;
}

.season-v2-podium-card footer .is-negative,
.season-v2-ranking-list .is-negative {
    color: #ffb4aa;
}

.season-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 22px;
    margin-top: 76px;
    align-items: start;
}

.season-v2-side {
    display: grid;
    gap: 22px;
}

.season-v2-panel {
    overflow: hidden;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.season-v2-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.season-v2-panel-header h2 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.season-v2-ranking-list,
.season-v2-medal-list,
.season-v2-achievement-feed {
    display: grid;
    gap: 10px;
}

.season-v2-ranking-list a,
.season-v2-medal-list a,
.season-v2-achievement-feed a {
    display: grid;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 44%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
}

.season-v2-ranking-list a {
    grid-template-columns: auto auto 1fr auto auto;
}

.season-v2-ranking-list a.is-podium {
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
}

.season-v2-ranking-list a > span,
.season-v2-ranking-list i,
.season-v2-medal-list span,
.season-v2-achievement-feed > a > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 26%, transparent);
    border-radius: 14px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-style: normal;
}

.season-v2-ranking-list strong,
.season-v2-ranking-list small {
    display: block;
}

.season-v2-ranking-list strong,
.season-v2-medal-list strong,
.season-v2-achievement-feed strong {
    color: var(--gold-light);
}

.season-v2-ranking-list small,
.season-v2-achievement-feed small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .76rem;
}

.season-v2-ranking-list b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.season-v2-ranking-list em {
    font-style: normal;
    font-weight: 900;
}

.season-v2-medal-list a {
    grid-template-columns: auto 1fr auto;
}

.season-v2-medal-list b {
    color: var(--theme-accent-light, #fff0aa);
}

.season-v2-achievement-feed a {
    --rarity-a: var(--theme-primary, #56d2bd);
    --rarity-b: var(--theme-accent, #d9b763);
    grid-template-columns: auto 1fr;
    border-color: color-mix(in srgb, var(--rarity-b) 24%, transparent);
}

.season-v2-achievement-feed .rarity-common { --rarity-a: #6b7280; --rarity-b: #cbd5e1; }
.season-v2-achievement-feed .rarity-rare { --rarity-a: #16a34a; --rarity-b: #86efac; }
.season-v2-achievement-feed .rarity-epic { --rarity-a: #7c3aed; --rarity-b: #d8b4fe; }
.season-v2-achievement-feed .rarity-legendary { --rarity-a: #b7791f; --rarity-b: #facc15; }
.season-v2-achievement-feed .rarity-secret { --rarity-a: #dc2626; --rarity-b: #fb923c; }

.season-v2-achievement-feed > a > span {
    color: var(--rarity-b);
    border-color: color-mix(in srgb, var(--rarity-b) 34%, transparent);
}

.season-v2-class-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.season-v2-class-card {
    --class-a: var(--theme-primary, #56d2bd);
    --class-b: var(--theme-accent, #d9b763);
    --class-glow: var(--theme-accent-soft, rgba(217,183,99,.16));
    display: grid;
    gap: 10px;
    min-height: 260px;
    padding: 24px;
    border-radius: var(--theme-radius, 24px);
    border-color: color-mix(in srgb, var(--class-b) 28%, transparent);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 40%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 12%, transparent), rgba(0,0,0,.16)),
        var(--theme-panel, rgba(4,17,14,.78));
    box-shadow: 0 0 26px var(--class-glow), 0 20px 60px rgba(0,0,0,.24);
}

.season-v2-class-card > span {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 46%, transparent);
    border-radius: 22px;
    color: var(--class-b);
    background: rgba(0,0,0,.2);
    font-size: 1.8rem;
    box-shadow: 0 0 26px var(--class-glow);
}

.season-v2-class-card small {
    color: var(--class-b);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.season-v2-class-card strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.season-v2-class-card em {
    color: var(--muted);
    font-style: normal;
}

.season-v2-class-card a {
    align-self: end;
    color: var(--theme-accent-light, #fff0aa);
    font-size: .74rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.season-v2-tournament-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.season-v2-tournament-card {
    display: grid;
    gap: 8px;
    min-height: 220px;
    padding: 22px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--theme-radius, 22px);
}

.season-v2-tournament-card > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.season-v2-tournament-card strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.28rem;
    font-weight: 500;
}

.season-v2-tournament-card small,
.season-v2-tournament-card em {
    color: var(--muted);
    font-style: normal;
}

.season-v2-tournament-card em {
    align-self: end;
}

@media (max-width: 1180px) {
    .season-v2-hero,
    .season-v2-grid,
    .season-v2-podium-grid,
    .season-v2-class-grid,
    .season-v2-tournament-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-v2-hero,
    .season-v2-grid {
        grid-template-columns: 1fr;
    }

    .season-v2-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .season-v2-shell {
        width: min(calc(100% - 20px), 1440px);
        padding-top: 112px;
    }

    .season-v2-podium-card.podium-1 {
        transform: none;
    }

    .season-v2-stat-grid,
    .season-v2-podium-grid,
    .season-v2-class-grid,
    .season-v2-tournament-grid {
        grid-template-columns: 1fr;
    }

    .season-v2-ranking-list a {
        grid-template-columns: auto 1fr;
    }

    .season-v2-ranking-list b,
    .season-v2-ranking-list em {
        grid-column: 2;
    }
}


/* =========================================================
   v0.36.0 — public match preview card
   ========================================================= */
.match-preview-shell {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
    padding: 135px 0 80px;
}

.match-preview-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .38fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: end;
    min-height: 420px;
    margin-bottom: 22px;
    isolation: isolate;
}

.match-preview-runes {
    position: absolute;
    inset: -70px -80px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.match-preview-runes i {
    position: absolute;
    width: clamp(180px, 22vw, 360px);
    height: clamp(180px, 22vw, 360px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 68%);
    box-shadow: 0 0 80px color-mix(in srgb, var(--theme-primary, #56d2bd) 10%, transparent);
    opacity: .5;
    animation: match-rune-drift 10s ease-in-out infinite alternate;
}

.match-preview-runes i:nth-child(1) { top: 22%; left: -10%; }
.match-preview-runes i:nth-child(2) { right: 18%; top: 6%; transform: scale(.7); animation-delay: -4s; }
.match-preview-runes i:nth-child(3) { right: -12%; bottom: -4%; transform: scale(1.12); animation-delay: -7s; }

@keyframes match-rune-drift {
    from { transform: translateY(-10px) rotate(0deg) scale(.9); opacity: .34; }
    to { transform: translateY(18px) rotate(26deg) scale(1.04); opacity: .58; }
}

.match-preview-heading h1 {
    max-width: 900px;
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8.2rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.match-preview-heading p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.match-preview-selector {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
}

.match-preview-selector label,
.match-preview-selector span {
    display: grid;
    gap: 6px;
}

.match-preview-selector span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.match-preview-selector select {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 14px;
    color: var(--parchment, #e9dfc0);
    background: rgba(0,0,0,.22);
    padding: 0 12px;
}

.match-preview-empty {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 48px;
    text-align: center;
}

.match-preview-empty span {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 36%, transparent);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 2.2rem;
}

.match-preview-empty h2 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.match-preview-empty p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
}

.match-preview-arena {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent), transparent 42%),
        radial-gradient(circle at 100% 70%, color-mix(in srgb, var(--theme-primary, #56d2bd) 13%, transparent), transparent 34%),
        var(--theme-panel, rgba(4,17,14,.86));
    box-shadow: 0 36px 110px rgba(0,0,0,.42), 0 0 54px color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent);
}

.match-preview-arena-glow {
    position: absolute;
    inset: -30% -20% auto;
    height: 340px;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent), transparent 68%);
    filter: blur(32px);
    opacity: .72;
    pointer-events: none;
}

.match-preview-context {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 26px;
}

.match-preview-context h2 {
    margin: 7px 0 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.8vw, 3.8rem);
    font-weight: 500;
    line-height: 1;
}

.match-preview-context p {
    margin: 0;
    color: var(--muted);
}

.match-preview-context aside {
    display: grid;
    min-width: 110px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    text-align: center;
}

.match-preview-context aside strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
}

.match-preview-context aside span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.match-preview-duel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.match-preview-fighter {
    --class-a: var(--theme-primary, #56d2bd);
    --class-b: var(--theme-accent, #d9b763);
    --class-glow: var(--theme-accent-soft, rgba(217,183,99,.16));
    position: relative;
    display: grid;
    justify-items: center;
    overflow: hidden;
    min-height: 560px;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid color-mix(in srgb, var(--class-b) 32%, transparent);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 12%, transparent), rgba(0,0,0,.18)),
        rgba(0,0,0,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 32px var(--class-glow);
    text-align: center;
}

.fighter-aura {
    position: absolute;
    inset: auto -25% -32%;
    height: 240px;
    border-radius: 50%;
    background: var(--class-glow);
    filter: blur(45px);
    opacity: .9;
    pointer-events: none;
}

.fighter-avatar {
    display: grid;
    width: clamp(110px, 12vw, 170px);
    height: clamp(110px, 12vw, 170px);
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--class-b) 50%, transparent);
    border-radius: 38px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 68%),
        rgba(0,0,0,.24);
    box-shadow: 0 0 42px var(--class-glow);
    font-family: Georgia, serif;
    font-size: 3rem;
}

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

.match-preview-fighter small,
.match-preview-fighter h3,
.match-preview-fighter a {
    display: block;
}

.match-preview-fighter > small {
    margin-top: 18px;
    color: var(--class-b);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.match-preview-fighter h3 {
    margin: 8px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: .95;
}

.match-preview-rank {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 22px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--rank-b, var(--theme-accent)) 36%, transparent);
    border-radius: 999px;
    color: var(--rank-b, var(--theme-accent));
    background: color-mix(in srgb, var(--rank-a, var(--theme-primary)) 12%, transparent);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fighter-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: auto;
}

.fighter-stats span {
    display: grid;
    gap: 2px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--class-b) 18%, transparent);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(0,0,0,.18);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fighter-stats b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.match-preview-fighter a {
    margin-top: 18px;
    color: var(--theme-accent-light, #fff0aa);
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.match-preview-vs {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-width: 150px;
    color: var(--muted);
    text-align: center;
}

.match-preview-vs span,
.match-preview-vs small {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.match-preview-vs strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 500;
    line-height: .9;
    text-shadow: 0 0 36px color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
}

.match-preview-vs em {
    color: var(--theme-primary, #56d2bd);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    font-style: italic;
    line-height: 1;
    text-shadow: 0 0 30px color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
}

.match-preview-story-grid,
.match-preview-detail-grid,
.match-preview-bottom-grid {
    display: grid;
    gap: 20px;
    margin-top: 22px;
}

.match-preview-story-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.match-story-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    min-height: 150px;
    padding: 18px;
    border-radius: 22px;
}

.match-story-card > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
    border-radius: 16px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 1.35rem;
}

.match-story-card h3 {
    margin: 0 0 6px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 500;
}

.match-story-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.match-preview-detail-grid,
.match-preview-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.match-preview-panel {
    overflow: hidden;
    min-height: 360px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.match-preview-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.match-preview-panel-header h2 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.match-preview-mini-empty {
    display: grid;
    min-height: 130px;
    place-items: center;
    padding: 18px;
    color: var(--muted);
    text-align: center;
}

.match-h2h-score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background: rgba(0,0,0,.18);
    text-align: center;
}

.match-h2h-score span {
    color: var(--muted);
}

.match-h2h-score strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 500;
}

.match-h2h-note {
    color: var(--muted);
    line-height: 1.55;
}

.match-preview-trophy-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.match-preview-trophy-comparison section {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.14);
}

.match-preview-trophy-comparison strong,
.match-preview-trophy-comparison span,
.match-preview-trophy-comparison em {
    display: block;
}

.match-preview-trophy-comparison strong {
    color: var(--gold-light);
}

.match-preview-trophy-comparison span,
.match-preview-trophy-comparison em {
    margin-top: 7px;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
}

.match-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.match-form-columns h3 {
    margin: 0 0 10px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.match-form-columns section > article,
.match-ready-list a,
.match-ready-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.15);
    color: inherit;
    text-decoration: none;
}

.match-form-columns article > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 13px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-weight: 900;
}

.match-form-columns article.is-win > span {
    color: #a8ffd0;
    border-color: rgba(90, 230, 150, .28);
}

.match-form-columns article.is-loss > span {
    color: #ffb4aa;
    border-color: rgba(255, 120, 110, .28);
}

.match-form-columns strong,
.match-form-columns small,
.match-ready-list strong,
.match-ready-list span {
    display: block;
}

.match-form-columns strong,
.match-ready-list strong {
    color: var(--gold-light);
}

.match-form-columns small {
    color: var(--muted);
}

.match-ready-list {
    display: grid;
    gap: 10px;
}

.match-ready-list span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.match-result-list article {
    grid-template-columns: 1fr;
}

@media (max-width: 1180px) {
    .match-preview-hero,
    .match-preview-duel,
    .match-preview-detail-grid,
    .match-preview-bottom-grid {
        grid-template-columns: 1fr;
    }

    .match-preview-story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .match-preview-vs {
        order: -1;
    }

    .match-preview-fighter {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .match-preview-shell {
        width: min(calc(100% - 20px), 1440px);
        padding-top: 112px;
    }

    .match-preview-story-grid,
    .match-preview-trophy-comparison,
    .match-form-columns,
    .fighter-stats,
    .match-h2h-score {
        grid-template-columns: 1fr;
    }

    .match-story-card {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.37.0 — public tournament schedule
   ========================================================= */
.schedule-shell {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
    padding: 135px 0 80px;
}

.schedule-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .38fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: end;
    overflow: hidden;
    min-height: 430px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.24);
    box-shadow: 0 34px 110px rgba(0,0,0,.38);
}

.schedule-hero-bg {
    position: absolute;
    inset: -30%;
    background:
        linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent) 50%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in srgb, var(--theme-accent, #d9b763) 4%, transparent) 70px 71px);
    transform: rotate(-8deg);
    opacity: .75;
    pointer-events: none;
}

.schedule-hero > div:not(.schedule-hero-bg),
.schedule-selector {
    position: relative;
    z-index: 1;
}

.schedule-hero h1 {
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.schedule-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.schedule-selector {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
}

.schedule-selector label,
.schedule-selector span {
    display: grid;
    gap: 6px;
}

.schedule-selector span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.schedule-selector select {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 14px;
    color: var(--parchment, #e9dfc0);
    background: rgba(0,0,0,.22);
    padding: 0 12px;
}

.schedule-empty {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 12px;
    margin-top: 22px;
    padding: 48px;
    text-align: center;
}

.schedule-empty span {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 36%, transparent);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 2.2rem;
}

.schedule-empty h2 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.schedule-empty p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
}

.schedule-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.schedule-summary-grid article {
    padding: 22px 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 40%),
        rgba(0,0,0,.2);
    text-align: center;
}

.schedule-summary-grid strong,
.schedule-summary-grid span {
    display: block;
}

.schedule-summary-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
}

.schedule-summary-grid span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.schedule-live-card {
    overflow: hidden;
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--theme-radius, 30px);
}

.schedule-live-card header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.schedule-live-card h2 {
    margin: 7px 0 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: 1;
}

.schedule-live-card p {
    margin: 0;
    color: var(--muted);
}

.schedule-progress {
    display: grid;
    gap: 8px;
    min-width: 190px;
    text-align: right;
}

.schedule-progress strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2.3rem;
    font-weight: 500;
}

.schedule-progress i,
.schedule-round-card aside i {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.schedule-progress b,
.schedule-round-card aside b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--theme-accent, #d9b763));
    box-shadow: 0 0 18px color-mix(in srgb, var(--theme-accent, #d9b763) 30%, transparent);
}

.schedule-no-live {
    display: grid;
    min-height: 260px;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 24px;
    background: rgba(0,0,0,.14);
    text-align: center;
}

.schedule-no-live span {
    color: var(--theme-primary, #56d2bd);
    font-size: 2.4rem;
}

.schedule-no-live strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.schedule-no-live small {
    color: var(--muted);
}

.schedule-live-duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.schedule-live-duel article {
    display: grid;
    justify-items: center;
    min-height: 280px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 10%, transparent), transparent 46%),
        rgba(0,0,0,.16);
    text-align: center;
}

.schedule-live-duel article > span {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: 24px;
    color: var(--gold-light);
    background: rgba(0,0,0,.2);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.schedule-live-duel strong,
.schedule-live-duel small,
.schedule-live-duel b {
    display: block;
}

.schedule-live-duel article strong {
    margin-top: 14px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.25rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1;
}

.schedule-live-duel article small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.schedule-live-duel article b {
    margin-top: 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 500;
}

.schedule-live-duel > div {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 120px;
    text-align: center;
}

.schedule-live-duel > div small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.schedule-live-duel > div em {
    color: var(--theme-primary, #56d2bd);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-style: italic;
    line-height: 1;
}

.schedule-live-duel > div a {
    color: var(--theme-accent-light, #fff0aa);
    font-size: .72rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.schedule-quick-grid,
.schedule-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 22px;
}

.schedule-panel {
    overflow: hidden;
    min-height: 360px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.schedule-panel-header,
.schedule-round-card header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.schedule-panel-header h2,
.schedule-round-card h3 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.schedule-chip {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(0,0,0,.16);
    font-weight: 900;
}

.schedule-mini-empty {
    display: grid;
    min-height: 140px;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.schedule-next-list,
.schedule-result-list,
.schedule-match-list,
.schedule-round-list {
    display: grid;
    gap: 10px;
}

.schedule-next-list a,
.schedule-result-list a,
.schedule-match-row,
.schedule-result-list article {
    display: grid;
    gap: 10px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 44%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.schedule-next-list a:hover,
.schedule-result-list a:hover,
.schedule-match-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
}

.schedule-next-list span,
.schedule-result-list span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.schedule-next-list strong,
.schedule-result-list strong {
    color: var(--gold-light);
}

.schedule-next-list small,
.schedule-result-list small {
    color: var(--muted);
}

.schedule-rounds-section,
.schedule-participants-section {
    margin-top: 72px;
}

.schedule-round-card {
    overflow: hidden;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--theme-radius, 26px);
}

.schedule-round-card aside {
    display: grid;
    gap: 8px;
    min-width: 160px;
    text-align: right;
}

.schedule-round-card aside strong {
    color: var(--gold-light);
}

.schedule-match-row {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.schedule-match-row.status-live {
    border-color: color-mix(in srgb, var(--theme-primary, #56d2bd) 48%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent);
}

.schedule-match-row.status-ready {
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
}

.schedule-match-status {
    min-width: 86px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent);
    border-radius: 999px;
    color: var(--theme-primary, #56d2bd);
    background: rgba(0,0,0,.16);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.schedule-match-side b,
.schedule-match-side small {
    display: block;
}

.schedule-match-side b {
    color: var(--gold-light);
}

.schedule-match-side small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .74rem;
}

.schedule-match-row > strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.schedule-match-row > em {
    color: var(--theme-accent-light, #fff0aa);
    font-style: normal;
    font-weight: 900;
}

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

.schedule-participant-card {
    --class-a: var(--theme-primary, #56d2bd);
    --class-b: var(--theme-accent, #d9b763);
    --class-glow: var(--theme-accent-soft, rgba(217,183,99,.16));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--class-b) 24%, transparent);
    color: inherit;
    text-decoration: none;
}

.schedule-participant-card > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 36%, transparent);
    border-radius: 15px;
    color: var(--class-b);
    background: rgba(0,0,0,.18);
    box-shadow: 0 0 20px var(--class-glow);
}

.schedule-participant-card strong,
.schedule-participant-card small {
    display: block;
}

.schedule-participant-card strong {
    color: var(--gold-light);
}

.schedule-participant-card small {
    color: var(--muted);
    font-size: .74rem;
}

.schedule-participant-card b {
    color: var(--theme-accent-light, #fff0aa);
}

@media (max-width: 1180px) {
    .schedule-hero,
    .schedule-live-duel,
    .schedule-quick-grid {
        grid-template-columns: 1fr;
    }

    .schedule-summary-grid,
    .schedule-participant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .schedule-live-duel > div {
        order: -1;
    }
}

@media (max-width: 760px) {
    .schedule-shell {
        width: min(calc(100% - 20px), 1440px);
        padding-top: 112px;
    }

    .schedule-summary-grid,
    .schedule-participant-grid,
    .schedule-match-row,
    .schedule-live-card header,
    .schedule-round-card header {
        grid-template-columns: 1fr;
    }

    .schedule-live-card header,
    .schedule-round-card header {
        display: grid;
    }

    .schedule-progress,
    .schedule-round-card aside {
        min-width: 0;
        text-align: left;
    }

    .schedule-match-status {
        justify-self: start;
    }
}


/* =========================================================
   v0.38.0 — form ranking / Heat Index
   ========================================================= */
.form-ranking-shell {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
    padding: 135px 0 80px;
}

.form-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .42fr);
    gap: clamp(24px, 5vw, 60px);
    align-items: stretch;
    overflow: hidden;
    min-height: 520px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 80% 10%, rgba(255, 96, 42, .18), transparent 34%),
        radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.24);
    box-shadow: 0 34px 110px rgba(0,0,0,.38);
}

.form-hero-bg {
    position: absolute;
    inset: -30%;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255, 124, 55, .08) 50%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in srgb, var(--theme-accent, #d9b763) 4%, transparent) 70px 71px);
    transform: rotate(-8deg);
    opacity: .75;
    pointer-events: none;
}

.form-hero > div:not(.form-hero-bg),
.form-heat-throne {
    position: relative;
    z-index: 1;
}

.form-hero h1 {
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px rgba(255, 112, 42, .22), 0 18px 70px rgba(0,0,0,.62);
}

.form-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.form-hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.form-heat-throne {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 340px;
    padding: 28px;
    border: 1px solid rgba(255, 155, 68, .36);
    border-radius: var(--theme-radius, 26px);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 112, 42, .20), transparent 45%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 44%),
        rgba(0,0,0,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 42px rgba(255, 112, 42, .14);
    text-align: center;
}

.form-heat-throne > span {
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 160, 72, .48);
    border-radius: 32px;
    color: #ffcf73;
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px rgba(255, 128, 35, .25);
    font-size: 3rem;
    animation: form-fire-pulse 1.9s ease-in-out infinite alternate;
}

@keyframes form-fire-pulse {
    from { transform: translateY(0) scale(.98); filter: brightness(.95); }
    to { transform: translateY(-5px) scale(1.04); filter: brightness(1.2); }
}

.form-heat-throne small,
.form-heat-throne strong,
.form-heat-throne em,
.form-heat-throne a {
    display: block;
}

.form-heat-throne small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-heat-throne strong {
    margin-top: 7px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 500;
}

.form-heat-throne em {
    margin-top: 5px;
    color: var(--muted);
    font-style: normal;
}

.form-heat-throne a {
    margin-top: 18px;
    color: var(--theme-accent-light, #fff0aa);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.form-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 70px;
}

.form-stat-grid article {
    padding: 22px 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 40%),
        rgba(0,0,0,.2);
    text-align: center;
}

.form-stat-grid strong,
.form-stat-grid span {
    display: block;
}

.form-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.35rem, 2.6vw, 2.5rem);
    font-weight: 500;
}

.form-stat-grid span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.form-section {
    margin-top: 72px;
}

.form-heat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.form-heat-card {
    position: relative;
    display: grid;
    overflow: hidden;
    min-height: 490px;
    padding: 24px;
    border-radius: var(--theme-radius, 26px);
    color: inherit;
    text-decoration: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 126, 44, .12), transparent 42%),
        var(--theme-panel, rgba(4,17,14,.78));
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.form-heat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 177, 59, .44);
    box-shadow: 0 28px 90px rgba(0,0,0,.34), 0 0 34px rgba(255, 126, 44, .14);
}

.form-heat-card.heat-rank-1 {
    border-color: rgba(255, 207, 95, .58);
    box-shadow: 0 0 42px rgba(255, 126, 44, .18), 0 30px 90px rgba(0,0,0,.32);
}

.form-heat-card.is-legend {
    border-color: rgba(255, 122, 51, .52);
}

.form-heat-rank {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    padding: 6px 10px;
    border: 1px solid rgba(255, 207, 95, .28);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(0,0,0,.25);
    font-size: .72rem;
    font-weight: 900;
}

.form-heat-avatar {
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid rgba(255, 177, 59, .4);
    border-radius: 32px;
    color: var(--gold-light);
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 30px rgba(255, 126, 44, .18);
    font-family: Georgia, serif;
    font-size: 2.4rem;
}

.form-heat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-heat-main {
    margin: 18px 0;
    text-align: center;
}

.form-heat-main small,
.form-heat-main strong,
.form-heat-main em {
    display: block;
}

.form-heat-main small {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.form-heat-main strong {
    margin-top: 6px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1;
}

.form-heat-main em {
    margin-top: 7px;
    color: #ffcf73;
    font-style: normal;
    font-weight: 900;
}

.form-heat-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}

.form-heat-stats span {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid rgba(200,164,93,.14);
    border-radius: 15px;
    background: rgba(0,0,0,.16);
    color: var(--muted);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.form-heat-stats b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.form-sparkline {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 46px;
    margin-top: 14px;
    padding: 7px;
    border: 1px solid rgba(200,164,93,.12);
    border-radius: 14px;
    background: rgba(0,0,0,.14);
}

.form-sparkline i {
    flex: 1;
    min-width: 4px;
    border-radius: 999px;
    background: #a8ffd0;
    box-shadow: 0 0 10px rgba(90, 230, 150, .25);
}

.form-sparkline i.is-down {
    background: #ff9f9f;
    box-shadow: 0 0 10px rgba(255, 120, 110, .22);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.form-panel {
    overflow: hidden;
    min-height: 390px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--theme-radius, 26px);
}

.form-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.form-panel-header h2 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.form-empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.form-list {
    display: grid;
    gap: 10px;
}

.form-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #56d2bd) 8%, transparent), transparent 44%),
        rgba(0,0,0,.16);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.form-list a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
}

.form-list a > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 26%, transparent);
    border-radius: 14px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-weight: 900;
}

.form-list strong,
.form-list small {
    display: block;
}

.form-list strong {
    color: var(--gold-light);
}

.form-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .76rem;
}

.form-list b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.form-list .is-positive {
    color: #a8ffd0;
}

.form-list .is-negative {
    color: #ffb4aa;
}

.form-risers-list a > span {
    color: #a8ffd0;
    border-color: rgba(90, 230, 150, .28);
}

.form-danger-list a > span {
    color: #ffb4aa;
    border-color: rgba(255, 120, 110, .28);
}

.form-wins-list a > span {
    color: #a8ffd0;
}

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

.form-class-card {
    --class-a: var(--theme-primary, #56d2bd);
    --class-b: var(--theme-accent, #d9b763);
    --class-glow: var(--theme-accent-soft, rgba(217,183,99,.16));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    min-height: 190px;
    padding: 22px;
    border-radius: var(--theme-radius, 24px);
    border-color: color-mix(in srgb, var(--class-b) 28%, transparent);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--class-b) 18%, transparent), transparent 40%),
        linear-gradient(145deg, color-mix(in srgb, var(--class-a) 12%, transparent), rgba(0,0,0,.16)),
        var(--theme-panel, rgba(4,17,14,.78));
    box-shadow: 0 0 26px var(--class-glow), 0 20px 60px rgba(0,0,0,.24);
}

.form-class-card > span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--class-b) 46%, transparent);
    border-radius: 20px;
    color: var(--class-b);
    background: rgba(0,0,0,.2);
    font-size: 1.75rem;
    box-shadow: 0 0 26px var(--class-glow);
}

.form-class-card small,
.form-class-card strong,
.form-class-card em {
    display: block;
}

.form-class-card small {
    color: var(--class-b);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-class-card strong {
    margin-top: 5px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.form-class-card em {
    margin-top: 5px;
    color: var(--muted);
    font-style: normal;
}

.form-class-card i {
    display: block;
    overflow: hidden;
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.form-class-card i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--class-a), var(--class-b));
    box-shadow: 0 0 18px var(--class-glow);
}

@media (max-width: 1180px) {
    .form-hero,
    .form-heat-grid,
    .form-grid,
    .form-class-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .form-ranking-shell {
        width: min(calc(100% - 20px), 1440px);
        padding-top: 112px;
    }

    .form-stat-grid,
    .form-heat-grid,
    .form-grid,
    .form-class-grid,
    .form-class-card {
        grid-template-columns: 1fr;
    }

    .form-list a {
        grid-template-columns: auto 1fr;
    }

    .form-list b {
        grid-column: 2;
    }
}


/* =========================================================
   v0.42.0 — public tournament rules
   ========================================================= */
.rules-shell {
    width: min(calc(100% - 48px), 1380px);
    margin: 0 auto;
    padding: 135px 0 80px;
}

.rules-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .38fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: stretch;
    overflow: hidden;
    min-height: 480px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.24);
    box-shadow: 0 34px 110px rgba(0,0,0,.38);
}

.rules-hero-bg {
    position: absolute;
    inset: -30%;
    background:
        linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent) 50%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in srgb, var(--theme-accent, #d9b763) 4%, transparent) 70px 71px);
    transform: rotate(-8deg);
    opacity: .75;
    pointer-events: none;
}

.rules-hero > div:not(.rules-hero-bg),
.rules-oath-card {
    position: relative;
    z-index: 1;
}

.rules-hero h1 {
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.4rem, 8vw, 8rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.rules-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.rules-hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.rules-oath-card {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 320px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: var(--theme-radius, 26px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 45%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 44%),
        rgba(0,0,0,.24);
    text-align: center;
}

.rules-oath-card > span {
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 48%, transparent);
    border-radius: 32px;
    color: var(--gold-light);
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    font-size: 3rem;
}

.rules-oath-card small,
.rules-oath-card strong,
.rules-oath-card em {
    display: block;
}

.rules-oath-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rules-oath-card strong {
    margin-top: 7px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.05;
}

.rules-oath-card em {
    margin-top: 8px;
    color: var(--muted);
    font-style: normal;
    line-height: 1.45;
}

.rules-disabled {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 12px;
    margin-top: 22px;
    padding: 48px;
    text-align: center;
}

.rules-disabled span {
    color: var(--theme-primary, #56d2bd);
    font-size: 2.8rem;
}

.rules-disabled h2 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.rules-disabled p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
}

.rules-index-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 70px;
}

.rules-index-grid a {
    display: grid;
    gap: 7px;
    min-height: 132px;
    align-content: center;
    justify-items: center;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent), transparent 40%),
        rgba(0,0,0,.2);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rules-index-grid a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
}

.rules-index-grid span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 26%, transparent);
    border-radius: 15px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 1.3rem;
}

.rules-index-grid strong {
    color: var(--gold-light);
}

.rules-index-grid small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rules-content {
    display: grid;
    gap: 22px;
}

.rules-section-card {
    scroll-margin-top: 110px;
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px);
    border-radius: var(--theme-radius, 28px);
}

.rules-section-card header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}

.rules-section-card header > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 32%, transparent);
    border-radius: 22px;
    color: var(--gold-light);
    background: rgba(0,0,0,.2);
    box-shadow: 0 0 28px color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    font-size: 1.8rem;
}

.rules-section-card small {
    display: block;
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rules-section-card h2 {
    margin: 5px 0 5px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3.2vw, 2.8rem);
    font-weight: 500;
}

.rules-section-card header p {
    margin: 0;
    color: var(--muted);
}

.rules-section-card ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rule-item;
}

.rules-section-card li {
    counter-increment: rule-item;
    position: relative;
    padding: 15px 16px 15px 58px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    border-radius: 17px;
    background: rgba(0,0,0,.15);
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 82%, transparent);
    line-height: 1.55;
}

.rules-section-card li::before {
    content: counter(rule-item);
    position: absolute;
    top: 13px;
    left: 14px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 10px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: .78rem;
    font-weight: 900;
}

.rules-single-text {
    margin: 0;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.15);
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 82%, transparent);
    line-height: 1.65;
}

.rules-final-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 32px;
    padding: clamp(22px, 3vw, 34px);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
}

.rules-final-note > span {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: 22px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 2rem;
}

.rules-final-note small,
.rules-final-note strong {
    display: block;
}

.rules-final-note small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rules-final-note strong {
    margin-top: 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.rules-final-note p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 1180px) {
    .rules-hero {
        grid-template-columns: 1fr;
    }

    .rules-index-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .rules-shell {
        width: min(calc(100% - 20px), 1380px);
        padding-top: 112px;
    }

    .rules-index-grid,
    .rules-section-card header,
    .rules-final-note {
        grid-template-columns: 1fr;
    }

    .rules-index-grid {
        margin-bottom: 36px;
    }
}


/* =========================================================
   v0.45.0 — module disabled page
   ========================================================= */
.module-disabled-shell {
    width: min(calc(100% - 48px), 980px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 150px 0 80px;
    display: grid;
    place-items: center;
}

.module-disabled-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: 100%;
    min-height: 460px;
    padding: clamp(34px, 6vw, 70px);
    border-radius: var(--theme-radius, 30px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 42%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 44%),
        var(--theme-panel, rgba(4,17,14,.82));
}

.module-disabled-card > span {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 42%, transparent);
    border-radius: 32px;
    color: var(--gold-light);
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    font-size: 3rem;
}

.module-disabled-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.module-disabled-card h1 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 7vw, 6rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.045em;
}

.module-disabled-card p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.module-disabled-card div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 18px;
}


/* =========================================================
   v0.47.0 — global visual tuning / cosmetic controls
   ========================================================= */
body[data-visual-intensity="subtle"] .ambient,
body[data-visual-intensity="subtle"] .mist-layer,
body[data-visual-intensity="subtle"] .particle-field {
    opacity: .35;
}

body[data-visual-intensity="subtle"] .fantasy-panel,
body[data-visual-intensity="subtle"] .admin-panel {
    box-shadow: 0 14px 42px rgba(0,0,0,.22) !important;
}

body[data-visual-intensity="strong"] .ambient,
body[data-visual-intensity="strong"] .mist-layer,
body[data-visual-intensity="strong"] .particle-field {
    opacity: 1;
}

body[data-visual-intensity="strong"] .fantasy-panel,
body[data-visual-intensity="strong"] .admin-panel {
    box-shadow: 0 28px 90px rgba(0,0,0,.36), 0 0 34px color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent) !important;
}

body[data-visual-density="compact"] {
    --visual-section-gap: 14px;
}

body[data-visual-density="compact"] .fantasy-panel,
body[data-visual-density="compact"] .admin-panel {
    padding-block: max(16px, calc(var(--panel-padding, 24px) * .78));
}

body[data-visual-density="compact"] .main-navigation a,
body[data-visual-density="compact"] .admin-navigation a {
    padding-block: 8px;
}

body[data-visual-density="wide"] .fantasy-panel,
body[data-visual-density="wide"] .admin-panel {
    padding-block: calc(var(--panel-padding, 24px) * 1.18);
}

body[data-visual-radius="sharp"] {
    --theme-radius: 14px;
    --card-radius: 14px;
}

body[data-visual-radius="round"] {
    --theme-radius: 34px;
    --card-radius: 30px;
}

body[data-visual-motion="reduced"] *,
body[data-visual-motion="reduced"] *::before,
body[data-visual-motion="reduced"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .08s !important;
}

body[data-visual-motion="cinematic"] .reveal {
    transition-duration: .85s;
}

body[data-visual-motion="cinematic"] .ambient,
body[data-visual-motion="cinematic"] .mist-layer {
    filter: saturate(135%);
}

body[data-visual-contrast="soft"] {
    --muted: color-mix(in srgb, var(--parchment, #e9dfc0) 54%, transparent);
}

body[data-visual-contrast="high"] {
    --muted: color-mix(in srgb, var(--parchment, #e9dfc0) 82%, transparent);
    --panel-border: color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
}

body[data-visual-contrast="high"] p,
body[data-visual-contrast="high"] small,
body[data-visual-contrast="high"] em {
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

body[data-visual-public-nav="compact"] .main-navigation {
    gap: 4px;
}

body[data-visual-public-nav="compact"] .main-navigation a {
    padding: 8px 9px;
    font-size: .72rem;
    letter-spacing: .04em;
}


/* =========================================================
   v0.49.0 — player Discord account
   ========================================================= */
.player-account-shell {
    width: min(calc(100% - 48px), 1380px);
    margin: 0 auto;
    padding: 135px 0 80px;
}

.player-account-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .36fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: stretch;
    overflow: hidden;
    min-height: 470px;
    padding: clamp(32px, 6vw, 72px);
    border-radius: var(--theme-radius, 30px);
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--theme-primary, #56d2bd) 17%, transparent), transparent 35%),
        rgba(0,0,0,.24);
}

.player-account-hero-bg {
    position: absolute;
    inset: -30%;
    background:
        linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent) 50%, transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 70px, color-mix(in srgb, var(--theme-accent, #d9b763) 4%, transparent) 70px 71px);
    transform: rotate(-8deg);
    opacity: .75;
    pointer-events: none;
}

.player-account-hero > div:not(.player-account-hero-bg),
.player-account-card {
    position: relative;
    z-index: 1;
}

.player-account-hero h1 {
    margin: 10px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3.1rem, 7vw, 7.4rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.055em;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.player-account-hero p {
    max-width: 760px;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.75;
}

.player-account-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 26px;
}

.player-account-actions form {
    margin: 0;
}

.player-account-warning {
    display: inline-grid;
    gap: 4px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(255,217,138,.28);
    border-radius: 18px;
    background: rgba(255,217,138,.08);
}

.player-account-warning strong {
    color: var(--gold-light);
}

.player-account-warning small {
    color: var(--muted);
}

.player-account-card {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 320px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: var(--theme-radius, 26px);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 45%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 44%),
        rgba(0,0,0,.24);
    text-align: center;
}

.player-account-avatar,
.player-account-discord-icon {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 48%, transparent);
    border-radius: 34px;
    color: var(--gold-light);
    background: rgba(0,0,0,.24);
    box-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    font-family: Georgia, serif;
    font-size: 2.5rem;
}

.player-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-account-card small,
.player-account-card strong,
.player-account-card em {
    display: block;
}

.player-account-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.player-account-card strong {
    margin-top: 7px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.05;
}

.player-account-card em {
    margin-top: 8px;
    color: var(--muted);
    font-style: normal;
    line-height: 1.45;
}

.player-account-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.player-account-stat-grid article {
    padding: 18px 12px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 9%, transparent), transparent 40%),
        rgba(255,255,255,.025);
    text-align: center;
}

.player-account-stat-grid strong,
.player-account-stat-grid span {
    display: block;
}

.player-account-stat-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.55rem, 2.4vw, 2.4rem);
    font-weight: 500;
}

.player-account-stat-grid span {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.player-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
    gap: 22px;
    align-items: start;
}

.player-account-form-panel,
.player-account-info-panel {
    padding: clamp(24px, 4vw, 42px);
}

.player-account-form-panel header h2,
.player-account-info-panel header h2 {
    margin: 5px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 500;
}

.player-account-form-panel header p {
    margin: 0 0 18px;
    color: var(--muted);
}

.player-account-form {
    display: grid;
    gap: 15px;
}

.player-account-form label {
    display: grid;
    gap: 7px;
}

.player-account-form label > span {
    color: var(--gold-light);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.player-account-form input,
.player-account-form select,
.player-account-form textarea {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 14px;
    background: rgba(0,0,0,.22);
    color: var(--parchment, #e9dfc0);
    padding: 12px 14px;
}

.player-account-form small {
    color: var(--muted);
}

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

.player-account-check input {
    width: auto;
}

.player-account-info-list,
.player-account-next-box {
    display: grid;
    gap: 10px;
}

.player-account-info-list article,
.player-account-next-box {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.14);
}

.player-account-info-list span,
.player-account-info-list strong,
.player-account-next-box strong,
.player-account-next-box small {
    display: block;
}

.player-account-info-list span {
    color: var(--theme-primary, #56d2bd);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.player-account-info-list strong {
    margin-top: 3px;
    color: var(--gold-light);
    word-break: break-word;
}

.player-account-next-box {
    margin-top: 16px;
    text-align: center;
}

.player-account-next-box > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0 auto 8px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 24%, transparent);
    border-radius: 16px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
    font-size: 1.4rem;
}

.player-account-next-box strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.player-account-next-box small {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .player-account-hero,
    .player-account-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .player-account-shell {
        width: min(calc(100% - 20px), 1380px);
        padding-top: 112px;
    }

    .player-account-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   v0.50.0 — player tournament applications
   ========================================================= */
.player-application-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
    gap: 22px;
    align-items: start;
    margin-top: 22px;
}

.player-application-open,
.player-application-history {
    padding: clamp(24px, 4vw, 42px);
}

.player-application-open header h2,
.player-application-history header h2 {
    margin: 5px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 500;
}

.player-application-open header p {
    margin: 0 0 18px;
    color: var(--muted);
}

.player-application-empty {
    display: grid;
    min-height: 230px;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 22px;
    background: rgba(0,0,0,.12);
    text-align: center;
}

.player-application-empty.compact {
    min-height: 160px;
}

.player-application-empty span {
    color: var(--theme-primary, #56d2bd);
    font-size: 2.3rem;
}

.player-application-empty strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
}

.player-application-empty small {
    color: var(--muted);
}

.player-application-tournament-list,
.player-application-history-list {
    display: grid;
    gap: 14px;
}

.player-application-tournament-list > article,
.player-application-history-list > article {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 15%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 7%, transparent), transparent 42%),
        rgba(0,0,0,.14);
}

.player-application-tournament-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.player-application-tournament-head span,
.player-application-tournament-head strong,
.player-application-tournament-head small,
.player-application-tournament-head em {
    display: block;
}

.player-application-tournament-head span,
.player-application-history-list article > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.player-application-tournament-head strong,
.player-application-history-list strong {
    margin-top: 3px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.player-application-tournament-head small,
.player-application-history-list small {
    color: var(--muted);
    line-height: 1.35;
}

.player-application-tournament-head em {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(0,0,0,.16);
    font-size: .66rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.player-application-note {
    margin: 12px 0 0;
    color: var(--muted);
}

.player-application-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.player-application-form label {
    display: grid;
    gap: 7px;
}

.player-application-form label:nth-of-type(3) {
    grid-column: 1 / -1;
}

.player-application-form label > span {
    color: var(--gold-light);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.player-application-form input,
.player-application-form select,
.player-application-form textarea {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 14px;
    background: rgba(0,0,0,.22);
    color: var(--parchment, #e9dfc0);
    padding: 12px 14px;
}

.player-application-form button {
    justify-self: start;
    grid-column: 1 / -1;
}

.player-application-history-list article.status-pending {
    border-color: color-mix(in srgb, #ffd98a 34%, transparent);
}

.player-application-history-list article.status-approved {
    border-color: color-mix(in srgb, #a8ffd0 34%, transparent);
}

.player-application-history-list article.status-rejected {
    border-color: color-mix(in srgb, #ffb4aa 34%, transparent);
}

.player-application-history-list p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.4;
}

.player-application-history-list form {
    margin: 12px 0 0;
}

.small-ghost {
    min-height: 36px;
    padding: 0 12px;
    font-size: .7rem;
}

@media (max-width: 1180px) {
    .player-application-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .player-application-tournament-head,
    .player-application-form {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.53.0 — Premium Event Mode / wielka scena turnieju
   ========================================================= */
.page-premium-event {
    background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-primary, #56d2bd) 10%, transparent), transparent 32%),
        #020605;
}

.premium-event-shell {
    width: min(calc(100% - 48px), 1560px);
    margin: 0 auto;
    padding: 132px 0 90px;
}

.premium-event-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .34fr);
    gap: clamp(24px, 4vw, 60px);
    min-height: 620px;
    align-items: stretch;
    overflow: hidden;
    padding: clamp(34px, 6vw, 84px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 30%, transparent);
    border-radius: clamp(26px, 4vw, 46px);
    background:
        linear-gradient(135deg, rgba(0,0,0,.46), rgba(0,0,0,.08)),
        radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 34%),
        radial-gradient(circle at 15% 84%, color-mix(in srgb, var(--theme-primary, #56d2bd) 16%, transparent), transparent 32%),
        rgba(4,14,11,.78);
    box-shadow:
        0 42px 120px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 70px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
    isolation: isolate;
}

.premium-event-hero.tone-live {
    border-color: rgba(255, 82, 82, .38);
    box-shadow: 0 42px 120px rgba(0,0,0,.52), 0 0 80px rgba(255,82,82,.14);
}

.premium-event-hero.tone-registration {
    border-color: rgba(86,210,189,.36);
}

.premium-event-noise {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        repeating-linear-gradient(90deg, transparent 0 82px, rgba(255,255,255,.025) 82px 83px),
        linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.06) 50%, transparent 58%);
    transform: rotate(-7deg);
    opacity: .72;
    pointer-events: none;
}

.premium-event-sword {
    position: absolute;
    right: 8%;
    bottom: -10%;
    z-index: -1;
    color: color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent);
    font-size: clamp(13rem, 24vw, 29rem);
    line-height: 1;
    transform: rotate(-18deg);
    filter: blur(.2px);
    opacity: .45;
    pointer-events: none;
}

.premium-event-hero-copy {
    display: grid;
    align-content: center;
    position: relative;
    z-index: 1;
}

.premium-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-primary, #56d2bd);
    font-size: .72rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.premium-kicker::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.premium-event-hero h1 {
    max-width: 1000px;
    margin: 16px 0 20px;
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(3.8rem, 9vw, 10.5rem);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.075em;
    text-transform: uppercase;
    text-shadow:
        0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent),
        0 22px 80px rgba(0,0,0,.74);
}

.premium-event-hero p {
    max-width: 820px;
    margin: 0;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    font-size: clamp(1.02rem, 1.5vw, 1.28rem);
    line-height: 1.75;
}

.premium-event-status-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.premium-event-status-row strong,
.premium-event-status-row span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 999px;
    background: rgba(0,0,0,.20);
    color: #e6f0ea;
    font-size: .72rem;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.premium-event-status-row strong {
    border-color: color-mix(in srgb, var(--theme-primary, #56d2bd) 40%, transparent);
    color: var(--theme-primary, #56d2bd);
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-primary, #56d2bd) 14%, transparent);
}

.premium-event-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 32px;
}

.premium-event-command-card {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 45%),
        rgba(0,0,0,.24);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.28);
}

.premium-event-command-card > span,
.premium-event-command-card > em,
.premium-event-command-card > small {
    display: block;
}

.premium-event-command-card > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .7rem;
    font-weight: 1000;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.premium-event-command-card > strong {
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(4rem, 9vw, 8rem);
    font-weight: 500;
    line-height: .85;
}

.premium-event-command-card > em,
.premium-event-command-card > small {
    color: var(--muted, #8fa197);
    font-style: normal;
    line-height: 1.4;
}

.premium-event-command-card > i {
    display: block;
    overflow: hidden;
    height: 10px;
    margin: 8px 0;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}

.premium-event-command-card > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--gold-light, #f3d78a));
    box-shadow: 0 0 24px color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
}

.premium-countdown {
    display: grid;
    gap: 3px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
    border-radius: 20px;
    background: rgba(0,0,0,.20);
}

.premium-countdown span {
    color: var(--muted, #8fa197);
    font-size: .64rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-countdown strong {
    color: var(--theme-primary, #56d2bd);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.premium-event-selector {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0;
}

.premium-event-selector label {
    display: grid;
    gap: 7px;
    min-width: min(100%, 420px);
}

.premium-event-selector span {
    color: var(--muted, #8fa197);
    font-size: .7rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-event-selector select {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.28);
    color: var(--parchment, #e9dfc0);
    padding: 13px 15px;
}

.premium-stat-band {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.premium-stat-band article,
.premium-panel {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent), transparent 40%),
        rgba(4,14,11,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 60px rgba(0,0,0,.26);
}

.premium-stat-band article {
    display: grid;
    gap: 4px;
    min-height: 118px;
    align-content: center;
    justify-items: center;
    border-radius: 22px;
    text-align: center;
}

.premium-stat-band span,
.premium-stat-band strong {
    display: block;
}

.premium-stat-band span {
    color: var(--muted, #8fa197);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-stat-band strong {
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 3.4rem);
    font-weight: 500;
    line-height: .95;
}

.premium-event-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(360px, .66fr);
    gap: 22px;
    margin-top: 22px;
    align-items: stretch;
}

.premium-event-grid-lower {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.premium-panel {
    overflow: hidden;
    border-radius: 30px;
    padding: clamp(22px, 3vw, 34px);
}

.premium-panel header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 20px;
}

.premium-panel h2 {
    margin: 8px 0 0;
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.4vw, 3.4rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.035em;
}

.premium-vs-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(16px, 3vw, 34px);
    align-items: center;
    min-height: 370px;
}

.premium-fighter {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.premium-fighter-avatar {
    display: grid;
    width: clamp(112px, 12vw, 168px);
    height: clamp(112px, 12vw, 168px);
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 42%, transparent);
    border-radius: 38px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent), transparent 50%),
        rgba(0,0,0,.24);
    color: var(--gold-light, #f3d78a);
    box-shadow: 0 0 46px color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    font-family: Georgia, serif;
    font-size: 3rem;
}

.premium-fighter-avatar img,
.premium-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-fighter small,
.premium-fighter strong,
.premium-fighter em {
    display: block;
}

.premium-fighter small {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.premium-fighter strong {
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.5vw, 3.7rem);
    font-weight: 500;
    line-height: .95;
}

.premium-fighter em {
    color: var(--muted, #8fa197);
    font-style: normal;
    font-weight: 800;
}

.premium-vs-core {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.premium-vs-core span,
.premium-vs-core small {
    color: var(--muted, #8fa197);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-vs-core strong {
    display: grid;
    width: clamp(82px, 8vw, 130px);
    height: clamp(82px, 8vw, 130px);
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 36%, transparent);
    border-radius: 50%;
    background: rgba(0,0,0,.26);
    color: var(--gold-light, #f3d78a);
    box-shadow: 0 0 46px color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent), inset 0 0 22px rgba(255,255,255,.04);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 500;
}

.premium-storyline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 18%, transparent);
    border-radius: 22px;
    background: rgba(0,0,0,.16);
}

.premium-storyline span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
    border-radius: 14px;
    color: var(--theme-primary, #56d2bd);
    background: rgba(0,0,0,.18);
}

.premium-storyline p {
    margin: 0;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    line-height: 1.5;
}

.premium-moment-list,
.premium-player-list,
.premium-result-list,
.premium-path-list,
.premium-class-balance {
    display: grid;
    gap: 12px;
}

.premium-moment-list article,
.premium-player-list article,
.premium-result-list article,
.premium-path-list article,
.premium-class-balance article,
.premium-empty {
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 13%, transparent);
    border-radius: 20px;
    background: rgba(0,0,0,.15);
}

.premium-moment-list article,
.premium-player-list article,
.premium-path-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
}

.premium-moment-list article > span,
.premium-path-list article > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 15px;
    color: var(--gold-light, #f3d78a);
    background: rgba(0,0,0,.18);
    font-size: 1.25rem;
}

.premium-moment-list .tone-hot > span {
    color: #ffcf5f;
    box-shadow: 0 0 18px rgba(255,207,95,.13);
}

.premium-moment-list .tone-warning > span {
    color: #ff9f6e;
}

.premium-moment-list .tone-legendary > span {
    color: var(--gold-light, #f3d78a);
    border-color: color-mix(in srgb, var(--theme-accent, #d9b763) 34%, transparent);
}

.premium-moment-list strong,
.premium-moment-list small,
.premium-player-list strong,
.premium-player-list small,
.premium-result-list strong,
.premium-result-list small,
.premium-path-list strong,
.premium-path-list small {
    display: block;
}

.premium-moment-list strong,
.premium-player-list strong,
.premium-result-list strong,
.premium-path-list strong {
    color: var(--gold-light, #f3d78a);
}

.premium-moment-list small,
.premium-player-list small,
.premium-result-list small,
.premium-path-list small {
    margin-top: 3px;
    color: var(--muted, #8fa197);
    line-height: 1.4;
}

.premium-mini-avatar {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.20);
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
}

.premium-player-list article > span {
    color: var(--theme-primary, #56d2bd);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 1000;
}

.premium-player-list em {
    justify-self: end;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 28%, transparent);
    border-radius: 999px;
    color: var(--gold-light, #f3d78a);
    background: rgba(0,0,0,.18);
    font-size: .6rem;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .1em;
}

.premium-class-balance article {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.premium-class-balance article > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.premium-class-balance strong {
    color: var(--gold-light, #f3d78a);
}

.premium-class-balance span {
    color: var(--muted, #8fa197);
    font-size: .78rem;
    font-weight: 900;
}

.premium-class-balance i {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.premium-class-balance b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--gold-light, #f3d78a));
}

.premium-result-list article {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.premium-result-list article > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.premium-empty {
    display: grid;
    min-height: 190px;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding: 28px;
    text-align: center;
}

.premium-empty.compact {
    min-height: 130px;
}

.premium-empty span {
    color: var(--theme-primary, #56d2bd);
    font-size: 2.2rem;
}

.premium-empty strong {
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.premium-empty p {
    max-width: 430px;
    margin: 0;
    color: var(--muted, #8fa197);
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .premium-event-hero,
    .premium-event-grid,
    .premium-event-grid-lower {
        grid-template-columns: 1fr;
    }

    .premium-stat-band {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .premium-event-shell {
        width: min(calc(100% - 20px), 1560px);
        padding-top: 112px;
    }

    .premium-event-hero {
        min-height: auto;
        padding: 28px 18px;
        border-radius: 26px;
    }

    .premium-event-hero h1 {
        font-size: clamp(3rem, 18vw, 4.8rem);
    }

    .premium-stat-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-vs-stage {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .premium-vs-core {
        order: 2;
    }

    .premium-player-list article,
    .premium-moment-list article,
    .premium-path-list article {
        grid-template-columns: auto 1fr;
    }

    .premium-player-list em {
        grid-column: 2;
        justify-self: start;
    }
}


/* =========================================================
   v0.54.0 — Match PPV Premium Card
   ========================================================= */
.match-ppv-stage {
    position: relative;
    overflow: hidden;
    margin: 26px 0;
    padding: clamp(26px, 5vw, 58px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 30%, transparent);
    border-radius: clamp(26px, 4vw, 44px);
    background:
        linear-gradient(135deg, rgba(0,0,0,.46), rgba(0,0,0,.14)),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), transparent 38%),
        radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent), transparent 34%),
        rgba(4,14,11,.82);
    box-shadow: 0 38px 120px rgba(0,0,0,.50), 0 0 70px color-mix(in srgb, var(--theme-accent, #d9b763) 10%, transparent);
    isolation: isolate;
}

.match-ppv-noise {
    position: absolute;
    inset: -24%;
    z-index: -2;
    background:
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,255,255,.025) 80px 81px),
        linear-gradient(116deg, transparent 0 42%, rgba(255,255,255,.06) 50%, transparent 58%);
    transform: rotate(-7deg);
    opacity: .68;
}

.match-ppv-crown {
    position: absolute;
    right: 5%;
    bottom: -14%;
    z-index: -1;
    color: color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    font-size: clamp(12rem, 22vw, 26rem);
    line-height: 1;
    transform: rotate(-12deg);
    pointer-events: none;
}

.match-ppv-header {
    max-width: 980px;
    margin-bottom: clamp(26px, 4vw, 46px);
}

.match-ppv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.match-ppv-kicker::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.match-ppv-header h2 {
    margin: 14px 0 14px;
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(3.2rem, 7vw, 8.4rem);
    font-weight: 500;
    line-height: .84;
    letter-spacing: -.07em;
    text-transform: uppercase;
    text-shadow: 0 0 42px color-mix(in srgb, var(--theme-accent, #d9b763) 20%, transparent), 0 18px 70px rgba(0,0,0,.62);
}

.match-ppv-header p {
    max-width: 840px;
    margin: 0;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.72;
}

.match-ppv-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(18px, 4vw, 54px);
    align-items: stretch;
}

.match-ppv-fighter {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 520px;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 14%, transparent), transparent 42%),
        rgba(0,0,0,.20);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.match-ppv-fighter.is-favorite {
    border-color: color-mix(in srgb, var(--theme-primary, #56d2bd) 40%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 48px color-mix(in srgb, var(--theme-primary, #56d2bd) 12%, transparent);
}

.match-ppv-portrait {
    display: grid;
    width: clamp(132px, 14vw, 210px);
    height: clamp(132px, 14vw, 210px);
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 42%, transparent);
    border-radius: 44px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 17%, transparent), transparent 46%),
        rgba(0,0,0,.24);
    color: var(--gold-light, #f3d78a);
    box-shadow: 0 0 54px color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.match-ppv-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.match-ppv-fighter > span,
.match-ppv-fighter > strong,
.match-ppv-fighter > em {
    display: block;
}

.match-ppv-fighter > span {
    margin-top: 18px;
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.match-ppv-fighter > strong {
    margin-top: 8px;
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4.8vw, 5.3rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.05em;
}

.match-ppv-fighter > em {
    margin-top: 10px;
    color: var(--muted, #8fa197);
    font-style: normal;
    font-weight: 800;
}

.match-ppv-probability {
    display: grid;
    gap: 7px;
    width: min(100%, 300px);
    margin-top: 26px;
}

.match-ppv-probability small {
    color: var(--muted, #8fa197);
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.match-ppv-probability i {
    display: block;
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
}

.match-ppv-probability b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--gold-light, #f3d78a));
    box-shadow: 0 0 22px color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
}

.match-ppv-probability strong {
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.match-ppv-center {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-width: clamp(120px, 11vw, 190px);
}

.match-ppv-center span,
.match-ppv-center em,
.match-ppv-center small {
    color: var(--muted, #8fa197);
    font-size: .66rem;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}

.match-ppv-center strong {
    display: grid;
    width: clamp(104px, 9vw, 156px);
    height: clamp(104px, 9vw, 156px);
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 38%, transparent);
    border-radius: 50%;
    background: rgba(0,0,0,.28);
    color: var(--gold-light, #f3d78a);
    box-shadow: 0 0 54px color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), inset 0 0 26px rgba(255,255,255,.04);
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 500;
}

.match-ppv-prediction {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 26px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 22%, transparent);
    border-radius: 24px;
    background: rgba(0,0,0,.18);
}

.match-ppv-prediction span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 28%, transparent);
    border-radius: 16px;
    color: var(--theme-primary, #56d2bd);
    background: rgba(0,0,0,.18);
}

.match-ppv-prediction p {
    margin: 0;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    line-height: 1.55;
}

.match-ppv-grid,
.match-ppv-keys-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 22px 0;
}

.match-ppv-panel {
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 16%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--theme-accent, #d9b763) 8%, transparent), transparent 40%),
        rgba(4,14,11,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.24);
}

.match-ppv-panel header {
    margin-bottom: 18px;
}

.match-ppv-panel h2 {
    margin: 8px 0 0;
    color: var(--gold-light, #f3d78a);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 500;
    line-height: .96;
}

.match-ppv-tape-list {
    display: grid;
    gap: 8px;
}

.match-ppv-tape-list article {
    display: grid;
    grid-template-columns: minmax(90px, .7fr) minmax(120px, 1fr) minmax(90px, .7fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 12%, transparent);
    border-radius: 16px;
    background: rgba(0,0,0,.15);
    text-align: center;
}

.match-ppv-tape-list strong {
    color: #dce7df;
    font-size: 1rem;
    font-weight: 1000;
}

.match-ppv-tape-list strong.is-leading {
    color: var(--gold-light, #f3d78a);
    text-shadow: 0 0 16px color-mix(in srgb, var(--theme-accent, #d9b763) 22%, transparent);
}

.match-ppv-tape-list span {
    color: var(--muted, #8fa197);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.match-ppv-threat-list {
    display: grid;
    gap: 10px;
}

.match-ppv-threat-list article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 13%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.14);
}

.match-ppv-threat-list article > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent);
    border-radius: 15px;
    color: var(--gold-light, #f3d78a);
    background: rgba(0,0,0,.18);
}

.match-ppv-threat-list strong,
.match-ppv-threat-list small {
    display: block;
}

.match-ppv-threat-list strong {
    color: var(--gold-light, #f3d78a);
}

.match-ppv-threat-list small {
    margin-top: 3px;
    color: var(--muted, #8fa197);
    line-height: 1.42;
}

.match-ppv-keys ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ppv-key;
}

.match-ppv-keys li {
    position: relative;
    min-height: 52px;
    padding: 14px 14px 14px 54px;
    border: 1px solid color-mix(in srgb, var(--theme-accent, #d9b763) 13%, transparent);
    border-radius: 18px;
    background: rgba(0,0,0,.14);
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 78%, transparent);
    line-height: 1.45;
}

.match-ppv-keys li::before {
    counter-increment: ppv-key;
    content: counter(ppv-key);
    position: absolute;
    left: 14px;
    top: 50%;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #56d2bd) 24%, transparent);
    border-radius: 10px;
    background: rgba(0,0,0,.18);
    color: var(--theme-primary, #56d2bd);
    font-size: .78rem;
    font-weight: 1000;
    transform: translateY(-50%);
}

@media (max-width: 1180px) {
    .match-ppv-main,
    .match-ppv-grid,
    .match-ppv-keys-grid {
        grid-template-columns: 1fr;
    }

    .match-ppv-center {
        min-height: 130px;
    }
}

@media (max-width: 720px) {
    .match-ppv-stage {
        padding: 24px 14px;
        border-radius: 26px;
    }

    .match-ppv-header h2 {
        font-size: clamp(2.8rem, 18vw, 4.5rem);
    }

    .match-ppv-fighter {
        min-height: auto;
    }

    .match-ppv-tape-list article {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   v0.55.0 — Cinematic Finishers / stylizowane zakończenia walki
   ========================================================= */
.cinematic-finisher {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 54px);
    align-items: center;
    padding: clamp(22px, 5vw, 72px);
    overflow: hidden;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .42s ease, transform .42s ease;
    pointer-events: none;
    isolation: isolate;
}

.cinematic-finisher.is-visible {
    opacity: 1;
    transform: scale(1);
}

.cinematic-finisher.is-closing {
    opacity: 0;
    transform: scale(1.025);
}

.cinematic-finisher-bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(240,213,143,.20), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(86,210,189,.16), transparent 28%),
        radial-gradient(circle at 82% 50%, rgba(204,66,66,.16), transparent 28%),
        rgba(1,8,6,.82);
    backdrop-filter: blur(10px) saturate(145%);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.cinematic-finisher-bg::after {
    content: "";
    position: absolute;
    inset: -30%;
    opacity: .22;
    background:
        repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.06) 76px 77px),
        linear-gradient(116deg, transparent 0 43%, rgba(255,255,255,.08) 50%, transparent 57%);
    transform: translateX(-18%) rotate(-8deg);
    animation: cinematic-finisher-sweep 2.45s ease-out forwards;
}

@keyframes cinematic-finisher-sweep {
    0% { transform: translateX(-60%) rotate(-8deg); opacity: 0; }
    22% { opacity: .32; }
    100% { transform: translateX(60%) rotate(-8deg); opacity: 0; }
}

.cinematic-finisher-fighter {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid rgba(240,213,143,.22);
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.12), transparent 46%),
        rgba(0,0,0,.20);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.34);
}

.cinematic-finisher-fighter > span {
    display: grid;
    width: clamp(82px, 10vw, 140px);
    height: clamp(82px, 10vw, 140px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.40);
    border-radius: 34px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, rgba(240,213,143,.16), transparent 64%),
        rgba(0,0,0,.24);
    box-shadow: 0 0 44px rgba(240,213,143,.18);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.cinematic-finisher-fighter strong,
.cinematic-finisher-fighter small {
    display: block;
}

.cinematic-finisher-fighter strong {
    max-width: 360px;
    overflow: hidden;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 3.8vw, 4.2rem);
    font-weight: 500;
    line-height: .92;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cinematic-finisher-fighter small {
    color: var(--turquoise);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cinematic-finisher-fighter.is-loser {
    opacity: .94;
    filter: saturate(.72);
}

.cinematic-finisher-fighter.is-loser::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: inherit;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(86,210,189,.22), transparent 48%);
    transform: scale(.68);
    animation: cinematic-loser-burst 1.15s ease-out .98s forwards;
    pointer-events: none;
}

@keyframes cinematic-loser-burst {
    0% { opacity: 0; transform: scale(.68); filter: blur(0); }
    38% { opacity: .95; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.34); filter: blur(8px); }
}

.cinematic-finisher-lane {
    position: relative;
    z-index: 3;
    display: grid;
    min-height: clamp(160px, 24vw, 260px);
    place-items: center;
}

.finisher-mark {
    position: absolute;
    z-index: 1;
    display: grid;
    width: clamp(92px, 11vw, 150px);
    height: clamp(92px, 11vw, 150px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.30);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.22);
    box-shadow: 0 0 54px rgba(240,213,143,.18), inset 0 0 22px rgba(255,255,255,.04);
    font-size: clamp(2.1rem, 4vw, 4rem);
    animation: finisher-mark-pulse 2.2s ease-in-out forwards;
}

@keyframes finisher-mark-pulse {
    0% { transform: scale(.82) rotate(-9deg); opacity: 0; }
    28% { transform: scale(1.04) rotate(0); opacity: 1; }
    72% { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(1.16) rotate(7deg); opacity: 0; }
}

.finisher-projectile {
    position: absolute;
    z-index: 4;
    display: grid;
    width: clamp(54px, 7vw, 86px);
    height: clamp(54px, 7vw, 86px);
    place-items: center;
    border-radius: 50%;
    color: var(--gold-light);
    background: radial-gradient(circle, rgba(240,213,143,.42), rgba(86,210,189,.14), transparent 70%);
    filter: drop-shadow(0 0 14px rgba(86,210,189,.75)) drop-shadow(0 0 22px rgba(240,213,143,.5));
    font-size: clamp(2rem, 4vw, 3.7rem);
    transform: translateX(-46vw) scale(.85);
    animation: finisher-projectile-flight 1.1s cubic-bezier(.2,.84,.18,1) .58s forwards;
}

@keyframes finisher-projectile-flight {
    0% { opacity: 0; transform: translateX(-46vw) scale(.72) rotate(-10deg); }
    12% { opacity: 1; }
    74% { opacity: 1; transform: translateX(28vw) scale(1.05) rotate(4deg); }
    100% { opacity: 0; transform: translateX(37vw) scale(1.55) rotate(10deg); }
}

.finisher-impact {
    position: absolute;
    z-index: 2;
    right: -8vw;
    width: clamp(110px, 16vw, 230px);
    height: clamp(110px, 16vw, 230px);
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle, rgba(255,255,255,.75), rgba(240,213,143,.30) 18%, rgba(86,210,189,.14) 42%, transparent 68%);
    box-shadow: 0 0 80px rgba(240,213,143,.35), 0 0 120px rgba(86,210,189,.20);
    transform: scale(.35);
    animation: finisher-impact-bloom .92s ease-out 1.28s forwards;
}

@keyframes finisher-impact-bloom {
    0% { opacity: 0; transform: scale(.35); }
    28% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.55); }
}

.finisher-shard {
    position: absolute;
    z-index: 5;
    right: 4vw;
    width: 8px;
    height: 28px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(var(--gold-light), var(--turquoise));
    box-shadow: 0 0 18px rgba(240,213,143,.45);
    animation: finisher-shard-out .85s ease-out 1.34s forwards;
}

.finisher-shard.s1 { --x: -90px; --y: -90px; --r: -42deg; }
.finisher-shard.s2 { --x: 78px; --y: -74px; --r: 34deg; }
.finisher-shard.s3 { --x: -62px; --y: 88px; --r: 52deg; }
.finisher-shard.s4 { --x: 92px; --y: 68px; --r: -28deg; }

@keyframes finisher-shard-out {
    0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.95) rotate(var(--r)); }
}

.cinematic-finisher-title {
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 5vw, 58px);
    z-index: 6;
    width: min(820px, calc(100% - 40px));
    padding: clamp(16px, 2.5vw, 26px);
    border: 1px solid rgba(240,213,143,.26);
    border-radius: 24px;
    background: rgba(0,0,0,.34);
    box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
    text-align: center;
    transform: translate(-50%, 24px);
    opacity: 0;
    animation: finisher-title-in .68s ease .34s forwards, finisher-title-out .45s ease 2.35s forwards;
}

.cinematic-finisher-title span,
.cinematic-finisher-title h2,
.cinematic-finisher-title p {
    display: block;
}

.cinematic-finisher-title span {
    color: var(--turquoise);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cinematic-finisher-title h2 {
    margin: 7px 0 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: .92;
}

.cinematic-finisher-title p {
    margin: 0;
    color: #9aaea4;
    line-height: 1.45;
}

@keyframes finisher-title-in {
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes finisher-title-out {
    to { opacity: 0; transform: translate(-50%, -20px); }
}

.finisher-warrior .finisher-projectile {
    border-radius: 20px;
    transform: translateX(-34vw) scale(.85) rotate(35deg);
}

.finisher-warrior .finisher-impact {
    background:
        radial-gradient(circle, rgba(255,255,255,.78), rgba(240,213,143,.34) 20%, rgba(255,135,80,.15) 44%, transparent 70%);
}

.finisher-sura .cinematic-finisher-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(120,70,210,.20), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(86,210,189,.12), transparent 28%),
        radial-gradient(circle at 82% 50%, rgba(100,60,160,.22), transparent 28%),
        rgba(1,5,10,.86);
}

.finisher-sura .finisher-projectile {
    color: #d8c4ff;
    filter: drop-shadow(0 0 14px rgba(165,130,255,.8)) drop-shadow(0 0 28px rgba(86,210,189,.30));
}

.finisher-shaman .finisher-projectile {
    color: #fff8bd;
    filter: drop-shadow(0 0 16px rgba(255,246,130,.9)) drop-shadow(0 0 30px rgba(86,210,189,.42));
}

.league-result-card.is-waiting-for-finisher {
    opacity: 0;
    transform: translateY(18px) scale(.96);
}

@media (max-width: 920px) {
    .cinematic-finisher {
        grid-template-columns: 1fr;
        align-content: center;
    }

    .cinematic-finisher-lane {
        min-height: 120px;
        order: 2;
    }

    .cinematic-finisher-fighter.is-left {
        order: 1;
    }

    .cinematic-finisher-fighter.is-right {
        order: 3;
    }

    .cinematic-finisher-title {
        position: relative;
        order: 4;
        left: auto;
        bottom: auto;
        width: 100%;
        transform: translateY(18px);
        animation: finisher-title-mobile-in .68s ease .34s forwards, finisher-title-mobile-out .45s ease 2.35s forwards;
    }

    @keyframes finisher-title-mobile-in {
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes finisher-title-mobile-out {
        to { opacity: 0; transform: translateY(-18px); }
    }

    .finisher-projectile {
        animation-name: finisher-projectile-flight-mobile;
    }

    @keyframes finisher-projectile-flight-mobile {
        0% { opacity: 0; transform: translateX(-38vw) scale(.72); }
        12% { opacity: 1; }
        74% { opacity: 1; transform: translateX(30vw) scale(1.05); }
        100% { opacity: 0; transform: translateX(40vw) scale(1.55); }
    }
}


/* =========================================================
   v0.56.0 — Director Finishers / mocniejsza reżyseria zakończeń
   ========================================================= */
.cinematic-finisher-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr) minmax(0, 1fr);
    gap: clamp(22px, 5vw, 72px);
    padding: clamp(24px, 6vw, 84px);
    background: #020605;
}

.cinematic-finisher-v2 .cinematic-finisher-bg,
.cinematic-finisher-v2 .cinematic-finisher-fighter,
.cinematic-finisher-v2 .cinematic-finisher-lane,
.cinematic-finisher-v2 .cinematic-finisher-title {
    display: none;
}

.finisher-director-bg {
    position: absolute;
    z-index: -4;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 218, 128, .26), transparent 22%),
        radial-gradient(circle at 16% 42%, rgba(86, 210, 189, .22), transparent 26%),
        radial-gradient(circle at 84% 48%, rgba(255, 80, 70, .16), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.96), rgba(2,10,8,.88));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.finisher-director-bg::before {
    content: "";
    position: absolute;
    inset: -28%;
    opacity: .22;
    background:
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.07) 72px 73px),
        repeating-linear-gradient(0deg, transparent 0 72px, rgba(86,210,189,.04) 72px 73px);
    mask-image: radial-gradient(circle at center, #000 0 54%, transparent 76%);
    animation: director-grid-zoom 4.2s ease-out forwards;
}

.finisher-director-bg::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        linear-gradient(116deg, transparent 0 44%, rgba(255,255,255,.16) 48%, rgba(255,218,128,.12) 50%, transparent 56%);
    transform: translateX(-70%) rotate(-7deg);
    animation: director-light-sweep 2.2s ease-out .2s forwards;
}

@keyframes director-grid-zoom {
    0% { transform: scale(1.25) rotate(-3deg); opacity: 0; }
    18% { opacity: .26; }
    100% { transform: scale(1) rotate(0); opacity: .15; }
}

@keyframes director-light-sweep {
    0% { transform: translateX(-70%) rotate(-7deg); opacity: 0; }
    22% { opacity: .9; }
    100% { transform: translateX(70%) rotate(-7deg); opacity: 0; }
}

.finisher-lightning {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(108deg, transparent 0 47%, rgba(255,255,255,.70) 49%, rgba(255, 218, 128, .35) 50%, transparent 52%),
        linear-gradient(72deg, transparent 0 49%, rgba(86,210,189,.40) 50%, transparent 52%);
    mix-blend-mode: screen;
}

.cinematic-finisher-v2.is-impact .finisher-lightning.l1 {
    animation: director-flash .34s steps(2, end) 0s 2;
}

.cinematic-finisher-v2.is-impact .finisher-lightning.l2 {
    animation: director-flash .22s steps(2, end) .12s 2;
    transform: scaleX(-1);
}

@keyframes director-flash {
    0%, 100% { opacity: 0; }
    50% { opacity: .85; }
}

.finisher-director-header {
    position: absolute;
    top: clamp(20px, 4vw, 54px);
    left: 50%;
    z-index: 8;
    width: min(980px, calc(100% - 38px));
    text-align: center;
    transform: translateX(-50%) translateY(-12px);
    opacity: 0;
    animation: director-header-in .55s ease .14s forwards;
}

@keyframes director-header-in {
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.finisher-director-header span,
.finisher-director-header h2,
.finisher-director-header p {
    display: block;
}

.finisher-director-header span {
    color: var(--turquoise);
    font-size: clamp(.62rem, 1vw, .82rem);
    font-weight: 1000;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.finisher-director-header h2 {
    margin: 7px 0 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 7vw, 8rem);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.07em;
    text-transform: uppercase;
    text-shadow: 0 0 52px rgba(240,213,143,.26), 0 22px 90px rgba(0,0,0,.7);
}

.finisher-director-header p {
    margin: 0;
    color: #8fa69a;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.finisher-director-fighter {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: clamp(320px, 46vh, 540px);
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid rgba(240,213,143,.24);
    border-radius: clamp(26px, 4vw, 44px);
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.14), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.045), transparent 34%),
        rgba(0,0,0,.30);
    box-shadow:
        0 34px 100px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.08);
    text-align: center;
    transform: translateY(22px) scale(.94);
    opacity: 0;
    transition: filter .25s ease, transform .25s ease, opacity .25s ease;
}

.cinematic-finisher-v2.is-visible .finisher-director-fighter {
    animation: director-fighter-in .65s cubic-bezier(.16,.84,.18,1) forwards;
}

.cinematic-finisher-v2.is-visible .finisher-director-fighter.is-right {
    animation-delay: .08s;
}

@keyframes director-fighter-in {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.finisher-director-fighter i {
    display: grid;
    width: clamp(104px, 12vw, 185px);
    height: clamp(104px, 12vw, 185px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.45);
    border-radius: 42px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, rgba(240,213,143,.20), transparent 64%),
        rgba(0,0,0,.30);
    box-shadow: 0 0 64px rgba(240,213,143,.18), inset 0 0 28px rgba(255,255,255,.05);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 6vw, 6rem);
    font-style: normal;
}

.finisher-director-fighter strong {
    display: block;
    max-width: 520px;
    margin-top: 18px;
    overflow: hidden;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.1rem, 5vw, 6.2rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.finisher-director-fighter small {
    display: block;
    margin-top: 10px;
    color: var(--turquoise);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.finisher-director-fighter.is-winner {
    border-color: rgba(86,210,189,.38);
    box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 52px rgba(86,210,189,.10), inset 0 1px 0 rgba(255,255,255,.08);
}

.cinematic-finisher-v2.is-executing .finisher-director-fighter.is-winner {
    transform: scale(1.055);
    filter: brightness(1.35) saturate(1.25);
}

.cinematic-finisher-v2.is-impact .finisher-director-fighter.is-loser {
    animation: director-loser-break .85s ease-out forwards;
}

@keyframes director-loser-break {
    0% { transform: scale(1); filter: brightness(1); opacity: 1; }
    34% { transform: scale(1.04) rotate(.6deg); filter: brightness(2.4) saturate(.45); opacity: 1; }
    100% { transform: scale(.78) rotate(-1deg); filter: brightness(.42) blur(5px) saturate(.20); opacity: .26; }
}

.finisher-director-center {
    position: relative;
    z-index: 5;
    display: grid;
    min-height: clamp(260px, 45vh, 520px);
    place-items: center;
    align-self: center;
}

.finisher-director-center b {
    display: grid;
    width: clamp(112px, 13vw, 190px);
    height: clamp(112px, 13vw, 190px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.38);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.34);
    box-shadow:
        0 0 72px rgba(240,213,143,.16),
        0 0 96px rgba(86,210,189,.10),
        inset 0 0 28px rgba(255,255,255,.05);
    font-size: clamp(3rem, 6vw, 6rem);
    transform: scale(.7) rotate(-18deg);
    opacity: 0;
    animation: director-mark-in .8s cubic-bezier(.16,.84,.18,1) .42s forwards;
}

@keyframes director-mark-in {
    60% { transform: scale(1.08) rotate(0); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.finisher-director-line {
    position: absolute;
    left: -42vw;
    right: -42vw;
    top: 50%;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(86,210,189,.28), rgba(240,213,143,.70), rgba(86,210,189,.28), transparent);
    box-shadow: 0 0 24px rgba(240,213,143,.38), 0 0 42px rgba(86,210,189,.20);
    transform: translateY(-50%) scaleX(.2);
}

.cinematic-finisher-v2.is-executing .finisher-director-line {
    animation: director-line-charge .86s ease-out forwards;
}

@keyframes director-line-charge {
    to { opacity: 1; transform: translateY(-50%) scaleX(1); }
}

.finisher-director-projectile {
    position: absolute;
    z-index: 7;
    display: grid;
    width: clamp(70px, 9vw, 130px);
    height: clamp(70px, 9vw, 130px);
    place-items: center;
    border-radius: 50%;
    color: var(--gold-light);
    background: radial-gradient(circle, rgba(240,213,143,.55), rgba(86,210,189,.18), transparent 70%);
    filter: drop-shadow(0 0 18px rgba(86,210,189,.92)) drop-shadow(0 0 38px rgba(240,213,143,.70));
    font-size: clamp(2.7rem, 5vw, 5rem);
    opacity: 0;
    transform: translateX(-46vw) scale(.65) rotate(-12deg);
}

.cinematic-finisher-v2.is-executing .finisher-director-projectile {
    animation: director-projectile-shot 1.05s cubic-bezier(.18,.88,.12,1) forwards;
}

@keyframes director-projectile-shot {
    0% { opacity: 0; transform: translateX(-46vw) scale(.65) rotate(-12deg); }
    10% { opacity: 1; }
    72% { opacity: 1; transform: translateX(22vw) scale(1.1) rotate(2deg); }
    100% { opacity: 0; transform: translateX(34vw) scale(1.85) rotate(12deg); }
}

.finisher-director-impact {
    position: absolute;
    z-index: 6;
    width: clamp(170px, 22vw, 360px);
    height: clamp(170px, 22vw, 360px);
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(circle, rgba(255,255,255,.90), rgba(240,213,143,.48) 18%, rgba(86,210,189,.20) 42%, transparent 68%);
    box-shadow: 0 0 110px rgba(240,213,143,.48), 0 0 160px rgba(86,210,189,.25);
    transform: scale(.25);
}

.cinematic-finisher-v2.is-impact .finisher-director-impact {
    animation: director-impact-bloom 1.05s ease-out forwards;
}

@keyframes director-impact-bloom {
    0% { opacity: 0; transform: scale(.25); }
    22% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.75); }
}

.finisher-director-ring {
    position: absolute;
    z-index: 2;
    width: clamp(180px, 24vw, 410px);
    height: clamp(180px, 24vw, 410px);
    border: 1px solid rgba(240,213,143,.42);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.25);
}

.finisher-director-ring.r2 {
    border-color: rgba(86,210,189,.34);
}

.cinematic-finisher-v2.is-impact .finisher-director-ring.r1 {
    animation: director-ring-out 1.1s ease-out forwards;
}

.cinematic-finisher-v2.is-impact .finisher-director-ring.r2 {
    animation: director-ring-out 1.1s ease-out .12s forwards;
}

@keyframes director-ring-out {
    0% { opacity: 0; transform: scale(.2); }
    22% { opacity: .85; }
    100% { opacity: 0; transform: scale(1.75); }
}

.finisher-director-slash {
    position: absolute;
    z-index: 7;
    width: clamp(220px, 34vw, 620px);
    height: 5px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.90), var(--gold-light), transparent);
    box-shadow: 0 0 30px rgba(240,213,143,.55);
    transform: rotate(-18deg) scaleX(.1);
}

.finisher-director-slash.s2 {
    transform: rotate(18deg) scaleX(.1);
    background: linear-gradient(90deg, transparent, rgba(86,210,189,.75), rgba(255,255,255,.92), transparent);
}

.finisher-director-slash.s3 {
    transform: rotate(0deg) scaleX(.1);
}

.cinematic-finisher-v2.is-impact .finisher-director-slash {
    animation: director-slash .55s ease-out forwards;
}

.cinematic-finisher-v2.is-impact .finisher-director-slash.s2 {
    animation-delay: .10s;
}

.cinematic-finisher-v2.is-impact .finisher-director-slash.s3 {
    animation-delay: .18s;
}

@keyframes director-slash {
    0% { opacity: 0; transform: rotate(var(--r, -18deg)) scaleX(.1); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--r, -18deg)) scaleX(1.25); }
}

.finisher-director-slash.s1 { --r: -18deg; }
.finisher-director-slash.s2 { --r: 18deg; }
.finisher-director-slash.s3 { --r: 0deg; }

.finisher-director-particles {
    position: absolute;
    z-index: 8;
    inset: 50% auto auto 50%;
    width: 0;
    height: 0;
}

.finisher-director-particles i {
    position: absolute;
    width: 8px;
    height: 34px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(var(--gold-light), var(--turquoise));
    box-shadow: 0 0 18px rgba(240,213,143,.55);
}

.cinematic-finisher-v2.is-impact .finisher-director-particles i {
    animation: director-particle .9s ease-out forwards;
}

.finisher-director-particles i:nth-child(1) { --x: -160px; --y: -120px; --r: -44deg; }
.finisher-director-particles i:nth-child(2) { --x: 140px; --y: -110px; --r: 38deg; animation-delay: .04s; }
.finisher-director-particles i:nth-child(3) { --x: -110px; --y: 130px; --r: 58deg; animation-delay: .08s; }
.finisher-director-particles i:nth-child(4) { --x: 165px; --y: 112px; --r: -32deg; animation-delay: .12s; }
.finisher-director-particles i:nth-child(5) { --x: -210px; --y: 10px; --r: 90deg; animation-delay: .06s; }
.finisher-director-particles i:nth-child(6) { --x: 210px; --y: -6px; --r: 90deg; animation-delay: .10s; }
.finisher-director-particles i:nth-child(7) { --x: -60px; --y: -180px; --r: -12deg; animation-delay: .14s; }
.finisher-director-particles i:nth-child(8) { --x: 60px; --y: 180px; --r: 12deg; animation-delay: .18s; }

@keyframes director-particle {
    0% { opacity: 0; transform: translate(0,0) scale(.35) rotate(0); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
}

.finisher-director-cut {
    position: absolute;
    z-index: 9;
    inset: 0;
    opacity: 0;
    background: rgba(255,255,255,.88);
    mix-blend-mode: screen;
    pointer-events: none;
}

.cinematic-finisher-v2.is-impact .finisher-director-cut.cut-a {
    animation: director-white-cut .20s steps(1, end) .03s 1;
}

.cinematic-finisher-v2.is-impact .finisher-director-cut.cut-b {
    animation: director-white-cut .18s steps(1, end) .22s 1;
}

@keyframes director-white-cut {
    0%, 100% { opacity: 0; }
    50% { opacity: .80; }
}

.finisher-director-result {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 5vw, 58px);
    z-index: 10;
    width: min(900px, calc(100% - 42px));
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(240,213,143,.34);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.16), transparent 42%),
        rgba(0,0,0,.50);
    box-shadow: 0 26px 90px rgba(0,0,0,.52), 0 0 60px rgba(240,213,143,.12), inset 0 1px 0 rgba(255,255,255,.08);
    text-align: center;
    transform: translate(-50%, 34px) scale(.96);
    opacity: 0;
}

.cinematic-finisher-v2.is-result .finisher-director-result {
    animation: director-result-in .62s cubic-bezier(.16,.84,.18,1) forwards;
}

@keyframes director-result-in {
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.finisher-director-result span,
.finisher-director-result strong,
.finisher-director-result p {
    display: block;
}

.finisher-director-result span {
    color: var(--turquoise);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.finisher-director-result strong {
    margin-top: 6px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 6vw, 6.5rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.06em;
    text-transform: uppercase;
    text-shadow: 0 0 46px rgba(240,213,143,.22);
}

.finisher-director-result p {
    max-width: 760px;
    margin: 10px auto 0;
    color: #9fb2a8;
    line-height: 1.48;
}

.finisher-ninja.cinematic-finisher-v2 .finisher-director-projectile {
    content: "➶";
    filter: drop-shadow(0 0 18px rgba(86,210,189,.95)) drop-shadow(0 0 38px rgba(240,213,143,.58));
}

.finisher-warrior.cinematic-finisher-v2 .finisher-director-projectile {
    border-radius: 22px;
    filter: drop-shadow(0 0 20px rgba(255,150,80,.95)) drop-shadow(0 0 42px rgba(240,213,143,.56));
}

.finisher-warrior.cinematic-finisher-v2 .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,150,80,.25), transparent 23%),
        radial-gradient(circle at 15% 42%, rgba(240,213,143,.18), transparent 26%),
        radial-gradient(circle at 85% 48%, rgba(255,80,70,.18), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.96), rgba(14,7,2,.90));
}

.finisher-sura.cinematic-finisher-v2 .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(136,90,255,.28), transparent 23%),
        radial-gradient(circle at 15% 42%, rgba(86,210,189,.12), transparent 26%),
        radial-gradient(circle at 85% 48%, rgba(96,50,165,.24), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.96), rgba(4,3,16,.92));
}

.finisher-sura.cinematic-finisher-v2 .finisher-director-projectile {
    color: #d8c4ff;
    filter: drop-shadow(0 0 18px rgba(165,130,255,.96)) drop-shadow(0 0 42px rgba(86,210,189,.28));
}

.finisher-shaman.cinematic-finisher-v2 .finisher-director-projectile {
    color: #fff8bd;
    filter: drop-shadow(0 0 20px rgba(255,246,130,.96)) drop-shadow(0 0 44px rgba(86,210,189,.45));
}

@media (max-width: 980px) {
    .cinematic-finisher-v2 {
        grid-template-columns: 1fr;
        gap: 14px;
        align-content: center;
        padding-top: 130px;
    }

    .finisher-director-fighter {
        min-height: auto;
    }

    .finisher-director-center {
        min-height: 150px;
    }

    .finisher-director-projectile {
        animation-name: director-projectile-shot-mobile;
    }

    @keyframes director-projectile-shot-mobile {
        0% { opacity: 0; transform: translateX(-42vw) scale(.65) rotate(-12deg); }
        10% { opacity: 1; }
        72% { opacity: 1; transform: translateX(24vw) scale(1.1) rotate(2deg); }
        100% { opacity: 0; transform: translateX(38vw) scale(1.85) rotate(12deg); }
    }

    .finisher-director-result {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        transform: translateY(30px) scale(.96);
    }

    @keyframes director-result-in {
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
}


/* =========================================================
   v0.57.0 — character professions
   ========================================================= */
.player-application-form select[data-character-profession-select]:disabled {
    opacity: .62;
    cursor: not-allowed;
}

.player-application-form label small {
    display: block;
    margin-top: 6px;
    color: var(--muted, #8fa197);
    font-size: .72rem;
    line-height: 1.35;
}

.ninja-archer .finisher-director-projectile {
    filter: drop-shadow(0 0 22px rgba(86,210,189,.95)) drop-shadow(0 0 46px rgba(240,213,143,.72));
}

.ninja-dagger .finisher-director-projectile {
    color: #dfffee;
    filter: drop-shadow(0 0 20px rgba(86,210,189,.95)) drop-shadow(0 0 36px rgba(255,255,255,.42));
}

.warrior-body .finisher-director-impact {
    box-shadow: 0 0 130px rgba(255,150,80,.58), 0 0 170px rgba(240,213,143,.34);
}

.warrior-mental .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,120,80,.22), transparent 24%),
        radial-gradient(circle at 16% 42%, rgba(240,213,143,.18), transparent 26%),
        radial-gradient(circle at 84% 48%, rgba(80,120,255,.15), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.96), rgba(12,8,4,.90));
}

.sura-weapon .finisher-director-projectile {
    color: #e8dfff;
    filter: drop-shadow(0 0 18px rgba(165,130,255,.92)) drop-shadow(0 0 34px rgba(240,213,143,.44));
}

.sura-bm .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(120,70,210,.30), transparent 23%),
        radial-gradient(circle at 15% 42%, rgba(86,210,189,.10), transparent 26%),
        radial-gradient(circle at 85% 48%, rgba(75,30,130,.28), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.96), rgba(4,3,16,.92));
}

.shaman-dragon .finisher-director-impact {
    background:
        radial-gradient(circle, rgba(255,255,255,.90), rgba(255,225,120,.50) 18%, rgba(255,120,70,.22) 42%, transparent 68%);
}

.shaman-healer .finisher-director-impact {
    background:
        radial-gradient(circle, rgba(255,255,255,.94), rgba(255,248,190,.58) 18%, rgba(86,210,189,.25) 42%, transparent 68%);
}


/* =========================================================
   v0.58.0 — Finisher Studio intensity modes
   ========================================================= */
.finisher-intensity-clean .finisher-lightning,
.finisher-intensity-clean .finisher-director-cut,
.finisher-intensity-clean .finisher-director-slash.s2,
.finisher-intensity-clean .finisher-director-slash.s3,
.finisher-intensity-clean .finisher-director-ring.r2 {
    display: none;
}

.finisher-intensity-clean .finisher-director-bg::before {
    opacity: .08;
}

.finisher-intensity-clean .finisher-director-bg::after {
    opacity: .36;
}

.finisher-intensity-clean .finisher-director-particles i:nth-child(n+5) {
    display: none;
}

.finisher-intensity-epic .finisher-director-fighter.is-winner {
    box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 58px rgba(86,210,189,.13), inset 0 1px 0 rgba(255,255,255,.08);
}

.finisher-intensity-legendary .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 218, 128, .34), transparent 24%),
        radial-gradient(circle at 16% 42%, rgba(86, 210, 189, .26), transparent 28%),
        radial-gradient(circle at 84% 48%, rgba(255, 80, 70, .20), transparent 26%),
        linear-gradient(115deg, rgba(0,0,0,.98), rgba(2,10,8,.90));
}

.finisher-intensity-legendary .finisher-director-header h2,
.finisher-intensity-legendary .finisher-director-result strong {
    text-shadow:
        0 0 52px rgba(240,213,143,.32),
        0 0 90px rgba(86,210,189,.16),
        0 22px 90px rgba(0,0,0,.72);
}

.finisher-intensity-legendary .finisher-director-projectile {
    filter: drop-shadow(0 0 22px rgba(86,210,189,.95)) drop-shadow(0 0 48px rgba(240,213,143,.72));
}

.finisher-intensity-legendary .finisher-director-impact {
    box-shadow: 0 0 140px rgba(240,213,143,.58), 0 0 190px rgba(86,210,189,.32);
}


/* =========================================================
   v0.59.0 — epic finishers + navigation polish
   ========================================================= */
.site-header {
    width: calc(100% - 24px);
    max-width: none;
    margin-top: 10px;
    border-radius: 28px;
}

.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.main-navigation a {
    border-radius: 14px;
}

.cinematic-finisher-v2 {
    grid-template-columns: minmax(260px, 1fr) minmax(240px, .65fr) minmax(260px, 1fr);
    gap: clamp(16px, 3.6vw, 56px);
    padding: clamp(24px, 5vw, 80px) clamp(20px, 3vw, 38px) clamp(130px, 18vh, 180px);
}

.finisher-director-side {
    position: relative;
    z-index: 3;
    display: grid;
    align-items: center;
    min-height: clamp(320px, 44vh, 520px);
}

.finisher-director-side-left {
    justify-items: start;
}

.finisher-director-side-right {
    justify-items: end;
}

.finisher-director-fighter {
    width: min(100%, 440px);
    min-height: clamp(340px, 48vh, 560px);
    justify-self: stretch;
    align-content: center;
    justify-items: center;
    text-align: center;
    overflow: hidden;
}

.finisher-director-fighter.is-left {
    justify-self: start;
}

.finisher-director-fighter.is-right {
    justify-self: end;
}

.finisher-director-fighter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 20%, transparent 80%, rgba(0,0,0,.18));
    opacity: .75;
    pointer-events: none;
}

.finisher-director-fighter em,
.finisher-director-fighter mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-style: normal;
    font-weight: 1000;
    line-height: 1;
}

.finisher-director-fighter em {
    margin-bottom: 14px;
    border: 1px solid rgba(86,210,189,.20);
    background: rgba(86,210,189,.08);
    color: #dcfff5;
    font-size: .64rem;
}

.finisher-director-fighter mark {
    margin-top: 14px;
    border: 1px solid rgba(240,213,143,.24);
    background: rgba(240,213,143,.08);
    color: var(--gold-light);
    font-size: .62rem;
}

.finisher-director-fighter i {
    position: relative;
}

.finisher-director-fighter i::after {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.08);
    opacity: .55;
}

.finisher-director-center {
    min-height: clamp(320px, 48vh, 560px);
    justify-self: center;
    width: 100%;
    max-width: 420px;
}

.finisher-director-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(200px, 26vw, 420px);
    height: clamp(200px, 26vw, 420px);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.finisher-director-wave.wave-a {
    border: 1px solid rgba(240,213,143,.35);
}

.finisher-director-wave.wave-b {
    border: 1px solid rgba(86,210,189,.35);
}

.cinematic-finisher-v2.is-impact .finisher-director-wave.wave-a {
    animation: director-wave-bloom 1.05s ease-out forwards;
}

.cinematic-finisher-v2.is-impact .finisher-director-wave.wave-b {
    animation: director-wave-bloom 1.05s ease-out .08s forwards;
}

@keyframes director-wave-bloom {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    22% { opacity: .88; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

.finisher-director-impact-word {
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;
    color: rgba(255,255,255,.96);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 7vw, 6.5rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(255,255,255,.5), 0 0 68px rgba(240,213,143,.42);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    pointer-events: none;
}

.cinematic-finisher-v2.is-impact .finisher-director-impact-word {
    animation: director-impact-word 1s cubic-bezier(.16,.84,.18,1) forwards;
}

@keyframes director-impact-word {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    20% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
}

.finisher-director-result u {
    display: block;
    max-width: 760px;
    margin: 12px auto 0;
    color: #f8e6ad;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}

.cinematic-finisher-v2.is-executing .finisher-director-fighter.is-winner {
    transform: scale(1.07) translateY(-8px);
}

.cinematic-finisher-v2.is-impact .finisher-director-fighter.is-loser::after {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,255,255,.20), transparent 55%);
    animation: finisher-card-burst .85s ease-out forwards;
}

@keyframes finisher-card-burst {
    0% { opacity: 0; transform: scale(.5); }
    35% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* Profession-specific visual identities */
.ninja-archer .finisher-director-bg {
    background:
        radial-gradient(circle at 22% 50%, rgba(86,210,189,.22), transparent 22%),
        radial-gradient(circle at 80% 50%, rgba(255,230,150,.18), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.97), rgba(2,16,12,.92));
}

.ninja-archer .finisher-director-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(86,210,189,.18), rgba(255,238,170,.92), rgba(86,210,189,.18), transparent);
}

.ninja-archer .finisher-director-projectile {
    width: clamp(110px, 14vw, 190px);
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,239,186,.95) 25%, rgba(86,210,189,.95) 70%, rgba(255,255,255,0));
    color: transparent;
    box-shadow: 0 0 26px rgba(255,239,186,.72), 0 0 48px rgba(86,210,189,.44);
}

.ninja-dagger .finisher-director-projectile,
.ninja-dagger .finisher-director-slash {
    color: #e8fff6;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), rgba(86,210,189,.78), transparent);
}

.ninja-dagger .finisher-director-slash {
    height: 7px;
    box-shadow: 0 0 44px rgba(86,210,189,.55);
}

.ninja-dagger.cinematic-finisher-v2.is-impact .finisher-director-slash {
    animation-duration: .38s;
}

.warrior-body .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,150,80,.28), transparent 22%),
        radial-gradient(circle at 20% 50%, rgba(255,215,150,.12), transparent 26%),
        linear-gradient(115deg, rgba(0,0,0,.97), rgba(18,8,2,.92));
}

.warrior-body .finisher-director-impact,
.warrior-body .finisher-director-wave.wave-a,
.warrior-body .finisher-director-wave.wave-b {
    box-shadow: 0 0 160px rgba(255,120,70,.55), 0 0 210px rgba(240,213,143,.30);
    border-color: rgba(255,160,90,.55);
}

.warrior-body .finisher-director-impact-word {
    color: #ffd1ab;
}

.warrior-mental .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(80,120,255,.16), transparent 24%),
        radial-gradient(circle at 15% 46%, rgba(255,180,120,.18), transparent 24%),
        radial-gradient(circle at 85% 46%, rgba(240,213,143,.14), transparent 22%),
        linear-gradient(115deg, rgba(0,0,0,.97), rgba(12,8,4,.92));
}

.warrior-mental .finisher-director-center b {
    border-radius: 28px;
    transform: scale(.7) rotate(45deg);
}

.cinematic-finisher-v2.is-visible.warrior-mental .finisher-director-center b {
    animation-name: director-mark-in-mental;
}

@keyframes director-mark-in-mental {
    60% { transform: scale(1.06) rotate(45deg); opacity: 1; }
    100% { transform: scale(1) rotate(45deg); opacity: 1; }
}

.warrior-mental .finisher-director-impact-word {
    color: #d9e2ff;
    text-shadow: 0 0 24px rgba(120,160,255,.45), 0 0 72px rgba(255,215,150,.30);
}

.sura-weapon .finisher-director-projectile {
    width: clamp(70px, 9vw, 140px);
    height: clamp(180px, 24vw, 320px);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(214,200,255,.90) 18%, rgba(126,92,220,.92) 60%, rgba(0,0,0,0));
    color: transparent;
    clip-path: polygon(50% 0%, 70% 12%, 58% 12%, 58% 86%, 68% 100%, 50% 92%, 32% 100%, 42% 86%, 42% 12%, 30% 12%);
    box-shadow: 0 0 36px rgba(165,130,255,.62), 0 0 80px rgba(240,213,143,.24);
}

.cinematic-finisher-v2.is-executing.sura-weapon .finisher-director-projectile {
    animation-name: director-projectile-sword;
}

@keyframes director-projectile-sword {
    0% { opacity: 0; transform: translateX(-34vw) scale(.4) rotate(-26deg); }
    12% { opacity: 1; }
    74% { opacity: 1; transform: translateX(16vw) scale(.92) rotate(4deg); }
    100% { opacity: 0; transform: translateX(28vw) scale(1.32) rotate(18deg); }
}

.sura-bm .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(106,60,210,.32), transparent 23%),
        radial-gradient(circle at 22% 46%, rgba(36,16,76,.38), transparent 25%),
        radial-gradient(circle at 80% 46%, rgba(130,90,255,.18), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.98), rgba(4,3,16,.94));
}

.sura-bm .finisher-director-impact {
    background: radial-gradient(circle, rgba(255,255,255,.84), rgba(162,117,255,.55) 18%, rgba(72,24,150,.50) 42%, transparent 68%);
}

.sura-bm .finisher-director-impact-word {
    color: #e4d3ff;
}

.shaman-dragon .finisher-director-bg {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,130,70,.28), transparent 22%),
        radial-gradient(circle at 16% 42%, rgba(255,210,100,.24), transparent 26%),
        radial-gradient(circle at 84% 48%, rgba(255,70,40,.20), transparent 24%),
        linear-gradient(115deg, rgba(0,0,0,.97), rgba(18,6,2,.92));
}

.shaman-dragon .finisher-director-projectile {
    background: radial-gradient(circle, rgba(255,215,130,.85), rgba(255,115,70,.95), transparent 72%);
    color: #fff5c9;
    filter: drop-shadow(0 0 22px rgba(255,160,80,.95)) drop-shadow(0 0 56px rgba(255,90,40,.45));
}

.shaman-dragon .finisher-director-impact-word {
    color: #ffd3aa;
}

.shaman-healer .finisher-lightning {
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(86,210,189,.30) 49%, rgba(255,255,255,.85) 50%, rgba(255,247,170,.32) 51%, transparent 52%),
        linear-gradient(0deg, transparent 0 48%, rgba(86,210,189,.24) 49%, rgba(255,255,255,.75) 50%, transparent 52%);
}

.shaman-healer .finisher-director-projectile {
    background: radial-gradient(circle, rgba(255,255,255,.96), rgba(255,248,190,.82) 28%, rgba(86,210,189,.55) 52%, transparent 74%);
    color: #fffdf2;
}

.shaman-healer .finisher-director-impact,
.shaman-healer .finisher-director-wave.wave-a,
.shaman-healer .finisher-director-wave.wave-b {
    box-shadow: 0 0 130px rgba(255,248,190,.50), 0 0 190px rgba(86,210,189,.34);
}

.shaman-healer .finisher-director-impact-word {
    color: #fef6be;
}

.finisher-intensity-clean .finisher-director-impact-word,
.finisher-intensity-clean .finisher-director-wave.wave-b,
.finisher-intensity-clean .finisher-director-result u {
    display: none;
}

.finisher-intensity-epic .finisher-director-impact-word {
    font-size: clamp(2rem, 6vw, 5.2rem);
}

.finisher-intensity-legendary .finisher-director-impact-word {
    text-shadow:
        0 0 26px rgba(255,255,255,.72),
        0 0 60px rgba(240,213,143,.54),
        0 0 110px rgba(86,210,189,.20);
}

@media (max-width: 980px) {
    .site-header {
        width: calc(100% - 14px);
        margin-top: 6px;
        padding-inline: 14px;
        border-radius: 20px;
    }

    .cinematic-finisher-v2 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 122px;
        padding-bottom: 180px;
    }

    .finisher-director-side {
        min-height: auto;
    }

    .finisher-director-side-left,
    .finisher-director-side-right {
        justify-items: center;
    }

    .finisher-director-fighter {
        width: 100%;
        min-height: auto;
        padding-block: 18px;
    }

    .finisher-director-fighter strong {
        font-size: clamp(1.8rem, 7vw, 3.2rem);
    }
}


/* =========================================================
   v0.60.0 — Ultra Finishers / profesyjne sceny finisha
   ========================================================= */
.cinematic-finisher-v2.finisher-ultra {
    background: #010302;
}

.finisher-letterbox {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    height: clamp(34px, 6vh, 72px);
    background: rgba(0,0,0,.92);
    opacity: 0;
    pointer-events: none;
}

.finisher-letterbox-top {
    top: 0;
    transform: translateY(-100%);
}

.finisher-letterbox-bottom {
    bottom: 0;
    transform: translateY(100%);
}

.finisher-ultra.is-visible .finisher-letterbox-top,
.finisher-ultra.is-visible .finisher-letterbox-bottom {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .55s cubic-bezier(.16,.84,.18,1);
}

.finisher-ultra-vignette {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.82) 100%),
        linear-gradient(90deg, rgba(0,0,0,.72), transparent 22%, transparent 78%, rgba(0,0,0,.72));
}

.finisher-ultra.is-visible .finisher-ultra-vignette {
    animation: ultra-vignette-in 1.1s ease forwards;
}

@keyframes ultra-vignette-in {
    to { opacity: 1; }
}

.finisher-stage-stamp {
    position: absolute;
    top: clamp(12px, 3vh, 30px);
    right: clamp(16px, 4vw, 54px);
    z-index: 31;
    padding: 9px 14px;
    border: 1px solid rgba(240,213,143,.28);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(0,0,0,.38);
    box-shadow: 0 0 28px rgba(240,213,143,.10);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-10px);
}

.cinematic-finisher-v2.is-visible .finisher-stage-stamp {
    animation: ultra-stage-stamp .7s ease .35s forwards;
}

@keyframes ultra-stage-stamp {
    to { opacity: 1; transform: translateY(0); }
}

.finisher-stage-final .finisher-stage-stamp,
.finisher-stage-boost .finisher-stage-stamp {
    border-color: rgba(255,224,140,.45);
    background: linear-gradient(90deg, rgba(240,213,143,.14), rgba(0,0,0,.42));
    box-shadow: 0 0 34px rgba(240,213,143,.18);
}

.finisher-stage-final .finisher-director-header h2 {
    color: #fff1c8;
    text-shadow:
        0 0 48px rgba(240,213,143,.42),
        0 0 110px rgba(255,185,80,.18),
        0 22px 90px rgba(0,0,0,.78);
}

.finisher-ultra .finisher-director-bg::before {
    opacity: .34;
    animation-duration: 5.4s;
}

.finisher-ultra .finisher-director-bg::after {
    animation-duration: 2.8s;
}

.finisher-ultra .finisher-director-fighter {
    border-width: 1px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(240,213,143,.08), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%, rgba(0,0,0,.18)),
        rgba(0,0,0,.34);
}

.finisher-ultra .finisher-director-fighter.is-winner {
    box-shadow:
        0 38px 120px rgba(0,0,0,.50),
        0 0 70px rgba(86,210,189,.16),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.finisher-ultra.is-charging .finisher-director-fighter.is-winner i {
    animation: ultra-winner-charge .82s ease-out forwards;
}

@keyframes ultra-winner-charge {
    0% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.08); filter: brightness(1.8) saturate(1.35); }
    100% { transform: scale(1); filter: brightness(1.25); }
}

.finisher-ultra.is-impact .finisher-director-fighter.is-loser {
    animation-duration: 1.1s;
}

.finisher-ultra.is-aftershock .finisher-director-fighter.is-loser {
    opacity: .16;
    filter: blur(8px) brightness(.45) saturate(.15);
}

.finisher-profession-effect {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
}

.finisher-profession-effect .fx,
.finisher-profession-effect .fx-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.finisher-profession-effect .fx-glyph {
    z-index: 3;
    display: grid;
    width: clamp(96px, 12vw, 170px);
    height: clamp(96px, 12vw, 170px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.22);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.28);
    box-shadow: inset 0 0 30px rgba(255,255,255,.05), 0 0 64px rgba(240,213,143,.12);
    font-size: clamp(3rem, 6vw, 5.5rem);
}

.finisher-ultra.is-charging .finisher-profession-effect .fx-glyph {
    animation: ultra-glyph-materialize .95s cubic-bezier(.16,.84,.18,1) forwards;
}

.finisher-ultra.is-impact .finisher-profession-effect .fx-glyph {
    animation: ultra-glyph-break .65s ease-out forwards;
}

@keyframes ultra-glyph-materialize {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.36) rotate(-18deg); }
    65% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0); }
    100% { opacity: .92; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes ultra-glyph-break {
    0% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); filter: blur(8px); }
}

.finisher-ultra-burst {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.finisher-ultra-burst i {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(160px, 24vw, 360px);
    height: 5px;
    border-radius: 999px;
    opacity: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(240,213,143,.78), transparent);
    box-shadow: 0 0 34px rgba(240,213,143,.55);
}

.finisher-ultra-burst i:nth-child(1) { --rot: 0deg; }
.finisher-ultra-burst i:nth-child(2) { --rot: 60deg; }
.finisher-ultra-burst i:nth-child(3) { --rot: 120deg; }
.finisher-ultra-burst i:nth-child(4) { --rot: 180deg; }
.finisher-ultra-burst i:nth-child(5) { --rot: 240deg; }
.finisher-ultra-burst i:nth-child(6) { --rot: 300deg; }

.finisher-ultra.is-impact .finisher-ultra-burst i {
    animation: ultra-burst-ray .58s ease-out forwards;
}

@keyframes ultra-burst-ray {
    0% { opacity: 0; transform: rotate(var(--rot)) scaleX(.08); }
    32% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--rot)) scaleX(1.1); }
}

/* Archer — łuk i strzała */
.finisher-effect-archer .fx-a {
    width: clamp(180px, 28vw, 440px);
    height: clamp(180px, 28vw, 440px);
    border: 7px solid rgba(86,210,189,.75);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    filter: drop-shadow(0 0 22px rgba(86,210,189,.6));
    transform: translate(-48%, -50%) rotate(-45deg) scale(.4);
}

.finisher-effect-archer .fx-b {
    width: 3px;
    height: clamp(210px, 32vw, 520px);
    background: linear-gradient(transparent, rgba(255,247,192,.96), transparent);
    box-shadow: 0 0 18px rgba(255,247,192,.9);
    transform: translate(-50%, -50%) rotate(90deg) scaleY(.2);
}

.finisher-effect-archer.is-charging .fx-a,
.finisher-effect-archer.is-charging .fx-b {
    animation: ultra-archer-bow .95s ease-out forwards;
}

@keyframes ultra-archer-bow {
    to { opacity: 1; transform: translate(-48%, -50%) rotate(-45deg) scale(1); }
}

.finisher-effect-archer.is-charging .fx-b {
    animation-name: ultra-archer-string;
}

@keyframes ultra-archer-string {
    to { opacity: 1; transform: translate(-50%, -50%) rotate(90deg) scaleY(1); }
}

.finisher-effect-archer .finisher-director-projectile {
    height: 12px;
    width: clamp(160px, 24vw, 360px);
    border-radius: 999px;
}

.finisher-effect-archer.is-impact .finisher-director-impact {
    transform: scale(.18);
}

/* Dagger — sztylety */
.finisher-effect-dagger .fx {
    width: clamp(190px, 28vw, 430px);
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), rgba(86,210,189,.86), transparent);
    box-shadow: 0 0 34px rgba(86,210,189,.55);
}

.finisher-effect-dagger .fx-a { --rot: -34deg; }
.finisher-effect-dagger .fx-b { --rot: 34deg; }
.finisher-effect-dagger .fx-c { --rot: 0deg; }
.finisher-effect-dagger .fx-d { --rot: -12deg; }
.finisher-effect-dagger .fx-e { --rot: 12deg; }

.finisher-effect-dagger.is-impact .fx-a,
.finisher-effect-dagger.is-impact .fx-b,
.finisher-effect-dagger.is-impact .fx-c,
.finisher-effect-dagger.is-impact .fx-d,
.finisher-effect-dagger.is-impact .fx-e {
    animation: ultra-dagger-cut .45s ease-out forwards;
}

.finisher-effect-dagger.is-impact .fx-b { animation-delay: .05s; }
.finisher-effect-dagger.is-impact .fx-c { animation-delay: .10s; }
.finisher-effect-dagger.is-impact .fx-d { animation-delay: .15s; }
.finisher-effect-dagger.is-impact .fx-e { animation-delay: .20s; }

@keyframes ultra-dagger-cut {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scaleX(.05); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scaleX(1.35); }
}

/* Body — siła ciała */
.finisher-effect-body .fx-a,
.finisher-effect-body .fx-b,
.finisher-effect-body .fx-c {
    border-radius: 50%;
    border: 3px solid rgba(255,150,80,.65);
    box-shadow: 0 0 36px rgba(255,120,70,.40);
}

.finisher-effect-body .fx-a { width: 130px; height: 130px; }
.finisher-effect-body .fx-b { width: 230px; height: 230px; }
.finisher-effect-body .fx-c { width: 340px; height: 340px; }

.finisher-effect-body.is-impact .fx-a,
.finisher-effect-body.is-impact .fx-b,
.finisher-effect-body.is-impact .fx-c {
    animation: ultra-body-shockwave .95s ease-out forwards;
}

.finisher-effect-body.is-impact .fx-b { animation-delay: .08s; }
.finisher-effect-body.is-impact .fx-c { animation-delay: .16s; }

@keyframes ultra-body-shockwave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
    22% { opacity: .95; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* Mental — umysł */
.finisher-effect-mental .fx-a {
    width: clamp(160px, 22vw, 330px);
    height: clamp(160px, 22vw, 330px);
    border-radius: 50%;
    border: 2px solid rgba(150,180,255,.62);
    box-shadow: inset 0 0 40px rgba(120,160,255,.12), 0 0 48px rgba(120,160,255,.32);
}

.finisher-effect-mental .fx-b {
    width: clamp(280px, 34vw, 520px);
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(150,180,255,.88), transparent);
}

.finisher-effect-mental .fx-c {
    width: 3px;
    height: clamp(280px, 34vw, 520px);
    background: linear-gradient(transparent, rgba(150,180,255,.88), transparent);
}

.finisher-effect-mental.is-charging .fx-a,
.finisher-effect-mental.is-charging .fx-b,
.finisher-effect-mental.is-charging .fx-c {
    animation: ultra-mental-focus 1.25s ease forwards;
}

@keyframes ultra-mental-focus {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-24deg); }
    100% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* Weapon — zaklęta broń */
.finisher-effect-weapon .fx-a {
    width: clamp(80px, 10vw, 150px);
    height: clamp(260px, 38vw, 620px);
    clip-path: polygon(50% 0%, 68% 14%, 58% 14%, 58% 82%, 72% 100%, 50% 90%, 28% 100%, 42% 82%, 42% 14%, 32% 14%);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(230,220,255,.98) 16%, rgba(130,90,255,.95) 58%, transparent 100%);
    filter: drop-shadow(0 0 28px rgba(165,130,255,.65));
}

.finisher-effect-weapon.is-charging .fx-a {
    animation: ultra-weapon-summon 1.15s cubic-bezier(.16,.84,.18,1) forwards;
}

@keyframes ultra-weapon-summon {
    0% { opacity: 0; transform: translate(-50%, -70%) scale(.5) rotate(-22deg); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(0); }
    100% { opacity: .94; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* Black Magic — czarna magia */
.finisher-effect-black-magic .fx-a {
    width: clamp(170px, 24vw, 390px);
    height: clamp(170px, 24vw, 390px);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.18), transparent 14%),
        radial-gradient(circle, rgba(100,60,190,.72), rgba(18,6,42,.74) 42%, transparent 72%);
    box-shadow: 0 0 80px rgba(120,70,255,.38), inset 0 0 60px rgba(0,0,0,.58);
}

.finisher-effect-black-magic .fx-b,
.finisher-effect-black-magic .fx-c {
    width: clamp(240px, 34vw, 550px);
    height: clamp(240px, 34vw, 550px);
    border: 2px solid rgba(166,115,255,.34);
    border-radius: 50%;
}

.finisher-effect-black-magic.is-charging .fx-a,
.finisher-effect-black-magic.is-charging .fx-b,
.finisher-effect-black-magic.is-charging .fx-c {
    animation: ultra-bm-orb 1.35s ease forwards;
}

.finisher-effect-black-magic.is-charging .fx-b { animation-delay: .08s; }
.finisher-effect-black-magic.is-charging .fx-c { animation-delay: .16s; }

@keyframes ultra-bm-orb {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-30deg); }
    100% { opacity: .92; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* Dragon — ogień */
.finisher-effect-dragon .fx-a,
.finisher-effect-dragon .fx-b,
.finisher-effect-dragon .fx-c {
    width: clamp(52px, 7vw, 110px);
    height: clamp(230px, 34vw, 540px);
    border-radius: 999px 999px 40px 40px;
    background: linear-gradient(180deg, rgba(255,245,170,.0), rgba(255,228,120,.95) 18%, rgba(255,102,45,.9) 58%, transparent 100%);
    filter: blur(.4px) drop-shadow(0 0 30px rgba(255,120,50,.72));
    transform-origin: bottom center;
}

.finisher-effect-dragon .fx-a { margin-left: -130px; }
.finisher-effect-dragon .fx-b { margin-left: 0; }
.finisher-effect-dragon .fx-c { margin-left: 130px; }

.finisher-effect-dragon.is-impact .fx-a,
.finisher-effect-dragon.is-impact .fx-b,
.finisher-effect-dragon.is-impact .fx-c {
    animation: ultra-dragon-flame 1s ease-out forwards;
}

.finisher-effect-dragon.is-impact .fx-b { animation-delay: .06s; }
.finisher-effect-dragon.is-impact .fx-c { animation-delay: .12s; }

@keyframes ultra-dragon-flame {
    0% { opacity: 0; transform: translate(-50%, 20%) scaleY(.2); }
    28% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
    100% { opacity: 0; transform: translate(-50%, -62%) scaleY(1.25); }
}

/* Healer — błyskawica */
.finisher-effect-healer .fx-a,
.finisher-effect-healer .fx-b,
.finisher-effect-healer .fx-c {
    width: clamp(14px, 1.5vw, 24px);
    height: clamp(260px, 44vw, 720px);
    clip-path: polygon(48% 0%, 72% 34%, 55% 34%, 80% 100%, 34% 54%, 52% 54%, 28% 0%);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,165,.9), rgba(86,210,189,.68), transparent);
    filter: drop-shadow(0 0 22px rgba(255,255,255,.85)) drop-shadow(0 0 60px rgba(86,210,189,.38));
}

.finisher-effect-healer .fx-a { margin-left: -110px; }
.finisher-effect-healer .fx-b { margin-left: 0; }
.finisher-effect-healer .fx-c { margin-left: 110px; }

.finisher-effect-healer.is-impact .fx-a,
.finisher-effect-healer.is-impact .fx-b,
.finisher-effect-healer.is-impact .fx-c {
    animation: ultra-healer-lightning .65s steps(2, end) forwards;
}

.finisher-effect-healer.is-impact .fx-b { animation-delay: .08s; }
.finisher-effect-healer.is-impact .fx-c { animation-delay: .16s; }

@keyframes ultra-healer-lightning {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleY(.75); }
    35%, 70% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.08); }
}

@media (max-width: 980px) {
    .finisher-stage-stamp {
        right: 12px;
        top: 8px;
        font-size: .58rem;
    }

    .finisher-letterbox {
        height: 28px;
    }

    .finisher-profession-effect .fx-glyph {
        width: 86px;
        height: 86px;
        font-size: 2.6rem;
    }
}


/* =========================================================
   v0.61.0 — distinct profession animations
   ========================================================= */
.finisher-action {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.finisher-action > span {
    position: absolute;
    opacity: 0;
}

.finisher-director-center {
    overflow: visible;
}

/* Generic fallback */
.generic-line {
    left: 50%;
    top: 50%;
    width: min(72vw, 700px);
    height: 2px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(240,213,143,.45), rgba(86,210,189,.9), transparent);
}

.generic-projectile {
    left: 24%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff7d2;
    font-size: clamp(2.2rem, 5vw, 4rem);
    text-shadow: 0 0 18px rgba(255,247,210,.82), 0 0 42px rgba(86,210,189,.42);
}

.generic-impact {
    left: 76%;
    top: 50%;
    width: clamp(90px, 12vw, 170px);
    height: clamp(90px, 12vw, 170px);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.2);
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(240,213,143,.55) 22%, transparent 70%);
}

.cinematic-finisher-v2.is-charging .generic-line {
    opacity: .55;
}

.cinematic-finisher-v2.is-executing .generic-projectile {
    animation: finisher-generic-projectile .7s ease-out forwards;
}

.cinematic-finisher-v2.is-impact .generic-impact {
    animation: finisher-generic-impact .8s ease-out forwards;
}

@keyframes finisher-generic-projectile {
    from { opacity: 0; transform: translate(-26vw, -50%) scale(.5); }
    to { opacity: 1; transform: translate(25vw, -50%) scale(1.1); }
}

@keyframes finisher-generic-impact {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* Archer */
.archer-bow {
    left: 30%;
    top: 50%;
    width: clamp(120px, 16vw, 230px);
    height: clamp(160px, 20vw, 300px);
    border: 6px solid rgba(86,210,189,.9);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    transform: translate(-50%, -50%) scale(.7);
    filter: drop-shadow(0 0 24px rgba(86,210,189,.48));
}

.archer-string {
    left: 30%;
    top: 50%;
    width: 3px;
    height: clamp(140px, 18vw, 260px);
    background: linear-gradient(180deg, transparent, rgba(255,246,170,.92), transparent);
    transform: translate(-50%, -50%) scaleY(.2);
    box-shadow: 0 0 18px rgba(255,246,170,.8);
}

.archer-arrow {
    left: 30%;
    top: 50%;
    width: clamp(180px, 24vw, 380px);
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,246,170,.98) 20%, rgba(86,210,189,.98) 70%, rgba(255,255,255,0));
    transform: translate(-10%, -50%) scaleX(.15);
    box-shadow: 0 0 22px rgba(255,246,170,.65), 0 0 50px rgba(86,210,189,.42);
}

.archer-arrow::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    width: 26px;
    height: 26px;
    background: linear-gradient(45deg, rgba(255,246,170,.95), rgba(86,210,189,.95));
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    transform: translateY(-50%);
}

.archer-trail {
    left: 54%;
    top: 50%;
    width: clamp(180px, 22vw, 320px);
    height: 2px;
    background: linear-gradient(90deg, rgba(255,246,170,.0), rgba(255,246,170,.65), rgba(86,210,189,.0));
    transform: translate(-50%, -50%) scaleX(.2);
}

.archer-target {
    left: 76%;
    top: 50%;
    width: clamp(86px, 10vw, 150px);
    height: clamp(86px, 10vw, 150px);
    border-radius: 50%;
    border: 2px solid rgba(255,246,170,.85);
    transform: translate(-50%, -50%) scale(.35);
    box-shadow: 0 0 30px rgba(255,246,170,.30);
}

.archer-target::before,
.archer-target::after {
    content: "";
    position: absolute;
    background: rgba(255,246,170,.9);
}

.archer-target::before {
    left: 50%;
    top: 10%;
    width: 2px;
    height: 80%;
    transform: translateX(-50%);
}

.archer-target::after {
    top: 50%;
    left: 10%;
    width: 80%;
    height: 2px;
    transform: translateY(-50%);
}

.cinematic-finisher-v2.is-charging .archer-bow,
.cinematic-finisher-v2.is-charging .archer-string {
    animation: archer-charge .6s ease-out forwards;
}

.cinematic-finisher-v2.is-executing .archer-arrow,
.cinematic-finisher-v2.is-executing .archer-trail {
    animation: archer-shot .55s cubic-bezier(.15,.88,.18,1) forwards;
}

.cinematic-finisher-v2.is-impact .archer-target {
    animation: archer-target-hit .9s ease-out forwards;
}

@keyframes archer-charge {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes archer-shot {
    0% { opacity: 0; transform: translate(-10%, -50%) scaleX(.15); }
    14% { opacity: 1; }
    100% { opacity: 1; transform: translate(46%, -50%) scaleX(1.15); }
}
@keyframes archer-target-hit {
    0% { opacity: .5; transform: translate(-50%, -50%) scale(.35); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 42px rgba(255,246,170,.58); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* Dagger */
.dagger-shadow {
    top: 50%;
    width: clamp(120px, 14vw, 220px);
    height: clamp(240px, 26vw, 430px);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(86,210,189,.12), rgba(0,0,0,.34));
    filter: blur(6px);
}

.shadow-a { left: 36%; transform: translate(-50%, -50%) rotate(-10deg); }
.shadow-b { left: 64%; transform: translate(-50%, -50%) rotate(10deg); }

.dagger-slash {
    left: 50%;
    top: 50%;
    width: clamp(190px, 28vw, 420px);
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), rgba(86,210,189,.9), transparent);
    box-shadow: 0 0 38px rgba(86,210,189,.5);
}

.slash-a { transform: translate(-50%, -50%) rotate(-38deg) scaleX(.05); }
.slash-b { transform: translate(-50%, -50%) rotate(38deg) scaleX(.05); }
.slash-c { transform: translate(-50%, -50%) rotate(8deg) scaleX(.05); }
.slash-d { transform: translate(-50%, -50%) rotate(-8deg) scaleX(.05); }

.dagger-impact {
    left: 76%;
    top: 50%;
    width: clamp(120px, 15vw, 220px);
    height: clamp(120px, 15vw, 220px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.85), rgba(86,210,189,.34) 30%, transparent 70%);
    transform: translate(-50%, -50%) scale(.2);
}

.cinematic-finisher-v2.is-charging .dagger-shadow {
    animation: dagger-shadow-in .35s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .slash-a,
.cinematic-finisher-v2.is-impact .slash-b,
.cinematic-finisher-v2.is-impact .slash-c,
.cinematic-finisher-v2.is-impact .slash-d {
    animation: dagger-slash-cut .42s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .slash-b { animation-delay: .05s; }
.cinematic-finisher-v2.is-impact .slash-c { animation-delay: .10s; }
.cinematic-finisher-v2.is-impact .slash-d { animation-delay: .15s; }
.cinematic-finisher-v2.is-aftershock .dagger-impact {
    animation: dagger-impact-burst .7s ease-out forwards;
}
@keyframes dagger-shadow-in {
    from { opacity: 0; }
    to { opacity: .55; }
}
@keyframes dagger-slash-cut {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(.05); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(1.28); }
}
.slash-a { --rot: -38deg; } .slash-b { --rot: 38deg; } .slash-c { --rot: 8deg; } .slash-d { --rot: -8deg; }
@keyframes dagger-impact-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

/* Body */
.body-fist {
    left: 32%;
    top: 50%;
    width: clamp(110px, 13vw, 190px);
    height: clamp(110px, 13vw, 190px);
    background: linear-gradient(135deg, rgba(255,226,170,.96), rgba(255,130,70,.92));
    border-radius: 30% 30% 40% 40%;
    box-shadow: 0 0 36px rgba(255,120,70,.46);
    transform: translate(-50%, -50%) scale(.55);
}
.body-fist::before,
.body-fist::after {
    content: "";
    position: absolute;
    background: rgba(255,226,170,.96);
    border-radius: 999px;
}
.body-fist::before { inset: -14% 18% 62% 18%; }
.body-fist::after { inset: 72% 28% -18% 28%; }
.body-trail {
    left: 46%;
    top: 50%;
    width: clamp(160px, 22vw, 360px);
    height: clamp(48px, 8vw, 96px);
    background: radial-gradient(circle, rgba(255,160,90,.28), transparent 68%);
    transform: translate(-50%, -50%) scaleX(.2);
}
.body-ring {
    left: 74%;
    top: 50%;
    border-radius: 50%;
    border: 3px solid rgba(255,150,80,.65);
    box-shadow: 0 0 34px rgba(255,120,70,.42);
}
.ring-a { width: 110px; height: 110px; transform: translate(-50%, -50%) scale(.2); }
.ring-b { width: 180px; height: 180px; transform: translate(-50%, -50%) scale(.2); }
.ring-c { width: 260px; height: 260px; transform: translate(-50%, -50%) scale(.2); }
.body-impact {
    left: 74%;
    top: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,160,90,.60) 32%, transparent 72%);
    transform: translate(-50%, -50%) scale(.15);
}
.cinematic-finisher-v2.is-executing .body-fist,
.cinematic-finisher-v2.is-executing .body-trail {
    animation: body-punch .48s cubic-bezier(.12,.9,.18,1) forwards;
}
.cinematic-finisher-v2.is-impact .body-impact,
.cinematic-finisher-v2.is-impact .ring-a,
.cinematic-finisher-v2.is-impact .ring-b,
.cinematic-finisher-v2.is-impact .ring-c {
    animation: body-ring-blast .9s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .ring-b { animation-delay: .06s; }
.cinematic-finisher-v2.is-impact .ring-c { animation-delay: .12s; }
@keyframes body-punch {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) translateX(0); }
    100% { opacity: 1; transform: translate(90%, -50%) scale(1.1) translateX(0); }
}
@keyframes body-ring-blast {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* Mental */
.mental-eye {
    left: 50%;
    top: 50%;
    width: clamp(140px, 16vw, 250px);
    height: clamp(78px, 9vw, 130px);
    border: 3px solid rgba(150,180,255,.8);
    border-radius: 999px / 70%;
    transform: translate(-50%, -50%) scale(.2);
    box-shadow: 0 0 30px rgba(120,160,255,.28);
}
.mental-eye::before {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(150,180,255,.72), transparent 70%);
}
.mental-line {
    left: 50%;
    top: 50%;
    background: linear-gradient(90deg, transparent, rgba(150,180,255,.88), transparent);
}
.line-h {
    width: clamp(240px, 32vw, 520px);
    height: 2px;
    transform: translate(-50%, -50%) scaleX(.2);
}
.line-v {
    width: 2px;
    height: clamp(240px, 32vw, 520px);
    transform: translate(-50%, -50%) scaleY(.2);
}
.mental-grid {
    left: 74%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(150,180,255,.48);
}
.grid-a { width: 140px; height: 140px; transform: translate(-50%, -50%) scale(.2); }
.grid-b { width: 240px; height: 240px; transform: translate(-50%, -50%) scale(.2); }
.mental-pulse {
    left: 74%;
    top: 50%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.94), rgba(150,180,255,.52) 36%, transparent 72%);
    transform: translate(-50%, -50%) scale(.18);
}
.cinematic-finisher-v2.is-charging .mental-eye,
.cinematic-finisher-v2.is-charging .mental-line {
    animation: mental-focus-in .72s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .mental-grid,
.cinematic-finisher-v2.is-impact .mental-pulse {
    animation: mental-break-pulse .8s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .grid-b { animation-delay: .08s; }
@keyframes mental-focus-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mental-break-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* Weapon */
.weapon-blade {
    left: 50%;
    top: 24%;
    width: clamp(70px, 8vw, 120px);
    height: clamp(210px, 28vw, 390px);
    clip-path: polygon(50% 0%, 68% 18%, 58% 18%, 58% 84%, 72% 100%, 50% 88%, 28% 100%, 42% 84%, 42% 18%, 32% 18%);
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(233,225,255,.96) 20%, rgba(146,103,255,.96) 62%, transparent);
    transform: translate(-50%, -50%) scale(.45) rotate(-18deg);
    filter: drop-shadow(0 0 30px rgba(146,103,255,.46));
}
.weapon-guard {
    left: 50%;
    top: 50%;
    width: clamp(120px, 16vw, 240px);
    height: 16px;
    background: linear-gradient(90deg, rgba(240,213,143,.96), rgba(146,103,255,.92), rgba(240,213,143,.96));
    transform: translate(-50%, -50%) scaleX(.2);
}
.weapon-handle {
    left: 50%;
    top: 63%;
    width: 14px;
    height: clamp(90px, 12vw, 160px);
    background: linear-gradient(180deg, rgba(240,213,143,.94), rgba(58,38,20,.86));
    transform: translate(-50%, -50%) scaleY(.2);
}
.weapon-aura {
    left: 50%;
    top: 50%;
    width: clamp(180px, 24vw, 320px);
    height: clamp(180px, 24vw, 320px);
    border-radius: 50%;
    border: 2px solid rgba(146,103,255,.34);
    transform: translate(-50%, -50%) scale(.2);
}
.weapon-slash {
    left: 76%;
    top: 50%;
    width: clamp(12px, 1vw, 18px);
    height: clamp(180px, 24vw, 340px);
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.98), rgba(146,103,255,.94), transparent);
    border-radius: 999px;
    transform: translate(-50%, -50%) scaleY(.18) rotate(18deg);
    box-shadow: 0 0 34px rgba(146,103,255,.52);
}
.cinematic-finisher-v2.is-charging .weapon-blade,
.cinematic-finisher-v2.is-charging .weapon-guard,
.cinematic-finisher-v2.is-charging .weapon-handle,
.cinematic-finisher-v2.is-charging .weapon-aura {
    animation: weapon-summon .7s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .weapon-slash {
    animation: weapon-final-slash .6s ease-out forwards;
}
@keyframes weapon-summon {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-25deg); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes weapon-final-slash {
    0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.15) rotate(18deg); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scaleY(1.6) rotate(18deg); }
}

/* Black magic */
.bm-orb {
    left: 50%;
    top: 50%;
    width: clamp(120px, 15vw, 220px);
    height: clamp(120px, 15vw, 220px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(110,72,220,.78) 22%, rgba(20,6,58,.92) 62%, rgba(0,0,0,.18));
    box-shadow: 0 0 52px rgba(110,72,220,.38), inset 0 0 28px rgba(0,0,0,.38);
    transform: translate(-50%, -50%) scale(.2);
}
.bm-ring {
    left: 76%;
    top: 50%;
    border-radius: 50%;
    border: 2px solid rgba(166,115,255,.44);
}
.bm-ring.ring-a { width: 150px; height: 150px; transform: translate(-50%, -50%) scale(.2); }
.bm-ring.ring-b { width: 240px; height: 240px; transform: translate(-50%, -50%) scale(.2); }
.bm-tendril {
    left: 76%;
    top: 50%;
    width: 6px;
    height: clamp(120px, 14vw, 200px);
    background: linear-gradient(180deg, rgba(166,115,255,.0), rgba(166,115,255,.95), rgba(166,115,255,.0));
    transform-origin: top center;
}
.tendril-a { transform: translate(-50%, -50%) rotate(0deg) scaleY(.2); }
.tendril-b { transform: translate(-50%, -50%) rotate(120deg) scaleY(.2); }
.tendril-c { transform: translate(-50%, -50%) rotate(240deg) scaleY(.2); }
.bm-seal {
    left: 76%;
    top: 50%;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.92), rgba(166,115,255,.62) 36%, transparent 72%);
    transform: translate(-50%, -50%) scale(.18);
}
.cinematic-finisher-v2.is-charging .bm-orb {
    animation: bm-orb-grow .8s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .bm-ring,
.cinematic-finisher-v2.is-impact .bm-tendril,
.cinematic-finisher-v2.is-impact .bm-seal {
    animation: bm-seal-out .9s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .bm-ring.ring-b { animation-delay: .08s; }
@keyframes bm-orb-grow {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bm-seal-out {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Dragon */
.dragon-head {
    left: 30%;
    top: 46%;
    width: clamp(110px, 13vw, 180px);
    height: clamp(90px, 10vw, 140px);
    background: linear-gradient(135deg, rgba(255,214,140,.98), rgba(255,88,40,.92));
    clip-path: polygon(0 50%, 28% 10%, 74% 0, 100% 38%, 84% 78%, 36% 100%);
    transform: translate(-50%, -50%) scale(.55);
    box-shadow: 0 0 36px rgba(255,102,45,.45);
}
.dragon-jaw {
    left: 33%;
    top: 53%;
    width: clamp(90px, 11vw, 150px);
    height: clamp(38px, 5vw, 58px);
    background: linear-gradient(135deg, rgba(255,180,100,.96), rgba(255,80,36,.90));
    clip-path: polygon(0 0, 100% 20%, 82% 100%, 10% 60%);
    transform: translate(-50%, -50%) scale(.55) rotate(6deg);
}
.dragon-flame {
    top: 50%;
    height: clamp(40px, 7vw, 90px);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,231,150,.0), rgba(255,231,150,.92) 10%, rgba(255,120,45,.95) 46%, rgba(255,80,20,.75) 72%, rgba(255,120,45,0) 100%);
    filter: blur(1px) drop-shadow(0 0 18px rgba(255,102,45,.68));
}
.flame-a { left: 38%; width: clamp(180px, 22vw, 360px); transform: translate(0, -50%) scaleX(.15); }
.flame-b { left: 43%; width: clamp(220px, 28vw, 430px); transform: translate(0, -50%) scaleX(.15); }
.flame-c { left: 48%; width: clamp(260px, 32vw, 520px); transform: translate(0, -50%) scaleX(.15); }
.dragon-burst {
    left: 78%;
    top: 50%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.94), rgba(255,130,60,.60) 34%, transparent 72%);
    transform: translate(-50%, -50%) scale(.2);
}
.cinematic-finisher-v2.is-charging .dragon-head,
.cinematic-finisher-v2.is-charging .dragon-jaw {
    animation: dragon-head-in .45s ease-out forwards;
}
.cinematic-finisher-v2.is-executing .flame-a,
.cinematic-finisher-v2.is-executing .flame-b,
.cinematic-finisher-v2.is-executing .flame-c {
    animation: dragon-flame-out .75s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .dragon-burst {
    animation: dragon-burst-hit .8s ease-out forwards;
}
@keyframes dragon-head-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dragon-flame-out {
    0% { opacity: 0; transform: translate(0, -50%) scaleX(.12); }
    18% { opacity: 1; }
    100% { opacity: 1; transform: translate(26vw, -50%) scaleX(1.15); }
}
@keyframes dragon-burst-hit {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* Healer */
.healer-cloud {
    left: 76%;
    top: 24%;
    width: clamp(170px, 24vw, 340px);
    height: clamp(70px, 8vw, 120px);
    border-radius: 999px;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.92), rgba(255,248,180,.62) 26%, rgba(86,210,189,.24) 65%, transparent);
    transform: translate(-50%, -50%) scale(.35);
    box-shadow: 0 0 36px rgba(255,248,180,.32);
}
.healer-bolt {
    left: 76%;
    top: 50%;
    width: clamp(16px, 1.2vw, 24px);
    height: clamp(220px, 28vw, 430px);
    clip-path: polygon(48% 0%, 74% 34%, 56% 34%, 80% 100%, 30% 58%, 48% 58%, 24% 0%);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,165,.92), rgba(86,210,189,.70), transparent);
    filter: drop-shadow(0 0 18px rgba(255,255,255,.82)) drop-shadow(0 0 36px rgba(86,210,189,.34));
    transform: translate(-50%, -50%) scaleY(.15);
}
.bolt-a { margin-left: -42px; }
.bolt-b { margin-left: 0; }
.bolt-c { margin-left: 42px; }
.healer-ground {
    left: 76%;
    top: 69%;
    width: clamp(160px, 20vw, 280px);
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255,248,180,.9), transparent);
    transform: translate(-50%, -50%) scaleX(.2);
}
.healer-flash {
    left: 76%;
    top: 50%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.98), rgba(255,248,180,.62) 34%, transparent 72%);
    transform: translate(-50%, -50%) scale(.16);
}
.cinematic-finisher-v2.is-charging .healer-cloud {
    animation: healer-cloud-in .45s ease-out forwards;
}
.cinematic-finisher-v2.is-impact .healer-bolt,
.cinematic-finisher-v2.is-impact .healer-ground,
.cinematic-finisher-v2.is-impact .healer-flash {
    animation: healer-bolt-strike .6s steps(2, end) forwards;
}
.cinematic-finisher-v2.is-impact .bolt-b { animation-delay: .06s; }
.cinematic-finisher-v2.is-impact .bolt-c { animation-delay: .12s; }
@keyframes healer-cloud-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes healer-bolt-strike {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
    35%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Remove old same-for-everyone feeling */
.cinematic-finisher-v2 .finisher-director-projectile,
.cinematic-finisher-v2 .finisher-director-line,
.cinematic-finisher-v2 .finisher-director-impact,
.cinematic-finisher-v2 .finisher-director-ring,
.cinematic-finisher-v2 .finisher-director-slash {
    display: none !important;
}


/* =========================================================
   v0.62.0 — cinematic film finishers
   ========================================================= */
.finisher-film-mode {
    perspective: 1200px;
}

.finisher-film-grain,
.finisher-film-scanlines,
.finisher-film-shutter,
.finisher-shake-enabled.is-camera-shake {
    animation: cinematic-camera-shake .62s cubic-bezier(.16,.84,.18,1) both;
}

.finisher-shake-enabled.finisher-intensity-legendary.is-camera-shake {
    animation-name: cinematic-camera-shake-heavy;
}

@keyframes cinematic-camera-shake {
    0% { transform: translate3d(0,0,0) rotate(0); }
    12% { transform: translate3d(-8px, 5px,0) rotate(-.35deg); }
    28% { transform: translate3d(7px, -4px,0) rotate(.32deg); }
    44% { transform: translate3d(-5px, 3px,0) rotate(-.18deg); }
    62% { transform: translate3d(4px, -2px,0) rotate(.12deg); }
    100% { transform: translate3d(0,0,0) rotate(0); }
}

@keyframes cinematic-camera-shake-heavy {
    0% { transform: translate3d(0,0,0) rotate(0); filter: brightness(1); }
    10% { transform: translate3d(-15px, 8px,0) rotate(-.65deg); filter: brightness(1.45); }
    22% { transform: translate3d(13px, -9px,0) rotate(.72deg); }
    36% { transform: translate3d(-11px, 6px,0) rotate(-.42deg); }
    52% { transform: translate3d(9px, -4px,0) rotate(.28deg); }
    70% { transform: translate3d(-5px, 2px,0) rotate(-.12deg); }
    100% { transform: translate3d(0,0,0) rotate(0); filter: brightness(1); }
}

.finisher-film-mode.is-freeze .finisher-director-fighter {
    filter: grayscale(.45) contrast(1.15) brightness(.80);
}

.finisher-film-mode.is-cinematic-release .finisher-director-fighter {
    filter: none;
    transition: filter .35s ease;
}

.finisher-stage-final.finisher-film-mode .finisher-freeze-card {
    border-color: rgba(255,224,140,.52);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,224,140,.25), transparent 46%),
        radial-gradient(circle at 50% 100%, rgba(86,210,189,.12), transparent 48%),
        rgba(0,0,0,.76);
}

.finisher-stage-final.finisher-film-mode .finisher-freeze-card strong {
    color: #fff2cb;
}

.finisher-stage-final.finisher-film-mode.is-camera-shake .finisher-director-result {
    box-shadow: 0 36px 130px rgba(0,0,0,.65), 0 0 92px rgba(240,213,143,.24), inset 0 1px 0 rgba(255,255,255,.10);
}

@media (max-width: 980px) {
    .finisher-freeze-card {
        min-width: calc(100% - 24px);
        padding: 16px;
    }
}


/* =========================================================
   v0.64.0 — Fight Director / reżyserowane wejścia walk
   ========================================================= */
.fight-director-intro {
    display: grid;
    place-items: center;
    padding: clamp(22px, 4vw, 58px);
    isolation: isolate;
}

.fight-director-veil {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 50% 50%, rgba(240,213,143,.16), transparent 26%),
        radial-gradient(circle at 18% 50%, rgba(86,210,189,.12), transparent 28%),
        radial-gradient(circle at 82% 50%, rgba(255,70,60,.10), transparent 28%),
        rgba(0,0,0,.90);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.fight-director-grain {
    position: absolute;
    z-index: -1;
    inset: -20%;
    opacity: .18;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.09) 0 1px, transparent 1px 100%),
        radial-gradient(circle at 70% 65%, rgba(255,255,255,.06) 0 1px, transparent 1px 100%),
        radial-gradient(circle at 40% 82%, rgba(255,255,255,.04) 0 1px, transparent 1px 100%);
    background-size: 17px 17px, 23px 23px, 31px 31px;
    mix-blend-mode: screen;
    animation: fight-director-grain .65s steps(2, end) infinite;
}

@keyframes fight-director-grain {
    0% { transform: translate(0,0); }
    50% { transform: translate(1.5%, -1%); }
    100% { transform: translate(-1%, 1.5%); }
}

.fight-director-corners {
    position: absolute;
    z-index: 4;
    inset: clamp(18px, 3vw, 42px);
    pointer-events: none;
}

.fight-director-corners i {
    position: absolute;
    width: clamp(42px, 6vw, 88px);
    height: clamp(42px, 6vw, 88px);
    border-color: rgba(240,213,143,.42);
    opacity: 0;
}

.fight-director-corners i:nth-child(1) {
    left: 0;
    top: 0;
    border-left: 2px solid;
    border-top: 2px solid;
}

.fight-director-corners i:nth-child(2) {
    right: 0;
    top: 0;
    border-right: 2px solid;
    border-top: 2px solid;
}

.fight-director-corners i:nth-child(3) {
    left: 0;
    bottom: 0;
    border-left: 2px solid;
    border-bottom: 2px solid;
}

.fight-director-corners i:nth-child(4) {
    right: 0;
    bottom: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.fight-director-intro.is-visible .fight-director-corners i {
    animation: fight-director-corner-in .65s ease .18s forwards;
}

@keyframes fight-director-corner-in {
    to { opacity: 1; }
}

.fight-director-header {
    position: absolute;
    top: clamp(24px, 5vh, 68px);
    left: 50%;
    z-index: 5;
    width: min(1100px, calc(100% - 44px));
    text-align: center;
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
}

.fight-director-intro.is-visible .fight-director-header {
    animation: fight-director-header-in .72s cubic-bezier(.16,.84,.18,1) forwards;
}

@keyframes fight-director-header-in {
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.fight-director-header span,
.fight-director-header h2,
.fight-director-header p {
    display: block;
}

.fight-director-header span {
    color: var(--turquoise);
    font-size: .68rem;
    font-weight: 1000;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.fight-director-header h2 {
    margin: 8px 0 6px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 7.5rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.07em;
    text-transform: uppercase;
    text-shadow:
        0 0 46px rgba(240,213,143,.22),
        0 18px 80px rgba(0,0,0,.72);
}

.fight-director-header p {
    max-width: 780px;
    margin: 0 auto;
    color: #9fb2a8;
    line-height: 1.45;
}

.fight-director-meta {
    position: absolute;
    left: 50%;
    top: clamp(142px, 23vh, 230px);
    z-index: 5;
    display: grid;
    gap: 4px;
    width: min(680px, calc(100% - 44px));
    padding: 14px 22px;
    border: 1px solid rgba(240,213,143,.20);
    border-radius: 20px;
    background: rgba(0,0,0,.34);
    box-shadow: 0 20px 70px rgba(0,0,0,.30);
    text-align: center;
    opacity: 0;
    transform: translateX(-50%) scale(.94);
}

.fight-director-intro.is-visible .fight-director-meta {
    animation: fight-director-meta-in .72s ease .32s forwards;
}

@keyframes fight-director-meta-in {
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.fight-director-meta span,
.fight-director-meta strong,
.fight-director-meta small {
    display: block;
}

.fight-director-meta span {
    color: var(--turquoise);
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.fight-director-meta strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: .92;
    text-transform: uppercase;
}

.fight-director-meta small {
    color: #9fb2a8;
}

.fight-director-stage {
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(180px, .55fr) minmax(230px, 1fr);
    gap: clamp(18px, 4vw, 64px);
    width: min(1420px, 100%);
    align-items: center;
    margin-top: clamp(120px, 20vh, 190px);
}

.fight-director-fighter {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: clamp(300px, 42vh, 500px);
    padding: clamp(18px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid rgba(240,213,143,.22);
    border-radius: clamp(24px, 3vw, 38px);
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.13), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%, rgba(0,0,0,.20)),
        rgba(0,0,0,.30);
    box-shadow:
        0 34px 110px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);
    opacity: 0;
}

.fight-director-fighter.is-left {
    transform: translateX(-70px) scale(.92);
}

.fight-director-fighter.is-right {
    transform: translateX(70px) scale(.92);
}

.fight-director-intro.is-visible .fight-director-fighter.is-left {
    animation: fight-director-left-in .78s cubic-bezier(.16,.84,.18,1) .38s forwards;
}

.fight-director-intro.is-visible .fight-director-fighter.is-right {
    animation: fight-director-right-in .78s cubic-bezier(.16,.84,.18,1) .48s forwards;
}

@keyframes fight-director-left-in {
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fight-director-right-in {
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.fight-director-fighter em,
.fight-director-fighter b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.fight-director-fighter em {
    margin-bottom: 16px;
    border: 1px solid rgba(86,210,189,.22);
    background: rgba(86,210,189,.08);
    color: #dffff6;
    font-size: .62rem;
}

.fight-director-fighter > span {
    display: grid;
    width: clamp(92px, 10vw, 152px);
    height: clamp(92px, 10vw, 152px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.40);
    border-radius: 36px;
    color: var(--gold-light);
    background:
        radial-gradient(circle, rgba(240,213,143,.18), transparent 66%),
        rgba(0,0,0,.22);
    box-shadow: 0 0 54px rgba(240,213,143,.16);
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 5vw, 5.2rem);
}

.fight-director-fighter strong {
    max-width: 430px;
    margin-top: 16px;
    overflow: hidden;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4.8vw, 5.7rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: -.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.fight-director-fighter small {
    margin-top: 10px;
    color: #9fb2a8;
    font-size: .76rem;
    font-weight: 800;
}

.fight-director-fighter b {
    margin-top: 14px;
    border: 1px solid rgba(240,213,143,.22);
    background: rgba(240,213,143,.07);
    color: var(--gold-light);
    font-size: .62rem;
}

.fight-director-versus {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 18px;
    border: 1px solid rgba(240,213,143,.18);
    border-radius: 50px;
    background:
        radial-gradient(circle, rgba(240,213,143,.14), transparent 60%),
        rgba(0,0,0,.22);
    box-shadow: 0 0 70px rgba(240,213,143,.08);
    opacity: 0;
    transform: scale(.78);
}

.fight-director-intro.is-visible .fight-director-versus {
    animation: fight-director-vs-in .72s cubic-bezier(.16,.84,.18,1) .72s forwards;
}

@keyframes fight-director-vs-in {
    to { opacity: 1; transform: scale(1); }
}

.fight-director-versus i {
    display: grid;
    width: clamp(88px, 10vw, 150px);
    height: clamp(88px, 10vw, 150px);
    place-items: center;
    border: 1px solid rgba(240,213,143,.32);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(0,0,0,.20);
    box-shadow: inset 0 0 24px rgba(255,255,255,.04), 0 0 48px rgba(240,213,143,.12);
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-style: normal;
}

.fight-director-versus strong {
    color: #fff2cb;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: .84;
}

.fight-director-versus small {
    color: var(--turquoise);
    font-size: .66rem;
    font-weight: 1000;
    letter-spacing: .17em;
}

.fight-director-versus u {
    max-width: 260px;
    color: #9fb2a8;
    font-size: .78rem;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.fight-director-footer {
    position: absolute;
    left: 50%;
    bottom: clamp(28px, 6vh, 72px);
    z-index: 5;
    display: grid;
    gap: 4px;
    width: min(760px, calc(100% - 44px));
    padding: 16px 22px;
    border: 1px solid rgba(240,213,143,.20);
    border-radius: 20px;
    background: rgba(0,0,0,.38);
    text-align: center;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.fight-director-intro.is-climax .fight-director-footer {
    animation: fight-director-footer-in .62s ease forwards;
}

@keyframes fight-director-footer-in {
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.fight-director-footer span {
    color: var(--turquoise);
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.fight-director-footer strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 3.2rem);
    font-weight: 500;
}

/* typy walk */
.fight-director-final .fight-director-veil {
    background:
        radial-gradient(circle at 50% 45%, rgba(255,224,140,.28), transparent 28%),
        radial-gradient(circle at 18% 50%, rgba(86,210,189,.14), transparent 28%),
        radial-gradient(circle at 82% 50%, rgba(255,120,70,.14), transparent 28%),
        rgba(0,0,0,.92);
}

.fight-director-final .fight-director-header h2 {
    color: #fff2cb;
    text-shadow:
        0 0 54px rgba(240,213,143,.36),
        0 0 110px rgba(255,180,80,.16),
        0 20px 90px rgba(0,0,0,.75);
}

.fight-director-final .fight-director-meta,
.fight-director-final .fight-director-footer {
    border-color: rgba(255,224,140,.34);
    box-shadow: 0 0 62px rgba(240,213,143,.12);
}

.fight-director-semifinal .fight-director-veil {
    background:
        radial-gradient(circle at 50% 45%, rgba(86,210,189,.18), transparent 28%),
        radial-gradient(circle at 85% 50%, rgba(240,213,143,.14), transparent 28%),
        rgba(0,0,0,.91);
}

.fight-director-third .fight-director-veil {
    background:
        radial-gradient(circle at 50% 45%, rgba(240,213,143,.20), transparent 28%),
        radial-gradient(circle at 15% 50%, rgba(255,100,70,.10), transparent 28%),
        rgba(0,0,0,.91);
}

.fight-director-rivalry .fight-director-veil {
    background:
        radial-gradient(circle at 30% 50%, rgba(255,80,70,.16), transparent 25%),
        radial-gradient(circle at 70% 50%, rgba(86,210,189,.16), transparent 25%),
        rgba(0,0,0,.92);
}

.fight-director-rivalry .fight-director-versus i {
    animation: fight-rivalry-pulse .8s ease-in-out infinite alternate;
}

@keyframes fight-rivalry-pulse {
    from { box-shadow: 0 0 40px rgba(255,80,70,.12), inset 0 0 24px rgba(255,255,255,.04); }
    to { box-shadow: 0 0 70px rgba(86,210,189,.22), inset 0 0 24px rgba(255,255,255,.04); }
}

.fight-director-league .fight-director-veil {
    background:
        radial-gradient(circle at 50% 45%, rgba(86,210,189,.16), transparent 28%),
        radial-gradient(circle at 85% 50%, rgba(90,130,255,.10), transparent 28%),
        rgba(0,0,0,.91);
}

@media (max-width: 980px) {
    .fight-director-stage {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 180px;
    }

    .fight-director-fighter {
        min-height: auto;
    }

    .fight-director-versus {
        min-height: 180px;
    }

    .fight-director-meta {
        top: 120px;
    }

    .fight-director-header h2 {
        font-size: clamp(2rem, 11vw, 4.4rem);
    }
}


/* =========================================================
   v0.65.0 — spread fighter cards to both sides
   ========================================================= */
.cinematic-finisher-v2 {
    width: min(1760px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(360px, 1fr) minmax(180px, 280px) minmax(360px, 1fr);
    align-items: center;
}

.finisher-director-side {
    width: 100%;
}

.finisher-director-side-left {
    justify-items: start;
    padding-left: clamp(10px, 3vw, 64px);
}

.finisher-director-side-right {
    justify-items: end;
    padding-right: clamp(10px, 3vw, 64px);
}

.finisher-director-fighter {
    width: min(100%, 540px);
}

.finisher-director-side-left .finisher-director-fighter {
    justify-self: start;
}

.finisher-director-side-right .finisher-director-fighter {
    justify-self: end;
}

.fight-director-stage {
    width: min(1760px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(360px, 1fr) minmax(180px, 280px) minmax(360px, 1fr);
    align-items: center;
}

.fight-director-fighter {
    width: min(100%, 540px);
}

.fight-director-fighter.is-left {
    justify-self: start;
}

.fight-director-fighter.is-right {
    justify-self: end;
}

@media (max-width: 1180px) {
    .cinematic-finisher-v2 {
        grid-template-columns: minmax(280px, 1fr) minmax(160px, 220px) minmax(280px, 1fr);
        gap: 20px;
    }

    .fight-director-stage {
        grid-template-columns: minmax(280px, 1fr) minmax(160px, 220px) minmax(280px, 1fr);
        gap: 20px;
    }

    .finisher-director-side-left {
        padding-left: 0;
    }

    .finisher-director-side-right {
        padding-right: 0;
    }

    .finisher-director-fighter,
    .fight-director-fighter {
        width: min(100%, 460px);
    }
}

@media (max-width: 980px) {
    .cinematic-finisher-v2 {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .finisher-director-side-left,
    .finisher-director-side-right {
        justify-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .finisher-director-side-left .finisher-director-fighter,
    .finisher-director-side-right .finisher-director-fighter,
    .fight-director-fighter.is-left,
    .fight-director-fighter.is-right {
        justify-self: center;
    }
}


/* =========================================================
   v0.66.0 — esports broadcast cards
   ========================================================= */
.finisher-esports-layout {
    width: min(1920px, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(420px, 1fr) minmax(150px, 220px) minmax(420px, 1fr);
    gap: clamp(26px, 4vw, 54px);
    padding-left: clamp(18px, 3vw, 42px);
    padding-right: clamp(18px, 3vw, 42px);
}

.finisher-esports-layout .finisher-director-side-left {
    padding-left: clamp(36px, 6vw, 120px);
}

.finisher-esports-layout .finisher-director-side-right {
    padding-right: clamp(36px, 6vw, 120px);
}

.finisher-esports-layout .finisher-director-fighter {
    width: min(100%, 620px);
    min-height: clamp(360px, 48vh, 580px);
}

.finisher-esports-layout .finisher-director-side-left .finisher-director-fighter {
    justify-self: start;
    transform-origin: left center;
}

.finisher-esports-layout .finisher-director-side-right .finisher-director-fighter {
    justify-self: end;
    transform-origin: right center;
}

.fight-director-esports .fight-director-stage {
    width: min(1920px, 100%);
    grid-template-columns: minmax(420px, 1fr) minmax(150px, 220px) minmax(420px, 1fr);
    gap: clamp(26px, 4vw, 54px);
    padding-left: clamp(18px, 3vw, 42px);
    padding-right: clamp(18px, 3vw, 42px);
}

.fight-director-esports .fight-director-fighter {
    width: min(100%, 620px);
    min-height: clamp(340px, 44vh, 560px);
}

.fight-director-esports .fight-director-fighter.is-left {
    justify-self: start;
    transform-origin: left center;
}

.fight-director-esports .fight-director-fighter.is-right {
    justify-self: end;
    transform-origin: right center;
}

.fight-director-esports .fight-director-versus {
    min-height: 240px;
}

@media (max-width: 1280px) {
    .finisher-esports-layout {
        grid-template-columns: minmax(320px, 1fr) minmax(140px, 200px) minmax(320px, 1fr);
    }

    .fight-director-esports .fight-director-stage {
        grid-template-columns: minmax(320px, 1fr) minmax(140px, 200px) minmax(320px, 1fr);
    }

    .finisher-esports-layout .finisher-director-side-left {
        padding-left: 22px;
    }

    .finisher-esports-layout .finisher-director-side-right {
        padding-right: 22px;
    }
}

@media (max-width: 980px) {
    .finisher-esports-layout,
    .fight-director-esports .fight-director-stage {
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }

    .finisher-esports-layout .finisher-director-side-left,
    .finisher-esports-layout .finisher-director-side-right {
        padding-left: 0;
        padding-right: 0;
    }

    .finisher-esports-layout .finisher-director-fighter,
    .fight-director-esports .fight-director-fighter {
        width: min(100%, 520px);
        min-height: auto;
    }

    .finisher-esports-layout .finisher-director-side-left .finisher-director-fighter,
    .finisher-esports-layout .finisher-director-side-right .finisher-director-fighter,
    .fight-director-esports .fight-director-fighter.is-left,
    .fight-director-esports .fight-director-fighter.is-right {
        justify-self: center;
    }
}


/* =========================================================
   v0.67.0 — equal level fighter cards
   ========================================================= */
.cinematic-finisher-v2,
.finisher-esports-layout,
.fight-director-stage,
.fight-director-esports .fight-director-stage {
    align-items: center !important;
}

.finisher-director-side,
.finisher-director-side-left,
.finisher-director-side-right {
    align-self: stretch;
    display: grid;
    align-items: center;
}

.finisher-director-side-left,
.finisher-director-side-right {
    min-height: clamp(360px, 48vh, 580px);
}

.finisher-director-side-left .finisher-director-fighter,
.finisher-director-side-right .finisher-director-fighter {
    align-self: center;
}

.finisher-esports-layout .finisher-director-side-left,
.finisher-esports-layout .finisher-director-side-right {
    align-items: center;
}

.finisher-esports-layout .finisher-director-fighter,
.fight-director-esports .fight-director-fighter {
    align-self: center;
}

/* Wyrównanie poziomu: zwycięzca nie podskakuje wyżej niż druga karta. */
.cinematic-finisher-v2.is-executing .finisher-director-fighter.is-winner,
.finisher-esports-layout.is-executing .finisher-director-fighter.is-winner {
    transform: scale(1.07) !important;
}

.cinematic-finisher-v2.is-impact .finisher-director-fighter.is-loser,
.finisher-esports-layout.is-impact .finisher-director-fighter.is-loser {
    transform: scale(.98) !important;
}

/* Fight Director: obie karty kończą animację na tym samym Y. */
.fight-director-intro.is-visible .fight-director-fighter.is-left,
.fight-director-intro.is-visible .fight-director-fighter.is-right,
.fight-director-esports.is-visible .fight-director-fighter.is-left,
.fight-director-esports.is-visible .fight-director-fighter.is-right {
    transform: translateX(0) translateY(0) scale(1);
}

@media (max-width: 980px) {
    .finisher-director-side-left,
    .finisher-director-side-right {
        min-height: auto;
    }
}


/* =========================================================
   v0.68.0 — fixed finisher card lanes / equal left-right level
   ========================================================= */

/* Naprawa zgubionego stylu freeze card — wcześniej robił się czarny pasek z undefined. */
.finisher-freeze-card {
    position: absolute;
    z-index: 32;
    left: 50%;
    top: 43%;
    display: grid;
    gap: 5px;
    min-width: min(620px, calc(100% - 50px));
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid rgba(240,213,143,.32);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.18), transparent 46%),
        rgba(0,0,0,.70);
    box-shadow: 0 30px 120px rgba(0,0,0,.62), 0 0 70px rgba(240,213,143,.12);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    pointer-events: none;
}

.finisher-freeze-card span,
.finisher-freeze-card strong,
.finisher-freeze-card small {
    display: block;
}

.finisher-freeze-card span {
    color: var(--turquoise);
    font-size: .72rem;
    font-weight: 1000;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.finisher-freeze-card strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 600;
    line-height: .82;
    letter-spacing: -.05em;
    text-transform: uppercase;
    text-shadow: 0 0 46px rgba(240,213,143,.34), 0 0 90px rgba(86,210,189,.16);
}

.finisher-freeze-card small {
    color: #9fb2a8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.finisher-freeze-enabled.is-freeze .finisher-freeze-card {
    animation: freeze-card-in-fixed .62s cubic-bezier(.16,.84,.18,1) forwards;
}

.finisher-freeze-enabled.is-cinematic-release .finisher-freeze-card {
    animation: freeze-card-out-fixed .32s ease forwards;
}

@keyframes freeze-card-in-fixed {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.62); filter: blur(10px); }
    65% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); filter: blur(0); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes freeze-card-out-fixed {
    to { opacity: 0; transform: translate(-50%, -56%) scale(1.14); filter: blur(8px); }
}

/* Desktop: karty finishera nie są już elementami układu siatki.
   Są przypięte do dwóch bocznych pasów, zawsze na jednym poziomie. */
@media (min-width: 981px) {
    .cinematic-finisher-v2 {
        position: absolute;
        inset: 0;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .finisher-director-header {
        top: clamp(18px, 3vh, 38px);
        width: min(980px, calc(100% - 420px));
    }

    .finisher-director-header h2 {
        font-size: clamp(3rem, 7vw, 7.6rem);
    }

    .finisher-director-side {
        position: absolute !important;
        z-index: 9;
        top: 54%;
        display: grid !important;
        align-items: center !important;
        width: min(33vw, 560px);
        min-height: 0 !important;
        transform: translateY(-50%);
    }

    .finisher-director-side-left {
        left: clamp(18px, 3vw, 76px);
        right: auto;
        justify-items: start !important;
        padding-left: 0 !important;
    }

    .finisher-director-side-right {
        right: clamp(18px, 3vw, 76px);
        left: auto;
        justify-items: end !important;
        padding-right: 0 !important;
    }

    .finisher-esports-layout .finisher-director-side-left {
        left: clamp(8px, 1.8vw, 34px);
    }

    .finisher-esports-layout .finisher-director-side-right {
        right: clamp(8px, 1.8vw, 34px);
    }

    .finisher-director-fighter,
    .finisher-esports-layout .finisher-director-fighter {
        align-self: center !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-height: clamp(330px, 43vh, 520px) !important;
        max-height: min(560px, 68vh);
        transform: scale(.96) !important;
        transform-origin: center center !important;
    }

    .cinematic-finisher-v2.is-visible .finisher-director-fighter {
        animation: director-fighter-in-same-level .62s cubic-bezier(.16,.84,.18,1) forwards !important;
    }

    @keyframes director-fighter-in-same-level {
        to { opacity: 1; transform: scale(1) !important; }
    }

    .cinematic-finisher-v2.is-executing .finisher-director-fighter.is-winner,
    .finisher-esports-layout.is-executing .finisher-director-fighter.is-winner {
        transform: scale(1.045) !important;
    }

    .cinematic-finisher-v2.is-impact .finisher-director-fighter.is-loser,
    .finisher-esports-layout.is-impact .finisher-director-fighter.is-loser {
        transform: scale(.98) !important;
    }

    .finisher-director-center {
        position: absolute !important;
        z-index: 7;
        left: 50%;
        top: 54%;
        width: min(28vw, 460px) !important;
        max-width: 460px !important;
        min-height: clamp(280px, 40vh, 500px) !important;
        transform: translate(-50%, -50%);
    }

    .finisher-director-result {
        bottom: clamp(18px, 4vh, 46px);
    }
}

/* Fight Director desktop: te same boczne pasy i ten sam poziom kart. */
@media (min-width: 981px) {
    .fight-director-stage,
    .fight-director-esports .fight-director-stage {
        position: relative;
        display: grid;
        grid-template-columns: minmax(360px, 1fr) minmax(170px, 260px) minmax(360px, 1fr);
        align-items: center !important;
        width: min(1760px, 100%);
        margin-inline: auto;
    }

    .fight-director-fighter,
    .fight-director-esports .fight-director-fighter {
        align-self: center !important;
        width: min(100%, 560px) !important;
        min-height: clamp(300px, 40vh, 500px) !important;
        transform-origin: center center !important;
    }

    .fight-director-fighter.is-left,
    .fight-director-esports .fight-director-fighter.is-left {
        justify-self: start !important;
    }

    .fight-director-fighter.is-right,
    .fight-director-esports .fight-director-fighter.is-right {
        justify-self: end !important;
    }

    .fight-director-intro.is-visible .fight-director-fighter.is-left,
    .fight-director-intro.is-visible .fight-director-fighter.is-right,
    .fight-director-esports.is-visible .fight-director-fighter.is-left,
    .fight-director-esports.is-visible .fight-director-fighter.is-right {
        transform: translateX(0) translateY(0) scale(1) !important;
    }
}


/* =========================================================
   v0.71.0 — Broadcast HUD / transmisja esportowa
   ========================================================= */
.live-broadcast-hud {
    position: fixed;
    z-index: 36;
    left: 50%;
    top: clamp(84px, 10vh, 118px);
    display: grid;
    gap: 10px;
    width: min(1500px, calc(100% - 36px));
    transform: translateX(-50%);
    pointer-events: none;
}

.broadcast-topline,
.broadcast-scorebug,
.broadcast-ticker {
    border: 1px solid rgba(240,213,143,.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(240,213,143,.10), transparent 50%),
        linear-gradient(90deg, rgba(0,0,0,.58), rgba(4,20,18,.66), rgba(0,0,0,.58));
    box-shadow:
        0 20px 80px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.broadcast-topline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 16px;
}

.broadcast-topline span,
.broadcast-topline em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.broadcast-topline span {
    color: #031413;
    background: linear-gradient(135deg, var(--turquoise), #f4df9a);
}

.broadcast-topline em {
    color: var(--gold-light);
    border: 1px solid rgba(240,213,143,.24);
    font-style: normal;
    background: rgba(240,213,143,.07);
}

.broadcast-topline strong {
    overflow: hidden;
    color: #f8e8bb;
    font-family: Georgia, serif;
    font-size: clamp(1rem, 2vw, 1.65rem);
    font-weight: 500;
    letter-spacing: .02em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.broadcast-scorebug {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 230px) minmax(220px, 1fr);
    align-items: stretch;
    overflow: hidden;
    border-radius: 24px;
}

.broadcast-scorebug::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(86,210,189,.13), transparent 26%, transparent 74%, rgba(255,78,64,.12)),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 45%, rgba(0,0,0,.16));
    pointer-events: none;
}

.broadcast-player,
.broadcast-core {
    position: relative;
    z-index: 1;
}

.broadcast-player {
    display: grid;
    align-content: center;
    min-height: 92px;
    padding: 14px clamp(14px, 2.5vw, 28px);
}

.broadcast-player-left {
    text-align: left;
    border-right: 1px solid rgba(240,213,143,.14);
}

.broadcast-player-right {
    text-align: right;
    border-left: 1px solid rgba(240,213,143,.14);
}

.has-broadcast-corners .broadcast-player-left {
    background:
        radial-gradient(circle at 0% 50%, rgba(86,210,189,.26), transparent 56%),
        linear-gradient(90deg, rgba(86,210,189,.14), transparent 72%);
}

.has-broadcast-corners .broadcast-player-right {
    background:
        radial-gradient(circle at 100% 50%, rgba(255,78,64,.22), transparent 56%),
        linear-gradient(270deg, rgba(255,150,70,.12), transparent 72%);
}

.broadcast-player small,
.broadcast-player strong,
.broadcast-player span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.broadcast-player small {
    color: var(--turquoise);
    font-size: .6rem;
    font-weight: 1000;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.broadcast-player-right small {
    color: #ffb08a;
}

.broadcast-player strong {
    margin-top: 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 4rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.broadcast-player span {
    margin-top: 6px;
    color: #9fb2a8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.broadcast-core {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    min-height: 104px;
    padding: 10px;
    background:
        radial-gradient(circle, rgba(240,213,143,.16), transparent 62%),
        rgba(0,0,0,.24);
    text-align: center;
}

.broadcast-core > span {
    max-width: 220px;
    overflow: hidden;
    color: var(--turquoise);
    font-size: .62rem;
    font-weight: 1000;
    letter-spacing: .15em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.broadcast-core strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    color: #fff2cb;
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 5rem);
    font-weight: 500;
    line-height: .78;
}

.broadcast-core i {
    color: rgba(240,213,143,.48);
    font-style: normal;
}

.broadcast-core small {
    color: #96aaa0;
    font-size: .58rem;
    font-weight: 1000;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.broadcast-ticker {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    overflow: hidden;
    border-radius: 14px;
}

.broadcast-ticker span {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #031413;
    background: var(--turquoise);
    font-size: .56rem;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.broadcast-ticker strong {
    overflow: hidden;
    color: #e8dbc1;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-broadcast-hud.is-main-event .broadcast-topline,
.live-broadcast-hud.is-main-event .broadcast-scorebug,
.has-main-event .broadcast-topline,
.has-main-event .broadcast-scorebug {
    border-color: rgba(255,224,140,.40);
    box-shadow:
        0 28px 110px rgba(0,0,0,.44),
        0 0 60px rgba(240,213,143,.13),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.live-broadcast-hud.is-main-event .broadcast-topline span,
.has-main-event .broadcast-topline span {
    background: linear-gradient(135deg, #fff2ba, #f3b35f);
}

.live-broadcast-hud.is-main-event .broadcast-core {
    background:
        radial-gradient(circle, rgba(255,224,140,.26), transparent 62%),
        rgba(0,0,0,.30);
}

.live-overlay-shell:not(.has-broadcast-hud) .live-broadcast-hud {
    display: none;
}

.live-overlay-shell:not(.has-broadcast-ticker) .broadcast-ticker {
    display: none;
}

.live-overlay-shell.has-broadcast-hud .live-hype-strip {
    top: clamp(218px, 27vh, 286px);
    opacity: .82;
}

@media (max-width: 1100px) {
    .live-broadcast-hud {
        top: 82px;
        width: calc(100% - 20px);
    }

    .broadcast-scorebug {
        grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
    }

    .broadcast-player strong {
        font-size: clamp(1.3rem, 4vw, 2.8rem);
    }
}

@media (max-width: 760px) {
    .broadcast-topline {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: center;
    }

    .broadcast-scorebug {
        grid-template-columns: 1fr;
    }

    .broadcast-player-left,
    .broadcast-player-right {
        text-align: center;
        border: 0;
    }

    .broadcast-ticker {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .live-overlay-shell.has-broadcast-hud .live-hype-strip {
        display: none;
    }
}


/* =========================================================
   v0.72.0 — League Show / efekty każdy z każdym
   ========================================================= */
.live-league-row[data-standing-player-id] {
    position: relative;
    overflow: hidden;
}

.live-league-row[data-standing-player-id]::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.live-league-row.is-rank-up::before {
    background:
        linear-gradient(90deg, rgba(86,210,189,.22), transparent 62%),
        radial-gradient(circle at 12% 50%, rgba(86,210,189,.22), transparent 38%);
}

.live-league-row.is-rank-down::before {
    background:
        linear-gradient(90deg, rgba(255,78,64,.16), transparent 62%),
        radial-gradient(circle at 12% 50%, rgba(255,78,64,.16), transparent 38%);
}

.live-league-row.is-league-winner {
    border-color: rgba(240,213,143,.38);
}

.live-league-row.is-league-row-animated {
    animation: league-row-pulse .95s cubic-bezier(.16,.84,.18,1) both;
    animation-delay: var(--league-row-delay, 0ms);
}

.live-league-row.is-league-row-animated::before {
    opacity: 1;
    animation: league-row-glow-out 1.45s ease both;
    animation-delay: var(--league-row-delay, 0ms);
}

.live-league-row.is-rank-up::after,
.live-league-row.is-rank-down::after {
    content: attr(data-rank-delta);
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    min-width: 38px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 1000;
    transform: translateY(-50%);
}

.live-league-row.is-rank-up::after {
    color: #041514;
    background: var(--turquoise);
}

.live-league-row.is-rank-down::after {
    color: #fff0e6;
    background: rgba(255,78,64,.72);
}

@keyframes league-row-pulse {
    0% { transform: translateX(0) scale(1); }
    28% { transform: translateX(12px) scale(1.015); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes league-row-glow-out {
    0%, 35% { opacity: 1; }
    100% { opacity: 0; }
}

.league-show-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.league-show-insight {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 13px 14px;
    overflow: hidden;
    border: 1px solid rgba(240,213,143,.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 50%, rgba(86,210,189,.10), transparent 58%),
        rgba(255,255,255,.035);
    opacity: 0;
    transform: translateY(14px) scale(.96);
    animation: league-show-card-in .58s cubic-bezier(.16,.84,.18,1) forwards;
    animation-delay: var(--league-show-delay, 0ms);
}

.league-show-insight::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent, rgba(240,213,143,.16), transparent 28%, rgba(86,210,189,.16), transparent 58%);
    opacity: .28;
    animation: league-show-spin 7s linear infinite;
}

.league-show-insight > span,
.league-show-insight > div {
    position: relative;
    z-index: 1;
}

.league-show-insight > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(240,213,143,.28);
    border-radius: 16px;
    color: var(--gold-light);
    background: rgba(0,0,0,.30);
    font-size: 1.35rem;
    font-weight: 1000;
}

.league-show-insight strong,
.league-show-insight small {
    display: block;
}

.league-show-insight strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.league-show-insight small {
    margin-top: 4px;
    color: #9fb2a8;
    font-size: .73rem;
    font-weight: 800;
    line-height: 1.35;
}

.league-show-legendary {
    border-color: rgba(255,224,140,.46);
    background:
        radial-gradient(circle at 0% 50%, rgba(255,224,140,.18), transparent 58%),
        radial-gradient(circle at 100% 50%, rgba(86,210,189,.14), transparent 58%),
        rgba(255,255,255,.04);
    box-shadow: 0 0 44px rgba(240,213,143,.12);
}

.league-show-epic {
    border-color: rgba(86,210,189,.34);
}

.league-show-warning {
    border-color: rgba(255,78,64,.34);
    background:
        radial-gradient(circle at 0% 50%, rgba(255,78,64,.13), transparent 58%),
        rgba(255,255,255,.035);
}

.league-show-leader-new > span,
.league-show-leader-hold > span {
    color: #06110f;
    background: linear-gradient(135deg, #fff1ad, #f4ba62);
}

.league-show-comeback > span {
    color: #041514;
    background: linear-gradient(135deg, var(--turquoise), #d9ff9a);
}

.league-show-upset > span {
    color: #fff0e6;
    background: linear-gradient(135deg, #ff4c3f, #f3b35f);
}

.league-show-win-streak > span {
    color: #1b0802;
    background: linear-gradient(135deg, #ff7a32, #fff1a2);
}

.league-show-loss-streak > span {
    color: #fff0e6;
    background: linear-gradient(135deg, #6a1b1b, #ff6656);
}

.league-show-rematch > span {
    color: #06110f;
    background: linear-gradient(135deg, #b7fff4, #f6df9f);
}

@keyframes league-show-card-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes league-show-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
    .league-show-panel {
        grid-template-columns: 1fr;
    }

    .league-show-insight {
        min-height: 72px;
    }
}


/* =========================================================
   v0.73.0 — League Show timing fix / tabela po overlayu
   ========================================================= */
.live-league-table-panel.is-league-table-reveal {
    position: relative;
    z-index: 40;
    animation: league-table-reveal-focus 1.45s cubic-bezier(.16,.84,.18,1) both;
}

.live-overlay-shell.is-league-table-reveal .live-league-table {
    box-shadow: 0 0 0 1px rgba(240,213,143,.12), 0 0 70px rgba(86,210,189,.12);
}

.live-league-row.is-league-loser {
    border-color: rgba(255,78,64,.22);
}

.live-league-row.is-league-loser::before {
    background:
        linear-gradient(90deg, rgba(255,78,64,.12), transparent 62%),
        radial-gradient(circle at 12% 50%, rgba(255,78,64,.13), transparent 38%);
}

.live-league-row.has-flip-delta {
    will-change: transform, opacity;
}

.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-winner strong {
    color: var(--gold-light);
    text-shadow: 0 0 22px rgba(240,213,143,.20);
}

.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-loser strong {
    color: #ffb89f;
}

.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-winner::after,
.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-loser::after {
    opacity: 1;
}

.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-winner:not(.is-rank-up):not(.is-rank-down)::after {
    content: "WIN";
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    min-width: 44px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(240,213,143,.32);
    border-radius: 999px;
    color: #06110f;
    background: linear-gradient(135deg, #fff1ad, #7ef6df);
    font-size: .62rem;
    font-weight: 1000;
    transform: translateY(-50%);
}

.live-league-table-panel.is-league-table-reveal .live-league-row.is-league-loser:not(.is-rank-up):not(.is-rank-down)::after {
    content: "LOSE";
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    min-width: 44px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(255,78,64,.28);
    border-radius: 999px;
    color: #fff0e6;
    background: rgba(255,78,64,.62);
    font-size: .62rem;
    font-weight: 1000;
    transform: translateY(-50%);
}

@keyframes league-table-reveal-focus {
    0% {
        transform: scale(.985);
        filter: brightness(.90) saturate(.95);
    }
    36% {
        transform: scale(1.012);
        filter: brightness(1.14) saturate(1.18);
    }
    100% {
        transform: scale(1);
        filter: none;
    }
}

/* =========================================================
   v0.77.0 — Kodeks Osiągnięć 2.0
   ========================================================= */
.achievement-stat-grid-wide {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.achievement-filter-panel {
    margin-bottom: 18px;
    padding: 18px;
}

.achievement-search-form {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) minmax(180px, .8fr) minmax(180px, .8fr) auto auto;
    gap: 12px;
    align-items: end;
}

.achievement-search-form label {
    display: grid;
    gap: 7px;
}

.achievement-search-form label > span {
    color: var(--muted);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.achievement-search-form input,
.achievement-search-form select {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    outline: none;
    background: rgba(0, 0, 0, .26);
    color: var(--text);
}

.achievement-search-form input:focus,
.achievement-search-form select:focus {
    border-color: color-mix(in srgb, var(--theme-accent) 58%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

.achievement-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
}

.achievement-category-tabs {
    display: grid;
    grid-template-columns: repeat(10, minmax(82px, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.achievement-category-tabs a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.achievement-category-tabs a:hover,
.achievement-category-tabs a.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-accent) 48%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 10%, rgba(255,255,255,.025));
    color: var(--gold-light);
}

.achievement-category-tabs a > span {
    color: var(--theme-accent);
    font-size: 1rem;
}

.achievement-category-tabs strong {
    overflow: hidden;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-category-tabs small {
    color: var(--muted);
    font-size: .62rem;
}

.achievement-codex-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}

.achievement-codex-heading > strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 500;
}

.achievement-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.achievement-card-badges b {
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 7%, transparent);
    color: var(--muted);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.achievement-codex-card code {
    display: inline-flex;
    margin-top: 10px;
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(0,0,0,.22);
    color: color-mix(in srgb, var(--muted) 88%, transparent);
    font-size: .62rem;
}

.achievement-codex-card.is-secret-hidden {
    border-style: dashed;
    background:
        radial-gradient(circle at 20% 15%, rgba(150, 94, 255, .14), transparent 34%),
        linear-gradient(135deg, rgba(49, 31, 72, .28), rgba(0,0,0,.17));
}

.achievement-codex-card.is-secret-hidden .achievement-codex-icon {
    filter: blur(.3px);
    color: #caaeff;
    text-shadow: 0 0 24px rgba(163, 105, 255, .62);
}

.achievement-codex-card.is-secret-hidden h3 {
    letter-spacing: .28em;
}

.achievement-side-note {
    margin: -5px 0 14px;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.55;
}

.profile-achievement-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.profile-achievement-summary article {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 48%),
        rgba(255,255,255,.025);
}

.profile-achievement-summary strong,
.profile-achievement-summary span,
.profile-achievement-summary small {
    display: block;
}

.profile-achievement-summary strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.65rem;
    font-weight: 500;
}

.profile-achievement-summary span {
    margin-top: 4px;
    color: var(--text);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-achievement-summary small {
    margin-top: 5px;
    overflow: hidden;
    color: var(--muted);
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-achievement-progress {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(0,0,0,.16);
}

.profile-achievement-progress > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.profile-achievement-progress > div:first-child strong {
    color: var(--gold-light);
}

.profile-achievement-progress > i {
    display: block;
    height: 9px;
    margin: 11px 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.profile-achievement-progress > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), var(--gold-light));
    box-shadow: 0 0 18px var(--theme-accent-soft);
}

.profile-achievement-rarity-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-achievement-rarity-counts span {
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .65rem;
}

.profile-achievement-rarity-counts b {
    margin-left: 4px;
    color: var(--gold-light);
}

.profile-achievement-recent {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(255,255,255,.02);
}

.profile-achievement-recent h3 {
    margin: 0 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.profile-achievement-recent > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-achievement-recent article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(0,0,0,.14);
}

.profile-achievement-recent article > span {
    color: var(--gold-light);
    font-size: 1.1rem;
}

.profile-achievement-recent strong,
.profile-achievement-recent small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-achievement-recent strong {
    color: var(--text);
    font-size: .73rem;
}

.profile-achievement-recent small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .63rem;
}

.achievement-unlock-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(0,0,0,.2);
    color: var(--gold-light);
    font-size: .7rem;
    letter-spacing: .08em;
}

.achievement-unlock-card.is-compact {
    padding-top: 26px;
    padding-bottom: 22px;
}

.achievement-unlock-card.is-compact > strong {
    font-size: clamp(2.8rem, 7vw, 4.7rem);
}

.achievement-unlock-card.is-compact h2 {
    font-size: clamp(1.55rem, 4vw, 2.7rem);
}

.achievement-unlock-card.is-compact p {
    max-width: 640px;
    font-size: .84rem;
}

@media (max-width: 1120px) {
    .achievement-stat-grid-wide,
    .profile-achievement-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .achievement-search-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievement-category-tabs {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
    }
}

@media (max-width: 720px) {
    .achievement-stat-grid-wide,
    .profile-achievement-summary,
    .achievement-search-form,
    .profile-achievement-recent > div {
        grid-template-columns: 1fr;
    }

    .achievement-category-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .achievement-category-tabs a {
        min-width: 130px;
    }

    .achievement-card-badges {
        align-items: flex-start;
    }
}

/* Paczka #80 — bezpieczny ekran błędu migracji */
.page-migration-error {
    min-height: 100vh;
    margin: 0;
    background: #050b0d;
    color: var(--text, #edf6ef);
}

.system-message-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(44, 209, 184, .12), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(214, 170, 69, .1), transparent 36%),
        linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .42));
}

.migration-error-shell {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
}

.migration-error-card {
    width: min(900px, 100%);
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid rgba(219, 183, 91, .26);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(9, 22, 23, .96), rgba(5, 12, 14, .98));
    box-shadow: 0 35px 90px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .04);
}

.migration-error-rune {
    display: grid;
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    place-items: center;
    border: 1px solid rgba(219, 183, 91, .35);
    border-radius: 22px;
    background: rgba(219, 183, 91, .08);
    color: #efd27f;
    font-size: 2rem;
}

.migration-error-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.08;
}

.migration-error-lead {
    max-width: 760px;
    color: var(--muted, #aab9b4);
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 1.7;
}

.migration-error-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.migration-error-meta > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(0, 0, 0, .18);
}

.migration-error-meta span {
    color: var(--muted, #aab9b4);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.migration-error-meta strong {
    overflow-wrap: anywhere;
    font-size: .83rem;
}

.migration-error-instructions {
    padding: 16px 18px;
    border-left: 3px solid rgba(239, 210, 127, .75);
    background: rgba(239, 210, 127, .055);
}

.migration-error-instructions p {
    margin: 7px 0 0;
    color: var(--muted, #aab9b4);
    line-height: 1.6;
}

.migration-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.migration-error-actions form {
    margin: 0;
}

.fantasy-button-secondary {
    filter: saturate(.7);
}

.migration-error-footer {
    display: block;
    margin-top: 22px;
    color: var(--muted, #8fa19b);
    line-height: 1.5;
}

@media (max-width: 680px) {
    .migration-error-shell {
        padding: 14px;
    }

    .migration-error-meta {
        grid-template-columns: 1fr;
    }

    .migration-error-actions,
    .migration-error-actions form,
    .migration-error-actions .fantasy-button {
        width: 100%;
    }
}

/* =========================================================
   v0.82.0 — Zapisy bezpośrednio z zakładki Turnieje
   ========================================================= */
.public-tournament-card-interactive {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.public-tournament-card-main {
    display: grid;
    padding: 27px;
    color: inherit;
    text-decoration: none;
}

.public-tournament-card-main > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-tournament-card-main h2 {
    margin: 33px 0 6px;
    color: #eee4c9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}

.public-tournament-card-main > p {
    margin: 0;
    color: #829188;
    font-size: 0.8rem;
}

.public-tournament-card-main > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(200, 164, 93, 0.14);
    color: #6e7e75;
    font-size: 0.67rem;
}

.public-tournament-card-main > footer b {
    color: var(--turquoise);
    font-size: 0.75rem;
}

.public-tournament-application {
    display: grid;
    gap: 11px;
    padding: 18px 27px 24px;
    border-top: 1px solid rgba(200, 164, 93, 0.15);
    background: rgba(0, 0, 0, 0.16);
}

.public-tournament-application .fantasy-button,
.public-tournament-application .ghost-button,
.public-tournament-application .danger-button {
    width: 100%;
    justify-content: center;
}

.public-tournament-login-button {
    text-align: center;
}

.public-tournament-application-state {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 55px;
    padding: 11px 13px;
    border: 1px solid rgba(200, 164, 93, 0.18);
    border-radius: 14px;
    color: #c7d2ca;
    background: rgba(255, 255, 255, 0.025);
}

.public-tournament-application-state > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(200, 164, 93, 0.1);
}

.public-tournament-application-state strong,
.public-tournament-application-state small {
    display: block;
}

.public-tournament-application-state strong {
    color: var(--gold-light);
    font-size: 0.82rem;
}

.public-tournament-application-state small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.public-tournament-application-state.is-approved {
    border-color: rgba(86, 219, 157, 0.28);
    background: rgba(34, 143, 94, 0.08);
}

.public-tournament-application-state.is-pending {
    border-color: rgba(236, 190, 91, 0.28);
    background: rgba(170, 121, 35, 0.08);
}

.public-tournament-application-state.is-muted {
    justify-content: center;
    color: var(--muted);
    text-align: center;
}

.public-tournament-application-state.is-muted strong {
    color: var(--muted);
}

.public-tournament-application-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.public-tournament-application-details > summary {
    list-style: none;
    cursor: pointer;
}

.public-tournament-application-details > summary::-webkit-details-marker {
    display: none;
}

.public-tournament-application-details[open] > summary {
    margin-bottom: 13px;
}

.public-tournament-application-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding-top: 3px;
}

.public-tournament-application-form label {
    display: grid;
    gap: 6px;
}

.public-tournament-application-form label:nth-of-type(4) {
    grid-column: 1 / -1;
}

.public-tournament-application-form label > span {
    color: var(--gold-light);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-tournament-application-form input,
.public-tournament-application-form select,
.public-tournament-application-form textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(200, 164, 93, 0.18);
    border-radius: 12px;
    color: #ece2c7;
    background: rgba(0, 0, 0, 0.28);
}

.public-tournament-application-form button {
    grid-column: 1 / -1;
}

.public-tournament-detail-application {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: start;
    margin: 0 0 24px;
    padding: 24px;
}

.public-tournament-detail-application > header h2 {
    margin: 6px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.public-tournament-detail-application > header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.public-tournament-detail-application .public-tournament-application {
    padding: 0;
    border-top: 0;
    background: transparent;
}

.player-application-history-list article.status-withdrawn {
    border-color: color-mix(in srgb, #9fb1aa 34%, transparent);
}

@media (max-width: 820px) {
    .public-tournament-detail-application {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .public-tournament-application-form {
        grid-template-columns: 1fr;
    }

    .public-tournament-application-form label:nth-of-type(4),
    .public-tournament-application-form button {
        grid-column: auto;
    }
}