/* ============================================================
   SUBMONY, „Gold × FireRed” · warstwa bazowa
   Tokeny, reset, fonty, typografia, layout, bramki JS i ruchu.
   Kolory zsynchronizowane ze scripts/palette.js (generatory grafik).

   Kolejność arkuszy na stronie: base → sprites (generowany) → ui → world → pages
   ============================================================ */

/* Poprawione polskie litery do Press Start 2P (ą ę Ą Ę Ś Ź Ż Ó Ć Ń), scripts/gen-pl-font.js.
   Font stoi w stosie PRZED Press Start 2P, ale obejmuje tylko te znaki (unicode-range). */
@font-face {
  font-family: 'Submony Pixel PL';
  src: url('/assets/fonts/submony-pl.ttf?v=6a708923') format('truetype');
  font-display: swap;
  unicode-range: U+00D3, U+0104-0106, U+0118-0119, U+0143, U+015A, U+0179, U+017B;
}

/* Nunito i Press Start 2P z własnego serwera (bez Google Fonts; CSP: font-src 'self').
   Pliki woff2 z @fontsource/nunito i @fontsource/press-start-2p 5.3.0 (OFL 1.1, licencje
   w /assets/fonts/OFL-*.txt). Podzbiory: latin + latin-ext (polskie litery są w latin-ext). */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/nunito-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/nunito-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/nunito-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/nunito-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/nunito-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/nunito-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/nunito-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/nunito-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/nunito-latin-ext-900-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/nunito-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/press-start-2p-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Tokeny ──────────────────────────────────────────────── */
:root {
  /* 1 piksel „sprite'a” na stronie. Ramki, cienie i kroki animacji
     są zawsze wielokrotnością --px, żeby piksele wychodziły równe. */
  --px: 3px;

  /* papier i tusz (okna) */
  --ink:        #303840;
  --ink-muted:  #5C6670;
  --ink-shadow: #D0D0C8;
  --paper:      #F8F8F8;
  --paper-2:    #E8ECEC;
  --frame:      #283040;

  /* niebieski slot drużyny */
  --slot:      #3868B8;
  --slot-hi:   #6898E8;
  --slot-lo:   #28509C;
  --slot-edge: #183060;

  /* zaznaczenie (cyjan + pomarańczowa ramka) */
  --sel:         #88D0F8;
  --sel-hi:      #C0ECFF;
  --sel-lo:      #58A8E0;
  --sel-edge:    #F87830;
  --sel-edge-lo: #B84818;
  --sel-text:    #183060;

  /* turkusowe płótno w paski */
  --teal-1:    #58A8A0;
  --teal-2:    #4E9E96;
  --teal-hi:   #80C8B8;
  --teal-edge: #2C6C68;

  /* przyciski */
  --primary:      #C8401A;
  --primary-hi:   #F07848;
  --primary-lo:   #902A0C;
  --primary-edge: #501808;
  --cancel:       #8858C8;
  --cancel-hi:    #B898F0;
  --cancel-lo:    #6040A8;
  --cancel-edge:  #302068;

  /* złota plakietka */
  --plaque:      #5A3000;
  --plaque-text: #F8C838;
  --plaque-edge: #2A1400;

  /* reszta UI */
  --accent-text: #B84A00;
  --nav:         #1C2E6B;
  --nav-hi:      #34509A;
  --nav-edge:    #0C1638;

  --hp-green:  #58D080;  --hp-green-hi:  #90F0B0;
  --hp-yellow: #F8C830;  --hp-yellow-hi: #F8E888;
  --hp-red:    #F85838;  --hp-red-hi:    #F8A088;
  --hp-track:  #303838;

  --ok-text:     #1E7A3C;
  --warn-text:   #8A5A00;
  --danger-text: #B02820;

  --discord: #5865F2;
  --twitch:  #9146FF;

  /* fonty: Press Start 2P tylko do dużych nagłówków i cyfr (min. 16 px, waga 400),
     cała reszta w czytelnym Nunito, mały pikselowy tekst był nieczytelny */
  --f-title: 'Submony Pixel PL', 'Press Start 2P', ui-monospace, monospace;
  --f-body:  'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* WERSALIKI (przyciski, plakietki, menu): ten sam Nunito, pogrubiony i lekko rozstrzelony */
  --f-caps:  var(--f-body);
  --fw-caps: 800;
  --ls-caps: .05em;

  /* skala typografii (px; Press Start 2P jest rysowany na siatce 8 px) */
  --fs-h1:    24px;        /* Press Start 2P: tylko wielokrotności 8 px */
  --fs-h2:    16px;
  --fs-h3:    19px;        /* h3 i tytuły kart: Nunito 800 */
  --fs-px:    16px;        /* małe elementy pikselowe (cyfry odliczania itp.) */
  --fs-ui:    12px;        /* baza jednostki --fp (sprite'y obok tekstu) */
  --fs-micro: 12px;        /* „HP”, drobne dekory (Nunito) */
  --fs-caps:    15px;      /* przyciski, plakietki, menu (Nunito 800, wersaliki) */
  --fs-caps-sm: 13px;      /* drobne etykiety wersalikami */
  --fs-body:  17px;
  --fs-small: 15px;
  --fp: calc(var(--fs-ui) / 8);   /* „piksel fontu”, do małych sprite'ów obok tekstu */
  --ts: 2px;                      /* cień liter pod pikselowymi nagłówkami (styl GBA) */

  /* ruch: płynnie i spokojnie */
  --ease-soft: cubic-bezier(.45, 0, .55, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);

  --nav-h:  64px;
  --maxw:   1200px;
  --gutter: 16px;

  /* warstwy */
  --z-sky:       0;
  --z-content:   1;
  --z-floor:     2;
  --z-nav:       100;
  --z-menu:      110;
  --z-lightbox:  500;
  --z-encounter: 600;

  /* aliasy starych tokenów, używają ich style inline w HTML */
  --c46:     var(--ink-muted);
  --f-mono:  var(--f-body);
  --brand:   var(--primary);
  --brand-2: var(--plaque-text);
  --sky:     var(--slot-hi);
  --ok:      var(--ok-text);
}

