:root {
  --bg:           #130F09;
  --bg-card:      #1E1710;
  --bg-nav:       #100D07;
  --bg-tile:      #000000;
  --bg-tile-hover: #1A1A1A;
  --parchment:    #EDD9A3;
  --parchment-dk: #C8A870;
  --gold:         #C9A227;
  --gold-hover:   #A8841E;
  --text-dark:    #2C1C0C;
  --text-light:   #EDD9A3;
  --text-muted:   #9A7A50;
  --border:       #4A3010;
  --red:          #8B2020;
  --green:        #2A6040;
  --white:        #FFFFFF;
  /* Enchantment tier colors (core/constants/enchantments.py's ENCHANTMENT_TIERS) —
     Faint/Solid/Potent, blue/yellow/gold. Potent reuses --gold directly, a
     deliberate semantic match (gold = the best tier) rather than a separate value. */
  --enchant-faint:  #4FA8FF;
  --enchant-solid:  #FFE14D;
  --enchant-potent: var(--gold);
}

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

body {
  background: var(--bg);
  color: var(--text-light);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.5;
}

/* ── Layout ── */
.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.sidebar {
  width: 190px;
  flex-shrink: 0;
  background: var(--bg-nav);
  border-right: 2px solid var(--border);
  min-height: 100vh;
  position: sticky;
  top: 0;
  padding: 1.25rem 0.75rem;
}

.sidebar-brand {
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 1.5rem;
}

.tile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tile-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0.75rem 0 0.1rem;
  padding: 0.5rem 0.25rem 0;
  border-top: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  appearance: none;
  font: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--text-muted);
  cursor: pointer;
}

.tile-group-label:hover { color: var(--text-light); }

.tile-group-arrow {
  font-size: 0.6rem;
  transition: transform 0.15s ease;
}

.tile-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tile-group.collapsed .tile-group-items { display: none; }
.tile-group.collapsed .tile-group-arrow { transform: rotate(-90deg); }

main {
  flex: 1;
  min-width: 0;
}

.site-banner {
  display: block;
  width: 100%;
  height: 198px;
  object-fit: cover;
  object-position: center 35%;
  border-bottom: 2px solid var(--border);
}

.status-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--bg-nav);
  border-bottom: 2px solid var(--border);
  padding: 0.6rem 1.25rem;
}

.status-bar-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-light);
}

.status-bar-icon { font-size: 1rem; }

.status-bar-link { text-decoration: none; cursor: pointer; }
.status-bar-link:hover { color: var(--gold); }

/* ── Auth pages ── */
.auth-container {
  max-width: 420px;
  margin: 5rem auto;
  padding: 0 1rem;
  text-align: center;
}

.auth-container h1 {
  font-size: 2.4rem;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.subtitle {
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 2rem;
}

/* ── Card ── */
.card {
  background: var(--parchment);
  color: var(--text-dark);
  border-radius: 4px;
  padding: 2rem;
  border: 2px solid var(--parchment-dk);
}

.card h2 { margin-bottom: 1.25rem; }

.card h3 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5A3A18;
}

.card input,
.card select,
.card textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  font-size: 1rem;
  background: #FFF9EC;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.15s;
}

.card textarea { resize: vertical; }

.card input:focus,
.card select:focus,
.card textarea:focus { border-color: var(--gold); }

