/* ===========================================================
   MALAKUT RISE — Play (game UI)
   Inherits tokens from /css/style.css. Adds game-specific layout.
   =========================================================== */

body.play {
  min-height: 100vh;
  display: grid;
  grid-template-areas: "top top" "rail main";
  grid-template-rows: 56px 1fr;
  grid-template-columns: 200px 1fr;
}

.play-topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: rgba(10,13,20,0.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.play-topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.play-topbar .brand-glyph { color: var(--oxblood-soft); }
.play-topbar .brand-text { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.06em; font-weight: 500; }

.play-currencies { display: flex; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; }
.cur {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 2px;
  background: rgba(15,19,29,0.6);
  font-family: var(--font-mono); font-size: 11px;
}
.cur-lbl { color: var(--ink-soft); letter-spacing: 0.08em; }
.cur-val { color: var(--ink); font-weight: 500; }

.play-player { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; }

.play-rail {
  grid-area: rail;
  border-right: 1px solid var(--line);
  padding: 24px 0;
  background: rgba(15,19,29,0.3);
  display: flex; flex-direction: column;
}
.rail-item {
  padding: 12px 24px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rail-item:hover { color: var(--ink); background: rgba(143,42,58,0.05); }
.rail-item.active { color: var(--ink); border-left-color: var(--oxblood-soft); background: rgba(143,42,58,0.08); }
.rail-item .mono { margin-right: 10px; color: var(--oxblood-soft); }

.play-main {
  grid-area: main;
  padding: 32px 40px;
  max-width: 1180px;
}

.loading { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; padding: 48px 0; }
.error { color: var(--oxblood-soft); font-family: var(--font-mono); padding: 24px; border: 1px solid var(--oxblood); border-radius: 3px; }

.screen-title { font-family: var(--font-display); font-size: 42px; font-weight: 400; margin: 0 0 4px; letter-spacing: 0.02em; }
.screen-sub { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; margin: 0 0 24px; letter-spacing: 0.08em; }

.mr-section { margin-bottom: 40px; }
.mr-section-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 400; margin: 0 0 16px;
}

/* ---------- Bastion ---------- */
.bastion-hero { padding: 32px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.bastion-hero .hero-eyebrow {
  display: flex; gap: 12px; align-items: center;
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 16px;
}
.bastion-hero .hero-eyebrow i { color: var(--oxblood-soft); font-style: normal; }
.bastion-hero .hero-title { font-family: var(--font-display); font-weight: 300; line-height: 0.95; font-size: clamp(48px, 8vw, 96px); margin: 0; }
.bastion-hero .hero-title.small { font-size: clamp(40px, 6vw, 72px); }
.bastion-hero .hero-blurb { color: var(--ink-soft); margin-top: 16px; max-width: 560px; }

.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.tile {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(15,19,29,0.4);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  display: block;
  overflow: hidden;
  min-height: 200px;
}
.tile:hover { border-color: var(--oxblood); background: rgba(143,42,58,0.05); transform: translateY(-2px); }
.tile-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 8px; position: relative; z-index: 2; }
.tile-sub { color: var(--ink-soft); font-size: 11px; letter-spacing: 0.06em; position: relative; z-index: 2; }

/* Painted tile = uses a tile_*.webp background */
.tile-painted { min-height: 280px; border-color: rgba(212,175,55,0.35); }
.tile-painted:hover { border-color: #d4af37; box-shadow: 0 0 16px rgba(212,175,55,0.25); }
.tile-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  z-index: 0;
  transition: transform 0.4s ease;
}
.tile-painted::after {
  /* gradient overlay so the title and sub remain readable on top of the painting */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,13,20,0.05) 0%, rgba(10,13,20,0.45) 60%, rgba(10,13,20,0.85) 100%);
  z-index: 1;
}
.tile-painted:hover .tile-bg { transform: scale(1.04); }
.tile-painted .tile-title { position: absolute; left: 24px; bottom: 36px; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.85); }
.tile-painted .tile-sub { position: absolute; left: 24px; bottom: 18px; margin: 0; color: rgba(237,232,218,0.85); text-shadow: 0 2px 8px rgba(0,0,0,0.85); }

.corner { position: absolute; width: 12px; height: 12px; border-color: var(--oxblood-soft); border-style: solid; border-width: 0; }
.corner-tl { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.corner-tr { top: 4px; right: 4px; border-top-width: 1px; border-right-width: 1px; }
.corner-bl { bottom: 4px; left: 4px; border-bottom-width: 1px; border-left-width: 1px; }
.corner-br { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Herald card ---------- */
.herald-card {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(15,19,29,0.5);
  padding: 12px 8px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.herald-card:hover { border-color: var(--oxblood-soft); transform: translateY(-2px); }
.herald-card.selected { border-color: var(--oxblood); background: rgba(143,42,58,0.1); }
.herald-card.rarity-common { border-color: #4a4a4a; }
.herald-card.rarity-rare { border-color: #5a7a9a; }
.herald-card.rarity-epic { border-color: #7a5a9a; }
.herald-card.rarity-legendary { border-color: var(--oxblood-soft); box-shadow: 0 0 12px rgba(196,74,90,0.15); }

.herald-portrait { display: block; margin: 0 auto 8px; }

.hc-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 1.2; min-height: 38px; }
.hc-meta { color: var(--ink-soft); font-size: 9px; letter-spacing: 0.12em; margin-top: 4px; }
.hc-level { color: var(--ink); font-size: 10px; letter-spacing: 0.08em; margin-top: 4px; }
.hc-stars { color: var(--oxblood-soft); font-size: 10px; letter-spacing: 0.1em; margin-top: 4px; }
.hc-sub { color: var(--ink-faint); font-size: 11px; margin-top: 6px; }

/* ---------- Vault ---------- */
.vault-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.filter-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { color: var(--ink); border-color: var(--oxblood-soft); }
.filter-btn.on { color: var(--ink); border-color: var(--oxblood); background: rgba(143,42,58,0.08); }
.filter-sep { color: var(--ink-faint); padding: 0 6px; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.empty { color: var(--ink-faint); font-family: var(--font-mono); padding: 48px; text-align: center; }

/* ---------- Summon ---------- */
.summon-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.summon-panel { border: 1px solid var(--line); padding: 20px; background: rgba(15,19,29,0.4); }
.summon-panel.shard-ancient { border-color: #5a7a9a; }
.summon-panel.shard-sacred { border-color: var(--oxblood-soft); }
.summon-panel.shard-primal { border-color: #7a5a9a; }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sp-name { font-family: var(--font-display); font-size: 20px; }
.sp-owned { color: var(--ink); font-size: 11px; letter-spacing: 0.08em; }
.sp-blurb { color: var(--ink-soft); font-size: 13px; font-style: italic; margin-bottom: 12px; }
.sp-rates { color: var(--ink-faint); font-size: 10px; letter-spacing: 0.06em; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-pull {
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); padding: 8px 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s;
}
.btn-pull:hover:not(:disabled) { background: var(--oxblood-soft); color: var(--ink); border-color: var(--oxblood-soft); }
.btn-pull:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,13,20,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  backdrop-filter: blur(8px);
}
.modal-box { background: var(--bg-2); border: 1px solid var(--line-2); padding: 32px; max-width: min(960px, 90vw); max-height: 90vh; overflow-y: auto; }

.modal-reveal { text-align: center; }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.reveal-card { padding: 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.5); }
.reveal-card.rarity-legendary { border-color: var(--oxblood-soft); animation: shimmer 1.5s ease-out; }
.reveal-card.rarity-epic { border-color: #7a5a9a; }
.reveal-card.rarity-rare { border-color: #5a7a9a; }
.rc-name { font-family: var(--font-display); font-size: 16px; margin-top: 8px; }
.rc-meta { color: var(--ink-soft); font-size: 9px; letter-spacing: 0.1em; }

@keyframes shimmer {
  0% { box-shadow: 0 0 0 rgba(196,74,90,0); }
  50% { box-shadow: 0 0 30px rgba(196,74,90,0.5); }
  100% { box-shadow: 0 0 12px rgba(196,74,90,0.15); }
}

.btn-primary {
  display: inline-block;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); padding: 10px 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.btn-primary:hover { background: var(--oxblood-soft); color: var(--ink); border-color: var(--oxblood-soft); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-text { background: transparent; color: var(--ink-soft); border: none; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-decoration: underline; }
.btn-text:hover { color: var(--ink); }

/* ---------- Forge ---------- */
.forge-layout { display: grid; grid-template-columns: 360px 1fr; gap: 32px; }
.forge-grp { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.16em; margin: 20px 0 8px; text-transform: uppercase; }
.gear-tile {
  border: 1px solid var(--line);
  background: rgba(15,19,29,0.4);
  padding: 12px;
  margin-bottom: 8px;
}
.gear-tile.rarity-epic { border-color: #7a5a9a; }
.gear-tile.rarity-legendary { border-color: var(--oxblood-soft); }
.gt-row { display: flex; justify-content: space-between; align-items: baseline; }
.gt-slot { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.12em; }
.gt-set { font-family: var(--font-display); font-size: 14px; }
.gt-rar { color: var(--oxblood-soft); font-size: 10px; }
.gt-main { margin: 8px 0 4px; font-family: var(--font-display); font-size: 22px; }
.gt-main span { color: var(--ink-soft); font-size: 11px; margin-left: 8px; }
.gt-subs { color: var(--ink-soft); font-size: 10px; }
.gt-owner { color: var(--ink-faint); font-size: 10px; margin-top: 6px; }
.gt-actions { margin-top: 8px; display: flex; gap: 6px; }
.gt-actions button {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 4px 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; cursor: pointer;
}
.gt-actions button:hover { color: var(--ink); border-color: var(--oxblood-soft); }
.forge-detail h2 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.forge-detail h4 { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.16em; text-transform: uppercase; margin: 16px 0 8px; }
.gd-main { font-family: var(--font-display); font-size: 36px; margin: 12px 0; }
.gd-main b { color: var(--oxblood-soft); }
.gd-subs > div { color: var(--ink); padding: 4px 0; font-family: var(--font-mono); font-size: 13px; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }

/* ---------- Campaign ---------- */
.chapter-block { margin-bottom: 32px; }
.chapter-block.locked { opacity: 0.4; }
.chapter-block h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 12px; font-weight: 400; }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.stage-tile {
  background: rgba(15,19,29,0.4); border: 1px solid var(--line);
  padding: 14px 10px; cursor: pointer; transition: all 0.15s;
  font-family: var(--font-mono); color: var(--ink-soft); text-align: center;
}
.stage-tile:hover:not(:disabled) { border-color: var(--oxblood-soft); color: var(--ink); }
.stage-tile.boss { border-color: var(--oxblood); }
.stage-tile.cleared { background: rgba(143,42,58,0.06); }
.stage-tile:disabled { cursor: not-allowed; opacity: 0.4; }
.st-idx { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.st-stars { color: var(--oxblood-soft); font-size: 12px; margin-top: 6px; }
.st-cost { font-size: 10px; margin-top: 4px; color: var(--steel); }

.modal-team h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; }
.team-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; }
.ts-slot { min-height: 160px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; }
.ts-empty { color: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }
.team-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; padding: 8px; border: 1px solid var(--line); margin: 0 0 16px; }

/* ---------- Battle ---------- */
.arena {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, rgba(143,42,58,0.06), rgba(122,150,175,0.04));
  border: 1px solid var(--line);
  margin: 20px 0;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 360px;
}
.arena-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.unit-slot {
  position: relative; width: 110px; padding: 8px;
  background: rgba(15,19,29,0.6); border: 1px solid var(--line);
  text-align: center; transition: border-color 0.2s, opacity 0.3s;
}
.unit-slot.rarity-legendary { border-color: var(--oxblood-soft); }
.unit-slot.rarity-epic { border-color: #7a5a9a; }
.unit-slot.dead { opacity: 0.25; filter: grayscale(1); }
.us-name { font-family: var(--font-display); font-size: 12px; line-height: 1.1; margin-top: 4px; min-height: 28px; }
.us-hpbar { width: 100%; height: 6px; background: var(--bg-3); margin-top: 6px; overflow: hidden; }
.us-hpfill { height: 100%; background: linear-gradient(90deg, var(--oxblood-soft), #d4a87a); transition: width 0.4s ease-out; }
.us-hp { font-family: var(--font-mono); font-size: 9px; color: var(--ink-soft); margin-top: 2px; }
.us-statuses { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 4px; min-height: 14px; }
.stat-chip { font-family: var(--font-mono); font-size: 7px; padding: 1px 3px; background: var(--bg-3); border: 1px solid var(--line); color: var(--steel-soft); }

.fx-hit { animation: hitFlash 0.3s; }
.fx-crit { animation: critFlash 0.4s; }
.fx-heal { animation: healFlash 0.3s; }
.fx-revive { animation: healFlash 0.6s; }
.fx-block, .fx-tm { animation: hitFlash 0.3s; }
@keyframes hitFlash { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); background: rgba(143,42,58,0.3); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@keyframes critFlash { 0% { box-shadow: 0 0 0 rgba(196,74,90,0); } 50% { box-shadow: 0 0 24px rgba(196,74,90,0.8); transform: scale(1.05); } 100% { box-shadow: none; transform: scale(1); } }
@keyframes healFlash { 0% { box-shadow: 0 0 0 rgba(122,150,175,0); } 50% { box-shadow: 0 0 20px rgba(170,192,212,0.6); } 100% { box-shadow: none; } }

.float-text {
  position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
  pointer-events: none; animation: floatUp 0.9s ease-out forwards;
  font-size: 18px;
}
.float-text.fx-crit { color: var(--oxblood-soft); font-size: 24px; }
.float-text.fx-heal { color: var(--steel-soft); }
.float-text.fx-block { color: var(--steel-soft); font-size: 14px; letter-spacing: 0.16em; }
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -40px); } }

.battle-log {
  max-height: 180px; overflow-y: auto; padding: 12px;
  background: rgba(15,19,29,0.6); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
}
.log-line { padding: 2px 0; color: var(--ink-soft); }
.log-line.side-0 { color: var(--steel-soft); }
.log-line.side-1 { color: var(--oxblood-soft); }

.battle-controls { display: flex; gap: 12px; margin-top: 16px; align-items: center; }

.outcome-card { margin: 24px 0; padding: 32px; border: 1px solid var(--line); background: rgba(15,19,29,0.6); text-align: center; }
.outcome-card.win { border-color: var(--oxblood-soft); }
.outcome-card.lose { border-color: var(--steel-dim); }
.outcome-card h2 { font-family: var(--font-display); font-size: 42px; margin: 0 0 16px; font-weight: 400; }
.outcome-drops { list-style: none; padding: 0; margin: 0 0 24px; color: var(--ink); font-size: 13px; }
.outcome-drops li { padding: 4px 0; }

/* ---------- Herald detail ---------- */
.herald-detail-head { display: grid; grid-template-columns: 180px 1fr; gap: 24px; margin-bottom: 24px; align-items: start; }
.hd-name { font-family: var(--font-display); font-size: 40px; margin: 0 0 4px; font-weight: 400; }
.hd-meta { color: var(--ink-soft); font-size: 11px; letter-spacing: 0.12em; margin-bottom: 12px; }
.hd-lore { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); font-size: 17px; max-width: 600px; }
.hd-section { font-family: var(--font-display); font-size: 22px; margin: 24px 0 12px; font-weight: 400; }
.hd-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }

.stat-block {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 12px; background: rgba(15,19,29,0.5); border: 1px solid var(--line);
  margin: 12px 0;
}
.stat-line { display: flex; justify-content: space-between; padding: 4px 8px; }
.stat-line .mono { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.12em; }
.stat-line b { color: var(--ink); }

.abil-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.abil { border: 1px solid var(--line); padding: 14px; background: rgba(15,19,29,0.5); }
.abil-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 4px; }
.abil-head b { color: var(--oxblood-soft); }
.abil-name { font-family: var(--font-display); font-size: 18px; margin: 4px 0; }
.abil-detail { color: var(--ink-soft); font-size: 11px; }

/* ---------- Settings ---------- */
.settings-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin-bottom: 32px; }
.settings-form input { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); padding: 10px 14px; font-family: var(--font-body); font-size: 14px; }
.settings-form label { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.settings-info { color: var(--ink-soft); font-size: 12px; }
.settings-info a { color: var(--steel-soft); }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-2); border: 1px solid var(--oxblood-soft); color: var(--ink);
  padding: 10px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  opacity: 1; transition: opacity 0.5s, transform 0.5s;
}
.toast.error { border-color: var(--oxblood); }
.toast.ok { border-color: var(--steel); }
.toast.fade { opacity: 0; transform: translateX(20px); }

