/*
 * Evocatio — strona w szacie gry · PROPOZYCJA v15.5 (01.10.2026, laboratorium) — v15.5: Świat na głównej · v15.3: jasny motyw czytelny, ramy obrazków z gry, Zagraj = launcher, Społeczność + Media
 * Słowo właściciela: „zaktualizować design o obecne ramki z gry i żeby to wyglądało jak z gry … strona musi być jednolita z launcherem
 * i grą … obecnie trochę nieczytelna miejscami”.
 * Warstwa ładowana NA KOŃCU każdej strony (po style.css, pages.css, kontakt.css, world.css, player.css). Nie zmienia treści ani skryptów.
 * Źródło wyglądu: GUI gry 3.x — `src/style-gui24.css` (tokeny --g24-*, --g25-*, rama `oprawa/gui24/rama-mosiadz.svg` slice 64, pergamin v23),
 * te same kroje: Cinzel (tytuły), EB Garamond (tekst), JetBrains Mono (liczby).
 */

/* ── 1. Tokeny — te same co w grze; motyw ciemny domyślnie, jasny przełącznikiem (jak w ustawieniach gry) ── */
:root {
  --e-ink: #eee1c9;
  --e-muted: #c8b797;
  --e-gold: #e4bf77;
  --e-gold-2: #f0d49a;
  --e-good: #9ccb9c;
  --e-bad: #f49e99;
  --e-line: rgba(166, 132, 72, .42);
  --e-bg: #0e0f0c;
  --e-surface: radial-gradient(ellipse at 50% 12%, #1d1e18, #10120f);
  --e-panel: #151713;
  --e-field: #11130f;
  --e-button: linear-gradient(#2d2b22, #151710);
  --e-button-hover: linear-gradient(#3a372b, #1d1f16);
  --e-selected: linear-gradient(#77343a, #41171d);
  --e-rama: url('assets/gra/rama-mosiadz.svg');
  --e-papier: url('assets/weather/pergamin-cieply-v23-v1.1.0.webp');
  --e-cien: 0 10px 30px rgb(0 0 0 / 45%);
  --e-tekst: 19px;
  --e-maly: 15px;
  --e-etykieta: 13px;
}
:root[data-motyw='jasny'] {
  --e-ink: #30251c;
  --e-muted: #5e4933;
  --e-gold: #78541f;
  --e-gold-2: #5f3f12;
  --e-good: #285538;
  --e-bad: #85252c;
  --e-line: rgba(117, 88, 46, .38);
  --e-bg: #cfc2a6;
  --e-surface: var(--e-papier) center / cover no-repeat;
  --e-panel: #e8d9bd;
  --e-field: #eadcc2;
  --e-button: linear-gradient(#e6d5b8, #d2ba93);
  --e-button-hover: linear-gradient(#efe0c6, #dbc4a0);
  --e-cien: 0 8px 22px rgb(60 40 20 / 28%);
}

/* ── 2. Tło i czytelność tekstu ── */
html body { background: var(--e-bg) !important; color: var(--e-ink) !important; font-size: var(--e-tekst) !important; line-height: 1.6 !important; }
:root[data-motyw='jasny'] body { background: #cfc2a6 url('assets/weather/papier-wzorzec-v1.1.0.webp') center top / 1600px auto !important; }
body p, body li, body dd, body td { color: var(--e-ink); }
body .fine, body small, body figcaption { font-size: var(--e-maly) !important; color: var(--e-muted) !important; }
/* Etykiety nad tytułami: było 9–11 px złotymi kapitalikami — nieczytelne. Teraz 13 px, jaśniej, mniej rozstrzelone. */
body .eyebrow, body .hero-bottom, body .story > .eyebrow, body .film-invitation > .eyebrow, body .evo-etykieta {
  font-size: var(--e-etykieta) !important; letter-spacing: .12em !important; color: var(--e-gold) !important; opacity: 1 !important;
}
body h1, body h2, body h3 { color: var(--e-ink) !important; text-wrap: balance; }
body :is(.hero, .world-opening, .wound, .panorama-link, .contact-hero, .community-banner, .video-slot, .game-window, .launcher) :is(h1, h2, h3) { color: #f3e6cc !important; }
/* Tytuły sekcji zostają w EB Garamond (długie zdania wersalikami Cinzel były ciężkie); Cinzel — nagłówki kart i przyciski, jak w grze. */
body :is(.card, .goal-card, .support-panel, .ai-feature, .contact-panel, .contact-aside, .milestone) :is(h3, h4) { font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif !important; letter-spacing: .04em; }
body a { color: var(--e-gold-2); text-underline-offset: 3px; }
body a:hover { color: var(--e-ink); }
body .page-content, body .inner-page { max-width: 1240px; }
body .article-body, body .narrow { max-width: 74ch; }

/* ── 3. Pasek górny — jak pasek zakładek gry ── */
body .topbar {
  background: linear-gradient(#171812f2, #0f100cf2) !important;
  border-bottom: 1px solid var(--e-line) !important;
  box-shadow: 0 4px 18px rgb(0 0 0 / 50%) !important;
}
:root[data-motyw='jasny'] body .topbar { background: linear-gradient(#efe3cbf2, #ddcdaef2) !important; }
body .topbar nav a, body .topbar nav button { font: 600 15px 'Cinzel', Georgia, serif !important; color: var(--e-ink) !important; letter-spacing: .04em !important; }
body .topbar nav [aria-current='page'] { color: var(--e-gold) !important; box-shadow: 0 2px 0 var(--e-gold) !important; }

/* ── 4. Ramy: mosiężna rama gry zamiast cienkich podwójnych linii ── */
body :is(.card, .goal-card, .support-panel, .ai-feature, .community-banner, .journal-feature, .contact-panel, .contact-aside,
  .song-preview, .logo-download, .editor-note, .table-wrap, .game-window, .milestone, .funding-steps > *, .fact-list, .journal-list > *, dialog) {
  border: 8px solid transparent !important;
  border-image: var(--e-rama) 64 stretch !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: var(--e-surface) !important;
  background-origin: border-box !important;
  box-shadow: var(--e-cien) !important;
  color: var(--e-ink) !important;
}
body :is(.card, .goal-card, .support-panel, .ai-feature, .community-banner, .contact-panel, .contact-aside)::before,
body :is(.card, .goal-card, .support-panel, .ai-feature, .community-banner, .contact-panel, .contact-aside)::after { box-shadow: none !important; border: 0 !important; }
/* Obrazki w treści: cienka rama jak kadry panoram w grze */
body :is(.season-preview img, .media-grid img, .capture-placeholder, .video-slot) { border: 6px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; }

/* ── 5. Przyciski — ten sam guzik co w grze; główne działanie bordowe ── */
body :is(.action, .back-link, .return, .site-footer nav a, .preview-controls button, .season-controls button, .song-controls button,
  .state-actions a, .state-content button, .card button, td button, .contact-submit, .rotation > button) {
  border: 5px solid transparent !important;
  border-image: var(--e-rama) 64 stretch !important;
  border-radius: 0 !important;
  background: var(--e-button) center / calc(100% - 2px) calc(100% - 2px) no-repeat !important;
  background-origin: border-box !important;
  box-shadow: none !important;
  color: var(--e-ink) !important;
  font: 600 15px/1.2 'Cinzel', Georgia, serif !important;
  letter-spacing: .04em;
  padding: 9px 18px !important;
  text-decoration: none !important;
}
body :is(.action, .back-link, .return, .site-footer nav a, .preview-controls button, .season-controls button, .card button, .contact-submit):hover {
  background: var(--e-button-hover) center / calc(100% - 2px) calc(100% - 2px) no-repeat !important; background-origin: border-box !important;
}
body :is(.play-game, .contact-submit, .main-play) {
  border: 6px solid transparent !important;
  border-image: var(--e-rama) 64 stretch !important;
  background: var(--e-selected) center / calc(100% - 2px) calc(100% - 2px) no-repeat !important;
  background-origin: border-box !important;
  color: #fff0d7 !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 45%) !important;
}
body .main-play { border-radius: 50% !important; border-image: none !important; border: 3px solid var(--e-gold) !important; }
body :is(.preview-controls button, .season-controls button)[aria-pressed='true'],
body :is(.preview-controls button, .season-controls button).active { background: var(--e-selected) !important; color: #fff0d7 !important; }

/* ── 6. Pola formularzy — jak pola w oknach gry ── */
body :is(.contact-field input, .contact-field select, .contact-field textarea, input[type='email'], input[type='password'], input[type='text'], textarea, select) {
  background: var(--e-field) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 0 !important;
  font: 18px 'EB Garamond', Georgia, serif !important;
  padding: 10px 12px !important;
}
body :is(input, textarea, select)::placeholder { color: var(--e-muted) !important; opacity: .85; }
body label, body .contact-field span { font-size: var(--e-maly) !important; color: var(--e-muted) !important; letter-spacing: .06em; }

/* ── 7. Pytania i odpowiedzi, tabele ── */
body details { border-bottom: 1px solid var(--e-line) !important; padding: 10px 4px !important; }
body details summary { font: 600 19px 'EB Garamond', Georgia, serif !important; cursor: pointer; }
body table th { font: 600 13px 'Cinzel', Georgia, serif !important; letter-spacing: .08em; color: var(--e-gold) !important; }
body table td { font-size: 17px; }

/* ── 8. Stopka ── */
body .site-footer { background: linear-gradient(#131410, #0b0c09) !important; border-top: 1px solid var(--e-line) !important; }
:root[data-motyw='jasny'] body .site-footer { background: linear-gradient(#e2d4b8, #d3c3a3) !important; }
body .footer-disclaimer { font-size: 14px !important; color: var(--e-muted) !important; }

/* ── 9. Odtwarzacz: zwinięty do karteczki przy prawej krawędzi (nie zasłania kart), rozwija się po kliknięciu ── */
body .evo-odtwarzacz { top: auto !important; bottom: 18px !important; transform: none !important; }
body .evo-panel {
  border: 7px solid transparent !important; border-right: 0 !important; border-image: var(--e-rama) 64 stretch !important;
  background: var(--e-surface) !important; background-origin: border-box !important;
}
body .evo-odtwarzacz button { border: 1px solid var(--e-line) !important; background: var(--e-button) !important; color: var(--e-ink) !important; }
body .evo-odtwarzacz .evo-play { background: var(--e-selected) !important; color: #fff0d7 !important; }

/* ── 10. Przełącznik motywu (jak w grze: jasny / ciemny) — `motyw.js` ── */
.e-motyw { display: inline-flex; justify-self: start; align-self: start; width: max-content; gap: 0; margin: 10px 0 0; border: 3px solid transparent; border-image: var(--e-rama) 64 stretch; background: var(--e-panel); vertical-align: middle; }
.e-motyw button { border: 0; background: transparent; color: var(--e-muted); font: 600 13px 'Cinzel', Georgia, serif; letter-spacing: .06em; padding: 5px 12px; cursor: pointer; }
.e-motyw.plywa { position: fixed; left: 14px; bottom: 18px; z-index: 9; }
.e-motyw button[aria-pressed='true'] { background: var(--e-selected); color: #fff0d7; }

/* ── 11. Miejsca na treść, która jeszcze nie istnieje — widoczny, ale uczciwy znacznik zamiast „Tytuł wpisu…” ── */
body [data-e-zastepczy] { position: relative; opacity: .55; }
body [data-e-zastepczy]::after { content: 'do uzupełnienia'; position: absolute; top: 6px; right: 8px; font: 600 11px 'Cinzel', serif; letter-spacing: .08em;
  color: #fff0d7; background: #77343a; padding: 2px 6px; }

@media (max-width: 700px) {
  :root { --e-tekst: 18px; --e-maly: 14px; }
  .e-motyw.plywa { left: 8px; bottom: 8px; }
  /* 3.10.2026: przyciski pór roku (strona główna, „Świat”) z ramą gry — guzik ma tu 15 px i odstępy z sekcji 5,
     więc cztery w rzędzie dawały 425 px przy telefonie 390 („Zima” poza ekranem). Na telefonie siatka 2×2. */
  body .season-controls { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  body .season-controls button { padding: 8px 6px !important; font-size: 14px !important; min-height: 44px; }
}

/* ── 12. Dziennik: wydania z zmiany.json — karta wydania w ramie gry ── */
.e-dziennik { display: grid; gap: 14px; max-width: 900px; margin: 0 auto 60px; }
.e-dziennik-tytul { margin: 0 0 6px; }
.e-zmiany { display: grid; gap: 16px; }
.e-wydanie { border: 8px solid transparent; border-image: var(--e-rama) 64 stretch; background: var(--e-surface); background-origin: border-box; box-shadow: var(--e-cien); padding: 14px 22px 16px; }
.e-wydanie header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.e-wersja { font: 14px 'JetBrains Mono', monospace; color: var(--e-gold); }
.e-wydanie time { font-size: 15px; color: var(--e-muted); }
.e-nowe { margin-left: auto; font: 600 12px 'Cinzel', serif; letter-spacing: .06em; color: #fff0d7; background: #77343a; padding: 2px 8px; }
.e-wydanie h2 { margin: 6px 0 8px; font: 600 clamp(22px, 2vw, 28px)/1.2 'EB Garamond', Georgia, serif !important; }
.e-wydanie ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.e-wydanie li { font-size: 18px; line-height: 1.5; }
.e-wydanie li::marker { color: var(--e-gold); }
.e-wydanie.najnowsze { box-shadow: var(--e-cien), 0 0 0 1px rgb(228 191 119 / 30%); }
/* v15.10: etapy produkcji w Dzienniku — zwijany nagłówek grupy, najnowszy etap rozwinięty */
.e-etap { display: grid; gap: 16px; }
.e-etap > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 4px 10px; border-bottom: 1px solid rgb(228 191 119 / 35%); }
.e-etap > summary::-webkit-details-marker { display: none; }
.e-etap > summary::before { content: '▸'; color: var(--e-gold); display: inline-block; transition: transform .2s; }
.e-etap[open] > summary::before { transform: rotate(90deg); }
.e-etap > summary:focus-visible { outline: 2px solid var(--e-gold); outline-offset: 2px; }
.e-etap-nazwa { font: 600 clamp(20px, 1.8vw, 26px)/1.2 'Cinzel', serif; color: var(--e-gold); letter-spacing: .04em; }
.e-etap-opis { font-size: 15px; color: var(--e-muted); }
@media (prefers-reduced-motion: reduce) { .e-etap > summary::before { transition: none; } }

/* ── 13. Treść, której jeszcze nie ma: ukryta do czasu dostarczenia (lista w notce v15) ── */
body .e-ukryj-do-tresci { display: none !important; }

/* ── 14. Oddech w ramach: treść nie dotyka mosiądzu (roadmap, karta faktów, kroki) ── */
body :is(.milestone, .fact-list, .journal-list > *, .funding-steps > *) { padding: 20px 26px !important; }
body .table-wrap { padding: 4px 8px !important; }
body .table-wrap :is(th, td) { padding: 10px 14px !important; }
body .table-wrap th { font-size: 13px !important; white-space: nowrap; }


/* ── 15. v15.3 — ramy obrazków: mosiężna rama gry zamiast starego wykroju (rama-wykroj.png) i ciemnego passe-partout ── */
body .hero::before { border-width: 0 !important; box-shadow: none !important; }
body .hero .frame { inset: 0 !important; border: 10px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; outline: 0 !important; filter: drop-shadow(0 4px 10px #0009) !important; }
body .hero .panorama, body .hero .shade { inset: 10px !important; }
body .brass-panel { border: 10px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; }
body .panorama-link { border: 8px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; }
body .contact-hero { border: 10px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; }
body .contact-hero::after { display: none !important; }
body .chapter-step a { border: 5px solid transparent !important; border-image: var(--e-rama) 64 stretch !important; background: var(--e-button) center / calc(100% - 2px) calc(100% - 2px) no-repeat !important;
  background-origin: border-box !important; color: var(--e-ink) !important; font: 600 14px 'Cinzel', Georgia, serif !important; padding: 7px 16px !important; }

/* ── 16. v15.3 — jasny motyw: atrament gry wszędzie poza zdjęciami (pierwotny styl strony ma jasne kolory wpisane na sztywno) ── */
:root[data-motyw='jasny'] body :is(main, .site-footer) :is(p, li, span, dd, dt, td, th, label, h1, h2, h3, h4, blockquote, em, strong, b, time, summary, div, address):not(:is(.hero, .world-opening, .wound, .panorama-link, .contact-hero, .community-banner, .video-slot, .game-window, .launcher, dialog) *) { color: var(--e-ink); }
:root[data-motyw='jasny'] body :is(main, .site-footer) :is(.fine, small, figcaption, .solo-note, .plate-label) { color: var(--e-muted) !important; }
:root[data-motyw='jasny'] body :is(main, .site-footer) a:not(:is(.action, .back-link, .return, .play-game, .contact-submit, .sw-guz, .s-guz, .chapter-step a, .site-footer nav a)):not(:is(.hero, .world-opening, .wound, .contact-hero, .launcher) *) { color: #6a3f12; }
:root[data-motyw='jasny'] body .chapter-nav a, :root[data-motyw='jasny'] body .season-controls button { color: var(--e-ink) !important; }
:root[data-motyw='jasny'] body .characters-section, :root[data-motyw='jasny'] body .road { background: transparent !important; }
:root[data-motyw='jasny'] body .home-intro p, :root[data-motyw='jasny'] body .card p { color: var(--e-ink) !important; }
/* na zdjęciach w jasnym motywie — jasny tekst z cieniem, jak w ciemnym */
:root[data-motyw='jasny'] body :is(.hero, .world-opening, .wound, .contact-hero, .community-banner) :is(p, span, li, a, small, strong) { color: #efe2c8; text-shadow: 0 2px 8px #000; }
/* na zdjęciach etykiety i ramka „Zobacz rozgrywkę” zawsze jasne — w obu motywach */
body :is(.hero, .world-opening, .wound, .contact-hero, .panorama-link, .community-banner) .eyebrow { color: #f0d4a0 !important; }
body .hero .gameplay, body .hero .gameplay * { color: #efe2c8 !important; }

/* ── 17. v15.5 — Świat pod spodem strony głównej (zakładka „Świat” przewija tutaj) ── */
body .swiat-na-glownej { scroll-margin-top: 90px; margin-top: 40px; }
body .swiat-na-glownej .jak-h1 { font: 400 60px/1.05 'EB Garamond', Georgia, serif !important; margin: 24px 0; letter-spacing: -.01em; }
@media (max-width: 1000px) { body .swiat-na-glownej .jak-h1 { font-size: 46px !important; } }
@media (max-width: 700px) { body .swiat-na-glownej .jak-h1 { font-size: 38px !important; } }

/* ── 18. v15.6 — obraz pod ramą, rama na wierzchu: rama-mosiadz.svg ma przezroczysty wewnętrzny pas, więc obraz zaczynający się
   za ramką zostawiał szparę, przez którą widać było tło (zgłoszenie właściciela 01.10). Teraz obraz sięga krawędzi, a rama leży nad nim. ── */
body .hero .panorama, body .hero .shade { inset: 0 !important; }
body .hero .frame { z-index: 3 !important; }
body :is(.brass-panel, .panorama-link, .contact-hero, .community-banner) { border: 0 !important; border-image: none !important; }
body :is(.brass-panel, .panorama-link, .contact-hero, .community-banner)::after {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important; border: 10px solid transparent !important;
  border-image: var(--e-rama) 64 stretch !important; pointer-events: none !important; z-index: 6 !important; background: none !important; box-shadow: none !important; }
body .panorama-link::after { border-width: 8px !important; }
/* rama-mosiadz.svg ma też ~1 px przezroczystego marginesu z zewnątrz — rama o piksel na zewnątrz, żeby obraz nie wystawał za mosiądz */
body :is(.brass-panel, .panorama-link, .contact-hero, .community-banner)::after { inset: -1px !important; }
body .hero .frame { inset: -1px !important; }
body :is(.brass-panel, .panorama-link, .contact-hero, .community-banner) { overflow: visible !important; }
body .panorama-link { overflow: hidden !important; clip-path: inset(0); }