/* ============================================================
   GAME.CSS — LandmarkHeroes Dark Fantasy Styling
   ============================================================ */

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

/* ── APP LOCKDOWN — no text selection, no tap glow, no scroll bounce ── */
*, *::before, *::after {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

:root {
  --bg:       #08080e;
  --bg1:      #10101a;
  --bg2:      #181824;
  --bg3:      #202030;
  --border:   #2a2a40;
  --border2:  #383858;
  --text:     #d8d0b8;
  --text2:    #9890a0;
  --text3:    #5a5470;
  --gold:     #c8a230;
  --gold2:    #a07820;
  --blue:     #4080c0;
  --green:    #40a060;
  --red:      #c04040;
  --purple:   #8040c0;
  --orange:   #c06030;
  --white:    #e8e0d0;

  /* Quality colors */
  --q-normal:    #909090;
  --q-uncommon:  #40c060;
  --q-rare:      #4080ff;
  --q-epic:      #c040ff;
  --q-legendary: #ff8020;
  --q-mythic:    #ff2040;
  --q-celestial: #e0f8ff;

  --radius: 6px;
  --shadow: 0 2px 12px rgba(0,0,0,0.5);
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  cursor: default;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-rows: 32px 56px 1fr 120px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Title bar */
#title-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 101;
  flex-shrink: 0;
}
.title-bar-name {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 2px;
  font-weight: bold;
  text-transform: uppercase;
}
.title-bar-ornament {
  font-size: 11px;
  color: var(--gold2);
  opacity: 0.7;
}

/* Status bar */
#status-bar {
  background: var(--bg1);
  border-bottom: 2px solid var(--gold2);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  flex-wrap: nowrap;
  overflow: hidden;
  z-index: 100;
}

/* Middle section */
#game-body {
  display: grid;
  grid-template-columns: 140px 1fr;
  overflow: hidden;
}

/* Nav sidebar */
#nav-sidebar {
  background: var(--bg1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}

#bottom-info-bar { display: none; }

.nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text2);
  border-left: 3px solid transparent;
  transition: all 0.15s;
  font-size: 13px;
  user-select: none;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  position: relative;
}
.nav-tab:hover { background: var(--bg2); color: var(--text); }
.nav-tab.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: var(--bg2);
}
.nav-icon { font-size: 16px; }
.nav-label { font-size: 11px; }

/* Main content */
#main-content {
  background-image:
    linear-gradient(rgba(8, 8, 14, 0.72), rgba(8, 8, 14, 0.72)),
    url('../assets/background1.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  overflow-y: auto;
  padding: 16px;
}

/* Message log */
#message-log {
  background: var(--bg1);
  border-top: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 12px;
}
.log-header { color: var(--gold); font-size: 12px; margin-bottom: 4px; }
.log-messages { display: flex; flex-direction: column; gap: 2px; }
.msg-entry { font-size: 12px; color: var(--text2); line-height: 1.4; }
.msg-entry::before { content: "›"; margin-right: 4px; color: var(--text3); }

/* ── STATUS BAR CONTENTS ─────────────────────────────────── */
.status-group { display: flex; align-items: center; gap: 10px; }
.status-group + .status-group { border-left: 1px solid var(--border); padding-left: 12px; }

.hero-name { font-size: 16px; font-weight: bold; color: var(--white); }
.hero-class { font-size: 13px; }
.hero-level { background: var(--bg3); padding: 2px 7px; border-radius: 12px; font-size: 12px; color: var(--gold); }

.stat-bar-wrap { display: flex; align-items: center; gap: 6px; }
.bar-label { font-size: 11px; color: var(--text3); width: 20px; }
.stat-bar { width: 80px; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.hp-fill  { background: linear-gradient(to right, #a03030, #c84040); }
.mp-fill  { background: linear-gradient(to right, #2050a0, #4080e0); }
.xp-fill  { background: linear-gradient(to right, #205020, #40a040); }
.bar-val  { font-size: 11px; color: var(--text2); min-width: 50px; }

.gold-display { color: var(--gold); font-weight: bold; font-size: 15px; }
.day-display  { color: var(--text2); font-size: 12px; }
.season-display { color: var(--green); font-size: 12px; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  padding: 8px 16px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s;
  text-align: center;
  user-select: none;
  background: var(--bg2);
  color: var(--text);
}
.btn:hover { border-color: var(--gold2); background: var(--bg3); color: var(--white); }
.btn:active { transform: scale(0.97); }
.btn.disabled { opacity: 0.5; cursor: not-allowed; }
.btn.disabled:hover { border-color: var(--border2); background: var(--bg2); color: var(--text); }
.btn-large { padding: 12px 28px; font-size: 15px; }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-primary { background: linear-gradient(135deg, #3a2010, #6a4020); border-color: var(--gold2); color: var(--gold); }
.btn-primary:hover { background: linear-gradient(135deg, #5a3018, #8a5030); border-color: var(--gold); color: var(--white); }
.btn-secondary { background: var(--bg2); border-color: var(--border2); }
.btn-danger { background: linear-gradient(135deg, #3a1010, #6a2020); border-color: #803030; color: #e06060; }
.btn-danger:hover { border-color: var(--red); color: #ffaaaa; }
.btn-warning { background: linear-gradient(135deg, #3a2a10, #6a5020); border-color: var(--gold2); color: var(--gold); }
.btn-lore { background: var(--bg3); border-color: var(--gold); color: var(--gold); }
.btn-lore:hover { background: rgba(200,162,48,0.12); border-color: var(--gold); color: var(--white); }
.btn-save { padding: 4px 10px; font-size: 12px; }
.btn-skill { background: linear-gradient(135deg, #201040, #402080); border-color: #604090; color: #c090ff; }
.btn-skill:hover { border-color: var(--purple); }
.glow-btn { box-shadow: 0 0 12px rgba(200, 162, 48, 0.4); }

/* ── SCREEN TITLES ───────────────────────────────────────── */
.screen-title {
  color: var(--gold);
  font-size: 20px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── APP IS-MENU: hide chrome, collapse grid rows to fill viewport ── */
#app.is-menu               { grid-template-rows: 1fr; }
#app.is-menu #nav-sidebar    { display: none !important; }
#app.is-menu #title-bar      { display: none !important; }
#app.is-menu #status-bar     { display: none !important; }
#app.is-menu #message-log    { display: none !important; }
#app.is-menu #bottom-info-bar { display: none !important; }
#app.is-menu #game-body    { grid-template-columns: 1fr; }
#app.is-menu #main-content { padding: 0; overflow: hidden; }

/* ── MAIN MENU ───────────────────────────────────────────── */
.main-menu {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1a1228 0%, #08080e 70%);
  overflow: hidden;
}

/* ── APP IS-CREATE: hide chrome for character creation, keep scroll ── */
#app.is-create               { grid-template-rows: 1fr; }
#app.is-create #nav-sidebar    { display: none !important; }
#app.is-create #title-bar      { display: none !important; }
#app.is-create #status-bar     { display: none !important; }
#app.is-create #message-log    { display: none !important; }
#app.is-create #bottom-info-bar { display: none !important; }
#app.is-create #game-body    { display: flex; flex-direction: column; height: 100%; grid-template-columns: 1fr; }
#app.is-create #main-content { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Ambient embers */
.mm-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mm-ember {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd060cc, #c8601040);
  animation: mm-ember-rise linear infinite;
  opacity: 0;
}
@keyframes mm-ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(1);    opacity: 0; }
  8%   { opacity: 0.85; }
  60%  { opacity: 0.4; }
  100% { transform: translateY(-72vh) translateX(18px) scale(0.25); opacity: 0; }
}

/* Vignette */
.mm-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.65) 100%);
}

/* Horizontal rule ornament */
.mm-rule {
  width: 180px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  margin: 0 auto;
  opacity: 0.6;
}

/* Content column */
.mm-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 440px;
  padding: 24px 20px 20px;
  text-align: center;
}

/* Logo block */
.mm-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  animation: mm-logo-in 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes mm-logo-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mm-crest {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(200,162,48,0.7)) drop-shadow(0 0 40px rgba(200,162,48,0.3));
  animation: mm-crest-pulse 3.5s ease-in-out infinite;
}
@keyframes mm-crest-pulse {
  0%,100% { filter: drop-shadow(0 0 16px rgba(200,162,48,0.6)) drop-shadow(0 0 36px rgba(200,162,48,0.25)); }
  50%     { filter: drop-shadow(0 0 28px rgba(200,162,48,0.95)) drop-shadow(0 0 60px rgba(200,162,48,0.45)); }
}

.mm-title {
  font-size: 46px;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--gold);
  letter-spacing: 5px;
  line-height: 1.05;
  text-transform: uppercase;
  animation: mm-glow 3s ease-in-out infinite;
}
@keyframes mm-glow {
  0%,100% { text-shadow: 0 0 16px rgba(200,162,48,0.35), 0 0 50px rgba(200,162,48,0.12); }
  50%     { text-shadow: 0 0 28px rgba(200,162,48,0.75), 0 0 80px rgba(200,162,48,0.28), 0 0 120px rgba(200,162,48,0.1); }
}

.mm-tagline {
  font-size: 14px;
  color: var(--text3);
  font-style: italic;
  letter-spacing: 2px;
  margin-top: 2px;
}

/* Nav buttons */
.mm-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.mm-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  animation: mm-item-in 0.45s ease-out both;
}
.mm-btn:hover {
  background: rgba(200,162,48,0.08);
  border-color: var(--gold2);
  transform: translateX(3px);
}
.mm-btn:active { transform: translateX(1px) scale(0.99); }
.mm-btn:nth-child(1) { animation-delay: 0.25s; }
.mm-btn:nth-child(2) { animation-delay: 0.37s; }
.mm-btn:nth-child(3) { animation-delay: 0.49s; }
.mm-btn:nth-child(4) { animation-delay: 0.61s; }
@keyframes mm-item-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mm-btn-primary { border-color: var(--gold2); background: rgba(200,162,48,0.07); }
.mm-btn-primary:hover { background: rgba(200,162,48,0.14); border-color: var(--gold); }
.mm-btn-danger:hover { border-color: var(--red); background: rgba(192,64,64,0.08); color: #e07070; }

.mm-btn-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.mm-btn-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mm-btn-label { font-size: 15px; color: var(--text); letter-spacing: 0.5px; }
.mm-btn-sub { font-size: 11px; color: var(--text3); }
.mm-btn-arrow { color: var(--text3); font-size: 18px; margin-left: auto; transition: transform 0.15s; }
.mm-btn:hover .mm-btn-arrow { transform: translateX(3px); color: var(--gold2); }

/* Saves panel */
.mm-saves {
  width: 100%;
  margin-top: 10px;
  animation: mm-item-in 0.3s ease-out both;
}
.mm-saves-title {
  color: var(--gold2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.mm-save-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 7px;
  text-align: left;
  transition: border-color 0.15s;
}
.mm-save-slot:hover { border-color: var(--border2); }
.mm-save-slot-used:hover { border-color: var(--gold2); }
.mm-save-portrait { font-size: 24px; flex-shrink: 0; }
.mm-save-info { flex: 1; min-width: 0; }
.mm-save-name { font-size: 15px; color: var(--text); font-weight: bold; }
.mm-save-meta { font-size: 12px; color: var(--text2); }
.mm-save-date { font-size: 10px; color: var(--text3); margin-top: 1px; }
.mm-save-empty .mm-save-name { color: var(--text3); font-weight: normal; font-style: italic; }
.mm-save-btns { display: flex; gap: 6px; flex-shrink: 0; }
.mm-save-del { background: transparent; border-color: var(--red); color: var(--red); }
.mm-save-del:hover { background: var(--red); color: var(--white); }

/* Footer */
.mm-footer {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 2px;
  opacity: 0.7;
  animation: mm-item-in 0.4s ease-out 0.8s both;
}

/* Mobile tweaks */
@media (max-height: 600px) {
  .mm-crest { font-size: 40px; }
  .mm-title { font-size: 32px; }
  .mm-logo  { margin-bottom: 10px; gap: 4px; }
  .mm-btn   { padding: 10px 14px; }
}

/* ── CHARACTER CREATION ─────────────────────────────────── */
.create-screen { max-width: 900px; margin: 0 auto; }
.name-input-wrap { margin-bottom: 20px; }
.name-input-wrap label { display: block; color: var(--text2); margin-bottom: 6px; }
.text-input {
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  width: 300px;
}
.text-input:focus { outline: none; border-color: var(--gold2); }

.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.class-card {
  background: var(--bg1);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.class-card:hover { border-color: var(--gold2); background: var(--bg2); }
.class-card.selected { border-color: var(--gold); background: var(--bg2); box-shadow: 0 0 10px rgba(200,162,48,0.3); }
.class-portrait { margin-bottom: 6px; display: flex; justify-content: center; }
/* Class icon art (assets/classes/<name>.png) with onerror fallback to the
   emoji glyph -- see ui.js _classIconHtml. Two sizes: small inline (status
   bar, character sheet, save slots) and large (class-selection card). */
.class-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.class-icon-img { display: block; border-radius: 6px; object-fit: cover; }
.class-icon-fallback { display: inline-flex; align-items: center; justify-content: center; }
.class-icon-sm .class-icon-img, .class-icon-sm .class-icon-fallback { width: 20px; height: 20px; font-size: 18px; }
.class-icon-lg .class-icon-img, .class-icon-lg .class-icon-fallback { width: 72px; height: 72px; font-size: 48px; }
/* Enemy icon art (assets/enemies/<name>.png), same onerror-fallback pipeline
   as classes -- see ui.js _enemyIconHtml. Rolling out in batches (71 enemies
   total), so most will still show the emoji fallback for a while. */
.enemy-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.enemy-icon-img { display: block; border-radius: 6px; object-fit: cover; }
.enemy-icon-fallback { display: inline-flex; align-items: center; justify-content: center; }
.enemy-icon-sm .enemy-icon-img, .enemy-icon-sm .enemy-icon-fallback { width: 18px; height: 18px; font-size: 16px; }
.enemy-icon-md .enemy-icon-img, .enemy-icon-md .enemy-icon-fallback { width: 76px; height: 76px; font-size: 64px; }
.property-icon-art { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.property-icon-art-img { display: block; border-radius: 8px; object-fit: cover; width: 48px; height: 48px; }
.property-icon-art-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; width: 48px; height: 48px; }
.class-name { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.class-desc { font-size: 12px; color: var(--text2); margin-bottom: 8px; line-height: 1.4; }
.class-stats { display: flex; gap: 8px; font-size: 11px; color: var(--text3); flex-wrap: wrap; margin-bottom: 4px; }
.class-hp-mp { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.class-skills { font-size: 11px; color: var(--blue); }
.create-actions { display: flex; gap: 12px; }

/* ── CHARACTER CREATION v2 ──────────────────────────────── */
.create-step-header { margin-bottom: 6px; }
.create-steps { display: flex; align-items: center; gap: 5px; margin-bottom: 18px; }
.create-step { display: flex; align-items: center; padding: 4px 10px; border-radius: 20px; background: var(--bg1); border: 1px solid var(--border); color: var(--text3); font-size: 12px; transition: all 0.15s; }
.create-step span { display: none; }
.create-step.active { border-color: var(--gold); color: var(--gold); background: var(--bg2); }
.create-step.active span, .create-step.done span { display: inline; margin-left: 3px; }
.create-step.done { border-color: #40c060; color: #40c060; background: rgba(40,160,40,0.08); }
.create-step-sep { color: var(--text3); font-size: 14px; padding: 0 2px; }
.create-sub { font-size: 16px; color: var(--gold2); margin: 0 0 4px; }
.create-hint { font-size: 13px; color: var(--text3); margin-bottom: 16px; }
.create-selection-badge { display: inline-block; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 14px; font-size: 13px; color: var(--text2); margin-bottom: 10px; }
.badge-sep { margin: 0 8px; color: var(--gold2); }

/* Race grid & cards */
.race-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 20px; }
.race-card { background: var(--bg1); border: 2px solid var(--border); border-radius: var(--radius); padding: 13px; cursor: pointer; transition: all 0.15s; }
.race-card:hover { border-color: var(--gold2); background: var(--bg2); }
.race-card.selected { border-color: var(--gold); background: var(--bg2); box-shadow: 0 0 10px rgba(200,162,48,0.3); }
.race-portrait { width: calc(100% + 26px); height: auto; margin: -13px -13px 10px -13px; display: block; border-radius: var(--radius) var(--radius) 0 0; filter: brightness(1.35) contrast(1.05); }
.race-name { font-size: 15px; font-weight: bold; margin-bottom: 3px; }
.race-desc { font-size: 11px; color: var(--text2); margin-bottom: 7px; line-height: 1.4; }
.race-stat-bonuses { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }
.stat-pos { background: rgba(50,160,50,0.18); color: #60d060; border-radius: 4px; padding: 2px 5px; font-size: 10px; font-weight: 600; }
.stat-neg { background: rgba(200,50,50,0.18); color: #e06060; border-radius: 4px; padding: 2px 5px; font-size: 10px; font-weight: 600; }
.race-passives { border-top: 1px solid var(--border); padding-top: 7px; }
.race-passive { font-size: 11px; color: var(--blue); margin-bottom: 3px; line-height: 1.4; }

/* Wide class grid (12 classes, 4 columns) */
.class-grid-wide { grid-template-columns: repeat(4, 1fr); }

/* Create step 3 — summary layout */
.create-summary { display: grid; grid-template-columns: 320px 1fr; gap: 22px; margin-bottom: 20px; align-items: start; }
.hero-preview-badge { font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 4px; }
.create-summary-right { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; max-height: 540px; overflow-y: auto; }
.summary-section { margin-bottom: 16px; }
.summary-section:last-child { margin-bottom: 0; }
.summary-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.stat-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.stat-preview-row { display: flex; justify-content: space-between; background: var(--bg2); padding: 4px 8px; border-radius: 4px; font-size: 12px; }
.stat-val { color: var(--gold2); font-weight: bold; }
.summary-passive { font-size: 12px; color: var(--blue); margin-bottom: 4px; }
.summary-skills { font-size: 12px; color: var(--text2); line-height: 1.6; }
.race-lore-text { font-size: 11px; color: var(--text3); line-height: 1.6; font-style: italic; }

/* ── BACKSTORY CARDS ────────────────────────────────────── */
.backstory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 20px; }
.backstory-grid.bsgrid-4 { grid-template-columns: repeat(2, 1fr); }
.backstory-card {
  background: var(--bg1); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px; cursor: pointer; transition: all 0.15s;
  display: flex; flex-direction: column; gap: 7px;
}
.backstory-card:hover { border-color: var(--gold2); background: var(--bg2); }
.backstory-card.selected { border-color: var(--gold); background: var(--bg2); box-shadow: 0 0 12px rgba(200,162,48,0.3); }
.backstory-icon { font-size: 28px; }
.backstory-title { font-size: 14px; font-weight: bold; color: var(--gold2); }
.backstory-desc { font-size: 12px; color: var(--text2); line-height: 1.5; flex: 1; }
.backstory-bonus { display: flex; gap: 5px; flex-wrap: wrap; }
.backstory-trait { font-size: 11px; color: var(--blue); border-top: 1px solid var(--border); padding-top: 7px; line-height: 1.4; }

/* ── TOWN SCREEN ─────────────────────────────────────────── */
.town-flavor { color: var(--text2); font-style: italic; margin-bottom: 16px; line-height: 1.5; }
.building-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.building-card {
  background:
    linear-gradient(rgba(16,16,26,0.75), rgba(16,16,26,0.75)),
    url('../assets/texture/charcoal_grain.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.building-card:hover {
  border-color: var(--gold2);
  background:
    linear-gradient(rgba(24,24,36,0.68), rgba(24,24,36,0.68)),
    url('../assets/texture/charcoal_grain.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translateY(-2px);
}
.building-icon { font-size: 32px; margin-bottom: 8px; }
.building-name { font-size: 14px; color: var(--gold); font-weight: bold; margin-bottom: 4px; }
.building-desc { font-size: 12px; color: var(--text2); }
/* Services/Summary — bg2 info-section convention (matches Character screen's
   Identity/Alignment/Faction sections), wrapping the previously-bare button row
   and flat text strip so they don't look under-styled next to the polished header. */
.town-services-section, .town-summary-section { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin-bottom:8px; }
.town-services-section h4, .town-summary-section h4 { margin:0 0 6px; font-size:13px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
.town-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* flex-wrap (not a fixed grid) so chips reflow naturally on narrow viewports
   without needing a separate mobile breakpoint override. */
.world-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.summary-item { display:flex; align-items:center; gap:5px; font-size: 12px; color: var(--text2); background:var(--bg3); border-radius:10px; padding:4px 10px; }
.active-quest { color: var(--gold); }

/* ── TOWN SYSTEM v2 ─────────────────────────────────────── */
.town-screen { display: flex; flex-direction: column; gap: 10px; }
.town-header { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.town-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.town-big-icon { font-size: 36px; flex-shrink: 0; }
.town-name-heading { font-size: 20px; color: var(--gold); margin: 0 0 3px; }
.town-atmosphere { font-size: 13px; color: var(--text2); font-style: italic; margin: 0; }
.town-rep-row { display: flex; align-items: center; gap: 10px; }
.town-rep-label { font-size: 13px; font-weight: bold; white-space: nowrap; }
.town-rep-bar-bg { flex: 1; height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.town-rep-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* Entry event banner */
.town-entry-event { background: linear-gradient(135deg, #1a1a2e, #16213e); border: 1px solid var(--gold2); border-radius: var(--radius); padding: 14px 16px; }
.tee-header { font-size: 15px; color: var(--gold); font-weight: bold; margin-bottom: 6px; }
.tee-desc { font-size: 13px; color: var(--text); margin-bottom: 10px; line-height: 1.5; }
.tee-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.disabled-btn { opacity: 0.5; pointer-events: none; }

/* Investment ready notice */
.town-investment-ready { background: #1a2a1a; border: 1px solid #40c060; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: #40c060; display: flex; align-items: center; gap: 10px; }

/* District grid */
.town-districts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.district-card {
  background:
    linear-gradient(rgba(16,16,26,0.75), rgba(16,16,26,0.75)),
    url('../assets/texture/charcoal_grain.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid rgba(200,162,48,0.18); border-radius: var(--radius); padding: 10px; cursor: pointer; text-align: center; transition: all 0.15s; position: relative;
}
.district-card:hover {
  border-color: var(--gold2);
  background:
    linear-gradient(rgba(24,24,36,0.68), rgba(24,24,36,0.68)),
    url('../assets/texture/charcoal_grain.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translateY(-2px);
}
.district-icon { font-size: 24px; margin-bottom: 3px; }
.district-name { font-size: 12px; color: var(--gold); font-weight: bold; margin-bottom: 2px; }
/* Clamped to 2 lines -- some desc strings run 60-90 chars and would otherwise
   wrap to 3 lines, silently stretching the whole grid ROW to match the one
   longest card (the actual driver of the reported "wasted space" scrolling,
   more than the padding/icon size above). */
.district-desc { font-size: 10.5px; color: var(--text2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.district-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; background: var(--gold2); color: #000; padding: 2px 6px; border-radius: 10px; font-weight: bold; }

/* Property grounds (Visit Grounds screen) — reuses the district-grid/card look */
.grounds-visit-btn { margin: 4px 0 8px; }
.ground-card-badge { top: 8px; right: 8px; width: 10px; height: 10px; padding: 0; background: #e06040; border-radius: 50%; }
.grounds-visit-screen { display: flex; flex-direction: column; gap: 14px; }

/* Animal Pen "Tend the Animals" modal */
.pen-modal { display: flex; flex-direction: column; gap: 10px; }
.pen-animal-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); }
.pen-animal-icon { font-size: 26px; }
.pen-animal-info { flex: 1; min-width: 0; }
.pen-animal-name { font-size: 13px; color: var(--text); font-weight: bold; }
.pen-animal-species { font-size: 11px; color: var(--text3); font-weight: normal; }
.pen-happiness-bar { height: 5px; background: var(--bg3); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.pen-happiness-fill { height: 100%; background: #40c060; }
.pen-tended-check { font-size: 12px; color: #40c060; font-weight: bold; }

/* NPC row */
.town-npcs-section { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.town-npcs-title { font-size: 14px; color: var(--gold2); margin: 0 0 8px; }
.town-npcs-row { display: flex; gap: 8px; }
.npc-portrait-card { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 6px; cursor: pointer; text-align: center; transition: all 0.15s; }
.npc-portrait-card:hover { border-color: var(--gold2); background: var(--bg3); }
.npc-portrait-icon { font-size: 28px; margin-bottom: 4px; }
.npc-portrait-name { font-size: 12px; color: var(--gold); font-weight: bold; margin-bottom: 2px; }
.npc-portrait-role { font-size: 11px; color: var(--text2); }

/* NPC modal */
.npc-modal { display: flex; flex-direction: column; gap: 12px; }
.npc-modal-header { display: flex; align-items: center; gap: 12px; }
.npc-modal-icon { font-size: 36px; flex-shrink: 0; }
.npc-modal-name { font-size: 17px; color: var(--gold); font-weight: bold; }
.npc-modal-role { font-size: 12px; color: var(--text2); }
.npc-modal-dialogue { background: var(--bg2); border-left: 3px solid var(--gold2); padding: 12px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--text); line-height: 1.6; }
.npc-modal-actions { display: flex; gap: 8px; }
.npc-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.npc-rep-hint { font-size: 11px; color: var(--text3); }
/* NPC topic buttons */
.npc-topics-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.npc-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.npc-topic-btn { font-size: 12px; padding: 5px 10px; touch-action: manipulation; text-align: left; }
/* NPC topic response area */
.npc-topic-response { display: flex; flex-direction: column; gap: 10px; }
.npc-speech { background: var(--bg2); border-left: 3px solid var(--gold2); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--text); line-height: 1.6; margin: 0; }
.npc-lore { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 0; }
.npc-building-list { display: flex; flex-direction: column; gap: 4px; }
.npc-bld-item { font-size: 13px; color: var(--text); padding: 5px 0; border-bottom: 1px solid var(--border); line-height: 1.5; }
.npc-bld-item:last-child { border-bottom: none; }
.npc-tip { background: rgba(200,170,48,0.10); border-left: 3px solid var(--gold2); padding: 7px 10px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; color: var(--text2); line-height: 1.5; }
.npc-threat-section { margin-bottom: 4px; }
.npc-threat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.npc-threat-item { font-size: 13px; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--border); }
.npc-threat-item:last-child { border-bottom: none; }
.npc-threat-rare { color: #e06040; }
.npc-news-item { font-size: 13px; color: var(--text); padding: 5px 0; border-bottom: 1px solid var(--border); }
.npc-news-item::before { content: "📜 "; }
.npc-news-item:last-child { border-bottom: none; }
.npc-price { color: var(--gold2); font-size: 12px; margin-left: 6px; }
.npc-back-btn { align-self: flex-start; margin-top: 4px; touch-action: manipulation; }
.npc-goto-btn { align-self: flex-start; margin-top: 4px; touch-action: manipulation; }

/* Unique market */
.unique-market-grid { display: flex; flex-direction: column; gap: 10px; }
.unique-item-card { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.ui-icon { font-size: 26px; flex-shrink: 0; }
.ui-body { flex: 1; min-width: 0; }
.ui-name { font-size: 13px; color: var(--gold); font-weight: bold; margin-bottom: 2px; }
.ui-desc { font-size: 11px; color: var(--text2); }
.ui-price { font-size: 13px; color: var(--gold2); font-weight: bold; white-space: nowrap; margin-bottom: 4px; }

/* Special service modals */
.rune-item-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rune-item-card { display: flex; align-items: center; justify-content: space-between; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; transition: all 0.15s; gap: 8px; }
.rune-item-card:hover { border-color: var(--gold2); background: var(--bg3); }
.active-bounty-notice { background: #1a2a1a; border: 1px solid #40c060; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; color: #40c060; }
.skill-book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.skill-book-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.sb-name { font-size: 13px; color: var(--gold); font-weight: bold; margin-bottom: 4px; }
.sb-desc { font-size: 11px; color: var(--text2); margin-bottom: 8px; line-height: 1.4; }
.stat-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.stat-choice-btn { font-size: 13px; }

/* ── WORLD MAP ───────────────────────────────────────────── */
.world-desc { color: var(--text2); margin-bottom: 16px; }
.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.location-card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.location-card:hover { border-color: var(--gold2); background: var(--bg2); }
.location-card.locked { opacity: 0.5; cursor: not-allowed; }
.location-card.quest-location { border-color: var(--gold); }
.quest-marker { position: absolute; top: 6px; right: 6px; background: var(--gold); color: #000; font-size: 10px; padding: 2px 5px; border-radius: 3px; font-weight: bold; }
.loc-name { font-size: 14px; color: var(--gold); font-weight: bold; margin-bottom: 3px; }
.loc-type { font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.loc-desc { font-size: 12px; color: var(--text2); margin-bottom: 6px; line-height: 1.4; }
.loc-levels { font-size: 12px; color: var(--text3); }
.loc-difficulty { font-size: 12px; font-weight: bold; }
.loc-enemies { font-size: 11px; color: var(--text3); margin-top: 4px; }
.diff-safe   { color: var(--blue); }
.diff-easy   { color: var(--green); }
.diff-normal { color: var(--text); }
.diff-hard   { color: var(--orange); }
.diff-deadly { color: var(--red); }
.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text3);
}

/* ── CHARACTER SCREEN ────────────────────────────────────── */
.char-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.char-left { display: flex; flex-direction: column; gap: 8px; }
.char-portrait { font-size: 56px; text-align: center; }
.char-race-portrait { width: 100%; display: block; object-fit: cover; border-radius: calc(var(--radius) - 4px); filter: brightness(1.35) contrast(1.05); }

/* Faux-ornamental corner brackets, CSS-only (no new art) -- four short gold
   L-shapes drawn via layered background-gradients on a ::before pseudo-element.
   Used on the portrait frame; reusable on any container via the same class. */
.ornate-frame { position: relative; padding: 6px; }
.ornate-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--gold) 0 18px, transparent 18px), linear-gradient(to bottom, var(--gold) 0 18px, transparent 18px),
    linear-gradient(to left,  var(--gold) 0 18px, transparent 18px), linear-gradient(to bottom, var(--gold) 0 18px, transparent 18px),
    linear-gradient(to right, var(--gold) 0 18px, transparent 18px), linear-gradient(to top,    var(--gold) 0 18px, transparent 18px),
    linear-gradient(to left,  var(--gold) 0 18px, transparent 18px), linear-gradient(to top,    var(--gold) 0 18px, transparent 18px);
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-repeat: no-repeat;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  opacity: 0.85;
}
.char-portrait-frame { box-shadow: 0 0 24px rgba(200,162,48,0.12); }

/* Shared texture+gold-brim treatment for every Character-screen panel --
   the same visual language as the World map's region-info panels
   (.rmap-info-section) the redesign was asked to match. Previously only 4 of
   these 11 classes had any texture, and none had the gold border. */
.char-summary-box, .char-stats-box, .identity-section, .equipment-section,
.skills-section, .stats-section, .alignment-section, .faction-rep-section,
.prestige-section, .proficiency-section, .titles-section {
  background:
    linear-gradient(rgba(16,16,26,0.68), rgba(16,16,26,0.68)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(200,162,48,0.22);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 0;
  margin-top: 0;
}
/* Slimmer padding on just the sidebar summary/stat panels (feedback #131 --
   "lots of wasted space", explicitly not the tab panels, which reuse the same
   shared box class above but keep the roomier 12px). */
.char-summary-box, .char-stats-box { padding: 8px 12px; }
.char-summary-box { display: flex; flex-direction: column; gap: 3px; }
.char-class { font-size: 15px; font-weight: bold; text-align: center; margin-bottom: 1px; }
.char-summary-row { display: flex; justify-content: space-between; padding: 0 4px; }
.char-level, .char-gold { font-size: 13px; color: var(--gold); }
.char-exp, .char-rep { font-size: 12px; color: var(--text2); }

/* Decorated section header -- a centered gold-fade divider either side of the
   label, replacing plain text. Class-only swap, no markup change needed. */
.ornate-header {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--gold); font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  margin: 0 0 6px;
}
.ornate-header::before, .ornate-header::after { content: ""; flex: 1; height: 1px; max-width: 40px; }
.ornate-header::before { background: linear-gradient(to left, var(--gold), transparent); }
.ornate-header::after  { background: linear-gradient(to right, var(--gold), transparent); }
.faction-rep-section-header .ornate-header { margin-bottom: 0; }
.char-stats-box .ornate-header { margin-bottom: 4px; }

/* 2-column layout for the sidebar Core Stats / Combat panels -- was one stat
   per row (5 and 4 rows respectively); halves each panel's height. */
.char-stats-box .stat-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }

.stat-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; border-bottom: 1px solid var(--bg3); }
.stat-val { color: var(--gold); font-weight: bold; }

.char-right { display: flex; flex-direction: column; gap: 12px; }
.char-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid rgba(200,162,48,0.22); }
.char-tab {
  flex: 1; text-align: center; padding: 10px 6px; cursor: pointer;
  color: var(--text2); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 2px solid transparent; transition: all 0.15s; user-select: none;
}
.char-tab:hover { color: var(--text); }
.char-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.char-tab-content { display: flex; flex-direction: column; gap: 12px; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equip-slot { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; cursor: pointer; min-height: 70px; }
.equip-slot:hover { border-color: var(--border2); }
.equip-slot-label { font-size: 10px; color: var(--text3); margin-bottom: 4px; text-transform: uppercase; }
.equip-item { padding: 4px; border: 1px solid var(--border); border-radius: 3px; }
.equip-item-name { font-size: 12px; }
.equip-item-stat { font-size: 11px; color: var(--text2); }
.equip-empty { font-size: 11px; color: var(--text3); font-style: italic; }

/* ── SKILL LIST (WoW-style rows) ──────────────────────────── */
.skill-list { display: flex; flex-direction: column; gap: 5px; }
.skill-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid #9890a0;
  border-radius: var(--radius);
  padding: 9px 10px 9px 9px;
  transition: background 0.15s;
}
.skill-row:hover { background: var(--bg3); }
.skill-row-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 5px;
  border: 2px solid #9890a0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(0,0,0,0.45);
}
.skill-row-body { flex: 1; min-width: 0; }
.skill-row-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.skill-row-left { flex: 1; min-width: 0; }
.skill-row-name { font-size: 13px; font-weight: bold; color: var(--white); line-height: 1.2; }
.skill-row-type { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.skill-row-right { text-align: right; flex-shrink: 0; }
.skill-row-cost { font-size: 12px; color: #5090d0; font-weight: bold; }
.skill-row-range { font-size: 10px; color: var(--text3); margin-top: 2px; }
.skill-row-desc { font-size: 12px; color: #b09040; margin-top: 6px; line-height: 1.45; }
.skill-row-mult { font-size: 11px; color: var(--text3); }
.skill-row-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.skill-row-tier { font-size: 13px; color: var(--gold); letter-spacing: 2px; }
.skill-row-tier-label { font-size: 10px; color: var(--text3); letter-spacing: 0; margin-left: 3px; vertical-align: middle; }
.skill-row-maxed { font-size: 10px; color: var(--green); font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.skill-upg-btn { font-size: 11px; padding: 3px 8px; }

/* ── INVENTORY ───────────────────────────────────────────── */
.inv-filter-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filter-btn {
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--text2);
  transition: all 0.15s;
}
.filter-btn.active { border-color: var(--gold2); color: var(--gold); }
.inv-sell-row { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.inv-sell-row .btn-danger { background: var(--bg2); }

/* ── INVENTORY GRID v2.0 ──────────────────────────────────── */
.inventory-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.inv-item {
  background:
    linear-gradient(rgba(16,16,26,0.82), rgba(16,16,26,0.82)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.inv-item:hover {
  background:
    linear-gradient(rgba(24,24,36,0.72), rgba(24,24,36,0.72)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-3px);
}

/* v2 card layout */
.inv-item-v2 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 8px; }
.inv-item-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); display:flex; align-items:center; justify-content:center; min-height:26px; }
.gear-svg { width:26px; height:26px; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.inv-item-name { font-size: 11px; font-weight: bold; margin-bottom: 2px; word-break: break-word; line-height: 1.3; }
.inv-item-type { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.inv-item-stat { font-size: 10px; color: var(--text2); }
.inv-item-quality { font-size: 10px; font-style: italic; margin-top: 2px; }
.inv-item-value { font-size: 9px; color: var(--gold2); margin-top: 2px; }

/* Stack badge — top-right corner */
.stack-badge {
  position: absolute;
  top: 3px; right: 3px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
}

/* Unidentified badge — top-left corner */
.unidentified-badge {
  position: absolute;
  top: 3px; left: 3px;
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

/* ── INVENTORY ENHANCEMENTS ──────────────────────────────── */

/* Sort row */
.inv-sort-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.inv-sort-label { font-size: 11px; color: var(--text3); margin-right: 2px; }
.sort-btn {
  padding: 3px 9px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--text3);
  transition: all 0.15s;
}
.sort-btn.active { border-color: var(--accent); color: var(--accent); }

/* Lock badge — bottom-left of card */
.inv-lock-btn {
  position: absolute;
  bottom: 3px; left: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.inv-item:hover .inv-lock-btn { opacity: 0.85; }
.inv-locked .inv-lock-btn { opacity: 1; }

/* Locked item visual — muted and gold-tinted border */
.inv-locked { opacity: 0.8; }
.inv-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 1px solid rgba(255,200,50,0.4);
  pointer-events: none;
}

/* Stat delta badge — top-right, stacks below stack-badge if present */
.inv-delta-badge {
  position: absolute;
  top: 3px; right: 3px;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
}
.inv-delta-up   { background: rgba(40,200,80,0.85); color: #fff; }
.inv-delta-down { background: rgba(200,60,60,0.85); color: #fff; }

/* When both stack-badge and delta badge present, nudge delta down */
.inv-item:has(.stack-badge) .inv-delta-badge { top: 20px; }

/* Quick-use button on consumable cards */
.inv-quick-use {
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.inv-quick-use:hover { background: var(--accent2, var(--accent)); filter: brightness(1.2); }

/* Quality glow classes (applied via JS inline style, but kept here for reference) */
.quality-normal  { --qc: #a0a0a0; }
.quality-uncommon{ --qc: #40c060; }
.quality-rare    { --qc: #4080ff; }
.quality-epic    { --qc: #c040ff; }
.quality-legendary { --qc: #ff8020; }

/* ── ITEM DETAIL MODAL v2.0 ──────────────────────────────── */
.item-detail-header {
  border: 2px solid;
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.item-detail-icon { font-size: 32px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.item-detail-name { font-size: 18px; font-weight: bold; margin-bottom: 3px; }
.item-detail-type { font-size: 13px; color: var(--text2); margin-bottom: 2px; }
.item-detail-quality { font-size: 12px; font-style: italic; margin-top: 2px; }
.item-detail-stat { font-size: 14px; color: var(--text); padding: 4px 0; }
.item-affixes { margin: 8px 0; background: var(--bg2); border-radius: var(--radius); padding: 8px; }
.affix-row { font-size: 13px; padding: 2px 0; }
.affix-row.positive { color: var(--green); }
.affix-row.negative { color: var(--red); }
.item-req { font-size: 13px; color: var(--orange); padding: 4px 0; }
.item-value { font-size: 13px; color: var(--gold2); padding: 4px 0; }
.item-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Unidentified notice in modal */
.unid-notice {
  background: rgba(192,64,255,0.12);
  border: 1px solid var(--purple);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--purple);
  margin: 8px 0;
}

/* ── CONSUMABLE DETAIL MODAL ─────────────────────────────── */
.item-detail-consumable { max-width: 340px; }

.cons-header {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
}
.cons-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.cons-info { flex: 1; }
.cons-qty-badge {
  display: inline-block;
  margin-top: 5px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text2);
}
.cons-desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.btn-use { min-width: 120px; font-size: 14px; padding: 8px 14px; }

/* ── QUESTS ──────────────────────────────────────────────── */
.active-quest-panel {
  background: linear-gradient(135deg, var(--bg1), rgba(200,162,48,0.05));
  border: 1px solid var(--gold2);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
}
.active-quest-panel h3 { color: var(--gold); margin-bottom: 8px; }
.quest-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quest-col h3 { color: var(--gold); margin-bottom: 10px; }
.quest-card {
  background:
    linear-gradient(rgba(17,13,26,0.84), rgba(17,13,26,0.84)),
    url('../assets/texture/parchment.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}
.quest-card-active { border-color: var(--gold); }
.quest-card-locked { opacity: 0.6; }
.quest-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.quest-title { font-size: 14px; color: var(--gold); font-weight: bold; }
.quest-difficulty { font-size: 12px; }
.quest-type-badge { display: inline-block; background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px; padding: 2px 8px; font-size: 11px; color: var(--text2); margin-bottom: 6px; }
.quest-desc { font-size: 13px; color: var(--text); margin-bottom: 6px; line-height: 1.5; }
.quest-hook { font-size: 12px; color: var(--text2); margin-bottom: 6px; border-left: 2px solid var(--border2); padding-left: 8px; }
.quest-complication { font-size: 12px; color: var(--orange); margin-bottom: 6px; background: rgba(192,96,48,0.1); padding: 6px; border-radius: 3px; }
.quest-objective { font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.quest-progress { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.quest-progress-bar { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.quest-progress-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.3s ease; }
.quest-stage-progress { font-size: 12px; color: var(--gold); background: rgba(200,162,48,0.12); border: 1px solid rgba(200,162,48,0.3); border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; }
.quest-location { font-size: 12px; color: var(--text3); margin-bottom: 6px; }
.quest-rewards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.reward-gold { color: var(--gold); font-size: 13px; }
.reward-exp  { color: var(--green); font-size: 13px; }
.reward-item { font-size: 13px; }
.reward-time { color: var(--orange); font-size: 13px; }
.quest-actions { display: flex; gap: 8px; }
.completed-scroll { max-height: 200px; overflow-y: auto; }
.quest-completed-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--bg3); font-size: 12px; }
.q-status-icon { font-size: 14px; }
.q-title { flex: 1; color: var(--text2); }
.q-reward { color: var(--gold); }
.more-text { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Quest board in tavern */
.quest-board-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: 13px;
}

/* ── FOLLOWERS ───────────────────────────────────────────── */
/* Shared base look for anywhere a follower is shown as a visual unit
   (Party grid card, Tavern hire card, Garrison chip) — one consistent
   treatment instead of three separately hand-tuned looks. */
.follower-visual-base {
  background:
    linear-gradient(rgba(24,24,36,0.72), rgba(24,24,36,0.72)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.15s;
}
.follower-visual-base:hover { transform: translateY(-2px); border-color: var(--gold2); }

.followers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.follower-card { padding: 10px; min-width: 0; }
/* Unique companions get the same glow already used for active quest cards */
.follower-card-unique { animation: glow 2s ease-in-out infinite; }
.fc-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.fc-icon { font-size: 28px; flex-shrink: 0; }
.fc-info { flex: 1; min-width: 90px; }
.fc-name { font-size: 14px; font-weight: bold; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-class { font-size: 12px; }
/* Status pill + in-party toggle share one compact column on the header's
   right edge (feedback #138 -- the toggle used to be its own full-width row
   below the header, adding a whole extra line to every card). */
.fc-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; flex-shrink: 0; }
.fc-status { font-size: 11px; font-weight: bold; padding: 2px 8px; border-radius: 10px; background: var(--bg3); white-space: nowrap; }
.fc-inparty-toggle {
  font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text3); cursor: pointer;
}
.fc-inparty-toggle.active { background: rgba(200,162,48,0.2); border-color: var(--gold2); color: var(--gold); }
.fc-bars { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.fc-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text3); }
.mini-bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.mini-fill { height: 100%; border-radius: 3px; }
.mission-bar { height: 8px; }
.fc-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.trait-badge { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 2px 7px; font-size: 11px; color: var(--text2); cursor: pointer; }
/* Tap-to-expand: title= tooltips don't work reliably on touch devices (this
   game is played mobile-first) — tapping a trait reveals its description inline. */
.trait-badge-desc { display: none; font-size: 10px; color: var(--text3); width: 100%; margin-top: 2px; }
.trait-badge.expanded .trait-badge-desc { display: block; }
.fc-stats-mini { font-size: 11px; color: var(--text3); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fc-mission { background: var(--bg2); border-radius: var(--radius); padding: 5px 8px; margin-bottom: 6px; }
.mission-type { font-size: 11px; color: var(--gold); margin-bottom: 3px; }
.fc-actions, .fdm-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mission-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  flex: 1;
}
.followers-screen { display: flex; flex-direction: column; min-height: 100%; }
.follower-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: auto; padding: 12px; background: var(--bg2); border-radius: var(--radius); border: 1px solid var(--border); }
.fs-stat { text-align: center; font-size: 13px; color: var(--text2); }
.no-followers { text-align: center; padding: 40px; color: var(--text2); }

/* Follower hire cards */
.follower-hire-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.follower-hire-card { padding: 10px; }
.fhc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fhc-icon { font-size: 22px; }
.fhc-name { font-size: 14px; font-weight: bold; }
.fhc-class { font-size: 12px; }
.fhc-cost { margin-left: auto; color: var(--gold); font-weight: bold; }
.fhc-stats { font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.fhc-bio { font-size: 11.5px; line-height: 1.45; color: var(--text2); font-style: italic; margin-bottom: 8px; }
.fhc-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

/* Follower detail modal */
.follower-detail-modal {
  background:
    linear-gradient(rgba(24,24,36,0.8), rgba(24,24,36,0.8)),
    url('../assets/texture/leather.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  margin: -16px; padding: 16px; border-radius: var(--radius);
}
.fdm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fdm-icon { font-size: 32px; }
.fdm-name { font-size: 16px; font-weight: bold; color: var(--text); }
.fdm-class { font-size: 12px; }
.fdm-stats-grid { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text2); background: var(--bg2); border-radius: var(--radius); padding: 7px 9px; margin-bottom: 8px; }
.fdm-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin: 8px 0 5px; }
.fdm-bio { background: var(--bg2); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; }
.fdm-bio-meta { font-size: 11px; color: var(--gold); margin-bottom: 4px; }
.fdm-bio-text { font-size: 13px; line-height: 1.5; color: var(--text2); }
.fdm-traits-list { display: flex; flex-direction: column; gap: 4px; }
.fdm-trait-row { font-size: 12px; color: var(--text2); background: var(--bg2); border-radius: var(--radius); padding: 5px 8px; }
.follower-equip-slot { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 9px; margin-bottom: 5px; cursor: pointer; }
.follower-equip-slot:hover { border-color: var(--gold2); }
.follower-equip-slot-icon { font-size: 20px; }
.follower-equip-slot-info { flex: 1; }
.follower-equip-slot-label { font-size: 11px; color: var(--text3); }
.follower-equip-slot-item { font-size: 13px; font-weight: bold; }
.follower-equip-slot-empty { font-size: 12px; color: var(--text3); font-style: italic; }
.follower-equip-pick-row { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; }
.follower-equip-pick-info { flex: 1; font-size: 13px; }

/* ── COMBAT SCREEN ───────────────────────────────────────── */
.combat-screen { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; }
.combat-header h2 { color: var(--red); text-align: center; font-size: 20px; }
.combat-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}
.combat-side h3 { color: var(--gold); font-size: 14px; margin-bottom: 8px; }
.combat-vs { font-size: 24px; display: flex; align-items: center; padding: 20px 0; }
@keyframes telegraph-pulse { 0%,100% { box-shadow: 0 0 8px rgba(224,160,32,0.45); } 50% { box-shadow: 0 0 18px rgba(224,160,32,0.85); } }

/* Compact Pokemon-style chip strip (feedback #125/#126) -- replaces one
   full-detail card per combatant with a small tap-to-target chip; full
   detail for whichever combatant is currently focused lives in
   .combat-focused-panel below instead of being duplicated on every card. */
.combat-chip-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.combat-chip {
  position: relative;
  width: 78px;
  background: linear-gradient(135deg, #102010, #182818);
  border: 1px solid #204020;
  border-radius: var(--radius);
  padding: 6px 4px;
  text-align: center;
  transition: all 0.15s;
}
.combat-chip.enemy-chip { background: linear-gradient(135deg, #200010, #300018); border-color: #402020; cursor: pointer; }
.combat-chip.enemy-chip:hover:not(.dead) { border-color: var(--red); transform: scale(1.04); }
.combat-chip:not(.enemy-chip) { cursor: pointer; }
.combat-chip.dead { opacity: 0.4; cursor: default; }
.combat-chip.active { box-shadow: 0 0 10px rgba(200,162,48,0.5); border-color: var(--gold) !important; }
.combat-chip.targeted { outline: 2px solid var(--blue); outline-offset: 1px; }
.combat-chip.enemy-chip.targeted { outline-color: var(--red); }
.combat-chip.telegraphing { border-color: #e0a020 !important; animation: telegraph-pulse 0.8s ease-in-out infinite; }
.combat-chip-icon { font-size: 22px; margin-bottom: 3px; }
.combat-chip-icon .enemy-icon-img, .combat-chip-icon .enemy-icon-fallback { margin: 0 auto; }
.combat-chip-name { font-size: 9px; font-weight: bold; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.combat-chip-bar { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.combat-chip-fill { height: 100%; transition: width 0.4s ease; }
.combat-chip-boss { position: absolute; top: -4px; left: -4px; font-size: 12px; }
.combat-chip-telegraph { position: absolute; top: -4px; right: -4px; font-size: 12px; }
.combat-chip-status-dot { position: absolute; bottom: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); border: 1px solid var(--bg1); }
.combat-chip-dead { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0,0,0,0.5); border-radius: var(--radius); }

/* Focused-detail panel -- full stats for whichever combatant was targeted
   most recently (or the active/current-turn combatant by default). */
.combat-focused-panel {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg1); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 12px;
}
.cfp-icon { flex-shrink: 0; font-size: 24px; }
.cfp-empty { color: var(--text3); font-size: 13px; font-style: italic; }
.cfp-telegraph { font-size: 11px; color: #e0a020; font-weight: bold; margin-top: 2px; }

.combatant-name { font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.comb-bar-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); }
.comb-bar { flex: 1; height: 7px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.bar-fill { transition: width 0.4s ease; }
.enemy-hp-bar { }
.weakness { font-size: 11px; color: var(--orange); }
.status-icons { font-size: 14px; margin-top: 2px; }

.combat-actions { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.combat-action-row { display: flex; gap: 20px; flex-wrap: wrap; }
.action-group h4 { color: var(--gold); font-size: 13px; margin-bottom: 6px; }
.action-group { display: flex; flex-direction: column; gap: 6px; }
/* Attack + Flee side by side instead of stacked full-width rows -- removes
   a whole row of vertical space from every fight (feedback #139). */
.combat-primary-actions { display: flex; gap: 6px; }
.combat-primary-actions .btn { flex: 1; margin-bottom: 0; }
/* Skills list -- 2 per row instead of one full-width button each (feedback
   #126, "wasted space"). The old mobile-only rule targeting this class
   never matched any real markup (skills rendered via plain .action-group,
   no .skill-grid element existed) -- fixed by wrapping the skill buttons
   in an actual .skill-grid container in ui.js. */
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.combat-btn { margin-bottom: 4px; }
.selected-target-display { font-size: 12px; color: var(--gold); margin-bottom: 4px; }

.combat-result {
  text-align: center;
  padding: 20px;
  border-radius: var(--radius);
}
.combat-result.victory { background: linear-gradient(135deg, #102010, #1a3a1a); border: 2px solid var(--green); }
.combat-result.defeat  { background: linear-gradient(135deg, #200000, #3a0000); border: 2px solid var(--red); }
.combat-result h2 { font-size: 24px; margin-bottom: 12px; }

.combat-log { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; max-height: 160px; overflow-y: auto; }
.combat-log h4 { color: var(--gold2); font-size: 12px; margin-bottom: 5px; }
.log-entries { display: flex; flex-direction: column; gap: 2px; }
.log-entry { font-size: 12px; padding: 1px 0; }
.log-attack { color: var(--text); }
.log-skill { color: var(--blue); }
.log-enemy_attack { color: #e06060; }
.log-damage { color: var(--red); }
.log-heal { color: var(--green); }
.log-death { color: #805050; }
.log-status { color: var(--purple); }
.log-info { color: var(--text2); }
.log-error { color: var(--red); }
.log-victory { color: var(--gold); font-weight: bold; }
.log-defeat { color: var(--red); font-weight: bold; }
.log-crit { color: #ffaa00; font-weight: bold; }

/* ── COMBAT ANIMATIONS ───────────────────────────────────── */

/* Hit flash: brief red overlay when a combatant takes damage */
@keyframes hitFlash {
  0%   { box-shadow: none; background-color: transparent; }
  25%  { box-shadow: inset 0 0 0 2000px rgba(200,40,40,0.45); }
  100% { box-shadow: none; background-color: transparent; }
}
.hit-flash { animation: hitFlash 0.38s ease !important; }

/* Heal flash: brief green overlay when healed */
@keyframes healFlash {
  0%   { box-shadow: none; }
  25%  { box-shadow: inset 0 0 0 2000px rgba(40,200,80,0.35); }
  100% { box-shadow: none; }
}
.heal-flash { animation: healFlash 0.38s ease !important; }

/* Death shake: enemy shakes violently when killed */
@keyframes deathShake {
  0%   { transform: translateX(0) scale(1); }
  15%  { transform: translateX(-8px) scale(1.03); }
  30%  { transform: translateX(8px)  scale(1.03); }
  45%  { transform: translateX(-5px) scale(1.01); }
  60%  { transform: translateX(5px)  scale(1.01); }
  80%  { transform: translateX(-2px) scale(1.0); }
  100% { transform: translateX(0)    scale(1.0); }
}
.death-shake { animation: deathShake 0.55s ease !important; }

/* Skill use: brief golden glow when a skill or ability fires */
@keyframes skillPop {
  0%   { box-shadow: 0 0 0px rgba(200,162,48,0); }
  40%  { box-shadow: 0 0 18px rgba(200,162,48,0.8); }
  100% { box-shadow: 0 0 0px rgba(200,162,48,0); }
}
.skill-pop { animation: skillPop 0.5s ease !important; }

/* Floating damage / heal numbers — spawned into document.body, fixed position */
.float-number {
  position: fixed;
  pointer-events: none;
  font-weight: bold;
  font-size: 20px;
  z-index: 9999;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  animation: floatUp 1.1s ease forwards;
  transform: translateX(-50%);
  white-space: nowrap;
}
@keyframes floatUp {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0)     scale(1.1); }
  20%  { opacity: 1;   transform: translateX(-50%) translateY(-14px)  scale(1.3); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-60px)  scale(0.85); }
}
.float-number.dmg-physical { color: #ff5555; }
.float-number.dmg-fire     { color: #ff8c20; text-shadow: 0 0 8px #ff4400; }
.float-number.dmg-ice      { color: #60d8ff; text-shadow: 0 0 8px #0088cc; }
.float-number.dmg-holy     { color: #ffff60; text-shadow: 0 0 8px #aaaa00; }
.float-number.dmg-lightning{ color: #c0a0ff; text-shadow: 0 0 8px #6040cc; }
.float-number.dmg-poison   { color: #80ff40; text-shadow: 0 0 8px #408000; }
.float-number.dmg-burn     { color: #ff6010; }
.float-number.heal-num     { color: #40ff80; font-size: 18px; text-shadow: 0 0 8px #00aa44; }
.float-number.crit-num     { color: #ffaa00; font-size: 24px; text-shadow: 0 0 10px #ff8800; }

/* Auto-acting follower indicator */
.combat-auto-banner {
  text-align: center;
  color: var(--text2);
  font-size: 13px;
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: pulse-warn 1s infinite;
}

/* Victory screen pulse */
@keyframes victoryPulse {
  0%,100% { box-shadow: 0 0 12px rgba(40,160,60,0.4); }
  50%     { box-shadow: 0 0 30px rgba(40,200,80,0.9); }
}
.combat-result.victory { animation: victoryPulse 1.5s ease-in-out infinite; }

/* ── GAME OVER ───────────────────────────────────────────── */
.gameover-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.gameover-content { text-align: center; max-width: 500px; }
.gameover-content h1 { font-size: 36px; color: var(--red); text-shadow: 0 0 20px rgba(192,64,64,0.5); margin-bottom: 16px; }
.gameover-content p { color: var(--text2); margin-bottom: 8px; }
.gameover-stats { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin: 16px 0; text-align: left; font-size: 13px; color: var(--text2); }

/* ── MODAL ───────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  /* Must outrank #game-menu-overlay (2000) -- confirmModal/queueModal are
     routinely opened from inside the game menu (Delete Save Slot, the new
     Restore-overwrite confirmation) and were previously unclickable there,
     since the still-open menu overlay sat on top and ate every click. */
  z-index: 2500;
  padding: 20px;
}
.modal-box {
  background:
    linear-gradient(rgba(16,16,26,0.85), rgba(16,16,26,0.85)),
    url('../assets/texture/parchment.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(200,162,48,0.22);
  border-radius: var(--radius);
  max-width: 700px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.modal-header h3 { color: var(--gold); font-size: 16px; }
.modal-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px; }
.modal-flavor { color: var(--text2); font-style: italic; margin-bottom: 14px; line-height: 1.5; }
.modal-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.modal-tab { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text2); }
.modal-tab.active { border-color: var(--gold2); color: var(--gold); }
.hero-gold-display { margin-bottom: 12px; color: var(--text2); }

/* Temple */
.temple-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.temple-option { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.temple-option h4 { color: var(--gold); margin-bottom: 8px; }
.temple-option p { font-size: 13px; color: var(--text2); margin-bottom: 8px; }

/* Shipyard rep panel */
.svc-rep-panel { margin-top: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.svc-rep-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; }
.svc-rep-label { color: var(--text); font-weight: bold; }
.svc-rep-val { color: var(--gold); font-size: 12px; }
.svc-rep-bar { height: 6px; background: var(--bg3); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.svc-rep-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.pirate-fill { background: linear-gradient(90deg, #a02020, #e04040); }
.naval-fill { background: linear-gradient(90deg, #2040a0, #4080e0); }
.svc-rep-milestones { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.svc-rep-milestones span { font-size: 11px; }
.svc-unlocked { color: var(--green) !important; }
.svc-locked { color: var(--text3) !important; }
.svc-rep-ready { margin-top: 10px; padding: 8px 10px; background: rgba(200,162,48,0.12); border: 1px solid var(--gold2); border-radius: var(--radius); font-size: 12px; color: var(--gold); text-align: center; }
/* Hollow Taint status badge */
.hollow-taint-badge { font-size: 11px; color: #c060ff; background: rgba(100,0,150,0.25); border: 1px solid #6020a0; border-radius: 10px; padding: 2px 7px; }
.active-buff-badge { font-size: 11px; color: var(--gold); background: rgba(200,162,48,0.15); border: 1px solid var(--gold2); border-radius: 10px; padding: 2px 7px; }
/* Nightmare Arena */
.nightmare-arena-intro { color: var(--text); }
.na-flavor { font-style: italic; color: var(--text2); font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.na-rounds { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.na-round-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 8px; background: var(--bg2); border-radius: 4px; }
.na-num { color: var(--text3); min-width: 50px; }
.na-enemy { color: var(--text); }
/* Memory Palace */
.memory-palace-modal { color: var(--text); }
.mp-flavor { font-style: italic; color: var(--text2); font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.mp-shards { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.mp-shard-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; transition: border-color 0.15s; }
.mp-shard-card:hover { border-color: var(--gold2); }
.mp-shard-icon { font-size: 20px; margin-bottom: 4px; }
.mp-shard-label { font-size: 14px; color: var(--gold); font-weight: bold; margin-bottom: 4px; }
.mp-shard-flavor { font-size: 11px; color: var(--text3); line-height: 1.4; margin-bottom: 8px; font-style: italic; }
/* Corsair Captain offer */
.corsair-captain-offer { background: linear-gradient(135deg, #0a1a2a, #1a0a10); border: 1px solid #a04040; border-radius: var(--radius); padding: 16px; margin-bottom: 4px; }
.corsair-header { color: #e08080; font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.corsair-flavor { font-style: italic; color: var(--text2); font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.corsair-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.corsair-traits { font-size: 12px; color: var(--gold); margin-bottom: 10px; }

/* Celestial quality */
.q-celestial { color: var(--q-celestial) !important; text-shadow: 0 0 8px rgba(224,248,255,0.6); }
/* Divine Oracle */
.oracle-modal { color: var(--text); }
.oracle-intro { font-style: italic; color: #b0c8ff; font-size: 13px; line-height: 1.5; margin-bottom: 10px; background: rgba(100,120,200,0.12); padding: 10px; border-radius: var(--radius); border: 1px solid rgba(100,120,200,0.3); }
.oracle-questions { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.oracle-q-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; transition: border-color 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oracle-q-card:hover { border-color: #b0c8ff; }
.oracle-q-text { font-style: italic; font-size: 13px; color: var(--text); flex: 1; }
.oracle-answer { font-style: italic; color: #c0d8ff; font-size: 13px; line-height: 1.6; background: rgba(100,120,200,0.12); padding: 12px; border-radius: var(--radius); border-left: 3px solid #6080c0; }
/* Celestial Forge */
.celestial-forge-modal { color: var(--text); }
.cf-flavor { font-style: italic; color: var(--text2); font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.cf-materials { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cf-mat { font-size: 12px; padding: 4px 8px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--border); }
.cf-have { border-color: var(--green); color: var(--green); }
.cf-need { border-color: #a04040; color: #c06060; }
.cf-item-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cf-item-row { display: flex; align-items: center; gap: 8px; background: var(--bg2); padding: 8px 10px; border-radius: var(--radius); }
.cf-item-name { flex: 1; font-size: 13px; font-weight: bold; }
.cf-item-slot { font-size: 11px; color: var(--text3); }
/* World Codex (replaces the old 6-entry-only Lore Codex panel) */
.quests-screen-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.world-codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.codex-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.codex-card-icon { font-size: 22px; text-align: center; margin-bottom: 4px; }
.codex-card-title { color: var(--gold2); font-size: 14px; margin-bottom: 6px; text-align: center; }
.codex-card-text { font-style: italic; font-size: 12px; color: var(--text2); line-height: 1.5; }
.codex-card-foundat { font-size: 10px; color: var(--text3); margin-top: 6px; }
.codex-locked-summary { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.codex-locked-chip { display: inline-block; font-size: 11px; color: var(--text3); background: var(--bg2); border-radius: var(--radius); padding: 3px 8px; margin: 2px; }
.lore-earned-modal { text-align: center; }
.lore-earned-icon { font-size: 32px; margin-bottom: 6px; }
.lore-earned-title { color: var(--gold); margin-bottom: 6px; }
.lore-earned-foundat { font-size: 11px; color: var(--text3); margin-bottom: 8px; }
.lore-earned-text { font-style: italic; color: var(--text2); line-height: 1.6; margin-bottom: 12px; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.shop-item-card {
  background:
    linear-gradient(rgba(24,24,36,0.75), rgba(24,24,36,0.75)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.shop-item-card:hover {
  border-color: var(--gold2);
  background:
    linear-gradient(rgba(32,32,48,0.68), rgba(32,32,48,0.68)),
    url('../assets/texture/leather.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.item-name { font-size: 13px; font-weight: bold; margin-bottom: 2px; }
.item-type { font-size: 11px; color: var(--text3); margin-bottom: 3px; }
.item-stat { font-size: 11px; color: var(--text2); }
.item-quality { font-size: 11px; font-style: italic; }
.item-price { font-size: 12px; color: var(--gold); margin: 4px 0; }

/* Market */
.market-grid { display: flex; flex-direction: column; gap: 8px; }
.market-item { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.market-icon { font-size: 22px; }
.market-name { font-size: 13px; font-weight: bold; }
.market-desc { font-size: 12px; color: var(--text2); }
.market-price { color: var(--gold); margin-left: auto; min-width: 60px; text-align: right; }

/* Location options modal */
.location-options h3 { color: var(--gold); margin-bottom: 8px; }
.location-options p { font-size: 13px; color: var(--text2); margin-bottom: 8px; }
.quest-note { background: rgba(200,162,48,0.1); border: 1px solid var(--gold2); border-radius: var(--radius); padding: 8px; margin-bottom: 10px; font-size: 13px; color: var(--gold); }
.loc-actions { display: flex; flex-direction: column; gap: 8px; }

/* Barracks */
.barracks-followers { display: flex; flex-direction: column; gap: 10px; }

/* Empty states */
.empty-text { color: var(--text3); font-style: italic; text-align: center; padding: 20px; }

/* ── SCROLLBARS ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.quest-card, .location-card, .follower-card, .shop-item-card, .inv-item, .class-card {
  animation: fadeIn 0.2s ease-out;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(200,162,48,0.3); }
  50%       { box-shadow: 0 0 18px rgba(200,162,48,0.6); }
}
.quest-card-active { animation: glow 2s ease-in-out infinite; }

/* ── ITEM COMPARISON ─────────────────────────────────────── */
.item-detail-compare .item-comparison-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.item-comparison-col { padding: 0 4px; }
.item-comparison-col + .item-comparison-col { border-left: 1px solid var(--border2); padding-left: 12px; }
.comp-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.diff-up   { color: var(--green);  font-size: 11px; margin-left: 4px; }
.diff-down { color: var(--red);    font-size: 11px; margin-left: 4px; }
.diff-neutral { color: var(--text3); font-size: 11px; margin-left: 4px; }

/* ── JOBS SCREEN ─────────────────────────────────────────── */
.jobs-screen { padding: 16px; max-width: 900px; }
.jobs-intro { color: var(--text2); margin-bottom: 16px; }
.jobs-limit-msg { background: var(--bg2); border: 1px solid var(--gold2); color: var(--gold); padding: 10px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.job-card { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.2s; }
.job-card:not(.job-locked):not(.job-unavailable):hover { border-color: var(--gold2); }
.job-card.job-locked { opacity: 0.5; }
.job-card.job-unavailable { opacity: 0.6; }
.job-header { display: flex; align-items: center; gap: 10px; }
.job-icon { font-size: 28px; }
.job-name { font-size: 15px; font-weight: bold; color: var(--gold); }
.job-lock { font-size: 11px; color: var(--red); }
.job-desc { color: var(--text2); font-size: 13px; flex: 1; }
.job-rewards { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text3); }
.job-rewards span { background: var(--bg3); padding: 2px 6px; border-radius: 3px; }

/* ── MINIGAMES ───────────────────────────────────────────── */
.minigame-screen { padding: 20px; max-width: 700px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.minigame-desc { color: var(--text2); text-align: center; max-width: 500px; }
.minigame-msg { color: var(--gold); text-align: center; min-height: 22px; font-style: italic; }
.minigame-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.sweet-zone-label { color: var(--green); font-weight: bold; }

/* Smithing */
.smithing-area { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.forge-visual { font-size: 48px; animation: glow 1.5s ease-in-out infinite; }
.heat-section { width: 100%; }
.heat-label { text-align: center; color: var(--text2); margin-bottom: 6px; }
.heat-label span { color: var(--gold); font-weight: bold; }
.heat-track { position: relative; height: 30px; border-radius: 4px; overflow: hidden; display: flex; }
.heat-cold-zone  { flex: 0 0 35%; background: linear-gradient(90deg,#1040a0,#2060d0); }
.heat-sweet-zone { flex: 0 0 40%; background: linear-gradient(90deg,#208040,#40c060,#c8c830); }
.heat-hot-zone   { flex: 0 0 25%; background: linear-gradient(90deg,#c06030,#c04040); }
.heat-needle { position: absolute; top: 0; width: 3px; height: 100%; background: white; box-shadow: 0 0 6px white; border-radius: 2px; transition: left 0.3s; }
.heat-zone-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-top: 3px; }
.smith-progress { display: flex; gap: 12px; }
.smith-hammer { font-size: 28px; opacity: 0.3; transition: all 0.3s; }
.smith-hammer.hammered { opacity: 1; animation: fadeIn 0.3s; }
.smith-timer { color: var(--text3); font-size: 13px; }

/* Alchemy */
.alchemy-area { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.brew-target { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 20px; text-align: center; }
.brew-target-label { font-size: 11px; color: var(--text3); text-transform: uppercase; }
.brew-target-name { font-size: 18px; color: var(--gold); }
.brew-target-hint { font-size: 12px; color: var(--text3); }
.ingredient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.ingredient-btn { background: var(--bg2); border: 2px solid var(--border2); border-radius: var(--radius); padding: 10px 6px; text-align: center; cursor: pointer; transition: all 0.2s; }
.ingredient-btn:hover { border-color: var(--gold2); }
.ingredient-btn.selected { border-color: var(--green); background: rgba(64,192,96,0.15); }
.ing-icon { display: block; font-size: 22px; }
.ing-name { font-size: 11px; color: var(--text2); }

/* Trading */
.trading-area { width: 100%; max-width: 600px; }
.trading-table { border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; }
.trade-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr; padding: 8px 12px; background: var(--bg3); font-size: 12px; color: var(--text3); gap: 8px; }
.trade-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13px; align-items: center; gap: 8px; }
.trade-row:hover { background: var(--bg3); }
.price-buy  { color: var(--red); }
.price-sell.profit { color: var(--green); }
.price-sell.loss   { color: var(--red); }
.qty-controls { display: flex; align-items: center; gap: 6px; }
.qty-btn { background: var(--bg3); border: 1px solid var(--border2); border-radius: 3px; width: 22px; height: 22px; color: var(--text); cursor: pointer; line-height: 20px; text-align: center; }
.qty-btn:hover { background: var(--border2); }
.trade-summary { display: flex; justify-content: space-around; margin-top: 10px; padding: 10px; background: var(--bg3); border-radius: var(--radius); font-size: 13px; color: var(--text2); }
.profit { color: var(--green); }
.loss   { color: var(--red); }

/* Herbalism */
.herb-area { position: relative; width: 100%; max-width: 500px; height: 220px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle, #102010, #060c06); }
.herb-spawn { position: absolute; font-size: 28px; cursor: pointer; user-select: none; transition: opacity 0.3s; }
.herb-spawn:hover { transform: scale(1.2); }
.herb-spawn.herb-gone { opacity: 0; pointer-events: none; }

/* Guard Duty */
.guard-area { width: 100%; max-width: 600px; height: 160px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; position: relative; display: flex; align-items: center; }
.guard-hero { font-size: 48px; padding-left: 12px; flex-shrink: 0; z-index: 2; }
.attack-lane { flex: 1; position: relative; height: 100%; }
.attack-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 28px; cursor: pointer; transition: left 0.9s linear; z-index: 3; }
.attack-icon:hover { transform: translateY(-50%) scale(1.2); }
.guard-score { font-size: 14px; color: var(--text2); margin-top: 4px; }

/* ── JOBS SCREEN v2 ──────────────────────────────────────── */
.jobs-header-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.streak-badge { display: inline-block; margin-top: 4px; background: linear-gradient(135deg, #c06020, #e07030); border: 1px solid #e07030; border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: bold; color: #fff8f0; animation: pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{ box-shadow: 0 0 4px #e07030; } 50%{ box-shadow: 0 0 12px #e07030; } }
.stamina-compact { text-align: right; min-width: 130px; }
.stam-label-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 4px; }
.stamina-big-bar { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; width: 130px; margin-left: auto; }
.stamina-big-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }

/* job-card2 */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.job-card2 {
  background:
    linear-gradient(rgba(17,13,26,0.84), rgba(17,13,26,0.84)),
    url('../assets/texture/parchment.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid rgba(200,162,48,0.18); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.2s, box-shadow 0.2s;
}
.job-card2:not(.job-locked):not(.job-unavailable):not(.job-location-locked):hover { border-color: var(--gold2); box-shadow: 0 2px 12px rgba(200,162,48,0.12); }
.job-card2.job-locked { opacity: 0.48; }
.job-card2.job-unavailable { opacity: 0.55; }
.job-card2.job-location-locked { opacity: 0.62; border-color: rgba(120,100,60,.3); }
.jc2-location-hint { font-size: 11px; color: #b8942a; margin-top: 4px; font-style: italic; }
.jc2-region-badge { font-size: 10px; margin-left: 5px; opacity: 0.75; cursor: help; }
.jc2-top { display: flex; align-items: flex-start; gap: 10px; }
.jc2-icon { font-size: 26px; flex-shrink: 0; }
.jc2-info { flex: 1; min-width: 0; }
.jc2-name { font-size: 14px; font-weight: bold; color: var(--gold); line-height: 1.2; }
.jc2-lock { font-size: 11px; color: var(--red); margin-top: 3px; }
.jc2-skill-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.jc2-skill-bar { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.jc2-skill-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.jc2-tier { font-size: 11px; font-weight: bold; white-space: nowrap; }
.jc2-tier-val { font-size: 10px; color: var(--text3); white-space: nowrap; }
.jc2-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.jc2-grade { font-size: 12px; font-weight: bold; }
.jc2-stamcost { font-size: 12px; color: var(--text2); }
.jc2-stamcost.st-cost-high { color: var(--red); }
.jc2-desc { font-size: 12px; color: var(--text3); line-height: 1.4; }
.jc2-rewards-row { display: flex; flex-wrap: wrap; gap: 5px; }
.jc2-reward-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; font-size: 11px; color: var(--text2); }
.jc2-reward-chip.jc2-bonus { background: rgba(200,162,48,0.15); border-color: var(--gold2); color: var(--gold); }
.jc2-last-run { font-size: 11px; color: var(--text3); border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
.jc2-no-st { font-size: 11px; color: var(--red); padding: 4px 0; }
.jc2-work-btn { width: 100%; margin-top: 4px; touch-action: manipulation; }

/* job result screen */
.job-result-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px; max-width: 480px; margin: 0 auto; }
.job-result-header { display: flex; align-items: center; gap: 12px; }
.job-result-icon { font-size: 40px; }
.job-result-name { font-size: 18px; color: var(--text); font-weight: bold; }
.job-result-grade { font-size: 72px; font-weight: 900; line-height: 1; text-shadow: 0 0 24px currentColor; animation: gradePop 0.5s cubic-bezier(.17,.67,.55,1.4); }
@keyframes gradePop { from{ transform:scale(0.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.job-result-grade-msg { font-size: 20px; font-weight: bold; letter-spacing: 1px; }
.job-result-newbest { background: linear-gradient(135deg, #c8a230, #ffd700); border-radius: 20px; padding: 4px 16px; font-size: 13px; font-weight: bold; color: #1a1008; animation: fadeIn 0.4s 0.3s both; }
.job-result-stats { width: 100%; background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.jrs-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text2); }
.jrs-val { font-weight: bold; font-size: 15px; }
.job-result-detail { width: 100%; background: var(--bg3); border-radius: 6px; padding: 10px 14px; }
.jrd-line { font-size: 12px; color: var(--text3); padding: 2px 0; }
.job-result-tool-broke { width: 100%; background: rgba(192,64,64,0.15); border: 1px solid #c04040; border-radius: 6px; padding: 8px 14px; font-size: 13px; color: #e08080; text-align: center; }
.jrd-continue { width: 100%; padding: 12px; font-size: 16px; }

/* Caravan Guard minigame */
.caravan-area { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.caravan-shield-bar-wrap { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); }
.caravan-shield-bar { flex: 1; height: 12px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.caravan-shield-fill { height: 100%; border-radius: 6px; transition: width 0.3s, background 0.3s; }
.caravan-lanes { display: flex; flex-direction: column; gap: 8px; }
.caravan-lane { position: relative; height: 56px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; overflow: hidden; }
.caravan-enemy { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: left 0.7s linear; z-index: 2; user-select: none; }
.caravan-enemy:active { transform: translateY(-50%) scale(0.85); }
.caravan-enemy.ce-boss { filter: drop-shadow(0 0 6px #ff4444); }
.ce-icon { font-size: 26px; line-height: 1; }
.ce-hp-bar { width: 28px; height: 4px; background: rgba(0,0,0,0.5); border-radius: 2px; overflow: hidden; }
.ce-hp-fill { height: 100%; background: #40c060; border-radius: 2px; }
.caravan-cart { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; z-index: 1; }
.caravan-score { font-size: 13px; color: var(--text2); text-align: center; }

/* Enchanting Workshop minigame */
.enchant-job-area { width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.enchant-zone-row { display: flex; justify-content: space-between; width: 100%; font-size: 10px; font-weight: bold; padding: 0 2px; }
.ez-miss   { color: var(--text3); }
.ez-bronze { color: #c07030; }
.ez-silver { color: #a0b8cc; }
.ez-gold   { color: var(--gold); font-size: 11px; }
.enchant-track { position: relative; width: 100%; height: 34px; border-radius: 4px; overflow: hidden; display: flex; }
.ej-miss-l, .ej-miss-r     { flex: 0 0 18%; }
.ej-bronze-l, .ej-bronze-r { flex: 0 0 12%; }
.ej-silver-l, .ej-silver-r { flex: 0 0 13%; }
.ej-gold-zone               { flex: 0 0 14%; }
.ej-miss-l   { background: linear-gradient(90deg,#111,#2a1010); }
.ej-bronze-l { background: linear-gradient(90deg,#2a1010,#5a3018); }
.ej-silver-l { background: linear-gradient(90deg,#1a3040,#2a5060); }
.ej-gold-zone{ background: linear-gradient(90deg,#806010,#c8a230,#806010); box-shadow: inset 0 0 10px rgba(255,215,0,0.4); }
.ej-silver-r { background: linear-gradient(90deg,#2a5060,#1a3040); }
.ej-bronze-r { background: linear-gradient(90deg,#5a3018,#2a1010); }
.ej-miss-r   { background: linear-gradient(90deg,#2a1010,#111); }
.enchant-needle { position: absolute; top: 0; width: 3px; height: 100%; background: white; box-shadow: 0 0 8px white; border-radius: 2px; z-index: 3; }
.enchant-power-section { width: 100%; }
.enchant-power-label { font-size: 12px; color: var(--text2); margin-bottom: 4px; text-align: center; }
.enchant-power-bar { width: 100%; height: 10px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.enchant-power-fill { height: 100%; background: linear-gradient(90deg,#4060c0,#a060ff); border-radius: 5px; transition: width 0.3s; }
.enchant-hit-results { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 32px; }
.er-chip { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.er-gold   { background: rgba(200,162,48,0.2); color: var(--gold);   border: 1px solid var(--gold2); }
.er-silver { background: rgba(120,160,190,0.2); color: #a0c0d8;     border: 1px solid #507080; }
.er-bronze { background: rgba(160,100,40,0.2);  color: #c08040;     border: 1px solid #806030; }
.er-miss   { background: rgba(180,40,40,0.15);  color: var(--red);  border: 1px solid var(--red); }
.enchant-attempts { font-size: 13px; color: var(--text2); }

/* ── HOLDINGS SCREEN ─────────────────────────────────────── */
.holdings-screen { padding: 16px; max-width: 900px; }
.no-property { text-align: center; padding: 40px; }
.no-property p { color: var(--text2); margin-bottom: 12px; }
.property-flavor { font-style: italic; color: var(--text3) !important; }
.property-income-banner { background: linear-gradient(135deg, var(--bg2), var(--bg3)); border: 1px solid var(--gold2); border-radius: var(--radius); padding: 10px 18px; margin-bottom: 16px; font-size: 15px; color: var(--gold); }
.property-card {
  background:
    linear-gradient(rgba(24,24,36,0.75), rgba(24,24,36,0.75)),
    url('../assets/texture/charcoal_grain.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 2px solid rgba(200,162,48,0.2); border-radius: 8px; padding: 18px; margin-bottom: 16px;
}
.property-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.property-icon { font-size: 36px; }
.property-name { font-size: 17px; color: var(--gold); }
.property-tier { font-size: 12px; color: var(--text3); margin-top: 2px; }
.property-daily { margin-left: auto; font-size: 14px; color: var(--green); background: var(--bg3); padding: 4px 10px; border-radius: var(--radius); }
.property-buildings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.property-buildings.empty { color: var(--text3); font-style: italic; }
.bld-chip { background: var(--bg3); border: 1px solid var(--border2); border-radius: 4px; padding: 3px 8px; font-size: 12px; }
.property-garrison { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.garrison-chip { background: rgba(64,128,192,0.15); border: 1px solid var(--blue); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: #80b0e0; }
.property-build-options { border-top: 1px solid var(--border); padding-top: 12px; }
.property-build-options strong { display: block; color: var(--text2); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.build-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.build-option { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.build-option > span:first-child { flex: 1; color: var(--text); }
.build-cost { color: var(--gold2); }
.build-income { color: var(--green); font-size: 11px; }

/* Property tier guide */
.property-tier-guide { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.property-tier-guide h3 { color: var(--text2); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.tier-list { display: flex; flex-direction: column; gap: 6px; }
.tier-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.tier-item.tier-current { border-color: var(--gold2); background: rgba(200,162,48,0.08); }
.tier-item.tier-next { border-color: var(--blue); }
.tier-icon { font-size: 22px; }
.tier-name { font-size: 14px; color: var(--text); }
.tier-req  { font-size: 11px; color: var(--text3); }
.tier-income { font-size: 11px; color: var(--green); }
.tier-owned { margin-left: auto; color: var(--green); font-size: 12px; }

/* ── PROPERTY DEEP SYSTEM ────────────────────────────────── */
.property-header-info { flex: 1; }
.property-tier-label { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* Resources bar */
.property-resources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.res-chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: var(--text2); }
.res-chip.res-full { border-color: var(--green); color: var(--green); }
.res-hint { font-size:11px; color:var(--text3); font-style:italic; margin-bottom:10px; line-height:1.4; }
.spec-badge { background: rgba(128,64,192,0.2); border: 1px solid var(--purple); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: #b080e0; margin-left: auto; }

/* ── Properties 2.0 — Resource Bars ─────────────────────── */
.property-resources-v2 { margin-bottom: 14px; }
.res-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.res-bar-icon { font-size: 14px; width: 20px; text-align: center; }
.res-bar-name { font-size: 11px; color: var(--text2); min-width: 34px; }
.res-bar-track { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.res-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.res-bar-label { font-size: 11px; color: var(--text3); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.spec-badge-v2 { display: inline-block; background: rgba(128,64,192,0.2); border: 1px solid var(--purple); border-radius: 4px; padding: 3px 10px; font-size: 12px; color: #b080e0; margin-top: 6px; }
.prop-prod-summary { display: inline-block; margin-left: 12px; font-size: 12px; color: var(--text3); font-weight: normal; }

/* ── Properties 2.0 — Garrison Cards ────────────────────── */
.property-garrison-v2 { margin-bottom: 12px; }
.garrison-cards-row { display: flex; flex-wrap: wrap; gap: 8px; }
.garrison-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.garrison-card-icon { font-size: 18px; }
.garrison-card-info { flex: 1; }
.garrison-card-name { font-size: 12px; color: var(--text); font-weight: 600; }
.garrison-card-level { font-size: 10px; color: var(--text3); }

/* ── Properties 2.0 — Crafting Cards ────────────────────── */
.prop-craft-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }

/* Property event alert */
.property-event-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(192,96,48,0.15); border: 1px solid var(--orange); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }

/* Section titles */
.prop-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 8px; margin-top: 4px; }

/* Building cards */
.property-buildings-section { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 12px; }
.property-buildings-empty { color: var(--text3); font-style: italic; font-size: 12px; margin-bottom: 10px; }
.bld-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 8px; }
.bld-card { background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bld-card-top { display: flex; align-items: flex-start; gap: 8px; }
.bld-icon { font-size: 22px; flex-shrink: 0; }
.bld-info { flex: 1; }
.bld-name { font-size: 13px; color: var(--text); font-weight: bold; }
.bld-desc-small { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.3; }
.bld-desc-flavor { font-size: 10.5px; color: var(--text3); opacity: 0.7; font-style: italic; margin-top: 2px; line-height: 1.3; }
.bld-level-badge { font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.bld-lv1 { background: rgba(90,84,112,0.4); color: var(--text2); border: 1px solid var(--border2); }
.bld-lv2 { background: rgba(64,128,192,0.25); color: #80b0e0; border: 1px solid var(--blue); }
.bld-max { background: rgba(200,162,48,0.25); color: var(--gold); border: 1px solid var(--gold2); }
.bld-card-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.bld-income-stat { font-size: 11px; color: var(--green); }
.bld-produces { font-size: 11px; color: #80d0a0; }
.bld-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bld-maxed { font-size: 11px; color: var(--green); align-self: center; }
.bld-assign-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.bld-assign-select { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12px; padding: 4px 6px; flex: 1; min-width: 140px; }
.bld-assign-bonus { font-size: 11px; color: var(--green); white-space: nowrap; }

/* Specialization selector */
.property-spec-section { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 12px; }
.spec-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.spec-option { background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.spec-option-header { font-size: 13px; color: var(--text); }
.spec-option-desc { font-size: 11px; color: var(--text3); line-height: 1.35; flex: 1; }

/* Build options updated */
.build-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px; }
.build-option { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.build-icon { font-size: 20px; flex-shrink: 0; }
.build-info { flex: 1; }
.build-name { font-size: 12px; color: var(--text); font-weight: bold; }
.build-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.build-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.property-build-full { font-size: 12px; color: var(--text3); font-style: italic; padding: 8px 0; }

/* Follower garrison status */
.mission-detail-text { font-size: 12px; color: var(--text2); padding: 4px 0; }

/* ── ENCHANTING ──────────────────────────────────────────── */
.enchant-area { padding: 8px 0; }
.enchant-intro { color: var(--text3); font-size: 12px; margin-bottom: 10px; }
.enchant-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-bottom: 14px; }
.enchant-item-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; cursor: pointer; transition: border-color 0.2s; }
.enchant-item-card:hover { border-color: var(--accent); }
.enchant-item-name { font-size: 12px; font-weight: bold; }
.enchant-item-sub { font-size: 11px; color: var(--text3); }
.enchant-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.enchant-opt-card { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.enchant-opt-card.enchant-opt-dim { opacity: 0.55; }
.enchant-opt-header { display: flex; align-items: center; gap: 6px; }
.enchant-opt-name { font-weight: bold; font-size: 13px; color: var(--text); }
.enchant-opt-desc { font-size: 11px; color: var(--text3); flex: 1; }
.enchant-opt-cost { font-size: 12px; color: var(--gold); }
.enchant-modal { display: flex; flex-direction: column; gap: 12px; }
.enchant-target-item { background: var(--bg3); border: 2px solid var(--border2); border-radius: var(--radius); padding: 10px 14px; }

/* ── ARENA ───────────────────────────────────────────────── */
.arena-screen { padding: 4px 0; }
.arena-glory-display { font-size: 15px; margin-bottom: 8px; padding: 8px 12px; background: linear-gradient(135deg, var(--bg2), var(--bg3)); border: 1px solid #ffa040; border-radius: var(--radius); }
.arena-intro { color: var(--text3); font-size: 12px; margin-bottom: 12px; }
.arena-tiers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.arena-tier-card { background: var(--bg2); border: 2px solid var(--border2); border-radius: 8px; padding: 12px 14px; }
.arena-tier-card.arena-locked { opacity: 0.5; }
.arena-tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.arena-tier-icon { font-size: 26px; }
.arena-tier-name { font-size: 15px; color: var(--text); font-weight: bold; }
.arena-tier-req { font-size: 11px; color: var(--text3); }
.arena-glory-mult { margin-left: auto; font-size: 12px; color: #ffa040; background: rgba(255,160,64,0.12); padding: 2px 8px; border-radius: 4px; }
.arena-tier-desc { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.arena-lock { font-size: 12px; color: var(--red); }
.arena-shop { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
.arena-shop h4 { color: var(--text2); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.arena-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.arena-shop-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.arena-shop-name { font-size: 13px; font-weight: bold; }
.arena-shop-desc { font-size: 11px; color: var(--text3); flex: 1; }
.arena-shop-cost { font-size: 12px; color: #ffa040; }
.arena-wave-result { text-align: center; padding: 10px; }
.arena-wave-result h3 { color: var(--green); font-size: 22px; margin-bottom: 8px; }
.arena-wave-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* ── ARENA RESULT MODALS ─────────────────────────────────── */
.arena-result-modal {
  text-align: center;
  padding: 16px 8px 8px;
  animation: arenaResultIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes arenaResultIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.arena-result-icon {
  font-size: 52px;
  margin-bottom: 10px;
  display: block;
  animation: arenaIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes arenaIconBounce {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.arena-result-icon--win  { filter: drop-shadow(0 0 14px #ffd040); animation-name: arenaIconBounce, arenaGoldPulse; animation-duration: 0.5s, 1.8s; animation-delay: 0.15s, 0.65s; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
.arena-result-icon--defeat { filter: drop-shadow(0 0 10px #c03030); }
.arena-result-icon--wave { filter: drop-shadow(0 0 10px #40c0ff); }
@keyframes arenaGoldPulse { 0%,100% { filter: drop-shadow(0 0 8px #ffd040); } 50% { filter: drop-shadow(0 0 22px #ffaa00); } }
.arena-result-title { font-size: 22px; margin-bottom: 6px; }
.arena-result-title--win    { color: #ffd040; text-shadow: 0 0 12px rgba(255,200,0,0.45); }
.arena-result-title--defeat { color: var(--red); text-shadow: 0 0 10px rgba(200,40,40,0.4); }
.arena-result-sub { color: var(--text2); font-size: 14px; margin-bottom: 14px; }
.arena-result-rewards {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin: 0 auto 16px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arena-result-reward-row { font-size: 14px; color: var(--text); }
.arena-result-btn { display: block; margin: 0 auto; min-width: 160px; }
.arena-result-modal--win  .arena-result-rewards { border-color: rgba(255,208,64,0.35); background: rgba(255,208,64,0.06); }
.arena-result-modal--defeat .arena-result-rewards { border-color: rgba(200,40,40,0.3); }

/* ── WORLD EVENT MODAL ───────────────────────────────────── */
.world-event-modal { text-align: center; padding: 10px 0; }
.world-event-icon { font-size: 52px; margin-bottom: 8px; }
.world-event-title { font-size: 20px; color: var(--gold); margin-bottom: 8px; }
.world-event-text { color: var(--text2); font-size: 14px; line-height: 1.5; margin-bottom: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
.world-event-choices { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.world-event-btn { width: 100%; max-width: 360px; text-align: left; background: var(--bg2); border: 1px solid var(--border2); padding: 10px 14px; border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: 13px; transition: border-color 0.2s, background 0.2s; }
.world-event-btn:hover { border-color: var(--accent); background: var(--bg3); }

/* ── CARAVAN POST (#61) ─────────────────────────────────────── */
.caravan-post .modal-flavor { margin-bottom: 12px; }
.cv-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cv-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.cv-label select { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.cv-summary { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; }
.cv-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--text2); }
.cv-cap-note { background: rgba(200,120,48,0.12); border: 1px solid rgba(200,120,48,0.35); color: #e0a060; border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.cv-active-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin: 14px 0 6px; }
.cv-empty { font-size: 12px; color: var(--text3); }
.cv-row { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 6px; }
.cv-row.ready { border-color: var(--gold2, #8a7320); box-shadow: 0 0 8px rgba(200,162,48,0.25); }
.cv-row-main { flex: 1; min-width: 0; }
.cv-row-dest { font-size: 13px; font-weight: 600; color: var(--text); }
.cv-row-meta { font-size: 11px; color: var(--text3); }
.cv-row-eta { font-size: 12px; color: var(--text3); white-space: nowrap; }

/* ── WORLD EVENT — scene presentation + stakes preview ──────── */
.wev-scene { text-align: center; padding: 6px 0 2px; }
.wev-portrait {
  font-size: 54px; width: 92px; height: 92px; line-height: 92px; margin: 0 auto 12px;
  border-radius: 50%; background: radial-gradient(circle at 38% 32%, #23233a 0%, #14141f 70%);
  border: 2px solid var(--gold2, #8a7320); box-shadow: 0 0 18px rgba(200,162,48,0.28), inset 0 2px 6px rgba(0,0,0,0.6);
}
.wev-body { max-width: 460px; margin: 0 auto 16px; }
.wev-text { color: var(--text2); font-size: 14px; line-height: 1.6; margin: 0 0 10px; text-align: left; }
.wev-choice-btn {
  width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: flex-start; gap: 7px; text-align: left;
}
.wev-choice-label { font-size: 14px; font-weight: 600; color: var(--text); }
.wev-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wev-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2); white-space: nowrap;
}
.wev-chip.gain    { background: rgba(96,176,96,0.14);  border-color: rgba(96,176,96,0.35);  color: #7fd67f; }
.wev-chip.cost    { background: rgba(200,80,80,0.14);   border-color: rgba(200,80,80,0.35);   color: #e08a8a; }
.wev-chip.light   { background: rgba(64,128,255,0.14);  border-color: rgba(64,128,255,0.35);  color: #7fa8ff; }
.wev-chip.dark    { background: rgba(160,80,200,0.14);  border-color: rgba(160,80,200,0.35);  color: #c08ad8; }
.wev-chip.faction { background: rgba(200,162,48,0.14);  border-color: rgba(200,162,48,0.35);  color: var(--gold); }
.tev-risk-very_high { background: rgba(200,64,64,0.24); color: #e07070; }

/* ── TITLES ──────────────────────────────────────────────── */
/* .titles-section background/border/padding now comes from the shared
   Character-panel rule near .char-layout; .ornate-header replaces the old
   scoped h4 rule. */
.active-title-row { font-size: 14px; margin-bottom: 10px; color: var(--text2); }
.title-badge-active { font-size: 15px; color: var(--gold); font-weight: bold; background: rgba(200,162,48,0.12); padding: 3px 10px; border-radius: 4px; border: 1px solid var(--gold2); }
.earned-titles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-bottom: 10px; }
.title-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; transition: border-color 0.2s; }
.title-card:hover { border-color: var(--gold2); }
.title-card.title-active { border-color: var(--gold); background: rgba(200,162,48,0.1); }
.title-name { font-size: 12px; color: var(--text); font-weight: bold; }
.title-active-mark { font-size: 10px; color: var(--gold); margin-top: 2px; }
.title-set-hint { font-size: 10px; color: var(--text3); margin-top: 2px; }
.next-titles { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.next-titles h5 { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.next-title-row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.title-name-small { color: var(--text2); }
.title-progress { color: var(--text3); }

/* ── PRESTIGE / PARAGON ──────────────────────────────────── */
/* .prestige-section is now its own tab panel (feedback #117 redesign) --
   background/border/padding comes from the shared Character-panel rule. */
.paragon-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.paragon-badge { display: inline-block; background: linear-gradient(135deg, #4040c0, #8040ff); color: #fff; padding: 4px 12px; border-radius: 14px; font-size: 13px; font-weight: bold; }
.paragon-bonus { font-size: 12px; color: var(--text3); margin-left: 8px; }
.glory-display { font-size: 13px; color: #ffa040; }
.ascend-box { background: linear-gradient(135deg, rgba(64,0,128,0.3), rgba(128,0,255,0.15)); border: 2px solid #8040ff; border-radius: 8px; padding: 14px; margin-top: 8px; text-align: center; }
.ascend-box p { color: var(--text2); font-size: 13px; margin-bottom: 6px; }
.ascend-note { font-size: 11px; color: var(--text3); font-style: italic; }
.ascend-progress { font-size: 12px; color: var(--text3); margin-top: 6px; }
/* Paragon milestones */
.paragon-milestones { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.paragon-milestone { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; background: var(--bg2); font-size: 12px; }
.pm-icon { font-size: 14px; min-width: 18px; }
.pm-label { flex: 1; color: var(--text2); }
.pm-status { font-size: 11px; }
.pm-done { opacity: 0.6; }
.pm-done .pm-label { color: var(--text3); text-decoration: line-through; }
.pm-next { border: 1px solid var(--gold2); background: rgba(200,162,48,0.08); }
.pm-next .pm-label { color: var(--gold); }
.pm-locked { opacity: 0.5; }
/* Ascension Ceremony modal */
.ascension-ceremony { color: var(--text); }
.ascend-ceremony-flavor { font-style: italic; color: #c0a0ff; font-size: 13px; line-height: 1.5; margin-bottom: 12px; background: rgba(100,0,200,0.12); padding: 10px; border-radius: var(--radius); border-left: 3px solid #8040ff; }
.ascend-keeps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ascend-col { background: var(--bg2); border-radius: var(--radius); padding: 10px; }
.ascend-col-header { font-size: 12px; font-weight: bold; color: var(--text2); margin-bottom: 6px; }
.ascend-item { font-size: 12px; color: var(--text3); padding: 2px 0; }
.ascend-milestone-preview { font-size: 12px; background: rgba(200,162,48,0.1); border: 1px solid var(--gold2); border-radius: var(--radius); padding: 6px 10px; margin-top: 8px; color: var(--gold); }
.glow-btn { box-shadow: 0 0 14px rgba(128, 0, 255, 0.6); animation: glowPulse 2s infinite; }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 10px rgba(128,0,255,0.5); } 50% { box-shadow: 0 0 22px rgba(128,0,255,0.9); } }

/* ── SKILL UPGRADES ──────────────────────────────────────── */
.skill-upgrade-section { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.skill-upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.skill-upg-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.skill-upg-name { font-size: 13px; color: var(--text); font-weight: bold; }
.skill-upg-tier { font-size: 14px; color: var(--gold2); letter-spacing: 2px; }
.skill-upg-label { font-size: 11px; color: var(--text3); }
.skill-upg-maxed { font-size: 11px; color: var(--green); font-weight: bold; }

/* ── STAMINA BAR ─────────────────────────────────────────── */
.st-bar  { background: var(--bg3); }
.st-fill { background: linear-gradient(to right, #b06010, #f0a030); }

/* ── JOBS SCREEN — STAMINA SYSTEM ────────────────────────── */
.stamina-banner { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.stamina-banner-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--gold); margin-bottom: 6px; }
.stamina-banner-val { font-weight: bold; }
.stamina-big-bar { height: 16px; background: var(--bg3); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.stamina-big-fill { height: 100%; border-radius: 8px; background: linear-gradient(to right, #b06010, #f0a030); transition: width 0.4s; }
.stamina-big-fill.st-mid { background: linear-gradient(to right, #805010, #c08020); }
.stamina-big-fill.st-low { background: linear-gradient(to right, #602010, #a04020); }
.stamina-hint { font-size: 11px; color: var(--text3); }
.jobs-limit-msg { background: rgba(192,64,64,0.15); border: 1px solid rgba(192,64,64,0.4); border-radius: var(--radius); padding: 10px 14px; color: #e08080; font-size: 13px; margin-bottom: 12px; }

.job-skills-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.job-skill-chip { display: flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px; padding: 3px 10px; font-size: 11px; }
.jsc-tier { color: var(--gold); font-weight: bold; }
.jsc-val { color: var(--text3); }
.job-skill-none { font-size: 12px; color: var(--text3); font-style: italic; }

.job-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.job-card.job-locked { opacity: 0.5; }
.job-card.job-unavailable { opacity: 0.65; }
.job-header { display: flex; align-items: flex-start; gap: 10px; }
.job-icon { font-size: 24px; }
.job-name { font-size: 14px; font-weight: bold; color: var(--text); }
.job-lock { font-size: 11px; color: var(--text3); }
.job-skill-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.job-skill-mini-bar { width: 60px; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.job-skill-mini-fill { height: 100%; background: linear-gradient(to right, #b06010, #f0a030); }
.job-skill-label { font-size: 10px; color: var(--text3); }
.job-stamina-cost { font-size: 12px; color: #f0a030; margin-left: auto; white-space: nowrap; }
.job-stamina-cost.st-cost-high { color: var(--red); }
.job-desc { font-size: 12px; color: var(--text2); line-height: 1.4; }
.job-rewards { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text3); }
.job-low-st { font-size: 11px; color: var(--red); text-align: center; }

/* ── SMITH CRAFT CHOICE ──────────────────────────────────── */
.smith-craft-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; max-width: 420px; }
.smith-choice-btn {
  background:
    linear-gradient(rgba(24,24,36,0.75), rgba(24,24,36,0.75)),
    url('../assets/texture/leather.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 2px solid var(--border2); border-radius: 10px; padding: 18px; text-align: center; cursor: pointer; transition: all 0.18s; touch-action: manipulation; font-family: inherit; width: 100%;
}
.smith-choice-btn:hover {
  border-color: var(--gold2);
  background:
    linear-gradient(rgba(32,32,48,0.68), rgba(32,32,48,0.68)),
    url('../assets/texture/leather.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.smith-choice-icon { font-size: 32px; margin-bottom: 6px; }
.smith-choice-label { font-size: 15px; font-weight: bold; color: var(--text); }
.smith-choice-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }

/* ── MINING MINIGAME ─────────────────────────────────────── */
.mining-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; max-width: 400px; }
.mine-node { height: 70px; background: var(--bg2); border: 2px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; transition: all 0.15s; user-select: none; }
.mine-node:hover { border-color: var(--border2); }
.mine-active { cursor: pointer; animation: mineGlow 0.8s infinite alternate; }
@keyframes mineGlow { from { transform: scale(1); } to { transform: scale(1.06); } }
.mine-spent { opacity: 0.55; cursor: default; background: var(--bg3); }
.mine-stats { display: flex; gap: 20px; font-size: 13px; color: var(--text2); margin-bottom: 8px; }

/* ── FISHING MINIGAME ────────────────────────────────────── */
.fishing-area { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 480px; }
.fish-visual { font-size: 48px; }
.fish-track-wrap { width: 100%; }
.fish-track-label { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.tension-bar { position: relative; height: 36px; background: linear-gradient(to right, #40c060 0%, #c8c830 50%, #c04040 100%); border-radius: 8px; overflow: hidden; }
.tension-indicator { position: absolute; top: 50%; transform: translate(-50%,-50%); font-size: 24px; transition: left 0.3s; }
.tension-indicator.catching { filter: drop-shadow(0 0 6px #40c060); }
.tension-indicator.normal { filter: none; }
.tension-indicator.danger { filter: drop-shadow(0 0 8px #c04040); animation: dangerPulse 0.5s infinite; }
@keyframes dangerPulse { 0%,100% { filter: drop-shadow(0 0 6px #c04040); } 50% { filter: drop-shadow(0 0 14px #ff4040); } }
.fish-track-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-top: 3px; }
.fish-progress-bar-wrap { width: 100%; }
.fish-progress-label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.fish-progress-bar { height: 14px; background: var(--bg3); border-radius: 7px; overflow: hidden; }
.fish-progress-fill { height: 100%; border-radius: 7px; background: #40c060; transition: width 0.3s, background 0.3s; }
.fish-progress-fill.normal { background: #c8c830; }
.fish-progress-fill.danger { background: #c04040; }
.fish-reel-btn { min-width: 160px; font-size: 18px; padding: 14px 24px !important; }

/* ── BARD MINIGAME ───────────────────────────────────────── */
.bard-stage { display: flex; justify-content: center; margin: 8px 0; }
.performer-icon { font-size: 52px; }
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 400px; margin: 0 auto; }
.audience-member { background: var(--bg2); border: 2px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; cursor: pointer; transition: all 0.15s; }
.audience-member:hover:not(.gone) { border-color: var(--gold2); }
.audience-member.gone { opacity: 0.35; cursor: default; background: var(--bg3); }
.aud-emoji { font-size: 24px; margin-bottom: 4px; }
.aud-boredom-bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.aud-boredom-fill { height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s; background: #40c060; }
.bard-score { font-size: 13px; color: var(--text2); text-align: center; margin: 8px 0; }

/* ── COURIER MINIGAME ────────────────────────────────────── */
.courier-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; max-width: 400px; }
.courier-stop { height: 64px; background: var(--bg2); border: 2px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; cursor: pointer; color: var(--text2); transition: all 0.15s; user-select: none; }
.courier-stop:hover:not(.stop-done) { border-color: var(--gold2); }
.stop-target { border-color: var(--gold) !important; color: var(--gold); background: rgba(200,162,48,0.12); animation: stopPulse 0.8s infinite; }
@keyframes stopPulse { 0%,100% { box-shadow: 0 0 6px rgba(200,162,48,0.4); } 50% { box-shadow: 0 0 14px rgba(200,162,48,0.8); } }
.stop-done { background: rgba(64,160,64,0.15); border-color: var(--green) !important; color: var(--green); cursor: default; }
.courier-score { font-size: 13px; color: var(--text2); margin-bottom: 8px; }

/* ── TOMB RAIDING MINIGAME ───────────────────────────────── */
.tomb-status { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; font-size: 13px; }
.tomb-hp-wrap { display: flex; align-items: center; gap: 8px; }
.tomb-hp-bar { width: 120px; height: 10px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.tomb-hp-fill { height: 100%; border-radius: 5px; transition: width 0.3s, background 0.3s; }
.tomb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 400px; margin: 0 auto 14px; }
.tomb-tile { height: 72px; background: var(--bg2); border: 2px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; transition: all 0.15s; user-select: none; }
.tomb-tile:hover:not(.tile-revealed) { border-color: var(--gold2); }
.tile-revealed { cursor: default; }
.tile-treasure { background: rgba(200,162,48,0.2) !important; border-color: var(--gold) !important; }
.tile-trap     { background: rgba(192,64,64,0.2) !important;   border-color: var(--red) !important; }
.tile-monster  { background: rgba(128,0,64,0.2) !important;    border-color: #802040 !important; }
.tile-bonus    { background: rgba(64,0,192,0.2) !important;    border-color: #8040ff !important; }
.tile-empty    { background: var(--bg3) !important; border-color: var(--border) !important; opacity: 0.6; }

/* ── WORLD MAP — REGION GRID ─────────────────────────────── */
.world-map-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.world-map-info { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text2); }
.world-map-info span { background: var(--bg2); padding: 3px 8px; border-radius: 10px; }

.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.region-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; cursor: pointer; position: relative; transition: transform 0.15s, border-color 0.15s; text-align: center; }
.region-card:hover:not(.region-locked) { transform: translateY(-2px); border-color: var(--gold2); }
.region-card.region-current { border-color: var(--gold) !important; background: rgba(200,162,48,0.08); }
.region-card.region-visited { opacity: 0.85; }
.region-card.region-locked { opacity: 0.45; cursor: default; }
.region-card.region-quest { box-shadow: 0 0 0 2px #c04040; }
.region-card-icon { font-size: 28px; margin-bottom: 4px; }
.region-card-name { font-size: 13px; font-weight: bold; color: var(--text); margin-bottom: 2px; }
.region-card-levels { font-size: 11px; color: var(--text3); }
.region-card-locs { font-size: 11px; color: var(--text3); margin-top: 2px; }
.region-here { position: absolute; top: 5px; left: 5px; font-size: 10px; background: var(--gold); color: #000; padding: 1px 5px; border-radius: 6px; font-weight: bold; }
.region-quest-badge { position: absolute; top: 5px; right: 5px; font-size: 10px; background: #c04040; color: #fff; padding: 1px 5px; border-radius: 6px; }
.region-adjacent-badge { font-size: 10px; color: #60c060; margin-top: 4px; }
.region-ship-needed { font-size: 10px; color: #6090c0; margin-top: 4px; }
.region-lock { position: absolute; bottom: 6px; right: 6px; font-size: 10px; color: var(--text3); }

/* ── REGION DETAIL VIEW ───────────────────────────────────── */
.region-header { display: flex; align-items: center; gap: 12px; background: var(--bg2); padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.back-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); cursor: pointer; font-size: 12px; white-space: nowrap; }
.back-btn:hover { border-color: var(--gold2); }
.region-header-icon { font-size: 32px; }
.region-header-info { flex: 1; }
.region-header-name { font-size: 16px; font-weight: bold; color: var(--text); }
.region-header-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.region-header-levels { font-size: 11px; color: var(--text3); margin-top: 2px; }
.region-here-badge { font-size: 12px; background: var(--gold); color: #000; padding: 4px 10px; border-radius: 8px; font-weight: bold; white-space: nowrap; }
.travel-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #60a060; background: rgba(80,160,80,0.15); color: #80d080; cursor: pointer; font-size: 12px; white-space: nowrap; }
.travel-btn:hover:not(.travel-disabled) { background: rgba(80,160,80,0.3); }
.travel-disabled { opacity: 0.5; cursor: default; border-color: var(--border); color: var(--text3); }
.travel-not-adjacent { font-size: 11px; color: var(--text3); white-space: nowrap; }

/* ── LOCATION CARDS (new format) ─────────────────────────── */
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.location-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; position: relative; transition: transform 0.15s, border-color 0.15s; }
.location-card:not(.locked):hover { transform: translateY(-2px); border-color: var(--gold2); }
.location-card.locked { opacity: 0.4; }
.location-card.loc-visited { border-left: 3px solid #406060; }
.loc-icon-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.loc-big-icon { font-size: 26px; }
.loc-type-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; color: #ddd; white-space: nowrap; }
.loc-name { font-size: 13px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.loc-desc { font-size: 11px; color: var(--text2); margin-bottom: 6px; line-height: 1.4; }
.loc-meta { display: flex; gap: 6px; margin-bottom: 8px; }
.loc-levels { font-size: 10px; color: var(--text3); }
.loc-action-btn { width: 100%; padding: 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); cursor: pointer; font-size: 12px; transition: background 0.15s; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.loc-action-btn:hover { background: rgba(200,162,48,0.15); border-color: var(--gold2); }
.loc-action-btn.stamina-blocked { opacity: 0.65; border-color: var(--red); }
.loc-action-btn.daily-maxed { opacity: 0.5; cursor: not-allowed; border-color: #555; }
.loc-st-cost { font-size: 10px; color: var(--text3); white-space: nowrap; }
.loc-daily-visits { font-size: 10px; color: var(--text3); margin-bottom: 4px; letter-spacing: 1px; }
.loc-daily-visits.maxed { color: #888; font-style: italic; }
.visit-dots { color: var(--gold2); letter-spacing: 2px; }
.st-cost-low { color: var(--red); font-weight: bold; }
.disabled-btn { opacity: 0.45; cursor: not-allowed; }
.btn-warn { background: var(--orange); color: var(--white); border-color: var(--orange); animation: pulse-warn 2s infinite; }
@keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:0.6} }
.lock-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); border-radius: 10px; font-size: 12px; color: var(--text2); }
.no-locs { color: var(--text3); font-size: 13px; padding: 20px; text-align: center; }

/* ── TRAVEL EVENT MODAL ───────────────────────────────────── */
.travel-event-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; max-width: 500px; margin: 20px auto; padding: 28px 24px; text-align: center; }
.tev-icon { font-size: 56px; margin-bottom: 8px; }
.tev-title { font-size: 20px; font-weight: bold; color: var(--text); margin-bottom: 10px; }
.tev-desc { font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 20px; }
.tev-choices { display: flex; flex-direction: column; gap: 10px; }
.tev-choice-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); cursor: pointer; font-size: 13px; transition: all 0.15s; }
.tev-choice-btn:hover { background: rgba(200,162,48,0.15); border-color: var(--gold2); }
.tev-risk-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.tev-risk-badge .wev-fail-preview { text-transform: none; letter-spacing: normal; opacity: 0.85; }
.tev-risk-low { background: rgba(96,176,96,0.18); color: #7fd67f; }
.tev-risk-medium { background: rgba(200,162,48,0.20); color: var(--gold); }
.tev-risk-high { background: rgba(200,100,48,0.22); color: #e0975a; }
.tev-risk-very_high { background: rgba(192,64,64,0.25); color: var(--red); }
.quest-resolution-modal h3 { color: var(--gold); margin-bottom: 4px; }

/* ============================================================
   MOBILE — Responsive layout for phones (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ── BASE ──────────────────────────────────────────────── */
  html, body {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overflow: hidden;
  }

  /* ── APP LAYOUT ────────────────────────────────────────── */
  /* Remove the 120px message log row — log stays but shorter.
     Status bar row is auto-height: it wraps to as many lines as it needs
     (varies with Tainted badge / Rest button visibility) instead of a fixed
     height that would force horizontal scrolling to see everything. */
  #app { grid-template-rows: 36px auto 1fr 64px; }

  /* ── TITLE BAR ─────────────────────────────────────────── */
  #title-bar { gap: 8px; }
  .title-bar-name { font-size: 12px; letter-spacing: 2px; }
  .title-bar-ornament { font-size: 10px; }

  /* No sidebar column — full width content */
  #game-body { grid-template-columns: 1fr; }

  /* Push content up so it doesn't hide behind bottom nav + info bar */
  #main-content { padding: 10px; padding-bottom: calc(84px + 20px + env(safe-area-inset-bottom, 0px)); }

  /* ── BOTTOM INFO BAR (version strip in gesture zone) ──── */
  #bottom-info-bar {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(20px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #0a0a12;
    color: #3a3a50;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 20px;
    z-index: 201;
    border-top: 1px solid #1a1a2a;
  }

  /* ── BOTTOM NAV BAR ────────────────────────────────────── */
  #nav-sidebar {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    flex-direction: row;
    align-items: stretch;
    height: 60px;
    padding: 0;
    border-right: none;
    border-top: 2px solid var(--gold2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 200;
    background: var(--bg1);
  }
  #nav-sidebar::-webkit-scrollbar { display: none; }

  .nav-tab {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 58px;
    height: 60px;
    padding: 4px 6px;
    border-left: none !important;
    border-right: none;
    border-top: 3px solid transparent;
    border-bottom: none;
    font-size: 9px;
    white-space: nowrap;
    text-align: center;
  }
  .nav-tab.active {
    border-top-color: var(--gold) !important;
    color: var(--gold);
  }
  .nav-icon { font-size: 22px; }

  /* ── STATUS BAR ────────────────────────────────────────── */
  /* Wraps onto as many lines as needed instead of scrolling — every stat
     stays visible at all times. Only the bottom nav bar scrolls. */
  #status-bar {
    padding: 6px 8px;
    gap: 6px 8px;
    font-size: 12px;
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 4px;
  }
  .status-group + .status-group { padding-left: 8px; }
  .hero-name { font-size: 13px; }
  .hero-level { font-size: 10px; padding: 1px 5px; }
  .stat-bar { width: 44px; }
  .bar-label { width: 14px; font-size: 10px; }
  .bar-val { display: none; }
  .gold-display { font-size: 13px; }
  .day-display, .season-display { font-size: 10px; }
  .st-bar { width: 44px; }

  /* ── MESSAGE LOG ───────────────────────────────────────── */
  #message-log { height: 64px; padding: 4px 10px; }
  .msg-entry { font-size: 11px; }

  /* ── SCREEN TITLE ──────────────────────────────────────── */
  .screen-title { font-size: 16px; margin-bottom: 10px; }

  /* ── MAIN MENU ─────────────────────────────────────────── */
  .mm-title { font-size: 30px; letter-spacing: 3px; }
  .mm-crest { font-size: 48px; }
  .mm-btn   { padding: 11px 14px; }
  .btn-large { min-height: 48px; padding: 10px 22px; font-size: 14px; }

  /* ── CHARACTER CREATION ────────────────────────────────── */
  .create-screen { max-width: 100%; }
  .class-grid, .class-grid-wide { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .race-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .create-summary { grid-template-columns: 1fr; }
  .create-summary-right { max-height: none; }
  .text-input { width: 100%; font-size: 16px; /* 16px prevents iOS auto-zoom */ }
  .create-actions { flex-wrap: wrap; }
  .create-step span { display: none !important; }
  .backstory-grid, .backstory-grid.bsgrid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* ── TOWN ──────────────────────────────────────────────── */
  .building-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .building-icon { font-size: 26px; margin-bottom: 6px; }
  .town-actions { gap: 8px; }
  .town-actions .btn { flex: 1; min-width: 120px; }

  /* ── WORLD MAP ─────────────────────────────────────────── */
  .region-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .region-card { padding: 10px 8px; }
  .region-card-icon { font-size: 24px; }
  .region-card-name { font-size: 11px; }
  .region-card-levels, .region-card-locs { font-size: 10px; }
  .location-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .region-header { flex-wrap: wrap; gap: 8px; }
  .region-header-name { font-size: 14px; }
  .loc-action-btn { min-height: 44px; font-size: 12px; }

  /* ── CHARACTER SCREEN ──────────────────────────────────── */
  .char-layout { grid-template-columns: 1fr; gap: 12px; }
  /* Portrait + base info on top, tabs below -- player feedback (#123) said
     the tabs-first order (previous fix) left the portrait/summary buried
     below the active tab's content instead. Natural DOM order already
     puts .char-left before .char-right, so no order override needed here. */
  .char-portrait-frame { max-width: 260px; margin: 0 auto; }
  .char-tab-bar { flex-wrap: wrap; }
  .char-tab { flex: 1 1 33%; font-size: 10px; padding: 8px 3px; }
  .equipment-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .skill-row-icon { width: 36px; height: 36px; font-size: 17px; }
  .skill-row-name { font-size: 12px; }
  .skill-row-desc { font-size: 11px; }

  /* ── INVENTORY ─────────────────────────────────────────── */
  .inventory-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .inv-filter-row { gap: 6px; }
  .filter-btn { padding: 6px 8px; min-height: 36px; }

  /* ── QUESTS ────────────────────────────────────────────── */
  .quest-columns { grid-template-columns: 1fr; }

  /* ── COMBAT ────────────────────────────────────────────── */
  .combat-arena { grid-template-columns: 1fr !important; gap: 8px; }
  .combat-log { max-height: 120px; }

  /* ── MODAL — centered, matching desktop (was a bottom sheet;
     player feedback: looked broken -- a large dimmed gap of game screen
     above the modal, and the lowest button/content could run close to or
     past the visible edge on a real device's safe-area/gesture bar) ──── */
  #modal-overlay {
    padding: 12px;
    align-items: center;
    justify-content: center;
  }
  .modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 85vh;
  }
  .modal-tabs { flex-wrap: wrap; gap: 6px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .temple-options { grid-template-columns: 1fr; }

  /* ── ALL BUTTONS — comfortable touch targets ───────────── */
  .btn { min-height: 44px; padding: 8px 14px; }
  .btn-small { min-height: 36px; }
  .tev-choice-btn { min-height: 44px; }
  .filter-btn { min-height: 36px; }
  .back-btn { min-height: 36px; }
  .travel-btn { min-height: 40px; }

  /* ── JOBS / STAMINA ────────────────────────────────────── */
  .stamina-banner { padding: 10px; }
  .stamina-big-bar { height: 16px; }
  .job-skill-strip { flex-wrap: wrap; gap: 6px; }
  /* Job cards go single column */
  .jobs-screen > .location-grid,
  .jobs-grid { grid-template-columns: 1fr !important; }

  /* ── MINIGAMES ─────────────────────────────────────────── */
  .mining-grid { gap: 6px; max-width: 100%; }
  .mine-node { height: 62px; font-size: 22px; }
  .tomb-grid { gap: 6px; max-width: 100%; }
  .tomb-tile { height: 62px; font-size: 20px; }
  .courier-map { gap: 6px; max-width: 100%; }
  .courier-stop { min-height: 54px; }
  .bard-stage { padding: 10px; }
  .audience-grid { gap: 6px; }
  .audience-member { min-height: 70px; }
  .smith-craft-choice { grid-template-columns: repeat(2, 1fr); }

  /* ── HOLDINGS ──────────────────────────────────────────── */
  .property-grid { grid-template-columns: 1fr !important; }
  .buildings-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── ARENA ─────────────────────────────────────────────── */
  .arena-tiers { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── FOLLOWERS ─────────────────────────────────────────── */
  .follower-list { grid-template-columns: 1fr !important; }
  .tavern-followers { grid-template-columns: 1fr !important; }

  /* ── TRAVEL EVENT MODAL ────────────────────────────────── */
  .travel-event-modal { margin: 10px; padding: 20px 16px; }
  .tev-icon { font-size: 44px; }
  .tev-title { font-size: 17px; }
  .tev-desc { font-size: 13px; }

  /* ── TOWN SYSTEM v2 ─────────────────────────────────────── */
  /* 3-wide even on mobile (was 2 -- 7 buildings meant 4 scrolled rows instead
     of 3) -- viable now that .district-desc clamps to 2 lines and the icon/
     padding are smaller, so a narrower card still reads fine. */
  .town-districts-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .district-card { padding: 8px 6px !important; }
  .district-icon { font-size: 20px !important; }
  .town-npcs-row { gap: 6px; }
  .npc-portrait-card { padding: 8px 4px; }
  .npc-portrait-role { font-size: 10px; }
  .skill-book-grid { grid-template-columns: 1fr !important; }
  .stat-choice-grid { grid-template-columns: 1fr !important; }
  .town-big-icon { font-size: 32px; }
  .town-name-heading { font-size: 18px; }
}

/* ── PLAYTEST GATE ───────────────────────────────────────── */
/* Casual-access deterrent for playtest links, not real security (see
   index.html's comment above the gate script for the full rationale) --
   sits above even the splash overlay so it's the very first thing shown. */
#playtest-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(ellipse at center, #12121e 0%, #08080e 72%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#playtest-gate.gate-hidden { display: none; }
.gate-inner { text-align: center; padding: 24px; width: 100%; max-width: 320px; }
.gate-ornament { font-size: 36px; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(200,162,48,0.55)); }
.gate-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(22px, 7vw, 30px);
  color: #c8a230;
  text-shadow: 0 0 28px rgba(200,162,48,0.4), 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.gate-sub { font-size: 12px; color: #5a5470; letter-spacing: 1px; margin-bottom: 28px; }
.gate-input {
  width: 100%;
  background: #181824;
  border: 1px solid rgba(200,162,48,0.35);
  border-radius: 4px;
  color: #e8e4d8;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.gate-input:focus { outline: none; border-color: #c8a230; }
.gate-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #c8a230;
  border-radius: 4px;
  color: #c8a230;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.gate-btn:hover { background: rgba(200,162,48,0.12); }
.gate-error { font-size: 12px; color: #c0524f; margin-top: 10px; min-height: 16px; }

/* ── SPLASH OVERLAY ──────────────────────────────────────── */
#splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, #12121e 0%, #08080e 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.65s ease;
}
#splash-overlay.fade-out { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; user-select: none; padding: 24px; }
.splash-ornament { font-size: 44px; margin-bottom: 14px; filter: drop-shadow(0 0 14px rgba(200,162,48,0.55)); }
.splash-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(26px, 8vw, 44px);
  color: #c8a230;
  text-shadow: 0 0 28px rgba(200,162,48,0.4), 0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.splash-sub { font-size: 13px; color: #5a5470; letter-spacing: 2px; margin-bottom: 54px; }
.splash-tap {
  font-size: 15px;
  color: #c8a230;
  letter-spacing: 4px;
  animation: splash-pulse 1.8s ease-in-out infinite;
}
@keyframes splash-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── CINEMATIC INTRO SCENE ───────────────────────────────── */
#intro-scene {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  overflow: hidden;
  background: #08080e;
  cursor: pointer;
  opacity: 1;
  transition: opacity 1s ease;
}
#intro-scene.intro-fadeout { opacity: 0; pointer-events: none; }

.intro-bg {
  position: absolute;
  inset: 0;
  background: #000 url('../assets/Maintitle3.png') center center / contain no-repeat;
  animation: introBgReveal 0.9s ease forwards;
}
@keyframes introBgReveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.intro-vignette-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(8,8,14,0.75) 0%, transparent 100%);
  pointer-events: none;
}
.intro-vignette-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(8,8,14,0.95) 0%, rgba(8,8,14,0.6) 45%, transparent 100%);
  pointer-events: none;
}

#intro-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.intro-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #f0d060 0%, #c8a230 60%, transparent 100%);
  animation: introParticleFloat linear forwards;
  will-change: transform, opacity;
}
@keyframes introParticleFloat {
  0%   { opacity: 0;   transform: translate(0, 0) scale(1); }
  12%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate(var(--drift, 0px), -220px) scale(0.3); }
}

.intro-content {
  position: absolute;
  bottom: 16%;
  left: 0; right: 0;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  animation: introContentIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
@keyframes introContentIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.intro-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(28px, 9vw, 56px);
  color: #c8a230;
  letter-spacing: 4px;
  text-shadow:
    0 0 30px rgba(200,162,48,0.9),
    0 0 70px rgba(200,162,48,0.5),
    0 0 120px rgba(200,162,48,0.25),
    0 3px 12px rgba(0,0,0,1);
  margin-bottom: 10px;
  animation: introTitlePulse 3.5s ease-in-out 2.6s infinite;
}
@keyframes introTitlePulse {
  0%, 100% { text-shadow: 0 0 30px rgba(200,162,48,0.9), 0 0 70px rgba(200,162,48,0.5), 0 0 120px rgba(200,162,48,0.25), 0 3px 12px rgba(0,0,0,1); }
  50%       { text-shadow: 0 0 50px rgba(200,162,48,1),   0 0 110px rgba(200,162,48,0.7), 0 0 180px rgba(200,162,48,0.35), 0 3px 12px rgba(0,0,0,1); }
}
.intro-subtitle {
  font-size: clamp(11px, 2.5vw, 15px);
  color: rgba(216, 192, 140, 0.65);
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0;
  animation: introSubIn 1s ease-out 2.2s forwards;
}
@keyframes introSubIn { 100% { opacity: 1; } }

.intro-tap {
  position: absolute;
  bottom: 5%;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(200,162,48,0.5);
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  animation: introTapIn 0.8s ease 3.5s forwards, introTapPulse 2.2s ease-in-out 4.3s infinite;
}
@keyframes introTapIn    { 100% { opacity: 0.55; } }
@keyframes introTapPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.2; } }

/* ── iOS INSTALL BANNER ───────────────────────────────────── */
#ios-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: rgba(16,16,26,0.97);
  border-top: 1px solid #c8a230;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom)) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #9890a0;
  line-height: 1.5;
}
#ios-banner-close {
  background: none;
  border: none;
  color: #5a5470;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}

/* ── MATERIAL SYSTEM v1 ───────────────────────────────────── */

/* Materials panel in inventory */
.materials-panel {
  margin-top: 18px;
  background: #1a1428;
  border: 1px solid #3a3050;
  border-radius: 10px;
  padding: 14px 16px;
}
.mat-panel-title {
  font-size: 14px;
  color: #c0a0e0;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}
.mat-empty { opacity: 0.7; }
.mat-hint {
  font-size: 11px;
  color: #e0a030;
  background: #2a1e08;
  border: 1px solid #5a3a10;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0;
}
.mat-section {
  margin-bottom: 8px;
}
.mat-section-label {
  font-size: 11px;
  color: #8080a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 5px;
}
.mat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mat-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  background: #2a2040;
  border: 1px solid #4a3870;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.mat-chip-icon { font-size: 14px; }
.mat-chip-name { color: #c8b8e8; }
.mat-chip-qty { color: #a0c0ff; font-weight: bold; }
.mat-chip-tool { border-color: #6a5a30; background: #2a2010; }
.mat-chip-dur { font-weight: bold; font-size: 11px; }
.mat-chip-desc { display: none; flex-basis: 100%; font-size: 10.5px; color: var(--text3); margin-top: 2px; line-height: 1.3; }
.mat-chip-sell {
  display: none;
  flex-basis: 100%;
  margin-top: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: rgba(200, 162, 48, 0.12);
  color: var(--gold);
  cursor: pointer;
}
.mat-chip-sell:hover { background: rgba(200, 162, 48, 0.22); }
/* Market consumables reuse this same chip idiom but need a row of 3 qty
   buttons instead of the single Sell button above -- same collapsed/expand
   mechanics, just a wider action area. */
.mat-chip-actions { display: none; flex-basis: 100%; gap: 4px; margin-top: 4px; }
.mat-chip.expanded { border-radius: 10px; }
.mat-chip.expanded .mat-chip-desc { display: block; }
.mat-chip.expanded .mat-chip-sell { display: inline-block; }
.mat-chip.expanded .mat-chip-actions { display: flex; }
.dur-good { color: #50d060; }
.dur-warn { color: #e0c040; }
.dur-low  { color: #e06040; }
.mat-ok { color: #50d060 !important; }
.mat-missing { color: #e06040 !important; }
.mat-qty-badge {
  font-size: 10px;
  color: #8898b8;
  margin-top: 2px;
}

/* Shop qty buy buttons */
.qty-buy-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-xs.btn-secondary { background: #2a2840; color: #a0a8c0; border: 1px solid #4a4870; }
.btn-xs.btn-primary   { background: #3a2870; color: #c8b0ff; border: 1px solid #6050a0; }
.btn-xs.btn-secondary:hover { background: #3a3850; }
.btn-xs.btn-primary:hover   { background: #5040a0; }
.btn-disabled { opacity: 0.45; cursor: not-allowed !important; pointer-events: none; }

/* Smithing tier selection */
.smith-tier-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  max-height: 400px;
  overflow-y: auto;
}
.smith-tier-card {
  background:
    linear-gradient(rgba(30,24,48,0.82), rgba(30,24,48,0.82)),
    url('../assets/texture/leather.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid #3a3060;
  border-radius: 8px;
  padding: 10px 14px;
}
.smith-tier-card:hover { border-color: #6050a0; }
.smith-tier-disabled {
  opacity: 0.5;
  border-color: #2a2240;
}
.smith-tier-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.smith-tier-icon { font-size: 16px; }
.smith-tier-name { color: #d0c0f0; font-weight: bold; font-size: 13px; flex: 1; }
.quality-badge { font-size: 11px; font-weight: bold; }
.smith-tier-mats { font-size: 11px; color: #8898b8; margin-bottom: 3px; }
.smith-tier-temp { font-size: 11px; color: #a0b0d0; margin-bottom: 8px; }

/* Heat zone display (new °C based) */
.heat-track {
  position: relative;
  display: flex;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin: 8px 0;
}
.heat-zone-segment {
  height: 100%;
  flex: none;
}
.heat-cold  { background: linear-gradient(90deg, #2a3a50, #505080); }
.heat-sweet { background: linear-gradient(90deg, #e06020, #ff8000); box-shadow: 0 0 6px #ff6000; }
.heat-hot   { background: linear-gradient(90deg, #ffcc00, #ffe060); }
.sweet-label { color: #ff9030; font-size: 11px; font-weight: bold; text-align: center; flex: 1; }
#heat-zone-label { font-weight: bold; transition: color 0.3s; }

/* Farming minigame */
.farm-seed-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}
.farm-seed-card {
  background: #1c2818;
  border: 1px solid #3a5030;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 130px;
  text-align: center;
}
.farm-seed-disabled { opacity: 0.5; }
.farm-seed-icon { font-size: 24px; margin-bottom: 4px; }
.farm-seed-name { font-size: 12px; color: #a0d080; margin-bottom: 4px; }
.farm-seed-qty  { font-size: 11px; margin-bottom: 6px; }

.farm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  max-width: 300px;
}
.farm-plot {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 2px solid #3a5030;
  border-radius: 8px;
  background: #1a2418;
  cursor: pointer;
  transition: all 0.2s;
}
.farm-plot:hover { transform: scale(1.05); }
.farm-planted  { background: #1a1808; border-color: #3a3020; color: #808060; }
.farm-growing  { background: #1a2008; border-color: #405030; animation: grow-pulse 2s infinite; }
.farm-ready    { background: #203010; border-color: #80c030; box-shadow: 0 0 10px #60a020; cursor: pointer; }
.farm-harvested{ background: #182018; border-color: #305020; color: #508040; opacity: 0.7; cursor: default; }
@keyframes grow-pulse { 0%,100%{opacity:0.8} 50%{opacity:1} }
.farm-stats { font-size: 13px; color: #a0c080; margin-top: 8px; }

.dimtext { color: #606080; font-size: 12px; font-style: italic; }

/* ── TALENT TREE ─────────────────────────────────────────────── */
.talents-screen { padding: 0 4px 16px; }

.talent-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px; background: #181020; border-bottom: 2px solid #6030a0; margin-bottom: 4px;
}
.talent-points-display {
  background: #2a1040; border: 2px solid #8040c0; border-radius: 8px;
  padding: 6px 14px; font-size: 14px; color: #f0d0ff;
}
.talent-spent-display { font-size: 13px; color: #907098; }

.talent-pets-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 6px 12px; background: #120c20; border-bottom: 1px solid #3a2060;
}
.talent-pets-label { font-size: 12px; color: #806090; }
.talent-pet-chip {
  display: flex; align-items: center; gap: 5px;
  background: #1e1030; border: 1px solid #6040a0; border-radius: 16px;
  padding: 3px 10px; font-size: 13px; color: #c0a0e0;
}

/* SVG container */
.talent-tree-wrap {
  overflow-x: auto; padding: 8px 0 16px;
  background: radial-gradient(ellipse at 50% 30%, #1a0e30 0%, #0e0818 100%);
}
.talent-tree-svg { display: block; margin: 0 auto; width: 100%; max-width: 500px; }

/* SVG node: styles driven by parent <g> class */
.talent-node { cursor: pointer; }
.talent-node-circle { stroke-width: 2.5; }

.talent-node-locked   .talent-node-circle { fill: #1a1228; stroke: #4a3068; }
.talent-node-available .talent-node-circle { fill: #241840; stroke: #9060e0;
  filter: drop-shadow(0 0 5px #7040c0); }
.talent-node-unlocked  .talent-node-circle { fill: #2a1850; stroke: #c080ff;
  filter: drop-shadow(0 0 9px #9040e0); }
.talent-node-partial   .talent-node-circle { stroke-dasharray: 5 3; filter: drop-shadow(0 0 6px #9040e0); }

.talent-node-keystone.talent-node-locked   .talent-node-circle { stroke: #a08820; stroke-width: 3; }
.talent-node-keystone.talent-node-available .talent-node-circle { stroke: #e0c030; stroke-width: 3;
  filter: drop-shadow(0 0 6px #c0a020); }
.talent-node-keystone.talent-node-unlocked  .talent-node-circle { stroke: #ffd700; stroke-width: 3.5;
  filter: drop-shadow(0 0 14px #ffd700); }

.talent-node-summon.talent-node-available .talent-node-circle { stroke: #30c060;
  filter: drop-shadow(0 0 6px #20a040); }
.talent-node-summon.talent-node-unlocked  .talent-node-circle { stroke: #40e080;
  filter: drop-shadow(0 0 12px #40e080); }

.talent-node-nofunds .talent-node-circle { opacity: 0.6; }

.talent-node-icon {
  font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.talent-node-locked .talent-node-icon { opacity: 0.4; }

.talent-node-label {
  fill: #b090d0; font-size: 9px; text-anchor: middle; dominant-baseline: hanging; pointer-events: none;
}
.talent-node-locked .talent-node-label   { fill: #604878; }
.talent-node-unlocked .talent-node-label { fill: #e0c8ff; }
.talent-node-keystone .talent-node-label { fill: #e0d080; }

.talent-node-cost  { fill: #e0b020; font-size: 8px; font-weight: bold; text-anchor: middle; dominant-baseline: auto; pointer-events: none; }
.talent-node-check { fill: #80ff80; font-size: 11px; font-weight: bold; text-anchor: middle; dominant-baseline: auto; pointer-events: none; }
.talent-node-ranklabel { fill: #80ff80; font-size: 8px; font-weight: bold; text-anchor: middle; dominant-baseline: auto; pointer-events: none; }

.talent-path-label { fill: #7050a0; font-size: 10px; font-style: italic; pointer-events: none; }

.talent-line-active   { stroke: #8040c0; stroke-width: 2; opacity: 0.9; }
.talent-line-inactive { stroke: #3a2060; stroke-width: 1.5; opacity: 0.45; stroke-dasharray: 5 4; }

/* Legend */
.talent-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 6px 12px 8px; background: #0e0818; font-size: 11px; color: #806090;
}
.tl-item { display: flex; align-items: center; gap: 5px; }
.tl-unlocked { color: #c0a0ff; }
.tl-available { color: #9060e0; }
.tl-locked   { color: #604878; }
.tl-keystone { color: #e0c030; }
.tl-summon   { color: #40e080; }

/* Talent node detail modal (class: talent-node-detail) */
.talent-node-detail { padding: 4px 0; }
.tnd-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tnd-icon { font-size: 40px; flex-shrink: 0; line-height: 1; }
.tnd-name { font-size: 18px; font-weight: bold; color: #d0a0ff; }
.tnd-type { font-size: 12px; color: #907098; margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; }
.tnd-desc { color: #b090c8; font-size: 13px; margin-bottom: 12px; line-height: 1.6; }
.tnd-effects {
  background: #180c28; border: 1px solid #3a2060; border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px;
}
.talent-effect-line { font-size: 13px; color: #c0e080; margin: 4px 0; }
.talent-req-row { font-size: 12px; color: #a08060; margin-bottom: 10px; }
.talent-req-chip {
  display: inline-block; border-radius: 10px; padding: 1px 8px;
  font-size: 12px; margin: 0 2px;
  border: 1px solid #6050a0; background: #1a1030;
}
.talent-req-chip.met   { border-color: #60c060; color: #80e080; }
.talent-req-chip.unmet { border-color: #c06060; color: #e08080; }
.tnd-actions { margin-top: 12px; }

/* ── IN-GAME CONFIRM DIALOG ──────────────────────────────────── */
.confirm-modal { padding: 4px 0 8px; }
.confirm-msg {
  font-size: 15px; color: #d0c0e0; margin-bottom: 20px;
  line-height: 1.6; text-align: center;
}
.confirm-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.confirm-btns .btn { min-width: 130px; }

/* ── MAIN STORY ──────────────────────────────────────────────── */
.story-quest-panel {
  background: linear-gradient(135deg, #1a1020 0%, #2a1a30 100%);
  border: 1px solid #8b5cf6;
  border-left: 4px solid #c084fc;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 0 18px #8b5cf620;
}
.story-quest-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.story-act-label { color: #c084fc; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.story-step-label { color: #a78bfa; font-size: 11px; }
.story-quest-title { font-size: 17px; font-weight: bold; color: #e9d5ff; margin-bottom: 6px; }
.story-quest-objective { font-size: 13px; color: #d4b8f0; margin-bottom: 4px; }
.story-quest-location { font-size: 12px; color: #9d7ec0; }
.story-flag-note { font-size: 12px; color: #a78bfa; margin-top: 6px; font-style: italic; }

/* Story location modal */
/* ── LEVEL UP MODAL ─────────────────────────────────────── */
.lvlup-modal {
  text-align: center; padding: 12px 4px 6px;
  animation: arenaResultIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.lvlup-level-badge {
  display: inline-block;
  font-size: 36px; font-weight: bold;
  color: #ffd040; text-shadow: 0 0 18px rgba(255,200,0,0.6);
  animation: lvlupBadge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  margin-bottom: 2px;
}
@keyframes lvlupBadge {
  from { transform: scale(0.3) rotate(-6deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
@keyframes lvlupGlow { 0%,100%{text-shadow:0 0 10px rgba(255,200,0,0.5);} 50%{text-shadow:0 0 28px rgba(255,200,0,0.9);} }
.lvlup-hero-class { font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.lvlup-gains {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.lvlup-gain {
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 20px;
  padding: 4px 12px; font-size: 13px; color: var(--text);
  animation: fadeIn 0.3s ease both;
}
.lvlup-skill-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,208,64,0.07); border: 1px solid rgba(255,208,64,0.3);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 auto 16px; max-width: 300px;
  text-align: left; animation: fadeIn 0.4s 0.3s ease both;
}
.lvlup-skill-icon { font-size: 28px; }
.lvlup-skill-name { color: #ffd040; font-size: 14px; }
.lvlup-skill-desc { font-size: 12px; color: var(--text2); }
.lvlup-btn { display: block; margin: 0 auto; min-width: 150px; }

/* ── QUEST COMPLETE MODAL ────────────────────────────────── */
.quest-complete-modal {
  text-align: center; padding: 12px 4px 6px;
  animation: arenaResultIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.quest-complete-icon { font-size: 48px; margin-bottom: 8px; animation: arenaIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
.quest-complete-title { font-size: 17px; color: var(--text); margin-bottom: 12px; }
.quest-complete-rewards {
  background: rgba(50,180,80,0.07); border: 1px solid rgba(50,180,80,0.25);
  border-radius: var(--radius); padding: 10px 16px; margin: 0 auto 16px; max-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
}
.quest-reward-row { font-size: 14px; color: var(--text); }
.quest-reward-item { font-size: 13px; margin-top: 4px; }
.item-quality-tag { font-size: 11px; color: var(--text3); }

/* ── TITLE EARNED MODAL ──────────────────────────────────── */
.title-earned-modal {
  text-align: center; padding: 14px 4px 6px;
  animation: arenaResultIn 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.title-earned-icon {
  font-size: 52px; margin-bottom: 10px; display: block;
  animation: arenaIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
             arenaGoldPulse 1.8s 0.65s infinite;
}
.title-earned-name { font-size: 22px; color: #ffd040; text-shadow: 0 0 10px rgba(255,200,0,0.4); margin-bottom: 6px; }
.title-earned-desc { font-size: 13px; color: var(--text2); margin-bottom: 14px; }

/* ── SKILL UNLOCK MODAL ──────────────────────────────────── */
.skill-unlock-modal {
  text-align: center; padding: 12px 4px 6px;
  animation: arenaResultIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.skill-unlock-icon {
  font-size: 52px; margin-bottom: 8px; display: block;
  animation: arenaIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.skill-unlock-name { font-size: 20px; color: var(--gold); margin-bottom: 6px; }
.skill-unlock-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; max-width: 280px; margin-left: auto; margin-right: auto; }

/* ── STORY LOCATION ─────────────────────────────────────── */
.story-location-modal { padding: 4px 0; }
.story-loc-desc { color: #b0a0c8; font-size: 13px; margin-bottom: 10px; }
.story-chapter-badge {
  display: inline-block; background: #3b1f5e; color: #c084fc;
  border: 1px solid #7c3aed; border-radius: 12px;
  font-size: 11px; font-weight: bold; padding: 2px 10px; margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.story-narrative {
  background:
    linear-gradient(rgba(17,13,26,0.86), rgba(17,13,26,0.86)),
    url('../assets/texture/parchment.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-left: 3px solid #7c3aed;
  padding: 12px 14px; border-radius: 6px;
  font-size: 13px; color: #d4c4e8; line-height: 1.7;
  max-height: 280px; overflow-y: auto; margin-bottom: 4px;
}

/* Story scene modal (Varek etc.) */
.story-scene-modal { text-align: center; padding: 4px 0; }
.story-scene-portrait { font-size: 56px; margin-bottom: 12px; }
.story-scene-text { text-align: left;
  background:
    linear-gradient(rgba(17,13,26,0.86), rgba(17,13,26,0.86)),
    url('../assets/texture/parchment.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-left: 3px solid #7c3aed;
  padding: 12px 14px; border-radius: 6px; font-size: 13px; color: #d4c4e8; line-height: 1.75; }
.story-scene-text p { margin-bottom: 10px; }
.story-scene-text p:last-child { margin-bottom: 0; }

/* Coalition choice buttons */
.coalition-choice-btn { padding:10px 12px !important; line-height:1.5; }
.coalition-flavor { font-size:12px; color:var(--text2); margin:2px 0 4px; }
.coalition-perk { font-size:11px; color:var(--text3); line-height:1.4; padding-left:4px; border-left:2px solid var(--gold); margin:2px 0; }
.coalition-align { font-size:11px; font-weight:600; margin-top:4px; }

/* Story nav badge on Quests tab */
.story-nav-badge {
  position: absolute; top: 2px; right: 4px;
  font-size: 9px; color: #c084fc; font-weight: bold;
  animation: story-pulse 2s ease-in-out infinite;
}
/* Quest-awaiting-resolution nav badge on Quests tab — offset to the opposite corner so it never overlaps .story-nav-badge */
.quest-resolve-badge {
  position: absolute; top: 2px; left: 4px;
  font-size: 9px; color: #ffcf40; font-weight: bold;
  animation: story-pulse 2s ease-in-out infinite;
}
@keyframes story-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* ── GRIX GOBLIN TUTORIAL SYSTEM ─────────────────────────── */
.grix-status-btn {
  background: #1a2e1a !important;
  border: 1px solid #3a6b3a !important;
  color: #6ddb6d !important;
  font-size: 14px !important;
  padding: 3px 7px !important;
  min-width: 32px;
}
.grix-status-btn:hover { background: #233823 !important; border-color: #5dbb5d !important; }

/* Grix modal styling — applied via the modal-box inside #modal-overlay */
.grix-hint-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 0;
}
.grix-portrait {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px #4daf4d88);
  animation: grix-bounce 2.5s ease-in-out infinite;
}
.grix-portrait-img {
  width: 64px;
  height: 64px;
  display: block;
}
.grix-btn-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1px;
  filter: drop-shadow(0 0 3px #4daf4d66);
}
.grix-disabled-x {
  font-size: 11px;
  vertical-align: middle;
  opacity: 0.7;
}
.grix-title-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
}
@keyframes grix-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.grix-speech {
  flex: 1;
  background: #12221a;
  border: 1px solid #3a6b3a;
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}
.grix-speech::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid #3a6b3a;
}
.grix-speech::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 19px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #12221a;
}
.grix-line {
  color: #c8e8c8;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.grix-line:last-of-type { margin-bottom: 12px; }
.grix-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.grix-ok {
  background: #2a5a2a !important;
  border-color: #4a9a4a !important;
  color: #aaffaa !important;
}
.grix-ok:hover { background: #366636 !important; }
.grix-disable {
  font-size: 11px !important;
  color: var(--text3) !important;
  opacity: 0.7;
}
/* Grix modal theme */
.grix-modal { border-color: #3a6b3a !important; }
.grix-modal .modal-header { background: #162616; border-bottom-color: #3a6b3a; }
.grix-modal .modal-header h3 { color: #6ddb6d; }

/* ══════════════════════════════════════════════════════════
   DUNGEON CRAWLER
   ══════════════════════════════════════════════════════════ */

/* ── Dungeon main screen ─────────────────────────────────── */
.dungeon-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  max-width: 720px;
  /* fixed attachment: .dungeon-screen isn't the scroll container (#main-content
     is) and has no max-height, so its own box grows with room content --
     cover sized against that unbounded box stretched the texture to near-
     invisibility on any real dungeon room. Fixed attachment sizes cover
     against the viewport instead, so the texture stays recognizable while
     content scrolls past it. */
  background:
    linear-gradient(rgba(8,8,14,0.78), rgba(8,8,14,0.78)),
    url('../assets/texture/stone_wall.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Header ──────────────────────────────────────────────── */
.dungeon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #3a1a3a;
}
.dungeon-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dungeon-icon { font-size: 20px; filter: drop-shadow(0 0 6px #a020a088); }
.dungeon-name { font-size: 16px; font-weight: bold; color: var(--text); }
.dungeon-floor-badge {
  font-size: 12px;
  color: var(--gold);
  background: rgba(200,162,48,0.12);
  border: 1px solid rgba(200,162,48,0.3);
  border-radius: 12px;
  padding: 2px 8px;
}
.dungeon-escape-btn {
  background: #2a0a0a !important;
  border-color: #5a2020 !important;
  color: #cc6060 !important;
  flex-shrink: 0;
}
.dungeon-escape-btn:hover { background: #3a1010 !important; }

/* ── Room map strip ─────────────────────────────────────── */
.dungeon-room-map {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 4px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.droom-node {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  transition: all 0.2s;
}
.droom-node.droom-cleared {
  opacity: 0.45;
  border-color: var(--border);
  background: var(--bg1);
}
.droom-node.droom-current {
  border-color: var(--gold);
  background: rgba(200,162,48,0.12);
  box-shadow: 0 0 8px rgba(200,162,48,0.35);
}
.droom-node.droom-revealed { border-color: var(--border2); }
.droom-node.droom-locked { opacity: 0.4; font-size: 14px; }
.droom-arrow {
  color: var(--text3);
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Current room panel ──────────────────────────────────── */
.dungeon-current-room {
  background: var(--bg1);
  border: 2px solid #3a1a3a;
  border-radius: var(--radius);
  padding: 16px;
  flex: 1;
}
.dungeon-room-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.dungeon-room-icon { font-size: 32px; }
.dungeon-room-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}
.dungeon-room-desc {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.dungeon-room-actions { display: flex; flex-direction: column; gap: 8px; }
.dungeon-action-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px !important;
}
.dungeon-choice-list { display: flex; flex-direction: column; gap: 6px; }
.dungeon-choice-btn {
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dungeon-choice-sub {
  font-size: 11px;
  opacity: 0.65;
  font-weight: normal;
}
.boss-fight-btn {
  background: linear-gradient(135deg, #4a0a0a, #2a0020) !important;
  border-color: #8a2020 !important;
  color: #ff8080 !important;
  animation: dungeonBossPulse 2.5s ease-in-out infinite;
}
@keyframes dungeonBossPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(160,30,30,0.4); }
  50%       { box-shadow: 0 0 16px rgba(200,40,40,0.7); }
}
.dungeon-room-cleared-msg {
  color: var(--green);
  font-size: 13px;
  text-align: center;
  padding: 8px;
  opacity: 0.7;
}
.dungeon-enemy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.dungeon-enemy-chip {
  background: rgba(160,30,30,0.15);
  border: 1px solid #5a2020;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text2);
}
.dungeon-shrine-info,
.dungeon-trap-info {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 8px;
  padding: 8px;
  background: var(--bg2);
  border-radius: var(--radius);
}

/* ── Party strip ─────────────────────────────────────────── */
.dungeon-party-strip {
  display: flex;
  gap: 10px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  flex-wrap: wrap;
}
.dparty-member {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}
.dparty-member.dparty-ko { opacity: 0.45; }
.dparty-icon { font-size: 20px; }
.dparty-info { flex: 1; }
.dparty-name { font-size: 11px; color: var(--text2); margin-bottom: 3px; }
.dparty-hp-bar {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
}
.dparty-hp-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.dparty-hp-num { font-size: 10px; color: var(--text3); }

/* ── Dungeon entrance modal ──────────────────────────────── */
.dungeon-entrance { padding: 4px 0; }
.dungeon-ent-desc {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg2);
  border-radius: var(--radius);
  border-left: 3px solid #3a1a3a;
}
.dungeon-ent-section { margin-bottom: 14px; }
.dungeon-ent-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.dungeon-depth-row {
  display: flex;
  gap: 8px;
}
.depth-opt {
  flex: 1;
  padding: 8px 4px !important;
  text-align: center;
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  transition: all 0.15s;
}
.depth-opt.active {
  background: rgba(200,162,48,0.12) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.dungeon-fol-list { display: flex; flex-direction: column; gap: 8px; }
.dungeon-fol-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dungeon-fol-pick:has(input:checked) {
  border-color: var(--gold);
  background: rgba(200,162,48,0.08);
}
.dungeon-fol-pick input { cursor: pointer; }
.dfolpick-icon { font-size: 20px; }
.dfolpick-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.dungeon-ent-warning {
  font-size: 12px;
  color: #c07020;
  background: rgba(192,112,32,0.1);
  border: 1px solid rgba(192,112,32,0.3);
  border-radius: var(--radius);
  padding: 8px 10px;
}

/* ── Floor exit choice ───────────────────────────────────── */
.dungeon-exit-choice { padding: 4px 0; }
.dungeon-loot-preview {
  font-size: 13px;
  color: var(--text2);
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 10px;
}

/* ── Run summary modal ───────────────────────────────────── */
.dungeon-summary { padding: 4px 0; }
.dungeon-sum-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
}
.dungeon-sum-stat strong { color: var(--text); }
.dungeon-sum-items {
  margin-top: 12px;
  max-height: 200px;
  overflow-y: auto;
}
.dungeon-sum-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 600px) {
  .dungeon-screen { padding: 10px; gap: 10px; }
  .dungeon-name   { font-size: 14px; }
  .droom-node     { width: 34px; height: 34px; font-size: 16px; }
  .dungeon-action-btn { font-size: 14px !important; padding: 10px !important; }
  .dungeon-depth-row  { gap: 6px; }
  .dungeon-party-strip { gap: 8px; }
  .dparty-member { min-width: 100px; }
}

/* ── MUSIC ─────────────────────────────────────────────────── */
.music-status-btn {
  font-size: 14px;
  min-width: 28px;
  padding: 3px 6px;
}
.music-modal {
  padding: 4px 0 8px;
}
.music-now-playing {
  text-align: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.music-track-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 4px;
  word-break: break-word;
}
.music-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.music-vol-label {
  font-size: 13px;
  white-space: nowrap;
  min-width: 54px;
}
.music-vol-slider {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
  height: 4px;
}
.music-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   GAME MENU OVERLAY
   ═══════════════════════════════════════════════════════════════ */
#game-menu-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.82)),
              url('./assets/background1.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#game-menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.gm-panel {
  background: rgba(8, 7, 14, 0.93);
  border: 1px solid rgba(200,162,48,0.30);
  border-radius: 8px;
  padding: 32px 28px 28px;
  min-width: 280px;
  max-width: 360px;
  width: 90%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform 0.28s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(200,162,48,0.08);
}
#game-menu-overlay.open .gm-panel {
  transform: translateY(0);
}
#gm-panel-content {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gm-logo {
  text-align: center;
  letter-spacing: 4px;
  font-size: 11px;
  color: var(--gold);
  opacity: 0.65;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.gm-divider {
  height: 1px;
  background: rgba(200,162,48,0.18);
  margin: 20px 0;
}
/* Main menu buttons */
.gm-btn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gm-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
}
.gm-btn:hover {
  background: rgba(200,162,48,0.10);
  border-color: rgba(200,162,48,0.40);
  color: var(--gold);
}
.gm-btn--danger { color: var(--text3); }
.gm-btn--danger:hover {
  background: rgba(160,40,40,0.12);
  border-color: rgba(200,80,80,0.40);
  color: #d06060;
}
.gm-btn--primary {
  background: rgba(200,162,48,0.12);
  border-color: rgba(200,162,48,0.35);
  color: var(--gold);
}
.gm-btn--primary:hover { background: rgba(200,162,48,0.22); }
/* Close / resume link */
.gm-close-row { text-align: center; margin-top: 22px; }
.gm-close-link {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 2px;
  font-family: inherit;
  text-transform: uppercase;
  transition: color 0.15s;
  padding: 0;
}
.gm-close-link:hover { color: var(--text2); }
/* Section header (Back + title) */
.gm-back-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.gm-back-btn {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  padding: 0;
  font-family: inherit;
  text-transform: uppercase;
  transition: color 0.15s;
  flex-shrink: 0;
}
.gm-back-btn:hover { color: var(--text); }
.gm-section-title {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text3);
  text-transform: uppercase;
}
/* Save/Load slot cards */
.gm-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.15s;
}
.gm-slot:hover { border-color: rgba(200,162,48,0.25); }
.gm-slot-info { flex: 1; min-width: 0; }
.gm-slot-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-slot-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.gm-slot--empty .gm-slot-name { color: var(--text3); font-style: italic; }
.gm-slot-btns { display: flex; gap: 6px; flex-shrink: 0; }
/* Backup/Restore live on a second row rather than crowding into .gm-slot-btns
   -- 4 buttons in one unwrapped row would overflow the ~300px-wide game-menu
   panel on mobile (feedback-driven save corruption-hardening work). */
.gm-slot--expanded { flex-direction: column; align-items: stretch; }
.gm-slot-row { display: flex; align-items: center; gap: 10px; }
.gm-slot-btns-secondary {
  display: flex; gap: 6px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
}
.gm-slot-btns-secondary .gm-slot-btn { flex: 1; text-align: center; }
.gm-slot-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  color: var(--text2);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  white-space: nowrap;
}
.gm-slot-btn:hover { border-color: var(--gold2); color: var(--gold); background: rgba(200,162,48,0.10); }
.gm-slot-btn--danger:hover { border-color: rgba(200,80,80,0.50); color: #d06060; background: rgba(160,40,40,0.10); }
.gm-slot-btn--active { border-color: var(--gold2); color: var(--gold); }
/* Audio settings */
.gm-audio-section { margin-bottom: 14px; }
.gm-audio-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.gm-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gm-vol-pct { font-size: 11px; color: var(--text3); min-width: 32px; text-align: right; }
.gm-vol-slider { flex: 1; accent-color: var(--gold); cursor: pointer; height: 4px; }
.gm-toggle-row { display: flex; gap: 8px; margin-bottom: 8px; }
.gm-track-name { font-size: 11px; color: var(--text3); text-align: center; font-style: italic; }
/* Top-bar menu button */
.btn-menu {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 10px;
  border-color: rgba(200,162,48,0.30);
  color: var(--text2);
}
.btn-menu:hover { border-color: var(--gold2); color: var(--gold); }

/* ── INTERACTIVE WORLD MAP ─────────────────────────────────── */

/* Top info bar above world canvas */
.wmap-topbar {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; background:var(--bg2);
  border:1px solid var(--border); border-radius:8px; margin-bottom:8px;
}
.wmap-topbar-loc  { font-size:13px; color:var(--gold); }
.wmap-topbar-day  { font-size:11px; color:var(--text2); }
.wmap-topbar-hint { font-size:11px; color:var(--text3); margin-left:auto; }

/* Travel status banner (replaces sidebar travel panel) */
.wmap-travel-status-banner {
  margin-top:6px; padding:9px 14px;
  background:rgba(200,162,48,.07); border:1px solid rgba(200,162,48,.3);
  border-radius:8px; color:var(--gold); font-size:13px; text-align:center;
}

/* World/Region screen wrapper — stretches to fill available viewport height so
   there's no dead black space below the canvas on tall phone viewports. */
.world-screen { display:flex; flex-direction:column; min-height:100%; }

/* SVG canvas — shared by world + regional maps */
.wmap-canvas {
  position:relative; width:100%; aspect-ratio:3/2;
  border-radius:12px; border:1px solid rgba(255,255,255,0.12);
  overflow:hidden;
  background-color:#0a0a14;
  box-shadow:0 4px 28px rgba(0,0,0,0.65);
  cursor:default;
}
/* Region map background color fallback (image is rendered via <img> tag) */
.rmap-canvas { aspect-ratio:3/2; background-color:#0e0b06; }
/* Background image element — keeps aspect ratio and never crops */
.wmap-bg-img {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none; user-select:none;
  border-radius:inherit;
}
.wmap-edges-svg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}

/* ── WORLD MAP: Region nodes ──────────────────────────────── */
.wmap-node {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; z-index:3;
}
.wmap-node-orb {
  position:relative;
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #f0f0f8 0%, #c8cad6 18%, #9096a8 48%, #545870 74%, #282c3a 100%);
  border:2px solid rgba(255,255,255,0.45);
  display:flex; align-items:center; justify-content:center;
  font-size:0; transition:transform .18s, box-shadow .18s;
  box-shadow:0 3px 8px rgba(0,0,0,0.88), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.32);
}
.wmap-node-danger-pip {
  position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
  border-radius:50%; border:1.5px solid rgba(8,8,14,0.9);
  box-shadow:0 0 4px rgba(0,0,0,0.7);
}
.wmap-node-faction-badge {
  position:absolute; top:-1px; left:-1px; width:12px; height:12px;
  border-radius:50%; border:1.5px solid rgba(8,8,14,0.9);
  display:flex; align-items:center; justify-content:center; font-size:8px;
  box-shadow:0 0 4px rgba(0,0,0,0.7);
}
.wmap-node-faction-contested {
  background:#404048; color:rgba(220,205,170,.9);
}
.wmap-danger-legend {
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:2px;
}
.wmap-danger-legend-item {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text2);
}
.wmap-danger-legend-dot {
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(8,8,14,0.9); box-shadow:0 0 4px rgba(0,0,0,0.7);
  flex-shrink:0;
}
.wmap-node:hover .wmap-node-orb {
  transform:scale(1.28);
  box-shadow:0 0 14px rgba(200,162,48,.65), 0 3px 10px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.5);
}
.wmap-node.here .wmap-node-orb {
  background:radial-gradient(circle at 36% 30%, #ffe060 0%, #c8a230 28%, #7a5c14 62%, #3a2808 100%);
  border-color:rgba(255,215,70,0.75);
  box-shadow:0 0 18px rgba(200,162,48,.72), 0 3px 8px rgba(0,0,0,.88), inset 0 1px 1px rgba(255,255,200,0.4);
  animation:wmap-pulse 2.4s ease-in-out infinite;
}
.wmap-node.quest .wmap-node-orb {
  box-shadow:0 0 14px rgba(192,64,64,.82), 0 3px 8px rgba(0,0,0,0.88), inset 0 1px 1px rgba(255,255,255,0.45);
}
.wmap-node.locked .wmap-node-orb { filter:grayscale(.8) brightness(.55); }
.wmap-node.locked { opacity:.5; }
/* Labels hidden on world map — the image already has region names printed */
.wmap-node-label { display:none; }
/* Show label only for current region and quested regions to provide context */
.wmap-node.here .wmap-node-label,
.wmap-node.quest .wmap-node-label {
  display:block;
  background:rgba(6,4,2,.93); color:rgba(220,205,170,.9); font-size:9px;
  padding:1px 5px; border-radius:3px; white-space:nowrap;
  max-width:90px; overflow:hidden; text-overflow:ellipsis; text-align:center;
  pointer-events:none; letter-spacing:.2px;
  box-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.wmap-node.here .wmap-node-label  { color:var(--gold); }
.wmap-node.quest .wmap-node-label { color:#e08080; }

@keyframes wmap-pulse {
  0%,100% { box-shadow:0 0 8px rgba(200,162,48,.5), 0 2px 10px rgba(0,0,0,.7); }
  50%      { box-shadow:0 0 22px rgba(200,162,48,.85), 0 0 38px rgba(200,162,48,.25); }
}

/* Travelling dot */
.wmap-travel-dot {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--gold); transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--gold), 0 0 20px rgba(200,162,48,.45);
  z-index:10; display:none; pointer-events:none;
}

/* Travel progress bar */
.wmap-travel-bar-wrap { height:4px; background:var(--bg3); border-radius:2px; margin-top:5px; overflow:hidden; display:none; }
.wmap-travel-bar { height:100%; background:var(--gold); border-radius:2px; width:0; }

/* ── REGIONAL MAP ─────────────────────────────────────────── */

/* Breadcrumb bar */
.rmap-breadcrumb {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 10px; background:var(--bg2);
  border:1px solid var(--border); border-radius:8px; margin-bottom:8px;
}
.rmap-back-btn {
  background:none; border:1px solid var(--border); color:var(--text2);
  border-radius:6px; padding:4px 10px; font-size:12px;
  cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.rmap-back-btn:hover { border-color:var(--gold2); color:var(--gold); }
.rmap-bc-center  { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.rmap-bc-icon    { font-size:20px; flex-shrink:0; }
.rmap-bc-info    { flex:1; min-width:0; }
.rmap-bc-name-row{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.rmap-bc-name    { font-size:14px; font-weight:bold; white-space:nowrap; }
.rmap-bc-lvl     { font-size:10px; color:var(--text3); white-space:nowrap; }
.rmap-bc-desc    { font-size:10px; color:var(--text3); line-height:1.35; margin-top:2px;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmap-bc-right   { margin-left:auto; flex-shrink:0; }
.rmap-bc-here    { font-size:11px; color:var(--gold); }
.rmap-bc-locked  { font-size:11px; color:var(--text3); }
.rmap-travel-btn { padding:5px 12px !important; font-size:11px !important; }

/* Location nodes — shiny silver circle */
.rmap-loc-node {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; z-index:3;
}
.rmap-loc-node-gem {
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #f0f0f8 0%, #c8cad6 18%, #9096a8 48%, #545870 74%, #282c3a 100%);
  border:2px solid;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, box-shadow .18s;
  box-shadow:0 3px 8px rgba(0,0,0,0.82), inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.28);
}
.rmap-loc-node:hover .rmap-loc-node-gem,
.rmap-loc-node.selected .rmap-loc-node-gem {
  transform:scale(1.3);
  box-shadow:0 0 13px rgba(200,162,48,.58), 0 3px 8px rgba(0,0,0,0.82), inset 0 1px 1px rgba(255,255,255,0.5);
}
.rmap-loc-node.quest .rmap-loc-node-gem {
  box-shadow:0 0 12px rgba(192,64,64,.72), 0 3px 8px rgba(0,0,0,0.82), inset 0 1px 1px rgba(255,255,255,0.45);
}
.rmap-loc-node.locked .rmap-loc-node-gem { filter:grayscale(.72); }
.rmap-loc-node.locked { opacity:.45; }
.rmap-loc-node-label {
  background:rgba(14,10,4,.92); color:rgba(210,200,180,.85); font-size:9.5px;
  padding:1px 6px; border-radius:3px; white-space:nowrap;
  max-width:96px; overflow:hidden; text-overflow:ellipsis; text-align:center;
  pointer-events:none; letter-spacing:.2px;
}
.rmap-loc-node.selected .rmap-loc-node-label { color:var(--gold); font-weight:bold; }
.rmap-loc-node.quest    .rmap-loc-node-label { color:#d06060; }

/* Location popup card — inline below the map */
.rmap-loc-card {
  position:relative;
  width:min(92vw,420px); margin:12px auto 0;
  background:rgba(12,8,3,0.98); border:1px solid rgba(200,162,48,0.22);
  border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.65);
  animation:rmap-card-in .18s ease-out;
}
@keyframes rmap-card-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.rmap-card-type-stripe { height:3px; border-radius:12px 12px 0 0; }
.rmap-card-body        { padding:12px 15px 15px; }
.rmap-card-close {
  position:absolute; top:10px; right:11px;
  background:none; border:none; color:var(--text3);
  cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px;
}
.rmap-card-close:hover { color:var(--text); background:var(--bg3); }
.rmap-card-type {
  font-size:9px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:700; margin-bottom:5px; padding-right:24px;
}
.rmap-card-name {
  font-size:16px; font-weight:bold; color:var(--text);
  line-height:1.25; margin-bottom:3px;
}
.rmap-card-lvl { font-size:10px; color:var(--text3); letter-spacing:.5px; margin-bottom:10px; }
.rmap-card-quest-badge {
  font-size:9px; background:rgba(192,64,64,.2); color:#c04040;
  border:1px solid rgba(192,64,64,.4); border-radius:3px;
  padding:1px 4px; vertical-align:middle; margin-left:5px;
}
.rmap-card-desc {
  font-size:11px; color:var(--text3); line-height:1.5;
  margin-bottom:10px; font-style:italic;
  border-left:2px solid rgba(200,162,48,0.28); padding-left:8px;
}
.rmap-card-daily { display:flex; align-items:center; gap:6px; margin-bottom:9px; }
.rmap-card-daily-label { font-size:10px; color:var(--text3); }
.rmap-card-daily-pips  { display:flex; gap:3px; }
.rmap-daily-pip {
  width:8px; height:8px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--border);
}
.rmap-daily-pip.used { background:var(--gold); border-color:var(--gold2); }
.rmap-card-dots { font-size:9px; color:var(--text3); margin-right:2px; }
.rmap-card-action { width:100%; font-size:12px; margin-top:2px; }
.rmap-card-action.stamina-low  { border-color:#601010 !important; color:#c04040 !important; }
.rmap-card-action.daily-maxed  { opacity:.45; cursor:default; }
.rmap-card-hint { font-size:11px; color:var(--text3); text-align:center; padding:6px 0; }

/* ── APP IS-PROLOGUE: hide chrome, fill viewport ─────────── */
#app.is-prologue               { grid-template-rows: 1fr; }
#app.is-prologue #nav-sidebar  { display: none !important; }
#app.is-prologue #title-bar    { display: none !important; }
#app.is-prologue #status-bar   { display: none !important; }
#app.is-prologue #message-log  { display: none !important; }
#app.is-prologue #game-body    { display: flex; flex-direction: column; height: 100%; grid-template-columns: 1fr; }
#app.is-prologue #main-content { flex: 1; min-height: 0; padding: 0; overflow: hidden; }

/* ── PROLOGUE SCREEN ─────────────────────────────────────── */
.prologue-screen {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at 50% 30%, #1a1228 0%, #08080e 70%);
  overflow: hidden;
}
.prologue-scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.prologue-scroll::-webkit-scrollbar { width: 3px; }
.prologue-scroll::-webkit-scrollbar-track { background: transparent; }
.prologue-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.prologue-panel {
  max-width: 600px;
  margin: 0 auto;
  padding: 52px 28px 24px;
  animation: prologue-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes prologue-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prologue-panel-title {
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 18px;
  text-align: center;
}
.prologue-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  margin: 0 auto 34px;
  opacity: 0.45;
}
.prologue-text {
  color: #ccc8be;
  font-size: 15px;
  line-height: 1.85;
}
.prologue-text p { margin-bottom: 1.15em; }
.prologue-text p:last-child { margin-bottom: 0; }
.prologue-hero-block {
  text-align: center;
  margin-bottom: 34px;
}
.prologue-hero-name {
  font-size: 24px;
  font-weight: bold;
  color: #f0ece0;
  letter-spacing: 2px;
}
.prologue-hero-sub {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 7px;
}
.prologue-footer {
  flex-shrink: 0;
  width: 100%;
  max-width: 600px;
  padding: 18px 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to top, #08080e 55%, transparent);
}
.prologue-dots { display: flex; gap: 9px; align-items: center; }
.prologue-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #302e28;
  transition: background 0.35s ease, transform 0.35s ease;
}
.prologue-dot.active { background: var(--gold); transform: scale(1.45); }
.prologue-footer-btns { display: flex; gap: 10px; align-items: center; }
.prologue-skip-btn { font-size: 12px; opacity: 0.45; padding: 6px 14px; }
.prologue-skip-btn:hover { opacity: 0.85; }
.prologue-letter { background: rgba(200,162,48,0.05); border-left: 2px solid rgba(200,162,48,0.25); border-radius: 3px; padding: 18px 22px; margin: 20px 0 24px; }
.prologue-letter p { color: #d0c8a8; font-size: 14px; line-height: 1.9; font-style: italic; margin: 0 0 12px; }
.prologue-letter p:last-of-type { margin-bottom: 0; }
.prologue-letter-sig { margin-top: 18px; font-style: normal; color: var(--gold); opacity: 0.75; font-size: 13px; line-height: 1.6; }
/* ── APP IS-ACT-CARD: fullscreen cinematic ───────────────── */
#app.is-act-card               { grid-template-rows: 1fr; }
#app.is-act-card #nav-sidebar  { display: none !important; }
#app.is-act-card #title-bar    { display: none !important; }
#app.is-act-card #status-bar   { display: none !important; }
#app.is-act-card #message-log  { display: none !important; }
#app.is-act-card #bottom-info-bar { display: none !important; }
#app.is-act-card #game-body    { display: flex; flex-direction: column; height: 100%; grid-template-columns: 1fr; }
#app.is-act-card #main-content { flex: 1; min-height: 0; padding: 0; overflow: hidden; }

.act-card-screen {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(26,18,40,0.55) 0%, rgba(8,8,14,0.92) 70%),
    url('../assets/texture/cracked_ember.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.act-card-center {
  text-align: center;
  z-index: 2;
  animation: act-card-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes act-card-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.act-card-numeral {
  font-size: 11px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: act-fade-in 1s ease 0.3s forwards;
}
.act-card-rule {
  width: 60px; height: 1px;
  background: var(--gold);
  opacity: 0;
  margin: 20px auto;
  animation: act-rule-in 1.2s ease 0.6s forwards;
}
@keyframes act-rule-in {
  from { opacity: 0; width: 0; }
  to   { opacity: 0.4; width: 60px; }
}
.act-card-subtitle {
  font-size: 28px;
  font-weight: 700;
  color: #f0ece0;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  animation: act-fade-in 1.2s ease 0.9s forwards;
}
.act-card-quote {
  font-size: 13px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.8;
  max-width: 340px;
  margin: 22px auto 0;
  opacity: 0;
  animation: act-fade-in 1.2s ease 1.4s forwards;
}
@keyframes act-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.act-card-footer {
  position: absolute;
  bottom: 10%;
  left: 0; right: 0;
  text-align: center;
  z-index: 2;
  opacity: 0;
  animation: act-fade-in 0.8s ease 2.2s forwards;
}

/* ── Region bottom info panel ─────────────────────────────── */
.rmap-bottom-panel {
  width:min(92vw,420px); margin:10px auto 0;
  display:flex; flex-direction:column; gap:8px;
}
.rmap-info-section {
  background:
    linear-gradient(rgba(16,16,26,0.88), rgba(16,16,26,0.88)),
    url('../assets/texture/parchment.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border:1px solid rgba(200,162,48,0.15);
  border-radius:10px; padding:10px 12px;
}
.rmap-info-label {
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text3); margin-bottom:6px;
}
.rmap-info-row {
  display:flex; align-items:flex-start; gap:7px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.rmap-info-row:last-child { border-bottom:none; padding-bottom:0; }
.rmap-info-row.story .rmap-info-text strong { color:var(--gold); }
.rmap-info-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.rmap-info-text { font-size:12px; color:var(--text2); flex:1; line-height:1.4; }
.rmap-info-text strong { color:var(--text1); }
.rmap-info-badge {
  font-size:10px; color:var(--text3); white-space:nowrap;
  background:rgba(255,255,255,0.06); border-radius:4px; padding:1px 5px;
  flex-shrink:0; margin-top:2px;
}
.rmap-info-row.story .rmap-info-badge {
  color:var(--gold); background:rgba(200,162,48,0.12); border:1px solid rgba(200,162,48,0.25);
}
.rmap-log-entry {
  font-size:11px; color:var(--text3); line-height:1.4;
  padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.rmap-log-entry:last-child { border-bottom:none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px) {
  .wmap-node-orb { width:26px; height:26px; }
  .wmap-node.here .wmap-node-label,
  .wmap-node.quest .wmap-node-label { font-size:8px; max-width:72px; }
  /* Breadcrumb: collapse description on very small screens */
  .rmap-bc-desc { display:none; }
  .rmap-bc-lvl  { display:none; }
  /* Location nodes: smaller on mobile */
  .rmap-loc-node-gem { width:26px; height:26px; }
  /* Hide labels on mobile by default — show only selected + quest to prevent overlap */
  .rmap-loc-node-label { display:none; }
  .rmap-loc-node.selected .rmap-loc-node-label,
  .rmap-loc-node.quest    .rmap-loc-node-label { display:block; font-size:8.5px; max-width:70px; }

}
/* On slightly larger mobile (phablet/tablet) show all labels */
@media (min-width:420px) and (max-width:768px) {
  .rmap-loc-node-label { display:block; font-size:8.5px; max-width:70px; }
}

/* ── UNIQUE FOLLOWER INTRO MODAL (.ufi-*) ───────────────────── */
.unique-follower-intro { padding: 2px 0; }
.ufi-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ufi-icon { font-size: 32px; line-height: 1; }
.ufi-name { font-size: 17px; font-weight: 700; color: var(--text); }
.ufi-title { font-size: 12px; margin-top: 2px; }
.ufi-scene { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; font-style: italic; }
.ufi-line { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 8px; padding-left: 10px; border-left: 2px solid var(--gold2); }
.ufi-passive { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 10px 0; font-size: 12px; }
.ufi-passive-name { font-weight: bold; color: var(--gold); display: block; margin-bottom: 3px; }
.ufi-passive-desc { color: var(--text2); }
.ufi-hint { font-size: 11px; color: var(--text3); margin-bottom: 0; text-align: center; }

/* ── COMPANION TALK MODAL ────────────────────────────────────
   Unified container for ALL companion dialogue (unique companions and
   story followers like Mira) — one gold/dark-fantasy visual language
   instead of two clashing ones. Structure borrowed from the game's
   story-scene layout (portrait + narrative block), palette from the
   established --gold/--bg* companion-bond identity, not the purple
   Hollow-mythos scheme reserved for actual story/mystery scenes. */
.companion-modal { text-align: center; padding: 4px 0; }
.companion-modal-portrait { font-size: 48px; margin-bottom: 10px; }
.companion-modal-text { text-align: left; }
.companion-modal-text p { margin-bottom: 10px; }
.companion-modal-text p:last-child { margin-bottom: 0; }

/* ── FOLLOWER TALK MODAL (.ftalk-*) ───────────────────────────
   .ftalk-modal itself is now only used by the quest-stage sub-modals
   (showFollowerQuestStage1/showFollowerQuestChoice) — the main Talk
   modal moved to .companion-modal above. The .ftalk-bond-*/.ftalk-line/
   .ftalk-quest-*/.ftalk-choice-*/.ftalk-passive-note pieces are still
   used as-is inside .companion-modal, unchanged. */
.ftalk-modal { padding: 2px 0; }
.ftalk-bond-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ftalk-bond-label { font-size: 12px; color: var(--gold); font-weight: bold; min-width: 80px; }
.ftalk-bond-bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.ftalk-bond-fill { height: 100%; background: linear-gradient(90deg, #c8a230, #f0c060); border-radius: 3px; transition: width 0.4s; }
.ftalk-bond-xp { font-size: 11px; color: var(--text3); min-width: 55px; text-align: right; }
.ftalk-line { font-size: 14px; color: var(--text); line-height: 1.65; padding: 8px 12px; background: var(--bg2); border-radius: var(--radius); border-left: 3px solid var(--gold2); margin-bottom: 12px; font-style: italic; }
.ftalk-quest-locked { font-size: 12px; color: var(--text3); padding: 8px 10px; background: var(--bg2); border-radius: var(--radius); margin-bottom: 10px; }
.ftalk-quest-ready { font-size: 13px; color: var(--text2); padding: 8px 12px; background: rgba(200,162,48,.08); border: 1px solid rgba(200,162,48,.2); border-radius: var(--radius); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftalk-quest-done { font-size: 12px; color: var(--text3); padding: 8px 10px; background: var(--bg2); border-radius: var(--radius); margin-bottom: 10px; }
.ftalk-quest-text { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 14px; }
.ftalk-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ftalk-choice-btn { text-align: left; padding: 10px 14px; font-size: 13px; line-height: 1.4; white-space: normal; height: auto; }
.ftalk-reward { font-size: 12px; color: #40c060; margin-top: 6px; padding: 4px 8px; background: rgba(64,192,96,.1); border-radius: 4px; }
.ftalk-passive-note { font-size: 11px; color: var(--text3); padding: 6px 10px; background: var(--bg2); border-radius: var(--radius); margin-top: 4px; }

/* ── UNIQUE FOLLOWER CARD EXTRAS ────────────────────────────── */
.fc-unique-badge { font-size: 10px; color: var(--gold); background: rgba(200,162,48,.15); border: 1px solid rgba(200,162,48,.3); border-radius: 8px; padding: 1px 7px; display: inline-block; margin-bottom: 4px; }
.fc-bond-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.fc-bond-label { font-size: 11px; color: var(--gold); min-width: 64px; }
.fc-bond-bar-wrap { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.fc-bond-bar-fill { height: 100%; background: linear-gradient(90deg, #c8a230, #f0c060); border-radius: 2px; }
.fc-bond-xp-label { font-size: 10px; color: var(--text3); }

/* ── PARAGON STAT DISPLAY ───────────────────────────────────── */
.paragon-stat-display { display: flex; flex-direction: column; gap: 6px; }
.paragon-stat-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.paragon-stat-chip { font-size: 11px; background: rgba(200,162,48,.15); border: 1px solid rgba(200,162,48,.35); border-radius: 8px; padding: 2px 8px; color: var(--gold); font-weight: bold; }
.paragon-hp-chip { background: rgba(192,64,64,.15); border-color: rgba(192,64,64,.35); color: #e06060; }
.paragon-ascend-count { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── PARAGON ASCENSION CEREMONY ────────────────────────────── */
.paragon-ceremony { text-align:center; padding:6px 0; }
.paragon-rank { font-size:28px; font-weight:800; color:var(--gold); letter-spacing:2px; margin-bottom:8px; text-shadow:0 0 16px rgba(200,162,48,.6); }
.paragon-lore { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:16px; font-style:italic; }
.paragon-gains { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.paragon-gain { background:rgba(200,162,48,.1); border:1px solid rgba(200,162,48,.25); border-radius:8px; padding:6px 14px; font-size:13px; color:var(--gold); }
.paragon-milestone { background:var(--bg2); border:1px solid var(--gold); border-radius:10px; padding:12px 16px; margin-bottom:18px; }
.paragon-ms-title { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); margin-bottom:4px; }
.paragon-ms-name { font-size:16px; font-weight:bold; color:var(--gold); margin-bottom:4px; }
.paragon-ms-desc { font-size:12px; color:var(--text2); line-height:1.4; }

/* ── UNIQUE COMPANION DISCOVERY ────────────────────────────── */
.unique-companion-hint { font-size:12px; background:rgba(200,162,48,.08); border:1px solid rgba(200,162,48,.22); border-radius:var(--radius); padding:8px 11px; margin-bottom:10px; color:var(--text2); line-height:1.5; }
.unique-companion-hint strong { color:var(--gold); }
.unique-waiting-badge { background:rgba(200,162,48,.18); border-color:rgba(200,162,48,.5); color:var(--gold); font-size:10px; }

/* ── DUNGEON ENTRANCE UNAVAILABLE FOLLOWER ──────────────────── */
.dungeon-fol-unavail { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg3); border-radius:var(--radius); opacity:0.55; cursor:not-allowed; }

/* ── PROFICIENCY SYSTEM ─────────────────────────────────────── */

/* Item detail badge */
.item-prof-badge { font-size:12px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:5px 9px; margin:6px 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.prof-blocked-badge { border-color:#c04040; background:rgba(192,64,64,.08); }
.item-prof-tier { font-weight:bold; font-size:11px; }
.prof-badge-warn { font-size:11px; color:#c04040; }
.item-prof-passive { width:100%; font-size:11px; color:var(--text2); margin-top:2px; font-style:italic; }

/* Shop card — proficiency lock indicator */
.shop-card-blocked { border-color: rgba(192,64,64,.4); opacity: 0.85; }
.shop-lock-badge { font-size: 10px; color: #c04040; letter-spacing: 0.5px; margin-bottom: 3px; }

/* Equip-blocked modal */
.prof-blocked-modal { text-align:center; padding:6px 0; }
.prof-blocked-icon { font-size:36px; margin-bottom:10px; }
.prof-blocked-msg { font-size:14px; color:var(--text); line-height:1.6; margin-bottom:8px; }
.prof-blocked-tip { font-size:12px; color:var(--text3); margin-bottom:0; }

/* Barracks Training tab */
.prof-training-tab { padding:4px 0; }
.prof-train-intro { font-size:12px; color:var(--text3); line-height:1.5; margin-bottom:12px; padding:0 2px; }
.prof-train-list { display:flex; flex-direction:column; gap:10px; }
.prof-train-row { display:flex; align-items:flex-start; gap:10px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
.prof-train-left { display:flex; align-items:center; gap:8px; min-width:130px; }
.prof-train-icon { font-size:20px; }
.prof-train-name { font-size:13px; font-weight:bold; color:var(--text); }
.prof-train-tier { font-size:11px; margin-top:2px; }
.prof-train-active-passive { font-size:10px; color:var(--text3); margin-top:3px; font-style:italic; max-width:120px; line-height:1.3; }
.prof-train-right { flex:1; display:flex; flex-direction:column; gap:5px; }
.prof-train-xp-row { display:flex; align-items:center; gap:6px; }
.prof-train-xp-bar { flex:1; height:4px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.prof-train-xp-fill { height:100%; background:var(--gold2); border-radius:2px; }
.prof-train-xp-label { font-size:10px; color:var(--text3); white-space:nowrap; }
.prof-train-cost-row { display:flex; flex-direction:column; gap:4px; }
.prof-train-cost { font-size:12px; font-weight:bold; }
.prof-train-cost.can-afford { color:var(--gold); }
.prof-train-cost.cant-afford { color:#c04040; }
.prof-train-next-passive { font-size:10px; color:var(--text3); font-style:italic; line-height:1.3; }
.prof-train-btn { align-self:flex-start; margin-top:2px; }
.prof-train-perm { font-size:11px; color:#c04040; }
.prof-train-max { font-size:11px; font-style:italic; line-height:1.4; }

/* Character screen proficiency summary */
.prof-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.prof-summary-chip { display:flex; align-items:center; gap:5px; background:var(--bg3); border-radius:6px; padding:5px 8px; font-size:11px; }
.prof-summary-chip > span:nth-child(2) { flex:1; color:var(--text2); }
.prof-chip-tier { font-weight:bold; font-size:10px; }
.prof-chip-blocked { opacity:0.5; }

/* Character screen identity panel — active title, race/class, backstory flavor */
.identity-header { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:8px; }
.identity-name { font-size:16px; font-weight:bold; color:var(--gold); }
.identity-tag { font-size:12px; color:var(--text3); }
.identity-section .npc-modal-dialogue { margin-bottom:8px; font-size:12px; }
.identity-backstory-grid { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.identity-backstory-card { background:var(--bg3); border-radius:var(--radius); padding:8px 10px; }
.identity-backstory-title { font-size:12px; font-weight:bold; color:var(--text); margin-bottom:3px; }
.identity-backstory-desc { font-size:11px; color:var(--text2); font-style:italic; line-height:1.5; }

/* ── ALIGNMENT SYSTEM ──────────────────────────────────────── */
.align-bar-wrap { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.align-label-dark { font-size:10px; color:#c04040; white-space:nowrap; }
.align-label-light { font-size:10px; color:var(--gold); white-space:nowrap; }
.align-bar-bg { position:relative; flex:1; height:10px; background:var(--bg3); border-radius:5px; overflow:visible; }
.align-bar-fill { height:100%; border-radius:5px; transition:width 0.5s; }
.align-bar-pip { position:absolute; top:-3px; width:4px; height:16px; background:#fff; border-radius:2px; transform:translateX(-50%); opacity:0.9; pointer-events:none; }
.align-status-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.align-badge { font-size:14px; font-weight:700; }
.align-val { font-size:12px; color:var(--text3); margin-left:auto; }
.align-desc { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:6px; font-style:italic; }
.align-bonus { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.align-bonus-chip { font-size:10px; border-radius:8px; padding:2px 7px; font-weight:bold; }
.light-chip { background:rgba(200,162,48,.15); color:var(--gold); border:1px solid rgba(200,162,48,.3); }
.dark-chip  { background:rgba(150,20,150,.15); color:#c060ff; border:1px solid rgba(100,0,120,.35); }
.align-faction-note { font-size:11px; color:var(--text3); margin-top:4px; }
.align-follower-effect { font-size:11px; color:#c8a080; line-height:1.4; margin:4px 0; padding:4px 8px; background:rgba(200,160,128,.08); border-left:2px solid rgba(200,160,128,.3); border-radius:2px; }
.align-synergy { font-size:11px; color:var(--text3); margin:4px 0; font-style:italic; }

/* ── FACTION REPUTATION ────────────────────────────────────── */
.faction-no-rep { font-size:12px; color:var(--text3); font-style:italic; }
.faction-rep-list { display:flex; flex-direction:column; gap:10px; }
.faction-rep-row { background:var(--bg3); border-radius:var(--radius); padding:8px 10px; }
.faction-rep-header { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.faction-rep-icon { font-size:16px; }
.faction-rep-name { font-size:12px; font-weight:bold; flex:1; }
.faction-rep-val { font-size:12px; font-weight:bold; }
.faction-rep-val.friendly { color:var(--gold); }
.faction-rep-val.hostile  { color:#c04040; }
.faction-rep-bar-bg { position:relative; height:6px; background:var(--bg2); border-radius:3px; overflow:visible; margin-bottom:5px; }
.faction-rep-bar-fill { height:100%; border-radius:3px; transition:width 0.4s; opacity:0.85; }
.faction-rep-pip { position:absolute; top:-3px; width:2px; height:12px; background:rgba(255,255,255,0.35); transform:translateX(-50%); }
.faction-tier-unlocked { font-size:11px; color:#40c060; line-height:1.4; }
.faction-tier-next     { font-size:10px; color:var(--text3); line-height:1.4; margin-top:2px; }
.faction-recruit-btn    { margin-top:6px; }
.faction-agent-recruited{ font-size:11px; color:var(--gold); margin-top:6px; }
.faction-rep-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.faction-rep-section-header h4 { margin:0; }

/* ── FACTION CODEX ─────────────────────────────────────────── */
.codex-intro { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:12px; }
.faction-codex-list { display:flex; flex-direction:column; gap:8px; }
.codex-faction-entry { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:0; overflow:hidden; }
.codex-faction-entry summary { display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; }
.codex-faction-entry summary::-webkit-details-marker { display:none; }
.codex-faction-icon { font-size:16px; }
.codex-faction-name { font-size:13px; font-weight:bold; flex:1; }
.codex-faction-rep { font-size:11px; font-weight:bold; color:var(--text3); }
.codex-faction-rep.friendly { color:var(--gold); }
.codex-faction-rep.hostile  { color:#c04040; }
.codex-faction-body { padding:0 12px 12px; border-top:1px solid var(--border); }
.codex-faction-desc { font-size:11px; color:var(--text2); font-style:italic; margin:8px 0; line-height:1.5; }
.codex-faction-meta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.codex-meta-chip { font-size:10px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:2px 7px; color:var(--text2); }
.codex-meta-chip.codex-rivals { color:#c04040; border-color:rgba(192,64,64,.3); }
.codex-ladder { display:flex; flex-direction:column; gap:6px; }
.codex-ladder-row { background:var(--bg2); border-radius:6px; padding:6px 8px; opacity:0.55; }
.codex-ladder-row.unlocked { opacity:1; border-left:2px solid #40c060; }
.codex-ladder-tier { display:block; font-size:11px; font-weight:bold; color:var(--text); margin-bottom:2px; }
.codex-ladder-desc { display:block; font-size:10px; color:var(--text3); line-height:1.4; }

/* ── QUEST / ENCOUNTER FACTION & ALIGNMENT BADGES ─────────────────────── */
/* Neutral by design — context chips, not decisions. Difficulty + reward
   colors are the ones that should draw the eye on a quest card. */
.quest-badge-row, .qb-badge-row { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 6px; }
.quest-faction-chip, .quest-align-chip { font-size:10px; border-radius:8px; padding:2px 7px; font-weight:bold; background:var(--bg3); border:1px solid var(--border); color:var(--text2); }

/* ── SHOP: FACTION-EXCLUSIVE ITEMS ─────────────────────────── */
.shop-exclusive-ribbon { font-size:10px; color:var(--gold); letter-spacing:0.3px; margin-bottom:3px; }
.price-discount-note { font-size:10px; color:#40c060; font-weight:normal; }

/* ── WORLD STATE CLEARED BADGE ─────────────────────────────── */
.rmap-card-cleared-badge { font-size:10px; background:rgba(64,192,96,.12); border:1px solid rgba(64,192,96,.3); color:#40c060; border-radius:6px; padding:1px 5px; margin-left:4px; }
.rmap-danger-badge { font-size:10px; border:1px solid; border-radius:6px; padding:1px 6px; background:rgba(0,0,0,0.25); letter-spacing:.02em; white-space:nowrap; }

/* ── DEV TOOLS PANEL ─────────────────────────────────────── */
.gm-dev-section {
  font-size:10px;
  letter-spacing:2px;
  color:var(--text3);
  border-top:1px solid rgba(184,115,51,0.20);
  padding-top:8px;
  margin:10px 0 5px;
  text-transform:uppercase;
}
.gm-dev-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:4px;
}
.gm-btn--dev {
  background:none;
  border:1px solid rgba(184,115,51,0.30);
  border-radius:4px;
  color:#b87333;
  font-family:inherit;
  font-size:11px;
  letter-spacing:0.8px;
  text-transform:uppercase;
  padding:7px 10px;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  width:100%;
  text-align:center;
}
.gm-btn--dev:hover {
  background:rgba(184,115,51,0.10);
  border-color:rgba(184,115,51,0.60);
  color:#d4944a;
}
.gm-btn--dev.active {
  background:rgba(180,40,40,0.15);
  border-color:rgba(210,80,80,0.60);
  color:#d06060;
}

/* ── TAVERN GAMES ─────────────────────────────────────────── */
.tg-screen { max-width:480px; margin:0 auto; }
.tg-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.tg-header h2 { flex:1; margin:0; font-size:1.3rem; color:var(--gold); }
.tg-round-badge { background:rgba(200,162,48,.15); border:1px solid rgba(200,162,48,.3); color:var(--gold); padding:3px 10px; border-radius:12px; font-size:12px; }
.tg-gold-badge { padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.tg-gold-badge.tg-pos { background:rgba(60,180,60,.15); color:#6fdf6f; border:1px solid rgba(60,180,60,.3); }
.tg-gold-badge.tg-neg { background:rgba(200,60,60,.15); color:#df6f6f; border:1px solid rgba(200,60,60,.3); }
.tg-prompt { text-align:center; color:var(--text2); margin:10px 0; }
.tg-result { text-align:center; margin:14px 0; font-size:1rem; font-weight:600; }
.tg-win  { color:#6fdf6f; }
.tg-loss { color:#df6f6f; }
.tg-tie  { color:var(--gold); }

/* Games intro tab */
.tavern-game-intro { padding:8px 0; }
.tavern-game-intro h4 { font-size:1.1rem; color:var(--gold); margin:0 0 6px; }
.tg-desc { color:var(--text1); margin:0 0 4px; font-size:0.9rem; }
.tg-rounds { color:var(--text2); font-size:0.8rem; margin:0 0 16px; }
.tg-bet-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tg-bet-btn { flex:1; min-width:56px; font-size:1rem; font-weight:700; padding:10px 4px; border:2px solid rgba(200,162,48,.4); background:rgba(200,162,48,.1); color:var(--gold); border-radius:8px; cursor:pointer; transition:all .15s; }
.tg-bet-btn:hover:not(:disabled) { background:rgba(200,162,48,.25); border-color:var(--gold); }
.tg-bet-btn:disabled { opacity:.4; cursor:not-allowed; }
.tg-gold-hint { color:var(--text2); font-size:0.82rem; margin:4px 0 0; }

/* Dragon Bones */
.bones-dice-row { display:flex; justify-content:center; gap:20px; margin:16px 0 20px; }
.bones-die { width:72px; height:72px; background:var(--bg2); border:2px solid rgba(200,162,48,.4); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2.8rem; line-height:1; color:var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.bones-die-hidden { color:rgba(200,162,48,.3); border-style:dashed; }
.bones-bet-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.bet-type-btn { padding:8px 16px; border:2px solid rgba(200,162,48,.3); background:rgba(200,162,48,.07); color:var(--text1); border-radius:8px; cursor:pointer; font-size:0.88rem; transition:all .15s; }
.bet-type-btn.active { border-color:var(--gold); background:rgba(200,162,48,.2); color:var(--gold); font-weight:700; }
.bet-type-btn:hover { border-color:rgba(200,162,48,.6); }

/* Runestones */
.rune-area { padding:6px 0; }
.rune-label { font-size:0.75rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px; margin:8px 0 4px; }
.rune-hand-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rune-stone { min-width:48px; height:64px; background:var(--bg2); border:2px solid rgba(200,162,48,.35); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; color:var(--gold); box-shadow:0 2px 6px rgba(0,0,0,.35); }
.rune-facedown { background:repeating-linear-gradient(135deg,var(--bg2) 0,var(--bg2) 4px,rgba(200,162,48,.08) 4px,rgba(200,162,48,.08) 8px); color:rgba(200,162,48,.3); }
.rune-sum { font-size:1rem; font-weight:700; margin-left:6px; color:var(--text1); }
.rune-sum.rune-bust { color:#df6f6f; }
.rune-sum.rune-21 { color:#6fdf6f; }
.rune-divider { border-top:1px solid rgba(200,162,48,.15); margin:12px 0 8px; }

/* Three Cups */
.cups-row { display:flex; justify-content:center; gap:28px; margin:20px 0 16px; }
.cup { display:flex; flex-direction:column; align-items:center; cursor:default; position:relative; }
.cup-body { width:64px; height:80px; background:linear-gradient(160deg,#5a3a1a,#3a2210); border:2px solid rgba(150,90,30,.6); border-radius:50% 50% 8px 8px / 40% 40% 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,.5); transition:transform .3s ease; }
.cup-pickable .cup-body { cursor:pointer; }
.cup-pickable:hover .cup-body { transform:translateY(-6px); border-color:rgba(200,162,48,.7); }
.cup-lifted .cup-body { transform:translateY(-36px); }
.cup-gem { font-size:1.6rem; margin-top:4px; }
.cup-empty { font-size:1.2rem; color:var(--text2); margin-top:8px; }
.cup-wrong .cup-body { border-color:rgba(220,60,60,.7); }

/* High Card */
.hc-card-display { display:flex; justify-content:center; margin:16px 0; }
.hc-card { width:90px; height:124px; background:#f5f0e8; border-radius:10px; border:2px solid #c8a060; display:grid; grid-template-rows:1fr auto 1fr; padding:6px; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.hc-card.hc-red { color:#c02020; }
.hc-card.hc-black { color:#1a1a2a; }
.hc-suit-tl { font-size:1rem; align-self:start; }
.hc-value { font-size:2rem; font-weight:900; text-align:center; line-height:1; }
.hc-suit-br { font-size:1rem; align-self:end; text-align:right; transform:rotate(180deg); display:block; }
.hc-guess-row { display:flex; gap:16px; justify-content:center; margin:10px 0 16px; }
.hc-chain-badge { text-align:center; padding:4px 14px; border-radius:14px; font-size:0.85rem; font-weight:700; margin-bottom:10px; background:rgba(200,162,48,.2); border:1px solid rgba(200,162,48,.5); color:var(--gold); }
.hc-chain-low { background:rgba(200,162,48,.1); border-color:rgba(200,162,48,.25); color:rgba(200,162,48,.7); }

.modal-placeholder { padding:20px; color:var(--text2); text-align:center; font-style:italic; }
.item-lore { font-style:italic; font-size:11px; color:var(--text3); padding:8px 0 4px; border-top:1px solid rgba(255,255,255,0.06); margin-top:8px; line-height:1.6; }