@media (max-width: 820px) {
  body.play { grid-template-columns: 0 1fr; }
  .play-rail { display: none; }
  .play-main { padding: 16px; }
  .forge-layout { grid-template-columns: 1fr; }
  .herald-detail-head { grid-template-columns: 1fr; }
  .stat-block { grid-template-columns: repeat(2, 1fr); }
  .team-slots { grid-template-columns: repeat(5, 1fr); }
}

.mono { font-family: var(--font-mono); }

/* ---------- Scene backgrounds ---------- */
/* Each route gets an optional painted background via data-scene attribute on <body>.
   The image is requested at /play/images/scenes/<scene>.webp. If missing, the bg
   simply falls through to the page gradient. */
body.play::after {
  content: '';
  position: fixed;
  inset: -2%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Slow ken-burns zoom + drift — gives every painting a sense of life */
  animation: ken-burns 60s ease-in-out infinite alternate;
  transform-origin: center center;
}
body.play[data-scene]::after { opacity: 0.75; }
@keyframes ken-burns {
  0%   { transform: scale(1.02) translate(0%, 0%); }
  50%  { transform: scale(1.06) translate(-1.5%, -1%); }
  100% { transform: scale(1.03) translate(1%, 1.5%); }
}

/* ---------- Atmospheric overlays ---------- */
/* A drifting mist layer over every painted scene. Faint enough that it
   doesn't fight the art, but enough to make the background feel alive. */
