/*
 * Shared styles for the Digimon evolution-tree infographics.
 * See README.md for the design-system tokens and conventions.
 *
 * Per-page values are set inline in each page's own <style> block:
 *   .infographic { width; height }   .columns { top }
 *   .legend { width }                .legend-grid { grid-template-columns }
 *   .partner-panel / .jogress-panel / .armor-panel { top; width }  (height auto-sizes to content)
 */

:root {
  --bg: #06111f;
  --panel: #0b2039;
  --panel2: #102b4c;
  --line: rgba(226,241,255,.24);
  --text: #eef7ff;
  --muted: #a9bed8;
  /* trigger colors */
  --normal: #58a6ff;
  --x: #8bd450;
  --dna: #b084f5;
  --mode: #20c997;
  --dark: #ff5c72;
  --lateral: #f5a524;
  --armor: #f5a524;
  --bond: #ff7eb6;
  --burst: #ffd43b;
  --lore: #8a97ad;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at top left, #1e4979 0%, #102b4c 30%, var(--bg) 72%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
.wrap { padding: 22px; overflow: auto; }

/* Back-navigation pill: above the canvas on tree pages (to the generation index)
   and above the hero on selection screens (to the root index). */
.backnav {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; letter-spacing: .4px;
  color: #cfe6ff; background: rgba(3,14,27,.6); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .18s ease, background .18s ease;
}
.backnav:hover { border-color: rgba(88,166,255,.55); background: rgba(88,166,255,.14); }
.backnav .arrow { transition: transform .18s ease; }
.backnav:hover .arrow { transform: translateX(-4px); }

/* Canvas (set width/height per page) */
.infographic {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(circle at 14% 8%, rgba(88,166,255,.10), transparent 22%),
    radial-gradient(circle at 78% 30%, rgba(176,132,245,.08), transparent 26%),
    radial-gradient(circle at 30% 60%, rgba(255,92,114,.06), transparent 26%),
    radial-gradient(circle at 60% 85%, rgba(255,212,59,.06), transparent 26%);
}

.title { position:absolute; left:34px; top:22px; width:980px; z-index:5; }
h1 { margin:0 0 8px; font-size:42px; line-height:1.02; letter-spacing:-1px; }
.subtitle { color:var(--muted); font-size:16px; line-height:1.35; max-width:920px; }

/* Legend: constant size across all pages. 3 columns wide enough for the widest
   trigger label ("Fusion / DNA Digivolve"); rows grow with the trigger count. */
.legend {
  position:absolute; right:30px; top:20px; width:560px;
  padding:12px 16px; z-index:7;
  border:1px solid rgba(255,255,255,.18); border-radius:18px;
  background:rgba(3,14,27,.82); backdrop-filter: blur(8px); box-shadow:0 16px 38px rgba(0,0,0,.30);
}
.legend-title { font-size:17px; font-weight:900; margin-bottom:8px; }
.legend-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px 14px; font-size:12.5px; color:#d7e8ff; }
.legend-grid div { white-space: nowrap; }
.swatch { display:inline-block; width:24px; height:4px; border-radius:99px; margin-right:7px; vertical-align:middle; box-shadow:0 0 10px currentColor; }

/* Column headers (set top per page) */
.columns {
  position:absolute; left:0; right:0; height:34px; z-index:1;
  color:#d6e9ff; font-size:12px; text-transform:uppercase; letter-spacing:1.3px; font-weight:800;
}
.columns div {
  position:absolute; width:204px; text-align:center;
  border-top:1px solid rgba(255,255,255,.22); padding-top:8px;
}

#edges { position:absolute; inset:0; z-index:2; pointer-events:none; }
#labels { position:absolute; inset:0; z-index:6; pointer-events:none; }

/* Node cards. Grid tokens: 204px wide, 198px min-height, 262px column pitch, 240px row pitch. */
.node {
  position:absolute; width:204px; min-height:198px; padding:10px; z-index:4;
  background:linear-gradient(180deg, rgba(16,43,76,.98), rgba(7,19,36,.98));
  border:1px solid rgba(255,255,255,.18); border-radius:18px; box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition: transform .15s ease, filter .15s ease;
}
.node:hover, .partner-card:hover, .jogress-card:hover, .armor-card:hover { transform: translateY(-2px); filter: brightness(1.07); }
.node img { display:block; width:100%; height:86px; object-fit:contain; background:#fff; border-radius:12px; padding:5px; margin-bottom:9px; }
.name { font-size:15px; line-height:1.08; font-weight:900; letter-spacing:-.2px; margin-bottom:6px; }
.level { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:900; background:rgba(88,166,255,.18); color:#cfe6ff; }
.note { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.25; }
.node.dna .level { background:rgba(176,132,245,.22); color:#eadcff; }
.node.mode .level { background:rgba(32,201,151,.18); color:#bff7e5; }
.node.dark .level { background:rgba(255,92,114,.18); color:#ffd1d7; }
.node.x .level { background:rgba(139,212,80,.18); color:#dbffc8; }
.node.lateral .level { background:rgba(245,165,36,.18); color:#ffe1a4; }
.node.bond .level { background:rgba(255,126,182,.20); color:#ffd6ea; }
.node.burst .level { background:rgba(255,212,59,.18); color:#fff0b8; }
.node.lore .level { background:rgba(138,151,173,.20); color:#d9e0ea; }

/* Cross-page navigation arrow (node option `nav`): a round button to the right of a
   card that jumps to another infographic page, while the card itself links to the wiki.
   Placed by the engine at the card's right edge, vertically centered on the 198px card. */
.node-nav {
  position:absolute; z-index:5; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#cfe6ff;
  background:rgba(3,14,27,.85); border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.40);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.node-nav svg { display:block; }
.node-nav:hover { transform:translateX(3px); border-color:var(--normal); background:rgba(88,166,255,.20); }

/* Category badges (top-right of a card): .rk = Royal Knight, .lw = Legendary Warrior,
   .fgd = Four Great Dragons, .vw = Witchelny Vortex Warrior */
.rk, .lw, .fgd, .vw {
  position:absolute; top:9px; right:9px; z-index:5;
  padding:2px 8px 2px 6px; border-radius:999px;
  font-size:9px; font-weight:900; letter-spacing:.2px;
  box-shadow:0 3px 10px rgba(0,0,0,.42);
  text-transform:uppercase; white-space:nowrap;
}
.rk { background:linear-gradient(180deg, #ffe9a8, #e3ac33); color:#3a2905; border:1px solid rgba(255,241,205,.95); }
.rk::before { content:"\265E"; margin-right:3px; font-size:11px; }
.lw { background:linear-gradient(180deg, #e4d2ff, #7c4dd6); color:#26124f; border:1px solid rgba(232,219,255,.95); }
.lw::before { content:"\2605"; margin-right:3px; font-size:10px; }
.fgd { background:linear-gradient(180deg, #ffb37a, #c23b22); color:#2a0a03; border:1px solid rgba(255,214,190,.95); }
.fgd::before { content:"\1F409"; margin-right:3px; font-size:10px; }
.vw { background:linear-gradient(180deg, #cdb8ff, #5b3aa8); color:#160a33; border:1px solid rgba(226,216,255,.95); }
.vw::before { content:"\2748"; margin-right:3px; font-size:10px; }

/* Edge labels */
.edge-label {
  position:absolute; transform:translate(-50%, -50%); z-index:6; padding:3px 8px; border-radius:999px;
  background:rgba(3,14,27,.86); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:900; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.label-normal { color:#b7d9ff; } .label-x { color:#dbffc8; } .label-dna { color:#eadcff; }
.label-mode { color:#bff7e5; } .label-dark { color:#ffd1d7; } .label-lateral { color:#ffe1a4; }
.label-armor { color:#ffe1a4; } .label-bond { color:#ffd6ea; } .label-burst { color:#fff0b8; }
.label-lore { color:#c2ccd9; }

/* ---------- Bottom appendix panels (set top/width per page; height auto-sizes to
   content, so the gap below the last card equals the panel's 22px bottom padding) ---------- */
/* Jogress / partner panel (purple) */
.partner-panel, .jogress-panel {
  position:absolute; left:24px; z-index:4;
  padding:22px; border-radius:24px; border:1px solid rgba(176,132,245,.42);
  background:linear-gradient(180deg, rgba(48,32,74,.68), rgba(16,24,36,.94));
  box-shadow:0 20px 56px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.05);
}
.partner-panel-title, .jogress-panel-title { margin-bottom:14px; }
.partner-panel-title h2, .jogress-panel-title h2 { margin:0; font-size:22px; letter-spacing:-.4px; }
.partner-panel-title span, .jogress-panel-title span { display:block; margin-top:3px; color:#eadcff; font-weight:800; font-size:13px; }
.partner-grid, .jogress-body { display:flex; gap:16px; }
.partner-card, .jogress-card {
  position:relative; width:204px; min-height:228px; padding:12px; border-radius:16px; border:1px solid rgba(176,132,245,.36);
  background:linear-gradient(180deg, rgba(40,30,66,.96), rgba(7,18,32,.98)); box-shadow:0 12px 28px rgba(0,0,0,.26);
  transition: transform .15s ease, filter .15s ease;
}
.partner-card img, .jogress-card img { width:100%; height:96px; object-fit:contain; background:#fff; border-radius:11px; padding:5px; display:block; margin-bottom:8px; }
.partner-name, .jogress-name { font-size:15px; line-height:1.05; font-weight:950; margin-bottom:5px; }
.partner-level, .jogress-level { display:inline-block; padding:3px 7px; border-radius:999px; background:rgba(176,132,245,.24); color:#eadcff; font-size:10px; font-weight:900; margin-bottom:6px; }
.partner-fuse, .jogress-fuse { color:#cbb6ff; font-size:11.5px; line-height:1.25; font-weight:800; }

/* Armor panel (amber) */
.armor-panel {
  position:absolute; left:24px; z-index:4;
  padding:20px 22px 22px; border-radius:24px; border:1px solid rgba(245,165,36,.42);
  background:linear-gradient(180deg, rgba(74,49,16,.68), rgba(16,24,36,.94));
  box-shadow:0 20px 56px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.05);
}
.armor-panel-title { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.armor-panel-title h2 { margin:0; font-size:26px; letter-spacing:-.45px; }
.armor-panel-title span { color:#ffe1a4; font-weight:800; font-size:14px; }
.armor-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; }
.armor-card {
  position:relative;
  min-height:190px; padding:10px 10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(17,43,70,.98), rgba(7,18,32,.98)); box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.armor-card img { width:100%; height:72px; object-fit:contain; background:#fff; border-radius:11px; padding:5px; display:block; margin-bottom:8px; }
.armor-name { font-size:14px; line-height:1.05; font-weight:950; margin-bottom:5px; }
.armor-level { display:inline-block; padding:3px 7px; border-radius:999px; background:rgba(245,165,36,.22); color:#ffe1a4; font-size:10px; font-weight:900; margin-bottom:5px; }
.armor-egg { color:#ffd28a; font-size:10px; line-height:1.2; font-weight:800; }
.armor-card.x-card { border-color: rgba(139,212,80,.52); background:linear-gradient(180deg, rgba(24,58,28,.96), rgba(7,18,32,.98)); }
.armor-card.x-card .armor-level { background:rgba(139,212,80,.22); color:#dbffc8; }

.footer { position:absolute; left:32px; right:32px; bottom:16px; color:rgba(225,238,255,.72); font-size:12px; line-height:1.35; z-index:6; }