:root {
  --forest:        #1B3A2D;
  --forest-light:  #2A5240;
  --forest-dark:   #0F2219;
  --parchment:     #F4E4C1;
  --parchment-dim: #EDD9A8;
  --gold:          #C9943A;
  --gold-light:    #E5B45A;
  --ink:           #2D1B0E;
  --ink-light:     #5C3D20;
  --ink-faint:     #9B7B5A;
  --white:         #FEFAF3;
  --red:           #8B2020;
  --surface:       rgba(244,228,193,0.6);
  --border:        rgba(201,148,58,0.35);
  --border-strong: rgba(201,148,58,0.7);
  --shadow:        rgba(27,58,45,0.15);
  --shadow-strong: rgba(27,58,45,0.3);
  --font-display:  'Cinzel', 'Times New Roman', serif;
  --font-body:     'Lora', Georgia, serif;
  --radius:        8px;
  --radius-lg:     14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(27,58,45,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(201,148,58,0.08) 0%, transparent 60%);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: 0.03em; }

/* ── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: none; transition: all 0.18s ease; white-space: nowrap;
}
.btn-primary   { background: var(--forest); color: var(--parchment); border: 1px solid var(--forest-light); box-shadow: 0 2px 8px var(--shadow); }
.btn-primary:hover { background: var(--forest-light); box-shadow: 0 4px 14px var(--shadow-strong); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--forest); border: 1.5px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface); border-color: var(--gold); }
.btn-danger    { background: transparent; color: var(--red); border: 1.5px solid rgba(139,32,32,0.35); }
.btn-danger:hover { background: rgba(139,32,32,0.08); border-color: var(--red); }
.btn-gold      { background: var(--gold); color: var(--forest-dark); border: 1px solid var(--gold-light); box-shadow: 0 2px 8px rgba(201,148,58,0.3); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn:disabled  { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn-sm        { padding: 7px 14px; font-size: 0.72rem; }
.btn-icon      { background: none; border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-faint); transition: all 0.15s; font-size: 0.85rem; }
.btn-icon:hover { border-color: var(--gold); color: var(--ink); }
.btn-icon.danger:hover { border-color: var(--red); color: var(--red); }

/* ── Inputs ────────────────────────────────────── */
.input {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius); background: var(--white);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,148,58,0.15); }
.input::placeholder { color: var(--ink-faint); }
select.input { cursor: pointer; }

/* ── Cards ─────────────────────────────────────── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow); }

/* ── Badge ─────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.badge-forest { background: rgba(27,58,45,0.1); color: var(--forest); border: 1px solid rgba(27,58,45,0.2); }
.badge-gold   { background: rgba(201,148,58,0.12); color: var(--ink-light); border: 1px solid rgba(201,148,58,0.3); }

/* ── Label ─────────────────────────────────────── */
.field-label { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); display: block; margin-bottom: 6px; }

/* ── Alerts ────────────────────────────────────── */
.alert-error   { background: rgba(139,32,32,0.08); border: 1px solid rgba(139,32,32,0.25); border-radius: var(--radius); padding: 10px 14px; color: var(--red); font-size: 0.9rem; }
.alert-success { background: rgba(27,58,45,0.08); border: 1px solid rgba(27,58,45,0.25); border-radius: var(--radius); padding: 10px 14px; color: var(--forest); font-size: 0.9rem; }

/* ── Spinner ───────────────────────────────────── */
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--forest); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Fade in ───────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease forwards; }

/* ── Layout shell ──────────────────────────────── */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.app-header {
  background: var(--forest);
  border-bottom: 2px solid rgba(201,148,58,0.4);
  box-shadow: 0 2px 16px rgba(27,58,45,0.25);
  position: sticky; top: 0; z-index: 100;
}
.app-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 62px; display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; }
.brand-icon  { font-size: 1.3rem; }
.brand-text  { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--parchment); letter-spacing: 0.04em; white-space: nowrap; }
.brand-ed    { font-family: var(--font-display); font-size: 0.6rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

.app-nav { display: flex; gap: 4px; flex: 1; }
.nav-item {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
  border-radius: var(--radius); font-family: var(--font-display); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244,228,193,0.6); transition: all 0.15s ease; cursor: pointer;
  border: 1px solid transparent; background: none;
}
.nav-item:hover  { color: rgba(244,228,193,0.9); }
.nav-item.active { background: rgba(201,148,58,0.15); color: var(--gold); border-color: rgba(201,148,58,0.25); }