.error {
  background: #FFE0E0;
  color: var(--red);
  border: 1px solid #E0A0A0;
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.success {
  background: #E0F5E0;
  color: #2E7D32;
  border: 1px solid #A0D0A0;
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.switch-link {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--text-dark);
}

.switch-link a {
  color: #7B4A1A;
  font-weight: bold;
  text-decoration: none;
}

.switch-link a:hover { text-decoration: underline; }

.btn-discard {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

.btn-discard:hover { background: rgba(239, 83, 80, 0.12); }

.discard-mission-form { margin-top: 1rem; }

/* The shared gold button[type="submit"] rule below outranks .btn-discard on its
   own, so the account-deletion button needs the extra form scope to stay red. */
.delete-account-form button[type="submit"] {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.delete-account-form button[type="submit"]:hover { background: rgba(239, 83, 80, 0.12); }

/* ── Terms & Conditions ── */
.terms-accept {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.terms-accept input[type="checkbox"] { width: auto; margin: 0.2rem 0 0; flex-shrink: 0; }
.terms-section ul { margin: 0.4rem 0 0.8rem 1.2rem; padding: 0; }
.terms-section li { margin-bottom: 0.45rem; line-height: 1.5; }
.terms-section p { line-height: 1.6; }

/* ── Shared button ── */
button[type="submit"],
.btn,
#fight-btn,
#level-up-fight-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--gold);
  color: var(--text-dark);
  border: none;
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

button[type="submit"] { width: 100%; }

button[type="submit"]:hover,
.btn:hover,
#fight-btn:hover:not(:disabled),
#level-up-fight-btn:hover:not(:disabled) { background: var(--gold-hover); }

button:disabled,
#fight-btn:disabled,
#level-up-fight-btn:disabled {
  background: #5A5040;
  color: #9A8A70;
  cursor: not-allowed;
}

/* ── Inner pages ── */
.container {
  max-width: 820px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header h2 {
  font-size: 2rem;
  color: var(--gold);
}

.account-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── Character stats ── */
.stat-card { margin-bottom: 1.25rem; }

.stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFF9EC;
  border: 1px solid var(--parchment-dk);
  border-radius: 4px;
  padding: 0.9rem 1.4rem;
  min-width: 100px;
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #7B4A1A;
  margin-bottom: 0.3rem;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text-dark);
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: #FFF9EC;
  border: 1px solid var(--parchment-dk);
  border-radius: 4px;
}

.stat-row .stat-label { margin-bottom: 0; }
.stat-row .stat-value { font-size: 1.25rem; }

/* ── Role assignment ── */
.role-row { gap: 0.75rem; }

.role-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.role-form select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--parchment-dk);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #FFF9EC;
  color: var(--text-dark);
}

.role-form button[type="submit"] {
  width: auto;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
}

.role-empty-msg { margin-top: 0.75rem; }

.admin-user-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.admin-user-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-user-sub {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--parchment-dk);
}

.admin-status-text { margin-bottom: 0; min-width: 11rem; }

.admin-inline-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-inline-form input[type="number"] {
  width: 4.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--parchment-dk);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.85rem;
  background: #FFF9EC;
  color: var(--text-dark);
}

.admin-inline-form .btn {
  width: auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
}

.stat-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(74, 44, 16, 0.15);
}

.level-req-met { color: #2E7D32; }
.level-req-unmet { color: #A0392B; }
.level-req-disabled { color: var(--text-muted); opacity: 0.55; }

.has-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(90, 58, 24, 0.45);
}

.stat-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 170px;
  max-width: 220px;
  padding: 0.5rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  line-height: 1.3;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

.stat-value.has-tooltip .stat-tooltip {
  left: auto;
  right: 0;
}

.has-tooltip:hover .stat-tooltip,
.has-tooltip:focus-visible .stat-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lore-card { margin-bottom: 1.5rem; }
.lore-card p { font-size: 0.92rem; color: #4A2C10; line-height: 1.7; white-space: pre-line; }

.level-up-lore-image {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto 1rem;
  border-radius: 6px;
  border: 2px solid var(--parchment-dk);
}

.skill-check-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.skill-check-actions,
.stacked-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.skill-check-actions .btn,
.stacked-actions .btn { width: 100%; }

.stacked-actions form { width: 100%; }

.skill-check-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  color: var(--parchment);
  background: var(--text-dark);
}

.skill-check-roll-breakdown {
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin: 0.35rem 0 0.75rem;
}

#skill-check-continue-btn {
  display: block;
  margin-top: 1rem;
}

/* ── Tabs ── */
.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: Georgia, serif;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

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

.tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── Equipment doll ── */
.equipment-doll {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  grid-template-areas:
    ".      head    ."
    "weapon body    offhand"
    ".      legs    ."
    ".      boots   .";
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem auto 0;
}

.eq-head    { grid-area: head; }
.eq-weapon  { grid-area: weapon; }
.eq-body    { grid-area: body; }
.eq-offhand { grid-area: offhand; }
.eq-legs    { grid-area: legs; }
.eq-boots   { grid-area: boots; }

.eq-form { display: contents; }

.eq-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  aspect-ratio: 1;
  background: #FFF9EC;
  border: 2px solid var(--parchment-dk);
  border-radius: 6px;
  padding: 0.4rem;
  text-align: center;
  font-family: inherit;
}

button.eq-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  padding: 0.4rem;
  background: #FFF9EC;
  border: 2px solid var(--parchment-dk);
  border-radius: 6px;
  text-align: center;
  font-size: inherit;
  font-weight: normal;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

