@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:         #0c0c0e;
  --bg2:        #111116;
  --bg3:        #18181f;
  --card:       #141418;
  --card-hover: #1c1c24;
  --border:     #242430;
  --border-hi:  #3a3a50;
  --gold:       #FFD700;
  --gold2:      #e6c000;
  --gold-dim:   #9a7e00;
  --gold-glow:  rgba(255,215,0,0.12);
  --red:        #E8192C;
  --red-dim:    #9a1020;
  --text:       #f0f0f0;
  --text-muted: #888899;
  --text-dim:   #44445a;
  --font-logo:  'Pirata One', cursive;
  --font-hero:  'Bebas Neue', sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;
  --radius:     8px;
  --radius-lg:  14px;
  --nav-h:      62px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { opacity: 1; }

/* ── CUSTOM SCROLLBARS ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
::-webkit-scrollbar-corner { background: transparent; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; font-size: 15px; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }
main { flex: 1; }

/* ── NAVBAR ── */
.navbar {
  position: sticky; top: 0; z-index: 500;
  height: var(--nav-h);
  background: rgba(12,12,14,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
}
.navbar-brand {
  display: flex; align-items: center; flex-shrink: 0;
}
.navbar-logo {
  height: 35px; width: auto; display: block;
  margin-top: 4px;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.35));
}

/* ── MOBILE SIDEBAR (More drawer) ── */
.navbar-links {
  position: fixed;
  top: var(--nav-h); left: 0;
  width: 270px; height: calc(100vh - var(--nav-h));
  background: var(--bg2);
  display: flex; flex-direction: column;
  padding: 8px 0 32px; gap: 0;
  z-index: 450;
  border-right: 1px solid var(--border);
  box-shadow: 6px 0 40px rgba(0,0,0,.55);
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.3s;
  will-change: transform;
}
.navbar-links.open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
.nav-link {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 22px; font-size: 14px; font-weight: 500;
  color: var(--text-muted); transition: color 0.15s, background 0.15s;
  border-left: 3px solid transparent; white-space: nowrap;
}
.nav-link i { width: 16px; text-align: center; flex-shrink: 0; opacity: 0.75; transition: opacity 0.15s; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.04); border-left-color: var(--border-hi); }
.nav-link:hover i { opacity: 1; }
.nav-link.active { color: var(--gold); border-left-color: var(--gold); background: rgba(255,215,0,.07); font-weight: 600; }
.nav-link.active i { opacity: 1; }
.nav-sidebar-sep { margin: 8px 22px; border: none; border-top: 1px solid var(--border); }

/* ── DESKTOP INLINE NAV ── */
.nav-desktop {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.nav-desktop .nav-link {
  padding: 7px 12px; border-left: none; border-bottom: none;
  border-radius: 7px; gap: 7px; font-weight: 500; line-height: 1;
}
.nav-desktop .nav-link:hover { border-left: none; background: rgba(255,255,255,.05); }
.nav-desktop .nav-link.active { border-left: none; font-weight: 500; background: rgba(255,215,0,.07); box-shadow: inset 0 -2px 0 var(--gold); }

/* Explore dropdown */
.nav-explore-wrap { position: relative; }
.nav-explore-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-family: var(--font-body);
  font-size: 14px; font-weight: 500; line-height: 1; border-radius: 7px;
  transition: color 0.15s, background 0.15s;
}
.nav-explore-btn:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-explore-btn.explore-active { color: var(--gold); }
.nav-explore-btn .fa-chevron-down { font-size: 10px; transition: transform 0.2s; }
.nav-explore-btn.open .fa-chevron-down { transform: rotate(180deg); }
.nav-explore-drop {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 6px 0; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55); z-index: 300;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s;
}
.nav-explore-drop.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-drop-link {
  display: block; padding: 10px 18px; font-size: 13px;
  color: var(--text-muted); transition: color 0.15s, background 0.15s;
}
.nav-drop-link:hover { color: var(--text); background: var(--bg3); }
.nav-drop-link.active { color: var(--gold); background: rgba(255,215,0,.06); }

/* Play button */
.nav-play-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 16px; margin-left: 6px;
  background: rgba(255,215,0,0.08); border: 1px solid var(--gold-dim);
  border-radius: 20px; color: var(--gold); font-size: 13px; font-weight: 600; line-height: 1;
  flex-shrink: 0; transition: background 0.2s, border-color 0.2s;
}
.nav-play-btn:hover { background: rgba(255,215,0,.16); border-color: var(--gold); }
.nav-play-btn.active { background: rgba(255,215,0,.14); border-color: var(--gold); }

/* Story mode pushed to right end of topbar */
.story-mode-widget { margin-left: auto; }

/* ── BOTTOM NAV (Mobile only) ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 450;
  background: rgba(12,12,14,0.96); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: none;
  grid-template-columns: repeat(5, 1fr); height: 58px;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(58px + env(safe-area-inset-bottom));
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px; min-width: 0;
  color: var(--text-dim); font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; background: none; border: none; cursor: pointer;
  transition: color 0.15s; text-decoration: none; font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item i { font-size: 18px; line-height: 1; }
.bottom-nav-item span { line-height: 1; }
.bottom-nav-item:hover { color: var(--text-muted); }
.bottom-nav-item.active { color: var(--gold); }
.bottom-nav-item.active i { filter: drop-shadow(0 0 5px rgba(255,215,0,.5)); }
.bottom-nav-play { color: var(--gold-dim); }
.bottom-nav-play:hover, .bottom-nav-play.active { color: var(--gold); }

/* Backdrop */
.nav-backdrop {
  position: fixed; inset: 0; top: var(--nav-h);
  background: rgba(0,0,0,.55); z-index: 400;
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── MOBILE SEARCH TRIGGER (navbar icon, mobile-only) ── */
.nav-mobile-search-btn {
  display: none;
  background: none; border: none; border-radius: 8px;
  width: 36px; height: 36px; flex-shrink: 0;
  color: var(--text-muted); font-size: 15px;
  align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile-search-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ── MOBILE SEARCH FULL-SCREEN OVERLAY ── */
.mobile-search-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.mobile-search-overlay.open { transform: translateY(0); }

.mobile-search-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; flex-shrink: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
}
.mobile-search-back {
  background: none; border: none;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  color: var(--text-muted); font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-search-back:hover { color: var(--text); background: rgba(255,255,255,.07); }

.mobile-search-field {
  flex: 1; position: relative; display: flex; align-items: center;
}
.mobile-search-field > i {
  position: absolute; left: 14px; color: var(--text-dim); font-size: 14px; pointer-events: none;
}
.mobile-search-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 24px; padding: 11px 42px 11px 40px;
  color: var(--text); font-size: 16px; font-family: var(--font-body);
  outline: none; transition: border-color .2s;
  -webkit-appearance: none;
}
.mobile-search-input:focus { border-color: var(--gold-dim); }

.mobile-search-clear {
  position: absolute; right: 8px;
  background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  width: 26px; height: 26px; flex-shrink: 0;
  align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 11px;
  cursor: pointer; display: none; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-search-clear:hover { background: rgba(255,255,255,.18); }

.mobile-search-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.mobile-search-hint,
.mobile-search-no-results {
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 24px 40px; color: var(--text-dim); text-align: center; gap: 14px;
}
.mobile-search-hint i,
.mobile-search-no-results i { font-size: 40px; opacity: .18; }
.mobile-search-hint p,
.mobile-search-no-results p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.mobile-search-no-results strong { color: var(--text); font-weight: 500; }

.mobile-search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; min-height: 64px;
  text-decoration: none; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-search-result:active { background: var(--bg2); }

.mobile-search-avatar-wrap {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; border: 1px solid var(--border); background: var(--bg3);
}
.mobile-search-avatar { width: 100%; height: 100%; display: block; }

.mobile-search-info { flex: 1; min-width: 0; }
.mobile-search-name { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-search-alias { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-search-arrow { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }

/* ── NAV SEARCH ── */
.nav-search { position: relative; }
.nav-search-input {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); font-size: 13px; padding: 6px 14px; width: 200px;
  outline: none; transition: border-color .2s, width .2s;
}
.nav-search-input:focus { border-color: var(--gold-dim); width: 260px; }
.nav-search-input::placeholder { color: var(--text-dim); }
.nav-search-results {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  min-width: 280px; overflow: hidden; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-search-results.open { display: block; }
.nav-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; transition: background .15s; cursor: pointer;
}
.nav-search-item:hover, .nav-search-item.active { background: var(--bg3); }
.nav-search-avatar-wrap { display: inline-flex; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }
.nav-search-avatar { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nav-search-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.nav-search-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-alias { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── HERO (Home) ── */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  filter: blur(4px) brightness(0.25);
  transform: scale(1.06);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,12,14,0.98) 35%, rgba(12,12,14,0.6) 65%, rgba(12,12,14,0.15) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 0 auto; padding: 60px 40px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px;
  width: 100%;
}
.hero-content { max-width: 560px; }
.hero-eyebrow {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-dim); }
.hero-title {
  font-family: var(--font-hero); font-size: clamp(48px, 7vw, 90px);
  line-height: 0.95; color: var(--gold); letter-spacing: 1px;
  text-shadow: 0 0 60px rgba(255,215,0,0.25); margin-bottom: 18px;
}
.hero-logo-wrap { margin: 0 0 18px; line-height: 1; }
.hero-logo-img {
  height: clamp(91px, 13.3vw, 171px); width: auto; display: block;
  filter: drop-shadow(0 0 30px rgba(255,215,0,0.3));
}
.hero-sub {
  font-size: 16px; color: var(--text-muted); font-weight: 300;
  margin-bottom: 36px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-portrait {
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-hi);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.08);
  flex-shrink: 0;
  cursor: pointer;
  display: block;
  opacity: 0;
  transition: box-shadow 0.3s ease, transform 0.08s ease;
  transform-style: preserve-3d;
  will-change: transform;
  will-change: transform;
}
.hero-portrait.appeared {
  animation: card-appear 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-portrait:hover {
  box-shadow: 0 32px 100px rgba(0,0,0,0.85), 0 0 0 2px rgba(255,215,0,0.5), 0 0 60px rgba(255,215,0,0.15);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

@keyframes card-appear {
  0%   { opacity: 0; transform: perspective(800px) translateX(60px) translateY(20px) rotateY(-8deg) scale(0.93); }
  65%  { opacity: 1; transform: perspective(800px) translateX(-5px) translateY(0px) rotateY(1deg) scale(1.01); }
  100% { opacity: 1; transform: perspective(800px) translateX(0) translateY(0) rotateY(0deg) scale(1); }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer; transition: all 0.2s; border: none; font-family: var(--font-body);
}
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,215,0,0.25); }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid rgba(255,215,0,0.4); }
.btn-outline:hover { background: var(--gold-glow); border-color: var(--gold); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #ff2a3e; transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ── STATS BAR ── */
.stats-bar {
  display: flex; justify-content: center;
  background: var(--bg2); border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.stat-item { padding: 22px 44px; text-align: center; border-right: 1px solid var(--border); text-decoration: none; transition: background .15s; }
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,215,0,.05); }
.stat-number { font-family: var(--font-hero); font-size: 38px; color: var(--gold); line-height: 1; }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px; }

/* ── SECTION ── */
.section { padding: 60px 32px; max-width: 1300px; margin: 0 auto; width: 100%; }
.section-title {
  font-family: var(--font-hero); font-size: 28px; letter-spacing: 1px; line-height: 1;
  color: var(--text); margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-title span:not(.jr-icon) { color: var(--text-muted); font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0; }

/* ── EXPLORE CARDS ── */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.explore-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 22px; text-align: center;
  transition: all 0.25s; cursor: pointer;
}
.explore-card:hover { border-color: var(--gold-dim); background: var(--card-hover); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(255,215,0,0.1); }
.explore-icon { font-size: 38px; margin-bottom: 12px; }
.explore-title { font-family: var(--font-hero); font-size: 20px; letter-spacing: 1px; color: var(--text); margin-bottom: 4px; }
.explore-sub { font-size: 12px; color: var(--text-muted); }

/* ── SECTION HEADER (title + see-all link) ── */
.section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.section-header .section-title { margin-bottom: 0; flex: 1; }
.section-header .section-title::after { display: none; }
.section-link {
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
  transition: color 0.15s; flex-shrink: 0;
}
.section-link:hover { color: var(--gold); }
.section-title-sub { color: var(--text-muted); font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 8px; }

/* ── FACTION BROWSE ── */
.faction-browse-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.faction-browse-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-align: center; cursor: pointer;
  transition: all 0.2s; font-size: 12px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.3px;
}
.faction-browse-card i { font-size: 22px; }
.faction-browse-card .jr-icon { width: 26px; height: 26px; vertical-align: middle; }
.faction-browse-card > span:last-child { min-height: 2.8em; display: flex; align-items: center; text-align: center; }
.faction-browse-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.faction-browse-card.f-pirate     { border-color: rgba(232,25,44,.25); }
.faction-browse-card.f-pirate:hover { border-color: rgba(232,25,44,.5); color: #e8192c; }
.faction-browse-card.f-pirate i  { color: #e8192c; }
.faction-browse-card.f-pirate .jr-icon { color: #e8192c; }
.faction-browse-card.f-marines   { border-color: rgba(50,120,220,.25); }
.faction-browse-card.f-marines:hover { border-color: rgba(50,120,220,.5); color: #3278dc; }
.faction-browse-card.f-marines i { color: #3278dc; }
.faction-browse-card.f-world-gov { border-color: rgba(180,80,220,.25); }
.faction-browse-card.f-world-gov:hover { border-color: rgba(180,80,220,.5); color: #b450dc; }
.faction-browse-card.f-world-gov i { color: #b450dc; }
.faction-browse-card.f-revolutionary { border-color: rgba(255,150,30,.25); }
.faction-browse-card.f-revolutionary:hover { border-color: rgba(255,150,30,.5); color: #ff961e; }
.faction-browse-card.f-revolutionary i { color: #ff961e; }
.faction-browse-card.f-royalty   { border-color: rgba(255,215,0,.25); }
.faction-browse-card.f-royalty:hover { border-color: rgba(255,215,0,.5); color: var(--gold); }
.faction-browse-card.f-royalty i { color: var(--gold); }
.faction-browse-card.f-celestial { border-color: rgba(255,215,0,.2); }
.faction-browse-card.f-celestial:hover { border-color: rgba(255,215,0,.4); color: var(--gold-dim); }
.faction-browse-card.f-celestial i { color: var(--gold-dim); }
.faction-browse-card.f-scientist { border-color: rgba(60,200,200,.25); }
.faction-browse-card.f-scientist:hover { border-color: rgba(60,200,200,.5); color: #3cc8c8; }
.faction-browse-card.f-scientist i { color: #3cc8c8; }
.faction-browse-card.f-fighter   { border-color: rgba(200,100,50,.25); }
.faction-browse-card.f-fighter:hover { border-color: rgba(200,100,50,.5); color: #c86432; }
.faction-browse-card.f-fighter i { color: #c86432; }
.faction-browse-card.f-islander  { border-color: rgba(100,200,100,.25); }
.faction-browse-card.f-islander:hover { border-color: rgba(100,200,100,.5); color: #64c864; }
.faction-browse-card.f-islander i { color: #64c864; }
.faction-browse-card.f-other     { border-color: var(--border); }
.faction-browse-card.f-other:hover { border-color: var(--border-hi); color: var(--text-muted); }

/* ── DEVIL FRUIT SPOTLIGHT ── */
.df-spotlight-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.df-spotlight-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all 0.2s; cursor: pointer; min-width: 0;
}
.df-spotlight-card:hover { border-color: var(--gold-dim); background: var(--card-hover); transform: translateY(-2px); }
.df-spotlight-info { flex: 1; min-width: 0; }
.df-spotlight-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-spotlight-jp { font-size: 11px; color: var(--text-muted); font-family: serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* ── POWER RANKING CTA ── */
.play-cta-card {
  display: flex; align-items: center; gap: 40px;
  background: linear-gradient(135deg, rgba(255,215,0,.06) 0%, rgba(255,215,0,.02) 100%);
  border: 1px solid rgba(255,215,0,.2); border-radius: var(--radius-lg);
  padding: 40px 48px; position: relative; overflow: hidden;
}
.play-cta-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,215,0,.08) 0%, transparent 70%);
}
.play-cta-left { position: relative; flex: 1; }
.play-cta-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.play-cta-title { font-family: var(--font-hero); font-size: 42px; letter-spacing: 2px; color: var(--gold); margin-bottom: 12px; }
.play-cta-sub { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px; max-width: 480px; }
.play-cta-icon { font-size: 80px; color: rgba(255,215,0,.15); position: relative; flex-shrink: 0; }
.play-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── FEATURED ROW ── */
.featured-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mini-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.2s; }
.mini-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,215,0,0.1); }
.mini-card-img { aspect-ratio: 1; overflow: hidden; background: var(--bg3); }
.mini-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mini-card-name { padding: 7px 8px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.3; }

/* ── FOOTER ── */
.footer { border-top: 1px solid var(--border); padding: 22px 32px; text-align: center; color: var(--text-dim); font-size: 12px; }
a.footer-feedback { color: var(--gold); font-weight: 600; opacity: 1; }
a.footer-feedback:hover { opacity: .75; }
body.map-page .footer { display: none; }
body.map-page { height: 100svh; }

/* ── CHARACTER FILTER BAR ── */
.char-filter-bar {
  background: rgba(12,12,14,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: var(--nav-h); z-index: 50;
}
.char-filter-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px 10px; max-width: 1400px; margin: 0 auto;
}
.char-search-wrap {
  flex: 1; position: relative; display: flex; align-items: center; min-width: 0;
}
.char-search-wrap > i {
  position: absolute; left: 13px; color: var(--text-dim); font-size: 13px; pointer-events: none;
}
.char-search-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 14px 9px 36px;
  color: var(--text); font-size: 14px; font-family: var(--font-body);
  transition: border-color 0.2s; outline: none;
}
.char-search-input::placeholder { color: var(--text-dim); }
.char-search-input:focus { border-color: var(--gold-dim); }
.char-more-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 14px; height: 37px;
  color: var(--text-muted); font-size: 13px; font-family: var(--font-body);
  cursor: pointer; transition: border-color .2s, color .2s; white-space: nowrap;
}
.char-more-btn:hover, .char-more-btn.open { border-color: var(--gold-dim); color: var(--text); }
.char-more-btn.has-active { border-color: var(--gold); color: var(--gold); }
.char-more-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #000; border-radius: 10px;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
}
.char-sort-select {
  flex-shrink: 0; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); height: 37px; padding: 0 36px 0 14px; color: var(--text);
  font-size: 13px; font-family: var(--font-body); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  outline: none; transition: border-color .2s;
}
.char-sort-select:focus { border-color: var(--gold-dim); }
.char-sort-select option { background: var(--bg2); }
/* Faction chips row */
.char-faction-row {
  display: flex; gap: 6px; padding: 0 24px 12px; max-width: 1400px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.char-faction-row::-webkit-scrollbar { display: none; }
.char-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 13px; color: var(--text-muted); font-size: 12px; font-family: var(--font-body);
  cursor: pointer; transition: all .15s; white-space: nowrap; user-select: none;
}
.char-chip i { font-size: 11px; }
.char-chip:hover { border-color: var(--gold-dim); color: var(--text); }
.char-chip.active { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.07); }
/* Faction chip hover */
.char-chip[data-fc="f-pirate"]:hover        { border-color: rgba(232,25,44,.5);   color: #e8192c; }
.char-chip[data-fc="f-marines"]:hover       { border-color: rgba(50,120,220,.5);  color: #3278dc; }
.char-chip[data-fc="f-world-gov"]:hover     { border-color: rgba(180,80,220,.5);  color: #b450dc; }
.char-chip[data-fc="f-revolutionary"]:hover { border-color: rgba(255,150,30,.5);  color: #ff961e; }
.char-chip[data-fc="f-royalty"]:hover       { border-color: rgba(255,215,0,.5);   color: var(--gold); }
.char-chip[data-fc="f-celestial"]:hover     { border-color: rgba(255,215,0,.35);  color: var(--gold-dim); }
.char-chip[data-fc="f-scientist"]:hover     { border-color: rgba(60,200,200,.5);  color: #3cc8c8; }
.char-chip[data-fc="f-fighter"]:hover       { border-color: rgba(200,100,50,.5);  color: #c86432; }
.char-chip[data-fc="f-islander"]:hover      { border-color: rgba(100,200,100,.5); color: #64c864; }
/* Faction chip active */
.char-chip[data-fc="f-pirate"].active        { border-color: rgba(232,25,44,.7);   color: #e8192c;        background: rgba(232,25,44,.1); }
.char-chip[data-fc="f-marines"].active       { border-color: rgba(50,120,220,.7);  color: #3278dc;        background: rgba(50,120,220,.1); }
.char-chip[data-fc="f-world-gov"].active     { border-color: rgba(180,80,220,.7);  color: #b450dc;        background: rgba(180,80,220,.1); }
.char-chip[data-fc="f-revolutionary"].active { border-color: rgba(255,150,30,.7);  color: #ff961e;        background: rgba(255,150,30,.1); }
.char-chip[data-fc="f-royalty"].active       { border-color: rgba(255,215,0,.7);   color: var(--gold);    background: rgba(255,215,0,.1); }
.char-chip[data-fc="f-celestial"].active     { border-color: rgba(255,215,0,.5);   color: var(--gold-dim); background: rgba(255,215,0,.07); }
.char-chip[data-fc="f-scientist"].active     { border-color: rgba(60,200,200,.7);  color: #3cc8c8;        background: rgba(60,200,200,.1); }
.char-chip[data-fc="f-fighter"].active       { border-color: rgba(200,100,50,.7);  color: #c86432;        background: rgba(200,100,50,.1); }
.char-chip[data-fc="f-islander"].active      { border-color: rgba(100,200,100,.7); color: #64c864;        background: rgba(100,200,100,.1); }
.char-chip[data-fc="f-other"].active         { border-color: var(--border-hi);     color: var(--text-muted); }
/* Advanced filter panel */
.char-filter-panel {
  display: none; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 24px 14px; border-top: 1px solid rgba(255,255,255,.05);
  max-width: 1400px; margin: 0 auto;
}
.char-filter-panel.open { display: flex; }
.char-panel-select {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); height: 37px; padding: 0 34px 0 14px; color: var(--text);
  font-size: 13px; font-family: var(--font-body); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  outline: none; transition: border-color .2s; flex-shrink: 0;
}
.char-panel-select:focus { border-color: var(--gold-dim); }
.char-panel-select.has-value { border-color: rgba(255,215,0,.4); }
.char-panel-select option { background: var(--bg2); }

/* ── Custom searchable select ───────────────────────────────────── */
.char-sel { position: relative; flex: 1; min-width: 0; }
.char-sel-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left;
  background-image: none;
  padding-right: 14px;
}
.char-sel-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-sel-chevron { font-size: 10px; color: #888; transition: transform .2s; flex-shrink: 0; }
.char-sel-btn[aria-expanded="true"] .char-sel-chevron { transform: rotate(180deg); }
.char-sel-drop {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  flex-direction: column;
}
.char-sel-drop.open { display: flex; }
.char-sel-search {
  border: none; border-bottom: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  padding: 9px 12px; font-size: 16px; outline: none; width: 100%;
  font-family: var(--font-body);
}
.char-sel-search::placeholder { color: var(--text-muted); }
.char-sel-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.char-sel-opt {
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-muted); text-align: left; padding: 9px 14px;
  cursor: pointer; font-size: 13px; font-family: var(--font-body);
  transition: background .15s, color .15s;
}
.char-sel-opt:last-child { border-bottom: none; }
.char-sel-opt:hover { background: rgba(255,255,255,.06); color: var(--text); }
.char-sel-opt.active { color: var(--gold); }

/* Vertical divider separating faction chips from independent filters */
.char-row-sep {
  width: 1px; flex-shrink: 0; align-self: stretch;
  background: var(--border); margin: 3px 2px;
}
.char-animal-chip { font-size: 12px; border-style: dashed; }
.char-animal-chip[data-state="1"]  { border-color: rgba(120,200,80,.6); border-style: solid; color: #8ccd5a; background: rgba(120,200,80,.1); }
.char-animal-chip[data-state="-1"] { border-color: rgba(220,80,90,.55); border-style: solid; color: #e07878; background: rgba(220,80,90,.10); }

/* ── RESULTS BAR ── */
.results-bar {
  max-width: 1400px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-muted);
}
.results-count strong { color: var(--text); }
.btn-clear {
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 12px; color: var(--text-muted); font-size: 12px; cursor: pointer;
  font-family: var(--font-body); transition: all 0.2s;
}
.btn-clear:hover { border-color: var(--gold-dim); color: var(--text); }

/* ── CHARACTER GRID ── */
.characters-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; padding: 18px 24px 48px;
  max-width: 1400px; margin: 0 auto;
}
.char-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer; position: relative;
}
.char-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(255,215,0,0.12), 0 4px 16px rgba(0,0,0,0.4);
  border-color: rgba(255,215,0,0.4);
  z-index: 1;
}
.char-card-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg3); }
.char-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.35s; }
.char-card:hover .char-card-img img { transform: scale(1.07); }
.char-card-rank {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.8); color: var(--gold-dim);
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}
.char-card-faction-dot {
  position: absolute; bottom: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
}
.char-card-name {
  padding: 8px 8px 9px; font-size: 10.5px; font-weight: 600;
  color: var(--text); text-align: center; line-height: 1.3;
}

/* ── PAGINATION ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 16px 24px 40px; flex-wrap: wrap; }
.page-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); color: var(--text-muted); font-size: 13px;
  cursor: pointer; font-family: var(--font-body); transition: all 0.2s;
}
.page-btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--text); }
.page-btn.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── CHARACTER DETAIL ── */
.detail-bg {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center top;
  filter: blur(60px) brightness(0.15) saturate(0.6);
  transform: scale(1.1);
}
.detail-page { max-width: 1100px; margin: 0 auto; padding: 32px 28px 80px; overflow: hidden; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; margin-bottom: 32px; transition: color 0.2s; }
.back-link:hover { color: var(--gold); }

.detail-org-symbol {
  position: fixed; right: -120px; top: 50%; transform: translateY(-50%);
  width: 580px; height: 580px;
  pointer-events: none; z-index: 0;
  opacity: 0.055;
}
.detail-org-symbol img { width: 100%; height: 100%; object-fit: contain; }
.detail-hero { display: flex; gap: 44px; align-items: flex-start; margin-bottom: 52px; flex-wrap: wrap; }
.detail-portrait {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  box-shadow: 0 20px 80px rgba(0,0,0,0.9);
}
.detail-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
.detail-info { flex: 1; min-width: 240px; padding-top: 8px; }
.detail-rank { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 10px; }
.detail-name { font-family: var(--font-hero); font-size: clamp(32px, 5vw, 56px); color: var(--gold); line-height: 1; margin-bottom: 15px; letter-spacing: 1px; }
.detail-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 10px; margin-top: 28px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 5px 14px; border-radius: 20px; font-size: 12px;
  font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid;
}
.tag.tag-former { opacity: 0.65; }
.tag-former-label { font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.8; margin-left: 2px; }
.arc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.arc-chip {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; transition: all 0.18s;
}
.arc-chip:hover { border-color: var(--gold-dim); color: var(--text); }
.arc-chip.arc-hidden { display: none; }
.arc-show-more {
  background: transparent; border: 1px dashed var(--border); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; color: var(--gold-dim);
  cursor: pointer; font-family: inherit; transition: all 0.18s;
}
.arc-show-more:hover { border-color: var(--gold-dim); color: var(--gold); }
.org-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.org-chip {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 14px; font-size: 12px; color: var(--text);
  cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 7px;
}
.org-chip:hover { border-color: var(--gold-dim); background: var(--card-hover); }
.org-chip.org-chip-former { opacity: 0.6; }
.org-chip-former-badge { font-size: 10px; font-weight: 400; color: var(--text-dim); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-left: 4px; letter-spacing: 0; }
.org-chip-symbol { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; opacity: 0.85; }

/* ── RELATED ── */
.related-section { border-top: 1px solid var(--border); padding-top: 44px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 16px; }

/* ── PAGE HEADER ── */
.page-header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 52px 32px 44px; text-align: center; }
.page-title { font-family: var(--font-logo); font-size: clamp(30px, 5vw, 52px); color: var(--gold); margin-bottom: 8px; }
.page-subtitle { color: var(--text-muted); font-size: 15px; }

/* ── ITEMS GRID (arcs/orgs) ── */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 32px 28px; max-width: 1400px; margin: 0 auto; }
.item-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  transition: all 0.2s; cursor: pointer; min-width: 0;
}
.item-card:hover { border-color: var(--gold-dim); background: var(--card-hover); transform: translateX(4px); box-shadow: -4px 0 0 var(--gold-dim), 0 4px 20px rgba(255,215,0,0.08); }
.item-icon { font-size: 22px; flex-shrink: 0; }
.org-symbol-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; opacity: 0.85; }
.related-org-symbol { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; opacity: 0.75; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-count { font-size: 12px; color: var(--text-muted); }
.item-arrow { color: var(--text-dim); font-size: 18px; flex-shrink: 0; transition: color 0.2s; }
.item-card:hover .item-arrow { color: var(--gold-dim); }

/* ── ORG SEARCH ── */
.search-bar-centered { max-width: 480px; margin: 28px auto 0; padding: 0 24px; }
.search-bar-centered input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; color: var(--text); font-size: 14px; font-family: var(--font-body); }
.search-bar-centered input:focus { outline: none; border-color: var(--gold-dim); }
.hidden { display: none !important; }

/* ── FACTION CARDS ── */
.faction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 32px 28px; max-width: 1300px; margin: 0 auto; }
.faction-card {
  border-radius: var(--radius-lg); padding: 30px 24px; text-align: center;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid transparent;
}
.faction-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.faction-icon { font-size: 44px; margin-bottom: 12px; }
.faction-name { font-family: var(--font-hero); font-size: 18px; letter-spacing: 1px; margin-bottom: 8px; }
.faction-count { font-size: 36px; font-weight: 700; margin-bottom: 2px; }
.faction-label { font-size: 11px; opacity: 0.65; }

/* ── FACTION COLORS ── */
.f-pirate         { background: rgba(100,0,0,0.5);   color: #FFD700; border-color: rgba(139,0,0,0.6); }
.f-pirate .jr-icon { color: #e8192c; }
.f-marines        { background: rgba(0,30,90,0.5);   color: #a0c4ff; border-color: rgba(0,50,130,0.6); }
.f-world-gov      { background: rgba(55,0,90,0.5);   color: #d4a0f7; border-color: rgba(80,0,140,0.6); }
.f-celestial      { background: rgba(70,50,0,0.5);   color: #FFD700; border-color: rgba(100,70,0,0.6); }
.f-revolutionary  { background: rgba(10,50,10,0.5);  color: #90EE90; border-color: rgba(20,80,20,0.6); }
.f-royalty        { background: rgba(65,30,0,0.5);   color: #FFD700; border-color: rgba(100,45,0,0.6); }
.f-scientist      { background: rgba(0,45,45,0.5);   color: #7fffcc; border-color: rgba(0,80,80,0.6); }
.f-fighter        { background: rgba(30,30,30,0.5);  color: #ccc;    border-color: rgba(60,60,60,0.6); }
.f-islander       { background: rgba(10,30,60,0.5);  color: #87CEEB; border-color: rgba(20,50,90,0.6); }
.f-other          { background: rgba(20,20,25,0.5);  color: #888;    border-color: rgba(40,40,50,0.6); }

/* ── DOT COLORS ── */
.dot-pirate       { background: #c00; }
.dot-marines      { background: #4a7fc1; }
.dot-world-gov    { background: #9b59b6; }
.dot-celestial    { background: #c9a80c; }
.dot-revolutionary{ background: #27ae60; }
.dot-royalty      { background: #e67e22; }
.dot-scientist    { background: #00bcd4; }
.dot-fighter      { background: #666; }
.dot-islander     { background: #5b8db8; }
.dot-other        { background: #444; }

/* ── GRID SECTION HEADERS ── */
.grid-section {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim); padding: 4px 0;
}
.grid-section::before, .grid-section::after {
  content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.25;
}
.grid-section-straw-hat { color: var(--gold-dim); }

/* ── JOLLY ROGER SVG ICON — behaves like a font icon via CSS mask ── */
.jr-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url(/jolly_roger.svg) center / contain no-repeat;
  mask: url(/jolly_roger.svg) center / contain no-repeat;
  flex-shrink: 0;
}

/* ── LOADING / EMPTY ── */
.loading { text-align: center; padding: 80px 24px; color: var(--text-muted); }
.spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 80px 24px; color: var(--text-muted); font-size: 16px; }
.empty-icon { font-size: 48px; margin-bottom: 14px; }

/* ── DETAIL META GRID ── */
.detail-alias   { font-size: 25px; color: var(--accent); margin: -18px 0 10px; letter-spacing: .05em; text-transform: uppercase; }
.detail-jp-name { font-size: 20px; color: var(--text-muted); margin: -8px 0 0; font-family: serif; line-height: 2.4; }
.detail-jp-name ruby { ruby-align: center; }
.detail-jp-name rt { font-size: 0.52em; letter-spacing: 0.1em; color: rgba(160,200,255,0.75); font-family: sans-serif; }
.detail-romaji  { font-size: 14px; color: var(--text-dim); margin-top: -10px; margin-bottom: 20px; font-style: italic; }
.detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 16px 0 24px; }
.meta-row { display: contents; }
.meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 4px 0; align-self: center; }
.meta-value { font-size: 14px; color: var(--text); padding: 4px 0; align-self: center; }
.meta-value a { color: var(--gold); }
.meta-value a:hover { text-decoration: underline; }

/* ── DETAIL CARDS ── */
.detail-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 24px; }
.detail-card-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 16px; }

/* ── BOUNTY ── */
.bounty-current-card { background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.22); border-radius: var(--radius); padding: 16px 20px; }
.bounty-current-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bounty-beli-lg { display: inline-block; width: 22px; height: 40px; background-color: var(--gold); -webkit-mask: url('/berry.png') center / contain no-repeat; mask: url('/berry.png') center / contain no-repeat; font-size: 0; flex-shrink: 0; align-self: center; }
.bounty-amount-lg { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bounty-label-current { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); background: rgba(255,215,0,0.18); border-radius: 4px; padding: 3px 9px; margin-left: auto; }
.bounty-label-final { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); background: rgba(255,255,255,0.07); border-radius: 4px; padding: 3px 9px; margin-left: auto; }
.bounty-source { font-size: 12px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 9px; display: inline-block; white-space: nowrap; }

/* collapsible history */
.bounty-history-details { margin-top: 10px; }
.bounty-history-details[open] .bounty-toggle-chevron { display: inline-block; transform: rotate(90deg); }
.bounty-history-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; padding: 8px 0; border-top: 1px solid var(--border); list-style: none; user-select: none; outline: none; }
.bounty-history-toggle::-webkit-details-marker { display: none; }
.bounty-history-toggle:hover { color: var(--text); }
.bounty-history-details:focus { outline: none; }
.bounty-toggle-chevron { font-size: 16px; transition: transform 0.2s; }

/* timeline */
.bounty-timeline { padding: 10px 0 4px 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 12px; margin-left: 6px; }
.bounty-timeline-item { display: flex; align-items: center; gap: 8px; position: relative; }
.bounty-timeline-dot { position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.bounty-beli-sm { display: inline-block; width: 11px; height: 20px; background-color: var(--text-dim); -webkit-mask: url('/berry.png') center / contain no-repeat; mask: url('/berry.png') center / contain no-repeat; font-size: 0; flex-shrink: 0; align-self: center; }
.bounty-amount-sm { font-size: 15px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 120px; }

/* marine bounty */
.bounty-marine-card { background: rgba(68,136,255,.05); border-color: rgba(68,136,255,.2); }
.bounty-marine-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bounty-marine-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6699ff; background: rgba(68,136,255,.12); border-radius: 4px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; }
.bounty-grade-name { font-size: 15px; font-weight: 700; }
.bounty-grade-symbols-lg { font-size: 22px; letter-spacing: 5px; color: var(--gold); margin-bottom: 12px; line-height: 1; }
.bounty-grade-symbols-sm { font-size: 13px; letter-spacing: 3px; color: var(--gold); }

/* ── DEVIL FRUIT ── */
.df-card {}
.df-grid { display: flex; flex-direction: column; gap: 8px; }
.df-row { display: flex; align-items: center; gap: 12px; }
.df-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); min-width: 80px; }
.df-val { font-size: 14px; }
.df-formerly { color: var(--text-dim); font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.df-reveal-note { font-size: 11px; opacity: .55; white-space: nowrap; }
.df-type-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.df-type-paramecia             { background: rgba(100,180,255,0.15); color: #64b4ff; }
.df-type-special-paramecia     { background: rgba(100,180,255,0.2);  color: #88c8ff; border: 1px solid rgba(100,180,255,0.3); }
.df-type-artificial-paramecia  { background: rgba(100,180,255,0.1);  color: #5aа4dd; }
.df-type-zoan                  { background: rgba(100,220,120,0.15); color: #64dc78; }
.df-type-ancient-zoan          { background: rgba(180,130,60,0.2);   color: #c8902a; }
.df-type-mythical-zoan         { background: rgba(180,80,220,0.18);  color: #c860f0; }
.df-type-mythical-zoan-artificial { background: rgba(180,80,220,0.1); color: #a050c8; border: 1px solid rgba(180,80,220,0.25); }
.df-type-artificial-zoan       { background: rgba(120,120,120,0.18); color: #999; }
.df-type-logia                 { background: rgba(255,180,50,0.15);  color: #ffb432; }
.df-type-unknown               { background: rgba(120,120,120,0.15); color: #aaa; }

/* Zoan subtype section dividers on devil-fruits page */
.df-subtype-section { margin-top: 8px; }
.df-subtype-header { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.df-subtype-count { font-size: 12px; color: var(--text-dim); }

/* ── DEVIL FRUITS PAGE ── */
.df-card-item {}
.df-icon-wrap { font-size: 32px; flex-shrink: 0; width: 56px; text-align: center; }
.df-jp { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-user-thumbs { display: flex; gap: 4px; align-items: center; }
.df-user-thumb-wrap { display: inline-flex; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.df-user-thumb { width: 100%; height: 100%; object-fit: cover; }
.df-user-deceased { filter: grayscale(1); opacity: .35; }
.df-more { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
/* Devil Fruit multi-user picker */
.df-picker { position: absolute; z-index: 1000; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6); min-width: 210px; display: none; }
.df-picker.open { display: block; }
.df-picker-title { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: 10px; }
.df-picker-list { display: flex; flex-direction: column; gap: 4px; }
.df-picker-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--text); transition: background .15s, color .15s; }
.df-picker-item:hover { background: var(--bg2); color: var(--gold); }
.df-picker-img-wrap { display: inline-flex; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.df-picker-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.df-picker-item-info { display: flex; flex-direction: column; gap: 1px; }
.df-picker-item-info span { font-size: 13px; }
.df-picker-former .df-picker-img-wrap { filter: grayscale(1); opacity: .5; }
.df-picker-former .df-picker-item-info > span:first-child { color: var(--text-dim); }
.df-picker-former-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.df-picker-former:hover img { opacity: .75; }
.df-picker-divider { border-top: 1px solid var(--border); margin: 6px 0; }

/* ── DEVIL FRUIT MEANING TAGS ── */
.df-meaning-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.df-meaning-tags .df-val { color: var(--text-muted); }
.df-meaning-tag { color: var(--text-muted); font-size: 14px; font-weight: 400; }
.df-meaning-tag:not(:last-child)::after { content: '·'; color: var(--text-dim); margin: 0 6px; font-size: 18px; line-height: 1; vertical-align: middle; }
.df-type-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── DEVIL FRUITS — PORTRAIT CARD GRID ── */
.df-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; padding: 32px 28px; max-width: 1400px; margin: 0 auto; }
.df-card-new { position: relative; aspect-ratio: 2/3; border-radius: 12px; overflow: hidden; display: block; text-decoration: none; cursor: pointer; border: 1px solid rgba(255,255,255,0.06); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; background: var(--bg2); }
.df-card-new:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,0.65); border-color: rgba(255,215,0,0.3); }
.df-card-img { position: absolute; inset: 0; }
.df-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.df-card-img-split { position: absolute; inset: 0; display: flex; }
.df-img-half { flex: 1; overflow: hidden; position: relative; }
.df-img-half img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.df-img-half:first-child::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.55); }
.df-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 28%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.94) 100%); pointer-events: none; }
.df-card-top-fade { position: absolute; top: 0; left: 0; right: 0; height: 54px; background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent); pointer-events: none; }
.df-card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
.df-card-multi-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.72); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; z-index: 2; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.df-card-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 10px 13px; z-index: 2; }
.df-card-name { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.df-card-jp { font-size: 10px; color: rgba(255,255,255,0.5); font-family: serif; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-card-user { font-size: 10px; color: rgba(255,255,255,0.72); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-card-img-deceased img { filter: saturate(0.2) brightness(0.6); }
.df-card-new .df-type-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(0,0,0,0.45) !important; border: 1px solid currentColor; font-size: 10px; padding: 2px 7px; }

/* ── ORGANIZATIONS — FACTION-GROUPED CARDS ── */
.org-sections-wrap { padding: 24px 28px 48px; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.org-section-group { display: flex; flex-direction: column; gap: 12px; }
.org-section-header { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.org-section-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.org-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: var(--text); }
.org-section-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.org-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.org-card-new { position: relative; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--faction-color, var(--border)); border-radius: var(--radius-lg); padding: 12px 16px; height: 66px; overflow: hidden; text-decoration: none; cursor: pointer; transition: background 0.18s, transform 0.18s, border-color 0.18s; min-width: 0; }
.org-card-new:hover { background: var(--card-hover); border-color: var(--gold-dim); border-left-color: var(--faction-color, var(--gold-dim)); transform: translateX(3px); }
.org-card-bg-sym { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; object-fit: contain; opacity: 0.13; pointer-events: none; }
.org-card-sym { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; opacity: 0.88; }
.org-card-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--faction-color, var(--text-muted)); }
.org-card-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.org-card-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-card-count { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.org-card-arrow { font-size: 13px; color: var(--text-dim); flex-shrink: 0; transition: color 0.18s; position: relative; z-index: 1; }
.org-card-new:hover .org-card-arrow { color: var(--gold-dim); }

@media (max-width: 768px) {
  .df-grid-new { padding: 20px 16px; gap: 10px; }
  .org-sections-wrap { padding: 16px 14px 32px; gap: 24px; }
  .org-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .df-grid-new { grid-template-columns: repeat(3, 1fr); padding: 10px 10px; gap: 7px; }
  .df-card-name { font-size: 11px; }
  .df-card-badge { top: 6px; left: 6px; }
  .df-card-new .df-type-badge { font-size: 9px; padding: 1px 5px; }
  .df-card-bottom { padding: 8px 8px 10px; }
}

/* ── BIRTHDAY CALENDAR ── */
.birthday-nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 24px 40px; position: relative; }
.month-btn { background: none; border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; color: var(--text-muted); font-size: 16px; cursor: pointer; transition: border-color .2s, color .2s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.month-btn:hover { border-color: var(--gold); color: var(--gold); }
.month-title { font-size: 32px; font-weight: 700; font-family: var(--font-hero); letter-spacing: 3px; color: var(--gold); min-width: 200px; text-align: center; }
.today-btn { position: absolute; right: 32px; top: 50%; transform: translateY(-60%); padding: 7px 18px; border: 1px solid var(--border); border-radius: 20px; background: none; color: var(--text-dim); font-size: 12px; font-weight: 600; letter-spacing: .05em; cursor: pointer; transition: all .2s; }
.today-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,.06); }
.cal-wrap { padding: 0 32px 80px; max-width: 1280px; margin: 0 auto; width: 100%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-hdr { text-align: center; padding: 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); background: var(--bg2); border-bottom: 1px solid var(--border); }
.cal-cell { min-height: 130px; padding: 12px 10px; background: var(--bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .15s; position: relative; }
.cal-cell:hover { background: var(--bg2); }
.cal-cell.cal-empty { pointer-events: none; }
.cal-cell.cal-today { background: rgba(255,215,0,.05); border-left: 2px solid var(--gold) !important; }
.cal-day-num { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-day-digit { font-size: 13px; font-weight: 600; color: var(--text-dim); line-height: 1; }
.cal-today-digit { background: var(--gold); color: #111 !important; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.cal-bday-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .55; flex-shrink: 0; }
.cal-names { display: flex; flex-direction: column; gap: 3px; }
.cal-bday-name { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; text-decoration: none; transition: color .15s; line-height: 1.5; }
.cal-bday-name:hover { color: var(--gold); }
.cal-name-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-pirate { background: #e85555; }
.dot-marines { background: #4488ff; }
.dot-world-gov { background: #9966cc; }
.dot-celestial { background: #ddaa33; }
.dot-revolutionary { background: #44bb66; }
.dot-royalty { background: #cc8844; }
.dot-islander { background: #44aacc; }
.dot-scientist { background: #88ccdd; }
.dot-fighter { background: #cc6644; }
.dot-other { background: #888; }
.cal-names-extra { display: none; flex-direction: column; gap: 3px; margin-top: 2px; }
.cal-names-extra.open { display: flex; }
.cal-more-btn { background: none; border: none; padding: 3px 0 0; font-size: 10px; color: var(--text-dim); cursor: pointer; text-align: left; transition: color .15s; }
.cal-more-btn:hover { color: var(--gold); }
/* Character portrait tooltip */
.cal-tooltip-popup { position: fixed; z-index: 9999; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: none; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.6); pointer-events: none; width: 120px; }
.cal-tooltip-img-wrap { width: 90px; height: 90px; overflow: hidden; border-radius: 6px; flex-shrink: 0; display: block; }
.cal-tooltip-popup img { width: 100%; height: 100%; object-fit: cover; }
.cal-tooltip-popup span { font-size: 10px; color: var(--text-muted); text-align: center; white-space: normal; line-height: 1.3; }

/* ── GLOBE / WORLD ── */
.globe-main { flex: 1; display: flex; overflow: hidden; position: relative; }
.globe-wrap { flex: 1; position: relative; min-height: 0; background: #06090e; overflow: hidden; }
/* Chart canvas (nautical chart background) sits below the WebGL canvas */
.chart-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 0; }
/* WebGL globe canvas on top */
.globe-wrap > canvas#globeCanvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; display: block; z-index: 1; }

/* Sky Islands badge */
@keyframes skyFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}
@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%       { transform: translateX(4px); opacity: .8; }
}
.sky-badge {
  position: absolute; top: 22px; left: 22px;
  cursor: pointer; z-index: 5; user-select: none;
  animation: skyFloat 4s ease-in-out infinite;
  opacity: 0; transition: opacity .3s ease;
}
.sky-badge-clouds { position: relative; height: 20px; margin-bottom: -8px; }
.sky-cloud {
  position: absolute; color: #aaccff; opacity: .5; font-size: 18px;
}
.sky-cloud.c1 { left:  6px; top: 0;   font-size: 22px; animation: cloudDrift 3.5s ease-in-out infinite; }
.sky-cloud.c2 { left: 36px; top: 4px; font-size: 16px; animation: cloudDrift 4.2s ease-in-out infinite 0.5s; }
.sky-cloud.c3 { left: 18px; top: 8px; font-size: 13px; animation: cloudDrift 3.8s ease-in-out infinite 1s; }
.sky-badge-inner {
  display: flex; align-items: center; gap: 7px;
  background: rgba(30,50,90,0.78); backdrop-filter: blur(10px);
  border: 1px solid rgba(140,190,255,0.25); border-radius: 12px;
  padding: 9px 15px; font-size: 13px; font-weight: 600;
  color: #aaccff; white-space: nowrap;
  transition: border-color .2s, background .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.sky-badge:hover .sky-badge-inner {
  border-color: rgba(140,190,255,0.6);
  background: rgba(50,80,140,0.85);
  box-shadow: 0 4px 24px rgba(100,160,255,0.2);
}
.sky-count {
  background: rgba(100,160,255,0.2); border-radius: 8px;
  padding: 1px 7px; font-size: 11px; color: #8ab4ff;
}

.map-wip-banner {
  position: absolute; bottom: 28px; left: 16px; z-index: 10;
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(10,10,12,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,0.2); border-left: 3px solid rgba(255,215,0,0.55);
  border-radius: 10px; padding: 13px 14px; max-width: 280px;
  transition: opacity 0.3s, transform 0.3s;
}
.map-wip-banner.dismissed { opacity: 0; transform: translateY(6px); pointer-events: none; }
.map-wip-icon { color: var(--gold); font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.map-wip-body { flex: 1; min-width: 0; }
.map-wip-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: 5px; }
.map-wip-text { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.map-wip-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0; flex-shrink: 0; line-height: 1; transition: color .15s; }
.map-wip-close:hover { color: var(--text); }

.globe-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  background: rgba(8,16,32,0.75); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; padding: 8px 18px; border-radius: 20px;
  pointer-events: none; white-space: nowrap; backdrop-filter: blur(10px);
  transition: opacity .4s;
}
.globe-tooltip {
  position: absolute; pointer-events: none;
  background: rgba(8,18,38,0.92); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: 9px 14px;
  opacity: 0; transition: opacity .12s; backdrop-filter: blur(10px);
  z-index: 10; min-width: 160px;
}
.globe-tooltip.visible { opacity: 1; }
.globe-tooltip strong { display: block; font-size: 14px; color: var(--gold); margin-bottom: 2px; }

.globe-tooltip span   { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.globe-tooltip span i { width: 12px; color: var(--text-dim); }

/* Slide-in panels */
.world-panel {
  position: fixed; top: var(--nav-h); right: 0; bottom: 0; width: 400px;
  background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  z-index: 50;
}
.world-panel-2 { z-index: 51; }
.world-panel.open { transform: translateX(0); box-shadow: -8px 0 32px rgba(0,0,0,0.5); }

/* Region panel handle (sticky header / mobile peek bar) */
.world-panel-handle {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 20px; height: 76px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(255,215,0,.07) 0%, rgba(255,215,0,.025) 50%, transparent 100%);
  border-bottom: 1px solid rgba(255,215,0,.16);
}
.world-panel-handle-info {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
}
.handle-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,215,0,.12); border: 1.5px solid rgba(255,215,0,.32);
  box-shadow: 0 0 14px rgba(255,215,0,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--gold);
}
.handle-text { min-width: 0; flex: 1; }
.handle-title {
  font-family: var(--font-hero); font-size: 19px; letter-spacing: 2px; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.handle-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.handle-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.handle-meta-item i { font-size: 10px; color: var(--text-dim); }

/* Stacked avatar strip in handle */
.handle-avatars { display: flex; flex-shrink: 0; align-items: center; margin-left: 4px; }
.handle-avatar-wrap {
  width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; position: relative;
  border: 2px solid var(--bg2); background: var(--bg3);
  margin-left: -7px;
}
.handle-avatar-wrap:first-child { margin-left: 0; }
.handle-avatar-img { width: 100%; height: 100%; display: block; }
.handle-avatar-more {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg3); border: 2px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-dim); font-weight: 600;
  margin-left: -7px;
}

/* Desktop: register tab that protrudes from the handle's left edge */
.world-panel-toggle-btn {
  position: absolute; left: 0; top: 0;
  transform: translateX(-100%);
  /* Hidden while panel is closed — slides off-screen but 40px still lands in viewport */
  opacity: 0; pointer-events: none;
  width: 38px; height: 76px;
  background: var(--bg2);
  /* Match panel border color so the seam is invisible */
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gold); font-size: 15px;
  transition: background .2s, border-color .2s, opacity .3s;
}
/* Reveal tab only when panel is open (desktop) or peek/open (mobile) */
.world-panel.open .world-panel-toggle-btn,
.world-panel.peek  .world-panel-toggle-btn { opacity: 1; pointer-events: auto; }
.world-panel-toggle-btn:hover {
  background: rgba(255,215,0,.05); border-color: rgba(255,215,0,.45);
}
.world-panel-toggle-btn i { color: var(--gold); }

/* Island panel back button */
.world-panel-back {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-body); font-size: 13px;
  padding: 14px 20px; cursor: pointer; transition: color .2s; text-align: left;
}
.world-panel-back:hover { color: var(--gold); }

.world-panel-scroll { flex: 1; overflow-y: auto; padding: 20px; }

.world-panel-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.world-panel-icon {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold);
}
.world-panel-icon.island-icon  { background: rgba(59,130,246,.1);  border-color: rgba(59,130,246,.25); color: #60a5fa; }
.world-panel-icon.settle-icon  { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.2);  color: #4ade80; }
.world-panel-title { font-family: var(--font-hero); font-size: 20px; letter-spacing: 2px; color: var(--gold); }
.world-panel-meta  { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.world-section-hd {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-dim); margin: 18px 0 10px;
}

/* Island grid in panel */
.world-island-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.world-island-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: border-color .18s, background .18s;
}
.world-island-card:hover { border-color: rgba(255,215,0,.4); background: var(--card-hover); }
.world-island-card-top {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-weight: 600; font-size: 13px;
}
.world-island-card-top i { color: #60a5fa; font-size: 11px; flex-shrink: 0; }
.world-island-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-island-subs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.world-sub-chip { font-size: 10px; background: var(--bg3); color: var(--text-muted); border-radius: 8px; padding: 1px 7px; }
.world-sub-chip.dim { color: var(--text-dim); }
.world-island-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* Shared elements */
.world-avatars { display: flex; align-items: center; }
.world-avatar-wrap {
  display: inline-flex; width: 26px; height: 26px; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--bg2); margin-left: -7px; flex-shrink: 0;
}
.world-avatar-wrap:first-child { margin-left: 0; }
.world-avatar { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.world-char-count { font-size: 11px; color: var(--text-muted); background: var(--bg3); border-radius: 10px; padding: 2px 8px; }
.world-char-count.dim { color: var(--text-dim); }

.world-char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; margin-top: 8px;
}

.world-subloc-block { margin-bottom: 20px; }
.world-sub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.world-sub-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 10px; font-size: 12px; cursor: pointer; transition: border-color .18s;
}
.world-sub-tag:hover { border-color: var(--gold-dim); color: var(--text); }
.world-dim-note { font-size: 12px; color: var(--text-dim); padding: 4px 0; }

.world-panel-empty {
  text-align: center; padding: 40px 16px; color: var(--text-muted);
}
.world-panel-empty i { font-size: 36px; display: block; margin-bottom: 14px; opacity: .25; }
.world-panel-empty p { font-size: 13px; margin-bottom: 4px; }

/* Type badges */
.world-type-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 10px; font-weight: 600; flex-shrink: 0;
}
.type-island     { background: rgba(59,130,246,.15);  color: #60a5fa; }
.type-kingdom    { background: rgba(255,215,0,.12);   color: var(--gold); }
.type-settlement { background: rgba(74,222,128,.1);   color: #4ade80; }
.type-region     { background: rgba(147,51,234,.15);  color: #c084fc; }

/* ── FILTERS BAR ── */
.filters-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 0 24px 24px; max-width: 1400px; margin: 0 auto; width: 100%; }
.filter-input { padding: 8px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 24px; color: var(--text); font-size: 14px; outline: none; width: 240px; transition: border-color .2s; }
.filter-input:focus { border-color: var(--gold); }
.filter-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--bg3); color: var(--text-muted); cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.chip:hover { border-color: var(--border-hi); color: var(--text); }
.chip.active { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); }

/* ── PAGE HERO ── */
.page-hero { text-align: center; padding: 52px 24px 36px; }
.page-hero .hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 10px; }
.page-hero .hero-title { font-size: 48px; font-family: var(--font-hero); letter-spacing: 4px; color: var(--gold); margin-bottom: 10px; }
.page-hero .hero-subtitle { color: var(--text-muted); font-size: 15px; min-height: 1.7em; }

/* ── RESPONSIVE ── */

/* ─ Mobile search trigger: visible below 1399px (when desktop nav-search hides) ── */
@media (max-width: 1399px) {
  .nav-mobile-search-btn { display: flex; }
}

/* Story mode: icon-only on mobile/tablet — label hidden via span, not font-size trick */
.story-btn-label { display: none; }
.story-mode-btn { padding: 8px; gap: 0; justify-content: center; }

/* Desktop search bar: only on true desktop (horizontal nav mode) */
@media (max-width: 1399px) {
  .nav-search { display: none; }
}

/* ─ Desktop (≥769px): inline nav, sidebar hidden ──────────────── */
@media (min-width: 769px) {
  .navbar-links { display: none !important; }
  .nav-backdrop { display: none !important; }
  .story-btn-label { display: inline; }
}

/* ─ Mobile (≤768px): bottom nav, hide desktop elements ─────────── */
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .nav-search { display: none; }
  .bottom-nav { display: grid; }
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ─ Intermediate desktop-to-tablet (≤900px) ───────────────────── */
@media (max-width: 900px) {
  .section { padding: 48px 22px; }
  .hero-inner { padding: 52px 28px; }
  .page-header { padding: 42px 22px 36px; }
  .items-grid { padding: 24px 20px; }
  .faction-grid { padding: 24px 20px; }
  .cal-wrap { padding: 0 22px 60px; }
  .search-bar-centered { padding: 0 16px; }
}

/* ─ Tablet (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar { padding: 0 14px; gap: 10px; }

  /* Hero: portrait off, gradient flips to bottom-up */
  .hero-inner { grid-template-columns: 1fr; padding: 52px 24px 48px; }
  .hero-portrait { display: none; }
  .hero-content { max-width: 100%; }
  .hero-overlay {
    background: linear-gradient(to top, #0c0c0e 0%, rgba(12,12,14,.82) 42%, rgba(12,12,14,.35) 100%);
  }
  .hero { min-height: 50vw; }

  .stat-item { padding: 14px 18px; }
  .section { padding: 36px 16px; }
  .characters-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 12px 14px; }
  .detail-org-symbol { display: none; }
  .detail-hero { gap: 24px; }
  .detail-portrait-wrap { width: clamp(160px, 42vw, 260px); }
  .detail-page { padding: 24px 16px 60px; }
  .items-grid { grid-template-columns: 1fr; padding: 16px; }
  .faction-grid { padding: 20px 16px; }
  .page-header { padding: 36px 16px 30px; }

  /* Birthday nav */
  .birthday-nav { padding: 0 16px 28px; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .month-title { font-size: 26px; min-width: auto; letter-spacing: 2px; }
  .today-btn { position: static; transform: none; font-size: 11px; padding: 5px 12px; flex-basis: 100%; text-align: center; }
}

/* ─ Character filter bar — responsive ──────────────────────────── */
@media (max-width: 900px) {
  .char-filter-top { padding: 10px 16px 8px; }
  .char-faction-row { padding: 0 16px 10px; }
  .char-filter-panel { padding: 10px 16px 12px; }
}
@media (max-width: 640px) {
  /* ─ Characters filter top row ─────────────────────── */
  .char-filter-top { padding: 8px 12px 6px; gap: 7px; }
  /* Search input: explicit height so all three row items match */
  .char-search-input { height: 40px; padding-top: 0; padding-bottom: 0; }
  /* Filter button: move to far right (after sort), hide label */
  .char-more-label { display: none; }
  .char-more-btn { order: 3; }
  /* Sort select: sits between search and filter button */
  .char-sort-select { order: 2; height: 40px; padding: 0 28px 0 10px; }
  /* ─ Characters filter panel ───────────────────────── */
  .char-faction-row { padding: 0 12px 10px; gap: 5px; }
  .char-chip { font-size: 11px; padding: 5px 10px; }
  .char-filter-panel { padding: 8px 12px 12px; gap: 8px; }
  .char-panel-select { flex: 1; min-width: 0; height: 40px; padding: 0 26px 0 10px; }
  .char-sel { flex: 1; min-width: 0; }
  .char-sel-btn { height: 40px; padding: 0 10px; }
  .char-sel-drop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; }
  /* Filters bar: stack vertically, chips bleed to screen edges for scroll effect */
  .filters-bar { flex-direction: column; align-items: stretch; padding: 0 14px 20px; gap: 10px; }
  .filter-input { width: 100%; box-sizing: border-box; }
  .filter-chips { padding: 0 14px 2px; margin: 0 -14px; width: calc(100% + 28px); }
}

/* ─ Prevent iOS auto-zoom: all text inputs need font-size ≥ 16px ─────────── */
@media (max-width: 768px) {
  .char-search-input,
  .char-sort-select,
  .char-panel-select,
  .filter-input,
  .search-bar-centered input { font-size: 16px; }
}

/* ─ Homepage hub — responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .faction-browse-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .df-spotlight-row { grid-template-columns: repeat(2, 1fr); }
  .play-cta-icon { display: none; }
  .play-cta-card { padding: 32px 28px; }
}
@media (max-width: 640px) {
  .faction-browse-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .faction-browse-card { padding: 12px 6px; font-size: 10px; gap: 5px; }
  .faction-browse-card i { font-size: 18px; }
  .faction-browse-card .jr-icon { width: 18px; height: 18px; }
  .df-spotlight-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .df-spotlight-card { flex-direction: column; text-align: center; padding: 14px 10px; gap: 8px; overflow: hidden; }
  .df-spotlight-info { width: 100%; min-width: 0; overflow: hidden; }
  .df-spotlight-name { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.3; }
  .df-spotlight-jp { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: unset; }
  .play-cta-card { padding: 24px 20px; }
  .play-cta-title { font-size: 30px; }
  .play-cta-sub { font-size: 13px; }
  .section-header { flex-wrap: wrap; gap: 8px; }
}

/* ─ Birthday calendar — list view on mobile ───────────────────── */
@media (max-width: 640px) {
  .cal-wrap { padding: 0 14px 60px; }
  .cal-grid {
    display: flex; flex-direction: column; gap: 8px;
    border: none; border-radius: 0; overflow: visible;
  }
  .cal-hdr { display: none; }
  .cal-cell {
    display: none; min-height: auto; border-radius: 10px;
    border: 1px solid var(--border) !important;
  }
  .cal-cell.cal-has-bday { display: block; }
  .cal-cell.cal-today    { display: block; border-color: rgba(255,215,0,.3) !important; }
  .cal-cell.cal-empty    { display: none !important; }
  .cal-day-digit { font-size: 15px; }
  .cal-bday-name { font-size: 13px; }
}

/* ─ Mobile (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .navbar { padding: 0 12px; gap: 6px; }
  .navbar-logo { height: 27px; }
  .stat-number { font-size: 26px; }
  .stat-item { padding: 12px 14px; }
  .characters-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px 12px; }
  .hero { min-height: auto; }
  .hero-inner { padding: 28px 16px 36px; }
  .hero-title { font-size: clamp(34px, 10vw, 48px); }
  .hero-logo-img { height: clamp(65px, 19vw, 91px); }
  .hero-sub { font-size: 14px; margin-bottom: 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 10px 20px; font-size: 13px; }
  .mini-card-name { font-size: 11px; }
  /* Stats: force all 4 in one row */
  .stats-bar { flex-wrap: nowrap; }
  .stat-item { flex: 1 1 0; min-width: 0; padding: 12px 6px; }
  .stat-label { font-size: 9px; letter-spacing: 0.5px; }
  /* Character detail — mobile redesign */
  .detail-hero { flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; margin-bottom: 28px; }
  .detail-portrait-wrap { width: min(220px, 68vw); align-self: center; margin-bottom: 0; }
  .detail-info { width: 100%; padding-top: 0; }
  .detail-rank { margin-bottom: 4px; }
  .detail-name { font-size: clamp(26px, 7.5vw, 36px); margin-bottom: 10px; }
  .detail-alias { margin-top: -10px; font-size: 16px; }
  .detail-jp-name { font-size: 17px; }
  .detail-romaji { margin-top: -8px; margin-bottom: 14px; }
  .detail-section-label { margin-top: 18px; }

  /* Stat rows: label | value card */
  .detail-meta-grid {
    display: flex; flex-direction: column; gap: 0;
    margin: 14px 0 20px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .meta-row { display: flex; align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .meta-row:last-child { border-bottom: none; }
  .meta-label { min-width: 82px; padding: 0; }
  .meta-value { flex: 1; text-align: right; padding: 0; font-size: 13px; }

  .detail-page { padding: 16px 14px 80px; }
  .page-hero { padding: 36px 16px 28px; }
  .page-hero .hero-title { font-size: 36px; letter-spacing: 2px; }
  .explore-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .section { padding: 28px 14px; }
  .items-grid { padding: 12px; gap: 8px; }
  .faction-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .faction-browse-card { font-size: 9px; padding: 10px 4px; gap: 4px; }
  .faction-browse-card i { font-size: 16px; }
  .faction-browse-card .jr-icon { width: 16px; height: 16px; }
  .faction-browse-grid { gap: 5px; }
  .section-title { font-size: 22px; }
  .section-header { align-items: flex-start; }
  .section-header .section-title { display: block; }
  .section-header .section-title .section-title-sub { display: block; margin-left: 0; margin-top: 3px; }
  .section-header .section-title:has(> i) .section-title-sub { margin-left: 32px; }
  .play-cta-actions { flex-direction: column; }
  .play-cta-actions .btn { justify-content: center; }

  /* Detail cards */
  .detail-card { padding: 16px 14px; margin-bottom: 16px; }
  /* Bounty section */
  .bounty-current-card { padding: 12px 14px; }
  .bounty-current-row { flex-wrap: wrap; gap: 6px 10px; }
  .bounty-beli-lg { width: 18px; height: 33px; }
  .bounty-amount-lg { font-size: 22px; }
  .bounty-label-current, .bounty-label-final { flex-shrink: 0; }
  .bounty-timeline-item { gap: 6px; }
}

/* ─ Portrait phones: full-bleed hero ─────────────────────────── */
@media (max-width: 480px) and (orientation: portrait) {
  .hero { min-height: calc(88svh - env(safe-area-inset-bottom)); align-items: flex-end; }
  .hero-bg {
    filter: brightness(0.52);
    transform: scale(1.02);
    background-position: center top;
  }
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(12,12,14,1)    0%,
      rgba(12,12,14,0.92) 28%,
      rgba(12,12,14,0.3)  60%,
      rgba(12,12,14,0)    85%
    );
  }
  .hero-inner { padding: 0 20px 62px; align-items: flex-start; }
  .hero-logo-img { height: clamp(75px, 22vw, 100px); }
  .hero-sub { display: block; font-size: 14px; margin-bottom: 22px; }
}

/* ─ World map — mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Anchor main to visual viewport like game-section — bypasses the min-height:100vh vs 100svh conflict */
  .map-page main {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: 0;
  }
  .globe-hint { bottom: 18px; }
  .map-wip-banner {
    bottom: 60px; left: 10px; right: 10px;
    top: auto;
    max-width: none;
    padding: 10px 12px;
    gap: 10px;
  }
  .map-wip-text { font-size: 11px; line-height: 1.45; }

  /* Bottom-sheet panel: slides up from below bottom nav */
  .world-panel {
    width: 100vw; left: 0; top: auto; bottom: calc(58px + env(safe-area-inset-bottom));
    height: calc(100svh - var(--nav-h) - 58px - env(safe-area-inset-bottom));
    border-left: none; border-top: 1px solid var(--border);
    transform: translateY(100%);
  }
  /* Peek: only the handle bar floats above the bottom nav */
  .world-panel.peek {
    transform: translateY(calc(100% - 76px));
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  /* Open: full panel visible */
  .world-panel.open {
    transform: translateY(0);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  /* Drag pill indicator on handle */
  .world-panel-handle::before {
    content: ''; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255,255,255,.12); border-radius: 2px;
  }
  .world-panel-handle { position: relative; padding-top: 14px; padding-bottom: 8px; height: 76px; }
  .world-panel.peek { transform: translateY(calc(100% - 76px)); }
  /* Toggle: same design language as desktop tab, but in-flow (no protrusion) */
  .world-panel-toggle-btn {
    position: relative; left: auto; top: auto; transform: none;
    opacity: 1; pointer-events: auto;
    width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
    background: var(--bg3); border: 1px solid var(--border);
  }
  .world-panel-toggle-btn:hover { border-color: rgba(255,215,0,.45); background: rgba(255,215,0,.05); }
  .world-panel-toggle-btn i { font-size: 13px; }

  /* Hide 4th avatar on narrow screens to save space */
  .handle-avatar-wrap:nth-child(4),
  .handle-avatar-more { display: none; }

  /* Island panel back button: taller for touch */
  .world-panel-back { padding: 18px 20px; }

  .sky-badge { left: 12px !important; top: 12px !important; }
}
@media (max-width: 500px) {
  .world-island-grid { grid-template-columns: 1fr; }
}

/* ─ Period timeline / gallery ─────────────────────────────────── */
@media (max-width: 640px) {
  .period-node { min-width: 80px; }
  .period-tab-label { font-size: 11px; }
  .period-tab-range { font-size: 10px; }
  .gallery-img { width: 72px; height: 72px; }
}

/* ─ PWA standalone: extend navbar to cover status bar safe area ── */
@media (display-mode: standalone) {
  :root { --nav-h: calc(62px + env(safe-area-inset-top)); }
  .navbar { padding-top: env(safe-area-inset-top); }
}

/* ─ Very small phones (≤375px) ────────────────────────────────── */
@media (max-width: 375px) {
  .navbar { padding: 0 10px; gap: 4px; }
  .navbar-logo { height: 24px; }
  .hero-inner { padding: 22px 14px 28px; }
  .hero-title { font-size: 30px; }
  .hero-logo-img { height: 57px; }
  .hero-sub { display: none; }
  .section { padding: 22px 12px; }
  .section-title { font-size: 22px; }
  .explore-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .explore-card { padding: 20px 14px; }
  .explore-icon { font-size: 28px; margin-bottom: 8px; }
  .explore-title { font-size: 16px; }
  .characters-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px 10px; }
  .stat-number { font-size: 22px; }
  .stat-item { padding: 10px 10px; }
  .page-hero .hero-title { font-size: 26px; letter-spacing: 1px; }
  .items-grid { grid-template-columns: 1fr; padding: 10px; gap: 6px; }
  .faction-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 12px; }
  .detail-page { padding: 14px 10px 56px; }
}

/* ══════════════════════════════════════════
   STORY MODE WIDGET
   ══════════════════════════════════════════ */

.story-mode-widget {
  position: relative;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.story-mode-widget.sm-ready { opacity: 1; }

.story-mode-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 500; font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.story-mode-btn:hover { border-color: var(--gold-dim); color: var(--text); }
.story-mode-btn.story-mode-active {
  border-color: rgba(255,215,0,.35);
  color: var(--gold);
  background: rgba(255,215,0,.06);
}
.story-mode-btn[data-mode-id="pre"] {
  border-color: rgba(80,150,210,.45);
  color: rgb(80,150,210);
  background: rgba(80,150,210,.07);
}
.story-mode-btn[data-mode-id="all"] {
  border-color: rgba(150,80,220,.45);
  color: rgb(150,80,220);
  background: rgba(150,80,220,.07);
}
.story-mode-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 200px;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.story-mode-dropdown.open { display: block; }
.story-mode-option {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 10px 14px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--font-body);
  cursor: pointer; text-align: left;
  transition: background .15s;
}
.story-mode-option:last-child { border-bottom: none; }
.story-mode-option:hover { background: var(--bg3); }
.story-option-label { font-size: 13px; font-weight: 600; }
.story-option-desc  { font-size: 11px; color: var(--text-muted); }
.story-mode-option[data-id="pre"] .story-option-label { color: rgb(80,150,210); }
.story-mode-option[data-id="pre"]:hover { background: rgba(80,150,210,.08); }
.story-mode-option[data-id="all"] .story-option-label { color: rgb(150,80,220); }
.story-mode-option[data-id="all"]:hover { background: rgba(150,80,220,.08); }

/* ── Story Mode Onboarding Overlay ── */
.story-onboarding-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .35s;
}
.story-onboarding-overlay.open { opacity: 1; }
.story-onboarding-modal {
  background: var(--bg2); border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg); padding: 40px 36px;
  max-width: 440px; width: 100%; text-align: center;
  transform: translateY(24px); transition: transform .35s;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}
.story-onboarding-overlay.open .story-onboarding-modal { transform: translateY(0); }
.story-onboarding-icon { font-size: 40px; color: var(--gold); margin-bottom: 18px; }
.story-onboarding-title { font-family: var(--font-hero); font-size: 30px; color: var(--gold); margin-bottom: 12px; letter-spacing: 1px; }
.story-onboarding-desc { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; line-height: 1.7; }
.story-onboarding-desc strong { display: block; margin-top: 8px; font-size: 15px; }
.story-onboarding-options { display: flex; flex-direction: column; gap: 10px; }
.story-onboarding-btn {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  text-align: left; display: flex; flex-direction: column; gap: 4px; width: 100%;
}
.story-onboarding-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.story-onboarding-btn[data-id="pre"] { border-color: rgba(80,150,210,.25); }
.story-onboarding-btn[data-id="pre"]:hover { border-color: rgba(80,150,210,.6); background: rgba(80,150,210,.07); }
.story-onboarding-btn[data-id="pre"] .story-onboarding-btn-label { color: rgb(80,150,210); }
.story-onboarding-btn[data-id="all"] { border-color: rgba(150,80,220,.25); }
.story-onboarding-btn[data-id="all"]:hover { border-color: rgba(150,80,220,.6); background: rgba(150,80,220,.07); }
.story-onboarding-btn[data-id="all"] .story-onboarding-btn-label { color: rgb(150,80,220); }
.story-onboarding-btn-label { font-size: 15px; font-weight: 600; }
.story-onboarding-btn-desc  { font-size: 12px; color: var(--text-muted); }

/* ══════════════════════════════════════════
   PERIOD TIMELINE (character page)
   ══════════════════════════════════════════ */

/* Period color themes */
.period-col-early     { --pc: 200, 155, 70; }
.period-col-pre       { --pc: 80, 150, 210; }
.period-col-post      { --pc: 150, 80, 220; }
.period-col-flashback { --pc: 150, 100, 55; }

.period-timeline {
  position: relative;
  margin: 0 0 32px;
  padding-top: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.period-timeline::-webkit-scrollbar { display: none; }

.period-track {
  position: absolute;
  top: 30px;
  left: calc(50% / var(--n));
  right: calc(50% / var(--n));
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  pointer-events: none;
}
.period-track-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}

.period-nodes {
  display: flex;
  position: relative;
  min-width: max-content;
  width: 100%;
}

.period-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  min-width: 110px;
  transition: opacity .2s;
}
.period-node:hover { opacity: 1; }

.period-node-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(var(--pc), 0.35);
  background: var(--bg);
  position: relative;
  z-index: 1;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.period-node:hover .period-node-dot {
  border-color: rgba(var(--pc), 0.7);
  background: rgba(var(--pc), 0.12);
}
.period-node.passed .period-node-dot {
  background: rgba(var(--pc), 0.18);
  border-color: rgba(var(--pc), 0.55);
}
.period-node.active .period-node-dot {
  background: rgb(var(--pc));
  border-color: rgb(var(--pc));
  box-shadow: 0 0 0 4px rgba(var(--pc), 0.18), 0 0 14px rgba(var(--pc), 0.45);
  transform: scale(1.3);
}
.period-tab-flashback .period-node-dot { border-style: dashed; }

.period-node-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.period-tab-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  transition: color .2s;
  white-space: nowrap;
}
.period-node:hover .period-tab-label { color: var(--text); }
.period-node.active .period-tab-label { color: rgb(var(--pc)); }

.period-tab-range {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity .2s, color .2s;
}
.period-node.active .period-tab-range { color: rgba(var(--pc), 0.75); opacity: 1; }
.period-node:hover .period-tab-range { opacity: 0.85; }

.period-tab-flashback .period-tab-label { font-style: italic; }
.period-tab-flashback .fa-film { font-size: 10px; opacity: .65; margin-right: 3px; }

/* Single-period pill (no track needed) */
.period-single-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--pc), 0.4);
  background: rgba(var(--pc), 0.07);
}
.period-single-pill .period-tab-label { color: rgb(var(--pc)); font-size: 13px; font-weight: 600; }
.period-single-pill .period-tab-range { opacity: 0.7; }

/* Portrait wrap with age badge */
.detail-portrait-wrap {
  position: relative;
  flex-shrink: 0;
  width: clamp(200px, 35vw, 400px);
  clip-path: inset(-200px -200px -200px 0);
}
.period-age-badge {
  position: absolute;
  bottom: -10px; right: 16px;
  background: rgba(0,0,0,.85);
  color: var(--gold);
  font-size: 12px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,215,0,.35);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════
   IMAGE GALLERY (character page)
   ══════════════════════════════════════════ */

.gallery-card { padding: 20px 24px 24px; }

.gallery-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.gallery-item {
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
}
.gallery-img {
  width: 90px; height: 90px;
  object-fit: cover; object-position: top;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: transform .15s, border-color .15s;
}
.gallery-img:hover { transform: scale(1.05); border-color: var(--gold-dim); }
.gallery-source {
  font-size: 10px; color: var(--text-muted);
  text-align: center;
  max-width: 90px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.lightbox.open { opacity: 1; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(8px);
}
.lightbox-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 90vw; max-height: 90vh;
}
.lightbox-img {
  max-width: 80vw; max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-close {
  position: absolute; top: -40px; right: 0;
  background: none; border: none;
  color: rgba(255,255,255,.6);
  font-size: 22px; cursor: pointer;
  transition: color .15s;
}
.lightbox-close:hover { color: #fff; }
.lightbox-label {
  font-size: 13px; color: rgba(255,255,255,.6);
  text-align: center;
}

/* ══════════════════════════════════════════
   SPOILER CENSORSHIP (characters grid)
   ══════════════════════════════════════════ */

.char-card-censored {
  pointer-events: none;
}
.char-card-censored .char-card-img {
  position: relative;
}
.char-card-censored .char-card-img img {
  filter: blur(8px) brightness(.4);
}
.censored-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 600;
  text-align: center;
}
.censored-overlay i { font-size: 18px; opacity: .8; }
.censored-chapter {
  font-size: 10px;
  color: var(--gold);
  background: rgba(0,0,0,.5);
  border-radius: 10px;
  padding: 1px 6px;
  margin-top: 2px;
}
.char-card-censored .char-card-name {
  color: var(--text-dim);
  font-style: italic;
}

@media (max-width: 640px) {
  .period-node { min-width: 90px; }
  .period-tab-label { font-size: 12px; }
  .period-tab-range { font-size: 10px; }
  .gallery-img { width: 72px; height: 72px; }
}

/* ── MPA View Transitions ────────────────────────────────────────
   Supported: Chrome 126+, Edge 126+. Ignored by all other browsers.
   Effect: navbar stays frozen, page content cross-fades.           */
@view-transition { navigation: auto; }

.navbar     { view-transition-name: site-nav; }
.bottom-nav { view-transition-name: site-bottom-nav; }

::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-bottom-nav),
::view-transition-new(site-bottom-nav) {
  animation: none;
}

::view-transition-old(root) { animation: 150ms ease both vt-out; }
::view-transition-new(root) { animation: 150ms ease both vt-in; }

@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

/* ── CHANGELOG ── */
.changelog-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 80px; }
.cl-version { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 28px; overflow: hidden; }
.cl-version-latest { border-color: rgba(255,215,0,0.35); box-shadow: 0 0 0 1px rgba(255,215,0,0.1); }
.cl-version-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.cl-version-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cl-version-num { font-family: var(--font-hero); font-size: 22px; color: var(--gold); letter-spacing: 1px; }
.cl-latest-badge { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: rgba(255,215,0,0.15); color: var(--gold); border: 1px solid rgba(255,215,0,0.3); border-radius: 20px; padding: 2px 8px; }
.cl-version-title { font-size: 17px; font-weight: 600; color: var(--text); }
.cl-version-date { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cl-changes { list-style: none; padding: 0 24px; margin: 0; display: flex; flex-direction: column; }
.cl-change { display: flex; align-items: flex-start; gap: 16px; font-size: 14px; color: var(--text-muted); padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cl-change:last-child { border-bottom: none; }
.cl-change-text { flex: 1; line-height: 1.5; }
.cl-tag { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; width: 90px; margin-top: 2px; }
.cl-tag-new      { background: rgba(34,197,94,0.15);  color: #4ade80; }
.cl-tag-improved { background: rgba(59,130,246,0.15); color: #60a5fa; }
.cl-tag-fix      { background: rgba(234,179,8,0.15);  color: #facc15; }
.cl-tag-removed  { background: rgba(239,68,68,0.15);  color: #f87171; }