.user-area { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-name { font-family: var(--font-body); font-size: 0.8rem; color: rgba(244,228,193,0.5); }

.app-main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 36px 24px; }

/* ── Auth page ─────────────────────────────────── */
.auth-page { display: flex; min-height: 100vh; }
.auth-panel {
  flex: 0 0 420px; background: var(--forest);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(201,148,58,0.15) 0%, transparent 60%);
  display: flex; align-items: center; justify-content: center; padding: 60px 48px;
}
.auth-panel-inner { text-align: center; }
.auth-emblem  { font-size: 3rem; margin-bottom: 24px; display: block; opacity: 0.8; }
.auth-title   { font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; color: var(--parchment); line-height: 1.1; letter-spacing: 0.05em; margin-bottom: 12px; }
.auth-sub     { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 36px; }
.auth-div     { height: 1px; background: rgba(201,148,58,0.3); margin: 0 auto 32px; width: 60px; }
.auth-quote   { font-family: var(--font-body); font-style: italic; font-size: 0.95rem; color: rgba(244,228,193,0.65); line-height: 1.7; }
.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-form-card { width: 100%; max-width: 420px; }
.auth-form-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--forest); margin-bottom: 8px; }
.auth-form-sub   { color: var(--ink-faint); font-size: 0.95rem; margin-bottom: 32px; }
.auth-form       { display: flex; flex-direction: column; gap: 16px; }
.auth-field      { display: flex; flex-direction: column; }
.auth-switch     { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; align-items: center; }
.auth-link       { background: none; border: none; color: var(--gold); font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; text-decoration: underline; }

/* ── Roster List ───────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.page-title  { font-family: var(--font-display); font-size: 2rem; color: var(--forest); margin-bottom: 4px; }
.page-sub    { color: var(--ink-faint); font-size: 0.95rem; }
.header-actions { display: flex; gap: 10px; align-items: center; }

.form-card   { padding: 28px; margin-bottom: 28px; border-left: 4px solid var(--gold); }
.form-title  { font-family: var(--font-display); font-size: 1.1rem; color: var(--forest); margin-bottom: 20px; }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-buttons { display: flex; gap: 10px; justify-content: flex-end; }

.centered    { display: flex; justify-content: center; padding: 80px 0; }
.empty-state { text-align: center; padding: 80px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty-icon  { font-size: 3rem; opacity: 0.3; }
.empty-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.empty-sub   { color: var(--ink-faint); font-size: 0.95rem; margin-bottom: 8px; }

.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.roster-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.roster-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--forest); line-height: 1.2; }
.card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.stats-row   { display: flex; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.stat        { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; gap: 4px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat-icon   { font-size: 0.75rem; color: var(--gold); }
.stat-label  { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.stat-value  { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); font-weight: 600; }
.card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); }
.card-footer-btns { display: flex; gap: 8px; }
.last-edited { font-size: 0.78rem; color: var(--ink-faint); }

/* ── Modal ─────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(27,58,45,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(4px); }
.modal         { padding: 32px; max-width: 420px; width: 90%; }
.modal-title   { font-family: var(--font-display); color: var(--red); margin-bottom: 10px; }
.modal-body    { color: var(--ink-light); margin-bottom: 24px; font-size: 0.95rem; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Placeholder page ──────────────────────────── */
.placeholder {
  text-align: center; padding: 80px 24px;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 2px dashed var(--border-strong);
}
.placeholder-icon  { font-size: 2.5rem; margin-bottom: 16px; }
.placeholder-title { font-family: var(--font-display); color: var(--forest); margin-bottom: 10px; }
.placeholder-sub   { color: var(--ink-faint); max-width: 400px; margin: 0 auto; line-height: 1.6; }

/* ── Page back-row ─────────────────────────────── */
.back-row { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.back-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--forest); }

/* ── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--parchment-dim, #edd9a8); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Loading screen ────────────────────────────── */
.loading-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; }
.loading-text   { font-family: var(--font-display); color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.1em; }

@media (max-width: 700px) {
  .auth-panel { display: none; }
  .form-grid  { grid-template-columns: 1fr; }
  .app-header-inner { gap: 12px; }
  .brand-text { font-size: 0.85rem; }
  .user-name  { display: none; }
}