button.eq-slot:hover {
  border-color: var(--gold);
  background: #FFF3D6;
}

button.eq-slot:disabled {
  background: #5A5040;
  cursor: not-allowed;
}

.eq-empty {
  background: rgba(0, 0, 0, 0.05);
  border-style: dashed;
  border-color: #B0A488;
}

/* ── Inventory grid ── */
.inventory-card { margin-top: 1.25rem; }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, 60px);
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem auto 0;
}

.inv-form { display: contents; }

.inventory-grid .eq-slot { padding: 0.1rem; }
.inventory-grid .eq-icon { font-size: 2.5rem; }

.eq-icon { font-size: 3.2rem; line-height: 1; }

.eq-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 130px;
  max-width: 190px;
  padding: 0.5rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.3;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

.eq-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gold);
}

.eq-tooltip strong {
  color: var(--white);
  font-size: 0.78rem;
}

/* An item's own name/stats read plain white; whatever an enchantment added reads
   in its tier's color instead (Faint/Solid/Potent — see core/constants/
   enchantments.py and core/enchantments.py's enchantment_display(), used by
   templates/_macros.html's item_name_line()/stat_bonus_line()) — a visual cue
   that this specific line came from the enchantment, not the base item. */
.item-name,
.item-stat-line {
  color: var(--white);
}

.item-enchant-suffix,
.item-enchant-stat {
  font-weight: bold;
}

.item-enchant-suffix.tier-faint, .item-enchant-stat.tier-faint { color: var(--enchant-faint); }
.item-enchant-suffix.tier-solid, .item-enchant-stat.tier-solid { color: var(--enchant-solid); }
.item-enchant-suffix.tier-potent, .item-enchant-stat.tier-potent { color: var(--enchant-potent); }

.eq-tooltip-hint {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}

.eq-slot:hover .eq-tooltip,
.eq-slot:focus-visible .eq-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.eq-slot-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── Home ── */
.home-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.home-hero { margin-bottom: 2rem; }

.home-title {
  font-size: 2.6rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.home-tagline {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.5rem;
}

.home-lore {
  max-width: 560px;
  margin: 0 auto 1rem;
  line-height: 1.7;
}

/* ── Home news ── */
.home-news {
  max-width: 600px;
  margin: 2rem auto 0;
  text-align: left;
}

.home-news-title {
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 1rem;
  text-align: center;
}

/* ── Tile nav ── */
.tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-tile);
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: var(--text-light);
  transition: border-color 0.15s, background 0.15s;
}

.tile:hover {
  border-color: var(--gold);
  background: var(--bg-tile-hover);
}

.tile-icon { font-size: 1.25rem; }

.tile-icon-img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.tile-label {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* ── Dev log page ── */
.devlog-entry { margin-bottom: 1.25rem; }

.devlog-entry .devlog-date {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.devlog-entry p { color: #4A2C10; margin-bottom: 0.6rem; }

.devlog-list {
  padding-left: 1.25rem;
  color: #4A2C10;
  font-size: 0.92rem;
  line-height: 1.7;
}

.manifesto-card {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
  margin-bottom: 1.75rem;
}

.manifesto-card .devlog-date {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.manifesto-card .devlog-list li { margin-bottom: 0.6rem; }
.manifesto-card .devlog-list li:last-child { margin-bottom: 0; }

.manifesto-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
  color: var(--text-dark);
  background: var(--gold);
}

/* ── Area page ── */
.area-desc {
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

.battle-arena {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.combatant {
  flex: 1;
  background: var(--parchment);
  color: var(--text-dark);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--parchment-dk);
  text-align: center;
}

.player-side { border-top: 4px solid var(--gold); }
.enemy-side  { border-top: 4px solid var(--red); }

.combatant-portrait {
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto 0.75rem;
  object-fit: cover;
  object-position: top center;
  background: #FFF9EC;
  border: 3px solid var(--parchment-dk);
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.player-side .combatant-portrait { border-color: var(--gold); }
.enemy-side  .combatant-portrait { border-color: var(--red); }

.combatant-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.combatant-name {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

.combatant-stats { font-size: 0.9rem; }

.cs-row {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  border-bottom: 1px solid #DDD0B0;
  color: #4A2C10;
}

.cs-row:last-child { border-bottom: none; }

.vs-divider {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text-muted);
  padding: 0 0.25rem;
  flex-shrink: 0;
}

/* ── Fight controls ── */
.fight-controls {
  text-align: center;
  margin-bottom: 1.5rem;
}

#fight-btn,
#level-up-fight-btn {
  font-size: 1.1rem;
  padding: 0.75rem 3rem;
}

.cooldown {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.hidden { display: none; }

/* ── Combat log ── */
.combat-log {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
}

#fight-result {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.result-win  { color: #6BCB77; }
.result-loss { color: #EF5350; }

.round-block {
  padding: 0.6rem 0;
  border-bottom: 1px solid #2A2010;
}

.round-block:last-child { border-bottom: none; }

.round-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.round-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.round-col {
  background: #1A140D;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
}

.round-col-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.round-roll-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.round-roll { color: var(--text-light); }

.round-die {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.round-crit-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--bg);
  background: var(--gold);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-bottom: 0.2rem;
}

.round-crit-badge-miss {
  color: var(--text-light);
  background: var(--red);
}

.round-vs {
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}

.round-dmg {
  color: #81C784;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
}

.round-miss-text {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.3rem;
}

.round-hp {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.round-hit {
  border-color: var(--gold);
  background: #2A2010;
}

.round-miss { opacity: 0.75; }

.round-attack {
  padding-top: 0.35rem;
  margin-top: 0.35rem;
  border-top: 1px dashed rgba(237, 217, 163, 0.12);
}

.round-attack:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.round-attack-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.round-attack.round-crit {
  background: rgba(201, 162, 39, 0.12);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(201, 162, 39, 0.5);
  padding: 0.3rem 0.35rem;
  margin-left: -0.35rem;
  margin-right: -0.35rem;
}

.round-attack.round-crit .round-dmg { color: var(--gold); }

.round-attack.round-crit-miss {
  background: rgba(139, 32, 32, 0.18);
  border-radius: 4px;
  padding: 0.3rem 0.35rem;
  margin-left: -0.35rem;
  margin-right: -0.35rem;
}

.round-attack.round-crit-miss .round-miss-text {
  color: #EF5350;
  font-weight: bold;
  font-style: normal;
}

.round-total-dmg {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--gold);
}

.round-regen {
  color: #64B5F6;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
}

.round-opening-dmg {
  color: #FF8A65;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

/* An on-hit curse/venom enchantment taking hold mid-fight, and the per-round
   venom tick it leaves behind (see core/combat.py's simulate_fight()). Purple
   for the moment a hex/curse/venom lands, sickly green for the damage it deals —
   deliberately distinct from the blue of friendly regen and the orange of
   opening damage, since these are things happening TO the enemy. */
.round-proc {
  color: #BA8FFF;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
}

.round-poison {
  color: #8BC34A;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
}

/* Spiked Face bouncing a portion of damage back at the enemy (core/combat.py's
   simulate_fight()) — steely teal, distinct from venom's green and opening
   damage's orange, since this is the player's shield acting, not a lingering
   wound. */
.round-reflect {
  color: #26C6DA;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.3rem;
}

/* ── Missions ── */
.mission-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.mission-card {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
}

.mission-card-portrait {
  display: block;
  width: calc(100% + 2.2rem);
  height: 160px;
  object-fit: cover;
  margin: -1.1rem -1.1rem 0.7rem;
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid var(--parchment-dk);
}

.location-banner {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--parchment-dk);
  margin-bottom: 1.5rem;
}

.mission-card h3 {
  font-size: 0.85rem;
}

.mission-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.potion-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.potion-card h3 {
  justify-content: center;
  text-align: center;
  margin-bottom: 0.6rem;
}

.potion-showcase {
  font-size: 4.8rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.6rem;
}

.potion-showcase .item-icon-img {
  display: block;
  margin: 0 auto;
}

.mission-card p {
  color: #4A2C10;
  font-size: 0.8rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.mission-card form,
.mission-card > .btn { margin-top: auto; }

.mission-card .btn {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
}

.crucible-card {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.25);
}

.crucible-card.crucible-locked {
  filter: grayscale(0.85);
  opacity: 0.6;
  box-shadow: none;
}

.mission-crucible-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
  color: var(--bg);
  background: var(--gold);
}

.mission-storyline-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
  color: var(--text-light);
  background: #4B2E6F;
}

.enemy-boss-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
  color: var(--text-light);
  background: var(--red);
}

.effect-type-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

.effect-type-buff   { color: var(--bg); background: var(--green); }
.effect-type-debuff { color: var(--text-light); background: var(--red); }

.effect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.effect-card { padding: 1rem; }

.effect-card h3 {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.effect-card .mission-meta {
  margin-bottom: 0.35rem;
}

.effect-card .mission-meta:last-child { margin-bottom: 0; }

.mission-difficulty {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

.difficulty-easy     { color: var(--bg); background: #6BCB77; }
.difficulty-moderate { color: var(--bg); background: var(--gold); }
.difficulty-hard     { color: var(--text-light); background: #C0392B; }

.mission-region {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

.region-forest { color: var(--text-light); background: #1B4A2A; }

.mission-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-bottom: 0.9rem;
}

.mission-progress {
  text-align: center;
  margin-bottom: 1.5rem;
}

.mission-progress h3 {
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.progress-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 0.75rem 0;
}

.progress-segment {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #1A140D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-done {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-dark);
}

.progress-current {
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(201, 162, 39, 0.6);
  color: var(--text-light);
}

.progress-upcoming { opacity: 0.55; }

.mission-complete {
  text-align: center;
  padding: 1rem;
}

.mission-complete p {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.mission-failed p { color: #EF5350; }

/* ── Reward screen ── */
.reward-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 4, 2, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 100;
  animation: reward-fade-in 0.25s ease-out;
}

.reward-overlay.hidden { display: none; }

@keyframes reward-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reward-card {
  background: var(--parchment);
  color: var(--text-dark);
  border: 2px solid var(--gold);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 30px rgba(201, 162, 39, 0.35);
  animation: reward-pop-in 0.3s ease-out;
}

@keyframes reward-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.reward-trophy { font-size: 2.5rem; margin-bottom: 0.5rem; }

.reward-card h2 {
  color: var(--gold-hover);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.reward-mission-name {
  font-weight: bold;
  color: #5A3A18;
  margin-bottom: 0.15rem;
}

.reward-subtitle {
  color: #4A2C10;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.reward-breakdown {
  background: rgba(74, 44, 16, 0.08);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}

.reward-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #4A2C10;
  padding: 0.3rem 0;
}

.reward-row + .reward-row {
  border-top: 1px dashed rgba(74, 44, 16, 0.2);
}

.reward-row.reward-total {
  font-weight: bold;
  font-size: 1.05rem;
  color: #5A3A18;
}

.reward-loot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: #5A3A18;
}

.reward-loot-item.hidden { display: none; }

.reward-loot-item-icon { font-size: 1.2rem; }

.reward-loot-item-name { font-weight: bold; }

.reward-loot-item-note {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ── Enemy test ── */
.back-link {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration: none;
}

.back-link:hover { color: var(--gold); }

.difficulty-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.difficulty-divider:first-child { margin-top: 0; }

.difficulty-divider::before,
.difficulty-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.enemy-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.enemy-card {
  padding: 1rem;
  text-align: center;
}

.enemy-card-portrait {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  border: 2px solid var(--parchment-dk);
  margin: 0 auto 0.5rem;
}

/* ── PvP Arena (Tournament Grounds) ── */
.arena-rank-card {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 2rem;
}

.arena-rank-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--gold);
}

.arena-opponent-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.arena-opponent-name {
  font-weight: bold;
  color: var(--text-dark);
}

/* ── Item catalog ── */
.type-filter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.3rem;
  margin-bottom: 1.5rem;
}

.type-filter-highlight {
  position: absolute;
  border-radius: 999px;
  background: var(--gold);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
  z-index: 0;
}

.type-filter-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.type-filter-btn:hover:not(.active) { color: var(--text-light); }

.type-filter-btn.active {
  color: var(--bg);
  font-weight: bold;
}

.item-card-icon { font-size: 3.2rem; margin-bottom: 0.4rem; }

.item-card h3 {
  font-size: 0.78rem;
  margin-bottom: 0.4rem;
}

.item-add-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
}

.item-icon-img {
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: middle;
}

/* ── Homestead: Item Collection ── */
.collection-progress { margin-top: 0.4rem; color: var(--gold); }
/* Not-yet-looted items: the icon as a black silhouette, the card dimmed. */
.collection-locked .item-card-icon { filter: brightness(0); }
.collection-locked h3, .collection-locked .mission-meta { color: var(--text-muted); }

/* ── Balance testing ── */
.balance-iterations-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.balance-iterations-form label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.balance-iterations-form input[type="number"],
.balance-iterations-form input[type="date"],
.balance-iterations-form select {
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.78rem;
}

.balance-iterations-form input[type="number"] { width: 6rem; }

.balance-iterations-form .btn {
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
}

.balance-level-section { margin-bottom: 2.5rem; }

.balance-subheading {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--gold);
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.balance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: var(--bg-card);
}

.balance-table th,
.balance-table td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

.balance-table th {
  background: var(--bg-nav);
  color: var(--parchment);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.balance-table tbody tr:last-child td { border-bottom: none; }
.balance-table tbody tr:hover { background: var(--bg-tile-hover); }

.balance-tier-table td { white-space: normal; }

.balance-tier-label { color: var(--text-light); font-weight: bold; }

.sword-register-you { background: var(--bg-tile-hover); }
.sword-register-you td { color: var(--gold); }

.knight-link { color: var(--gold); font-weight: bold; text-decoration: none; }
.knight-link:hover { text-decoration: underline; }

.message-unread-badge {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0.05rem 0.35rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: bold;
  text-align: center;
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.message-bubble {
  max-width: 75%;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  color: var(--text-dark);
}

.message-bubble-mine {
  align-self: flex-end;
  background: var(--gold);
  border-bottom-right-radius: 2px;
}

.message-bubble-theirs {
  align-self: flex-start;
  background: var(--parchment-dk);
  border-bottom-left-radius: 2px;
}

.message-bubble-body { white-space: pre-line; }

.message-bubble-meta {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  color: var(--text-dark);
  opacity: 0.65;
}

/* Small text-style button — overrides the shared full-width gold
   button[type="submit"] rule, which would otherwise swallow the bubble. */
.message-report { margin-top: 0.25rem; text-align: right; }
.message-report button[type="submit"].message-report-btn {
  width: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: normal;
  text-decoration: underline;
  opacity: 0.8;
}
.message-report button[type="submit"].message-report-btn:hover { background: none; opacity: 1; }
.message-reported { font-size: 0.68rem; color: var(--text-dark); opacity: 0.65; font-style: italic; }

.balance-boss-row td { background: rgba(139, 32, 32, 0.12); }

.balance-subtext {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  white-space: normal;
}

.balance-na { color: var(--text-muted); }

.balance-bar-cell { min-width: 7rem; }

.balance-bar-track {
  width: 100%;
  height: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.balance-bar-fill { height: 100%; border-radius: 999px; }
.balance-bar-good { background: var(--green); }
.balance-bar-mid  { background: var(--gold); }
.balance-bar-bad  { background: var(--red); }

.balance-bar-label {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-light);
}

.mission-rest-skip { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ── Analytics (Admin Panel) ── */
.analytics-check { display: flex; align-items: center; gap: 0.3rem; }

.analytics-summary { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.analytics-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
}

.analytics-stat-value { font-size: 1.6rem; color: var(--gold); }
.analytics-stat-label { font-size: 0.75rem; color: var(--text-muted); }

.analytics-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  margin-bottom: 1.2rem;
}

.analytics-chart svg { display: block; width: 100%; height: auto; }
.analytics-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.analytics-axis-line, .analytics-tick-mark { stroke: var(--text-muted); stroke-width: 1; }
.analytics-tick { fill: var(--text-muted); font-size: 12px; font-family: inherit; }
.analytics-axis-title { fill: var(--text-light); font-size: 12px; font-family: inherit; }
.analytics-area { fill: var(--gold); fill-opacity: 0.12; }
.analytics-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.analytics-dot { fill: var(--bg-card); stroke: var(--gold); stroke-width: 2; }
.analytics-dot:hover { fill: var(--gold); }

.analytics-details summary { cursor: pointer; color: var(--text-muted); margin-bottom: 0.6rem; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .layout { flex-direction: column; }

  .sidebar {
    width: 100%;
    min-height: auto;
    position: static;
    border-right: none;
    border-bottom: 2px solid var(--border);
  }

  .sidebar-brand { margin-bottom: 0.75rem; }

  .tile-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tile { padding: 0.55rem 0.7rem; }
}

@media (max-width: 560px) {
  .battle-arena { flex-direction: column; }
  .vs-divider { justify-content: center; }

  .inventory-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
  }

  .equipment-doll { grid-template-columns: repeat(3, 1fr); }

  .enemy-list { grid-template-columns: repeat(2, 1fr); }

  .mission-list { grid-template-columns: repeat(2, 1fr); }

  .effect-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .mission-list { grid-template-columns: 1fr; }
}