/* Sezonowy motyw zimowy TitansMC.
   Nakładka na motyw jasny i ciemny: lodowe akcenty, szron na nagłówku i zaspa w stopce.
   Padający śnieg rysuje motyw/zima.js. Żeby wyłączyć zimę, usuń z podstron
   linki do motyw/zima.css i motyw/zima.js. */

/* ===== Motyw ciemny: mroźna noc ===== */
:root {
    --bg-primary: #08101c;
    --bg-surface: #0f1a2b;
    --bg-surface-strong: #142236;
    --stroke-subtle: rgba(186, 230, 253, 0.1);
    --stroke-strong: rgba(186, 230, 253, 0.18);
    --text-muted: #b6c6dc;
    --accent: #7dd3fc;
    --accent-strong: #bae6fd;
    --zima-szron: rgba(224, 242, 254, 0.55);
    --zima-poswiata: rgba(125, 211, 252, 0.16);
    --zima-zorza: rgba(94, 234, 212, 0.08);
}

body {
    background:
        radial-gradient(ellipse 70% 45% at 15% 0%, var(--zima-zorza), transparent 70%),
        radial-gradient(ellipse 60% 40% at 85% 0%, rgba(165, 180, 252, 0.08), transparent 70%),
        radial-gradient(circle at top, var(--zima-poswiata), transparent 55%),
        var(--bg-primary);
    background-attachment: fixed;
}

/* Nagłówek: lodowa krawędź ze szronem */
header {
    border-bottom-color: rgba(186, 230, 253, 0.22);
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zima-szron) 18%,
        rgba(255, 255, 255, 0.9) 50%,
        var(--zima-szron) 82%,
        transparent 100%);
    box-shadow: 0 0 14px rgba(186, 230, 253, 0.45);
}

/* Sople zwisające spod nagłówka */
header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cg fill='%23e0f2fe' fill-opacity='0.75'%3E%3Cpath d='M0 0h8l-4 9z'/%3E%3Cpath d='M11 0h6l-3 5z'/%3E%3Cpath d='M21 0h9l-4.5 12z'/%3E%3Cpath d='M34 0h6l-3 6z'/%3E%3Cpath d='M44 0h8l-4 10z'/%3E%3Cpath d='M55 0h5l-2.5 4z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 60px 12px repeat-x;
    filter: drop-shadow(0 2px 3px rgba(186, 230, 253, 0.3));
}

:root[data-motyw="jasny"] header::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cg fill='%237cc4ec' fill-opacity='0.6'%3E%3Cpath d='M0 0h8l-4 9z'/%3E%3Cpath d='M11 0h6l-3 5z'/%3E%3Cpath d='M21 0h9l-4.5 12z'/%3E%3Cpath d='M34 0h6l-3 6z'/%3E%3Cpath d='M44 0h8l-4 10z'/%3E%3Cpath d='M55 0h5l-2.5 4z'/%3E%3C/g%3E%3C/svg%3E");
    filter: none;
}

/* Przyciski i linki z akcentem: chłodna poświata */
.nav-links a.active,
.nav-links a:hover {
    text-shadow: 0 0 12px rgba(186, 230, 253, 0.35);
}

/* Strona główna: hero w chłodnej tonacji */
body[data-page="home"] .hero {
    background: linear-gradient(180deg, rgba(14, 26, 44, 0.92) 0%, rgba(8, 16, 28, 0.96) 100%);
}

body[data-page="home"] .hero-graphic img,
body[data-page="home"] .hero-graphic video {
    filter: brightness(1.25) saturate(0.85) hue-rotate(-8deg);
}

/* Stopka: zaspa śniegu na górnej krawędzi */
footer {
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 16px;
    pointer-events: none;
    background:
        radial-gradient(14px 10px at 14px 16px, #eef7ff 98%, transparent 100%) 0 0 / 28px 16px repeat-x,
        radial-gradient(22px 12px at 22px 16px, #e2efff 98%, transparent 100%) 9px 2px / 44px 16px repeat-x;
    opacity: 0.9;
    filter: drop-shadow(0 -2px 4px rgba(186, 230, 253, 0.25));
}

/* Warstwa ze śniegiem (dodaje motyw/zima.js) */
.zima-snieg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* ===== Motyw jasny: mroźny poranek ===== */
:root[data-motyw="jasny"] {
    --bg-primary: #eef5fc;
    --bg-surface: #e4eef9;
    --bg-surface-strong: #dbe8f6;
    --stroke-subtle: rgba(14, 58, 99, 0.1);
    --stroke-strong: rgba(14, 58, 99, 0.18);
    --accent: #0284c7;
    --accent-strong: #0369a1;
    --zima-szron: rgba(56, 189, 248, 0.45);
    --zima-poswiata: rgba(56, 189, 248, 0.14);
    --zima-zorza: rgba(45, 212, 191, 0.1);
}

:root[data-motyw="jasny"] header {
    border-bottom-color: rgba(2, 132, 199, 0.22);
}

:root[data-motyw="jasny"] header::after {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zima-szron) 18%,
        rgba(14, 165, 233, 0.7) 50%,
        var(--zima-szron) 82%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

:root[data-motyw="jasny"] .nav-links a.active,
:root[data-motyw="jasny"] .nav-links a:hover {
    text-shadow: none;
}

:root[data-motyw="jasny"] body[data-page="home"] .hero {
    background: linear-gradient(180deg, rgba(232, 242, 252, 0.92) 0%, rgba(238, 245, 252, 0.96) 100%);
}

:root[data-motyw="jasny"] footer::before {
    background:
        radial-gradient(14px 10px at 14px 16px, #ffffff 98%, transparent 100%) 0 0 / 28px 16px repeat-x,
        radial-gradient(22px 12px at 22px 16px, #f4f9ff 98%, transparent 100%) 9px 2px / 44px 16px repeat-x;
    filter: drop-shadow(0 -2px 3px rgba(14, 58, 99, 0.12));
}

/* ===== Zimowe zdjęcia =====
   Podmienia je motyw/zima.js: ustawia zmienne --obraz-... (arkusze stron mają w nich
   oryginał jako wartość domyślną) i zamienia src obrazków na wersje z assets/zima/.
   Zimowe wersje generują tools/zimowe_zdjecie.py i tools/czapka_postaci.py. */

/* ===== Okno logowania ===== */
html:root .modal-card {
    border-color: rgba(186, 230, 253, 0.32);
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(224, 242, 254, 0.06) inset,
        0 0 60px rgba(125, 211, 252, 0.12);
}

html:root .modal-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(224, 242, 254, 0.9), transparent);
}

html:root .modal-header::before {
    content: "TITANS MC  •  ZIMOWE KONTO GRACZA  ❄";
    color: #bae6fd;
}

html:root .modal-tab.is-active,
html:root .modal-btn-primary,
html:root #panel-modal-password-login,
html:root #panel-modal-register-submit,
html:root #panel-modal-reset-submit {
    color: #04131f;
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(125, 211, 252, 0.22);
}

html:root .modal-btn-primary:hover,
html:root #panel-modal-password-login:hover,
html:root #panel-modal-register-submit:hover,
html:root #panel-modal-reset-submit:hover {
    color: #04131f;
    background: linear-gradient(135deg, #f0f9ff, #a5e3fd);
    border-color: transparent;
}

html:root #panel-modal-start {
    color: #e0f2fe;
    background: rgba(125, 211, 252, 0.08);
    border-color: rgba(186, 230, 253, 0.34);
    box-shadow: none;
}

html:root .modal-note {
    color: #d6ecfa;
    background: rgba(8, 24, 40, 0.7);
    border-color: rgba(186, 230, 253, 0.3);
}

:root[data-motyw="jasny"] #panel-modal-start {
    color: #075985;
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(3, 105, 161, 0.3);
}

html:root .modal-input:focus {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.14);
}

html:root .modal-close:hover {
    border-color: rgba(186, 230, 253, 0.7);
}

html:root .password-toggle:hover,
html:root .password-toggle:focus-visible {
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.12);
}

html:root .modal-logged-badge span {
    background: #7dd3fc;
    box-shadow: 0 0 14px rgba(125, 211, 252, 0.8);
}

html:root .modal-logged-avatar {
    border-color: rgba(186, 230, 253, 0.4);
    background: linear-gradient(145deg, #e0f2fe, #7dd3fc);
    box-shadow: 0 18px 42px rgba(125, 211, 252, 0.2);
}

html:root .modal-logged-title strong {
    color: #7dd3fc;
}

/* ===== Panel gracza ===== */
html:root .panel-card,
html:root .player-tab-panel[data-player-panel="status"] .panel-card {
    border-color: rgba(186, 230, 253, 0.2);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(224, 242, 254, 0.1);
}

html:root body[data-page] .panel-tab.is-active,
html:root #panel-dashboard-modern .dashboard-shop a,
html:root .player-tab-panel[data-player-panel="status"] #btn-verify-phone {
    color: #04131f;
    background: linear-gradient(180deg, #e0f2fe, #7dd3fc);
}

html:root #panel-dashboard-modern .dashboard-menu-item.is-active {
    color: #bae6fd;
    box-shadow: inset 3px 0 0 #7dd3fc;
}

html:root .stats-kid-badge-progress-fill,
html:root #panel-history-card .discount-progress-fill {
    background: linear-gradient(90deg, #38bdf8, #e0f2fe);
}

html:root #panel-history-card .purchase-order-card {
    border-left-color: #7dd3fc;
}

html:root .purchase-highlight-box--command strong,
html:root .stats-ops-kicker,
html:root .stats-ops-track-head strong,
html:root .panel-preview-icon,
html:root .panel-auth-gate__badge,
html:root .panel-auth-gate__status strong,
html:root #panel-dashboard-modern .dashboard-item-count,
html:root #panel-dashboard-modern .dashboard-stat-list strong,
html:root .panel-detail-header span {
    color: #7dd3fc;
}

/* Bramka logowania w panelu */
html:root .panel-auth-gate {
    border-color: rgba(186, 230, 253, 0.28);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 50px rgba(125, 211, 252, 0.1);
}

html:root .panel-auth-gate__badge {
    background: rgba(125, 211, 252, 0.1);
    border-color: rgba(186, 230, 253, 0.3);
}

html:root .panel-auth-switcher button.is-active,
html:root .panel-auth-gate__actions .btn-primary,
html:root #btn-gate-password-login {
    color: #04131f;
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
    border-color: transparent;
    box-shadow: 0 7px 22px rgba(125, 211, 252, 0.22);
}

html:root #btn-gate-start-link {
    color: #e0f2fe;
    background: rgba(125, 211, 252, 0.08);
    border-color: rgba(186, 230, 253, 0.34);
    box-shadow: none;
}

html:root .panel-auth-gate__actions .panel-auth-card .input:focus {
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.14);
}

:root[data-motyw="jasny"] #btn-gate-start-link {
    color: #075985;
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(3, 105, 161, 0.3);
}

/* W jasnym motywie lodowy akcent musi być ciemniejszy, żeby był czytelny */
:root[data-motyw="jasny"] .modal-header::before,
:root[data-motyw="jasny"] .modal-logged-title strong,
:root[data-motyw="jasny"] .purchase-highlight-box--command strong,
:root[data-motyw="jasny"] .stats-ops-kicker,
:root[data-motyw="jasny"] .stats-ops-track-head strong,
:root[data-motyw="jasny"] .panel-preview-icon,
:root[data-motyw="jasny"] .panel-auth-gate__badge,
:root[data-motyw="jasny"] .panel-auth-gate__status strong,
:root[data-motyw="jasny"] #panel-dashboard-modern .dashboard-item-count,
:root[data-motyw="jasny"] #panel-dashboard-modern .dashboard-stat-list strong,
:root[data-motyw="jasny"] .panel-detail-header span,
:root[data-motyw="jasny"] #panel-dashboard-modern .dashboard-menu-item.is-active {
    color: #0369a1;
}