/* ============================================================
   WILDSHAPE.CSS — Wildshape & Familiar page unique styles
   ============================================================ */

/* ── PAGE-SPECIFIC COLOURS ───────────────────────────────────── */
:root {
  --druid-green:        #2a6a3a;
  --druid-green-light:  #3a9a5a;
  --find-purple:        #6a2a8a;
  --find-purple-light:  #8a4aaa;
}

/* ── BACKGROUND ──────────────────────────────────────────────── */
body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,80,40,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(60,0,100,0.12) 0%, transparent 60%);
}

/* ── MODE TOGGLE (druid / familiar) ─────────────────────────── */
.mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}

.mode-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  color: var(--text-muted);
}

.mode-btn:hover { color: var(--text-light); }

.mode-btn.active.druid {
  background: linear-gradient(135deg, #3a9a5a, #2a6a3a);
  color: #fff;
  box-shadow: 0 1px 6px rgba(58,154,90,0.35);
}

.mode-btn.active.familiar {
  background: linear-gradient(135deg, #8a4aaa, #6a2a8a);
  color: #fff;
  box-shadow: 0 1px 6px rgba(138,74,170,0.35);
}

/* ── DRUID INFO BAR ──────────────────────────────────────────── */
.druid-info-bar {
  background: rgba(42,106,58,0.15);
  border-bottom: 1px solid rgba(58,154,90,0.2);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.druid-rule { font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.druid-rule strong { color: var(--druid-green-light); font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.05em; }

/* ── FAMILIAR INFO BAR ───────────────────────────────────────── */
.familiar-info-bar {
  background: rgba(106,42,138,0.12);
  border-bottom: 1px solid rgba(138,74,170,0.2);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.familiar-rule { font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.familiar-rule strong { color: #8a4aaa; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.05em; }

/* ── DRUID ELIGIBILITY CHECKER ───────────────────────────────── */
.druid-level-banner {
  padding: 6px 24px;
  background: rgba(42,106,58,0.08);
  border-bottom: 1px solid rgba(42,106,58,0.15);
  display: flex;
  align-items: center;
  gap: 10px;
}

.druid-level-banner label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── BEAST CARD ──────────────────────────────────────────────── */
.beast-card {
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 16px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: #222;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.83rem;
  line-height: 1.4;
  border: 2.5px solid transparent;
}

.beast-card:hover             { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(0,0,0,0.6); }
.beast-card.wildshape         { border-color: rgba(42,106,58,0.3); }
.beast-card.familiar          { border-color: rgba(106,42,138,0.3); }

/* ── BEAST CARD INNER ────────────────────────────────────────── */
.card-header          { padding: 9px 11px 7px; display: flex; align-items: flex-start; gap: 8px; }
.card-name-block      { flex: 1; min-width: 0; }
.card-name            { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(0.68rem, 2vw, 0.88rem); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.35); overflow-wrap: break-word; }
.card-subline         { font-size: 0.7rem; color: rgba(255,255,255,0.75); font-style: italic; margin-top: 1px; }
.cr-badge             { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.7rem; background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.95); border-radius: 3px; padding: 2px 6px; flex-shrink: 0; white-space: nowrap; margin-top: 2px; }

/* ── BEAST CORE STATS ────────────────────────────────────────── */
.card-core-stats    { display: grid; grid-template-columns: repeat(4,1fr); padding: 5px 11px 4px; background: #fff; gap: 2px; }
.core-stat          { text-align: center; }
.core-stat .cs-label { font-size: 0.6rem; color: #888; font-family: 'Cinzel', serif; letter-spacing: 0.08em; text-transform: uppercase; display: block; }
.core-stat .cs-val  { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem; color: #222; }

/* ── TAGS ────────────────────────────────────────────────────── */
.card-tags { padding: 4px 11px 5px; background: #f7f5f0; border-top: 1px solid #eee; display: flex; flex-wrap: wrap; gap: 3px; }
.tag { font-family: 'Cinzel', serif; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 3px; padding: 2px 5px; }

.tag.swim        { background: #ddeeff; color: #336; }
.tag.fly         { background: #eeeeff; color: #446; }
.tag.climb       { background: #eefee8; color: #363; }
.tag.burrow      { background: #f5f0e0; color: #553; }
.tag.darkvision  { background: #2a2a3a; color: #aaa; }
.tag.blindsight  { background: #1a1a2a; color: #888; }
.tag.pack-tactics{ background: #fff0e0; color: #a63; }
.tag.special     { background: #f0e8ff; color: #553; }
.tag.eligible    { background: #e8ffe8; color: #363; }
.tag.level-req   { background: rgba(201,168,76,0.15); color: #7a5500; border: 1px solid rgba(201,168,76,0.3); }

/* ── CARD NOTE ───────────────────────────────────────────────── */
.card-note { padding: 4px 11px 7px; background: #fff; font-size: 0.75rem; color: #444; font-style: italic; border-top: 1px solid #f0f0f0; line-height: 1.35; }

/* ── MODAL STAT GRID (AC / HP / Speed / Percep.) ─────────────── */
.stat-row-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.stat-box       { background: #f7f5f0; border-radius: 5px; padding: 7px 8px; text-align: center; }
.stat-box .lb   { font-family: 'Cinzel', serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888; display: block; }
.stat-box .vl   { font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; color: #222; }

/* ── ABILITY SCORE GRID (STR / DEX / CON / INT / WIS / CHA) ─── */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 14px;
}
.ab-box {
  background: #f7f5f0;
  border-radius: 5px;
  padding: 6px 4px;
  text-align: center;
}
.ab-box .abl {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}
.ab-box .abs {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #222;
  display: block;
}
.ab-box .abm { font-size: 0.7rem; color: #555; display: block; }

/* ── MODAL TRAIT / ACTION SECTIONS ──────────────────────────── */
.msec { margin-top: 12px; }
.msec-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #eee;
  display: block;
}
.mabil { margin-bottom: 5px; font-size: 0.88rem; color: #333; line-height: 1.45; }
.mabil strong { font-weight: 700; }

/* ── ELIGIBILITY PANEL ───────────────────────────────────────── */
.eligibility-panel {
  background: #f0faf4;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid #c0e0c8;
}
.eligibility-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #2a6a3a;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.eligibility-row { font-size: 0.85rem; color: #333; margin-bottom: 3px; }
.eligibility-row .ok { color: #2a6a3a; font-weight: 600; }
.eligibility-row .no { color: #8a2a2a; font-weight: 600; }

/* ── RESPONSIVE: 3-col ability grid on small screens ─────────── */
@media (max-width: 480px) {
  .ab-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  #card-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }

  /* Header: allow wrapping so mode-toggle + hamburger both fit */
  #app-header { overflow: hidden; }
  .header-top { flex-wrap: wrap; gap: 4px; padding: 8px 12px; }
  .header-top > div { gap: 6px; }

  /* Smaller mode buttons on mobile */
  .mode-btn { font-size: 0.6rem; padding: 5px 9px; letter-spacing: 0.04em; }

  /* Hide info bars on mobile */
  .druid-info-bar,
  .familiar-info-bar { display: none; }
}

@media (max-width: 420px) {
  .mode-btn { font-size: 0.55rem; padding: 4px 7px; letter-spacing: 0; }
}

@media (max-width: 480px) { #card-grid { grid-template-columns: 1fr; } }