/* ===========================================================================
   BAKUGAN ARENA — Style v2 (jasny, czysty, drukarski)
   - Tła: jednolite gradienty w kolorach świata (BEZ czarnych radial plam)
   - Header: pasek 18mm na górze, NIGDY nie nachodzi na pola
   - Pola: białe tło + kolorowy obrys (czytelne i kontrastowe)
   - Ścieżka: SVG z fill="none" (już bez czarnych wypełnień)
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Rajdhani', system-ui, sans-serif;
  background: #f0f0f4;
  color: #1a1a1a;
}

/* ====== PRINT ====== */
@page { size: A4 portrait; margin: 0; }

@media print {
  html, body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .board-page { page-break-after: always; box-shadow: none !important; }
  .board-page:last-child { page-break-after: auto; }
}

/* ====== BOARD WRAPPER (A4 portrait) ====== */
.board-page {
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  break-after: page;
}

@media screen {
  body.boards { padding: 16px; }
  .board-page {
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    border-radius: 4px;
    margin-bottom: 20px;
  }
}

/* ====== ŚWIATY (jednolite jasne gradienty) ====== */
.world-pyrus {
  --accent: #D84315;
  --accent-dark: #8E2400;
  --accent-light: #FFCCBC;
  --bg-top: #FFF3E0;
  --bg-bottom: #FFAB91;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
.world-aquos {
  --accent: #01579B;
  --accent-dark: #002F6C;
  --accent-light: #B3E5FC;
  --bg-top: #E1F5FE;
  --bg-bottom: #4FC3F7;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
.world-subterra {
  --accent: #4E342E;
  --accent-dark: #2D1A14;
  --accent-light: #D7CCC8;
  --bg-top: #F5F0E5;
  --bg-bottom: #A1887F;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}
.world-haos {
  --accent: #F57F17;
  --accent-dark: #8E5500;
  --accent-light: #FFF59D;
  --bg-top: #FFFDE7;
  --bg-bottom: #FFEB3B;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* ====== SUBTELNY WZÓR TŁA (geometryczne kropki) ====== */
.board-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0);
  background-size: 14mm 14mm;
  pointer-events: none;
  z-index: 1;
}

/* ====== HEADER (PASEK GÓRNY 18mm — NIGDY NIE NACHODZI NA POLA) ====== */
.board-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18mm;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8mm;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.board-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3mm;
  height: 3mm;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
}
.world-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22pt;
  letter-spacing: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.world-emblem {
  display: flex;
  align-items: center;
  gap: 8mm;
}
.world-icon {
  font-size: 22pt;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.board-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12pt;
  letter-spacing: 3px;
  background: rgba(255,255,255,0.2);
  padding: 1mm 4mm;
  border-radius: 2mm;
  border: 1px solid rgba(255,255,255,0.35);
}

/* ====== FOOTER (PASEK DOLNY) ====== */
.board-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14mm;
  background: var(--accent-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8mm;
  z-index: 20;
  font-family: 'Rajdhani';
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 1px;
}
.footer-tag {
  display: flex;
  align-items: center;
  gap: 2mm;
}

/* ====== SVG ŚCIEŻKA (NAPRAWIONA — fill:none na poziomie elementu) ====== */
.path-svg {
  position: absolute;
  top: 0; left: 0;
  width: 210mm;
  height: 297mm;
  z-index: 3;
  pointer-events: none;
}
.path-svg polyline,
.path-svg path,
.path-svg line {
  fill: none !important;          /* KLUCZOWE — zapobiega czarnym wypełnieniom */
  stroke: var(--accent-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.4 3.2;
  opacity: 0.55;
}

/* ====== POLA (białe tło, kolorowy obrys, czytelne) ====== */
.field {
  position: absolute;
  width: 32mm;
  height: 32mm;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  z-index: 10;
  padding: 2mm 1.5mm;
  background: #fff;
  border: 2.5px solid #333;
  box-shadow:
    0 3px 6px rgba(0,0,0,0.18),
    inset 0 0 0 1.5px rgba(255,255,255,0.6);
  color: #1a1a1a;
  line-height: 1.05;
}

.field .num {
  position: absolute;
  top: -3.5mm;
  left: 50%;
  transform: translateX(-50%);
  width: 7.5mm;
  height: 7.5mm;
  background: #fff;
  border: 2px solid;
  border-color: inherit;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 8pt;
  font-weight: 900;
  color: #1a1a1a;
  z-index: 11;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.field .icon {
  font-size: 13pt;
  line-height: 1;
  margin-bottom: 0.8mm;
}
.field .title {
  font-family: 'Orbitron', sans-serif;
  font-size: 7pt;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.field .desc {
  font-size: 6.5pt;
  font-weight: 600;
  margin-top: 0.5mm;
  line-height: 1.1;
  color: #444;
}

/* ====== TYPY PÓL (kolorystyka borderu + delikatne tło) ====== */
.f-normal {
  background: #fff;
  border-color: #9E9E9E;
}
.f-normal .num { border-color: #9E9E9E; }
.f-normal .icon { color: #757575; }

.f-reward {
  background: linear-gradient(180deg, #fff 0%, #E8F5E9 100%);
  border-color: #2E7D32;
}
.f-reward .num { border-color: #2E7D32; color: #1B5E20; }
.f-reward .icon { color: #2E7D32; }
.f-reward .title { color: #1B5E20; }

.f-trap {
  background: linear-gradient(180deg, #fff 0%, #FFEBEE 100%);
  border-color: #C62828;
}
.f-trap .num { border-color: #C62828; color: #B71C1C; }
.f-trap .icon { color: #C62828; }
.f-trap .title { color: #B71C1C; }

.f-portal {
  background: linear-gradient(180deg, #fff 0%, #F3E5F5 100%);
  border-color: #6A1B9A;
  border-width: 3px;
  box-shadow:
    0 0 0 1.5px #fff inset,
    0 3px 8px rgba(106,27,154,0.4);
}
.f-portal .num { border-color: #6A1B9A; color: #4A148C; }
.f-portal .icon { color: #6A1B9A; }
.f-portal .title { color: #4A148C; }

.f-battle {
  background: linear-gradient(180deg, #fff 0%, #FFF3E0 100%);
  border-color: #EF6C00;
  border-style: dashed;
}
.f-battle .num { border-color: #EF6C00; color: #E65100; }
.f-battle .icon { color: #EF6C00; }
.f-battle .title { color: #E65100; }

.f-start {
  background: linear-gradient(180deg, #FFF8E1 0%, #FFD54F 100%);
  border-color: #F57F17;
  border-width: 3.5px;
  box-shadow:
    0 0 0 2px #fff inset,
    0 4px 10px rgba(245,127,23,0.4);
}
.f-start .num { border-color: #F57F17; background: #FFEB3B; }
.f-start .icon { font-size: 16pt; }
.f-start .title { font-size: 9pt; color: #BF360C; }

.f-meta {
  width: 38mm; height: 38mm;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #FFD700 60%, #FF8F00 100%);
  border: 4px solid #BF360C;
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 4px #FFD700,
    0 6px 16px rgba(191,54,12,0.5);
}
.f-meta .num { border-color: #BF360C; background: #FFD700; }
.f-meta .icon { font-size: 18pt; }
.f-meta .title { font-size: 11pt; font-weight: 900; color: #4E1A00; letter-spacing: 1.5px; }
.f-meta .desc { font-weight: 800; color: #4E1A00; font-size: 7pt; }

/* PORTAL KOLORY (dodatkowy akcent ramki) */
.portal-red    { box-shadow: 0 0 0 1.5px #fff inset, 0 3px 8px rgba(244,67,54,0.55) !important; outline: 2px solid #F44336; outline-offset: 2px; }
.portal-blue   { box-shadow: 0 0 0 1.5px #fff inset, 0 3px 8px rgba(33,150,243,0.55) !important; outline: 2px solid #2196F3; outline-offset: 2px; }
.portal-green  { box-shadow: 0 0 0 1.5px #fff inset, 0 3px 8px rgba(76,175,80,0.55) !important; outline: 2px solid #4CAF50; outline-offset: 2px; }
.portal-gold   { box-shadow: 0 0 0 1.5px #fff inset, 0 3px 8px rgba(255,193,7,0.65) !important; outline: 2px solid #FFC107; outline-offset: 2px; }

/* ====== ROBOCZA STREFA (między headerem a footerem) ====== */
.board-content {
  position: absolute;
  top: 18mm;
  bottom: 14mm;
  left: 0;
  right: 0;
  z-index: 2;
}

/* ====== LEGENDA (na każdej planszy w wolnej strefie — NIE nakłada się na pola) ====== */
.legend {
  position: absolute;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--accent);
  border-radius: 3mm;
  padding: 3mm 4mm;
  z-index: 8;
  font-size: 7.5pt;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  color: #1a1a1a;
}
.legend .lh {
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 8.5pt;
  letter-spacing: 1.5px;
  color: var(--accent-dark);
  margin-bottom: 1.5mm;
  border-bottom: 1px solid var(--accent-light);
  padding-bottom: 1mm;
}
.legend ul { list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: 2mm; margin-bottom: 0.5mm; }
.legend .dot {
  width: 3mm; height: 3mm;
  border-radius: 50%;
  border: 2px solid;
  flex-shrink: 0;
}

/* ====== CONNECTORS (markery łączenia kartek na krawędziach) ====== */
.connector {
  position: absolute;
  width: 8mm; height: 8mm;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 9pt;
  color: #fff;
  z-index: 15;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.conn-right  { right: -4mm; transform: translateY(-50%); }
.conn-left   { left: -4mm;  transform: translateY(-50%); }
.conn-top    { top: -4mm;   transform: translateX(-50%); }
.conn-bottom { bottom: -4mm; transform: translateX(-50%); }

/* ====== STRONA GŁÓWNA (poza A4) — pozostawiamy ciemną estetykę ====== */
.site-hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
}