/* VolcanoMap – style strony. Style samych map: assets/world-map/src/maps.css
   Dwa motywy wg ustawień systemu albo wyboru w przełączniku w nagłówku (<html data-theme>): jasny „papier sejsmografu” (ciepły, z siatką pomiarową) i ciemny „bazalt”
   (lawa świeci na tle czarnej skały). Kolory zdarzeń: lawa (erupcje) i turkus sejsmiczny (trzęsienia). */

:root {
  --bg: #f4efe6;
  --bg-grid: rgba(120, 90, 60, .07);
  --surface: #fffbf4;
  --surface-2: #f7f1e6;
  --surface-3: #ece4d6;
  --ink: #1d1712;
  --ink-2: #4a3f36;
  --muted: #7d6f63;
  --line: #e3d9ca;
  --line-2: #cdbfab;
  --lava: #d9480f;
  --lava-2: #f08c00;
  --lava-ink: #fff8f0;
  --seis: #0b7f86;
  --seis-2: #2a5fa8;
  --seis-3: #6b3fa0;
  --land: #e2d8c8;
  --land-focus: #d4c2a6;
  --ocean: #ebe4d7;
  --map-stroke: #f4efe6;
  --pin-off: #9c8f82;
  --shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 12px 30px -16px rgba(60, 40, 20, .35);
  --radius: 6px;
  --header-h: 54px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f0c0a;
    --bg-grid: rgba(255, 120, 60, .035);
    --surface: #17120f;
    --surface-2: #1e1814;
    --surface-3: #2a221d;
    --ink: #f6ede3;
    --ink-2: #cdbcad;
    --muted: #94847a;
    --line: #2b231e;
    --line-2: #3d322b;
    --lava: #ff5a1f;
    --lava-2: #ffb347;
    --lava-ink: #1a0b03;
    --seis: #3fd0d4;
    --seis-2: #5b8cff;
    --seis-3: #b07cff;
    --land: #2a221d;
    --land-focus: #4a3a2e;
    --ocean: #15110e;
    --map-stroke: #15110e;
    --pin-off: #6f625a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
/* Ciemny motyw wybrany przełącznikiem w nagłówku (<html data-theme="dark">) – te same zmienne co wyżej. */
:root[data-theme='dark'] {
  --bg: #0f0c0a;
  --bg-grid: rgba(255, 120, 60, .035);
  --surface: #17120f;
  --surface-2: #1e1814;
  --surface-3: #2a221d;
  --ink: #f6ede3;
  --ink-2: #cdbcad;
  --muted: #94847a;
  --line: #2b231e;
  --line-2: #3d322b;
  --lava: #ff5a1f;
  --lava-2: #ffb347;
  --lava-ink: #1a0b03;
  --seis: #3fd0d4;
  --seis-2: #5b8cff;
  --seis-3: #b07cff;
  --land: #2a221d;
  --land-focus: #4a3a2e;
  --ocean: #15110e;
  --map-stroke: #15110e;
  --pin-off: #6f625a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -14px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  /* Siatka jak na papierze sejsmografu */
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lava); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: .005em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: 1.55rem; text-transform: uppercase; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--lava); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
code { font: .86em var(--font-mono); padding: .1em .35em; border-radius: 3px; background: var(--surface-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.small { font-size: .86rem; color: var(--ink-2); }
.muted { color: var(--muted); }

.lead { font-size: 1.08rem; color: var(--ink-2); }
.kicker {
  display: flex; align-items: center; gap: .45em; flex-wrap: wrap;
  margin: 0 0 .5rem; font: 600 .74rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lava);
}
.kicker svg { width: 16px; height: 16px; }
.kicker a { color: inherit; }
.kicker-q { color: var(--seis); }
.notice { padding: .7rem 1rem; border-left: 3px solid var(--lava-2); background: var(--surface-2); font-size: .9rem; }
.side-note { font-size: .86rem; color: var(--muted); }

.button {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1.05em; border-radius: 3px; border: 0;
  background: var(--lava); color: var(--lava-ink); text-decoration: none;
  font: 600 .8rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  transition: filter .15s, transform .15s; cursor: pointer;
}
.button:hover { color: var(--lava-ink); filter: brightness(1.1); }
.button-q { background: var(--seis); }
.button-ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.button-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.badge { display: inline-block; padding: .05em .5em; border-radius: 2px; font: 600 .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.badge-on { background: var(--lava); color: var(--lava-ink); animation: glow 2.4s ease-in-out infinite; }
.badge-live { background: var(--seis); color: var(--surface); }
@keyframes glow { 50% { box-shadow: 0 0 12px 1px var(--lava); } }

/* ---------- Nagłówek ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(16px, 2.4vw, 28px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { width: 40px; height: 24px; }
.brand-name { font: 700 1.45rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.site-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a, .maps-menu summary {
  display: block; padding: .4rem .7rem; border-radius: 3px;
  color: var(--ink-2); text-decoration: none; font: 500 .8rem var(--font-mono); letter-spacing: .02em; cursor: pointer;
}
.site-nav a:hover, .maps-menu summary:hover { color: var(--ink); background: var(--surface-3); }
.site-nav a[aria-current='page'] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--lava); border-radius: 0; }
.maps-menu { position: relative; }
.maps-menu summary { list-style: none; }
.maps-menu summary::-webkit-details-marker { display: none; }
.maps-menu summary::after { content: ' ▾'; color: var(--muted); }
.maps-list { position: absolute; right: 0; top: calc(100% + 6px); display: block !important; min-width: 220px; padding: 6px !important; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.maps-list .maps-lang { color: var(--muted); font-size: .8em; }
.maps-list .maps-more { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.maps-list .maps-more a { color: var(--lava); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 3px; padding: 6px; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.lang-switch { margin: 0; display: flex; gap: 2px; font: 600 .74rem var(--font-mono); }
.lang-switch a { padding: .3rem .45rem; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-radius: 3px; }
.lang-switch a[aria-current='true'] { color: var(--ink); border-color: var(--line-2); }
/* Przełącznik motywu: słońce / auto / księżyc – moduł theme (assets/theme/theme.css); tu tylko wygląd VolcanoMap
   przez zmienne i kanciaste rogi jak reszta interfejsu */
.site-header {
  --theme-switch-bg: transparent; --theme-switch-size: 24px; --theme-switch-icon: 15px; --theme-switch-compact-icon: 18px;
  --theme-switch-gap-left: 0; --theme-switch-gap-left-compact: 0; --theme-switch-bg-compact: transparent; --theme-switch-focus: var(--lava);
}
.site-header .theme-switch, .site-header .theme-switch button { border-radius: 3px; }
@media (max-width: 480px) {
  .site-header { gap: 10px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav { order: 3; }
  .site-nav ul#nav-list { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 8px 16px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--shadow); }
  .site-nav.is-open ul#nav-list { display: flex; }
  .maps-list { position: static; box-shadow: none; border: 0; }
}

.site-footer { padding: 28px clamp(16px, 3vw, 32px) 36px; margin-top: 48px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.site-footer p { margin: 0 0 .35rem; }
.site-footer a { color: var(--ink-2); }
/* Ikonki kanałów marki w stopce (Series::socialLinks, moduł series): kolor tekstu stopki, przy najechaniu i fokusie jaśniej */
.series-social-link { transition: opacity .15s; }
.series-social-link:hover, .series-social-link:focus-visible { opacity: .7; }

/* ---------- Mapy ---------- */

.world-map {
  --wm-ocean: var(--ocean);
  --wm-sphere-stroke: var(--line);
  --wm-land: var(--land);
  --wm-land-hover: var(--land);
  --wm-land-inactive: var(--land);
  --wm-border: var(--map-stroke);
  --wm-border-width: .5px;
  --wm-hover-outline: transparent;
  --wm-control-bg: var(--surface);
  --wm-control-fg: var(--ink);
  --wm-control-border: var(--line-2);
  --wm-font: var(--font);
  position: relative;
}
.world-map .wm-country[data-fill] { fill: var(--wm-fill); }

/* Znaczniki: kształt jednostkowy skalowany przez --s (rozmiar) i --wm-zoom (stały rozmiar na ekranie). */
.pin { cursor: pointer; }
.pin-shape {
  transform: scale(calc(var(--s, 3) / var(--wm-zoom, 1)));
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  transition: opacity .3s, fill .3s;
}
.pins.is-hidden { display: none; }
/* Wulkany: przygaszone szare trójkąty; w okresie erupcji – lawa z jasną obwódką. */
.pin-v .pin-shape { fill: var(--pin-off); stroke: var(--map-stroke); opacity: .55; }
.pin-v.is-on .pin-shape { fill: var(--lava); stroke: var(--lava-2); opacity: 1; }
/* Erupcja bez znanego VEI: sam kontur – wielkość znacznika nie mówi nic o sile erupcji. */
.pin-v.is-on.is-unk .pin-shape { fill: color-mix(in srgb, var(--lava) 22%, transparent); stroke: var(--lava); stroke-width: 1.5px; }
.pin-v.is-x { display: none; }
/* Trzęsienia: kółka, kolor wg głębokości ogniska. */
.pin-q .pin-shape { fill: var(--seis); fill-opacity: .4; stroke: var(--seis); stroke-opacity: .7; }
.pin-q.d2 .pin-shape { fill: var(--seis-2); stroke: var(--seis-2); }
.pin-q.d3 .pin-shape { fill: var(--seis-3); stroke: var(--seis-3); }
.pins-q .pin-q:not(.is-on) { display: none; }
.pin-q.live .pin-shape { fill: var(--seis); fill-opacity: 1; stroke: var(--seis); stroke-width: 1px; animation: pulse 2.2s ease-out infinite; }
.pin:hover .pin-shape, .pin.is-hot .pin-shape { stroke: var(--ink); stroke-width: 2px; opacity: 1; fill-opacity: 1; }
.pin.is-sel .pin-shape { stroke: var(--ink); stroke-width: 2.5px; opacity: 1; fill-opacity: 1; animation: beacon 1.8s ease-out infinite; }
.pin.is-new .pin-shape { animation: flare 1.2s ease-out; }
@keyframes pulse { 0% { stroke-width: 1px; stroke-opacity: 1; } 70%, 100% { stroke-width: 16px; stroke-opacity: 0; } }
@keyframes beacon { 0% { stroke-width: 2.5px; } 80%, 100% { stroke-width: 22px; stroke-opacity: 0; } }
@keyframes flare { 0% { stroke: var(--lava-2); stroke-width: 18px; stroke-opacity: .7; } 100% { stroke-width: 1px; stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pin-shape, .badge-on { animation: none !important; }
}
/* Obrazek PNG (moduł export – klasa .is-exporting na czas kopiowania mapy): bez pulsowania i rozbłysków (kopia bierze
   styl z chwili kliknięcia), wybrany obiekt z wyraźną obwódką, trzęsienia z ostatnich 7 dni bez rozmytej fali */
.world-map svg.is-exporting .pin-shape { animation: none !important; transition: none !important; }
.world-map svg.is-exporting .pin.is-sel .pin-shape { stroke: var(--ink); stroke-width: 3px; stroke-opacity: 1; }
.world-map svg.is-exporting .pin-q.live .pin-shape { stroke-width: 1px; stroke-opacity: 1; }

.map-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  max-width: 300px; padding: .45rem .65rem; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--lava); box-shadow: var(--shadow);
  font-size: .8rem; line-height: 1.35;
}
.map-tip strong { display: block; color: var(--ink); font-size: .86rem; }
.map-tip span { color: var(--muted); font-family: var(--font-mono); font-size: .74rem; }

/* ---------- Strona główna: konsola, mapa, oś czasu ---------- */

.stage {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'panel map' 'time time';
  height: calc(100dvh - var(--header-h));
  min-height: 620px;
}
.console {
  grid-area: panel; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
}
.console-intro { padding: 18px 20px 0; }
.console-intro h1 { font-size: 2.3rem; margin-bottom: .3em; }
.console-intro .lead { font-size: .92rem; margin-bottom: .8rem; }
.readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 12px; background: var(--line); border: 1px solid var(--line); }
.readout div { background: var(--surface-2); padding: 6px 8px; }
.readout dt { font: .64rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.readout dd { margin: 0; font: 600 1.15rem var(--font-mono); color: var(--ink); }
.readout-note { margin: -6px 0 12px; font: .7rem/1.45 var(--font-mono); color: var(--muted); }
.readout-note a { color: var(--ink-2); white-space: nowrap; }
.readout-wide { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1.5rem 0 2rem; }
.search input {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--bg); color: var(--ink); font: .9rem var(--font);
}
.search input:focus { outline: 2px solid var(--lava); outline-offset: -1px; }
.tabs { display: flex; margin: 12px -20px 0; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: .4em;
  padding: .55rem .5rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); font: 600 .74rem var(--font-mono); letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.tab svg { width: 14px; height: 14px; color: var(--seis); }
.tab[aria-selected='true'] { color: var(--ink); border-color: var(--lava); }
.tab-count { color: var(--seis); }
.console.has-card .console-intro { display: none; }
.console-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 18px; scrollbar-width: thin; }
.console-foot { margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); font: .72rem var(--font-mono); color: var(--muted); }
.console-foot a { color: var(--muted); }
.console-foot p { margin: 0; }
.console-foot p + p { margin-top: 2px; }
.list-head { font-size: 1.25rem; margin-bottom: .6rem; }
.list-sub { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .35rem; font: 600 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lava); }
.list-sub-q { color: var(--seis); }
.list-sub span { color: var(--muted); }
.list-empty, .list-more, .list-note { color: var(--muted); font-size: .84rem; }
.list-note { font-size: .72rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; width: 100%;
  padding: .4rem .35rem; border: 0; border-bottom: 1px dashed var(--line); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.row:hover { background: var(--surface-2); }
a.row { text-decoration: none; }
.row-val { font: 600 .74rem var(--font-mono); color: var(--lava); white-space: nowrap; }
.row-q .row-val { color: var(--seis); }
.row-q.d2 .row-val { color: var(--seis-2); }
.row-q.d3 .row-val { color: var(--seis-3); }
.row-text strong { display: block; font-weight: 500; font-size: .9rem; line-height: 1.3; }
.row-text em { display: block; font-style: normal; font-size: .76rem; color: var(--muted); }

.card { position: relative; }
.card-close { position: absolute; right: -6px; top: -6px; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--surface); color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.card-kind { display: flex; align-items: center; gap: .4em; margin: 0 0 .4rem; font: 600 .7rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--lava); padding-right: 36px; }
.card-q .card-kind { color: var(--seis); }
.card-kind svg { width: 16px; height: 16px; }
.card h2 { font-size: 1.9rem; text-transform: none; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { color: var(--lava); }
.card h3 { margin-top: 1.2rem; font: 600 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .button { margin-top: .4rem; }
.card-mag { margin: 0; font-size: 2.6rem; font-weight: 700; color: var(--seis); line-height: 1; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: .6rem 0 .8rem; background: var(--line); border: 1px solid var(--line); }
.facts div { background: var(--surface-2); padding: 5px 8px; }
.facts dt { font: .62rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: .88rem; }
.spark { display: flex; align-items: flex-end; gap: 1px; height: 46px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.spark i { flex: 1; min-width: 2px; background: var(--lava); opacity: .75; }
.spark i.on { background: var(--lava-2); opacity: 1; }
.spark-note { margin: .25rem 0 .8rem; font: .66rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

.map-area { grid-area: map; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ocean); }
.map-area .world-map { flex: 1; min-height: 0; }
.layers { position: absolute; z-index: 4; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); }
.layer {
  display: inline-flex; align-items: center; gap: .4em; padding: .38rem .7rem; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--muted);
  font: 600 .74rem var(--font-mono); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow);
}
.layer svg { width: 16px; height: 16px; }
.layer-v svg { color: var(--lava); }
.layer-q svg, .layer-live svg { color: var(--seis); }
.layer[aria-pressed='true'] { color: var(--ink); border-color: var(--ink-2); }
.layer[aria-pressed='false'] svg { color: var(--muted); }
.layer-count { font-weight: 400; color: var(--muted); }
/* Mapa jako PNG – przycisk w prawym dolnym rogu mapy, menu formatów otwiera się w górę (moduł export) */
.map-area > .map-export-wrap { position: absolute; z-index: 5; right: 12px; bottom: 12px; }
.export-btn, .export-menu { --export-radius: 3px; --export-font: var(--font-mono); }
.legend {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 6px 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); border-radius: 3px;
  font: .66rem var(--font-mono); color: var(--muted);
}
.legend p { margin: 0; display: flex; align-items: center; gap: 4px; }
.lg-tri { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--lava); }
.lg-tri-s { border-width: 0 4px 7px; }
.lg-tri-l { border-width: 0 7px 12px; }
.lg-tri-off { border-bottom-color: var(--pin-off); }
.lg-tri-unk { position: relative; border-bottom-color: var(--lava); }
.lg-tri-unk::after { content: ''; position: absolute; left: -3px; top: 3px; border: solid transparent; border-width: 0 3px 5px; border-bottom-color: var(--surface); }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--seis); }
.lg-d2 { background: var(--seis-2); }
.lg-d3 { background: var(--seis-3); }

/* Oś czasu – pasek sejsmogramu: erupcje w górę od linii środkowej, trzęsienia w dół. */
.timeline { grid-area: time; padding: 10px clamp(16px, 2vw, 28px) 12px; background: var(--surface); border-top: 1px solid var(--line); }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-play { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lava); color: var(--lava-ink); cursor: pointer; transition: transform .15s; }
.tl-play:hover { transform: scale(1.06); }
.tl-play svg { width: 18px; height: 18px; fill: currentColor; }
.tl-icon-pause, .is-playing .tl-icon-play { display: none; }
.is-playing .tl-icon-pause { display: inline; }
.tl-speed, .tl-loop, .tl-preset {
  padding: .3rem .6rem; border: 1px solid var(--line-2); border-radius: 3px; background: none;
  color: var(--ink-2); font: 500 .72rem var(--font-mono); cursor: pointer;
}
.tl-speed { min-width: 44px; }
/* Pętla odtwarzania (moduł timeline, opcja loop) */
.tl-loop { display: inline-grid; place-items: center; padding-block: .3em; }
.tl-loop svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-loop[aria-pressed='true'] { color: var(--lava); border-color: var(--lava); }
.tl-speed:hover, .tl-loop:hover, .tl-preset:hover { color: var(--ink); border-color: var(--ink-2); }
.tl-readout { margin: 0 auto 0 8px; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.tl-years { font: 700 1.6rem var(--font-display); letter-spacing: .02em; color: var(--ink); }
.tl-info { font: .76rem var(--font-mono); color: var(--muted); }
.tl-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-track { position: relative; height: 70px; cursor: pointer; touch-action: none; background: var(--surface-2); border: 1px solid var(--line); }
.tl-track::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.tl-grid i { position: absolute; top: 0; bottom: 0; border-left: 1px dotted var(--line-2); }
/* Okresy niepełnego zapisu: kreskowanie w połowie erupcji (góra) albo trzęsień (dół). */
.tl-zones { position: absolute; inset: 0; pointer-events: none; }
.tl-zone { position: absolute; height: 50%; overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 22%, transparent) 0 1px, transparent 1px 5px); }
.tl-zone.is-weak { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 16%, transparent) 0 1px, transparent 1px 10px); }
.tl-zone-e { top: 0; }
.tl-zone-q { top: 50%; }
.tl-zone-labels .tl-zone { background: none; }
.tl-zone b {
  position: absolute; left: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px; border-radius: 2px; background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  font: 500 .56rem/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.tl-zone-e b { top: 2px; }
.tl-zone-q b { bottom: 2px; }
.tl-bars { position: absolute; inset: 0; }
.tl-bar { position: absolute; top: 0; bottom: 0; opacity: .3; transition: opacity .2s; }
.tl-bar i { position: absolute; left: 1px; right: 0; min-height: 1px; }
.tl-bar .tl-e { bottom: 50%; }
.tl-bar .tl-q { top: 50%; }
.tl-bar.is-on { opacity: 1; }
.tl-window { position: absolute; top: -5px; bottom: -5px; min-width: 4px; background: color-mix(in srgb, var(--lava) 8%, transparent); border: 1px solid var(--lava); cursor: grab; }
.is-dragging .tl-window { cursor: grabbing; }
.is-all .tl-window { background: transparent; border-color: color-mix(in srgb, var(--lava) 35%, transparent); }
.tl-handle { position: absolute; top: 50%; width: 12px; height: 32px; margin-top: -16px; cursor: ew-resize; border-radius: 2px; background: var(--lava); box-shadow: 0 0 0 3px var(--surface); }
.tl-handle::after { content: ''; position: absolute; inset: 9px 4px; border-left: 1px solid var(--lava-ink); border-right: 1px solid var(--lava-ink); opacity: .6; }
.tl-handle-from { left: -7px; }
.tl-handle-to { right: -7px; }
.is-playing .tl-window { box-shadow: 0 0 24px -6px var(--lava); }
.tl-axis { position: relative; height: 20px; margin-top: 3px; font: .66rem var(--font-mono); color: var(--muted); }
.tl-axis span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }

@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: 'map' 'time' 'panel'; height: auto; min-height: 0; }
  .map-area { height: auto; min-height: 0; }
  /* Wysokość (ok. połowa ekranu) i przewijanie pasa mapy w bok – tryb phone modułu world-map (home.js) */
  .map-area .world-map { flex: none; }
  .console { border-right: 0; border-top: 1px solid var(--line); }
  .console-list { overflow: visible; }
  .legend { display: none; }
  .tl-presets { width: 100%; }
}
/* Telefon: przyciski warstw nad mapą (w pasku), a nie na niej – nie zasłaniają znaczników */
@media (max-width: 640px) {
  .layers { position: static; max-width: none; gap: 4px; padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .layer { padding: .3rem .5rem; font-size: .68rem; box-shadow: none; }
  .layer svg { width: 14px; height: 14px; }
}

/* ---------- Podstrony ---------- */

.page { max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 0; }
.prose-page { max-width: 920px; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 18px; font: .74rem var(--font-mono); color: var(--muted); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--lava); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin-bottom: 32px; }
.hero-head h1 { margin-bottom: .2em; }
.aka { margin-top: -.3rem; font: .8rem var(--font-mono); color: var(--muted); }
.big-mag { margin: 0 0 .1rem; font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: 700; line-height: 1; color: var(--seis); }
.big-mag span { font-size: .45em; margin-right: .1em; color: var(--muted); }
.spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; margin: 1rem 0 1.2rem; background: var(--line); border: 1px solid var(--line); }
.spec div { background: var(--surface); padding: 7px 10px; }
.spec dt { font: .64rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font-size: .92rem; }
.spec small { color: var(--muted); font-size: .72rem; }
.page-map { position: relative; margin: 0; background: var(--ocean); border: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + 14px); }
.page-map .world-map { aspect-ratio: 16 / 10; }
.page-map figcaption { padding: 6px 10px; font: .7rem var(--font-mono); color: var(--muted); border-top: 1px solid var(--line); background: var(--surface); }
/* Podpis mapy z przyciskiem PNG po prawej (menu formatów – moduł export) */
.page-map .map-caption { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 5px 6px 5px 10px; }
.map-caption .map-export-wrap { position: relative; flex: none; }
/* Stronicowanie długiej tabeli (typ wulkanu) */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 14px 0 0; font: 500 .8rem var(--font-mono); }
.pager a, .pager span { padding: .3rem .6rem; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); text-decoration: none; }
.pager a:hover { color: var(--ink); border-color: var(--ink-2); }
.pager [aria-current] { color: var(--lava-ink); background: var(--lava); border-color: var(--lava); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.body p { max-width: 70ch; }
.side h2 { font-size: 1.1rem; margin-top: 1.2rem; }
.mini { list-style: none; margin: 0 0 1rem; padding: 0; }
.mini a { display: block; padding: .45rem .5rem .45rem .7rem; border-left: 3px solid var(--lava); text-decoration: none; color: var(--ink); }
.mini-q a { border-left-color: var(--seis); }
.mini a:hover { background: var(--surface-2); }
.mini strong { display: block; font-weight: 500; font-size: .9rem; line-height: 1.3; }
.mini span { font-size: .74rem; color: var(--muted); }
.mini li + li a { border-top: 1px dashed var(--line); }
.more { font-size: .84rem; color: var(--muted); }
.cite { padding: .7rem 1rem; border-left: 3px solid var(--line-2); background: var(--surface); font-size: .88rem; }
.h-icon { width: 20px; height: 20px; vertical-align: -2px; }
.h-icon-v { color: var(--lava); }
.h-icon-q { color: var(--seis); }
.count { font-size: .9rem; color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 36px; }

.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); background: var(--surface); }
.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data th { position: sticky; top: 0; padding: .5rem .7rem; background: var(--surface-2); text-align: left; font: 600 .66rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.data td { padding: .42rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data tr:last-child td { border-bottom: 0; }
.data tbody tr:hover { background: var(--surface-2); }
.data .num { text-align: right; white-space: nowrap; }
.data .mono { font-size: .82rem; white-space: nowrap; }
.data tr.is-ongoing td:first-child { box-shadow: inset 3px 0 0 var(--lava); }
.data tr.is-strong b { color: var(--lava); }
/* VEI: pasek o długości proporcjonalnej do stopnia */
.vei { display: inline-flex; align-items: center; gap: 6px; }
.vei::before { content: ''; display: inline-block; height: 8px; width: calc(4px + var(--vei) * 9px); background: linear-gradient(90deg, var(--lava-2), var(--lava)); }
.vei b { font-size: .78rem; }

.time-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2rem 0; }
.time-nav a { display: block; padding: .7rem .9rem; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); }
.time-nav a:hover { border-color: var(--seis); }
.time-nav-next { text-align: right; }
.time-nav-label { display: block; font: 600 .66rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--seis); }
.time-nav strong { display: block; font-weight: 500; }
.time-nav .mono { font-size: .74rem; color: var(--muted); }

.alert { padding: .05em .45em; border-radius: 2px; font: 600 .74rem var(--font-mono); text-transform: uppercase; }
.alert-green { background: #2f9e44; color: #fff; }
.alert-yellow { background: #f2c200; color: #1d1712; }
.alert-orange { background: #f08c00; color: #1d1712; }
.alert-red { background: #e03131; color: #fff; }

.tiles { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-top: 3px solid var(--lava); background: var(--surface); text-decoration: none; color: var(--ink); }
.tile:hover { border-color: var(--lava); }
.tile strong { font: 700 1.2rem var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.tile span { font-size: .84rem; color: var(--ink-2); }
.tile em { margin-top: auto; font-style: normal; font-size: .74rem; color: var(--muted); }
.tiles-small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tiles-small .tile strong { font-size: 1rem; }

.toc { margin: 0 0 1.5rem; font: .8rem var(--font-mono); }
.rank { list-style: none; counter-reset: r; margin: 0 0 2rem; padding: 0; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.rank li::before { content: counter(r); font: .74rem var(--font-mono); color: var(--muted); text-align: right; }
.rank a { text-decoration: none; color: var(--ink); }
.rank a:hover strong { color: var(--lava); }
.rank strong { font-weight: 500; }
.rank span { margin-left: .5rem; font-size: .78rem; color: var(--muted); }
.rank b { font-size: .86rem; color: var(--lava); }
.rank-q b { color: var(--seis); }

.prose-page h2 { margin-top: 2rem; }
.prose-page ul { padding-left: 1.2rem; }
.prose-page li { margin-bottom: .4rem; }
.error-page { text-align: center; padding-top: 10vh; }

/* ---------- Kontakt ---------- */

.contact-form { max-width: 640px; }
.form-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.form-field label { font-weight: 600; color: var(--ink-2); }
.form-field input[type='text'], .form-field input[type='email'], .form-field textarea {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--surface); color: var(--ink); font: .95rem/1.45 var(--font);
}
.form-field textarea { resize: vertical; min-height: 9em; }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--lava); outline-offset: -1px; }
.form-field [aria-invalid='true'] { border-color: var(--lava); }
.form-consent { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; }
.form-consent input { margin: .3em 0 0; width: 1.05em; height: 1.05em; accent-color: var(--lava); flex: none; }
.form-consent label { flex: 1; font-weight: 400; color: var(--ink); }
.form-consent .field-error { flex-basis: 100%; }
.req { color: var(--lava); }
.field-error { color: var(--lava); font-size: .88rem; }
.form-required { font-size: .86rem; }
.form-alert, .form-success { padding: .7rem 1rem; border-left: 3px solid var(--lava); background: var(--surface-2); }
.form-success { border-left-color: var(--seis); font-size: 1.05rem; }
.form-clause { max-width: 640px; margin-top: 26px; font-size: .86rem; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.error-code { margin: 0; font-size: 5rem; font-weight: 700; color: var(--lava); line-height: 1; }

@media (max-width: 900px) {
  .hero, .layout { grid-template-columns: minmax(0, 1fr); }
  .page-map { position: relative; top: 0; }
  .time-nav { grid-template-columns: 1fr; }
}

/* Długie tytuły trzęsień – mniejszy nagłówek */
.quake-page h1, .card h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.card h2 { font-size: 1.6rem; }

/* ---------- Quiz (/quiz – moduł quiz z assets; mapa – kolory .world-map) ---------- */
.quiz-page-wrap.prose-page { max-width: 1100px; }
.quiz-stage { margin: 1.2rem 0 2rem; }
.quiz-stage .quiz { --quiz-accent: var(--lava); --quiz-accent-ink: var(--lava-ink); --quiz-surface: var(--surface); --quiz-target: var(--lava-2); --quiz-radius: var(--radius); }
.quiz-map { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }