/*
 * Design v3 — system projektowy (tokeny), reset i typografia. Płaski, czysty, postapokaliptyczny: zgaszony grafit + bursztyn + teal radiacji.
 * Skala odstępów 4/8 (--s1..--s8), promienie 14-20 px, cienie warstwowe, szkło (backdrop-filter z fallbackiem pełnym kolorem), ruch 150-250 ms.
 * Nazwy zmiennych sprzed v3 (--surface, --accent, --border…) zostają, żeby arkusze funkcji (council, market…) przejęły nowy wygląd same.
 */
:root {
    /* kolory — kontrast tekstu >= 4.5:1 (AA) na --surface/--bg */
    --bg: #0f0e0b;
    --bg-glow: #1d1912;
    --surface: #181610;
    --surface-2: #1f1c14;
    --surface-3: #2a261b;
    --surface-4: #353023;
    --border: rgba(255, 233, 180, 0.09);
    --border-strong: rgba(255, 233, 180, 0.18);
    --text: #f0e9d6;
    --text-muted: #b8ac8c;
    --text-soft: #d6ccb0;
    --text-faint: #968b6c;
    --accent: #f0b440;
    --accent-2: #ff8a3d;
    --accent-ink: #1b1407;
    --teal: #5fd0b8;
    --teal-ink: #07211c;
    --good: #a9cf6a;
    --good-strong: #7fae45;
    --good-ink: #0f1707;
    --danger: #f0775a;
    --info: #6fb3d1;
    --disabled-bg: #2a261b;
    --disabled-ink: #8a7f5f;

    --rust: #c4572c;
    --rad: #5fd0b8;
    --amber: #f0b440;
    --graphite: #0f0e0b;

    /* promienie */
    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* odstępy 4/8 */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
    --gap: 14px;
    --page-pad: 14px;
    --touch: 44px;
    --tabbar-h: 66px;
    --sb-w: 244px;

    /* cienie warstwowe */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
    --glow-accent: rgba(240, 180, 64, 0.35);
    --glow-teal: rgba(95, 208, 184, 0.28);
    --glow-danger: rgba(240, 119, 90, 0.45);
    --card-light: inset 0 1px 0 rgba(255, 244, 214, 0.05);

    /* szkło: fallback = pełny kolor, gdy brak backdrop-filter */
    --glass: rgba(24, 22, 16, 0.94);
    --glass-edge: rgba(255, 233, 180, 0.1);

    /* typografia */
    --font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Segoe UI Variable Display', Bahnschrift, 'Segoe UI Semibold', system-ui, sans-serif;
    --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;

    /* ruch */
    --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
    --t-fast: 150ms;
    --t-med: 220ms;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    :root { --glass: rgba(24, 22, 16, 0.88); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.45;
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 520px at 8% -6%, rgba(240, 150, 50, 0.13), transparent 60%),
        radial-gradient(800px 600px at 100% 100%, rgba(95, 208, 184, 0.08), transparent 60%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 650; letter-spacing: 0.005em; }

button { font: inherit; touch-action: manipulation; }

[hidden] { display: none !important; }

.hint { color: var(--text-faint); font-size: var(--fs-xs); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: rgba(240, 180, 64, 0.4); color: #fff6dc; }

* { scrollbar-width: thin; scrollbar-color: #4a4230 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a4230; border-radius: 6px; border: 2px solid var(--bg); }

/* ---------- animacje wspólne ---------- */
@keyframes d-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes d-shimmer { to { background-position: -200% 0; } }
@keyframes d-spin { to { transform: rotate(360deg); } }
@keyframes d-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 64, 0); } 50% { box-shadow: 0 0 0 5px rgba(240, 180, 64, 0.22); } }
@keyframes d-alarm { 0%, 100% { box-shadow: var(--shadow-1), 0 0 0 0 rgba(240, 119, 90, 0); } 50% { box-shadow: var(--shadow-1), 0 0 18px 2px var(--glow-danger); } }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ograniczenie ruchu: systemowe prefers-reduced-motion albo Ustawienia gracza (html.reduce-motion; html.full-motion = wymuś pełne
   animacje mimo ustawienia systemu) — patrz js/ui/settings.js. */
@media (prefers-reduced-motion: reduce) {
    html:not(.full-motion) { scroll-behavior: auto; }
    html:not(.full-motion) *, html:not(.full-motion) *::before, html:not(.full-motion) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }