: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;
    }
}

/* Paczka 83: wspólne logowanie i kompaktowy ranking strony głównej */
.access-shell{width:min(1180px,calc(100% - 32px));margin:150px auto 80px}.access-hero{padding:42px;text-align:center}.access-hero h1{font-size:clamp(2.4rem,5vw,5rem);margin:.25em 0}.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}.access-card{padding:34px;display:flex;flex-direction:column;gap:18px}.access-card h2{font-size:2.2rem;margin:0}.access-icon{width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--line);border-radius:24px;font-size:2rem}.access-card form{display:grid;gap:14px}.access-card .ghost-button{width:100%}
.home-quick-ranking{padding:24px;align-self:stretch}.home-quick-ranking header{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}.home-ranking-tabs{display:flex;gap:6px}.home-ranking-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}.home-ranking-tabs button.is-active{color:var(--gold);background:rgba(216,183,92,.1)}.home-ranking-list{display:grid;gap:7px}.home-ranking-list a{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(216,183,92,.14);border-radius:12px;text-decoration:none}.home-ranking-list a:nth-child(-n+3)>span{color:var(--gold);font-weight:800}.home-ranking-list strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-ranking-list b{color:var(--gold)}.home-ranking-pane[hidden]{display:none}.elo-hidden-badge{display:inline-flex;padding:4px 9px;border:1px solid rgba(255,190,100,.35);border-radius:999px;color:#ffd58a;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
@media(min-width:1180px){.home-v2-hero{grid-template-columns:minmax(0,1.4fr) minmax(360px,.9fr) minmax(280px,.62fr)}}
@media(max-width:1179px){.home-quick-ranking{grid-column:1/-1}}
@media(max-width:760px){.access-grid{grid-template-columns:1fr}.access-shell{margin-top:110px}.access-card{padding:24px}}

/* =========================================================
   v0.84.0 — odkrywanie osiągnięć i uproszczone nagłówki
   ========================================================= */
.achievement-hero-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
}

.achievement-hero-compact h1 {
    margin: 0 0 12px;
}

.achievement-hero-compact p {
    max-width: 780px;
    margin: 0;
}

.achievement-discovery-meter {
    display: grid;
    min-width: 230px;
    gap: 5px;
    padding: 18px 20px;
    border: 1px solid rgba(219, 186, 96, .25);
    border-radius: 20px;
    background: rgba(0, 0, 0, .16);
}

.achievement-discovery-meter strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.7rem;
}

.achievement-discovery-meter span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.achievement-discovery-meter i {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.achievement-discovery-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--turquoise), var(--gold-light));
    box-shadow: 0 0 18px rgba(83, 223, 202, .28);
}

.achievement-filter-privacy-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .8rem;
}

.achievement-simple-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.achievement-simple-heading h2 {
    margin: 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 500;
}

.achievement-simple-heading p {
    max-width: 660px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .88rem;
}

.achievement-simple-heading > strong {
    display: grid;
    min-width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(219, 186, 96, .22);
    border-radius: 15px;
    color: var(--gold-light);
    background: rgba(0,0,0,.14);
}

/* Niezdobyte osiągnięcia jawne zachowują treść, ale nie kolor rzadkości.
   Kolor rzadkości pojawia się dopiero po pierwszym odblokowaniu przez społeczność. */
.achievement-codex-card.is-visible-unearned {
    --rarity-a: #3f4650;
    --rarity-b: #a5adb8;
    --rarity-glow: rgba(148, 163, 184, .09);
    border-color: rgba(165, 173, 184, .28);
    background:
        radial-gradient(circle at 88% 8%, rgba(148, 163, 184, .08), transparent 38%),
        linear-gradient(145deg, rgba(75, 85, 99, .12), rgba(0,0,0,.16)),
        rgba(255,255,255,.018);
    box-shadow: 0 18px 54px rgba(0,0,0,.24), 0 0 18px rgba(148, 163, 184, .06);
}

.achievement-codex-card.is-visible-unearned .achievement-codex-icon {
    color: #aeb6c1;
    border-color: rgba(174, 182, 193, .30);
    background: rgba(0,0,0,.20);
    box-shadow: none;
    filter: grayscale(1);
}

.achievement-codex-card.is-visible-unearned h3 {
    color: #cbd1d8;
}

.achievement-codex-card.is-visible-unearned p,
.achievement-codex-card.is-visible-unearned em,
.achievement-codex-card.is-visible-unearned footer span {
    color: rgba(203, 209, 216, .66);
}

.achievement-codex-card.is-visible-unearned footer span {
    border-color: rgba(165, 173, 184, .18);
}

.achievement-codex-card.is-undiscovered {
    min-height: 180px;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--rarity-b) 42%, transparent);
}

.achievement-codex-card.is-undiscovered::after {
    opacity: .72;
}

.achievement-codex-card.is-undiscovered h3 {
    color: var(--rarity-b);
    letter-spacing: .16em;
}

.achievement-codex-card.is-undiscovered p {
    color: color-mix(in srgb, var(--parchment) 58%, transparent);
    font-style: italic;
}

.achievement-codex-card.is-undiscovered em {
    color: color-mix(in srgb, var(--rarity-b) 72%, var(--parchment));
}

@media (max-width: 760px) {
    .achievement-hero-compact {
        grid-template-columns: 1fr;
    }

    .achievement-discovery-meter {
        min-width: 0;
    }

    .achievement-simple-heading {
        align-items: center;
    }
}

/* =========================================================
   v0.85.0 — czysty kodeks osiągnięć
   ========================================================= */
.achievement-shell-clean {
    width: min(1380px, calc(100% - 32px));
}

.achievement-hero-clean {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: clamp(26px, 4vw, 46px);
}

.achievement-hero-clean h1 {
    margin: 4px 0 10px;
    font-size: clamp(2.35rem, 5vw, 4.9rem);
}

.achievement-hero-clean p {
    max-width: 720px;
    margin: 0;
}

.achievement-hero-summary {
    display: grid;
    min-width: 220px;
    padding: 18px 22px;
    border: 1px solid rgba(219, 186, 96, .24);
    border-radius: 20px;
    background: rgba(0, 0, 0, .17);
}

.achievement-hero-summary strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
}

.achievement-hero-summary span,
.achievement-hero-summary em {
    color: var(--muted);
    font-size: .74rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.achievement-hero-summary em {
    margin-top: 8px;
    color: var(--turquoise);
}

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

.achievement-search-form-clean {
    grid-template-columns: minmax(220px, 1.25fr) minmax(175px, .72fr) minmax(175px, .72fr) auto auto;
}

.achievement-results-summary {
    display: grid;
    min-width: 105px;
    padding: 10px 14px;
    border-left: 1px solid rgba(219, 186, 96, .2);
    text-align: right;
}

.achievement-results-summary strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.7rem;
    line-height: 1;
}

.achievement-results-summary span,
.achievement-results-summary small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.achievement-codex-panel-clean {
    padding: 20px;
}

.achievement-codex-grid-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.achievement-codex-grid-clean .achievement-codex-card {
    height: 100%;
    min-height: 210px;
}

.achievement-community {
    margin-top: 20px;
    padding: 24px;
}

.achievement-community-heading {
    margin-bottom: 16px;
}

