/* Odyssey Web Codex Stylesheet
   Mobile-first, simple. Orange (#f8941a) brand on warm charcoal.
   Dark and Light themes via CSS variables (also used by landing.css).
*/

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Brand */
  --accent: #f8941a;
  --accent-hover: #ffa63d;
  --on-accent: #1a0f02;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Rarity colors (match the Discord bot) */
  --rarity-common: #9aa0a6;
  --rarity-rare: #3498db;
  --rarity-super-rare: #a855f7;
  --rarity-epic: #d4a017;
  --rarity-legendary: #ef4444;
  --rarity-mythical: #fff1cc; /* divine light */
  --rarity-divine: #e8b923;  /* black and gold, animated below */

  /* Stat colors */
  --stat-vit: #e74c3c;
  --stat-str: #e67e22;
  --stat-agi: #2ecc71;
  --stat-def: #3498db;
  --stat-int: #9b59b6;
  --stat-luck: #eab308;
}

/* ================= DARK THEME (DEFAULT) ================= */
[data-theme="dark"] {
  --bg-body: #111013;
  --bg-surface: #19171b;
  --bg-surface-elevated: #232026;
  --bg-card: #19171b;
  --bg-card-hover: #211e24;
  --border-subtle: #2f2b33;
  --accent-border: #f8941a;

  --text-main: #f6f2ee;
  --text-muted: #a49d97;
  --text-faint: #6d6670;
  --text-accent: #ffb25c;
  --accent-text: #f8941a;

  --badge-bg: #232026;
  --badge-border: #353038;
  --input-bg: #141216;
  --input-border: #353038;
  --modal-overlay: rgba(8, 6, 4, 0.72);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.65);
  --accent-soft: rgba(248, 148, 26, 0.16);
}

/* ================= LIGHT THEME ================= */
[data-theme="light"] {
  --bg-body: #faf7f3;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f4efe9;
  --bg-card: #ffffff;
  --bg-card-hover: #fdf6ee;
  --border-subtle: #e7dfd6;
  --accent-border: #f8941a;

  --text-main: #1f1a15;
  --text-muted: #6b6159;
  --text-faint: #9c938a;
  --text-accent: #a85706;
  --accent-text: #b45f06; /* darker orange so text stays readable on white */
  --rarity-epic: #946b06;
  --rarity-mythical: #a08a52;

  --badge-bg: #f4efe9;
  --badge-border: #e7dfd6;
  --input-bg: #ffffff;
  --input-border: #e1d8ce;
  --modal-overlay: rgba(30, 20, 10, 0.4);

  --shadow-sm: 0 1px 3px rgba(60, 35, 10, 0.08);
  --shadow-md: 0 4px 12px rgba(60, 35, 10, 0.1);
  --shadow-lg: 0 10px 30px rgba(60, 35, 10, 0.16);
  --accent-soft: rgba(248, 148, 26, 0.14);
}

/* ================= BASE ================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

body.no-scroll { overflow: hidden; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ================= BOT EMOJIS ================= */
.emo {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  vertical-align: -0.28em;
  flex-shrink: 0;
}
.emo-txt { line-height: 1; flex-shrink: 0; }

.chip, .pill, .seg-btn, .stat-k, .d-title, .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sub-title { display: flex; }
.thumb-icon .emo { width: 34px; height: 34px; }
.rows .thumb-icon .emo { width: 29px; height: 29px; }
.hero-icon .thumb-icon .emo { width: 58px; height: 58px; }
.hero-art-icon .emo { width: 72px; height: 72px; }
.d-title .emo { width: 20px; height: 20px; }
.sub-title .emo { width: 16px; height: 16px; }
.stat-k .emo { width: 14px; height: 14px; }
.empty-icon .emo { width: 40px; height: 40px; }

.nav-icon { display: inline-flex; align-items: center; justify-content: center; height: 24px; }
.nav-icon .emo { width: 24px; height: 24px; opacity: 0.55; filter: grayscale(0.6); transition: opacity var(--transition-fast), filter var(--transition-fast); }
.nav-item.active .nav-icon .emo, .nav-item:hover .nav-icon .emo { opacity: 1; filter: none; }

/* ================= HEADER ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding-top: var(--safe-top);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border-subtle), 0 2px 8px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}

.brand-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 0.3rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-main);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { border-color: var(--accent-border); color: var(--accent-text); }

.theme-toggle-btn {
  height: 40px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 0 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color var(--transition-fast);
}
.theme-toggle-btn:hover { border-color: var(--accent-border); }

/* Desktop section tabs */
.top-nav { display: none; }

/* ================= SEARCH ================= */
.search-bar {
  padding: 0 1rem 0.75rem;
}

.search-wrapper {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  height: 48px;
  padding: 0 2.75rem 0 2.75rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 16px; /* 16px stops iOS from zooming in */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.search-kbd {
  display: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
}
.search-clear:not([hidden]) + .search-kbd { display: none !important; }

/* ================= MAIN ================= */
.main-layout {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.page-head { margin: 0.25rem 0 1rem; }
.page-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.page-title .emo { width: 32px; height: 32px; }
.page-sub { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.25rem; }

.list-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* let the last chip peek out so people know it scrolls */
  padding: 2px 0;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  height: 36px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-main);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.chip:hover { border-color: var(--accent-border); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.filter-btn {
  height: 36px;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--badge-border);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-btn:hover, .filter-btn.active { border-color: var(--accent-border); color: var(--accent-text); }

.filter-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.result-meta:empty { display: none; }
.result-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  min-height: 1.2em;
}

/* ================= CARDS ================= */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.grid > *, .rows > * { min-width: 0; }


.card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 68px;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-subtle);
  border-radius: 12px;
  text-align: left;
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.card:hover { background: var(--bg-card-hover); border-color: var(--accent-border); }
.card:active { transform: scale(0.99); }
.card-static { cursor: default; }
.card-static:hover { background: var(--bg-card); border-color: var(--border-subtle); }
.card-static:active { transform: none; }

.thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg-surface-elevated);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.thumb-icon { font-size: 1.35rem; line-height: 1; }
.thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-surface-elevated);
}

.card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-label .emo { width: 15px; height: 15px; margin-right: 4px; }
.card-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-right {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.chev { color: var(--text-faint); flex-shrink: 0; }

/* Rarity accents */
.r-common { --rc: var(--rarity-common); }
.r-rare { --rc: var(--rarity-rare); }
.r-super-rare { --rc: var(--rarity-super-rare); }
.r-epic { --rc: var(--rarity-epic); }
.r-legendary { --rc: var(--rarity-legendary); }
.r-mythical { --rc: var(--rarity-mythical); }
.r-divine, .r-1-of-1 { --rc: var(--rarity-divine); }

.card[class*="r-"] { border-left-color: var(--rc); }
.card[class*="r-"] .card-name { color: var(--rc); }
.card[class*="r-"]:hover { border-color: var(--rc); }

/* Chip counts */
.chip-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.18);
  line-height: 1.5;
}
.chip.active .chip-count { background: rgba(0, 0, 0, 0.18); }

/* Group headers inside lists and search */
.group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0.85rem 0 0.15rem;
  color: var(--text-main);
}
.grid > .group-title:first-child, .search-group:first-child .group-title { margin-top: 0; }
.group-title .emo { width: 20px; height: 20px; }
.group-title[class*="r-"] { color: var(--rc); }
.group-count {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.group-toggle { margin-left: auto; padding: 0.25rem 0.25rem; font-family: var(--font-sans); }
.search-group + .search-group { margin-top: 1.5rem; }
.search-group .grid { margin-top: 0.5rem; }

.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.meta-row > span { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--text-main); }
.meta-row .text-btn { padding: 0; }

/* "+N more" chips */
.chip-more { color: var(--accent-text); border-style: dashed; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 1rem);
  transform: translate(-50%, 1rem);
  z-index: 500;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--text-main);
  color: var(--bg-body);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Classes tiers */
.tier + .tier { margin-top: 1.5rem; }
.tier-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.tier-num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-text);
}
.tier-hint { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }

/* Show more / empty */
.more-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 48px;
  margin: 1.25rem auto 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}
.more-btn span { color: var(--text-muted); font-weight: 500; }
.more-btn:hover { border-color: var(--accent-border); }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.empty-icon { font-size: 2rem; }
.empty strong { color: var(--text-main); }

.text-btn {
  background: none;
  border: none;
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.5rem;
}

.primary-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

/* ================= FOOTER ================= */
.site-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-faint);
  padding: 1.5rem 1rem;
}

