/* Generated by scripts/tools/gen-tokens.py - nie edytuj recznie */
@font-face {
  font-family: Hahmlet; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/hahmlet-pl.woff2") format("woff2");
}
/* Manhir2 — generated from tokens.json */
:root, [data-theme="noc"], .m2-dark, .wk-tip {
  --ground: #0f0d0b;
  --surface: #1a1612;
  --surface-raised: #251f19;
  --stripe: #1f1a15;
  --line: #3a3027;
  --ink: #efe7da;
  --ink-muted: #a99b87;
  --gold-line: #c8a050;
  --gold: #e8b84a;
  --gold-bright: #ffdc96;
  --on-gold: #1a130a;
  --gold-fill: #e8b84a;
  --ribbon: rgba(74, 107, 90, 0.35);
  --cinnabar: #b5432c;
  --jade: #3e7a66;
  --lapis: #2b4a6f;
  --up: #86c98a;
  --down: #ec8a7a;
  --glass: rgba(22, 18, 14, 0.62);
  --glass-edge: rgba(232, 184, 74, 0.38);
  --focus: #ffdc96;
  --shadow-glass: 0 1px 0 rgba(255, 220, 150, 0.08) inset, 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-art: 0 10px 30px rgba(0, 0, 0, 0.55);
}
[data-theme="hanji"] {
  --ground: #efe6d6;
  --surface: #f8f2e7;
  --surface-raised: #fffaf1;
  --stripe: #f1e9da;
  --line: #d6c6aa;
  --ink: #241b13;
  --ink-muted: #62543f;
  --gold-line: #a77d33;
  --gold: #7d5a14;
  --gold-bright: #6a4a0c;
  --on-gold: #fff8ea;
  --gold-fill: #7d5a14;
  --ribbon: rgba(47, 107, 89, 0.14);
  --cinnabar: #a33a24;
  --jade: #2f6b59;
  --lapis: #24426a;
  --up: #2e6b33;
  --down: #9e2f22;
  --glass: rgba(250, 244, 233, 0.66);
  --glass-edge: rgba(125, 90, 20, 0.32);
  --focus: #24426a;
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 32px rgba(80, 55, 20, 0.16);
  --shadow-art: 0 10px 26px rgba(60, 40, 10, 0.22);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 72px;
  --space-8: 120px;
  --radius-sharp: 2px;
  --radius-control: 6px;
  --radius-glass: 14px;
  --radius-pill: 999px;
  --glass-blur: 18px;
  --line-w: 1px;
  --accent-w: 2px;
  --measure: 64ch;
  --page-max: 1120px;
  --font-display: Hahmlet, "Noto Serif KR", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Manhir2 - komponenty strony i prezentacji. Wartosci tylko z tokenow (tokens.css). */

html { background: var(--ground); color: var(--ink); font-family: var(--font-text); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
:where(h1, h2, h3) { font-family: var(--font-display); text-wrap: balance; margin: 0; }
:where(a) { color: var(--gold-bright); }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Faktura: papier hanji (jasny) / laka (ciemny) - szum SVG, bez obrazkow */
.m2-texture {
  background-color: var(--ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Etykieta nad tytulem */
.m2-eyebrow { font: 650 12px/1.3 var(--font-text); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-2); }
.m2-headline { display: grid; gap: var(--space-3); max-width: var(--measure); }
.m2-headline h2 { font-size: clamp(30px, 4.2vw, 40px); line-height: 1.1; font-weight: 650; }
.m2-headline p { margin: 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-muted); }

/* Przyciski */
.m2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-control);
  font: 600 15px/1 var(--font-text); text-decoration: none; cursor: pointer;
  border: var(--line-w) solid var(--gold-fill); background: var(--gold-fill); color: var(--on-gold);
  transition: filter .15s, background-color .15s, transform .15s;
}
.m2-btn:hover { filter: brightness(1.08); }
.m2-btn:active { transform: translateY(1px); }
.m2-btn--ghost { background: transparent; color: var(--gold-bright); border-color: var(--gold-line); }
.m2-btn--ghost:hover { background: var(--ribbon); filter: none; }
.m2-btn--quiet { background: transparent; color: var(--ink); border-color: transparent; padding: 0 var(--space-3); }
.m2-btn--quiet:hover { color: var(--gold-bright); filter: none; }
.m2-btn[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--on-gold); }
.m2-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Szklo (Liquid Glass) - tylko nad grafika albo trescia, ktora przez nie widac */
.m2-glass {
  background: var(--glass); border: var(--line-w) solid var(--glass-edge); border-radius: var(--radius-glass);
  box-shadow: var(--shadow-glass); padding: var(--space-5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .m2-glass { background: var(--surface); }
}

/* Pasek menu: szklo przyklejone u gory */
.m2-nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px));
  background: var(--glass); border-bottom: var(--line-w) solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