/* ── Builder ──────────────────────────────────────────────────────────── */
.builder-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
  margin-bottom: 20px; flex-wrap: wrap;
  box-shadow: 0 2px 8px var(--shadow);
}
.builder-topbar-center { display: flex; gap: 10px; flex: 1; min-width: 0; }
.builder-topbar-right  { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.builder-name-input    { font-family: var(--font-display); font-weight: 600; font-size: 1rem; max-width: 220px; }
.builder-allegiance-select { max-width: 160px; }

.builder-stat-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.2s;
}
.pill-label { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.pill-value { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }

/* Allegiance card */
.allegiance-card { padding: 20px; margin-bottom: 20px; border-left: 4px solid var(--gold); }
.allegiance-card-inner { display: flex; flex-direction: column; gap: 12px; }
.allegiance-name  { font-family: var(--font-display); font-size: 1.2rem; color: var(--forest); margin-bottom: 4px; }
.allegiance-desc  { color: var(--ink-faint); font-size: 0.9rem; line-height: 1.5; font-style: italic; }
.allegiance-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.allegiance-bonus, .allegiance-magic { display: flex; flex-direction: column; gap: 4px; }
.bonus-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.bonus-text  { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }

/* Models header */
.models-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--forest); }

/* Species picker */
.species-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.species-filter-btn {
  padding: 5px 12px; border-radius: 100px; font-family: var(--font-display);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer; border: 1.5px solid var(--border); background: transparent;
  color: var(--ink-light); transition: all 0.15s;
}
.species-filter-btn:hover  { border-color: var(--gold); color: var(--ink); }
.species-filter-btn.active { background: var(--forest); color: var(--parchment); border-color: var(--forest); }

.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 8px; max-height: 380px; overflow-y: auto; padding: 4px; }
.species-pick-btn {
  padding: 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: left; transition: all 0.15s;
  display: flex; flex-direction: column; gap: 5px;
}
.species-pick-btn:hover:not([disabled]) { border-color: var(--gold); background: var(--white); box-shadow: 0 2px 8px var(--shadow); }
.species-pick-disabled { opacity: 0.4; cursor: not-allowed !important; }
.species-pick-name  { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--forest); }
.species-pick-info  { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-faint); }
.species-pick-fee   { font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.species-pick-skills { display: flex; gap: 3px; flex-wrap: wrap; }

/* Model cards */
.model-card { padding: 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.model-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.model-header-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.model-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.model-fee { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--gold); }
.model-species-row { font-size: 0.85rem; color: var(--ink-light); }

/* Stats table */
.stats-table { display: grid; grid-template-columns: repeat(9, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat-cell { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-right: 1px solid var(--border); background: var(--surface); }
.stat-cell:last-child { border-right: none; }
.stat-cell-label { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); }
.stat-cell-value { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.stat-boosted { background: rgba(201,148,58,0.12); }
.stat-boosted .stat-cell-value { color: var(--gold); font-weight: 700; }

/* Model extras */
.model-extras { background: var(--surface); border-radius: var(--radius); padding: 12px; border: 1px solid var(--border); }
.extras-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.model-skills { display: flex; flex-direction: column; gap: 6px; }
.skills-list  { display: flex; flex-wrap: wrap; gap: 5px; }
.model-notes-row { }

@media (max-width: 700px) {
  .stats-table { grid-template-columns: repeat(5,1fr); }
  .extras-row  { grid-template-columns: 1fr; }
  .builder-topbar-center { flex-direction: column; }
  .builder-topbar-right { gap: 6px; }
}

/* ── Stage 3: Equipment & Skills ──────────────────────────────────────── */
.model-section { display:flex; flex-direction:column; gap:8px; }
.model-section-header { display:flex; justify-content:space-between; align-items:center; }

/* Equipment slots grid */
.equip-slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.equip-slot {
  padding:10px 12px; border-radius:var(--radius); border:1.5px dashed var(--border);
  cursor:pointer; transition:all 0.15s; min-height:64px; display:flex; flex-direction:column; gap:4px;
}
.equip-slot:hover:not(.equip-slot-blocked) { border-color:var(--gold); background:rgba(201,148,58,0.05); }
.equip-slot-blocked { opacity:0.4; cursor:not-allowed; border-style:solid; }
.equip-slot-label { font-family:var(--font-display); font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.equip-slot-empty { font-size:0.82rem; color:var(--border-strong); font-style:italic; }
.equip-slot-blocked-msg { font-size:0.78rem; color:var(--ink-faint); font-style:italic; }
.equip-slot-filled { display:flex; flex-direction:column; gap:3px; }
.equip-slot-name  { font-family:var(--font-display); font-size:0.78rem; font-weight:600; color:var(--forest); }
.equip-slot-cost  { font-size:0.7rem; color:var(--gold); font-family:var(--font-display); font-weight:700; }
.equip-slot-effect{ font-size:0.7rem; color:var(--ink-faint); }
.equip-total-cost { font-family:var(--font-display); }

/* Equipment picker modal */
.equip-picker-modal, .skill-picker-modal {
  padding:24px; width:90%; max-width:560px; max-height:80vh;
  display:flex; flex-direction:column; gap:12px; overflow:hidden;
}
.equip-picker-header { display:flex; justify-content:space-between; align-items:center; }
.equip-picker-pool, .skill-picker-pool {
  overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  padding-right:4px; flex:1;
}
.equip-pick-item {
  padding:10px 14px; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface); cursor:pointer; text-align:left; transition:all 0.15s;
  display:flex; flex-direction:column; gap:4px;
}
.equip-pick-item:hover:not([disabled]) { border-color:var(--gold); background:var(--white); }
.equip-pick-current { border-color:var(--forest); background:rgba(27,58,45,0.06); }
.equip-pick-warn    { border-color:rgba(139,32,32,0.3); }
.equip-pick-remove  { border-color:rgba(139,32,32,0.3); }
.equip-pick-top   { display:flex; justify-content:space-between; align-items:center; }
.equip-pick-name  { font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--ink); }
.equip-pick-cost  { font-family:var(--font-display); font-weight:700; color:var(--gold); font-size:0.85rem; }
.equip-pick-effect{ font-size:0.78rem; color:var(--forest); font-weight:600; }
.equip-pick-tag   { display:inline-flex; padding:2px 7px; border:1px solid var(--border); border-radius:100px; font-size:0.65rem; color:var(--ink-faint); margin-right:4px; }
.equip-pick-notes { font-size:0.78rem; color:var(--ink-faint); line-height:1.4; margin:0; }

/* Skill picker */
.skill-picker-modal { max-width:600px; }
.skill-cat-group  { margin-bottom:12px; }
.skill-cat-label  { font-family:var(--font-display); font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; display:block; }
.skill-pick-btn {
  width:100%; padding:10px 14px; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface); cursor:pointer; text-align:left; margin-bottom:5px;
  display:flex; flex-direction:column; gap:3px; transition:all 0.15s;
}
.skill-pick-btn:hover   { border-color:var(--gold); background:var(--white); }
.skill-pick-active      { border-color:var(--forest); background:rgba(27,58,45,0.06); }
.skill-pick-top  { display:flex; justify-content:space-between; align-items:center; }
.skill-pick-name { font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--ink); }
.skill-pick-req  { font-size:0.72rem; color:var(--gold); font-style:italic; }
.skill-pick-notes{ font-size:0.78rem; color:var(--ink-faint); line-height:1.4; margin:0; }

/* Skill badge (removable) */
.skill-badge { cursor:pointer; transition:opacity 0.15s; }
.skill-badge:hover { opacity:0.7; }

@media (max-width:700px) {
  .equip-slots-grid { grid-template-columns:1fr 1fr; }
}

/* ── Stage 4: Campaign Tracker ────────────────────────────────────────── */
.camp-stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin-bottom:20px; }
.camp-stat-card { padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.camp-stat-icon { font-size:1.4rem; }
.camp-stat-val  { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--forest); }
.camp-stat-label{ font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }

.camp-phase-row { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.camp-phase-row .btn { flex:1; justify-content:center; padding:14px; }

.camp-step-card  { padding:24px; margin-bottom:16px; }
.camp-step-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.camp-step-header h3 { font-family:var(--font-display); font-size:1.1rem; color:var(--forest); }
.camp-step-num  { width:32px; height:32px; border-radius:50%; background:var(--forest); color:var(--parchment);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.85rem; font-weight:700; flex-shrink:0; }
.camp-step-desc  { color:var(--ink-faint); font-size:0.92rem; line-height:1.5; margin-bottom:16px; }

/* Dice roller */
.camp-dice-row   { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.camp-dice-result{ display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:var(--surface); border:1.5px solid var(--gold); border-radius:var(--radius); }
.camp-dice-num   { font-family:var(--font-display); font-size:1.8rem; font-weight:900; color:var(--forest); min-width:36px; text-align:center; }
.camp-dice-name  { font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--ink); }
.camp-quest-detail{ margin-top:14px; padding:14px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }
.camp-quest-desc  { font-size:0.92rem; color:var(--ink); margin-bottom:8px; line-height:1.5; }
.camp-quest-rewards{ font-size:0.85rem; color:var(--ink-faint); line-height:1.5; }
.camp-side-quest-result{ display:flex; align-items:flex-start; gap:12px; padding:10px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }

/* Fate table */
.fate-table { width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:0.88rem; }
.fate-table th { font-family:var(--font-display); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); padding:8px 10px; border-bottom:2px solid var(--border); text-align:left; }
.fate-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
.fate-table tr:last-child td { border-bottom:none; }
.camp-fate-result { padding:12px 16px; background:rgba(201,148,58,0.1); border:1px solid var(--gold); border-radius:var(--radius); font-size:0.92rem; }

/* Models table */
.camp-models-table { display:flex; flex-direction:column; }
.camp-models-header{ display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1fr 1.5fr; gap:8px; padding:6px 10px;
  font-family:var(--font-display); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); border-bottom:2px solid var(--border); }
.camp-model-row { display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1fr 1.5fr; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border); font-size:0.88rem; align-items:center; }
.camp-model-row:last-child { border-bottom:none; }
.camp-model-name { font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--forest); }

/* Post-battle progress */
.pb-progress { display:flex; gap:6px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.pb-step-dot { width:32px; height:32px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.72rem; font-weight:700; color:var(--ink-faint); transition:all 0.2s; }
.pb-step-dot.active { border-color:var(--forest); background:var(--forest); color:var(--parchment); }
.pb-step-dot.done   { border-color:var(--gold); background:var(--gold); color:var(--forest-dark); }
.pb-nav-row { display:flex; justify-content:space-between; margin-top:16px; }
.pb-field-row { display:flex; gap:20px; flex-wrap:wrap; }
.pb-model-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pb-offduty-help { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:10px 14px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); font-size:0.85rem; color:var(--ink-faint); margin-bottom:8px; }

/* Game history */
.history-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.history-row:last-child { border-bottom:none; }

@media (max-width:700px) {
  .camp-stats-row { grid-template-columns:repeat(3,1fr); }
  .camp-models-header,.camp-model-row { grid-template-columns:2fr 1fr 1fr; }
  .camp-models-header span:nth-child(2),.camp-model-row span:nth-child(2),
  .camp-models-header span:nth-child(3),.camp-model-row span:nth-child(3) { display:none; }
}

/* ── Stage 5: Bug Reporter & Polish ───────────────────────────────────── */

/* Floating bug button */
#bug-report-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--forest); color: var(--parchment);
  border: 2px solid rgba(201,148,58,0.4);
  font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(27,58,45,0.35);
  transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center;
}
#bug-report-btn:hover {
  background: var(--forest-light);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(27,58,45,0.4);
}

/* Bug modal */
.bug-modal {
  padding: 28px; width: 90%; max-width: 580px;
  max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0;
}
.bug-modal-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 20px;
}
.bug-modal-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--forest); }
.bug-modal-sub   { font-size: 0.82rem; color: var(--ink-faint); margin-top: 4px; }
.bug-form        { display: flex; flex-direction: column; gap: 14px; }
.bug-field       { display: flex; flex-direction: column; gap: 5px; }
.bug-two-col     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bug-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* Severity colours */
select#bug-severity option[value="low"]    { color: #b07d00; }
select#bug-severity option[value="medium"] { color: #c06000; }
select#bug-severity option[value="high"]   { color: var(--red); }

/* Page load polish — smooth transitions */
#main-content { transition: opacity 0.15s ease; }

/* Better empty states */
.empty-state .empty-icon { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Better scrollbar in modals */
.equip-picker-pool::-webkit-scrollbar,
.skill-picker-pool::-webkit-scrollbar,
.bug-modal::-webkit-scrollbar { width: 6px; }
.equip-picker-pool::-webkit-scrollbar-thumb,
.skill-picker-pool::-webkit-scrollbar-thumb,
.bug-modal::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* Roster card hover effect */
.roster-card:hover { box-shadow: 0 6px 24px var(--shadow-strong); transform: translateY(-2px); transition: all 0.2s ease; }

/* Better model card distinction */
.model-card { border-left: 3px solid var(--border); transition: border-color 0.2s; }
.model-card:has(.model-role-select [value="leader"]:checked),
.model-card.role-leader { border-left-color: var(--gold); }

/* Tooltip polish */
[title] { cursor: help; }
.btn[title] { cursor: pointer; }

/* Print helper (hides nav when printing from browser) */
@media print {
  .app-header, #bug-report-btn, .btn { display: none !important; }
  .app-main { padding: 0 !important; max-width: 100% !important; }
}

@media (max-width: 700px) {
  .bug-two-col { grid-template-columns: 1fr; }
  #bug-report-btn { bottom: 16px; right: 16px; width: 42px; height: 42px; font-size: 1.1rem; }
}

/* ── Skill limit indicator ────────────────────────────────────────────── */
.skill-limit-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 100px;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; background: rgba(27,58,45,0.08);
  color: var(--forest); border: 1px solid rgba(27,58,45,0.2);
  cursor: default;
}
.skill-limit-reached {
  background: rgba(201,148,58,0.15);
  color: var(--gold); border-color: rgba(201,148,58,0.4);
}
.skill-limit-hint {
  font-size: 0.75rem; color: var(--ink-faint);
  font-style: italic; margin-bottom: 6px; line-height: 1.4;
}

/* ── Game Session ─────────────────────────────────────────────────────── */
.gs-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.gs-vs-row { display:flex; align-items:center; gap:12px; flex:1; justify-content:center; flex-wrap:wrap; }
.gs-band-name { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--forest); }
.gs-vs-badge  { background:var(--forest); color:var(--gold); font-family:var(--font-display); font-size:0.8rem;
  font-weight:900; letter-spacing:0.1em; padding:4px 12px; border-radius:100px; border:2px solid var(--gold); }

/* Rating card */
.gs-rating-card  { padding:24px; margin-bottom:16px; }
.gs-rating-row   { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; }
.gs-rating-side  { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px; border-radius:var(--radius-lg); }
.gs-rating-num   { font-family:var(--font-display); font-size:2.5rem; font-weight:900; color:var(--forest); }
.gs-rating-label { font-family:var(--font-display); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.gs-underdog     { background:rgba(201,148,58,0.1); border:1px solid rgba(201,148,58,0.3); }
.gs-underdog-badge { font-family:var(--font-display); font-size:0.7rem; font-weight:700; color:var(--gold);
  display:flex; align-items:center; gap:4px; }
.gs-rating-mid   { display:flex; flex-direction:column; align-items:center; gap:4px; }
.gs-diff         { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--ink); }
.gs-diff-equal   { color:var(--ink-faint); }
.gs-diff-sub     { font-size:0.75rem; color:var(--ink-faint); text-align:center; line-height:1.4; }

/* Sections */
.gs-section       { padding:20px; margin-bottom:16px; }
.gs-section-title { font-family:var(--font-display); font-size:1.05rem; color:var(--forest); margin-bottom:12px;
  display:flex; align-items:center; gap:8px; }

/* Fate grid */
.gs-fate-grid       { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gs-fate-band-label { font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--forest); margin-bottom:8px; display:flex; align-items:center; gap:6px; }

/* Bands side by side */
.gs-bands-grid  { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gs-band-card   { padding:20px; display:flex; flex-direction:column; gap:12px; }
.gs-band-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.gs-band-title  { font-family:var(--font-display); font-size:1.1rem; color:var(--forest); }
.gs-band-meta   { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.gs-band-actions{ display:flex; gap:8px; margin-top:4px; }

/* Model list in session */
.gs-model-list  { display:flex; flex-direction:column; gap:5px; }
.gs-model-row   { display:flex; justify-content:space-between; align-items:center; padding:6px 8px;
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); }
.gs-model-info  { display:flex; align-items:center; gap:6px; }
.gs-model-name  { font-family:var(--font-display); font-size:0.8rem; font-weight:600; color:var(--forest); }
.gs-model-stats { display:flex; gap:8px; font-size:0.72rem; color:var(--ink-faint); }

/* Roster selector */
.gs-select-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:20px; }
.gs-select-card { padding:18px; cursor:pointer; position:relative; transition:all 0.15s; border:2px solid var(--border); }
.gs-select-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.gs-selected    { border-color:var(--forest) !important; background:rgba(27,58,45,0.04); }
.gs-select-check { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  background:var(--forest); display:flex; align-items:center; justify-content:center; color:var(--parchment); }
.gs-select-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 0;
  border-top:1px solid var(--border); }
.gs-selected-count { font-family:var(--font-display); font-size:0.85rem; color:var(--ink-faint); }

@media (max-width:700px) {
  .gs-bands-grid   { grid-template-columns:1fr; }
  .gs-fate-grid    { grid-template-columns:1fr; }
  .gs-rating-row   { grid-template-columns:1fr; }
  .gs-rating-mid   { display:none; }
}

/* ── Stat cell with full name ─────────────────────────────────────────── */
/* Replace old 2-row layout with 3-row: value / abbr / full name */
.stat-cell {
  cursor: default;
  gap: 1px !important;
}
.stat-cell-value {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat-cell-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  line-height: 1;
}
.stat-cell-fullname {
  font-family: var(--font-body);
  font-size: 0.52rem;
  color: var(--border-strong);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}
.stat-boosted .stat-cell-value  { color: var(--gold); font-weight: 800; }
.stat-boosted .stat-cell-label  { color: var(--gold); }
.stat-boosted .stat-cell-fullname { color: var(--gold-light); }

/* Hover highlight on individual stat */
.stat-cell:hover {
  background: rgba(201,148,58,0.08);
}
.stat-cell:hover .stat-cell-fullname {
  color: var(--ink-light);
}

/* Print roster stat full name */
.stat-full {
  font-size: 5pt;
  color: #aaa;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Stat cell — new layout: abbr+dice side by side ──────────────────── */
.stat-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 8px 4px !important;
  gap: 3px !important;
  cursor: pointer !important;
}
.stat-cell:hover { background: rgba(201,148,58,0.1) !important; }
.stat-boosted { background: rgba(201,148,58,0.12) !important; }

.stat-cell-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.stat-cell-abbr {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--forest);
  letter-spacing: 0.02em;
}
.stat-cell-dice {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.stat-cell-name {
  font-family: var(--font-body);
  font-size: 0.52rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
  line-height: 1;
}
/* Boosted stat highlight */
.stat-boosted .stat-cell-abbr,
.stat-boosted .stat-cell-dice { color: var(--gold) !important; }
.stat-boosted .stat-cell-name  { color: var(--gold-light) !important; }

/* Glossary tip — cursor hint */
.glossary-tip { cursor: help !important; }
.glossary-tip:hover { opacity: 0.85; }

/* ── Glossary Modal ───────────────────────────────────────────────────── */
.glossary-modal {
  width: 92%; max-width: 700px; max-height: 85vh;
  padding: 28px; display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
}
.glossary-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px;
}
.glossary-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--forest); }
.glossary-sub   { font-size: 0.82rem; color: var(--ink-faint); margin-top: 3px; }

.glossary-tabs {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px;
}
.glossary-tab {
  padding: 5px 12px; border-radius: 100px;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; cursor: pointer;
  border: 1.5px solid var(--border); background: transparent; color: var(--ink-light);
  transition: all 0.15s;
}
.glossary-tab:hover  { border-color: var(--gold); color: var(--ink); }
.glossary-tab.active { background: var(--forest); color: var(--parchment); border-color: var(--forest); }

.glossary-body {
  overflow-y: auto; flex: 1; padding-right: 4px;
}
.glossary-section { margin-bottom: 24px; }
.glossary-section-title {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Stats grid in glossary */
.glossary-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px;
}
.glossary-stat-card {
  padding: 12px; background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.glossary-stat-header {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px;
}
.glossary-stat-abbr {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 900;
  color: var(--forest); min-width: 24px;
}
.glossary-stat-name {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  color: var(--ink);
}

/* Skill/term entries */
.glossary-entry {
  padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); margin-bottom: 6px;
  background: var(--surface); transition: border-color 0.15s;
}
.glossary-entry:hover { border-color: var(--gold); }
.glossary-entry-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap;
}
.glossary-entry-term {
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--forest);
}
.glossary-cat-badge { font-size: 0.55rem !important; }
.glossary-entry-req { font-size: 0.72rem; color: var(--gold); font-style: italic; }
.glossary-entry-desc { font-size: 0.85rem; color: var(--ink-light); line-height: 1.5; margin: 0; }

@media (max-width: 700px) {
  .glossary-modal { max-height: 90vh; }
  .glossary-stats-grid { grid-template-columns: 1fr 1fr; }
}