/* ================= BOTTOM NAV (mobile) ================= */
.codex-page { padding-bottom: calc(var(--nav-h) + var(--safe-bottom)); }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}
.nav-item.active { color: var(--accent-text); }

/* ================= DETAIL PANEL ================= */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.detail-overlay.open { opacity: 1; pointer-events: auto; }

.detail-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.detail-panel:focus { outline: none; }
.detail-panel.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s ease;
}

.detail-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.5rem + var(--safe-top)) 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.detail-top-title {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.detail-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem calc(2rem + var(--safe-bottom));
}

/* Hero */
.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-art {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at center, var(--accent-soft) 0%, var(--bg-surface-elevated) 70%);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.75rem;
}
.hero-art > img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}
.hero-art-icon { display: none; font-size: 3.5rem; }
.hero-art.broken > img { display: none; }
.hero-art.broken .hero-art-icon { display: block; }

.hero-icon .thumb { width: 80px; height: 80px; border-radius: 18px; }
.hero-icon .thumb-icon { font-size: 2.4rem; }

.hero-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.85rem 0 0.5rem;
  overflow-wrap: anywhere;
}
.hero[class*="r-"] .hero-name { color: var(--rc); }

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-muted);
}
.pill[class*="r-"] { color: var(--rc); border-color: var(--rc); }

/* Divine: shifting black and gold, so it never looks like Epic */
/* Divine: a slow black-and-gold sweep behind the card (text stays still) */
@keyframes divine-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes divine-edge {
  0%, 100% { border-color: #e8b923; }
  50% { border-color: #1a1406; }
}
.card.r-divine,
.hero.r-divine .hero-icon .thumb {
  background:
    linear-gradient(110deg, rgba(232, 185, 35, 0.05) 0%, rgba(232, 185, 35, 0.2) 25%, rgba(0, 0, 0, 0.45) 50%, rgba(232, 185, 35, 0.2) 75%, rgba(232, 185, 35, 0.05) 100%),
    var(--bg-card);
  background-size: 200% 100%, auto;
  animation: divine-shift 10s linear infinite, divine-edge 10s ease-in-out infinite;
}
.hero.r-divine .hero-icon .thumb { border: 2px solid #e8b923; }
.pill.r-divine {
  background: #0d0b06;
  color: #f0c94a;
  animation: divine-edge 10s ease-in-out infinite;
}

/* Mythical: a slow pulse of light around the card (text stays still) */
@keyframes mythical-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 241, 204, 0); border-top-color: var(--border-subtle); border-right-color: var(--border-subtle); border-bottom-color: var(--border-subtle); }
  50% { box-shadow: 0 0 22px rgba(255, 241, 204, 0.38), inset 0 0 18px rgba(255, 241, 204, 0.08); border-top-color: rgba(255, 241, 204, 0.75); border-right-color: rgba(255, 241, 204, 0.75); border-bottom-color: rgba(255, 241, 204, 0.75); }
}
@keyframes mythical-glow-pill {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 241, 204, 0); }
  50% { box-shadow: 0 0 12px rgba(255, 241, 204, 0.5); }
}
.card.r-mythical,
.hero.r-mythical .hero-icon .thumb { animation: mythical-glow 5s ease-in-out infinite; border: 1px solid var(--border-subtle); }
.card.r-mythical { border-left: 4px solid var(--rc); }
.pill.r-mythical { animation: mythical-glow-pill 5s ease-in-out infinite; }

/* Segmented control (male/female art) */
.seg {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 3px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.seg-btn {
  height: 32px;
  padding: 0 1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.seg-btn.active { background: var(--bg-surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }

/* Detail sections */
.d-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 1rem;
  text-align: center;
}

.d-section { margin-top: 1.5rem; }

.d-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.d-count {
  font-size: 0.72rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  letter-spacing: 0;
}

.sub-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 1rem 0 0.5rem;
}

.muted { color: var(--text-muted); font-size: 0.9rem; }
.d-section > .muted + .stat-grid { margin-top: 0.5rem; }

.rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rows .card { min-height: 58px; padding: 0.5rem 0.65rem; }
.rows .thumb { width: 40px; height: 40px; }
.rows .thumb-icon { font-size: 1.15rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.4rem;
  margin-top: 1rem;
}
.d-section .stat-grid { margin-top: 0; }

.stat {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
}
.stat-k {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.stat-v { font-size: 1.05rem; font-weight: 700; }
.s-vitality .stat-v, .s-hp .stat-v { color: var(--stat-vit); }
.s-strength .stat-v { color: var(--stat-str); }
.s-agility .stat-v { color: var(--stat-agi); }
.s-defense .stat-v { color: var(--stat-def); }
.s-intelligence .stat-v { color: var(--stat-int); }
.s-luck .stat-v { color: var(--stat-luck); }

.chip-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip-link {
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.chip-link:hover { border-color: var(--accent-border); color: var(--accent-text); }
.chip-link.current { border-color: var(--accent-text); color: var(--accent-text); cursor: default; }

.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.path-arrow { color: var(--text-faint); font-weight: 700; }

/* Raid stages */
.stage {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-surface);
}
.stage + .stage { margin-top: 0.5rem; }
.stage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.stage summary::-webkit-details-marker { display: none; }
.stage summary::after { content: '+'; color: var(--text-muted); font-size: 1.2rem; }
.stage[open] summary::after { content: '−'; }
.stage summary > span:first-child { flex: 1; min-width: 0; }
.stage-body { padding: 0 1rem 1rem; }

/* ================= FILTER SHEET ================= */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 390;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: 20px 20px 0 0;
  padding: 0.5rem 1rem calc(1rem + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.sheet.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.28s ease;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-subtle);
  margin: 0.25rem auto 0.75rem;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.sheet-head h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.sheet-body { overflow-y: auto; margin-bottom: 1rem; }
.sheet-group + .sheet-group { margin-top: 1.25rem; }
.sheet-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.sheet-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sheet-subtree {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0.85rem 0 0.4rem;
}
.sheet-subtree .emo { width: 18px; height: 18px; }

/* ================= TABLET ================= */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sheet {
    left: 50%;
    right: auto;
    bottom: 1.5rem;
    width: 480px;
    border-radius: 20px;
    transform: translate(-50%, calc(100% + 2rem));
  }
  .sheet.open { transform: translate(-50%, 0); }
  .sheet-handle { display: none; }
}

/* ================= DESKTOP ================= */
@media (min-width: 900px) {
  .codex-page { padding-bottom: 0; }
  .bottom-nav { display: none; }

  .top-nav {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
  }
  .top-nav .nav-item {
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
  }
  .top-nav .nav-item svg { width: 18px; height: 18px; }
  .top-nav .nav-item:hover { color: var(--text-main); background: var(--bg-surface-elevated); }
  .top-nav .nav-item.active { color: var(--accent-text); background: var(--bg-surface-elevated); }

  .search-kbd { display: block; }

  .main-layout { padding: 1.5rem; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }

  .detail-panel {
    left: auto;
    width: 480px;
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
  }
  .detail-panel:not(.has-history) #detail-back { visibility: hidden; }
  .detail-body { padding: 1.25rem 1.5rem 2rem; }
}

/* Small laptops and tablets held sideways: six tabs plus header buttons need a tighter fit */
@media (min-width: 900px) and (max-width: 1279px) {
  .top-nav .nav-item { padding: 0.45rem 0.6rem; font-size: 0.85rem; gap: 0.35rem; }
  .codex-page #theme-toggle-label { display: none; }
  .codex-page .theme-toggle-btn { width: 40px; padding: 0; justify-content: center; }
  .header-container { gap: 0.75rem; }
}

@media (max-width: 480px) {
  .codex-page #theme-toggle-label { display: none; }
  .codex-page .theme-toggle-btn { width: 40px; padding: 0; justify-content: center; }
  .hero-art { height: 220px; }
}

/* Difficulty tones (d-1 easiest ... d-10 hardest) and World category colors.
   Subtle on purpose: a colored edge plus a faint wash. */
.d-1  { --tone: 74, 222, 128; }
.d-2  { --tone: 163, 230, 53; }
.d-3  { --tone: 250, 204, 21; }
.d-4  { --tone: 251, 191, 36; }
.d-5  { --tone: 251, 146, 60; }
.d-6  { --tone: 249, 115, 22; }
.d-7  { --tone: 239, 68, 68; }
.d-8  { --tone: 220, 38, 38; }
.d-9  { --tone: 190, 24, 93; }
.d-10 { --tone: 168, 85, 247; }
.cat-region    { --tone: 45, 212, 191; }
.cat-dungeon   { --tone: 248, 148, 26; }
.cat-labyrinth { --tone: 167, 139, 250; }

.card[class*=" d-"], .card[class*=" cat-"] {
  border-left-color: rgb(var(--tone));
  background: linear-gradient(90deg, rgba(var(--tone), 0.09), rgba(var(--tone), 0) 55%), var(--bg-card);
}
.card[class*=" d-"]:hover, .card[class*=" cat-"]:hover { border-color: rgba(var(--tone), 0.7); }
.group-title[class*=" d-"], .group-title[class*=" cat-"] { color: rgb(var(--tone)); }
[data-theme="light"] .group-title[class*=" d-"], [data-theme="light"] .group-title[class*=" cat-"] { filter: brightness(0.75); }
/* Action buttons inside detail pages (Compare, Swap...) */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 46px;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.action-btn:hover { background: var(--accent); color: var(--on-accent); }
.center { text-align: center; }

/* Compare picker */
.compare-title { text-align: center; margin-top: 1.25rem; font-size: 1.3rem; }
.compare-search { margin: 0.85rem 0 0.75rem; padding-left: 1rem; }
.compare-list .card { min-height: 58px; }

/* Compare result */
.cmp-heads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
}
.cmp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.85rem 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
}
.cmp-item:hover { border-color: var(--accent-border); }
.cmp-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cmp-item[class*="r-"] .cmp-name { color: var(--rc); }
.cmp-vs { align-self: center; font-family: var(--font-display); font-weight: 800; color: var(--text-faint); font-size: 0.85rem; }
.cmp-table {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
}
.cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}
.cmp-row + .cmp-row { border-top: 1px solid var(--border-subtle); }
.cmp-label { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-weight: 600; min-width: 0; }
.cmp-label .emo { width: 16px; height: 16px; }
.cmp-val { text-align: center; font-weight: 700; }
.cmp-val.win { color: #4ade80; }
.cmp-val.lose { color: var(--text-faint); }
[data-theme="light"] .cmp-val.win { color: #15803d; }
.cmp-actions { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.cmp-actions .action-btn { margin-top: 0.5rem; }
.cmp-actions .action-btn + .action-btn { background: transparent; border-color: var(--border-subtle); color: var(--text-main); }
/* ================= BUILD PLANNER ================= */
.pl-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--accent-border);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--bg-card);
  text-align: left;
  cursor: pointer;
}
.pl-entry .card-name { color: var(--accent-text); }

.planner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.pl-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 0.9rem;
  min-width: 0;
}
.pl-card + .pl-card { margin-top: 0.75rem; }
.pl-card .d-title { margin-bottom: 0.5rem; }
.pl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; }
.pl-card-head .d-title { margin-bottom: 0; }
.pl-note { font-size: 0.82rem; margin-bottom: 0.75rem; }
.pl-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.35rem; }
.pl-label small { font-weight: 500; color: var(--text-faint); }

/* Setup: class + level */
.pl-setup { display: grid; gap: 0.75rem; }
.pl-select {
  width: 100%;
  height: 46px;
  padding: 0 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-main);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}

/* Sticky summary + tabs */
.pl-sticky {
  position: sticky;
  top: var(--hdr, 0px);
  z-index: 40;
  margin: 0 -0.25rem;
  padding: 0.35rem 0.25rem 0.5rem;
  background: var(--bg-body);
}
.pl-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.pl-sum-class { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.pl-sum-class .emo, .pl-sum-class .emo-txt { width: 26px; height: 26px; font-size: 1.2rem; }
.pl-sum-class > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pl-sum-class strong { font-family: var(--font-display); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sum-class small { font-size: 0.72rem; color: var(--text-muted); }
.pl-sum-res { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.85rem; flex-shrink: 0; }
.pl-sum-res .emo { width: 16px; height: 16px; }
.pl-sum-pts {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--text-muted);
}
.pl-sum-pts.free { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); }
.pl-sum-pts.over { color: #f87171; border-color: rgba(248, 113, 113, 0.5); }

.pl-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 3px;
  border-radius: 12px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.pl-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 38px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 0;
}
.pl-tab .emo { width: 16px; height: 16px; }
.pl-tab.active { background: var(--bg-surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }

/* Overview */
.pl-res-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.pl-res {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  min-width: 0;
}
.pl-res-v { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.pl-res-hint { font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }
.pl-totals { display: grid; }
.pl-total {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.1rem;
}
.pl-total + .pl-total { border-top: 1px solid var(--border-subtle); }
.pl-total-k { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.88rem; }
.pl-total-k .emo { width: 16px; height: 16px; }
.pl-total-why { font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-total-v { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.s-vitality .pl-total-v { color: var(--stat-vit); }
.s-strength .pl-total-v { color: var(--stat-str); }
.s-agility .pl-total-v { color: var(--stat-agi); }
.s-defense .pl-total-v { color: var(--stat-def); }
.s-intelligence .pl-total-v { color: var(--stat-int); }
.s-luck .pl-total-v { color: var(--stat-luck); }
.pl-summary .s-luck { color: var(--stat-luck); }
.pl-luck-boost { color: var(--stat-luck); font-weight: 700; }
.pl-luck-hint { font-size: 0.72rem; color: var(--stat-luck); font-weight: 700; opacity: 0.9; margin-left: 0.2rem; }

/* Blacksmith Luck & Refinement Perk Card */
.pl-perk-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid rgba(234, 179, 8, 0.28);
  margin-bottom: 0.75rem;
}
.pl-perk-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.pl-perk-icon .emo {
  width: 26px;
  height: 26px;
}
.pl-perk-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main);
}
.pl-perk-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.pl-perk-desc strong {
  color: var(--stat-luck);
}
.pl-perk-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--stat-luck);
  white-space: nowrap;
}