.achievement-community-heading h2,
.achievement-community-grid h3 {
    margin: 4px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.achievement-community-heading h2 {
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
}

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

.achievement-community-grid > article {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(219, 186, 96, .14);
    border-radius: 20px;
    background: rgba(0, 0, 0, .12);
}

.achievement-community-grid h3 {
    margin-bottom: 14px;
    font-size: 1.25rem;
}

@media (max-width: 1050px) {
    .achievement-filter-panel-clean,
    .achievement-hero-clean {
        grid-template-columns: 1fr;
    }

    .achievement-results-summary {
        grid-template-columns: auto auto 1fr;
        gap: 6px;
        align-items: baseline;
        min-width: 0;
        border-top: 1px solid rgba(219, 186, 96, .16);
        border-left: 0;
        text-align: left;
    }
}

@media (max-width: 820px) {
    .achievement-codex-grid-clean,
    .achievement-community-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .achievement-search-form-clean {
        grid-template-columns: 1fr;
    }

    .achievement-hero-summary {
        min-width: 0;
    }

    .achievement-codex-panel-clean,
    .achievement-community {
        padding: 15px;
    }
}

/* =========================================================
   v0.85.0 — Reżyser LIVE: czytelne fazy wyniku i awansu
   ========================================================= */
.victory-cinema[data-director-phase="finisher"] .victory-cinema-stage,
.victory-cinema[data-director-phase="finisher"] .victory-cinema-result {
    opacity: .18;
    filter: blur(2px) saturate(.75);
    transition: opacity .55s ease, filter .55s ease;
}

.victory-cinema[data-director-phase="advance"] .victory-cinema-stage,
.victory-cinema[data-director-phase="result"] .victory-cinema-stage,
.victory-cinema[data-director-phase="result"] .victory-cinema-result {
    opacity: 1;
    filter: none;
}

.victory-cinema[data-director-phase="advance"] .victory-cinema-board-frame {
    animation: live-director-board-focus .72s cubic-bezier(.2,.82,.22,1) both;
}

.victory-cinema[data-director-phase="advance"] .victory-cinema-heading span::after {
    content: " • ŚCIEŻKA AWANSU";
    color: var(--turquoise);
}

body.live-director-busy .duel-intro:not(.is-visible),
body.live-director-busy .achievement-unlock-cinema:not(.is-visible) {
    pointer-events: none;
}

@keyframes live-director-board-focus {
    0% { transform: scale(.975); filter: brightness(.76) saturate(.8); }
    55% { transform: scale(1.012); filter: brightness(1.13) saturate(1.16); }
    100% { transform: scale(1); filter: none; }
}

/* =========================================================
   v0.86.0 — Animacja pozycji tabeli na stronie turnieju
   ========================================================= */
.public-standings-table .public-standing-row[data-standing-player-id] {
    position: relative;
    z-index: 1;
    isolation: isolate;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

.public-standings-table .public-standing-row.is-primary-rank-change {
    z-index: 5;
}

.public-standings-table .public-standing-row.is-primary-rank-change.is-rank-up {
    border-color: rgba(86,210,189,.42);
    background: linear-gradient(90deg, rgba(86,210,189,.12), rgba(255,255,255,.025));
}

.public-standings-table .public-standing-row.is-primary-rank-change.is-rank-down {
    border-color: rgba(255,103,75,.34);
    background: linear-gradient(90deg, rgba(255,82,65,.09), rgba(255,255,255,.02));
}

.public-standings-table .public-standing-row.is-primary-rank-change::after {
    content: attr(data-rank-delta);
    position: absolute;
    right: 10px;
    top: 50%;
    display: grid;
    min-width: 34px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 1000;
    transform: translateY(-50%);
}

.public-standings-table .public-standing-row.is-primary-rank-change.is-rank-up::after {
    color: #031814;
    background: #71dfbf;
}

.public-standings-table .public-standing-row.is-primary-rank-change.is-rank-down::after {
    color: #fff4ef;
    background: #cf5547;
}

.public-standings-table .public-standing-row.is-passive-rank-shift::after {
    display: none;
}

.public-standings-table .public-standing-row.is-league-row-landed {
    animation: public-standing-landed .72s cubic-bezier(.16,.84,.18,1) both;
}

@keyframes public-standing-landed {
    0% { box-shadow: 0 0 0 rgba(86,210,189,0); }
    40% { box-shadow: 0 0 30px rgba(86,210,189,.18); }
    100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .public-standings-table .public-standing-row[data-standing-player-id] {
        animation: none !important;
        transition: none !important;
    }
}

/* Na publicznej tabeli nie zasłaniamy punktów dodatkową plakietką. */
.public-standings-table .public-standing-row.is-primary-rank-change::after {
    display: none;
}

/* =========================================================
   v0.87.0 — Stan przed/po wyniku (tabela i drabinka)
   ========================================================= */
.is-league-state-before .live-league-row.is-league-result-participant,
.public-standings-table .public-standing-row.is-league-result-participant {
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.is-league-state-before .live-league-row.is-league-winner,
.public-standings-table .public-standing-row.is-league-winner {
    border-color: rgba(83, 235, 178, .72) !important;
    background:
        linear-gradient(90deg, rgba(55, 205, 153, .22), rgba(255,255,255,.028) 68%),
        rgba(255,255,255,.025) !important;
    box-shadow: 0 0 34px rgba(55, 205, 153, .20), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.is-league-state-before .live-league-row.is-league-loser,
.public-standings-table .public-standing-row.is-league-loser {
    border-color: rgba(255, 91, 75, .62) !important;
    background:
        linear-gradient(90deg, rgba(219, 66, 55, .18), rgba(255,255,255,.02) 68%),
        rgba(255,255,255,.02) !important;
    box-shadow: 0 0 30px rgba(255, 78, 64, .14), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.public-standings-table .public-standing-row.is-league-winner strong {
    color: #92f1cf;
}

.public-standings-table .public-standing-row.is-league-loser strong {
    color: #ffab96;
}

.live-league-row.is-league-pre-positioned,
.public-standings-table .public-standing-row.is-league-pre-positioned {
    transition: none !important;
    pointer-events: none;
}

.is-bracket-state-before [data-match-card].is-awaiting-bracket-transition {
    border-color: rgba(231, 197, 114, .28);
    box-shadow: 0 0 28px rgba(231, 197, 114, .10);
}

.is-bracket-state-before .is-awaiting-bracket-player {
    border-style: dashed !important;
    border-color: rgba(231, 197, 114, .34) !important;
    background: rgba(255,255,255,.018) !important;
    color: rgba(214, 225, 218, .56) !important;
}

.victory-cinema-player-tile.is-transition-slot-empty,
.victory-cinema-trophy.is-transition-slot-empty {
    border-style: dashed;
    border-color: rgba(231, 197, 114, .30);
    background: rgba(255,255,255,.018);
    box-shadow: inset 0 0 22px rgba(231, 197, 114, .04);
}

.victory-cinema-player-tile.is-transition-slot-empty span,
.victory-cinema-trophy.is-transition-slot-empty strong {
    color: rgba(216, 227, 220, .48);
    text-shadow: none;
}

.victory-cinema-player-tile.is-transition-slot-empty::after {
    content: "miejsce oczekuje";
    margin-left: auto;
    color: rgba(231, 197, 114, .46);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   v0.88.0 — lekka strona publiczna
   ========================================================= */
.navigation-dropdown {
    position: relative;
}

.navigation-dropdown > button {
    position: relative;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 12px 15px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #d7ddcf;
    font: inherit;
    font-size: .87rem;
    letter-spacing: .04em;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.navigation-dropdown > button span {
    color: var(--muted);
    font-size: .75rem;
    transition: transform .2s ease;
}

.navigation-dropdown > button:hover,
.navigation-dropdown.is-current > button,
.navigation-dropdown.is-open > button {
    color: var(--gold-light);
    background: rgba(200, 164, 93, .08);
}

.navigation-dropdown.is-open > button span {
    transform: rotate(180deg);
}

.navigation-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 80;
    display: none;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(200, 164, 93, .28);
    border-radius: 18px;
    background: rgba(4, 16, 13, .98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .48);
    transform: translateX(-50%);
    backdrop-filter: blur(18px);
}

.navigation-dropdown-menu-wide {
    display: none;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    min-width: 360px;
}

.navigation-dropdown.is-open .navigation-dropdown-menu {
    display: grid;
}

.navigation-dropdown-menu a {
    padding: 11px 12px;
    border-radius: 11px;
    white-space: nowrap;
}

.navigation-dropdown-menu a::after {
    display: none;
}

.navigation-dropdown-menu a:hover,
.navigation-dropdown-menu a.is-active {
    background: rgba(200, 164, 93, .1);
}

.main-navigation .navigation-account {
    border: 1px solid rgba(86, 210, 189, .26);
    background: rgba(86, 210, 189, .06);
}

.home-lite-shell {
    width: min(calc(100% - 48px), 1420px);
    margin: 0 auto;
    padding: 140px 0 80px;
}

.home-lite-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    min-height: 500px;
}

.home-lite-intro h1 {
    max-width: 800px;
    margin: 12px 0 16px;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.4rem, 8vw, 7rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.05em;
    text-shadow: 0 0 38px color-mix(in srgb, var(--theme-accent, #d9b763) 18%, transparent), 0 18px 60px rgba(0,0,0,.64);
}

.home-lite-intro p {
    max-width: 650px;
    margin: 0;
    color: color-mix(in srgb, var(--parchment, #e9dfc0) 76%, transparent);
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.7;
}

.home-lite-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.home-lite-ranking {
    min-height: 0;
    padding: 24px;
}

.home-lite-ranking footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(200,164,93,.14);
}

.home-lite-ranking footer a {
    color: var(--muted);
    font-size: .72rem;
}

.home-lite-ranking footer a:hover {
    color: var(--gold-light);
}

.home-tournament-row {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(260px, 1.15fr) minmax(120px, .42fr) auto;
    gap: 20px;
    align-items: center;
    margin-top: 26px;
    padding: 18px 20px;
    border-radius: 22px;
}

.home-tournament-row.is-live {
    box-shadow: 0 0 38px rgba(86,210,189,.12), var(--shadow);
}

.home-tournament-row-title,
.home-tournament-row-match,
.home-tournament-row-progress {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.home-tournament-row small,
.home-tournament-row-title > span,
.home-tournament-row-progress > small {
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .07em;
}

.home-tournament-row-title > strong {
    overflow: hidden;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-tournament-row-title > span b {
    color: var(--theme-primary, #56d2bd);
}

.home-tournament-row-match > strong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: var(--parchment, #e9dfc0);
}

.home-tournament-row-match > strong > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-tournament-row-match > strong > span:last-child {
    text-align: right;
}

.home-tournament-row-match > strong b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.12rem;
}

.home-tournament-row-progress > i,
.public-live-row-progress > i {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.home-tournament-row-progress > i b,
.public-live-row-progress > i b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary, #56d2bd), var(--theme-accent, #d9b763));
    transition: width .35s ease;
}

.home-tournament-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.home-tournament-row-actions .fantasy-button,
.home-tournament-row-actions .ghost-button {
    white-space: nowrap;
}

.home-live-hidden-data {
    display: none !important;
}

.home-activity-strip {
    margin-top: 56px;
}

.home-activity-strip > header {
    margin-bottom: 16px;
}

.home-activity-strip h2 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 500;
}

.home-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-activity-grid article {
    display: grid;
    gap: 7px;
    min-height: 145px;
    padding: 20px;
}

.home-activity-grid article > span {
    color: var(--theme-primary, #56d2bd);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-activity-grid strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
}

.home-activity-grid small {
    color: var(--muted);
    line-height: 1.45;
}

.home-activity-grid a {
    align-self: end;
    color: var(--gold-light);
    font-size: .76rem;
}

.public-page-hero-lite {
    min-height: 0;
    padding-bottom: 28px;
}

.public-page-hero-lite h1 {
    margin-bottom: 10px;
}

.tournament-list-section {
    display: grid;
    gap: 14px;
}

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

.tournament-list-heading h2 {
    margin: 5px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500;
}

.tournament-list-heading > span {
    color: var(--muted);
    font-size: .78rem;
}

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

.public-tournament-row {
    overflow: hidden;
    padding: 0;
    border-radius: 22px;
}

.public-tournament-row.is-live {
    border-color: rgba(86,210,189,.32);
}

.public-tournament-row-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: center;
    padding: 17px 20px;
}

.public-tournament-row-main:hover {
    background: rgba(200,164,93,.045);
}

.public-tournament-row-emblem {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(200,164,93,.26);
    border-radius: 14px;
    color: var(--gold-light);
    background: rgba(0,0,0,.18);
}

.public-tournament-row-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-tournament-row-copy small,
.public-tournament-row-copy span {
    color: var(--muted);
    font-size: .72rem;
}

.public-tournament-row-copy strong {
    overflow: hidden;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.28rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-tournament-row-open {
    color: var(--gold-light);
    font-size: .78rem;
    white-space: nowrap;
}

.public-tournament-row-application {
    padding: 0 20px 16px 84px;
}

.public-tournament-row-application:empty {
    display: none;
}

.public-tournament-row-application .public-tournament-application {
    display: flex;
    gap: 10px;
    align-items: center;
}

.public-tournament-row-application .public-tournament-application-state {
    flex: 1;
}

.public-tournament-row-application .public-tournament-application-details {
    width: min(100%, 760px);
}

.tournament-archive-drawer {
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
}

.tournament-archive-drawer > summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.tournament-archive-drawer > summary::-webkit-details-marker {
    display: none;
}

.tournament-archive-drawer > summary span {
    display: grid;
    gap: 3px;
}

.tournament-archive-drawer > summary small {
    color: var(--muted);
    font-size: .65rem;
    letter-spacing: .12em;
}

.tournament-archive-drawer > summary strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
}

.tournament-archive-drawer > summary b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(200,164,93,.1);
}

.tournament-archive-list {
    display: grid;
    border-top: 1px solid rgba(200,164,93,.14);
}

.tournament-archive-list a {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(200,164,93,.1);
}

.tournament-archive-list a:hover {
    background: rgba(200,164,93,.045);
}

.tournament-archive-list span,
.tournament-archive-list small {
    color: var(--muted);
    font-size: .72rem;
}

.tournament-archive-list strong,
.tournament-archive-list b {
    color: var(--gold-light);
}

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

.tournament-lite-header {
    padding: clamp(22px, 4vw, 36px);
}

.tournament-lite-heading {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    margin-top: 14px;
}

.tournament-lite-heading h1 {
    margin: 6px 0 9px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 500;
    line-height: .95;
}

.tournament-lite-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tournament-lite-meta span {
    padding: 6px 9px;
    border: 1px solid rgba(200,164,93,.16);
    border-radius: 999px;
    color: var(--muted);
    font-size: .7rem;
}

.tournament-lite-application {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(200,164,93,.14);
}

.tournament-lite-application .public-tournament-application {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.tournament-lite-application .public-tournament-application-details {
    width: min(100%, 760px);
}

.public-live-row {
    display: grid;
    grid-template-columns: auto minmax(260px, 1.25fr) minmax(190px, .7fr) minmax(110px, .35fr) auto;
    gap: 18px;
    align-items: center;
    margin: 18px 0 28px;
    padding: 16px 18px;
}

.public-live-row-match,
.public-live-row-next,
.public-live-row-progress {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-live-row small {
    color: var(--muted);
    font-size: .66rem;
    letter-spacing: .06em;
}

.public-live-row-match > strong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.public-live-row-match > strong > span {
    overflow: hidden;
    color: var(--parchment, #e9dfc0);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-live-row-match > strong > span:last-child {
    text-align: right;
}

.public-live-row-match > strong b,
.public-live-row-progress > strong {
    color: var(--gold-light);
}

.public-live-row-next > strong {
    overflow: hidden;
    color: var(--parchment, #e9dfc0);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-public-detail-lite .public-tournament-layout {
    margin-top: 0;
}

.tournament-public-detail-lite .public-participant-drawer {
    margin-top: 24px;
}

.player-account-lite {
    padding-top: 125px;
}

.player-account-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr);
    gap: 36px;
    align-items: center;
    min-height: 360px;
    padding: clamp(28px, 5vw, 56px);
}

.player-account-login h1,
.player-account-summary h1 {
    margin: 7px 0 10px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 500;
    line-height: .95;
}

.player-account-login p,
.player-account-summary p,
.player-account-discord-summary p {
    color: var(--muted);
    line-height: 1.6;
}

.player-account-login aside {
    display: grid;
    justify-items: center;
    padding: 24px;
    border: 1px solid rgba(200,164,93,.18);
    border-radius: 22px;
    text-align: center;
}

.player-account-login aside strong,
.player-account-login aside small {
    display: block;
}

.player-account-login aside strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.player-account-login aside small {
    margin-top: 6px;
    color: var(--muted);
}

.player-account-summary {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: 24px;
    align-items: center;
    padding: 22px 26px;
}

.player-account-summary-profile {
    display: flex;
    gap: 17px;
    align-items: center;
    min-width: 0;
}

.player-account-summary .player-account-avatar {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    margin: 0;
    border-radius: 22px;
    font-size: 1.7rem;
}

.player-account-summary h1 {
    overflow: hidden;
    margin: 3px 0;
    font-size: clamp(1.8rem, 3.3vw, 3.2rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-account-summary p {
    margin: 0;
    font-size: .78rem;
}

.player-account-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 8px 14px;
}

.player-account-summary-stats span {
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
}

.player-account-summary-stats b {
    color: var(--gold-light);
}

.player-account-summary .player-account-actions {
    margin: 0;
    justify-content: flex-end;
}

.account-tabs {
    margin-top: 20px;
}

.account-tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px;
    border: 1px solid rgba(200,164,93,.18);
    border-radius: 16px;
    background: rgba(0,0,0,.16);
}

.account-tab-buttons button {
    flex: 1;
    padding: 12px 16px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}

.account-tab-buttons button.is-active {
    color: var(--gold-light);
    background: rgba(200,164,93,.1);
    box-shadow: inset 0 0 0 1px rgba(200,164,93,.2);
}

.account-tab-pane[hidden] {
    display: none;
}

.player-account-discord-summary {
    min-height: 260px;
}

.player-account-discord-summary > strong {
    display: block;
    margin-top: 18px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 500;
}

.account-status-badge {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(200,164,93,.2);
    border-radius: 999px;
    color: var(--muted);
    font-size: .7rem;
}

.account-status-badge.is-active {
    border-color: rgba(86,210,189,.3);
    color: var(--theme-primary, #56d2bd);
}

.account-application-details > summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.account-application-details > summary::-webkit-details-marker {
    display: none;
}

.account-application-details[open] > summary {
    margin-bottom: 14px;
}

@media (max-width: 1180px) {
    .home-tournament-row,
    .public-live-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .home-tournament-row-match,
    .public-live-row-next {
        grid-column: 2 / 3;
    }

    .home-tournament-row-progress,
    .public-live-row-progress {
        grid-column: 2 / 3;
    }

    .home-tournament-row-actions,
    .public-live-row > .ghost-button {
        grid-column: 3;
        grid-row: 1 / span 3;
        align-self: center;
    }

    .player-account-summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .player-account-summary-stats {
        grid-column: 1 / 2;
    }

    .player-account-summary .player-account-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 980px) {
    .main-navigation .navigation-dropdown {
        width: 100%;
    }

    .navigation-dropdown > button {
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .navigation-dropdown-menu,
    .navigation-dropdown-menu-wide {
        position: static;
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
        margin-top: 4px;
        transform: none;
        box-shadow: none;
    }

    .home-lite-hero,
    .player-account-login {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .home-lite-ranking {
        width: 100%;
    }

    .home-activity-grid {
        grid-template-columns: 1fr;
    }

    .public-tournament-row-main {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .public-tournament-row-open {
        display: none;
    }

    .player-account-summary {
        grid-template-columns: 1fr;
    }

    .player-account-summary-stats,
    .player-account-summary .player-account-actions {
        grid-column: auto;
        grid-row: auto;
    }

    .player-account-summary .player-account-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .home-lite-shell {
        width: min(calc(100% - 20px), 1420px);
        padding-top: 112px;
    }

    .home-lite-intro h1 {
        font-size: clamp(3rem, 16vw, 5rem);
    }

    .home-tournament-row,
    .public-live-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-tournament-row > .live-badge,
    .public-live-row > .live-badge {
        justify-self: start;
    }

    .home-tournament-row-match,
    .home-tournament-row-progress,
    .home-tournament-row-actions,
    .public-live-row-match,
    .public-live-row-next,
    .public-live-row-progress,
    .public-live-row > .ghost-button {
        grid-column: auto;
        grid-row: auto;
    }

    .home-tournament-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .public-tournament-row-main {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 15px;
    }

    .public-tournament-row-main > .live-badge {
        grid-column: 2;
        justify-self: start;
    }

    .public-tournament-row-application {
        padding: 0 15px 15px;
    }

    .public-tournament-row-application .public-tournament-application,
    .tournament-lite-application .public-tournament-application {
        align-items: stretch;
        flex-direction: column;
    }

    .tournament-archive-list a {
        grid-template-columns: 1fr auto;
    }

    .tournament-archive-list span,
    .tournament-archive-list small {
        grid-column: 1;
    }

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

    .player-account-summary-profile {
        align-items: flex-start;
    }

    .player-account-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-tab-buttons {
        position: sticky;
        z-index: 10;
        top: 76px;
        background: rgba(4,16,13,.96);
    }
}

.home-tournament-row-match.is-idle > strong,
.public-live-row-match.is-idle > strong {
    grid-template-columns: 1fr;
}

.home-tournament-row-match.is-idle > strong b,
.home-tournament-row-match.is-idle > strong > span:last-child,
.public-live-row-match.is-idle > strong b,
.public-live-row-match.is-idle > strong > span:last-child {
    display: none;
}

.home-tournament-row-match.is-idle > strong > span:first-child,
.public-live-row-match.is-idle > strong > span:first-child {
    text-align: left;
}

/* =========================================================
   v0.89.0 — Profile i rankingi bez nadmiaru informacji
   ========================================================= */
.profile-section-tabs,
.hall-section-nav {
    display: flex;
    gap: 8px;
    margin: 22px 0 18px;
    padding: 6px;
    border: 1px solid rgba(200,164,93,.18);
    border-radius: 16px;
    background: rgba(2,12,10,.72);
    box-shadow: 0 18px 50px rgba(0,0,0,.16);
}

.profile-section-tabs button,
.hall-section-nav a {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

.profile-section-tabs button:hover,
.hall-section-nav a:hover,
.profile-section-tabs button.is-active,
.hall-section-nav a.is-active {
    color: var(--gold-light);
    background: rgba(200,164,93,.1);
    box-shadow: inset 0 0 0 1px rgba(200,164,93,.2);
}

.profile-section[hidden],
[data-profile-pane][hidden] {
    display: none !important;
}

.public-compact-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--muted);
    font-size: .76rem;
}

.public-compact-stats span {
    white-space: nowrap;
}

.public-compact-stats b {
    margin-right: 4px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1rem;
}

.public-details-panel {
    margin-top: 18px;
    padding: 0;
    overflow: clip;
}

.public-details-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    color: var(--gold-light);
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

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

.public-details-panel > summary::after {
    content: "+";
    color: var(--theme-primary, #56d2bd);
    font-size: 1.15rem;
}

.public-details-panel[open] > summary::after {
    content: "−";
}

.public-details-panel[open] > summary {
    border-bottom: 1px solid rgba(200,164,93,.14);
}

.public-details-panel > :not(summary) {
    margin: 18px;
}

.public-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 18px;
}

.public-details-empty {
    margin: 0;
    color: var(--muted);
}

.elo-lite-hero,
.prestige-lite-hero,
.hall-lite-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
}

.elo-lite-hero p,
.prestige-lite-hero p,
.hall-lite-hero p,
.form-lite-hero p {
    max-width: 680px;
}

.elo-ranking-panel-wide {
    width: 100%;
}

.elo-lite-shell .elo-table-row {
    grid-template-columns: 54px minmax(240px, 1fr) 100px 76px 72px 76px;
}

.form-lite-stats,
.hall-lite-stats {
    margin: 14px 0 24px;
    padding: 11px 15px;
    border: 1px solid rgba(200,164,93,.14);
    border-radius: 13px;
    background: rgba(0,0,0,.13);
}

.form-heat-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-heat-grid-compact .form-heat-card {
    min-height: 0;
}

.form-heat-stats-compact {
    grid-template-columns: repeat(2, minmax(70px, 1fr));
}

.form-lite-changes {
    margin-top: 22px;
}

.form-details-stack {
    display: grid;
    gap: 24px;
}

.form-panel-plain {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.prestige-lite-shell,
.hall-lite-shell,
.legend-lite-shell {
    padding-top: 116px;
}

.prestige-rank-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hall-lite-primary {
    margin-top: 24px;
}

.hall-lite-shell .hall-v3-hero {
    min-height: 0;
}

.hall-lite-shell .hall-v3-class-vitrine header p {
    display: none;
}

.legend-lite-shell .hall-section-nav {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .public-details-grid,
    .elo-lite-hero,
    .prestige-lite-hero,
    .hall-lite-hero {
        grid-template-columns: 1fr;
    }

    .form-heat-grid-compact,
    .prestige-rank-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .elo-lite-shell .elo-table-row {
        grid-template-columns: 48px minmax(210px, 1fr) 90px 70px 66px 70px;
    }
}

@media (max-width: 760px) {
    .profile-section-tabs,
    .hall-section-nav {
        position: sticky;
        z-index: 12;
        top: 76px;
        overflow-x: auto;
        background: rgba(4,16,13,.97);
        scrollbar-width: none;
    }

    .profile-section-tabs::-webkit-scrollbar,
    .hall-section-nav::-webkit-scrollbar {
        display: none;
    }

    .profile-section-tabs button,
    .hall-section-nav a {
        flex: 0 0 auto;
        min-width: 128px;
    }

    .form-heat-grid-compact,
    .prestige-rank-grid-compact {
        grid-template-columns: 1fr;
    }

    .public-compact-stats {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .public-details-panel > :not(summary) {
        margin: 14px;
    }

    .elo-lite-shell .elo-table {
        overflow-x: auto;
    }

    .elo-lite-shell .elo-table-row {
        min-width: 720px;
    }
}

/* =========================================================
   v0.90.0 — lżejszy terminarz i karta pojedynku
   ========================================================= */
.schedule-shell-compact,
.match-preview-shell-compact {
    width: min(1460px, calc(100% - 32px));
    margin: 0 auto;
    padding: 126px 0 72px;
}

.schedule-hero-compact,
.match-preview-hero-compact {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    min-height: 0;
    padding: clamp(24px, 4vw, 42px);
}

.schedule-hero-compact h1,
.match-preview-hero-compact h1 {
    margin: 4px 0 8px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 500;
}

.schedule-hero-compact p,
.match-preview-hero-compact p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.schedule-status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    padding: 15px 20px;
}

.schedule-status-line > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.schedule-status-line strong {
    color: #ece4ca;
    white-space: nowrap;
}

.schedule-status-line small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-status-line nav {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.schedule-status-line nav a {
    padding: 8px 12px;
    border: 1px solid rgba(200, 164, 93, .22);
    border-radius: 10px;
    color: #ded6bb;
    background: rgba(200, 164, 93, .06);
    font-size: .78rem;
    text-decoration: none;
}

.schedule-state-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #64746c;
    box-shadow: 0 0 0 5px rgba(100, 116, 108, .12);
}

.schedule-state-dot.is-live {
    background: #55e3a5;
    box-shadow: 0 0 0 5px rgba(85, 227, 165, .12), 0 0 18px rgba(85, 227, 165, .5);
}

.schedule-focus-grid,
.match-compact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 18px;
    margin-top: 18px;
}

.schedule-current-compact,
.schedule-next-compact,
.match-history-compact,
.match-extra-details {
    padding: clamp(20px, 3vw, 30px);
}

.schedule-current-compact header,
.schedule-next-compact header {
    margin-bottom: 18px;
}

.schedule-current-compact h2,
.schedule-next-compact h2,
.match-history-compact h2 {
    margin: 4px 0 0;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.schedule-current-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(86, 210, 189, .2);
    border-radius: 18px;
    background: rgba(86, 210, 189, .045);
    text-decoration: none;
}

.schedule-current-row > div:last-of-type {
    text-align: right;
}

.schedule-current-row strong {
    display: block;
    color: #efe7cc;
    font-size: 1.08rem;
}

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

.schedule-current-row > b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.7rem;
    white-space: nowrap;
}

.schedule-current-row > em {
    color: var(--turquoise);
    font-style: normal;
}

.schedule-next-list-compact {
    gap: 8px;
}

.schedule-next-list-compact a {
    padding: 11px 13px;
}

.schedule-rounds-compact {
    margin-top: 34px;
}

.schedule-round-list-compact {
    display: grid;
    gap: 12px;
}

.schedule-round-list-compact .schedule-round-card {
    padding: 0;
    overflow: hidden;
}

.schedule-round-list-compact .schedule-round-card > summary,
.schedule-secondary-details details > summary,
.match-extra-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 22px;
    list-style: none;
    cursor: pointer;
}

.schedule-round-list-compact .schedule-round-card > summary::-webkit-details-marker,
.schedule-secondary-details details > summary::-webkit-details-marker,
.match-extra-details > summary::-webkit-details-marker {
    display: none;
}

.schedule-round-list-compact .schedule-round-card > summary h3 {
    margin: 3px 0 0;
    color: #e7dfc4;
    font-family: Georgia, serif;
    font-weight: 500;
}

.schedule-round-list-compact .schedule-round-card > summary aside {
    display: grid;
    grid-template-columns: auto 110px auto;
    align-items: center;
    gap: 12px;
}

.schedule-round-list-compact .schedule-round-card > summary aside strong {
    color: var(--gold-light);
}

.schedule-round-list-compact .schedule-round-card > summary aside i {
    display: block;
    width: 110px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.schedule-round-list-compact .schedule-round-card > summary aside i b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--turquoise), var(--gold-light));
}

.schedule-round-list-compact details[open] > summary em,
.schedule-secondary-details details[open] > summary em,
.match-extra-details[open] > summary em {
    transform: rotate(180deg);
}

.schedule-round-list-compact .schedule-match-list {
    padding: 0 18px 18px;
}

.schedule-secondary-details {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.schedule-secondary-details details {
    overflow: hidden;
}

.schedule-secondary-details summary strong,
.match-extra-details summary strong {
    color: #e7dfc4;
}

.schedule-secondary-details summary span,
.match-extra-details summary span {
    margin-left: auto;
    color: var(--muted);
    font-size: .78rem;
}

.schedule-secondary-details summary em,
.match-extra-details summary em,
.schedule-round-card summary em {
    color: var(--gold-light);
    font-style: normal;
    transition: transform .2s ease;
}

.schedule-secondary-details .schedule-result-list,
.schedule-secondary-details .schedule-participant-grid {
    padding: 0 18px 18px;
}

.schedule-secondary-details .schedule-participant-card {
    background: rgba(255,255,255,.025);
}

.match-preview-hero-compact {
    padding-right: 0;
    padding-left: 0;
}

.match-ppv-stage-compact {
    margin-top: 18px;
    padding-bottom: clamp(24px, 4vw, 46px);
}

.match-ppv-main-compact .match-ppv-fighter {
    min-height: 0;
}

.match-ppv-main-compact .match-ppv-fighter > a {
    margin-top: 12px;
    color: var(--turquoise);
    font-size: .75rem;
    text-decoration: none;
}

.match-ppv-main-compact .match-ppv-center small {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.match-compact-grid .match-ppv-panel {
    min-height: 0;
}

.match-history-compact {
    margin-top: 18px;
}

.match-history-compact > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.match-history-compact > header > strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
}

.match-history-compact > p {
    margin: 16px 0 0;
    color: var(--muted);
}

.match-extra-details {
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
}

.match-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 0 22px 22px;
}

.match-extra-grid > section {
    padding: 18px;
    border: 1px solid rgba(200, 164, 93, .12);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
}

.match-extra-grid h3 {
    margin: 0 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
}

.match-extra-grid ul {
    margin: 0 0 16px;
    padding-left: 20px;
    color: #c7c4b4;
}

.match-form-mini-list {
    display: grid;
    gap: 7px;
}

.match-form-mini-list article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
}

.match-form-mini-list article > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    font-weight: 900;
}

.match-form-mini-list article.is-win > span {
    color: #6ce0a8;
    background: rgba(50, 200, 126, .12);
}

.match-form-mini-list article.is-loss > span {
    color: #f1847d;
    background: rgba(224, 79, 71, .12);
}

.match-form-mini-list strong,
.match-form-mini-list small {
    display: block;
}

.match-form-mini-list strong { color: #ded8c2; }
.match-form-mini-list small { color: var(--muted); }

@media (max-width: 900px) {
    .schedule-hero-compact,
    .match-preview-hero-compact,
    .schedule-status-line {
        align-items: stretch;
        flex-direction: column;
    }

    .schedule-focus-grid,
    .match-compact-grid,
    .match-extra-grid {
        grid-template-columns: 1fr;
    }

    .schedule-status-line nav {
        align-self: flex-start;
    }

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

    .schedule-current-row > em {
        display: none;
    }
}

@media (max-width: 620px) {
    .schedule-shell-compact,
    .match-preview-shell-compact {
        width: min(100% - 20px, 1460px);
        padding-top: 104px;
    }

    .schedule-current-row {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .schedule-current-row > div:last-of-type {
        text-align: left;
    }

    .schedule-round-list-compact .schedule-round-card > summary aside {
        grid-template-columns: auto auto;
    }

    .schedule-round-list-compact .schedule-round-card > summary aside i {
        display: none;
    }

    .schedule-match-row {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .schedule-match-row > em {
        display: none;
    }
}

/* =========================================================
   v0.95.0 — krótszy epilog osiągnięć LIVE
   ========================================================= */
.achievement-unlock-cinema.is-fast {
    transition-duration: .28s;
}

.achievement-unlock-cinema.is-fast .achievement-unlock-veil {
    background: radial-gradient(circle at center, color-mix(in srgb, var(--turquoise) 10%, transparent), rgba(1,6,5,.82) 66%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.achievement-unlock-cinema.is-fast .achievement-unlock-card {
    width: min(90vw, 560px);
    padding: 30px 34px 26px;
    border-radius: 28px;
}

.achievement-unlock-cinema.is-fast .achievement-unlock-card > strong {
    width: 78px;
    height: 78px;
    margin: 15px 0 12px;
    border-radius: 23px;
    font-size: 2.25rem;
}

.achievement-unlock-cinema.is-fast .achievement-unlock-card h2 {
    font-size: clamp(1.75rem, 4.6vw, 3rem);
}

.achievement-unlock-cinema.is-fast .achievement-unlock-card p {
    margin: 10px 0 14px;
}

.achievement-unlock-card.is-summary {
    width: min(92vw, 680px);
}

.achievement-unlock-card.is-summary > strong {
    width: 66px;
    height: 66px;
    margin-bottom: 9px;
}

.achievement-unlock-summary-list {
    display: grid;
    width: 100%;
    gap: 8px;
    margin-top: 17px;
    text-align: left;
}

.achievement-unlock-summary-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}

.achievement-unlock-summary-list article > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: var(--gold-light);
    background: rgba(226, 196, 122, .10);
}

.achievement-unlock-summary-list strong,
.achievement-unlock-summary-list small {
    display: block;
}

.achievement-unlock-summary-list strong {
    color: #e9e1c7;
    font-size: .82rem;
}

.achievement-unlock-summary-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: .68rem;
}

.achievement-unlock-summary-list > em {
    color: var(--turquoise);
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
    text-align: center;
}


/* =========================================================
   v0.97.0 — osiągnięcia jako nieblokujące komunikaty League Show
   ========================================================= */
.live-achievement-toast-stack {
    position: fixed;
    right: clamp(18px, 2.6vw, 42px);
    bottom: clamp(18px, 3.2vh, 42px);
    z-index: 1700;
    display: grid;
    width: min(390px, calc(100vw - 36px));
    gap: 10px;
    pointer-events: none;
}

.live-achievement-toast {
    --toast-accent: #d9c36f;
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 11px 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 58%, transparent);
    border-radius: 17px;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--toast-accent) 13%, transparent), transparent 58%),
        rgba(2, 15, 12, .94);
    box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055);
    opacity: 0;
    transform: translate3d(28px, 14px, 0) scale(.96);
    transition:
        opacity .28s ease,
        transform .46s cubic-bezier(.16,.84,.18,1),
        border-color .3s ease;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.live-achievement-toast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--toast-accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--toast-accent) 68%, transparent);
}

.live-achievement-toast.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.live-achievement-toast.is-closing {
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(.98);
}

.live-achievement-toast > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 55%, transparent);
    border-radius: 13px;
    color: var(--toast-accent);
    background: color-mix(in srgb, var(--toast-accent) 10%, rgba(0,0,0,.12));
    box-shadow: 0 0 24px color-mix(in srgb, var(--toast-accent) 17%, transparent);
    font-size: 1.35rem;
}

.live-achievement-toast small,
.live-achievement-toast strong,
.live-achievement-toast p {
    display: block;
    margin: 0;
}

.live-achievement-toast small {
    color: var(--toast-accent);
    font-size: .56rem;
    font-weight: 1000;
    letter-spacing: .16em;
}

.live-achievement-toast strong {
    margin-top: 2px;
    color: #f1e8ca;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.15;
}

.live-achievement-toast p {
    margin-top: 3px;
    overflow: hidden;
    color: #9eafa6;
    font-size: .68rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-achievement-toast.rarity-common { --toast-accent: #b7c1bb; }
.live-achievement-toast.rarity-rare { --toast-accent: #70d39f; }
.live-achievement-toast.rarity-epic { --toast-accent: #b78cff; }
.live-achievement-toast.rarity-legendary { --toast-accent: #f0cc66; }
.live-achievement-toast.rarity-secret { --toast-accent: #ff8b58; }

@media (max-width: 700px) {
    .live-achievement-toast-stack {
        right: 14px;
        bottom: 14px;
        width: calc(100vw - 28px);
    }

    .live-achievement-toast {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 62px;
        padding: 9px 11px;
    }

    .live-achievement-toast > span {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-achievement-toast {
        transition: opacity .18s ease !important;
        transform: none !important;
    }
}

/* ========================================================================== 
   Paczka #105 — rejestracja kont gry i rozdzielenie profilu turniejowego
   ========================================================================== */

.navigation-register {
    border: 1px solid color-mix(in srgb, var(--accent, #d8b968) 44%, transparent);
    border-radius: 999px;
    color: #f0d98e !important;
    background: color-mix(in srgb, var(--accent, #d8b968) 9%, transparent);
}

.game-registration-shell {
    width: min(1240px, calc(100% - 32px));
    margin: 138px auto 84px;
}

.game-registration-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 28px;
}

.game-registration-hero > div {
    padding: 30px 10px;
}

.game-registration-hero h1 {
    max-width: 780px;
    margin: .16em 0 .2em;
    color: #f3ead0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 6vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .96;
}

.game-registration-hero > div > p {
    max-width: 720px;
    color: #a8b9af;
    font-size: clamp(1rem, 1.8vw, 1.16rem);
    line-height: 1.7;
}

.game-registration-hero > aside {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px 14px;
    padding: 28px;
}

.game-registration-hero > aside > span {
    display: grid;
    grid-row: span 2;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent, #d8b968) 55%, transparent);
    border-radius: 13px;
    color: #f0d98e;
    background: color-mix(in srgb, var(--accent, #d8b968) 10%, transparent);
    font-weight: 900;
}

.game-registration-hero > aside > strong,
.game-registration-hero > aside > small {
    display: block;
}

.game-registration-hero > aside > strong {
    align-self: end;
    color: #ede4c9;
}

.game-registration-hero > aside > small {
    color: #83988d;
}

.game-registration-hero > aside > i {
    grid-column: 1;
    width: 1px;
    height: 18px;
    margin: 2px auto;
    background: linear-gradient(transparent, color-mix(in srgb, var(--accent, #d8b968) 48%, transparent));
}

.game-registration-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 24px;
    align-items: start;
}

.game-registration-form-panel,
.game-registration-side > article,
.game-registration-success {
    padding: clamp(24px, 4vw, 38px);
}

.game-registration-form-panel header h2,
.game-registration-side h2,
.game-registration-success h2 {
    margin: .2em 0 .35em;
    color: #efe5c8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 500;
}

.game-registration-form-panel header p,
.game-registration-side p,
.game-registration-success p {
    color: #91a59a;
    line-height: 1.65;
}

.game-registration-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.game-registration-form > label:not(.game-registration-check),
.game-registration-password-grid label {
    display: grid;
    gap: 8px;
}

.game-registration-form label > span {
    color: #d7d0ba;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .055em;
}

.game-registration-form input[type="text"],
.game-registration-form input[type="email"],
.game-registration-form input[type="password"] {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid rgba(210, 190, 129, .2);
    border-radius: 13px;
    outline: none;
    color: #f5efd9;
    background: rgba(0, 10, 8, .46);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.game-registration-form input:focus {
    border-color: color-mix(in srgb, var(--accent, #d8b968) 70%, transparent);
    background: rgba(0, 14, 11, .72);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d8b968) 10%, transparent);
}

.game-registration-form label small {
    color: #71887c;
    font-size: .73rem;
    line-height: 1.45;
}

.game-registration-form label small.is-valid {
    color: #69d59d;
}

.game-registration-form label small.is-invalid {
    color: #ef8d82;
}

.game-registration-password-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.game-registration-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 15px;
    border: 1px solid rgba(210, 190, 129, .13);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}

.game-registration-check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--accent, #d8b968);
}

.registration-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.game-registration-side {
    display: grid;
    gap: 24px;
}

.game-registration-side .ghost-button {
    width: 100%;
    margin-top: 12px;
}

.game-registration-security ul {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.game-registration-security li {
    position: relative;
    padding-left: 24px;
    color: #9db0a6;
    line-height: 1.5;
}

.game-registration-security li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #d7bb6c;
    font-weight: 900;
}

.game-registration-pending {
    display: grid;
    justify-items: start;
    gap: 10px;
    margin-top: 28px;
    padding: 24px;
    border: 1px solid rgba(221, 180, 87, .25);
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(221,180,87,.08), rgba(0,0,0,.1));
}

.game-registration-pending > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: #e5c776;
    background: rgba(229,199,118,.08);
    font-size: 1.35rem;
}

.game-registration-pending strong {
    color: #eee3c3;
    font-size: 1.08rem;
}

.game-registration-pending p,
.game-registration-pending small {
    margin: 0;
    color: #93a79c;
    line-height: 1.6;
}

.game-registration-success {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin-bottom: 24px;
    border-color: rgba(88, 208, 146, .34);
    background: linear-gradient(120deg, rgba(40,145,99,.13), rgba(1,14,10,.7));
}

.game-registration-success > span {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 18px;
    color: #7ce2ad;
    background: rgba(80,210,145,.1);
    font-size: 1.8rem;
    font-weight: 900;
}

.game-registration-success small {
    color: #75d9a4;
    font-weight: 900;
    letter-spacing: .14em;
}

.game-registration-success h2,
.game-registration-success p {
    margin-top: 4px;
    margin-bottom: 0;
}

.access-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .game-registration-hero,
    .game-registration-grid {
        grid-template-columns: 1fr;
    }

    .game-registration-hero > aside {
        max-width: 680px;
    }

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

    .access-grid > article:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .game-registration-shell {
        width: min(100% - 22px, 1240px);
        margin-top: 106px;
    }

    .game-registration-hero > div {
        padding: 18px 2px;
    }

    .game-registration-hero > aside,
    .game-registration-form-panel,
    .game-registration-side > article,
    .game-registration-success {
        padding: 22px;
    }

    .game-registration-password-grid,
    .access-grid {
        grid-template-columns: 1fr;
    }

    .access-grid > article:first-child {
        grid-column: auto;
    }

    .game-registration-success {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .game-registration-success > span {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.3rem;
    }
}

/* =========================================================
   v1.06.0 — główny portal Kaeriona (Brama + żyjący świat)
   ========================================================= */
.page-home-v3 .site-background {
    background:
        linear-gradient(90deg, rgba(2, 8, 7, .96) 0%, rgba(3, 15, 12, .77) 47%, rgba(1, 8, 7, .9) 100%),
        linear-gradient(180deg, rgba(2, 11, 9, .22), rgba(2, 10, 8, .94)),
        url("../img/background/main-background.jpg") center / cover no-repeat;
}

.brand-rune {
    overflow: hidden;
    border-radius: 50%;
    transform: none;
    font-family: Georgia, "Times New Roman", serif;
}

.brand-rune b {
    font-size: 1.35rem;
    font-weight: 500;
    text-shadow: 0 0 14px rgba(86, 210, 189, .5);
}

.brand-mark small {
    letter-spacing: .17em;
}

.main-navigation .navigation-register {
    border: 1px solid rgba(200, 164, 93, .34);
    border-radius: 8px;
    background: rgba(200, 164, 93, .07);
}

.main-navigation .navigation-account {
    border: 1px solid rgba(86, 210, 189, .3);
    border-radius: 8px;
    background: rgba(24, 91, 75, .13);
}

.kaerion-home {
    width: min(calc(100% - 48px), 1460px);
    margin: 0 auto;
    padding: 104px 0 82px;
}

.kaerion-home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr);
    gap: clamp(34px, 5vw, 86px);
    align-items: center;
    min-height: 690px;
}

.kaerion-home-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 164, 93, .38), rgba(86, 210, 189, .3), transparent);
}

.kaerion-home-hero-copy {
    position: relative;
    z-index: 2;
    padding: 34px 0 64px;
}

.kaerion-home-statuses {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.kaerion-home-statuses span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid rgba(200, 164, 93, .18);
    border-radius: 999px;
    color: #a8b8ad;
    background: rgba(2, 12, 10, .55);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kaerion-home-statuses .is-online {
    border-color: rgba(89, 219, 153, .27);
    color: #79e2ac;
}

.kaerion-home-statuses i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #63dc9e;
    box-shadow: 0 0 13px rgba(99, 220, 158, .78);
    animation: kaerion-status-pulse 2.4s ease-in-out infinite;
}

.kaerion-home-hero-copy h1 {
    margin: 12px 0 6px;
    color: #f0d898;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.4rem, 9vw, 8.6rem);
    font-weight: 500;
    line-height: .84;
    letter-spacing: -.055em;
    text-shadow: 0 0 40px rgba(200, 164, 93, .18), 0 24px 70px rgba(0, 0, 0, .7);
}

.kaerion-home-lead {
    max-width: 690px;
    margin: 26px 0 0;
    color: rgba(231, 226, 205, .8);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.75;
}

.kaerion-home-actions {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 30px;
}

.home-download-button {
    display: inline-grid;
    min-width: 180px;
    min-height: 52px;
    padding: 9px 20px;
    border: 1px solid rgba(232, 195, 109, .62);
    border-radius: 8px;
    place-content: center;
    color: #fff0ba;
    background: linear-gradient(135deg, rgba(135, 94, 34, .93), rgba(78, 52, 20, .95));
    box-shadow: inset 0 0 0 1px rgba(255, 237, 180, .08), 0 14px 34px rgba(0, 0, 0, .28);
    text-align: center;
    transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}

.home-download-button:hover:not(.is-disabled) {
    transform: translateY(-2px);
    border-color: #f0d58f;
    filter: brightness(1.08);
}

.home-download-button span,
.home-download-button small {
    display: block;
}

.home-download-button span {
    font-family: Georgia, serif;
    font-size: .95rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-download-button small {
    color: rgba(255, 241, 194, .65);
    font-size: .6rem;
    letter-spacing: .08em;
}

.home-download-button.is-disabled {
    cursor: not-allowed;
    filter: grayscale(.34);
    opacity: .62;
}

.kaerion-home-trust {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin-top: 26px;
    color: #90a59a;
    font-size: .72rem;
}

.kaerion-home-trust span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.kaerion-home-trust b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 500;
}

.kaerion-gate-stage {
    position: relative;
    display: grid;
    min-height: 590px;
    place-items: center;
    isolation: isolate;
}

.kaerion-gate-aura {
    position: absolute;
    width: min(90%, 570px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(71, 222, 194, .28) 0%, rgba(31, 125, 107, .15) 36%, transparent 68%);
    filter: blur(34px);
    animation: kaerion-gate-aura 5s ease-in-out infinite alternate;
}

.kaerion-gate {
    position: relative;
    display: grid;
    width: min(43vw, 490px);
    min-width: 390px;
    aspect-ratio: 1;
    border: 15px solid #182e29;
    border-radius: 50%;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(129, 255, 228, .34), rgba(17, 83, 72, .34) 39%, rgba(2, 14, 12, .94) 66%),
        repeating-conic-gradient(from 12deg, rgba(210, 171, 91, .22) 0 1deg, transparent 1deg 15deg);
    box-shadow:
        inset 0 0 0 4px rgba(207, 171, 94, .34),
        inset 0 0 0 13px rgba(2, 14, 12, .68),
        inset 0 0 70px rgba(77, 230, 198, .28),
        0 0 0 2px rgba(214, 176, 97, .38),
        0 0 55px rgba(54, 205, 177, .22),
        0 40px 80px rgba(0, 0, 0, .7);
}

.kaerion-gate::before,
.kaerion-gate::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.kaerion-gate::before {
    inset: 24px;
    border: 2px solid rgba(91, 226, 200, .45);
    box-shadow: inset 0 0 25px rgba(64, 224, 192, .18), 0 0 24px rgba(64, 224, 192, .18);
    animation: kaerion-gate-spin 42s linear infinite;
}

.kaerion-gate::after {
    inset: 56px;
    border: 1px solid rgba(225, 193, 113, .3);
    background:
        conic-gradient(from 90deg, transparent, rgba(76, 225, 197, .14), transparent 26%, rgba(200, 164, 93, .12), transparent 55%, rgba(76, 225, 197, .12), transparent);
    animation: kaerion-gate-spin-reverse 27s linear infinite;
}

.kaerion-gate-runes {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.kaerion-gate-runes span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    color: #75ebd3;
    font-family: Georgia, serif;
    font-size: 1.05rem;
    text-shadow: 0 0 10px rgba(93, 255, 220, .9);
    transform: translate(-50%, -50%) rotate(calc(var(--gate-rune) * 30deg)) translateY(-208px) rotate(calc(var(--gate-rune) * -30deg));
}

.kaerion-gate-core {
    position: relative;
    z-index: 1;
    display: grid;
    width: 67%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(117, 235, 211, .4);
    border-radius: 50%;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(225, 255, 247, .31), transparent 12%),
        radial-gradient(ellipse at 50% 60%, rgba(44, 167, 146, .35), rgba(5, 40, 34, .72) 50%, rgba(1, 12, 10, .96) 72%);
    box-shadow: inset 0 0 65px rgba(78, 236, 205, .31), 0 0 38px rgba(78, 236, 205, .2);
}

.kaerion-gate-core::before {
    content: "";
    position: absolute;
    inset: -24%;
    background: repeating-radial-gradient(ellipse at center, transparent 0 19px, rgba(117, 235, 211, .08) 20px 21px);
    animation: kaerion-gate-core 8s ease-in-out infinite alternate;
}

.kaerion-gate-core span {
    position: relative;
    color: rgba(240, 213, 143, .9);
    font-family: Georgia, serif;
    font-size: clamp(4rem, 8vw, 7rem);
    text-shadow: 0 0 28px rgba(88, 234, 205, .5), 0 12px 40px rgba(0, 0, 0, .7);
}

.kaerion-gate-steps {
    position: absolute;
    right: 7%;
    bottom: 36px;
    left: 7%;
    z-index: -1;
    display: grid;
    gap: 8px;
    justify-items: center;
}

.kaerion-gate-steps i {
    display: block;
    height: 15px;
    border: 1px solid rgba(200, 164, 93, .18);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(27, 54, 46, .82), rgba(2, 13, 10, .95));
    box-shadow: 0 12px 24px rgba(0, 0, 0, .5);
}

.kaerion-gate-steps i:nth-child(1) { width: 48%; }
.kaerion-gate-steps i:nth-child(2) { width: 66%; }
.kaerion-gate-steps i:nth-child(3) { width: 84%; }

.kaerion-gate-card {
    position: absolute;
    right: 0;
    bottom: 34px;
    z-index: 5;
    display: grid;
    min-width: 245px;
    max-width: 330px;
    padding: 15px 18px;
    border: 1px solid rgba(200, 164, 93, .35);
    border-radius: 12px;
    background: rgba(2, 15, 12, .88);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
    backdrop-filter: blur(12px);
}

.kaerion-gate-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.kaerion-gate-card strong {
    overflow: hidden;
    margin-top: 3px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.18rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-gate-card span {
    color: var(--muted);
    font-size: .7rem;
}

.kaerion-start,
.kaerion-now,
.kaerion-recent {
    margin-top: 74px;
}

.kaerion-section-heading {
    display: flex;
    gap: 32px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.kaerion-section-heading h2 {
    margin: 6px 0 0;
    color: var(--gold-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.8vw, 3.55rem);
    font-weight: 500;
    line-height: 1.04;
}

.kaerion-section-heading > p {
    max-width: 560px;
    margin: 0;
    color: #94a89d;
    font-size: .82rem;
    line-height: 1.65;
    text-align: right;
}

.kaerion-section-heading > a {
    color: var(--gold-light);
    font-size: .76rem;
    white-space: nowrap;
}

.kaerion-start-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.kaerion-start-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    min-height: 250px;
    padding: 24px;
    overflow: hidden;
}

.kaerion-start-card::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -68px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(86, 210, 189, .09);
    border-radius: 50%;
    box-shadow: inset 0 0 0 22px rgba(200, 164, 93, .025), inset 0 0 0 40px rgba(86, 210, 189, .025);
}

.kaerion-start-card.is-optional {
    border-color: rgba(86, 210, 189, .28);
}

.kaerion-step-number {
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(200, 164, 93, .42);
    border-radius: 13px;
    place-items: center;
    color: var(--gold-light);
    background: rgba(200, 164, 93, .08);
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.kaerion-start-card small {
    color: var(--theme-primary, #56d2bd);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.kaerion-start-card h3,
.kaerion-now-grid h3,
.kaerion-ranking-card h3 {
    margin: 5px 0 9px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.42rem;
    font-weight: 500;
    line-height: 1.18;
}

.kaerion-start-card p,
.kaerion-world-card > p {
    margin: 0;
    color: #95a79e;
    font-size: .8rem;
    line-height: 1.6;
}

.kaerion-start-card > a,
.kaerion-start-wait {
    z-index: 1;
    grid-column: 2;
    align-self: end;
    color: var(--gold-light);
    font-size: .75rem;
    font-weight: 800;
}

.kaerion-start-card > a b {
    display: inline-block;
    margin-left: 5px;
    transition: transform .2s ease;
}

.kaerion-start-card > a:hover b {
    transform: translateX(4px);
}

.kaerion-start-wait {
    color: #81958a;
}

.kaerion-now-grid {
    display: grid;
    grid-template-columns: minmax(250px, .82fr) minmax(390px, 1.22fr) minmax(300px, .96fr);
    gap: 14px;
    align-items: stretch;
}

.kaerion-world-card,
.kaerion-arena-card,
.kaerion-ranking-card {
    min-height: 410px;
    padding: 24px;
}

.kaerion-world-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background:
        radial-gradient(circle at 88% 8%, rgba(73, 209, 181, .12), transparent 30%),
        linear-gradient(145deg, rgba(8, 34, 27, .92), rgba(2, 14, 11, .9));
}

.kaerion-card-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 26px;
    border: 1px solid rgba(200, 164, 93, .35);
    border-radius: 50%;
    place-items: center;
    color: var(--gold-light);
    background: radial-gradient(circle, rgba(71, 190, 166, .22), rgba(2, 15, 12, .8));
    box-shadow: 0 0 30px rgba(71, 190, 166, .11);
    font-size: 1.25rem;
}

.kaerion-world-features {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 23px 0;
}

.kaerion-world-features span {
    padding: 6px 8px;
    border: 1px solid rgba(200, 164, 93, .16);
    border-radius: 999px;
    color: #a6b7ad;
    font-size: .65rem;
}

.kaerion-world-card .ghost-button {
    margin-top: auto;
}

.kaerion-arena-card {
    display: flex;
    flex-direction: column;
    border-color: rgba(200, 164, 93, .34);
    background:
        radial-gradient(circle at 80% 16%, rgba(200, 164, 93, .11), transparent 28%),
        linear-gradient(145deg, rgba(15, 31, 25, .94), rgba(3, 14, 11, .92));
}

.kaerion-arena-card.is-live {
    border-color: rgba(86, 210, 189, .42);
    box-shadow: 0 0 42px rgba(86, 210, 189, .1), var(--shadow);
}

.kaerion-arena-card > header,
.kaerion-ranking-card > header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.kaerion-arena-card > header h3,
.kaerion-ranking-card > header h3 {
    margin-bottom: 0;
}

.kaerion-arena-meta {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 10px 0;
    border-top: 1px solid rgba(200, 164, 93, .12);
    border-bottom: 1px solid rgba(200, 164, 93, .12);
    color: #899e92;
    font-size: .68rem;
}

.kaerion-arena-meta b {
    color: var(--theme-primary, #56d2bd);
}

.kaerion-arena-duel {
    display: grid;
    gap: 8px;
    margin: 22px 0 18px;
    text-align: center;
}

.kaerion-arena-duel > small {
    color: #8ea197;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kaerion-arena-duel > strong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #e7dfc5;
    font-size: .84rem;
}

.kaerion-arena-duel > strong > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-arena-duel > strong > span:first-child { text-align: right; }
.kaerion-arena-duel > strong > span:last-child { text-align: left; }

.kaerion-arena-duel > strong b {
    min-width: 58px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.55rem;
    font-weight: 500;
}

.kaerion-arena-duel.is-idle > strong {
    grid-template-columns: 1fr;
}

.kaerion-arena-duel.is-idle > strong b,
.kaerion-arena-duel.is-idle > strong > span:last-child {
    display: none;
}

.kaerion-arena-duel.is-idle > strong > span:first-child {
    text-align: center;
}

.kaerion-arena-progress {
    display: grid;
    gap: 7px;
}

.kaerion-arena-progress > span {
    display: flex;
    justify-content: space-between;
    color: #8da196;
    font-size: .67rem;
}

.kaerion-arena-progress > span b {
    color: var(--gold-light);
}

.kaerion-arena-progress > i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.kaerion-arena-progress > 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 16px rgba(86, 210, 189, .4);
    transition: width .4s ease;
}

.kaerion-arena-progress > small {
    overflow: hidden;
    color: #768c81;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-arena-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 20px;
}

.kaerion-arena-empty {
    display: grid;
    flex: 1;
    place-content: center;
    text-align: center;
}

.kaerion-arena-empty > span {
    color: rgba(200, 164, 93, .72);
    font-size: 2.2rem;
}

.kaerion-arena-empty strong {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.kaerion-arena-empty p {
    margin: 6px 0 0;
    color: #83978d;
    font-size: .75rem;
}

.kaerion-ranking-card {
    display: flex;
    flex-direction: column;
}

.kaerion-ranking-list {
    display: grid;
    gap: 5px;
    margin-top: 19px;
}

.kaerion-ranking-list[hidden] {
    display: none;
}

.kaerion-ranking-list > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 46px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, .018);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.kaerion-ranking-list > a:hover {
    transform: translateX(3px);
    border-color: rgba(200, 164, 93, .18);
    background: rgba(200, 164, 93, .045);
}

.kaerion-ranking-list > a > span {
    display: grid;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(200, 164, 93, .25);
    border-radius: 50%;
    place-items: center;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: .74rem;
}

.kaerion-ranking-list > a:nth-child(1) > span {
    border-color: rgba(240, 213, 143, .62);
    color: #ffe6a4;
    background: rgba(200, 164, 93, .12);
}

.kaerion-ranking-list strong {
    overflow: hidden;
    color: #dcdccf;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-ranking-list b {
    color: var(--theme-primary, #56d2bd);
    font-size: .74rem;
}

.kaerion-ranking-card footer {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(200, 164, 93, .13);
}

.kaerion-ranking-card footer a {
    color: #8fa397;
    font-size: .66rem;
}

.kaerion-ranking-card footer a:hover {
    color: var(--gold-light);
}

.kaerion-identity {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
    margin-top: 74px;
    padding: clamp(28px, 4vw, 46px);
    border-color: rgba(86, 210, 189, .26);
    background:
        radial-gradient(circle at 85% 50%, rgba(57, 183, 157, .1), transparent 34%),
        linear-gradient(130deg, rgba(4, 25, 20, .94), rgba(2, 13, 11, .91));
}

.kaerion-identity-copy h2 {
    margin: 7px 0 12px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3.15rem);
    font-weight: 500;
    line-height: 1;
}

.kaerion-identity-copy p {
    margin: 0;
    color: #9aaca2;
    font-size: .84rem;
    line-height: 1.7;
}

.kaerion-identity-copy > strong {
    display: block;
    margin-top: 14px;
    color: #75dbc4;
    font-size: .78rem;
}

.kaerion-identity-flow {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr) auto minmax(130px, 1fr);
    gap: 10px;
    align-items: center;
}

.kaerion-identity-flow > div {
    display: grid;
    min-height: 132px;
    padding: 17px;
    border: 1px solid rgba(200, 164, 93, .2);
    border-radius: 16px;
    place-content: center;
    text-align: center;
    background: rgba(1, 11, 9, .52);
}

.kaerion-identity-flow > div > span {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    border: 1px solid rgba(86, 210, 189, .32);
    border-radius: 50%;
    place-items: center;
    color: #71d9c2;
    font-family: Georgia, serif;
}

.kaerion-identity-flow small {
    color: #7f9589;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.kaerion-identity-flow b {
    margin-top: 3px;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: .94rem;
    font-weight: 500;
}

.kaerion-identity-flow > i {
    color: rgba(200, 164, 93, .62);
    font-style: normal;
}

.kaerion-recent .home-activity-grid article {
    min-height: 165px;
}

.player-account-link-note {
    display: grid;
    gap: 3px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid rgba(86, 210, 189, .18);
    border-radius: 13px;
    background: rgba(31, 110, 91, .07);
}

.player-account-link-note small {
    color: var(--theme-primary, #56d2bd);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.player-account-link-note b {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: .95rem;
    font-weight: 500;
}

.player-account-link-note span {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.5;
}

@keyframes kaerion-status-pulse {
    0%, 100% { opacity: .68; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes kaerion-gate-aura {
    from { opacity: .58; transform: scale(.93); }
    to { opacity: .92; transform: scale(1.07); }
}

@keyframes kaerion-gate-spin {
    to { transform: rotate(360deg); }
}

@keyframes kaerion-gate-spin-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes kaerion-gate-core {
    from { opacity: .58; transform: scale(.94) rotate(-3deg); }
    to { opacity: 1; transform: scale(1.08) rotate(4deg); }
}

@media (max-width: 1260px) {
    .kaerion-home-hero {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .8fr);
    }

    .kaerion-gate {
        width: 410px;
        min-width: 0;
    }

    .kaerion-gate-runes span {
        transform: translate(-50%, -50%) rotate(calc(var(--gate-rune) * 30deg)) translateY(-174px) rotate(calc(var(--gate-rune) * -30deg));
    }

    .kaerion-now-grid {
        grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
    }

    .kaerion-ranking-card {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .kaerion-ranking-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .kaerion-ranking-list > a {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .kaerion-ranking-list > a > b {
        grid-column: 2;
    }
}

@media (max-width: 980px) {
    .kaerion-home {
        width: min(calc(100% - 30px), 1460px);
        padding-top: 112px;
    }

    .kaerion-home-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .kaerion-home-hero-copy {
        padding-bottom: 0;
    }

    .kaerion-gate-stage {
        min-height: 520px;
    }

    .kaerion-gate {
        width: min(74vw, 455px);
    }

    .kaerion-gate-runes span {
        transform: translate(-50%, -50%) rotate(calc(var(--gate-rune) * 30deg)) translateY(-193px) rotate(calc(var(--gate-rune) * -30deg));
    }

    .kaerion-start-grid,
    .kaerion-now-grid,
    .kaerion-identity {
        grid-template-columns: 1fr;
    }

    .kaerion-start-card {
        min-height: 0;
    }

    .kaerion-world-card,
    .kaerion-arena-card,
    .kaerion-ranking-card {
        min-height: 0;
    }

    .kaerion-ranking-card {
        grid-column: auto;
    }

    .kaerion-identity-flow {
        max-width: 700px;
    }
}

@media (max-width: 700px) {
    .brand-mark small {
        max-width: 150px;
        font-size: .52rem;
        letter-spacing: .1em;
    }

    .kaerion-home {
        width: min(calc(100% - 20px), 1460px);
    }

    .kaerion-home-hero-copy h1 {
        font-size: clamp(4.1rem, 21vw, 6rem);
    }

    .kaerion-home-lead {
        font-size: .93rem;
    }

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

    .kaerion-home-actions > * {
        justify-content: center;
        width: 100%;
    }

    .kaerion-home-trust {
        align-items: flex-start;
        flex-direction: column;
    }

    .kaerion-gate-stage {
        min-height: 430px;
    }

    .kaerion-gate {
        width: min(86vw, 360px);
    }

    .kaerion-gate-runes span {
        font-size: .8rem;
        transform: translate(-50%, -50%) rotate(calc(var(--gate-rune) * 30deg)) translateY(-151px) rotate(calc(var(--gate-rune) * -30deg));
    }

    .kaerion-gate-card {
        right: 4px;
        bottom: 13px;
        left: 4px;
        min-width: 0;
        max-width: none;
    }

    .kaerion-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .kaerion-section-heading > p {
        text-align: left;
    }

    .kaerion-start,
    .kaerion-now,
    .kaerion-identity,
    .kaerion-recent {
        margin-top: 54px;
    }

    .kaerion-start-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 19px;
    }

    .kaerion-step-number {
        width: 38px;
        height: 38px;
    }

    .kaerion-world-card,
    .kaerion-arena-card,
    .kaerion-ranking-card {
        padding: 20px;
    }

    .kaerion-ranking-list {
        grid-template-columns: 1fr;
    }

    .kaerion-ranking-list > a {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .kaerion-ranking-list > a > b {
        grid-column: auto;
    }

    .kaerion-identity {
        padding: 22px;
    }

    .kaerion-identity-flow {
        grid-template-columns: 1fr;
    }

    .kaerion-identity-flow > i {
        transform: rotate(90deg);
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kaerion-home-statuses i,
    .kaerion-gate-aura,
    .kaerion-gate::before,
    .kaerion-gate::after,
    .kaerion-gate-core::before {
        animation: none !important;
    }
}

/* =========================================================
   v1.07.0 — Portal Gracza / monumentalna Brama Kaeriona
   ========================================================= */
.page-home-v4 {
    background: #020806;
}

.page-home-v4 .site-background {
    background:
        radial-gradient(circle at 72% 18%, rgba(26, 105, 87, .11), transparent 30%),
        linear-gradient(180deg, #03100d, #010504 70%);
}

.page-home-v4 .ambient,
.page-home-v4 .mist-layer {
    opacity: .28;
}

.page-home-v4 .site-header,
.page-home-v4 .site-header.is-scrolled {
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 0 max(22px, calc((100% - 1460px) / 2));
    border: 0;
    border-bottom: 1px solid rgba(200, 164, 93, .34);
    border-radius: 0;
    background: rgba(2, 13, 10, .95);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px) saturate(118%);
}

.page-home-v4 .brand-mark {
    gap: 12px;
}

.page-home-v4 .brand-rune {
    width: 44px;
    height: 44px;
    border-color: rgba(218, 182, 102, .42);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(86, 210, 189, .16), transparent 64%),
        linear-gradient(145deg, rgba(200, 164, 93, .18), rgba(4, 25, 20, .9));
    box-shadow: inset 0 0 22px rgba(86, 210, 189, .1), 0 0 24px rgba(200, 164, 93, .1);
}

.page-home-v4 .brand-mark strong {
    font-size: 1.03rem;
    letter-spacing: .12em;
}

.page-home-v4 .brand-mark small {
    margin-top: 3px;
    font-size: .58rem;
    letter-spacing: .18em;
}

.page-home-v4 .main-navigation {
    gap: 2px;
    flex-wrap: nowrap;
    padding: 0;
}

.page-home-v4 .main-navigation a,
.page-home-v4 .main-navigation button {
    font-size: .78rem;
}

.page-home-v4 .main-navigation a {
    padding: 11px 13px;
    border-radius: 0;
}

.page-home-v4 .main-navigation .navigation-register,
.page-home-v4 .main-navigation .navigation-account {
    min-height: 42px;
    margin-left: 7px;
    padding-inline: 16px;
    border-radius: 7px;
}

.page-home-v4 .main-navigation .navigation-register {
    border-color: rgba(220, 180, 91, .42);
    color: #f0d58f;
    background: rgba(123, 86, 28, .18);
}

.page-home-v4 .main-navigation .navigation-account {
    border-color: rgba(78, 197, 171, .35);
    background: rgba(21, 89, 73, .15);
}

.kaerion-home-v4 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 76px 0 84px;
}

.kaerion-portal-hero {
    position: relative;
    display: grid;
    min-height: clamp(590px, 40vw, 660px);
    overflow: hidden;
    border-bottom: 1px solid rgba(200, 164, 93, .28);
    background-color: #03110e;
    background-image: url("../img/background/kaerion-portal-hero-v2.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    isolation: isolate;
}

.kaerion-portal-hero::before,
.kaerion-portal-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.kaerion-portal-hero::before {
    background:
        linear-gradient(90deg, rgba(1, 9, 7, .98) 0%, rgba(1, 10, 8, .93) 25%, rgba(2, 12, 10, .58) 48%, rgba(1, 8, 7, .04) 69%),
        linear-gradient(180deg, rgba(0, 6, 5, .08), rgba(0, 6, 5, .2));
}

.kaerion-portal-hero::after {
    left: 48%;
    background: radial-gradient(circle at 78% 51%, rgba(56, 222, 191, .1), transparent 27%);
    animation: kaerion-portal-breathe 6s ease-in-out infinite alternate;
}

.kaerion-portal-hero-copy {
    z-index: 2;
    width: min(calc(100% - 48px), 1460px);
    max-width: 1460px;
    margin: auto;
    padding: 66px 0 54px;
}

.kaerion-portal-hero-copy > * {
    max-width: 670px;
}

.kaerion-portal-hero-copy .section-kicker {
    color: #62d8c0;
    font-size: .68rem;
    letter-spacing: .31em;
}

.kaerion-portal-hero-copy h1 {
    display: grid;
    margin: 14px 0 4px;
    color: #f2d98e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.6rem, 7.1vw, 7.1rem);
    font-weight: 500;
    line-height: .76;
    letter-spacing: -.052em;
    text-transform: uppercase;
    text-shadow: 0 18px 70px rgba(0, 0, 0, .82), 0 0 34px rgba(209, 171, 85, .1);
}

.kaerion-portal-hero-copy h1 span:last-child {
    margin-left: .64em;
    color: #f6e5ad;
    font-size: .62em;
    letter-spacing: .09em;
}

.kaerion-portal-tagline {
    margin: 25px 0 0;
    color: #e3c77d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    letter-spacing: .025em;
}

.kaerion-home-v4 .kaerion-home-lead {
    max-width: 610px;
    margin-top: 13px;
    color: rgba(224, 229, 215, .78);
    font-size: .96rem;
    line-height: 1.7;
}

.kaerion-home-v4 .kaerion-home-statuses {
    margin-bottom: 24px;
}

.kaerion-home-v4 .kaerion-home-statuses span {
    border-radius: 4px;
    background: rgba(1, 12, 9, .72);
}

.kaerion-home-v4 .kaerion-home-actions {
    margin-top: 24px;
}

.kaerion-home-v4 .fantasy-button-large,
.kaerion-home-v4 .home-download-button {
    min-height: 54px;
    border-radius: 4px;
}

.kaerion-home-v4 .fantasy-button-large {
    border-color: rgba(93, 222, 193, .62);
    background: linear-gradient(180deg, rgba(29, 135, 111, .78), rgba(10, 68, 56, .95));
    box-shadow: inset 0 0 0 1px rgba(195, 255, 239, .1), 0 13px 32px rgba(0, 0, 0, .32), 0 0 26px rgba(59, 201, 171, .08);
}

.kaerion-home-v4 .home-download-button {
    min-width: 174px;
    border-color: rgba(228, 190, 101, .58);
    background: linear-gradient(180deg, rgba(141, 101, 38, .92), rgba(71, 48, 18, .96));
}

.kaerion-home-v4 .kaerion-home-actions > .ghost-button {
    display: inline-flex;
    align-items: center;
    padding-inline: 15px;
}

.kaerion-portal-note {
    margin: 20px 0 0;
    color: #7f958b;
    font-size: .69rem;
    line-height: 1.55;
}

.kaerion-hero-statusbar,
.kaerion-home-v4 > .kaerion-now,
.kaerion-home-v4 > .kaerion-recent,
.kaerion-home-v4 > .kaerion-start,
.kaerion-home-v4 > .kaerion-identity {
    width: min(calc(100% - 48px), 1460px);
    margin-right: auto;
    margin-left: auto;
}

.kaerion-hero-statusbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-right: 1px solid rgba(200, 164, 93, .19);
    border-bottom: 1px solid rgba(200, 164, 93, .24);
    border-left: 1px solid rgba(200, 164, 93, .19);
    background: rgba(3, 18, 14, .91);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
}

.kaerion-hero-statusbar > div {
    display: grid;
    grid-template-columns: 8px auto;
    gap: 2px 10px;
    align-content: center;
    min-height: 61px;
    padding: 10px 20px;
    border-right: 1px solid rgba(200, 164, 93, .13);
}

.kaerion-hero-statusbar > div:last-child {
    border-right: 0;
}

.kaerion-hero-statusbar i {
    grid-row: 1 / 3;
    align-self: center;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #68776f;
    box-shadow: 0 0 10px rgba(104, 119, 111, .36);
}

.kaerion-hero-statusbar i.is-green {
    background: #67daa4;
    box-shadow: 0 0 12px rgba(103, 218, 164, .7);
}

.kaerion-hero-statusbar i.is-gold {
    background: #d5b362;
    box-shadow: 0 0 12px rgba(213, 179, 98, .5);
}

.kaerion-hero-statusbar i.is-teal {
    background: #58cdb6;
    box-shadow: 0 0 12px rgba(88, 205, 182, .55);
}

.kaerion-hero-statusbar span,
.kaerion-hero-statusbar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-hero-statusbar span {
    color: #667d72;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.kaerion-hero-statusbar strong {
    color: #d9ddce;
    font-size: .72rem;
    font-weight: 650;
}

.kaerion-home-v4 > .kaerion-now {
    margin-top: 32px;
}

.kaerion-home-v4 .kaerion-section-heading {
    margin-bottom: 17px;
}

.kaerion-home-v4 .kaerion-section-heading h2 {
    max-width: 760px;
    font-size: clamp(2rem, 3.2vw, 3rem);
}

.kaerion-home-v4 .kaerion-section-heading-compact h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.55rem);
}

.kaerion-home-v4 .kaerion-section-heading > p {
    max-width: 610px;
}

.kaerion-home-v4 .kaerion-now-grid {
    grid-template-columns: minmax(250px, .82fr) minmax(390px, 1.2fr) minmax(290px, .92fr);
    gap: 12px;
}

.kaerion-home-v4 .kaerion-world-card,
.kaerion-home-v4 .kaerion-arena-card,
.kaerion-home-v4 .kaerion-ranking-card {
    min-height: 365px;
    padding: 22px;
    border-color: rgba(200, 164, 93, .24);
    border-radius: 2px;
}

.kaerion-home-v4 .kaerion-card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 2px;
    transform: none;
}

.kaerion-home-v4 .kaerion-world-card,
.kaerion-home-v4 .kaerion-arena-card,
.kaerion-home-v4 .kaerion-ranking-card,
.kaerion-home-v4 .kaerion-start-card,
.kaerion-home-v4 .kaerion-identity,
.kaerion-home-v4 .kaerion-recent article {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.kaerion-home-v4 .kaerion-world-card:hover,
.kaerion-home-v4 .kaerion-arena-card:hover,
.kaerion-home-v4 .kaerion-ranking-card:hover,
.kaerion-home-v4 .kaerion-start-card:hover,
.kaerion-home-v4 .kaerion-recent article:hover {
    transform: translateY(-3px);
    border-color: rgba(92, 211, 185, .32);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3), inset 0 0 60px rgba(75, 210, 182, .025);
}

.kaerion-home-v4 .kaerion-ranking-list > a {
    min-height: 43px;
    border-radius: 3px;
}

.kaerion-home-v4 > .kaerion-recent {
    margin-top: 58px;
}

.kaerion-home-v4 .kaerion-recent .home-activity-grid {
    gap: 12px;
}

.kaerion-home-v4 .kaerion-recent .home-activity-grid article {
    min-height: 150px;
    border-radius: 2px;
}

.kaerion-home-v4 > .kaerion-start {
    margin-top: 64px;
}

.kaerion-home-v4 .kaerion-start-grid {
    gap: 12px;
}

.kaerion-home-v4 .kaerion-start-card {
    min-height: 210px;
    padding: 21px;
    border-radius: 2px;
}

.kaerion-home-v4 .kaerion-start-card::after {
    display: none;
}

.kaerion-home-v4 .kaerion-start-card h3 {
    font-size: 1.27rem;
}

.kaerion-home-v4 > .kaerion-identity {
    margin-top: 62px;
    padding: 34px;
    border-radius: 2px;
}

.kaerion-home-v4 .kaerion-identity-copy h2 {
    font-size: clamp(1.9rem, 2.7vw, 2.7rem);
}

.kaerion-home-v4 .kaerion-identity-flow > div {
    min-height: 116px;
    border-radius: 3px;
}

.page-home-v4 .site-footer {
    width: min(calc(100% - 48px), 1460px);
}

@keyframes kaerion-portal-breathe {
    from { opacity: .48; transform: scale(.97); }
    to { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 1260px) {
    .page-home-v4 .site-header,
    .page-home-v4 .site-header.is-scrolled {
        padding-inline: 18px;
    }

    .page-home-v4 .main-navigation a {
        padding-inline: 9px;
        font-size: .73rem;
    }

    .page-home-v4 .main-navigation .navigation-register,
    .page-home-v4 .main-navigation .navigation-account {
        margin-left: 3px;
        padding-inline: 11px;
    }

    .kaerion-home-v4 .kaerion-now-grid {
        grid-template-columns: minmax(250px, .8fr) minmax(400px, 1.2fr);
    }

    .kaerion-home-v4 .kaerion-ranking-card {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .kaerion-home-v4 .kaerion-ranking-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .kaerion-home-v4 .kaerion-ranking-list > a {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .kaerion-home-v4 .kaerion-ranking-list > a > b {
        grid-column: 2;
    }
}

@media (max-width: 980px) {
    .page-home-v4 .site-header,
    .page-home-v4 .site-header.is-scrolled {
        width: 100%;
        min-height: 72px;
        margin: 0;
        padding-inline: 15px;
        border-radius: 0;
    }

    .page-home-v4 .main-navigation {
        top: calc(100% + 1px);
        right: 8px;
        width: min(360px, calc(100vw - 16px));
        padding: 12px;
        border-radius: 3px;
    }

    .page-home-v4 .main-navigation a {
        padding: 12px 14px;
    }

    .page-home-v4 .main-navigation .navigation-register,
    .page-home-v4 .main-navigation .navigation-account {
        margin-left: 0;
    }

    .kaerion-home-v4 {
        padding-top: 72px;
    }

    .kaerion-portal-hero {
        min-height: 620px;
        background-position: 72% center;
    }

    .kaerion-portal-hero::before {
        background: linear-gradient(90deg, rgba(1, 9, 7, .97), rgba(1, 10, 8, .83) 55%, rgba(1, 8, 7, .28));
    }

    .kaerion-portal-hero-copy > * {
        max-width: 590px;
    }

    .kaerion-hero-statusbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaerion-hero-statusbar > div:nth-child(2) {
        border-right: 0;
    }

    .kaerion-hero-statusbar > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(200, 164, 93, .13);
    }

    .kaerion-home-v4 .kaerion-now-grid,
    .kaerion-home-v4 .kaerion-start-grid,
    .kaerion-home-v4 .kaerion-identity {
        grid-template-columns: 1fr;
    }

    .kaerion-home-v4 .kaerion-ranking-card {
        grid-column: auto;
    }

    .kaerion-home-v4 .kaerion-world-card,
    .kaerion-home-v4 .kaerion-arena-card,
    .kaerion-home-v4 .kaerion-ranking-card {
        min-height: 0;
    }

    .kaerion-home-v4 .kaerion-start-card {
        min-height: 0;
    }

    .kaerion-home-v4 .kaerion-identity-flow {
        max-width: 700px;
    }
}

@media (max-width: 700px) {
    .page-home-v4 .brand-rune {
        width: 40px;
        height: 40px;
    }

    .page-home-v4 .brand-mark small {
        max-width: 160px;
        font-size: .5rem;
    }

    .kaerion-portal-hero {
        min-height: 670px;
        background-position: 68% center;
        background-size: auto 100%;
    }

    .kaerion-portal-hero::before {
        background:
            linear-gradient(90deg, rgba(1, 9, 7, .98), rgba(1, 10, 8, .84) 72%, rgba(1, 8, 7, .46)),
            linear-gradient(180deg, rgba(1, 8, 7, .08), rgba(1, 8, 7, .56));
    }

    .kaerion-portal-hero-copy,
    .kaerion-hero-statusbar,
    .kaerion-home-v4 > .kaerion-now,
    .kaerion-home-v4 > .kaerion-recent,
    .kaerion-home-v4 > .kaerion-start,
    .kaerion-home-v4 > .kaerion-identity,
    .page-home-v4 .site-footer {
        width: min(calc(100% - 22px), 1460px);
    }

    .kaerion-portal-hero-copy {
        padding: 54px 0 42px;
    }

    .kaerion-portal-hero-copy h1 {
        font-size: clamp(3.55rem, 17vw, 5.1rem);
        line-height: .8;
    }

    .kaerion-portal-hero-copy h1 span:last-child {
        margin-left: .28em;
    }

    .kaerion-home-v4 .kaerion-home-lead {
        font-size: .88rem;
    }

    .kaerion-home-v4 .kaerion-home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .kaerion-home-v4 .kaerion-home-actions > * {
        width: 100%;
        justify-content: center;
    }

    .kaerion-home-v4 .kaerion-home-actions > .ghost-button {
        min-height: 48px;
    }

    .kaerion-hero-statusbar {
        grid-template-columns: 1fr;
    }

    .kaerion-hero-statusbar > div,
    .kaerion-hero-statusbar > div:nth-child(2) {
        min-height: 55px;
        border-right: 0;
        border-bottom: 1px solid rgba(200, 164, 93, .13);
    }

    .kaerion-hero-statusbar > div:last-child {
        border-bottom: 0;
    }

    .kaerion-home-v4 .kaerion-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .kaerion-home-v4 .kaerion-section-heading > p {
        text-align: left;
    }

    .kaerion-home-v4 .kaerion-ranking-list {
        grid-template-columns: 1fr;
    }

    .kaerion-home-v4 .kaerion-ranking-list > a {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .kaerion-home-v4 .kaerion-ranking-list > a > b {
        grid-column: auto;
    }

    .kaerion-home-v4 .kaerion-world-card,
    .kaerion-home-v4 .kaerion-arena-card,
    .kaerion-home-v4 .kaerion-ranking-card {
        padding: 19px;
    }

    .kaerion-home-v4 .kaerion-start-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 19px;
    }

    .kaerion-home-v4 .kaerion-identity {
        padding: 22px;
    }

    .kaerion-home-v4 .kaerion-identity-flow {
        grid-template-columns: 1fr;
    }

    .kaerion-home-v4 .kaerion-identity-flow > i {
        transform: rotate(90deg);
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kaerion-portal-hero::after {
        animation: none !important;
    }

    .kaerion-home-v4 .kaerion-world-card,
    .kaerion-home-v4 .kaerion-arena-card,
    .kaerion-home-v4 .kaerion-ranking-card,
    .kaerion-home-v4 .kaerion-start-card,
    .kaerion-home-v4 .kaerion-recent article {
        transition: none !important;
    }
}

/* =========================================================
   v1.08.0 — wierne odwzorowanie makiety Portalu Gracza
   ========================================================= */
.page-home-v5 {
    background: #010605;
}

.page-home-v5 .site-background {
    background:
        linear-gradient(rgba(2, 9, 8, .9), rgba(1, 6, 5, .98)),
        repeating-linear-gradient(45deg, rgba(200, 164, 93, .018) 0 1px, transparent 1px 16px),
        #010605;
}

.page-home-v5 .ambient,
.page-home-v5 .mist-layer {
    opacity: .18;
}

.page-home-v5 .site-header,
.page-home-v5 .site-header.is-scrolled {
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 0 max(34px, calc((100% - 1510px) / 2));
    border: 0;
    border-top: 1px solid rgba(207, 166, 75, .45);
    border-bottom: 1px solid rgba(207, 166, 75, .55);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(2, 8, 8, .99), rgba(1, 7, 7, .97)),
        #010706;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .46), inset 0 -1px 0 rgba(255, 223, 138, .05);
    backdrop-filter: blur(16px);
}

.page-home-v5 .site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(54, 202, 174, .12), rgba(220, 176, 76, .28), rgba(54, 202, 174, .12), transparent);
    pointer-events: none;
}

.page-home-v5 .brand-mark {
    gap: 13px;
}

.page-home-v5 .brand-rune {
    position: relative;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(230, 191, 96, .72);
    border-radius: 50%;
    transform: none;
    color: #efd48d;
    background:
        radial-gradient(circle, rgba(27, 111, 91, .22), transparent 52%),
        conic-gradient(from 22deg, rgba(215, 170, 66, .2), rgba(4, 20, 17, .95), rgba(215, 170, 66, .16), rgba(4, 20, 17, .95));
    box-shadow: inset 0 0 0 4px rgba(1, 8, 7, .82), inset 0 0 0 5px rgba(226, 184, 86, .26), 0 0 20px rgba(207, 166, 75, .1);
}

.page-home-v5 .brand-rune b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    font-weight: 500;
    text-shadow: 0 0 13px rgba(65, 218, 189, .32);
}

.page-home-v5 .brand-mark strong {
    color: #e8c777;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2.05vw, 2.15rem);
    font-weight: 500;
    letter-spacing: .1em;
    text-shadow: 0 0 20px rgba(207, 166, 75, .12);
}

.page-home-v5 .brand-mark small {
    display: none;
}

.page-home-v5 .main-navigation {
    gap: clamp(3px, .55vw, 10px);
    flex-wrap: nowrap;
    padding: 0;
}

.page-home-v5 .navigation-ornament {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border: 1px solid rgba(206, 164, 69, .68);
    transform: rotate(45deg);
    box-shadow: 0 0 7px rgba(206, 164, 69, .18);
}

.page-home-v5 .main-navigation > a,
.page-home-v5 .navigation-dropdown > button {
    border-radius: 0;
    color: #c9c5b5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.72rem, .8vw, .84rem);
    letter-spacing: .055em;
    text-transform: uppercase;
}

.page-home-v5 .main-navigation > a {
    padding: 15px 12px;
}

.page-home-v5 .navigation-dropdown > button {
    padding: 15px 12px;
}

.page-home-v5 .navigation-dropdown > button:hover,
.page-home-v5 .navigation-dropdown.is-current > button,
.page-home-v5 .navigation-dropdown.is-open > button {
    color: #e9cf8d;
    background: transparent;
}

.page-home-v5 .main-navigation > a::after {
    right: 9px;
    bottom: 4px;
    left: 9px;
    background: linear-gradient(90deg, transparent, #e5bd58, transparent);
    box-shadow: 0 0 10px rgba(229, 189, 88, .46);
}

.page-home-v5 .navigation-dropdown-menu {
    top: calc(100% + 17px);
    border-color: rgba(210, 170, 76, .38);
    border-radius: 2px;
    background: rgba(1, 10, 9, .98);
}

.page-home-v5 .navigation-dropdown-menu a {
    border-radius: 1px;
    font-family: Georgia, "Times New Roman", serif;
    text-transform: none;
}

.page-home-v5 .main-navigation .navigation-register {
    margin-left: 2px;
    border: 0;
    border-radius: 0;
    color: #d7bd7a;
    background: transparent;
}

.page-home-v5 .main-navigation .navigation-account,
.page-home-v5 .main-navigation .navigation-admin {
    min-height: 46px;
    margin-left: 9px;
    padding: 0 18px;
    border: 1px solid rgba(49, 185, 161, .55);
    border-radius: 1px;
    color: #e3e0d2;
    background: linear-gradient(180deg, rgba(12, 55, 47, .62), rgba(2, 20, 17, .8));
    box-shadow: inset 0 0 0 3px rgba(1, 10, 8, .62), inset 0 0 0 4px rgba(214, 174, 79, .16);
}

.kaerion-mockup-home {
    width: 100%;
    margin: 0;
    padding: 80px 0 82px;
}

.kaerion-mockup-hero {
    position: relative;
    display: grid;
    min-height: 458px;
    overflow: hidden;
    border-bottom: 1px solid rgba(205, 166, 74, .38);
    background-color: #020b0a;
    background-image:
        linear-gradient(90deg, rgba(0, 7, 7, .88) 0%, rgba(0, 8, 8, .72) 26%, rgba(0, 8, 8, .25) 48%, rgba(0, 6, 6, .05) 70%),
        url("../img/background/kaerion-portal-hero-v2.webp");
    background-repeat: no-repeat;
    background-position: center, right 43%;
    background-size: cover, auto 142%;
    isolation: isolate;
}

.kaerion-mockup-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 5, 5, .02), rgba(0, 5, 5, .08) 66%, rgba(0, 5, 5, .38)),
        radial-gradient(circle at 72% 47%, rgba(63, 235, 205, .1), transparent 24%);
    pointer-events: none;
    animation: kaerion-mockup-portal-glow 6s ease-in-out infinite alternate;
}

