/* Site-wide theme bridge. The configured Hex world reaches landing, auth, panel, sheets and popups. */
html[data-hex-theme] {
    --site-font-body: Bahnschrift, "Segoe UI", system-ui, sans-serif;
    --site-font-display: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif;
    --site-scene: url('/images/all/backgorund-painel1.webp');
    --site-mascot: url('/assets/sprites/default-mascot.webp');
    --site-deep: #080b18;
    --site-bg: #0b0e1a;
    --site-soft: #11172b;
    --site-surface: #171d37;
    --site-raised: #20284a;
    --site-line: #35416e;
    --site-text: #f5f7ff;
    --site-muted: #aeb8dc;
    --site-primary: #7c5cff;
    --site-primary-2: #5538e9;
    --site-accent: #24e2aa;
    --site-accent-2: #35d9f5;
    --site-gold: #ffd166;
    --site-glow: rgba(124, 92, 255, .34);
    --site-overlay: rgba(6, 9, 20, .78);
    --site-pattern: repeating-linear-gradient(60deg, transparent 0 41px, rgba(101, 126, 214, .055) 42px 43px);
    --bg: var(--site-bg);
    --bg-soft: var(--site-soft);
    --surface: var(--site-surface);
    --surface-2: var(--site-raised);
    --border: var(--site-line);
    --text: var(--site-text);
    --text-dim: var(--site-muted);
    --primary: var(--site-primary);
    --primary-2: var(--site-primary-2);
    --accent: var(--site-accent);
    --accent-2: var(--site-accent-2);
    --gold: var(--site-gold);
    --font: var(--site-font-body);
    color-scheme: dark;
}

html[data-hex-theme="apiary"] {
    --site-font-display: "Cooper Black", Georgia, serif;
    --site-scene: url('/assets/themes/apiary.webp');
    --site-mascot: url('/assets/sprites/apiary-mascot.webp');
    --site-deep: #090401;
    --site-bg: #160b03;
    --site-soft: #251207;
    --site-surface: #321b0b;
    --site-raised: #4c2c10;
    --site-line: #8a5a20;
    --site-text: #fff8dd;
    --site-muted: #d8c69c;
    --site-primary: #e99a18;
    --site-primary-2: #a85d0c;
    --site-accent: #a9df58;
    --site-accent-2: #f7bf35;
    --site-gold: #ffd362;
    --site-glow: rgba(239, 164, 34, .36);
    --site-overlay: rgba(20, 9, 2, .78);
    --site-pattern: repeating-linear-gradient(60deg, transparent 0 35px, rgba(255, 206, 83, .08) 36px 38px);
}

html[data-hex-theme="christmas"] {
    --site-font-display: "Segoe Print", "Comic Sans MS", Georgia, serif;
    --site-scene: url('/assets/themes/christmas.webp');
    --site-mascot: url('/assets/sprites/christmas-mascot.webp');
    --site-deep: #020a07;
    --site-bg: #061510;
    --site-soft: #0b241a;
    --site-surface: #103224;
    --site-raised: #194a36;
    --site-line: #4e7864;
    --site-text: #fffdf4;
    --site-muted: #c9ddce;
    --site-primary: #db344d;
    --site-primary-2: #962039;
    --site-accent: #78e49d;
    --site-accent-2: #e7f6f0;
    --site-gold: #ffd770;
    --site-glow: rgba(219, 52, 77, .32);
    --site-overlay: rgba(2, 20, 14, .76);
    --site-pattern: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.055) 19px 21px, transparent 22px 38px, rgba(215,43,69,.06) 39px 41px);
}

html[data-hex-theme="halloween"] {
    --site-font-display: "Showcard Gothic", Impact, fantasy;
    --site-scene: url('/assets/themes/halloween.webp');
    --site-mascot: url('/assets/sprites/halloween-mascot.webp');
    --site-deep: #050207;
    --site-bg: #100714;
    --site-soft: #1c0d25;
    --site-surface: #291333;
    --site-raised: #40204d;
    --site-line: #70417c;
    --site-text: #fff5dc;
    --site-muted: #d1b8d3;
    --site-primary: #ff791b;
    --site-primary-2: #a33b00;
    --site-accent: #b8e64f;
    --site-accent-2: #dc65ef;
    --site-gold: #ffb333;
    --site-glow: rgba(255, 121, 27, .34);
    --site-overlay: rgba(12, 3, 17, .8);
    --site-pattern: repeating-conic-gradient(from 17deg at 50% 50%, rgba(255, 124, 28, .055) 0 7deg, transparent 7deg 24deg);
}

html[data-hex-theme="newyear"] {
    --site-font-display: "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --site-scene: url('/assets/themes/newyear.webp');
    --site-mascot: url('/assets/sprites/newyear-mascot.webp');
    --site-deep: #010208;
    --site-bg: #050817;
    --site-soft: #0c1330;
    --site-surface: #121d3f;
    --site-raised: #1b2d59;
    --site-line: #566b98;
    --site-text: #f8fbff;
    --site-muted: #bdc9df;
    --site-primary: #c99e34;
    --site-primary-2: #85651d;
    --site-accent: #ffe291;
    --site-accent-2: #68e5ff;
    --site-gold: #ffe291;
    --site-glow: rgba(104, 229, 255, .28);
    --site-overlay: rgba(2, 5, 22, .78);
    --site-pattern: linear-gradient(120deg, transparent 18%, rgba(119,227,255,.055) 19% 20%, transparent 21% 62%, rgba(255,226,145,.06) 63% 64%, transparent 65%);
}

html[data-hex-theme] body {
    font-family: var(--site-font-body);
    background:
        radial-gradient(circle at 82% 0, var(--site-glow), transparent 36%),
        var(--site-pattern),
        var(--site-bg);
}

html[data-hex-theme] :is(h1, h2, h3, .lp-title, .lp-section-title, .lp-howto-title, .panel-label, .panel-balance-value, .sheet-header strong, .modal h2, .auth-card h1, .bb-retention-title, .tw-onboarding-card h2) {
    font-family: var(--site-font-display);
}

html[data-hex-theme] :is(.app-header, .panel-topbar, .bottom-nav) {
    border-color: color-mix(in srgb, var(--site-line) 82%, var(--site-gold));
    background: color-mix(in srgb, var(--site-deep) 86%, transparent);
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

html[data-hex-theme] :is(.panel-shell, .auth-shell) { background: var(--site-bg); }
html[data-hex-theme] :is(.panel-shell, .auth-shell)::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--site-deep) 42%, transparent), var(--site-overlay)),
        var(--site-pattern),
        var(--site-scene) center 30% / cover no-repeat;
}

html[data-hex-theme] .landing {
    --lp-cabinet: var(--site-bg);
    --lp-panel: var(--site-surface);
    --lp-line: var(--site-line);
    --lp-ink: var(--site-text);
    --lp-muted: var(--site-muted);
    --lp-mint: var(--site-accent);
    --lp-cyan: var(--site-accent-2);
    position: relative;
    background: var(--site-bg);
}

html[data-hex-theme] .lp-hero-bg {
    opacity: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--site-deep) 34%, transparent), color-mix(in srgb, var(--site-bg) 90%, transparent) 78%, var(--site-bg)),
        radial-gradient(circle at 50% 18%, var(--site-glow), transparent 38%),
        var(--site-pattern),
        var(--site-scene) center 32% / cover no-repeat;
}

html[data-hex-theme] :is(.lp-howto, .lp-section-reviews, .lp-final) {
    border-color: color-mix(in srgb, var(--site-line) 70%, transparent);
    background: color-mix(in srgb, var(--site-deep) 70%, transparent);
}

html[data-hex-theme] :is(.panel-card, .card, .auth-card, .modal, .sheet, .tw-onboarding-card, .bb-retention-modal, .bb-retention-toast, .pix-view) {
    border-color: color-mix(in srgb, var(--site-line) 72%, var(--site-gold));
    color: var(--site-text);
    background: color-mix(in srgb, var(--site-surface) 94%, transparent);
    box-shadow: 0 22px 58px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.065);
    backdrop-filter: blur(16px) saturate(1.08);
}

html[data-hex-theme] .panel-card::before {
    background: conic-gradient(from var(--card-spin), transparent 0deg 225deg, color-mix(in srgb, var(--site-primary) 24%, transparent) 255deg, var(--site-primary) 302deg, var(--site-gold) 330deg, transparent 360deg);
}
html[data-hex-theme] .panel-card::after { box-shadow: 0 0 16px var(--site-glow), 0 0 30px color-mix(in srgb, var(--site-primary) 16%, transparent); }

html[data-hex-theme] :is(.lp-stat, .lp-howto-card, .lp-review, .quick-stat, .stat-card, .bonus-card, .tx-item, .ref-card, .sheet-section) {
    border-color: color-mix(in srgb, var(--site-line) 76%, transparent);
    background: color-mix(in srgb, var(--site-surface) 82%, transparent);
}

html[data-hex-theme] :is(.btn-primary, .panel-cta, .sheet-cta, .lp-btn-primary, .tw-onboarding-start, .bb-retention-cta) {
    border-color: color-mix(in srgb, var(--site-primary) 62%, white);
    background: linear-gradient(135deg, var(--site-primary), var(--site-primary-2));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--site-primary) 36%, transparent);
}

html[data-hex-theme] :is(.btn-accent, .lp-title-accent, .lp-stat-value, .panel-balance-value) { color: var(--site-accent); }
html[data-hex-theme] :is(.input, input, select, textarea) { border-color: var(--site-line); }
html[data-hex-theme] :is(.modal-overlay, .sheet-overlay, .tw-onboarding-backdrop, .bb-retention-overlay) { background: color-mix(in srgb, var(--site-deep) 84%, transparent); }

/* A small animated world marker makes the selected identity visible beyond the game. */
html[data-hex-theme] :is(.landing, .panel-shell, .auth-shell)::after {
    content: "";
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 42;
    width: clamp(58px, 8vw, 82px);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: .82;
    background: var(--site-mascot) 0 0 / 400% 100% no-repeat;
    filter: drop-shadow(0 9px 10px rgba(0,0,0,.46));
    transform-origin: 50% 82%;
    animation: site-mascot-frames 900ms steps(3, end) infinite, site-mascot-float 3.4s ease-in-out infinite;
}

html[data-hex-theme="christmas"] :is(.landing, .panel-shell, .auth-shell)::after { filter: drop-shadow(0 8px 9px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(255,255,255,.2)); }
html[data-hex-theme="halloween"] :is(.landing, .panel-shell, .auth-shell)::after { filter: drop-shadow(0 8px 9px rgba(0,0,0,.54)) drop-shadow(0 0 10px rgba(255,121,27,.32)); }
html[data-hex-theme="newyear"] :is(.landing, .panel-shell, .auth-shell)::after { filter: drop-shadow(0 8px 9px rgba(0,0,0,.48)) drop-shadow(0 0 13px rgba(255,226,145,.38)); }

html[data-hex-theme] .bootstrap-loader {
    font-family: var(--site-font-body);
    background: linear-gradient(180deg, color-mix(in srgb, var(--site-deep) 54%, transparent), var(--site-overlay)), var(--site-scene) center / cover no-repeat;
}
html[data-hex-theme] .bootstrap-loader__piece i { background: var(--site-accent); }

@keyframes site-mascot-frames { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes site-mascot-float {
    0%, 100% { transform: translateY(1px) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@media (max-width: 640px) {
    html[data-hex-theme] :is(.landing, .auth-shell)::after { bottom: max(12px, env(safe-area-inset-bottom)); width: 56px; opacity: .68; }
    html[data-hex-theme] .panel-shell::after { width: 54px; right: 7px; bottom: calc(78px + env(safe-area-inset-bottom)); opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-hex-theme] :is(.landing, .panel-shell, .auth-shell)::after {
        background-position: 0 0;
        transform: none;
        animation: none;
    }
    html[data-hex-theme] .panel-card::before,
    html[data-hex-theme] .panel-card::after { animation: none; }
}