@media (min-width: 600px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 21px;
    --fs-ui: 16px;
    --fs-caps: 16px;
    --fs-caps-sm: 14px;
    --gutter: 24px;
  }
}
@media (min-width: 768px) {
  :root {
    --px: 4px;
    --fs-body: 18px;
    --fs-small: 16px;
    --gutter: 28px;
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 32px;
  }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) { scroll-behavior: smooth; }
}
html.motion-on { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  /* płótno GBA: poziome paski, 1 piksel sprite'a każdy */
  background-color: var(--teal-1);
  background-image: repeating-linear-gradient(
    var(--teal-1) 0 var(--px),
    var(--teal-2) var(--px) calc(2 * var(--px))
  );
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul[role="list"], ol[role="list"] { list-style: none; }

::selection { background: var(--sel); color: var(--sel-text); }

:focus-visible {
  outline: var(--px) solid var(--sel-edge);
  outline-offset: var(--px);
}

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

/* ── Typografia ──────────────────────────────────────────── */
h1, h2, h3, h4, .h1, .h2, .h3, .t-title {
  font-family: var(--f-title);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); }
/* h3/h4 w czytelnym foncie, Press Start 2P w małym rozmiarze się nie czyta */
h3, h4, .h3 {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: 0;
}
/* pikselowe nagłówki w oknach dostają cień jak w GBA; zwykły tekst nie */
:is(.win, .glass-card, .dialog) :is(h1, h2, .h1, .h2):not(.h3) { text-shadow: var(--ts) var(--ts) 0 var(--ink-shadow); }

p { text-wrap: pretty; }

.text-muted { color: var(--ink-muted); font-size: var(--fs-body); line-height: 1.6; }
/* wspólny styl wersalików (przyciski, plakietki, menu) */
.caps { font-family: var(--f-caps); font-weight: var(--fw-caps); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.text-center { text-align: center; }
.accent { color: var(--accent-text); }

/* ── Layout ──────────────────────────────────────────────── */
.page-main { position: relative; z-index: var(--z-content); }
.section    { max-width: var(--maxw); margin: 0 auto; padding: calc(16 * var(--px)) var(--gutter); }
.section-sm { max-width: var(--maxw); margin: 0 auto; padding: calc(10 * var(--px)) var(--gutter); }
.stack > * + * { margin-top: calc(4 * var(--px)); }

/* ── Pojawianie się sekcji (tylko gdy JS działa) ─────────────
   Bez JS i przy ograniczonym ruchu treść jest od razu widoczna.
   Miękkie wysunięcie z zanikaniem.                            */
html.js .reveal {
  transition: opacity .7s var(--ease-out-soft), transform .8s var(--ease-out-soft);
}
html.js .reveal:not(.in) {
  opacity: 0;
  transform: translateY(18px);
}
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }
html.js-failsafe .reveal,
html.reduce-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Ograniczony ruch: ustawienie systemu albo przełącznik w stopce ──
   „Animacje: wł.” w stopce (html.motion-on) wygrywa z ustawieniem systemu. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* ── Przejścia między stronami (gdzie przeglądarka to umie) ── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
  animation-timing-function: var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on)::view-transition-group(*),
  html:not(.motion-on)::view-transition-old(*),
  html:not(.motion-on)::view-transition-new(*) { animation: none !important; }
}

/* ── Wspólne animacje (płynne, łagodne) ──────────────────── */
@keyframes soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes soft-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(1.5 * var(--fp))); } }
@keyframes soft-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--px))); } }
@keyframes soft-sink  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(1 * var(--px))); } }