.kaerion-mockup-hero-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    width: min(calc(100% - 72px), 1510px);
    margin: 0 auto;
    padding: 30px 0 31px 58px;
}

.kaerion-hero-ornament {
    display: flex;
    width: 395px;
    align-items: center;
    color: #d4aa4a;
}

.kaerion-hero-ornament i {
    display: block;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(213, 171, 73, .03), rgba(213, 171, 73, .76));
}

.kaerion-hero-ornament b {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    border: 1px solid #d8ad4e;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(216, 173, 78, .3);
}

.kaerion-hero-ornament b::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(88, 224, 199, .58);
}

.kaerion-hero-ornament.is-top {
    margin-bottom: 15px;
}

.kaerion-hero-ornament.is-top::after {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(213, 171, 73, .72);
}

.kaerion-hero-ornament.is-bottom {
    width: 390px;
    margin-top: 14px;
}

.kaerion-hero-ornament.is-bottom i {
    background: linear-gradient(90deg, rgba(84, 217, 193, .76), rgba(84, 217, 193, .02));
}

.kaerion-mockup-hero-copy h1 {
    margin: 0;
    color: #e8c979;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 6.1vw, 6.05rem);
    font-weight: 500;
    line-height: .8;
    letter-spacing: .015em;
    text-transform: uppercase;
    text-shadow: 0 4px 0 rgba(64, 42, 13, .42), 0 18px 48px rgba(0, 0, 0, .72), 0 0 20px rgba(230, 192, 98, .08);
}

.kaerion-mockup-hero-copy > p {
    margin: 17px 0 0 34px;
    color: #e8e2d1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    letter-spacing: .01em;
    text-shadow: 0 5px 18px rgba(0, 0, 0, .92);
}

.kaerion-mockup-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 19px 0 0 -28px;
}

.kaerion-etched-button {
    position: relative;
    display: inline-flex;
    gap: 13px;
    align-items: center;
    justify-content: center;
    min-width: 270px;
    min-height: 65px;
    padding: 0 24px;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    color: #efe8d5;
    font-family: Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.kaerion-etched-button::before,
.kaerion-etched-button::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.kaerion-etched-button::before {
    inset: 2px;
    border: 1px solid rgba(239, 211, 137, .48);
    clip-path: inherit;
}

.kaerion-etched-button::after {
    top: 5px;
    right: 6px;
    bottom: 5px;
    left: 6px;
    border: 1px solid rgba(3, 10, 9, .72);
    clip-path: inherit;
}

.kaerion-etched-button.is-teal {
    border: 1px solid rgba(61, 204, 180, .9);
    background:
        linear-gradient(135deg, rgba(18, 111, 94, .96), rgba(3, 49, 43, .98)),
        #073e35;
    box-shadow: inset 0 0 28px rgba(70, 231, 201, .1), 0 10px 24px rgba(0, 0, 0, .38);
}

.kaerion-etched-button.is-gold {
    border: 1px solid rgba(232, 190, 93, .86);
    background:
        linear-gradient(135deg, rgba(151, 110, 46, .97), rgba(72, 48, 17, .98)),
        #684719;
    box-shadow: inset 0 0 28px rgba(255, 222, 139, .1), 0 10px 24px rgba(0, 0, 0, .38);
}

.kaerion-etched-button > span,
.kaerion-etched-button > strong {
    position: relative;
    z-index: 2;
}

.kaerion-etched-button > span {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
}

.kaerion-etched-button > strong {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .035em;
}

.kaerion-etched-button:hover:not(.is-disabled) {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.kaerion-etched-button.is-disabled {
    cursor: not-allowed;
    filter: grayscale(.35);
    opacity: .58;
}

.kaerion-mockup-status,
.kaerion-mockup-dashboard,
.kaerion-lower-section,
.page-home-v5 .kaerion-identity,
.page-home-v5 .site-footer {
    width: min(calc(100% - 68px), 1510px);
    margin-right: auto;
    margin-left: auto;
}

.kaerion-mockup-status {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(250px, 1fr) auto;
    gap: 0;
    min-height: 52px;
    align-items: center;
    margin-top: -1px;
    border: 1px solid rgba(209, 167, 72, .52);
    background:
        linear-gradient(180deg, rgba(4, 20, 18, .98), rgba(1, 12, 11, .98)),
        #020e0c;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .34), inset 0 0 0 2px rgba(1, 7, 6, .8), inset 0 0 0 3px rgba(61, 182, 158, .05);
}

.kaerion-mockup-status > div {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 0 21px;
    color: #aeb7ad;
    font-size: .75rem;
}

.kaerion-mockup-status > div + div:not(.is-system) {
    border-left: 1px solid rgba(202, 163, 73, .28);
}

.kaerion-mockup-status strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-mockup-status span {
    color: #7f9187;
}

.kaerion-mockup-status .is-online {
    color: #77e3a9;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kaerion-mockup-status .is-online i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #65dd9e;
    box-shadow: 0 0 8px rgba(101, 221, 158, .88), 0 0 0 4px rgba(101, 221, 158, .08);
    animation: kaerion-status-pulse 2.4s ease-in-out infinite;
}

.kaerion-mockup-status .is-system {
    justify-self: end;
    color: #63ca9b;
}

.kaerion-mockup-status .is-system b {
    color: #aeb9af;
    font-size: .95rem;
}

.kaerion-mockup-dashboard {
    display: grid;
    grid-template-columns: minmax(310px, .9fr) minmax(390px, .95fr) minmax(420px, 1.08fr);
    gap: 14px;
    margin-top: 19px;
}

.kaerion-mockup-card {
    position: relative;
    min-width: 0;
    min-height: 350px;
    overflow: hidden;
    border: 1px solid rgba(208, 167, 72, .52);
    border-radius: 1px;
    background:
        linear-gradient(145deg, rgba(7, 29, 25, .88), rgba(1, 12, 11, .98)),
        #020e0c;
    box-shadow: 0 15px 38px rgba(0, 0, 0, .34), inset 0 0 0 2px rgba(1, 8, 7, .88), inset 0 0 0 3px rgba(214, 171, 76, .06);
}

.kaerion-mockup-card::before,
.kaerion-mockup-card::after {
    content: "";
    position: absolute;
    z-index: 5;
    width: 17px;
    height: 17px;
    pointer-events: none;
}

.kaerion-mockup-card::before {
    top: 3px;
    left: 3px;
    border-top: 1px solid #ddb95c;
    border-left: 1px solid #ddb95c;
}

.kaerion-mockup-card::after {
    right: 3px;
    bottom: 3px;
    border-right: 1px solid #ddb95c;
    border-bottom: 1px solid #ddb95c;
}

.kaerion-mockup-card-title {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 11px;
    align-items: center;
    min-height: 45px;
    padding: 0 17px;
    border-bottom: 1px solid rgba(207, 166, 75, .28);
    background: rgba(1, 10, 9, .84);
}

.kaerion-mockup-card-title > span {
    color: #e2bf68;
    font-size: 1.05rem;
}

.kaerion-mockup-card-title h2 {
    margin: 0;
    color: #ded5bc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .93rem;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kaerion-mockup-card-title > a {
    margin-left: auto;
    color: #4ed1b4;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kaerion-mockup-card-title > a b {
    margin-left: 4px;
    font-size: 1rem;
}

.kaerion-event-scene {
    position: relative;
    min-height: 303px;
    background:
        linear-gradient(180deg, rgba(1, 9, 8, .54), rgba(1, 8, 7, .82)),
        linear-gradient(90deg, rgba(1, 9, 8, .18), rgba(1, 9, 8, .72)),
        url("../img/background/main-background.jpg") 28% center / cover no-repeat;
}

.kaerion-event-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(205, 161, 68, .08), transparent 35%);
    pointer-events: none;
}

.kaerion-event-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 303px;
    align-items: center;
    flex-direction: column;
    padding: 20px 28px 16px;
    text-align: center;
}

.kaerion-event-copy > small {
    color: #e7c36d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kaerion-event-copy h3 {
    display: -webkit-box;
    max-width: 100%;
    min-height: 36px;
    margin: 4px 0 0;
    overflow: hidden;
    color: #d7d5c8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kaerion-event-state {
    color: #68dfaa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.04rem;
    font-weight: 500;
}

.kaerion-event-divider {
    display: flex;
    width: 100px;
    align-items: center;
    margin: 10px 0;
}

.kaerion-event-divider::before,
.kaerion-event-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(213, 172, 76, .45);
}

.kaerion-event-divider i {
    width: 7px;
    height: 7px;
    margin: 0 8px;
    border: 1px solid rgba(213, 172, 76, .8);
    transform: rotate(45deg);
}

.kaerion-event-duel {
    display: grid;
    gap: 6px;
    width: 100%;
}

.kaerion-event-duel > small,
.kaerion-event-empty small {
    color: #b8b8ad;
    font-size: .68rem;
    letter-spacing: .04em;
}

.kaerion-event-duel > strong {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #e3dfcf;
    font-size: .72rem;
}

.kaerion-event-duel > strong > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-event-duel > strong > span:first-child {
    text-align: right;
}

.kaerion-event-duel > strong > span:last-child {
    text-align: left;
}

.kaerion-event-duel > strong b,
.kaerion-event-empty strong {
    color: #d9e9e3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .05em;
}

.kaerion-event-duel.is-idle > strong {
    grid-template-columns: 1fr;
}

.kaerion-event-duel.is-idle > strong b,
.kaerion-event-duel.is-idle > strong > span:last-child {
    display: none;
}

.kaerion-event-duel.is-idle > strong > span:first-child {
    text-align: center;
}

.kaerion-event-empty {
    display: grid;
    gap: 3px;
    min-height: 58px;
    place-content: center;
}

.kaerion-event-progress {
    display: grid;
    gap: 4px;
    width: 100%;
    margin-top: 10px;
}

.kaerion-event-progress > span {
    display: flex;
    justify-content: space-between;
    color: #99a59d;
    font-size: .59rem;
}

.kaerion-event-progress > span b {
    color: #dfc273;
}

.kaerion-event-progress > i {
    display: block;
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
}

.kaerion-event-progress > i b {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #42c4aa, #d7b45d);
    box-shadow: 0 0 10px rgba(66, 196, 170, .28);
    transition: width .35s ease;
}

.kaerion-event-progress > small {
    overflow: hidden;
    color: #83928a;
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-card-button {
    display: inline-flex;
    min-width: 218px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0 18px;
    border: 1px solid rgba(65, 205, 179, .56);
    color: #edd48d;
    background: rgba(1, 29, 25, .84);
    box-shadow: inset 0 0 0 3px rgba(1, 8, 7, .72), inset 0 0 0 4px rgba(215, 174, 79, .18);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: filter .2s ease, transform .2s ease;
}

.kaerion-card-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.14);
}

.kaerion-event-copy > .live-badge {
    position: absolute;
    top: 12px;
    right: 13px;
    padding: 6px 8px;
    border-radius: 1px;
    font-size: .55rem;
}

.kaerion-podium-card {
    min-height: 388px;
    background:
        radial-gradient(circle at 50% 54%, rgba(181, 137, 52, .09), transparent 42%),
        linear-gradient(145deg, rgba(5, 25, 22, .96), rgba(1, 11, 10, .99));
}

.kaerion-podium-tabs {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
}

.kaerion-podium-tabs button {
    padding: 4px 6px;
    border: 0;
    border-bottom: 1px solid transparent;
    color: #778c82;
    background: transparent;
    cursor: pointer;
    font-size: .54rem;
    font-weight: 800;
    text-transform: uppercase;
}

.kaerion-podium-tabs button.is-active {
    border-color: #d8b45a;
    color: #e1c574;
}

.kaerion-podium-card .kaerion-mockup-card-title > a {
    margin-left: 7px;
}

.kaerion-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 341px;
    padding: 43px 15px 24px;
}

.kaerion-podium[hidden] {
    display: none;
}

.kaerion-podium-place {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 220px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 34px 10px 13px;
    border: 1px solid rgba(114, 137, 132, .28);
    color: inherit;
    background: linear-gradient(180deg, rgba(20, 42, 39, .94), rgba(3, 17, 16, .98));
    box-shadow: inset 0 0 38px rgba(97, 127, 121, .04), 0 10px 24px rgba(0, 0, 0, .28);
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.kaerion-podium-place.is-first {
    min-height: 250px;
    padding-top: 39px;
    border-color: rgba(226, 180, 74, .67);
    background:
        radial-gradient(circle at 50% 34%, rgba(194, 146, 48, .22), transparent 37%),
        linear-gradient(180deg, rgba(63, 45, 20, .97), rgba(15, 14, 10, .99));
    box-shadow: inset 0 0 48px rgba(222, 174, 65, .08), 0 14px 34px rgba(0, 0, 0, .34);
}

.kaerion-podium-place.is-third {
    border-color: rgba(174, 93, 45, .52);
    background: linear-gradient(180deg, rgba(49, 30, 20, .95), rgba(14, 13, 11, .99));
}

.kaerion-podium-place.is-empty {
    opacity: .62;
}

.kaerion-podium-number {
    position: absolute;
    top: -22px;
    display: grid;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(180, 196, 196, .62);
    border-radius: 50%;
    place-items: center;
    color: #d9dfdd;
    background: #192624;
    box-shadow: inset 0 0 0 4px rgba(2, 11, 10, .7), 0 6px 16px rgba(0, 0, 0, .4);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.kaerion-podium-place.is-first .kaerion-podium-number {
    width: 52px;
    height: 52px;
    border-color: #e1b74e;
    color: #f0d279;
    background: #4a3516;
    font-size: 1.6rem;
}

.kaerion-podium-place.is-third .kaerion-podium-number {
    border-color: rgba(190, 100, 48, .74);
    color: #d99668;
    background: #372015;
}

.kaerion-podium-avatar {
    position: relative;
    display: grid;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(174, 195, 193, .5);
    border-radius: 50%;
    place-items: center;
    color: #d8e7e2;
    background:
        radial-gradient(circle at 50% 33%, rgba(98, 217, 193, .24), transparent 30%),
        linear-gradient(145deg, #233b37, #071613);
    box-shadow: inset 0 0 0 5px rgba(1, 9, 8, .7), 0 0 18px rgba(81, 199, 176, .09);
}

.kaerion-podium-avatar::before,
.kaerion-podium-avatar::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(212, 171, 75, .28);
    border-radius: 50%;
}

.kaerion-podium-avatar::after {
    inset: -12px;
    border-top-color: rgba(81, 214, 189, .55);
    border-right-color: transparent;
    transform: rotate(34deg);
}

.kaerion-podium-place.is-first .kaerion-podium-avatar {
    width: 88px;
    height: 88px;
    border-color: rgba(232, 188, 82, .78);
    color: #f1d98d;
    background:
        radial-gradient(circle at 50% 33%, rgba(236, 185, 72, .25), transparent 31%),
        linear-gradient(145deg, #59411e, #15130c);
}

.kaerion-podium-avatar b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 500;
}

.kaerion-podium-place > strong {
    max-width: 100%;
    margin-top: 17px;
    overflow: hidden;
    color: #e4dfcd;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.03rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-podium-place > small {
    margin-top: 4px;
    color: #82968d;
    font-size: .54rem;
    letter-spacing: .12em;
}

.kaerion-podium-place > em {
    margin-top: auto;
    color: #b8c5bf;
    font-size: .72rem;
    font-style: normal;
}

.kaerion-podium-place.is-first > em {
    color: #e0bd63;
}

.kaerion-news-card {
    padding-bottom: 0;
    scroll-margin-top: 100px;
}

.kaerion-news-list {
    display: grid;
    min-height: 303px;
    padding: 8px 14px 10px;
}

.kaerion-news-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 7px 2px;
    border-bottom: 1px solid rgba(175, 180, 164, .13);
    transition: background .2s ease, transform .2s ease;
}

.kaerion-news-item:hover {
    transform: translateX(3px);
    background: rgba(207, 166, 75, .035);
}

.kaerion-news-item:last-child {
    border-bottom: 0;
}

.kaerion-news-thumb {
    position: relative;
    display: grid;
    width: 92px;
    height: 53px;
    overflow: hidden;
    border: 1px solid rgba(207, 166, 75, .23);
    place-items: center;
    color: #e8cc7f;
    background:
        linear-gradient(rgba(1, 9, 8, .35), rgba(1, 9, 8, .65)),
        url("../img/background/kaerion-portal-hero-v2.webp") center / 250% auto no-repeat;
}

.kaerion-news-item.is-result .kaerion-news-thumb {
    background-position: center, 68% 58%;
}

.kaerion-news-item.is-achievement .kaerion-news-thumb {
    background-position: center, 34% 46%;
}

.kaerion-news-item.is-champion .kaerion-news-thumb {
    background-position: center, 82% 48%;
}

.kaerion-news-thumb::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(231, 201, 126, .09);
}

.kaerion-news-thumb b {
    position: relative;
    z-index: 2;
    font-size: 1.18rem;
    text-shadow: 0 0 14px rgba(0, 0, 0, .9);
}

.kaerion-news-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.kaerion-news-copy strong,
.kaerion-news-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaerion-news-copy strong {
    color: #ded9c8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .78rem;
    font-weight: 500;
}

.kaerion-news-copy small {
    color: #8f9d96;
    font-size: .61rem;
}

.kaerion-news-item time {
    align-self: start;
    padding-top: 4px;
    color: #75867e;
    font-size: .58rem;
    white-space: nowrap;
}

.kaerion-news-empty {
    display: grid;
    gap: 6px;
    place-content: center;
    color: #84958c;
    text-align: center;
}

.kaerion-news-empty strong {
    color: #d9c17d;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.kaerion-news-empty span {
    max-width: 330px;
    font-size: .7rem;
}

.kaerion-discord-shortcut {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 7;
    display: grid;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(144, 162, 240, .55);
    place-items: center;
    color: #d9ddff;
    background: linear-gradient(145deg, #3e4b87, #222b5a);
    box-shadow: inset 0 0 0 3px rgba(5, 10, 30, .48), 0 8px 18px rgba(0, 0, 0, .34);
}

.kaerion-discord-shortcut span {
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.kaerion-lower-section {
    margin-top: 76px;
}

.kaerion-lower-heading {
    max-width: 880px;
    margin: 0 auto 24px;
    text-align: center;
}

.kaerion-heading-ornament {
    display: block;
    width: 180px;
    height: 1px;
    margin: 0 auto 16px;
    background: linear-gradient(90deg, transparent, #d7b157, transparent);
}

.kaerion-lower-heading > small {
    color: #56cdb6;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.kaerion-lower-heading h2 {
    margin: 7px 0 8px;
    color: #e5cb84;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 500;
}

.kaerion-lower-heading p {
    margin: 0;
    color: #8fa098;
    font-size: .82rem;
    line-height: 1.65;
}

.page-home-v5 .kaerion-start-grid {
    gap: 14px;
}

.page-home-v5 .kaerion-start-card {
    min-height: 215px;
    border-radius: 1px;
    background: linear-gradient(145deg, rgba(7, 31, 26, .92), rgba(1, 12, 10, .97));
}

.page-home-v5 .kaerion-start-card::after {
    display: none;
}

.page-home-v5 .kaerion-identity {
    margin-top: 64px;
    border-radius: 1px;
}

.page-home-v5 .site-footer {
    margin-top: 68px;
}

@keyframes kaerion-mockup-portal-glow {
    from { opacity: .62; }
    to { opacity: 1; }
}

@media (max-width: 1320px) {
    .page-home-v5 .site-header,
    .page-home-v5 .site-header.is-scrolled {
        padding-inline: 20px;
    }

    .page-home-v5 .brand-rune {
        width: 46px;
        height: 46px;
    }

    .page-home-v5 .brand-mark strong {
        font-size: 1.55rem;
    }

    .page-home-v5 .main-navigation > a,
    .page-home-v5 .navigation-dropdown > button {
        padding-inline: 8px;
        font-size: .69rem;
    }

    .page-home-v5 .main-navigation .navigation-account,
    .page-home-v5 .main-navigation .navigation-admin {
        padding-inline: 12px;
    }

    .kaerion-mockup-dashboard {
        grid-template-columns: minmax(310px, .9fr) minmax(410px, 1.1fr);
    }

    .kaerion-news-card {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .kaerion-news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .kaerion-news-item:nth-child(odd) {
        padding-right: 12px;
        border-right: 1px solid rgba(175, 180, 164, .13);
    }
}

@media (max-width: 1060px) {
    .page-home-v5 .mobile-menu-button {
        display: block;
        border-radius: 1px;
    }

    .page-home-v5 .main-navigation {
        position: absolute;
        top: calc(100% + 1px);
        right: 10px;
        display: none;
        width: min(380px, calc(100vw - 20px));
        padding: 12px;
        border: 1px solid rgba(210, 170, 76, .45);
        background: rgba(1, 10, 9, .99);
        box-shadow: 0 22px 60px rgba(0, 0, 0, .52);
    }

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

    .page-home-v5 .navigation-ornament {
        display: none;
    }

    .page-home-v5 .main-navigation > a,
    .page-home-v5 .navigation-dropdown > button {
        width: 100%;
        padding: 12px 14px;
        text-align: left;
    }

    .page-home-v5 .main-navigation .navigation-account,
    .page-home-v5 .main-navigation .navigation-admin {
        margin-left: 0;
    }

    .page-home-v5 .navigation-dropdown {
        width: 100%;
    }

    .page-home-v5 .navigation-dropdown > button {
        justify-content: space-between;
    }

    .page-home-v5 .navigation-dropdown-menu,
    .page-home-v5 .navigation-dropdown-menu-wide {
        position: static;
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
        margin-top: 3px;
        transform: none;
        box-shadow: none;
    }

    .kaerion-mockup-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaerion-mockup-status > div {
        min-height: 48px;
    }

    .kaerion-mockup-status > div:nth-child(2) {
        border-right: 0;
    }

    .kaerion-mockup-status > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(202, 163, 73, .2);
    }

    .kaerion-mockup-status .is-system {
        justify-self: stretch;
    }
}

@media (max-width: 900px) {
    .kaerion-mockup-hero {
        min-height: 520px;
        background-position: center, 75% 45%;
        background-size: cover, auto 126%;
    }

    .kaerion-mockup-hero::before {
        background: linear-gradient(90deg, rgba(0, 7, 7, .92), rgba(0, 8, 8, .7) 68%, rgba(0, 6, 6, .25));
    }

    .kaerion-mockup-hero-copy {
        padding-left: 24px;
    }

    .kaerion-mockup-dashboard {
        grid-template-columns: 1fr;
    }

    .kaerion-news-card {
        grid-column: auto;
    }

    .kaerion-news-list {
        grid-template-columns: 1fr;
    }

    .kaerion-news-item:nth-child(odd) {
        padding-right: 2px;
        border-right: 0;
    }

    .page-home-v5 .kaerion-start-grid,
    .page-home-v5 .kaerion-identity {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-home-v5 .site-header,
    .page-home-v5 .site-header.is-scrolled {
        min-height: 70px;
        padding-inline: 12px;
    }

    .page-home-v5 .brand-rune {
        width: 42px;
        height: 42px;
    }

    .page-home-v5 .brand-mark strong {
        font-size: 1.25rem;
    }

    .kaerion-mockup-home {
        padding-top: 70px;
    }

    .kaerion-mockup-hero {
        min-height: 580px;
        background-position: center, 69% 45%;
        background-size: cover, auto 113%;
    }

    .kaerion-mockup-hero::before {
        background:
            linear-gradient(90deg, rgba(0, 7, 7, .96), rgba(0, 8, 8, .77) 82%, rgba(0, 6, 6, .5)),
            linear-gradient(180deg, rgba(0, 7, 7, .05), rgba(0, 7, 7, .55));
    }

    .kaerion-mockup-hero-copy,
    .kaerion-mockup-status,
    .kaerion-mockup-dashboard,
    .kaerion-lower-section,
    .page-home-v5 .kaerion-identity,
    .page-home-v5 .site-footer {
        width: min(calc(100% - 20px), 1510px);
    }

    .kaerion-mockup-hero-copy {
        padding: 38px 0 32px 7px;
    }

    .kaerion-mockup-hero-copy h1 {
        font-size: clamp(3.25rem, 17vw, 4.7rem);
    }

    .kaerion-hero-ornament,
    .kaerion-hero-ornament.is-bottom {
        width: min(82vw, 345px);
    }

    .kaerion-mockup-hero-copy > p {
        margin-left: 10px;
        font-size: 1.05rem;
    }

    .kaerion-mockup-actions {
        align-items: stretch;
        flex-direction: column;
        margin-left: 0;
    }

    .kaerion-etched-button {
        width: 100%;
        min-width: 0;
        min-height: 57px;
    }

    .kaerion-mockup-status {
        grid-template-columns: 1fr;
    }

    .kaerion-mockup-status > div,
    .kaerion-mockup-status > div:nth-child(2) {
        min-height: 46px;
        border-right: 0;
        border-bottom: 1px solid rgba(202, 163, 73, .17);
    }

    .kaerion-mockup-status > div:last-child {
        border-bottom: 0;
    }

    .kaerion-podium-card .kaerion-mockup-card-title > a {
        display: none;
    }

    .kaerion-podium-card .kaerion-mockup-card-title h2 {
        margin-right: auto;
    }

    .kaerion-podium-tabs {
        margin-left: 0;
    }

    .kaerion-podium {
        gap: 6px;
        padding-inline: 8px;
    }

    .kaerion-podium-place {
        min-height: 200px;
        padding-inline: 6px;
    }

    .kaerion-podium-place.is-first {
        min-height: 228px;
    }

    .kaerion-podium-avatar {
        width: 60px;
        height: 60px;
    }

    .kaerion-podium-place.is-first .kaerion-podium-avatar {
        width: 68px;
        height: 68px;
    }

    .kaerion-podium-place > strong {
        font-size: .78rem;
    }

    .kaerion-news-item {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .kaerion-news-thumb {
        width: 70px;
    }

    .kaerion-news-item time {
        display: none;
    }

    .page-home-v5 .kaerion-start-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 19px;
    }

    .page-home-v5 .kaerion-identity {
        padding: 22px;
    }

    .page-home-v5 .kaerion-identity-flow {
        grid-template-columns: 1fr;
    }

    .page-home-v5 .kaerion-identity-flow > i {
        transform: rotate(90deg);
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kaerion-mockup-hero::before,
    .kaerion-mockup-status .is-online i {
        animation: none !important;
    }

    .kaerion-etched-button,
    .kaerion-card-button,
    .kaerion-news-item {
        transition: none !important;
    }
}