/* Ancient Duel — Campaign & Historical Battles styling.
   The campaign hub + landing pages live on the same papyrus sheet as the
   faction / deck-builder pages (.db-page + .page-papyrus), so all page
   components use the papyrus INK palette (dark ink on cream, bronze accents).
   The in-game result overlay (.cr-*) stays dark — it sits over the board. */

/* Ink palette (literal so it also applies inside body-level modals). */
.campaign-papyrus .campaign-subheading { color:#3d3228; font-style:italic; font-size:.95rem; margin-bottom:.5rem; }
/* Top nav: left (Lobby) + right (Historical / Achievements / Leaderboard) must
   stay fully readable — Bootstrap .col can shrink below content and clip links. */
.campaign-papyrus .db-nav {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.campaign-papyrus .db-nav .campaign-topnav-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem 0.75rem;
  white-space: normal;
  flex: 1 1 auto;
  min-width: min-content;
}
.campaign-papyrus .db-nav .campaign-topnav-right .db-nav-link.ms-3 {
  margin-left: 0 !important;
}
@media (max-width: 900px) {
  .campaign-papyrus .db-nav .campaign-topnav-right {
    flex: 1 1 100%;
  }
}

/* Ink "drawn" separator on papyrus (mirrors .faction-section hr.ancient-hr). */
.campaign-papyrus hr.ancient-hr { margin:.6rem auto 1rem; }
.campaign-papyrus hr.ancient-hr::before {
  height:2px; margin-top:-1px; border-radius:2px;
  background:linear-gradient(90deg, rgba(58,40,20,0) 0%, rgba(58,40,20,.45) 10%, rgba(43,29,14,.8) 35%, rgba(43,29,14,.85) 50%, rgba(43,29,14,.8) 65%, rgba(58,40,20,.45) 90%, rgba(58,40,20,0) 100%);
  box-shadow:0 1px 0 rgba(255,248,226,.35);
}
.campaign-papyrus hr.ancient-hr::after {
  width:8px; height:8px; margin:-4px 0 0 -4px; border:none;
  background:linear-gradient(135deg, #5a4126 0%, #2b1d0e 70%);
  box-shadow:0 0 0 2px rgba(43,29,14,.18), 0 1px 0 rgba(255,248,226,.4);
}

.campaign-hero { text-align:center; margin:.4rem 0 .2rem; }
.campaign-hero img,
.campaign-hero video {
  width:auto; max-width:100%; height:auto; border-radius:8px;
  border:1px solid rgba(43,29,14,.28); box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.campaign-hero img { max-width:170px; }

.campaign-app { min-height:240px; color:#3d3228; }
.campaign-loading, .campaign-error { text-align:center; padding:2rem 1rem; color:#3d3228; }
.campaign-error { color:#7a2e22; }

/* Server-rendered (crawlable) content. */
.campaign-seo { font-size:.95rem; line-height:1.6; color:#3d3228; }
.campaign-seo-lead { color:#3d3228; font-style:italic; }
.campaign-seo-list, .campaign-seo-missions { list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.8rem; }
.campaign-seo-list > li, .campaign-seo-missions > li {
  border:1px solid var(--db-faction-primary, rgba(43,29,14,.3)); border-radius:6px;
  background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); padding:.7rem .9rem;
}
.campaign-seo-ctitle, .campaign-seo-mtitle { font-family:'Cinzel', serif; font-size:1.05rem; color:#2b1d0e; margin:0 0 .25rem; }
.campaign-seo-ctitle a { color:#2b1d0e; text-decoration:none; }
.campaign-seo-ctitle a:hover { color:#3d3228; text-decoration:underline; }
.campaign-seo-theme { font-size:.84rem; color:#3d3228; }
.campaign-seo-vs { font-size:.82rem; color:#9c6f1e; margin:.1rem 0 .3rem; font-weight:600; }
.campaign-seo-brief { font-size:.9rem; color:#3d3228; margin:0; }
.campaign-seo-brief strong, .campaign-seo strong { color:#2b1d0e; }

/* Guest login note — red, under the page subtitle (same tone as the ranked
   notice in the lobby). Pages stay fully browsable for guests/crawlers. */
.campaign-login-note {
  text-align:center; color:#c0392b; font-size:13px; font-weight:700; margin:-.2rem 0 .6rem;
}

/* Action rows / breadcrumbs */
.campaign-list-actions { display:flex; justify-content:flex-end; margin-bottom:.5rem; }
.campaign-list-actions .btn-link, .campaign-board-link, .campaign-breadcrumb .btn-link {
  color:#7a5713; text-decoration:none; font-weight:600;
}
.campaign-list-actions .btn-link:hover, .campaign-board-link:hover, .campaign-breadcrumb .btn-link:hover { text-decoration:underline; }
.campaign-breadcrumb { margin-bottom:.75rem; display:flex; gap:1.25rem; flex-wrap:wrap; }

/* Campaign tiles (papyrus panels, faction-coloured frame) */
.campaign-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:.9rem; }
.campaign-tile {
  display:flex; flex-direction:column; gap:.25rem; text-align:left; padding:1rem; border-radius:6px;
  border:1px solid var(--fac, rgba(43,29,14,.3)); background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.1);
  color:#3d3228; cursor:pointer; transition:transform .12s ease, border-width .12s ease, background .12s ease;
}
.campaign-tile { text-decoration:none; }
.campaign-tile:hover:not([disabled]):not(.is-soon) { transform:translateY(-2px); border-width:2px; background:rgba(255,255,255,.22); }
.campaign-tile[disabled], .campaign-tile.is-soon { opacity:.55; cursor:default; }
.ct-cta { margin-top:.35rem; font-size:.82rem; font-weight:600; color:var(--fac, #7a5713); }
.campaign-tile .ct-faction { font-family:'Cinzel', serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fac, #9c6f1e); }
.campaign-tile .ct-title { font-family:'Cinzel', serif; font-weight:700; font-size:1.05rem; color:var(--fac, #2b1d0e); }
.campaign-tile .ct-sub { font-size:.82rem; color:#3d3228; min-height:2.2em; }
.campaign-tile .ct-soon { font-size:.78rem; color:#8a6a52; font-style:italic; }
.ct-progress { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.ct-bar { flex:1; height:7px; background:rgba(43,29,14,.18); border-radius:4px; overflow:hidden; }
.ct-bar > span { display:block; height:100%; background:linear-gradient(90deg,#8a5f1a,#c79a3e); }
.ct-stars { font-size:.78rem; color:#9c6f1e; white-space:nowrap; }

/* Mission list */
.mission-list { display:flex; flex-direction:column; gap:.5rem; }
.mission-row {
  display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.7rem .9rem;
  border-radius:6px; border:1px solid rgba(43,29,14,.25); border-left:3px solid var(--fac, rgba(43,29,14,.25));
  background:rgba(255,255,255,.12);
  color:#3d3228; cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.mission-row:hover:not([disabled]) { background:rgba(255,255,255,.2); }
.mission-row[disabled] { opacity:.55; cursor:default; }
/* Locked missions keep the dimmed (disabled) look but stay clickable so the
   player can still open the mission and read its history. */
.mission-row.is-locked { opacity:.55; }
.md-locked-note { font-size:.85rem; color:#8a6a52; font-style:italic; align-self:center; }
.mr-num {
  width:1.9rem; height:1.9rem; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(156,111,30,.18); color:#7a5713; font-weight:700; font-family:'Cinzel', serif;
}
.mr-main { flex:1; display:flex; flex-direction:column; }
.mr-title { font-weight:600; color:#2b1d0e; }
.mr-hist { color:#9c6f1e; }
.mr-vs { font-size:.8rem; color:#3d3228; }
.mr-vs-sep { opacity:.7; }
.mr-stars { flex:0 0 auto; }
.mr-lock { font-size:1.1rem; opacity:.6; }

/* Stars (bronze on cream) */
.camp-stars .camp-star, .mr-stars .camp-star { color:rgba(43,29,14,.22); font-size:1rem; }
.camp-stars .camp-star.on, .mr-stars .camp-star.on { color:#b07d2b; }

/* Mission detail */
.mission-detail { display:flex; flex-direction:column; gap:.8rem; }
.md-meta { font-size:.85rem; color:#9c6f1e; }
.md-card { border:1px solid rgba(43,29,14,.22); border-radius:6px; background:rgba(255,255,255,.14); padding:.75rem .9rem; }
.md-card-title { font-family:'Cinzel', serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#2b1d0e; margin:0 0 .4rem; }
.md-card-body { font-size:.92rem; line-height:1.55; color:#3d3228; }
.md-rules, .md-objectives, .md-rewards { margin:0; padding-left:1.1rem; }
.md-objectives li { margin:.2rem 0; }
.mo-star { color:#b07d2b; font-weight:700; font-size:.8rem; margin-right:.2rem; }
.md-rule-soon { font-size:.7rem; color:#8a6a52; font-style:italic; border:1px solid rgba(120,90,30,.35); border-radius:4px; padding:0 .3rem; }
.md-best { display:flex; flex-wrap:wrap; gap:.6rem; }
.md-stat { flex:1 1 80px; text-align:center; border:1px solid rgba(43,29,14,.2); border-radius:6px; padding:.5rem; background:rgba(255,255,255,.14); }
.md-stat-val { display:block; font-size:1.1rem; font-weight:700; color:#7a5713; font-family:'Cinzel', serif; }
.md-stat-label { display:block; font-size:.72rem; color:#3d3228; }
.md-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }

/* Leaderboard / achievements (inside the papyrus info modal) */
/* Listele lungi se derulează ÎN INTERIORUL foii de papirus: foaia (.modal-content)
   nu trebuie să fie ea scroller, altfel capacele rupte (pseudo-elementele) se
   desprind de conținut la derulare. */
#campaignInfoModal .modal-body {
  max-height: min(60vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .6rem;
}
#campaignInfoModal .modal-body::-webkit-scrollbar { width: 6px; }
#campaignInfoModal .modal-body::-webkit-scrollbar-thumb { background: rgba(43,29,14,.4); border-radius: 3px; }
#campaignInfoModal .modal-body::-webkit-scrollbar-track { background: transparent; }
.camp-board { width:100%; border-collapse:collapse; color:#3d3228; }
.camp-board th, .camp-board td { padding:.4rem .5rem; border-bottom:1px solid rgba(43,29,14,.15); text-align:left; }
.camp-board th { color:#2b1d0e; font-family:'Cinzel', serif; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.ach-list { display:flex; flex-direction:column; gap:.5rem; }
.ach-row { display:flex; gap:.7rem; align-items:flex-start; padding:.5rem .6rem; border-radius:6px; background:rgba(255,255,255,.14); border:1px solid rgba(43,29,14,.2); color:#3d3228; }
.ach-row.is-unlocked { border-color:rgba(156,111,30,.6); }
.ach-row.is-hidden { opacity:.6; }
.ach-icon { font-size:1.2rem; }
.ach-main { display:flex; flex-direction:column; }
.ach-main strong { color:#2b1d0e; }
.ach-desc { font-size:.84rem; color:#3d3228; }
.ach-prog { font-size:.78rem; color:#9c6f1e; }
.ach-cat { margin-bottom:1.1rem; }
.ach-cat-title { font-family:'Cinzel', serif; font-size:1.05rem; color:#2b1d0e; text-transform:uppercase; letter-spacing:.04em; margin:0 0 .5rem; }

/* Leaderboard pages: cross-link chips + full table */
.campaign-lb-links { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-bottom:1rem; }
.campaign-lb-chip { font-size:.82rem; padding:.25rem .7rem; border-radius:999px; border:1px solid rgba(43,29,14,.3); background:rgba(255,255,255,.14); color:#3d3228; text-decoration:none; }
.campaign-lb-chip:hover { border-color:#2b1d0e; }
.campaign-lb-chip.is-active { background:rgba(156,111,30,.18); border-color:#9c6f1e; color:#2b1d0e; font-weight:600; }
.camp-board-full { margin-top:.2rem; }
.camp-board-full td, .camp-board-full th { padding:.45rem .6rem; }

/* ---------------- Historical Battles ---------------- */
.hist-filter { margin-bottom:.8rem; font-size:.88rem; color:#3d3228; }
.hist-filter select { background:rgba(255,255,255,.4); color:#2b1d0e; border:1px solid rgba(43,29,14,.35); border-radius:4px; padding:.2rem .4rem; }
.hist-list { display:flex; flex-direction:column; gap:.8rem; }
.hist-battle { border:1px solid rgba(43,29,14,.2); border-radius:6px; background:rgba(255,255,255,.1); padding:.8rem .9rem; opacity:.9; }
.hist-battle.is-unlocked { opacity:1; border-color:rgba(156,111,30,.5); background:rgba(255,255,255,.16); }
.hist-battle-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.hb-name { font-family:'Cinzel', serif; font-weight:700; color:#2b1d0e; }
.hb-meta { font-size:.78rem; color:#3d3228; }
.hb-summary { font-size:.86rem; color:#3d3228; margin:.3rem 0 .55rem; }
.hb-perspectives { display:flex; flex-direction:column; gap:.4rem; }
.hb-persp { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.45rem .6rem; border-radius:6px; background:rgba(255,255,255,.16); border-left:3px solid #9c6f1e; }
.hbp-side { font-family:'Cinzel', serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#9c6f1e; min-width:84px; }
.hbp-title { flex:1; font-weight:600; color:#2b1d0e; }
.hbp-soon, .hbp-locked { font-size:.78rem; color:#8a6a52; font-style:italic; }
.hbp-stats { display:flex; align-items:center; gap:.4rem; }
.hbp-score { font-size:.76rem; color:#3d3228; }

/* ---------------- Result overlay (game page — papyrus sheet) ----------------
   The papyrus background comes from the shared three-slice pseudo-elements in
   styles.css (.campaign-result-overlay .cr-modal). The cap pseudo-elements
   size to the element box, so the sheet itself must never be a scroller —
   scrolling happens on the overlay, and the backdrop is fixed so it keeps
   covering the viewport while scrolled. */
.campaign-result-overlay { position:fixed; inset:0; z-index:4000; display:flex; justify-content:center; overflow-y:auto; padding:1rem 0; }
.cr-backdrop { position:fixed; inset:0; background:rgba(8,6,4,.82); backdrop-filter:blur(2px); }
.cr-modal { position:relative; width:min(560px,96vw); margin:auto; height:fit-content; border:none; border-radius:0;
  color:#2b1d0e; padding:clamp(14px,3.5%,32px) clamp(14px,4%,40px) clamp(20px,5%,40px); }
.cr-head { text-align:center; padding:1.1rem 1rem .8rem; border-bottom:1px solid rgba(91,58,16,.35); }
.cr-head.cr-win .cr-verdict { color:#9c6f1e; }
.cr-head.cr-loss .cr-verdict { color:#a3382c; }
.cr-verdict { font-family:'Cinzel', serif; font-size:1.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.cr-mission { opacity:.85; margin:.15rem 0 .5rem; }
.cr-stars { display:inline-flex; gap:.25rem; font-size:1.8rem; }
.cr-star { color:rgba(43,29,14,.25); }
.cr-star.on { color:#b8860b; text-shadow:0 0 8px rgba(184,134,11,.45); }
.cr-body { padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.8rem; }
.cr-section h4 { font-family:'Cinzel', serif; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#9c6f1e; margin:0 0 .35rem; }
.cr-objectives { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.cr-objectives li { font-size:.9rem; }
.cr-objectives li.is-done .cr-obj-mark { color:#2e7d32; }
.cr-objectives li.is-miss .cr-obj-mark { color:#a3382c; }
.cr-objectives li.is-na { opacity:.6; }
.cr-obj-mark { font-weight:700; }
.cr-stats { display:flex; flex-wrap:wrap; gap:.5rem; }
.cr-stat { flex:1 1 70px; text-align:center; padding:.5rem; border-radius:8px; background:rgba(255,255,255,.16); border:1px solid rgba(91,58,16,.3); }
.cr-stat-val { display:block; font-size:1.15rem; font-weight:700; color:#5b3a10; }
.cr-stat-label { display:block; font-size:.7rem; color:#3d3228; opacity:.85; }
.cr-rewards, .cr-achs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; }
.cr-unlock { text-align:center; color:#9c6f1e; font-weight:700; padding:.4rem; border:1px dashed rgba(91,58,16,.5); border-radius:8px; }
.cr-insight p { font-size:.88rem; line-height:1.5; opacity:.9; margin:0; }
.cr-actions { display:flex; flex-wrap:wrap; gap:.6rem; padding:.9rem 1.1rem 1.1rem; }
.cr-actions .ancient-btn { flex:1; text-align:center; min-width:0; }

/* ---------------- In-match objectives panel (game page — stays dark) -----
   Mirror of the game log panel on the right edge: same vertical anchor,
   vertical toggle tab, collapsible list. Anchored to the left edge. */
.camp-obj-panel {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.camp-obj-toggle {
  padding: 10px 6px;
  background: rgba(20,18,28,0.95);
  border: 1px solid #444;
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: #b8a472;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 1px;
  flex-shrink: 0;
  white-space: nowrap;
}
.camp-obj-list {
  width: 240px;
  max-height: 55vh;
  background: rgba(20,18,28,0.95);
  border: 1px solid #444;
  border-left: none;
  border-radius: 0;
  padding: 8px;
  overflow-y: auto;
  font-size: 11px;
  color: #ccc;
  transition: width .25s, opacity .25s, padding .25s;
}
.camp-obj-panel:not(.open) .camp-obj-list {
  width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  border: none;
}
.camp-obj-title {
  font-family: 'Cinzel', serif;
  color: #e7c873;
  font-size: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
}
.camp-obj-entry {
  padding: 3px 0;
  border-bottom: 1px solid #333;
}
.camp-obj-entry:last-child { border-bottom: none; }
.camp-obj-entry.is-done { color: #8fce8f; }
.camp-obj-entry.is-done .camp-obj-mark { color: #8fce8f; font-weight: 700; }
.camp-obj-mark { color: #777; }
.camp-obj-stars { color: #e7c873; white-space: nowrap; }

/* Fallback toast (only used if the in-game showToast helper is missing) */
.camp-obj-toast {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(12,14,20,0.92);
  color: #d4af37;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
  white-space: nowrap;
}
.camp-obj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }