/* Animated rarity border for the 17 Legendary Cards. */
.card.legendary-card{
  border:2px solid transparent;
  background:
    linear-gradient(145deg,rgba(31,29,26,.98),rgba(18,18,19,.98)) padding-box,
    linear-gradient(135deg,
      rgba(255,0,0,.5),rgba(255,127,0,.5),rgba(255,255,0,.5),rgba(0,255,0,.5),
      rgba(0,255,255,.5),rgba(0,0,255,.5),rgba(139,0,255,.5),rgba(255,0,0,.5),
      rgba(255,127,0,.5),rgba(255,255,0,.5),rgba(0,255,0,.5),rgba(0,255,255,.5),
      rgba(0,0,255,.5),rgba(139,0,255,.5),rgba(255,0,0,.5)) border-box;
  background-size:100% 100%,400% 100%;
  background-position:0 0,100% 0;
  animation:legendary-border-flow 1s linear infinite;
  box-shadow:0 8px 25px rgba(0,0,0,.2),0 0 10px rgba(90,92,255,.16);
}
.card.legendary-card:hover{
  border-color:transparent;
  box-shadow:0 18px 35px rgba(0,0,0,.42),0 0 16px rgba(74,222,128,.25);
}
.modal-card.legendary-mode{
  border:2px solid transparent;
  background:
    linear-gradient(145deg,#221d17,#111214) padding-box,
    linear-gradient(135deg,
      rgba(255,0,0,.5),rgba(255,127,0,.5),rgba(255,255,0,.5),rgba(0,255,0,.5),
      rgba(0,255,255,.5),rgba(0,0,255,.5),rgba(139,0,255,.5),rgba(255,0,0,.5),
      rgba(255,127,0,.5),rgba(255,255,0,.5),rgba(0,255,0,.5),rgba(0,255,255,.5),
      rgba(0,0,255,.5),rgba(139,0,255,.5),rgba(255,0,0,.5)) border-box;
  background-size:100% 100%,400% 100%;
  background-position:0 0,100% 0;
  animation:legendary-border-flow 1s linear infinite;
  box-shadow:0 35px 100px #000,0 0 18px rgba(90,92,255,.2);
}
@keyframes legendary-border-flow{
  from{background-position:0 0,100% 0}
  to{background-position:0 0,0 0}
}
@media(prefers-reduced-motion:reduce){
  .card.legendary-card,.modal-card.legendary-mode{animation:none;background-position:0 0,50% 0}
}

/* Troop detail layer: deployed without changing the existing codex card grid. */
.modal-card.troop-mode{
  grid-template-columns:minmax(260px,34%) 1fr;
  width:min(1180px,100%);
}
.troop-mode .modal-body{padding:30px 32px 36px}
.troop-mode #modalText{display:none}
.troop-detail{margin-top:18px;color:#e7edf1;font-family:"Microsoft YaHei",system-ui,sans-serif}
.troop-level-note{margin-bottom:10px;color:#718697;font-size:11px;letter-spacing:.06em}
.troop-stats{display:grid;grid-template-columns:minmax(175px,1.7fr) repeat(5,minmax(76px,1fr));gap:7px}
.troop-stat{min-height:78px;padding:10px 9px;background:#142027;border:1px solid #293941;border-radius:4px}
.troop-stat-icon{display:block;color:#91a9bf;font-size:17px;line-height:1}
.troop-stat-label{display:block;margin-top:6px;color:#8298ab;font-size:10px;line-height:1.25}
.troop-stat-value{display:block;margin-top:5px;color:#f0f4f6;font-size:14px;font-weight:700;line-height:1.35;white-space:pre-line}
.troop-stat:first-child .troop-stat-value{font-size:13px;letter-spacing:-.02em;white-space:nowrap}
.troop-resources{display:grid;gap:8px;margin-top:13px}
.troop-resource-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px;color:#94a9ba;font-size:11px}
.troop-resource-bar{min-height:34px;display:flex;align-items:center;justify-content:center;border-radius:3px;color:#fff;font-size:17px;font-weight:800;text-shadow:0 1px 2px #000}
.troop-resource-bar.hp{background:linear-gradient(90deg,#376f43,#58a966)}
.troop-resource-bar.mp{background:linear-gradient(90deg,#226387,#3899c9)}
.troop-population{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.troop-population-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#151c20;border:1px solid #34454d;border-radius:3px}
.troop-population-stat span{color:#94a9ba;font-size:11px}
.troop-population-stat b{color:#f2c14e;font-size:16px}
.troop-skill{margin-top:18px;border-top:1px solid #34454d;padding-top:14px}
.troop-skill-head{padding:12px 14px;background:#142027;border-left:3px solid #d9a928;color:#f2c14e;font-size:17px;font-weight:800}
.troop-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;margin-top:10px;padding:8px 12px;background:#0e1519;border:1px solid #26363e}
.troop-def{padding:4px 0;color:#91a8bb;font-size:11px;line-height:1.45}
.troop-def b{color:#d8e0e5;font-weight:600}
.troop-description{margin-top:10px;padding:12px 14px;background:#10181c;color:#d6e0e6;font-size:13px;line-height:1.75;border-left:2px solid #31454f}
.troop-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.troop-metric{min-height:66px;padding:10px 12px;background:#10171b;border:1px solid #26363e;border-radius:3px}
.troop-metric-label{display:block;color:#8ea8c4;font-size:10px;font-weight:700}
.troop-metric-value{display:block;margin-top:5px;color:#f2c14e;font-size:12px;line-height:1.55;white-space:pre-line}
.troop-params{margin-top:10px;background:#0d1316;border:1px solid #26363e}
.troop-params summary{cursor:pointer;padding:10px 12px;color:#a9bac6;font-size:11px;user-select:none}
.troop-param-grid{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(120px,1.1fr);border-top:1px solid #26363e}
.troop-param-grid span{padding:7px 10px;border-bottom:1px solid #202d33;font-size:11px;line-height:1.4}
.troop-param-grid span:nth-child(odd){color:#8298ab}
.troop-param-grid span:nth-child(even){color:#dce5e9;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.troop-warning{margin-top:10px;padding:11px 13px;background:#3b2a13;border:1px solid #9a671e;color:#e8b44b;font-size:11px;line-height:1.6}
.troop-crystals{margin-top:20px;border-top:1px solid #4a3b58;padding-top:14px}
.troop-crystal-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(90deg,#251b35,#171d29);border-left:3px solid #a87bd6;color:#dfc5ff;font-size:17px;font-weight:800}
.troop-crystal-gem{color:#c793ff;font-size:15px;text-shadow:0 0 9px rgba(199,147,255,.5)}
.troop-crystal-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;margin-left:auto;border:1px solid #6c5087;border-radius:9px;color:#bfa5d9;font-size:10px}
.troop-crystal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.troop-crystal-card{padding:12px 13px;background:linear-gradient(145deg,#15121d,#10161b);border:1px solid #3b3048;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.troop-crystal-name{color:#d9b8fb;font-size:13px;font-weight:800}
.troop-crystal-description{margin-top:6px;color:#d5dce1;font-size:12px;line-height:1.65}
.troop-crystal-values{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:9px;padding-top:8px;border-top:1px solid #332b3d;font-size:10px;line-height:1.45}
.troop-crystal-values span{grid-row:1/span 20;color:#8d7d9c}
.troop-crystal-values b{color:#c9a7ed;font-weight:600;white-space:pre-line}
.troop-crystal-pending{margin-top:9px;padding:7px 8px;background:#332619;border:1px solid #735224;color:#d8a95c;font-size:10px;line-height:1.5}
.building-detail{margin-top:18px;color:#e7edf1;font-family:"Microsoft YaHei",system-ui,sans-serif}
.building-stats{display:grid;grid-template-columns:minmax(160px,1.5fr) repeat(4,minmax(86px,1fr));gap:7px}
.building-no-combat{padding:10px 13px;background:#11191d;border:1px solid #293941;color:#8298ab;font-size:11px}
.building-effect,.building-skill{margin-top:16px;border-top:1px solid #34454d;padding-top:12px}
.building-upgrade{display:flex;gap:10px;margin-top:8px;padding:9px 12px;background:#171913;border:1px solid #393a28;color:#cfd5b4;font-size:11px;line-height:1.55}
.building-upgrade span{color:#d7ad45;font-weight:700;white-space:nowrap}
.building-effect-grid,.building-param-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.building-effect-value,.building-param{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:8px 11px;background:#10171b;border:1px solid #26363e;border-radius:3px}
.building-effect-value span,.building-param span{color:#8298ab;font-size:10px}
.building-effect-value b,.building-param b{color:#f2c14e;font-size:12px;text-align:right;white-space:pre-line}
.building-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px;padding:9px 12px;background:#0e1519;border:1px solid #26363e;color:#91a8bb;font-size:11px}
.building-defs b{color:#d8e0e5;font-weight:600}
.equipment-detail{margin-top:18px;color:#e7edf1;font-family:"Microsoft YaHei",system-ui,sans-serif}
.equipment-effect{border-top:1px solid #34454d;padding-top:12px}
.equipment-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.equipment-defs div{min-height:55px;padding:9px 11px;background:#0e1519;border:1px solid #26363e}
.equipment-defs span{display:block;color:#8298ab;font-size:10px}
.equipment-defs b{display:block;margin-top:5px;color:#dce5e9;font-size:11px;line-height:1.45}
.equipment-values{margin-top:16px;border-top:1px solid #34454d;padding-top:12px}
.equipment-values-head{padding-left:10px;border-left:3px solid #d9a928;color:#f2c14e;font-size:14px;font-weight:800}
.equipment-param-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.equipment-param{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:9px 11px;background:#10171b;border:1px solid #26363e;border-radius:3px}
.equipment-param span{color:#8298ab;font-size:10px;line-height:1.35}
.equipment-param b{color:#f2c14e;font-size:12px;text-align:right;white-space:pre-line}
@media(max-width:900px){
  .modal-card.troop-mode{grid-template-columns:minmax(220px,31%) 1fr}
  .troop-stats{grid-template-columns:repeat(3,1fr)}
  .troop-defs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .modal-card.troop-mode{display:block;width:min(560px,100%)}
  .troop-mode .modal-image{min-height:220px;height:34vh}
  .troop-mode .modal-body{padding:24px 16px 28px}
  .troop-stats{grid-template-columns:repeat(2,1fr)}
  .troop-stat:first-child .troop-stat-value{font-size:12px}
  .troop-defs,.troop-metrics,.troop-population{grid-template-columns:1fr}
  .troop-crystal-list{grid-template-columns:1fr}
  .building-stats{grid-template-columns:repeat(2,1fr)}
  .building-effect-grid,.building-param-grid,.building-defs{grid-template-columns:1fr}
  .equipment-defs,.equipment-param-grid{grid-template-columns:1fr}
  .troop-param-grid{grid-template-columns:1fr}
  .troop-param-grid span:nth-child(odd){padding-bottom:2px;border-bottom:0}
  .troop-param-grid span:nth-child(even){padding-top:2px}
}