/* =====================================================================
   KH III menu layer
   Loads after style.css. Keeps the night-sky theme and swaps the chrome
   for Kingdom Hearts III style menus: dark frosted glass with thin
   cyan-white edges, slanted corners, diagonal accent lines, a cyan glow
   on the selected item, and slim slanted header bars.
   Remove the <link> to this file to get the plain night theme back.
   ===================================================================== */
:root {
  --font-menu: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --k3-cyan: #7fe6ff;
  --k3-cyan-2: #3fc3f5;
  --k3-blue: #2a63d8;
  --k3-glass: linear-gradient(180deg, rgba(18, 30, 78, 0.78), rgba(6, 12, 40, 0.86));
  --k3-glass-hi: linear-gradient(180deg, rgba(36, 60, 130, 0.85), rgba(12, 24, 70, 0.9));
  --k3-edge: rgba(180, 225, 255, 0.55);
  --k3-edge-soft: rgba(140, 190, 255, 0.28);
  --k3-glow: 0 0 16px rgba(127, 230, 255, 0.45), inset 0 0 12px rgba(127, 230, 255, 0.12);
  /* KH III command-menu silhouette: rectangle with the top-left and bottom-right corners rounded */
  --k3-shape: 16px 0 16px 0;
  --k3-shape-sm: 12px 0 12px 0;
  --k3-shape-xs: 9px 0 9px 0;
  --k3-topline: linear-gradient(90deg, #fff, var(--k3-cyan) 45%, rgba(127, 230, 255, 0.15));
  --k3-stripes: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 9px);
}

/* ---------- top bar: dark glass with a cyan light line ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(8, 14, 44, 0.94), rgba(6, 10, 34, 0.8));
  border-bottom: 1px solid var(--k3-edge);
  box-shadow: 0 1px 0 rgba(127, 230, 255, 0.25), 0 0 24px rgba(63, 195, 245, 0.18), 0 6px 20px rgba(0, 0, 0, 0.5);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--k3-cyan) 30%, #fff 50%, var(--k3-cyan) 70%, transparent); opacity: .8; }
.brand-text b { font-family: var(--font-menu); font-weight: 800; letter-spacing: .14em; color: #fff; text-shadow: 0 0 12px rgba(127, 230, 255, 0.6); }
.brand-text small { color: var(--k3-cyan); }
.brand-icon { color: #fff; filter: drop-shadow(0 0 8px rgba(127, 230, 255, 0.8)); }
.icon-btn { color: #cfe6ff; border-radius: var(--k3-shape-xs); }
.icon-btn:hover { color: #fff; border-color: var(--k3-edge); background: rgba(127, 230, 255, 0.1); box-shadow: var(--k3-glow); }
.icon-btn[aria-pressed="true"] { color: var(--k3-cyan); border-color: var(--k3-cyan-2); box-shadow: var(--k3-glow); }

/* ---------- side nav: glass command list ---------- */
.sidenav { gap: 5px; }
.nav-link {
  font-family: var(--font-menu); font-weight: 800; font-size: .8rem; letter-spacing: .12em; padding: 9px 14px 9px 16px; overflow: hidden;
  background: var(--k3-glass); border: 1px solid var(--k3-edge-soft); color: #dbe9ff; border-radius: var(--k3-shape-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: all .18s var(--ease);
}
.nav-link::after { content: ""; position: absolute; inset: 0; background: var(--k3-stripes); opacity: .35; pointer-events: none; mask: linear-gradient(90deg, transparent 55%, #000); -webkit-mask: linear-gradient(90deg, transparent 55%, #000); }
.nav-link .nav-ico { opacity: 1; width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(127, 230, 255, 0.5)); }
.nav-link .nav-count { opacity: 1; font-weight: 700; font-size: .66rem; color: var(--k3-cyan); background: rgba(0, 0, 0, 0.35); padding: 1px 8px; border-radius: 3px; border: 1px solid var(--k3-edge-soft); }
.nav-link:hover { color: #fff; background: var(--k3-glass-hi); border-color: var(--k3-edge); transform: translateX(3px); box-shadow: var(--k3-glow); }
.nav-link.active {
  color: #fff; background: linear-gradient(90deg, rgba(127, 230, 255, 0.35), rgba(42, 99, 216, 0.25) 60%, rgba(12, 24, 70, 0.9));
  border-color: var(--k3-cyan); box-shadow: 0 0 18px rgba(127, 230, 255, 0.55), inset 0 0 18px rgba(127, 230, 255, 0.18); transform: translateX(5px);
  text-shadow: 0 0 10px rgba(127, 230, 255, 0.9);
}
.nav-link.active .nav-ico { color: #fff !important; filter: drop-shadow(0 0 8px #7fe6ff); }
.nav-link.active .nav-count { color: #06123f; background: var(--k3-cyan); border-color: #fff; }
.nav-link { overflow: hidden; }
.nav-link.active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--k3-topline); box-shadow: 0 0 10px var(--k3-cyan); }
.nav-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--k3-cyan), transparent); opacity: .55; margin: 8px 4px; }

/* ---------- panels: glass edge and diagonal accent ---------- */
.panel { border: 1px solid var(--k3-edge-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.4), var(--shadow); }
.panel::before { background: linear-gradient(135deg, rgba(127, 230, 255, 0.08), transparent 35%); }
.panel::after { content: ""; position: absolute; top: 0; right: 0; width: 160px; height: 100%; pointer-events: none; border-radius: inherit;
  background: var(--k3-stripes); opacity: .5; mask: linear-gradient(90deg, transparent, #000); -webkit-mask: linear-gradient(90deg, transparent, #000); }

/* ---------- section titles and group headings: slanted header bars ---------- */
.section-head h2 {
  display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-menu); font-weight: 800; font-size: clamp(1.2rem, 2.5vw, 1.65rem); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding: 8px 40px 8px 22px; background: linear-gradient(90deg, rgba(127, 230, 255, 0.28), rgba(42, 99, 216, 0.22) 55%, rgba(12, 24, 70, 0.6)); border: 1px solid var(--k3-edge);
  border-radius: var(--k3-shape); text-shadow: 0 0 14px rgba(127, 230, 255, 0.7); box-shadow: var(--k3-glow); position: relative;
}
.section-head h2 { overflow: hidden; }
.section-head h2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--k3-topline); box-shadow: 0 0 10px var(--k3-cyan); }
.section-head p { margin-top: 10px; }
.eyebrow { font-family: var(--font-menu); font-weight: 800; color: var(--k3-cyan); }
.group-h {
  display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-menu); font-weight: 800; font-size: .8rem; letter-spacing: .18em; color: #fff; padding: 9px 34px 8px 20px; border-bottom: 0; margin: 4px 0 16px;
  background: linear-gradient(90deg, rgba(127, 230, 255, 0.22), rgba(12, 24, 70, 0.6)); border: 1px solid var(--k3-edge-soft); border-radius: var(--k3-shape-sm); position: relative;
}
.group-h { overflow: hidden; }
.group-h::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--k3-topline); box-shadow: 0 0 10px var(--k3-cyan); }
.group-h small, .section-head > span { display: none; }   /* entry counts hidden in titles */
.section-head h2 .title-ico { width: 1.25em; height: 1.25em; filter: drop-shadow(0 0 8px rgba(127, 230, 255, 0.7)); }
.group-h .title-ico { width: 1.4em; height: 1.4em; filter: drop-shadow(0 0 6px rgba(127, 230, 255, 0.6)); }
.group .card-grid { clear: both; }
h3.sub-h { font-family: var(--font-menu); font-weight: 800; color: var(--k3-cyan); letter-spacing: .22em; padding-left: 10px; border-left: 3px solid var(--k3-cyan); line-height: 1.1; }

/* ---------- buttons and chips: slanted glass ---------- */
.btn {
  font-family: var(--font-menu); font-weight: 800; font-size: .74rem; letter-spacing: .14em; padding: 8px 18px; border-radius: var(--k3-shape-sm);
  background: var(--k3-glass-hi); border: 1px solid var(--k3-edge); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn:hover { background: linear-gradient(90deg, rgba(127, 230, 255, 0.35), rgba(42, 99, 216, 0.3)); box-shadow: var(--k3-glow); color: #fff; transform: none; text-shadow: 0 0 10px rgba(127, 230, 255, 0.8); }
.btn.ghost { background: var(--k3-glass); border-color: var(--k3-edge-soft); color: #cfe6ff; }
.btn.ghost:hover { border-color: var(--k3-cyan); color: #fff; }
.chip { font-family: var(--font-menu); font-weight: 700; font-size: .74rem; letter-spacing: .06em; padding: 4px 14px; border-radius: var(--k3-shape-xs);
  border: 1px solid var(--k3-edge-soft); background: var(--k3-glass); color: #cfe6ff; }
.chip:hover { color: #fff; border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }
.chip.active { color: #06123f; background: linear-gradient(180deg, #fff, var(--k3-cyan) 70%); border-color: #fff; font-weight: 800; box-shadow: 0 0 16px rgba(127, 230, 255, 0.6); }
.chip.status-confirmed.active, .chip.status-reported.active, .chip.status-implied.active, .chip.status-speculated.active, .chip.status-expected.active { color: #06123f; border-color: #fff; }
.chip.status-confirmed.active { background: linear-gradient(180deg, #d8ffe9, var(--c-confirmed) 70%); }
.chip.status-reported.active, .chip.status-implied.active { background: linear-gradient(180deg, #e6f7ff, var(--c-reported) 70%); }
.chip.status-speculated.active { background: linear-gradient(180deg, #f1e6ff, var(--c-speculated) 70%); }
.chip.status-expected.active { background: linear-gradient(180deg, #fff6d8, var(--c-expected) 70%); }
.chip-sep { width: 1px; background: var(--k3-edge-soft); }
.filter-input { border-radius: 3px; border: 1px solid var(--k3-edge-soft); border-radius: var(--k3-shape-xs); background: rgba(0, 0, 0, 0.35); }
.filter-input:focus { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }

/* ---------- cards, tiles, tier heads, tags, gallery, toast ---------- */
.card { border-color: var(--k3-edge-soft); border-radius: 6px; }
.card:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow), var(--shadow); }
.card-body h3 { font-family: var(--font-menu); font-weight: 800; letter-spacing: .04em; }
.tile { border-radius: var(--k3-shape); border-color: var(--k3-edge-soft); }
.tile:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }
.tile h3 { font-family: var(--font-menu); font-weight: 800; letter-spacing: .12em; }
.tile .nav-count { color: var(--k3-cyan); }
.tier-head { border-radius: var(--k3-shape-sm); background: var(--k3-glass-hi); border: 1px solid var(--k3-edge-soft); }
.tier-head b { font-family: var(--font-menu); font-weight: 800; letter-spacing: .06em; }
.tier-head:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); transform: translateX(3px); }
.tier-cell, .tier-detail-cell { border-radius: 4px; }
.tier-cell:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }
.tag { border-radius: var(--k3-shape-xs); padding: 3px 12px; }
a.tag-link { background: linear-gradient(90deg, rgba(127, 230, 255, 0.25), rgba(42, 99, 216, 0.2)); border-color: var(--k3-edge); color: #fff; }
a.tag-link::before { content: "\25B8  "; opacity: .85; font-size: .8em; color: var(--k3-cyan); }
a.tag-link:hover { box-shadow: var(--k3-glow); }
.tagged-links a { border-radius: var(--k3-shape-xs); }
.gal-btn { border-radius: var(--k3-shape-sm); background: var(--k3-glass-hi); border: 1px solid var(--k3-edge); color: #fff; }
.gal-btn:hover:not(:disabled) { box-shadow: var(--k3-glow); background: linear-gradient(90deg, rgba(127, 230, 255, 0.35), rgba(42, 99, 216, 0.3)); }
.detail-art, .gallery .detail-art { border-radius: 6px; border: 1px solid var(--k3-edge); box-shadow: var(--k3-glow); }
.detail-head h2 { font-family: var(--font-menu); font-weight: 800; letter-spacing: .04em; text-shadow: 0 0 18px rgba(127, 230, 255, 0.45); }
.detail-head .sub { color: var(--k3-cyan); }
.detail-summary { border-left-color: var(--k3-cyan); }
.facts li { border-radius: var(--k3-shape-xs); border-color: var(--k3-edge-soft); }
.facts li b { color: var(--k3-cyan); }
.source-list a, .related a { border-radius: var(--k3-shape-sm); }
.source-list a:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }
.toast { font-family: var(--font-menu); font-weight: 800; border-radius: var(--k3-shape-sm); background: var(--k3-glass-hi); border: 1px solid var(--k3-cyan); color: #fff; box-shadow: var(--k3-glow); }
.hero-tag { font-family: var(--font-menu); font-weight: 800; border-radius: var(--k3-shape-sm); background: var(--k3-glass-hi); border: 1px solid var(--k3-edge); color: #fff; }
.hero-tag .dot { background: var(--k3-cyan); box-shadow: 0 0 10px var(--k3-cyan); }
.splash-enter { display: inline-block; font-family: var(--font-menu); font-weight: 800; padding: 9px 30px; border-radius: var(--k3-shape-sm); background: var(--k3-glass-hi); border: 1px solid var(--k3-cyan); color: #fff; box-shadow: var(--k3-glow); }
@keyframes pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.timeline { border-left-color: var(--k3-edge); }
.timeline li::before { background: var(--k3-cyan); box-shadow: 0 0 10px var(--k3-cyan); }
.timeline time { color: var(--k3-cyan); }

/* ---------- search overlay ---------- */
.search-box { border-radius: var(--k3-shape); border-color: var(--k3-edge); box-shadow: var(--shadow), var(--k3-glow); }
#search-input { border-radius: var(--k3-shape-sm); }
.search-results a { border-radius: var(--k3-shape-xs); }
.search-results a:hover, .search-results a.selected { background: linear-gradient(90deg, rgba(127, 230, 255, 0.28), rgba(42, 99, 216, 0.2)); border-color: var(--k3-cyan); }
.search-results .cat { color: var(--k3-cyan); }

.mini-tile { border-radius: var(--k3-shape-xs); }
.mini-tile:hover { border-color: var(--k3-cyan); box-shadow: var(--k3-glow); }
.mini-tile b { font-family: var(--font-menu); font-weight: 800; }

h4.body-h { font-family: var(--font-menu); font-weight: 800; color: var(--k3-cyan); border-bottom-color: var(--k3-edge-soft); }

/* ---------- build ability cards ---------- */
.build-ability { border-radius: var(--k3-shape-xs); background: var(--k3-glass); border-color: var(--k3-edge-soft); }
.build-ability b { font-family: var(--font-menu); font-weight: 800; color: #fff; border-right-color: var(--k3-edge-soft); text-shadow: 0 0 10px rgba(127, 230, 255, 0.5); }

/* ---------- editor: same chrome ---------- */
.ed-card { border-radius: 3px; }
.ed-card.active { background: linear-gradient(90deg, rgba(127, 230, 255, 0.28), rgba(42, 99, 216, 0.15)); border-color: var(--k3-cyan); color: #fff; }
.ed-group-h { font-family: var(--font-menu); font-weight: 800; color: var(--k3-cyan); }