/* ===========================================================
   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;
  display: block;
}
.tile:hover { border-color: var(--oxblood); background: rgba(143,42,58,0.05); }
.tile-title { font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 8px; }
.tile-sub { color: var(--ink-soft); font-size: 11px; letter-spacing: 0.06em; }

.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: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.play[data-scene]::after { opacity: 0.45; }
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'); }

/* ---------- 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.35;
}
@media (max-width: 720px) {
  .bastion-hero::before { display: none; }
}