/* Stats tab */
.pl-points-head { display: flex; align-items: center; gap: 0.75rem; }
.pl-points-big { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--accent-text); }
.pl-points-big.over { color: #f87171; }
.pl-points-sub { display: flex; flex-direction: column; font-weight: 700; }
.pl-points-sub small { font-weight: 500; color: var(--text-muted); font-size: 0.8rem; }
.pl-sources { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
.pl-sources span {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
}
.pl-sources b { color: var(--text-main); }
.pl-stones .pl-alloc-k { flex-wrap: nowrap; }
.pl-stones, .pl-alloc, .pl-tome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem;
  align-items: center;
  gap: 0.5rem;
}
.pl-alloc { grid-template-columns: minmax(0, 1fr) 9.5rem 2.75rem; padding: 0.55rem 0; }
.pl-alloc + .pl-alloc { border-top: 1px solid var(--border-subtle); }
.pl-alloc-k { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; min-width: 0; flex-wrap: wrap; }
.pl-alloc-k .emo { width: 18px; height: 18px; }
.pl-alloc-k small { width: 100%; font-weight: 500; font-size: 0.72rem; color: var(--text-faint); padding-left: 1.6rem; margin-top: -0.15rem; }
.pl-alloc-total { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.pl-inline-btn { margin-top: 0.4rem; padding-left: 0; }
.seg-sm { margin-top: 0; }
.seg-sm .seg-btn { height: 28px; padding: 0 0.7rem; font-size: 0.8rem; }

.stepper { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.step {
  min-width: 38px;
  height: 38px;
  padding: 0 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
}
.step:active { transform: scale(0.95); }
.step-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-main);
  text-align: center;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
}
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pl-tomes summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; }
.pl-tomes summary::-webkit-details-marker { display: none; }
.pl-tomes summary .d-title { margin: 0; }
.pl-tomes summary::after { content: '+'; margin-left: auto; color: var(--text-muted); font-size: 1.2rem; }
.pl-tomes[open] summary::after { content: '−'; }
.pl-tomes[open] summary { margin-bottom: 0.5rem; }
.pl-tome-grid { display: grid; gap: 0.4rem; }

