/* War Room, tactics, chests & Flame War campaign styles. */

/* ---------------- tactic / stance chips ---------------- */
.tac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tac-chip {
  flex: 1 1 150px; min-width: 140px; max-width: 240px;
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 9px 11px; text-align: left; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; gap: 2px; position: relative;
  transition: border-color .15s, transform .12s, background .15s;
  font: inherit;
}
.tac-chip:hover:not(:disabled) { border-color: var(--line2); transform: translateY(-1px); }
.tac-chip.sel { border-color: var(--gold); background: linear-gradient(160deg, #33290f, #232d18); box-shadow: 0 0 0 1px #e6b94f44; }
.tac-chip.locked { opacity: .55; cursor: not-allowed; }
.tac-chip .tc-ico { font-size: 20px; line-height: 1; }
.formation-ico { color: var(--gold2); font-weight: 900; text-shadow: 0 0 8px #e6b94f55; }
.tac-chip b { font-size: 13.5px; }
.tac-chip small { font-size: 11px; color: var(--dim); line-height: 1.3; }
.tac-chip .tc-star { font-size: 11px; color: var(--gold); font-weight: 700; }
.tac-chip .tc-extra { font-size: 10.5px; color: var(--dim2); }
.tac-chip.sm { flex: 1 1 120px; min-width: 118px; padding: 7px 9px; }
.tac-chip.sm .tc-ico { font-size: 17px; }

/* ---------------- commander / war room ---------------- */
.xp-hero { display: flex; gap: 14px; align-items: center; }
.xp-hero .xh-body { flex: 1; min-width: 0; }
.xp-hero h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.xp-hero small { color: var(--dim); font-size: 12px; }
.xp-bar { margin: 7px 0 9px; height: 12px; }
.xh-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.commander-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.commander-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 10px;
}
.commander-card.active { border-color: var(--gold); background: linear-gradient(160deg, #2b2616, #1c2515); }
.cmdr-portrait {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel3); border: 1.5px solid var(--line2);
  color: var(--gold2); font-weight: 900; font-size: 20px;
}
.cmdr-body { min-width: 0; flex: 1; }
.cmdr-body h3 { font-size: 14px; margin-bottom: 1px; }
.cmdr-body small { display: block; color: var(--dim); font-size: 11.5px; margin-bottom: 5px; }
.cmdr-body p { color: var(--dim); font-size: 11.5px; line-height: 1.35; margin: 3px 0; }
.cmdr-actions { margin-top: 7px; }

.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doc-branch-title { font-size: 12.5px; letter-spacing: .08em; color: var(--dim); margin-bottom: 8px; }
.doc-node {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 11px; margin-bottom: 8px; position: relative;
}
.doc-node::after {
  content: ''; position: absolute; left: 22px; bottom: -9px; width: 2px; height: 9px; background: var(--line);
}
.doc-node:last-child::after { display: none; }
.doc-node.owned { border-color: #4d6a2f; background: linear-gradient(160deg, #22301a, #1c2515); }
.doc-node.avail { border-color: #6d5620; }
.doc-node.locked { opacity: .62; }
.doc-node .dn-ico { font-size: 22px; line-height: 1.1; }
.doc-node .dn-body { flex: 1; min-width: 0; }
.doc-node b { font-size: 13.5px; display: block; }
.doc-node small { font-size: 11.5px; color: var(--dim); display: block; line-height: 1.35; }
.doc-node .dn-act { margin-top: 6px; }

.relic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.relic-card {
  background: var(--panel2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 5px; align-items: center;
}
.relic-card.owned { border-color: #4d6a2f; background: linear-gradient(160deg, #22301a, #1c2515); }
.relic-card .rl-ico { font-size: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.relic-card b { font-size: 13px; }
.relic-card small { font-size: 11px; color: var(--dim); line-height: 1.35; min-height: 30px; }

/* ---------------- campaign ---------------- */
.camp-intro p { color: var(--ink); }
.camp-meter { margin-top: 10px; }
.camp-meter small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--dim); }

.camp-row { display: flex; gap: 13px; align-items: flex-start; }
.camp-row.locked { opacity: .55; filter: saturate(.6); }
.camp-row.current { border-color: #8f3d31; background: linear-gradient(120deg, #2b1a12 -20%, var(--panel) 55%); }
.camp-row.cleared { opacity: .88; }
.camp-ava { position: relative; flex: 0 0 auto; }
.camp-num {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--panel3); border: 1.5px solid var(--line2); border-radius: 9px;
  font-size: 11px; font-weight: 800; padding: 1px 7px; color: var(--gold2);
}
.camp-body { flex: 1; min-width: 0; }
.camp-body h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.camp-taunt { display: block; color: var(--dim); font-size: 12.5px; font-style: italic; margin: 2px 0 7px; }
.camp-banner { border-color: #8f3d31; background: linear-gradient(90deg, #2b160f, #20130d); }

.stars { letter-spacing: 1px; }
.star { color: #4a4433; font-size: 15px; }
.star.on { color: var(--gold); text-shadow: 0 0 8px #e6b94f66; }
.camp-clear-line { margin-top: 10px; font-size: 20px; font-weight: 800; color: var(--gold); letter-spacing: 3px; }

/* campaign fight modal */
.modal-wide { max-width: 560px; width: min(560px, calc(100vw - 28px)); }
.cf-units { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.cf-unit { display: flex; align-items: center; gap: 9px; }
.cf-unit .cf-ico { font-size: 18px; width: 24px; text-align: center; }
.cf-unit b { flex: 1; font-size: 13px; }
.cf-unit .qty-num { width: 84px; }
.cf-note { margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.cf-note.good { color: var(--gold); }
.cf-note.bad { color: var(--red); }
#cf-sum { margin-top: 10px; }
#cf-sum .sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
#cf-sum .sum-grid small { display: block; font-size: 10px; color: var(--dim2); letter-spacing: .06em; }
#cf-sum .sum-grid b { font-size: 14px; }

/* ---------------- war chest modal ---------------- */
.chest-stage { text-align: center; padding: 6px 2px; }
.chest-box {
  width: 108px; height: 108px; margin: 6px auto 0; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 54px;
  border: 2px solid var(--line2); background: linear-gradient(160deg, var(--panel3), var(--panel));
  box-shadow: var(--shadow); transition: transform .2s;
}
.chest-box.t-wood { border-color: #7a6540; }
.chest-box.t-iron { border-color: #8b95a3; box-shadow: 0 6px 24px rgba(120,140,160,.25); }
.chest-box.t-gold { border-color: var(--gold); box-shadow: 0 6px 28px rgba(230,185,79,.35); }
.chest-box.t-legendary {
  border-color: var(--purple);
  box-shadow: 0 0 30px rgba(163,125,224,.5);
  animation: legendGlow 1.6s ease-in-out infinite;
}
@keyframes legendGlow { 50% { box-shadow: 0 0 46px rgba(163,125,224,.85); } }
.chest-box.shake { animation: chestShake .6s ease-in-out; }
@keyframes chestShake {
  20% { transform: rotate(-7deg) scale(1.02); }
  40% { transform: rotate(6deg) scale(1.05); }
  60% { transform: rotate(-5deg) scale(1.07); }
  80% { transform: rotate(4deg) scale(1.04); }
}
.chest-box.open { animation: chestPop .45s ease-out; transform: scale(1.06); }
@keyframes chestPop { 0% { transform: scale(.7); } 65% { transform: scale(1.18); } 100% { transform: scale(1.06); } }
.chest-rewards { margin-top: 12px; }

/* streak flames in the daily crate */
.streak-row { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.streak-pip { font-size: 18px; opacity: .22; filter: grayscale(1); }
.streak-pip.on { opacity: 1; filter: none; animation: popIn .35s ease-out; }

/* ---------------- battle report extras ---------------- */
.rps-line {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center;
  margin: 9px auto 0; padding: 5px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 700;
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
}
.rps-line .rps-vs { color: var(--dim2); font-size: 10.5px; letter-spacing: .1em; }
.rps-line.good { border-color: #6d5620; color: var(--gold2); }
.rps-line.bad { border-color: #6b3128; color: #f0a496; }

/* ---------------- responsive ---------------- */
@media (max-width: 760px) {
  .doc-grid { grid-template-columns: 1fr; }
  .xp-hero { flex-direction: column; text-align: center; }
  .xp-hero h2 { justify-content: center; }
  .xh-tags { justify-content: center; }
  .camp-row { flex-direction: row; }
  .tac-chip { max-width: none; }
}