.m2-nav__brand { line-height: 0; margin-right: auto; }
.m2-nav__brand img { height: 32px; width: auto; }
.m2-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; }
.m2-nav__links a { color: var(--ink); text-decoration: none; font-size: 14px; padding: var(--space-2) 0; border-bottom: var(--accent-w) solid transparent; }
.m2-nav__links a[aria-current="page"] { border-color: var(--gold); color: var(--gold-bright); }

/* Plansza z grafika: 1 px zlotej linii, twarde rogi (jak w grze) */
.m2-plate { position: relative; border: var(--line-w) solid var(--gold-line); border-radius: var(--radius-sharp); overflow: hidden; box-shadow: var(--shadow-art); background: var(--surface); }
.m2-plate > img { display: block; width: 100%; height: auto; }

/* Wstazka: tlo ribbon + zloty akcent 2 px po lewej (RIBBON_BG + ACCENT_W) */
.m2-ribbon { background: var(--ribbon); box-shadow: inset var(--accent-w) 0 0 var(--gold); border-radius: var(--radius-sharp); padding: var(--space-2) var(--space-3); color: var(--gold-bright); }

/* Tabela w stylu tabeli bonusow */
.m2-table-wrap { overflow-x: auto; border: var(--line-w) solid var(--line); border-radius: var(--radius-sharp); background: var(--surface); }
.m2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m2-table th { text-align: left; font-weight: 600; color: var(--gold-bright); padding: var(--space-2) var(--space-3); border-bottom: var(--line-w) solid var(--gold-line); background: var(--surface-raised); white-space: nowrap; }
.m2-table td { padding: var(--space-2) var(--space-3); white-space: nowrap; }
.m2-table tbody tr:nth-child(even) td { background: var(--stripe); }
.m2-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.m2-table tr.is-me td { background: var(--ribbon); color: var(--gold-bright); }
.m2-table tr.is-me td:first-child { box-shadow: inset var(--accent-w) 0 0 var(--gold); }
.m2-delta { font-variant-numeric: tabular-nums; font-size: 13px; }
.m2-delta--up { color: var(--up); }
.m2-delta--down { color: var(--down); }
.m2-delta--new { color: var(--gold); font-weight: 600; }

/* Pas dancheong: cynober, zielen, lazur miedzy zlotymi liniami */
.m2-dancheong {
  height: 14px; border-block: var(--line-w) solid var(--gold-line);
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, var(--ground) 22px 24px),
    linear-gradient(var(--cinnabar) 0 4px, var(--ground) 4px 5px, var(--jade) 5px 8px, var(--ground) 8px 9px, var(--lapis) 9px 12px);
}

/* Linia dachu hanok - separator sekcji */
.m2-roof {
  height: 28px; background: var(--gold-line);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 26 Q70 26 130 17 Q330 3 600 3 Q870 3 1070 17 Q1130 26 1200 26' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M180 26 Q380 12 600 12 Q820 12 1020 26' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='2 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 26 Q70 26 130 17 Q330 3 600 3 Q870 3 1070 17 Q1130 26 1200 26' fill='none' stroke='%23000' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M180 26 Q380 12 600 12 Q820 12 1020 26' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='2 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Liczba prezentacji */
.m2-stat { display: grid; gap: var(--space-1); }
.m2-stat b { font: 700 clamp(34px, 5vw, 44px)/1 var(--font-num); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--gold-bright); }
.m2-stat span { font-size: 14px; color: var(--ink-muted); }

/* Chip filtra */
.m2-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: var(--line-w) solid var(--line); background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; }
.m2-chip[aria-pressed="true"] { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); }

/* Wejscie przy przewijaniu (CSS, bez JS). Stan spoczynkowy jest widoczny; ruch tylko gdy przegladarka umie. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m2-reveal { animation: m2-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .m2-parallax { animation: m2-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes m2-rise { from { opacity: .25; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes m2-drift { from { transform: translateY(-6%) scale(1.08); } to { transform: translateY(6%) scale(1.08); } }

/* Przejscia miedzy podstronami (View Transitions, ta sama domena) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }