/*
 * Kaerion Visual Studio
 * Wspólna warstwa zmiennych dla każdej publicznej podstrony.
 */

body.portal-v2 {
    --kv-accent: #2dc2a5;
    --kv-gold: #d0a84c;
    --kv-background: #010706;
    --kv-surface: #041410;
    --kv-text: #d6d4c5;
    --kv-muted: #8fa49a;
    --kv-font-scale: 1;
    --kv-content-width: 1440px;
    --kv-spacing: 1;
    --kv-radius: 18px;
    --kv-panel-opacity: 94%;
    --kv-header-height: 80px;
    --kv-masthead-height: 442px;
    --kv-bg-x: 50%;
    --kv-bg-y: 47%;

    --ink: var(--kv-background);
    --deep: var(--kv-background);
    --deep-soft: color-mix(in srgb, var(--kv-surface) 84%, var(--kv-background));
    --jade: color-mix(in srgb, var(--kv-accent) 42%, var(--kv-surface));
    --jade-light: color-mix(in srgb, var(--kv-accent) 64%, var(--kv-surface));
    --turquoise: var(--kv-accent);
    --turquoise-soft: color-mix(in srgb, var(--kv-accent) 24%, transparent);
    --gold: var(--kv-gold);
    --gold-light: color-mix(in srgb, var(--kv-gold) 76%, white);
    --parchment: var(--kv-text);
    --muted: var(--kv-muted);
    --panel: color-mix(in srgb, var(--kv-surface) var(--kv-panel-opacity), transparent);
    --panel-light: color-mix(in srgb, var(--kv-surface) 78%, var(--kv-accent));
    --border: color-mix(in srgb, var(--kv-gold) 43%, transparent);
    --content-width: var(--kv-content-width);

    --v2-ink: var(--kv-background);
    --v2-deep: var(--kv-surface);
    --v2-deep-soft: color-mix(in srgb, var(--kv-surface) 86%, var(--kv-accent));
    --v2-panel: color-mix(in srgb, var(--kv-surface) var(--kv-panel-opacity), transparent);
    --v2-panel-soft: color-mix(in srgb, var(--kv-surface) 84%, transparent);
    --v2-panel-raised: color-mix(in srgb, var(--kv-surface) 82%, var(--kv-accent));
    --v2-jade: var(--kv-accent);
    --v2-jade-soft: color-mix(in srgb, var(--kv-accent) 16%, transparent);
    --v2-gold: var(--kv-gold);
    --v2-gold-bright: color-mix(in srgb, var(--kv-gold) 72%, white);
    --v2-gold-muted: color-mix(in srgb, var(--kv-gold) 68%, var(--kv-background));
    --v2-copy: var(--kv-text);
    --v2-muted: var(--kv-muted);
    --v2-line: color-mix(in srgb, var(--kv-gold) 38%, transparent);
    --v2-line-soft: color-mix(in srgb, var(--kv-accent) 15%, transparent);
    --v2-width: var(--kv-content-width);

    font-size: calc(16px * var(--kv-font-scale));
    background: var(--kv-background);
    color: var(--kv-text);
}

body.portal-v2[data-site-font-family="serif"] {
    font-family: Georgia, "Times New Roman", serif;
}

body.portal-v2[data-site-font-family="compact"] {
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    letter-spacing: -0.008em;
}

body.portal-v2 .site-background {
    background-position: var(--kv-bg-x) var(--kv-bg-y);
}

body.portal-v2 .site-header,
body.portal-v2 .site-header.is-scrolled {
    min-height: var(--kv-header-height);
}

body.portal-v2[data-site-header-position="static"] .site-header,
body.portal-v2[data-site-header-position="static"] .site-header.is-scrolled {
    position: absolute;
}

body.portal-v2[data-site-navigation-style="pill"]:not(.page-home-v6) .site-header,
body.portal-v2[data-site-navigation-style="pill"]:not(.page-home-v6) .site-header.is-scrolled {
    top: 14px;
    right: 18px;
    left: 18px;
    width: auto;
    max-width: var(--kv-content-width);
    margin: 0 auto;
    padding-right: clamp(22px, 3vw, 44px);
    padding-left: clamp(22px, 3vw, 44px);
    border: 1px solid color-mix(in srgb, var(--kv-accent) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kv-surface) 92%, transparent);
}

body.portal-v2[data-site-navigation-style="minimal"] .site-header,
body.portal-v2[data-site-navigation-style="minimal"] .site-header.is-scrolled {
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kv-background) 88%, transparent), transparent);
    box-shadow: none;
    backdrop-filter: none;
}

body.portal-v2 .portal-masthead {
    min-height: var(--kv-masthead-height);
    margin-top: var(--kv-header-height);
}

body.portal-v2[data-site-navigation-style="pill"]:not(.page-home-v6) .portal-masthead {
    margin-top: calc(var(--kv-header-height) + 28px);
}

body.portal-v2 .portal-masthead-art {
    background-position: var(--kv-bg-x) var(--kv-bg-y);
}

body.portal-v2 .portal-masthead-grid,
body.portal-v2 .portal-status-ribbon > div,
body.portal-v2 .portal-v2-content,
body.portal-v2 .site-footer {
    max-width: var(--kv-content-width);
}

body.portal-v2 .portal-v2-content {
    --kv-space-unit: calc(1rem * var(--kv-spacing));
}

body.portal-v2 :where(
    .fantasy-panel,
    .portal-surface,
    .portal-data-panel,
    .portal-stat-card,
    .portal-filter-panel,
    .portal-profile-card,
    .portal-account-card,
    .game-registration-form-panel,
    .game-registration-side > article,
    .access-card
) {
    border-radius: var(--kv-radius);
    background-color: color-mix(in srgb, var(--kv-surface) var(--kv-panel-opacity), transparent);
}

body.portal-v2 :where(.portal-v2-content, .portal-masthead-grid) > * {
    --section-space: calc(1rem * var(--kv-spacing));
}

body.portal-v2 :where(input, textarea, select, button) {
    border-radius: min(var(--kv-radius), 16px);
}

body.portal-v2 :where(.fantasy-button, .ghost-button, .portal-action, .portal-chip) {
    border-color: color-mix(in srgb, var(--kv-accent) 38%, var(--kv-gold));
}

body.portal-v2[data-site-effects="soft"] :where(.ambient, .mist-layer, .particle-field) {
    opacity: 0.06 !important;
}

body.portal-v2[data-site-effects="soft"] :where(.site-background, .portal-masthead-art) {
    animation-duration: 80s !important;
}

body.portal-v2[data-site-effects="off"] :where(.ambient, .mist-layer, .particle-field) {
    display: none !important;
}

body.portal-v2[data-site-effects="off"] *,
body.portal-v2[data-site-effects="off"] *::before,
body.portal-v2[data-site-effects="off"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
}

/* Arena LIVE zachowuje własny układ transmisyjny, ale dziedziczy globalną
   paletę, typografię, kadr i efekty z tego samego edytora. */
body.live-v2 {
    --live-v2-gold: var(--kv-gold);
    --live-v2-gold-bright: color-mix(in srgb, var(--kv-gold) 72%, white);
    --live-v2-gold-deep: color-mix(in srgb, var(--kv-gold) 64%, var(--kv-background));
    --live-v2-teal: var(--kv-accent);
    --live-v2-teal-bright: color-mix(in srgb, var(--kv-accent) 70%, white);
    --live-v2-ink: var(--kv-background);
    --live-v2-panel: color-mix(in srgb, var(--kv-surface) var(--kv-panel-opacity), transparent);
    --live-v2-line: color-mix(in srgb, var(--kv-gold) 42%, transparent);
    --live-v2-muted: var(--kv-muted);
    color: var(--kv-text);
    background: var(--kv-background);
    font-size: calc(16px * var(--kv-font-scale));
}

body.live-v2[data-site-font-family="serif"] {
    font-family: Georgia, "Times New Roman", serif;
}

body.live-v2[data-site-font-family="compact"] {
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
}

body.live-v2 .site-background {
    background-position: var(--kv-bg-x) var(--kv-bg-y);
}

body.live-v2 :where(
    .live-overlay-header,
    .live-hype-strip,
    .live-league-table-panel,
    .live-league-duel-panel,
    .live-overlay-stage,
    .live-overlay-empty,
    .live-finished-stage
) {
    border-radius: var(--kv-radius);
}

body.live-v2[data-site-effects="soft"] :where(.ambient, .mist-layer, .particle-field) {
    opacity: 0.06 !important;
}

body.live-v2[data-site-effects="off"] :where(.ambient, .mist-layer, .particle-field) {
    display: none !important;
}

body.live-v2[data-site-effects="off"] *,
body.live-v2[data-site-effects="off"] *::before,
body.live-v2[data-site-effects="off"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
}

.game-account-shell {
    width: min(var(--kv-content-width), calc(100% - 40px));
    margin: 0 auto;
    padding: calc(58px * var(--kv-spacing)) 0 calc(92px * var(--kv-spacing));
}

.game-account-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: clamp(26px, 4vw, 52px);
}

.game-account-emblem {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--kv-accent) 48%, transparent);
    border-radius: 50%;
    color: var(--kv-accent);
    background: color-mix(in srgb, var(--kv-accent) 13%, transparent);
    font-size: 1.6rem;
}

.game-account-summary h1,
.game-account-grid h2 {
    margin: 5px 0 8px;
    color: var(--kv-text);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.game-account-summary h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.game-account-summary p,
.game-account-grid p {
    max-width: 720px;
    margin: 0;
    color: var(--kv-muted);
}

.game-account-status {
    display: grid;
    gap: 5px;
    min-width: 160px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--kv-accent) 28%, transparent);
    border-radius: var(--kv-radius);
    text-align: center;
}

.game-account-status small {
    color: var(--kv-muted);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.game-account-status strong {
    color: var(--kv-accent);
}

.game-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
    gap: calc(20px * var(--kv-spacing));
    margin-top: calc(20px * var(--kv-spacing));
}

.game-account-grid > * {
    padding: clamp(24px, 3vw, 38px);
}

.game-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.game-account-grid form {
    margin-top: 24px;
}

@media (max-width: 900px) {
    body.portal-v2 {
        --kv-content-width: 100%;
    }

    body.portal-v2[data-site-navigation-style="pill"]:not(.page-home-v6) .site-header,
    body.portal-v2[data-site-navigation-style="pill"]:not(.page-home-v6) .site-header.is-scrolled {
        top: 8px;
        right: 8px;
        left: 8px;
        border-radius: 22px;
    }

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

    .game-account-status {
        width: 100%;
    }
}