body.play[data-scene]::before {
  /* keep the readability vignette but also add a moving mist */
  background:
    linear-gradient(180deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.10) 25%, rgba(10,13,20,0.50) 100%),
    linear-gradient(90deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.05) 35%, rgba(10,13,20,0.05) 65%, rgba(10,13,20,0.55) 100%);
}

/* Per-scene atmospheric flourishes — a fixed overlay element added by JS */
.scene-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.scene-fx.on { opacity: 1; }

.fx-mist {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400'><defs><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.42 0'/></filter></defs><rect width='1200' height='400' filter='url(%23n)'/></svg>");
  background-size: 220% 90%;
  background-repeat: repeat;
  animation: fx-mist-drift 50s linear infinite;
  opacity: 0.85;
}
@keyframes fx-mist-drift {
  0%   { background-position: 0% 30%; }
  100% { background-position: 220% 60%; }
}

.fx-emberglow {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(196,74,90,0.65), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(212,168,122,0.55), transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(255,140,60,0.45), transparent 60%);
  animation: fx-emberpulse 3.2s ease-in-out infinite alternate;
}
@keyframes fx-emberpulse {
  0%   { opacity: 0.75; filter: brightness(1.0); }
  100% { opacity: 1.0;  filter: brightness(1.35); }
}

.fx-watershimmer {
  background:
    linear-gradient(90deg, transparent 0%, rgba(170,192,212,0.45) 30%, transparent 60%),
    linear-gradient(90deg, transparent 20%, rgba(202,220,238,0.35) 50%, transparent 80%),
    linear-gradient(0deg,  rgba(122,150,175,0.20), transparent 40%);
  background-size: 200% 100%, 240% 100%, 100% 100%;
  animation: fx-watershimmer-pan 8s linear infinite, fx-watershimmer-pan2 13s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.9;
}
@keyframes fx-watershimmer-pan  { from { background-position: -100% 0, 0 0, 0 0; } to { background-position: 100% 0, 0 0, 0 0; } }
@keyframes fx-watershimmer-pan2 { from { background-position: 0 0, -120% 0, 0 0; } to { background-position: 0 0,  120% 0, 0 0; } }

.fx-lightning {
  background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.0), transparent 60%);
  animation: fx-lightning-flash 10s steps(1) infinite;
}
@keyframes fx-lightning-flash {
  0%, 28%, 100%        { background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.0), transparent 60%); }
  29%, 30%             { background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.95), transparent 70%), radial-gradient(ellipse at 40% 5%, rgba(255,247,208,0.7), transparent 80%); }
  31%                  { background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.0), transparent 60%); }
  32%, 33%             { background: radial-gradient(ellipse at 40% 15%, rgba(255,247,208,0.85), transparent 75%); }
  34%, 72%             { background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.0), transparent 60%); }
  73%, 74%             { background: radial-gradient(ellipse at 55% 18%, rgba(255,247,208,0.90), transparent 70%); }
  75%, 76%             { background: radial-gradient(ellipse at 50% 20%, rgba(255,247,208,0.0), transparent 60%); }
}

.fx-torch {
  background:
    radial-gradient(circle at 8% 65%, rgba(255,168,80,0.60), transparent 22%),
    radial-gradient(circle at 92% 65%, rgba(255,168,80,0.60), transparent 22%),
    radial-gradient(circle at 50% 95%, rgba(212,168,122,0.30), transparent 35%);
  animation: fx-torch-flicker 0.35s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes fx-torch-flicker {
  0%   { opacity: 0.6; filter: brightness(0.9); }
  50%  { opacity: 0.95; filter: brightness(1.15); }
  100% { opacity: 0.75; filter: brightness(1.0); }
}

.fx-snow {
  background-image:
    radial-gradient(circle, #fff 1.5px, transparent 2px),
    radial-gradient(circle, #fff 2px, transparent 2.5px),
    radial-gradient(circle, #fff 1px, transparent 1.5px);
  background-size: 60px 60px, 120px 120px, 40px 40px;
  background-position: 0 0, 30px 30px, 15px 15px;
  animation: fx-snow-fall 14s linear infinite;
  opacity: 0.85;
}
@keyframes fx-snow-fall {
  from { background-position: 0 -60px, 30px -120px, 15px -40px; }
  to   { background-position: 0 100vh,  30px 100vh,   15px 100vh; }
}

/* New: god-rays / light shafts for the Empyrean & ascending scenes */
.fx-godrays {
  background:
    linear-gradient(170deg, transparent 35%, rgba(255,237,178,0.18) 45%, transparent 55%),
    linear-gradient(190deg, transparent 30%, rgba(255,237,178,0.14) 42%, transparent 56%),
    linear-gradient(180deg, transparent 40%, rgba(255,247,208,0.22) 50%, transparent 60%);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  animation: fx-godrays-pulse 4s ease-in-out infinite alternate;
  opacity: 0.85;
}
@keyframes fx-godrays-pulse {
  0%   { opacity: 0.55; transform: translateY(-2%); }
  100% { opacity: 0.95; transform: translateY(2%); }
}

/* New: heatwave shimmer for fire / forge scenes */
.fx-heatwave {
  backdrop-filter: blur(0.6px);
  animation: fx-heatwave-shift 0.5s steps(2) infinite;
}
@keyframes fx-heatwave-shift {
  0%, 50%, 100% { transform: translateY(0) translateX(0); }
  25%           { transform: translateY(0.5px) translateX(0.5px); }
  75%           { transform: translateY(-0.5px) translateX(-0.5px); }
}

/* New: golden particle aura behind Empyrean tier headlines */
@keyframes fx-aura-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(212,175,55,0.30), inset 0 0 18px rgba(212,175,55,0.10); }
  50%      { box-shadow: 0 0 48px rgba(212,175,55,0.65), inset 0 0 28px rgba(212,175,55,0.22); }
}

/* Hero title — gentle banner sway */
.hero-title {
  animation: fx-banner-sway 7s ease-in-out infinite alternate;
  transform-origin: center top;
}
@keyframes fx-banner-sway {
  0%   { transform: rotate(-0.3deg) translateY(0); }
  100% { transform: rotate(0.3deg)  translateY(-2px); }
}

/* Bastion tiles — gentle float on hover, and a slow ambient lift */
.tile { animation: fx-tile-float 6s ease-in-out infinite alternate; }
.tile-painted { animation-delay: -3s; }
@keyframes fx-tile-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
.tile:hover { animation: none; transform: translateY(-6px); }

/* Rarity pulse on Empyrean / Legendary herald cards */
.herald-card.rarity-empyrean { animation: empyglow 4s ease-in-out infinite, fx-tile-float 5s ease-in-out infinite alternate; }
.herald-card.rarity-legendary {
  animation: fx-leg-pulse 5s ease-in-out infinite alternate;
}
@keyframes fx-leg-pulse {
  0%   { box-shadow: 0 0 0 rgba(196,74,90,0.0); }
  100% { box-shadow: 0 0 14px rgba(196,74,90,0.35); }
}

/* Hover lift on every herald card */
.herald-card { transition: transform 0.18s ease, border-color 0.15s, background 0.15s, box-shadow 0.3s; }
.herald-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 4px 18px rgba(0,0,0,0.5); }

/* Float on currency tiles in topbar */
.cur { animation: fx-cur-pulse 4s ease-in-out infinite alternate; }
@keyframes fx-cur-pulse {
  0%   { background: rgba(15,19,29,0.6); }
  100% { background: rgba(15,19,29,0.75); }
}

/* Battle outcome — winning text glow pulse */
.outcome-card.win h2 {
  animation: fx-win-glow 1.6s ease-in-out infinite alternate;
}
@keyframes fx-win-glow {
  0%   { text-shadow: 0 0 8px rgba(212,175,55,0.4); color: var(--ink); }
  100% { text-shadow: 0 0 28px rgba(212,175,55,0.95), 0 0 4px rgba(255,255,255,0.7); color: #fff8d8; }
}
/* Readability vignette over painted backgrounds */
body.play[data-scene]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.10) 25%, rgba(10,13,20,0.50) 100%),
    linear-gradient(90deg, rgba(10,13,20,0.55) 0%, rgba(10,13,20,0.05) 35%, rgba(10,13,20,0.05) 65%, rgba(10,13,20,0.55) 100%);
}
body.play[data-scene="bastion"]::after { background-image: url('/play/images/scenes/bastion.webp'); }
body.play[data-scene="vault"]::after { background-image: url('/play/images/scenes/vault.webp'); }
body.play[data-scene="summon"]::after { background-image: url('/play/images/scenes/summon.webp'); }
body.play[data-scene="forge"]::after { background-image: url('/play/images/scenes/forge.webp'); }
body.play[data-scene="campaign"]::after { background-image: url('/play/images/scenes/campaign.webp'); }
body.play[data-scene="keeps"]::after { background-image: url('/play/images/scenes/keeps.webp'); }
body.play[data-scene="arena"]::after { background-image: url('/play/images/scenes/arena.webp'); }
body.play[data-scene="halqa"]::after { background-image: url('/play/images/scenes/halqa.webp'); }
body.play[data-scene="watcher"]::after { background-image: url('/play/images/scenes/watcher.webp'); }
body.play[data-scene="spire"]::after { background-image: url('/play/images/scenes/spire.webp'); }
body.play[data-scene="choir-trials"]::after { background-image: url('/play/images/scenes/choir-trials.webp'); }
body.play[data-scene="quests"]::after { background-image: url('/play/images/scenes/quests.webp'); }
body.play[data-scene="shop"]::after { background-image: url('/play/images/scenes/shop.webp'); }
body.play[data-scene="mail"]::after { background-image: url('/play/images/scenes/mail.webp'); }
body.play[data-scene="fusion"]::after { background-image: url('/play/images/scenes/fusion.webp'); }
body.play[data-scene="friends"]::after { background-image: url('/play/images/scenes/friends.webp'); }
body.play[data-scene="codex"]::after { background-image: url('/play/images/scenes/codex.webp'); }
body.play[data-scene="empyrean"]::after { background-image: url('/play/images/scenes/empyrean.webp'); }
body.play[data-scene="battle"]::after { background-image: url('/play/images/scenes/battle.webp'); }
/* Per-chapter campaign backgrounds */
body.play[data-scene="campaign-1"]::after  { background-image: url('/play/images/scenes/campaign-1.webp'); }
body.play[data-scene="campaign-2"]::after  { background-image: url('/play/images/scenes/campaign-2.webp'); }
body.play[data-scene="campaign-3"]::after  { background-image: url('/play/images/scenes/campaign-3.webp'); }
body.play[data-scene="campaign-4"]::after  { background-image: url('/play/images/scenes/campaign-4.webp'); }
body.play[data-scene="campaign-5"]::after  { background-image: url('/play/images/scenes/campaign-5.webp'); }
body.play[data-scene="campaign-6"]::after  { background-image: url('/play/images/scenes/campaign-6.webp'); }
body.play[data-scene="campaign-7"]::after  { background-image: url('/play/images/scenes/campaign-7.webp'); }
body.play[data-scene="campaign-8"]::after  { background-image: url('/play/images/scenes/campaign-8.webp'); }
body.play[data-scene="campaign-9"]::after  { background-image: url('/play/images/scenes/campaign-9.webp'); }
body.play[data-scene="campaign-10"]::after { background-image: url('/play/images/scenes/campaign-10.webp'); }
body.play[data-scene="campaign-11"]::after { background-image: url('/play/images/scenes/campaign-11.webp'); }
body.play[data-scene="campaign-12"]::after { background-image: url('/play/images/scenes/campaign-12.webp'); }
/* Per-keep backgrounds */
body.play[data-scene="keep-embers"]::after     { background-image: url('/play/images/scenes/keep-embers.webp'); }
body.play[data-scene="keep-hollow"]::after     { background-image: url('/play/images/scenes/keep-hollow.webp'); }
body.play[data-scene="keep-dragon"]::after     { background-image: url('/play/images/scenes/keep-dragon.webp'); }
body.play[data-scene="keep-ice"]::after        { background-image: url('/play/images/scenes/keep-ice.webp'); }
body.play[data-scene="keep-minotaur"]::after   { background-image: url('/play/images/scenes/keep-minotaur.webp'); }
body.play[data-scene="keep-forge_pass"]::after { background-image: url('/play/images/scenes/keep-forge_pass.webp'); }

/* ---------- Parallax layers in bastion hero ---------- */
.bastion-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bl {
  position: absolute;
  inset: -10% -10%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.bl-1 {
  background: radial-gradient(ellipse at 70% 60%, rgba(143,42,58,0.28), transparent 55%);
}
.bl-2 {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(212,168,122,0.18), transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(122,150,175,0.16), transparent 50%);
}
.bl-3 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240' fill='none' stroke='%23ede8da' stroke-width='0.4' opacity='0.10'><g><polygon points='100,40 130,40 130,90 100,90'/><polygon points='160,50 200,50 200,90 160,90'/><polygon points='230,30 270,30 270,90 230,90'/><polygon points='300,40 350,40 350,90 300,90'/><polygon points='380,50 420,50 420,90 380,90'/><polygon points='450,40 495,40 495,90 450,90'/><polygon points='520,50 560,50 560,90 520,90'/><line x1='100' y1='90' x2='560' y2='90'/><line x1='100' y1='105' x2='560' y2='105'/></g></svg>");
  background-size: 800px auto;
  background-repeat: no-repeat;
  background-position: center 70%;
  opacity: 0.5;
}
.bastion-hero > *:not(.bastion-layers) { position: relative; z-index: 1; }
.hero-eyebrow, .hero-title, .hero-blurb { transition: transform 0.12s ease-out; will-change: transform; }

/* ---------- Difficulty bar ---------- */
.difficulty-bar { display: flex; gap: 8px; margin-bottom: 20px; }

/* ---------- Hd actions / priority ---------- */
.hd-actions { display: flex; gap: 12px; margin: 16px 0; align-items: center; flex-wrap: wrap; }
.priority-list { margin: 12px 0 20px; display: flex; flex-direction: column; gap: 6px; max-width: 540px; }
.priority-row { display: grid; grid-template-columns: 32px 1fr 70px; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(15,19,29,0.5); border: 1px solid var(--line); }
.pr-rank { color: var(--oxblood-soft); font-weight: 600; font-size: 14px; }
.pr-name { font-family: var(--font-display); font-size: 16px; }
.pr-meta { color: var(--ink-soft); font-size: 10px; }
.pr-arrows button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 4px 8px; font-family: var(--font-mono); cursor: pointer; }
.pr-arrows button:hover { color: var(--ink); border-color: var(--oxblood-soft); }

/* ---------- Keeps ---------- */
.keeps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.keep-card { padding: 20px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); }
.keep-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; }
.keep-blurb { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); margin: 4px 0 12px; }
.keep-meta { color: var(--ink-soft); font-size: 10px; padding: 2px 0; letter-spacing: 0.08em; }
.keep-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tier-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 12px; font-family: var(--font-mono); cursor: pointer; transition: all 0.15s; }
.tier-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--oxblood-soft); }
.tier-btn.locked { opacity: 0.4; cursor: not-allowed; }

/* ---------- Arena ---------- */
.arena-summary { display: flex; gap: 16px; align-items: center; padding: 12px 16px; background: rgba(15,19,29,0.4); border: 1px solid var(--line); margin-bottom: 20px; }
.arena-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.arena-opp { padding: 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); }
.ao-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ao-head h4 { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: 18px; }
.ao-team { display: flex; gap: 4px; margin-bottom: 12px; }

/* ---------- Halqa ---------- */
.halqa-create { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.halqa-create input, .halqa-create select { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); padding: 8px 12px; font-family: var(--font-body); }
.halqa-motto { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); font-size: 18px; }
.halqa-members { margin: 16px 0 20px; }
.halqa-member { display: flex; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.hm-role { color: var(--oxblood-soft); font-size: 10px; min-width: 70px; letter-spacing: 0.1em; }

/* ---------- Watcher ---------- */
.watcher-bar { position: relative; height: 32px; background: var(--bg-3); border: 1px solid var(--line); margin: 16px 0 8px; overflow: hidden; }
.wb-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--oxblood), var(--oxblood-soft)); transition: width 0.4s; }
.wb-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 500; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.watcher-meta { color: var(--ink-soft); margin-bottom: 16px; }
.leaderboard { margin-top: 12px; }
.lb-row { display: flex; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--line); }

/* ---------- Spire ---------- */
.spire-mode { padding: 20px; border: 1px solid var(--line); margin-bottom: 16px; background: rgba(15,19,29,0.4); }
.spire-mode h2 { font-family: var(--font-display); font-weight: 400; margin: 0 0 8px; }
.spire-affix { margin: 12px 0; padding: 12px; background: rgba(143,42,58,0.06); border-left: 2px solid var(--oxblood-soft); }
.spire-affix span.mono { color: var(--oxblood-soft); margin-right: 8px; font-size: 10px; letter-spacing: 0.16em; }

/* ---------- Quests ---------- */
.quest-section { margin-bottom: 24px; }
.quest-section h3 { font-family: var(--font-display); font-weight: 400; margin: 0 0 12px; font-size: 22px; }
.quest-row { display: grid; grid-template-columns: 1fr 280px 100px; gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); margin-bottom: 6px; background: rgba(15,19,29,0.4); }
.quest-row.ready { border-color: var(--oxblood-soft); }
.q-label { font-family: var(--font-display); font-size: 16px; }
.q-progress { color: var(--ink-soft); font-size: 11px; }
.quest-row button { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; cursor: pointer; }
.quest-row button:disabled { opacity: 0.4; background: transparent; color: var(--ink-soft); }

/* ---------- Shop ---------- */
.login-calendar { padding: 20px; border: 1px solid var(--line); margin-bottom: 32px; background: rgba(15,19,29,0.4); }
.login-calendar h3 { font-family: var(--font-display); font-weight: 400; margin: 0 0 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.cal-day { padding: 10px; border: 1px solid var(--line); background: rgba(15,19,29,0.6); text-align: center; }
.cal-day.done { opacity: 0.5; }
.cal-day.today { border-color: var(--oxblood-soft); background: rgba(143,42,58,0.1); }
.cd-num { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.16em; }
.cd-label { font-size: 12px; margin-top: 4px; }
.sku-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sku-card { padding: 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); display: flex; flex-direction: column; }
.sku-card h4 { font-family: var(--font-display); font-weight: 400; margin: 0 0 8px; }
.sku-grant { color: var(--ink-soft); font-size: 11px; margin-bottom: 12px; min-height: 24px; }
.sku-card .btn-primary { margin-top: auto; }

/* ---------- Mail ---------- */
.mail-list { margin-top: 16px; }
.mail-row { padding: 14px 16px; border: 1px solid var(--line); margin-bottom: 8px; background: rgba(15,19,29,0.4); }
.mail-row.claimed { opacity: 0.5; }
.m-subj { font-family: var(--font-display); font-size: 18px; margin-bottom: 4px; }
.m-body { color: var(--ink-soft); margin-bottom: 8px; }
.m-grant { color: var(--oxblood-soft); margin-bottom: 8px; }
.mail-row button { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); padding: 6px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; cursor: pointer; }

/* ---------- Choir Trials ---------- */
.choir-trials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ct-card { padding: 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); }
.ct-card h3 { font-family: var(--font-display); font-weight: 400; margin: 0 0 8px; letter-spacing: 0.06em; }
.ct-card.choir-trumpet h3 { color: #d4a87a; }
.ct-card.choir-rains h3 { color: var(--steel-soft); }
.ct-card.choir-word h3 { color: #c4a4d4; }
.ct-card.choir-veil h3 { color: #a4a4d4; }
.ct-card.choir-scribes h3 { color: #e4d4a4; }
.ct-card.choir-wardens h3 { color: var(--oxblood-soft); }
.ct-progress { color: var(--ink-soft); font-size: 11px; }
.ct-bar { width: 100%; height: 4px; background: var(--bg-3); margin: 8px 0; overflow: hidden; }
.ct-fill { height: 100%; background: var(--oxblood-soft); transition: width 0.3s; }
.ct-meta { color: var(--ink-faint); font-size: 10px; margin-bottom: 8px; }
.ct-done { color: var(--oxblood-soft); }

/* ---------- Cosmetics ---------- */
.cosmetic-section { margin-bottom: 16px; }
.cosmetic-section h4 { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.16em; text-transform: uppercase; margin: 12px 0 8px; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.cosmetic-card { padding: 12px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); text-align: center; }
.cosmetic-card.owned { border-color: var(--oxblood-soft); }
.cc-label { font-family: var(--font-display); font-size: 14px; margin-bottom: 4px; }
.cc-cost { color: var(--ink-soft); font-size: 10px; margin-bottom: 8px; }
.cosmetic-card button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 4px 12px; font-family: var(--font-mono); font-size: 10px; cursor: pointer; }
.cosmetic-card button:hover { color: var(--ink); border-color: var(--oxblood-soft); }

.hd-awaken-row { padding: 8px 0; color: var(--ink-soft); }
.hd-awaken-row b { color: var(--oxblood-soft); }
.herald-portrait-img { object-fit: cover; }

/* ---------- Fusion ---------- */
.fusion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.fusion-card { padding: 20px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); }
.fusion-card.ready { border-color: var(--oxblood-soft); }
.fusion-card h2 { font-family: var(--font-display); font-weight: 400; margin: 0 0 4px; }
.fusion-target { color: var(--oxblood-soft); margin-bottom: 12px; }
.fusion-reqs { list-style: none; padding: 0; margin: 0 0 16px; }
.fusion-reqs li { padding: 4px 0; color: var(--ink-soft); font-size: 13px; }
.fusion-reqs li.have { color: var(--ink); }
.fusion-reqs li.miss { color: var(--ink-faint); }

/* ---------- Friends ---------- */
.friends-list { margin-top: 16px; }
.friend-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); margin-bottom: 6px; }
.fr-info { font-family: var(--font-display); font-size: 16px; }
.fr-info .mono { color: var(--ink-soft); font-size: 11px; margin-left: 8px; }
.fr-actions button { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; cursor: pointer; margin-left: 4px; }
.fr-actions button:hover:not(:disabled) { color: var(--ink); border-color: var(--oxblood-soft); }
.fr-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Manual battle ---------- */
.manual-controls { display: block; padding: 16px; border: 1px solid var(--line); background: rgba(15,19,29,0.4); margin-top: 16px; }
.mc-head { font-family: var(--font-display); font-size: 18px; margin-bottom: 12px; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mc-ability { background: rgba(15,19,29,0.6); border: 1px solid var(--line); padding: 12px; cursor: pointer; text-align: left; color: var(--ink); transition: all 0.15s; }
.mc-ability:hover { border-color: var(--oxblood-soft); background: rgba(143,42,58,0.06); }
.mc-name { font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.mc-meta { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.08em; }

.mc-target { display: inline-flex; flex-direction: column; align-items: center; padding: 12px; background: rgba(15,19,29,0.6); border: 1px solid var(--line); cursor: pointer; margin: 4px; }
.mc-target:hover { border-color: var(--oxblood-soft); }

.modal-mode button { margin: 8px 4px; }

/* ---------- Codex ---------- */
.codex-list { max-width: 760px; margin: 0 auto; }
.codex-entry {
  border-left: 2px solid var(--oxblood-soft);
  padding: 0 0 0 24px;
  margin: 0 0 32px;
}
.codex-entry h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.codex-entry p {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 10px;
}
.codex-entry em {
  color: var(--oxblood-soft);
  font-style: italic;
}
/* ---------- Empyrean tier ---------- */
.herald-card.rarity-empyrean {
  border-color: #d4af37;
  box-shadow: 0 0 16px rgba(212,175,55,0.20), inset 0 0 16px rgba(212,175,55,0.06);
  animation: empyglow 4s ease-in-out infinite;
}
.herald-card.rarity-empyrean .hc-stars { color: #d4af37; }
.unit-slot.rarity-empyrean { border-color: #d4af37; box-shadow: 0 0 12px rgba(212,175,55,0.25); }
@keyframes empyglow {
  0%,100% { box-shadow: 0 0 16px rgba(212,175,55,0.20), inset 0 0 16px rgba(212,175,55,0.06); }
  50%     { box-shadow: 0 0 28px rgba(212,175,55,0.40), inset 0 0 22px rgba(212,175,55,0.12); }
}

.empy-meta { color: var(--ink-soft); font-size: 12px; }
.empy-meta b { color: #d4af37; }

.empy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; margin-top: 24px; }
.empy-card {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid #d4af37;
  background: linear-gradient(180deg, rgba(212,175,55,0.05), rgba(15,19,29,0.6));
  box-shadow: 0 0 24px rgba(212,175,55,0.10);
}
.empy-card .empy-rim {
  position: absolute; inset: 0; border: 1px solid rgba(212,175,55,0.4); pointer-events: none;
  margin: 6px;
}
.empy-card.empy-choir-trumpet { border-color: #d4a87a; }
.empy-card.empy-choir-rains { border-color: #aac0d4; }
.empy-card.empy-choir-veil { border-color: #c4a4d4; }
.empy-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin: 0 0 4px; }
.empy-tags { color: #d4af37; font-size: 10px; letter-spacing: 0.18em; margin-bottom: 8px; }
.empy-lore { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); font-size: 16px; margin: 8px 0 12px; }
.empy-stats { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.08em; padding: 8px 12px; background: rgba(0,0,0,0.25); border-left: 2px solid #d4af37; margin-bottom: 12px; }
.empy-abil-list { margin: 8px 0 16px; }
.empy-abil { padding: 4px 0; font-family: var(--font-display); font-size: 14px; }
.empy-abil b { color: #d4af37; margin-right: 6px; }
.empy-abil-name { color: var(--ink); }
.empy-abil-meta { color: var(--ink-soft); font-size: 10px; }
.empy-bar { margin: 12px 0 16px; }
.empy-bar-label { color: var(--ink-soft); font-size: 9px; letter-spacing: 0.18em; margin-bottom: 4px; }
.empy-bar-track { height: 8px; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; }
.empy-bar-fill { height: 100%; background: linear-gradient(90deg, #d4af37, #f4d77e); transition: width 0.4s; box-shadow: 0 0 8px rgba(212,175,55,0.5); }
.empy-bar-count { color: var(--ink); font-size: 11px; margin-top: 4px; }
.empy-assemble { width: 100%; }
.empy-owned { color: #d4af37; margin-top: 12px; font-size: 11px; }
.empy-owned b { color: var(--ink); }

.hd-rename { margin-left: 8px; vertical-align: middle; font-size: 14px; }
.hd-truename { color: var(--ink-faint); font-size: 10px; letter-spacing: 0.18em; margin-bottom: 8px; }
.herald-detail-head.rarity-empyrean .hd-name { color: #d4af37; }

.codex-note {
  max-width: 760px; margin: 32px auto 0;
  padding: 16px 24px;
  background: rgba(15,19,29,0.6);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* ---------- 3D viewer button & modal ---------- */
.hd-view3d {
  display: block;
  margin-top: 12px;
  width: 100%;
  text-align: center;
}
.modal-3d .modal-box,
.modal-3d {
  max-width: 760px;
}

/* ---------- Arabesque overlay for bastion hero ---------- */
.bastion-hero {
  position: relative;
}
.bastion-hero::before {
  content: '';
  position: absolute;
  top: 8px; right: 0;
  width: 220px; height: 220px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c44a5a' stroke-width='0.35' opacity='0.45'><circle cx='50' cy='50' r='42'/><circle cx='50' cy='50' r='30'/><circle cx='50' cy='50' r='18'/><polygon points='50,8 78,30 78,70 50,92 22,70 22,30'/><polygon points='50,16 70,32 70,68 50,84 30,68 30,32'/><polygon points='50,8 50,92'/><polygon points='8,50 92,50'/><polygon points='20,20 80,80'/><polygon points='80,20 20,80'/><circle cx='50' cy='50' r='6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.20;
}
/* When a painted background is loaded for bastion, hide procedural layers */
body.play[data-scene="bastion"] .bastion-layers { opacity: 0.35; mix-blend-mode: screen; }
@media (max-width: 720px) {
  .bastion-hero::before { display: none; }
}