/* Gear tab */
.pl-slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.pl-slot { min-width: 0; }
.pl-slot .card-text { min-width: 0; }
.pl-slot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 64px;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-subtle);
  background: var(--bg-surface);
  text-align: left;
  cursor: pointer;
}
.pl-slot.is-empty { border-style: dashed; border-left-style: solid; }
.pl-slot.is-empty .card-name { color: var(--text-muted); font-weight: 600; }
.pl-slot[class*=" r-"] { border-left-color: var(--rc); }
.pl-slot[class*=" r-"] .card-name { color: var(--rc); }
.pl-slot .thumb { width: 42px; height: 42px; }
.pl-slot-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.card-label.warn { color: #f87171; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.pl-chip .emo { width: 12px; height: 12px; }
.pl-chip.s-vitality { color: var(--stat-vit); }
.pl-chip.s-strength { color: var(--stat-str); }
.pl-chip.s-agility { color: var(--stat-agi); }
.pl-chip.s-defense { color: var(--stat-def); }
.pl-chip.s-intelligence { color: var(--stat-int); }
.pl-chip.s-luck { color: var(--stat-luck); }

/* Gear picker sheet */
.sheet.sheet-tall { height: 88vh; max-height: 88vh; }
.sheet.sheet-tall .sheet-body { flex: 1; min-height: 0; }
.pk-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  padding-bottom: 0.5rem;
}
.pk-search { padding-left: 1rem; margin-bottom: 0.6rem; }
.pk-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.3rem; }
.pk-head .chips { margin-bottom: 0.4rem; }
.chip-sm { height: 30px; padding: 0 0.75rem; font-size: 0.78rem; }
.pk-count { font-size: 0.8rem; margin: 0.25rem 0 0.5rem; }
.pk-remove {
  width: 100%;
  height: 42px;
  margin-top: 0.25rem;
  border-radius: 12px;
  border: 1px dashed rgba(248, 113, 113, 0.5);
  background: transparent;
  color: #f87171;
  font-weight: 700;
  cursor: pointer;
}
.pk-item { align-items: center; }
.pk-item.equipped { box-shadow: 0 0 0 2px var(--accent-border) inset; }
.pk-delta { flex-shrink: 0; font-size: 0.8rem; font-weight: 800; }
.pk-delta.up { color: #4ade80; }
.pk-delta.down { color: #f87171; }
[data-theme="light"] .pk-delta.up { color: #15803d; }

/* Moves tab */
.pl-move-chips { margin-bottom: 0.6rem; }
.pl-move-search { padding-left: 1rem; margin-bottom: 0.6rem; }
.card.pl-ok .card-right { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.card.pl-no { opacity: 0.75; }
.card.pl-no .card-right {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  white-space: normal;
  max-width: 6rem;
  text-align: center;
  line-height: 1.2;
  border-radius: 10px;
  padding: 0.2rem 0.45rem;
}
[data-theme="light"] .card.pl-ok .card-right { color: #15803d; }

/* Layout: tabs on phones; overview stays beside the tabs on desktop */
.pl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.pl-main, .pl-aside, .pl-sticky, .pl-setup { min-width: 0; }
.pl-aside { display: none; }
.pl-actions { display: grid; gap: 0.5rem; }
.pl-actions .action-btn { margin-top: 0; }
.action-btn.subtle { background: transparent; border-color: var(--border-subtle); color: var(--text-main); }

@media (max-width: 380px) {
  .pl-sum-res:nth-of-type(2) { display: none; } /* keep MP/SP; drop HP on the tiniest phones */
  .pl-tab { font-size: 0.78rem; gap: 0.2rem; }
  .pl-tab .emo { display: none; }
  .pl-alloc { grid-template-columns: minmax(0, 1fr) 8.5rem 2.25rem; }
  .pl-stones, .pl-tome { grid-template-columns: minmax(0, 1fr) 8.5rem; }
}

@media (min-width: 640px) {
  .pl-setup { grid-template-columns: 1fr 1fr; }
  .pl-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-tome-grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .pl-actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .pl-aside { display: block; position: sticky; top: calc(var(--hdr, 0px) + 7rem); }
  .pl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-tab-overview { display: none; }
}

/* Keep phones uncluttered: counts and section blurbs only from tablet up */
@media (max-width: 639px) {
  .chip-count, .page-sub { display: none; }
  .page-title { font-size: 1.5rem; }
  .page-title .emo { width: 28px; height: 28px; }
}

/* Very small phones (iPhone SE and similar) */
@media (max-width: 380px) {
  .brand-subtitle { display: none; }
  .brand-title { font-size: 1.2rem; }
  .header-container { gap: 0.5rem; padding: 0.6rem 0.75rem; }
  .search-bar { padding: 0 0.75rem 0.65rem; }
  .main-layout { padding: 0.85rem 0.75rem; }
  .nav-item { font-size: 0.62rem; }
  .nav-icon .emo, .nav-icon svg { width: 22px; height: 22px; }
}

/* Active filter tags */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tag {
  height: 28px;
  padding: 0 0.6rem 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.tag::after { content: '✕'; font-size: 0.7rem; opacity: 0.8; }
.tags .text-btn { padding: 0 0.25rem; font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}