/* The Album: its tabs, card grid and pager, and the details layout units, friends and enemies share. */
.simple-card-dialog .modal-body {padding:22px 16px 20px;text-align:left;text-transform:uppercase}
@media(max-width:360px){.simple-card-dialog .modal-body{padding:18px 12px}
}
.album-tabs {
  margin: 0 0 14px;
}
/* Album tabs mirror the Rewards bar: a slate bar across the top of the dialog, with the tabs
   resting on its bottom edge (rounded tops, square bottoms). */
[data-modal-type="books"] .album-tabs {
  margin: -20px -16px 16px;
  padding: 12px 10px 0;
  background: var(--slate-800);
  border-bottom: 4px solid var(--slate-900);
  box-shadow: 0 4px 0 var(--slate-200);
}
[data-modal-type="books"] .album-tabs button {
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding-bottom: 13px;
  box-shadow: none;
}
/* The pager mirrors the tab bar at the bottom: a slate bar with its dark edge and light line on top,
   so the scrolling cards sit between two matching borders. */
[data-modal-type="books"] .album-paging {
  margin: 14px -16px -20px;
  padding: 12px 16px 14px;
  background: var(--slate-800);
  border-top: 4px solid var(--slate-900);
  box-shadow: 0 -4px 0 var(--slate-200);
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.album-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 3px solid var(--slate-900);
  border-radius: 12px;
  background: var(--type-unit-soft);
  color: var(--slate-900);
  padding: 0;
  box-shadow: 0 4px var(--slate-900);
  font: inherit;
  cursor: pointer;
}
.album-card > b {
  padding: 6px 3px;
  min-height: 39px;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1.15;
}
.album-art {
  width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  padding: 6px 0;
  background: repeating-conic-gradient(#fff5 0 15deg, #fff1 15deg 30deg);
}
.album-card small {
  width: 100%;
  padding: 5px 2px;
  font-size: 10px;
  font-weight: 900;
  background: var(--slate-800);
  color: #fff;
}
/* Album categories take their card-type soft tints. */
.album-card.passive {
  background: var(--type-passive-soft);
}
.album-card.evo {
  background: var(--type-evo-soft);
}
.album-card.enemies {
  background: var(--type-enemy-soft);
}
.album-card.is-locked .album-art > svg {
  opacity: 0.2;
  filter: grayscale(1);
}
.album-lock {
  position: absolute;
  font-size: 34px;
  color: #161b2466;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.album-paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 3px;
  font-size: 14px;
}
.album-paging b {
  font-weight: 900;
}

/* Keep Album navigation stationary across categories and partial final pages. */
[data-modal-type="books"] {
  height: min(720px, 100%);
}
[data-modal-type="books"] .modal-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
[data-modal-type="books"] .album-grid {
  grid-template-rows: repeat(3, 160px);
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
[data-modal-type="books"] .album-card > b,
.scout-enemies .album-card > b {
  height: 39px;
  flex-shrink: 0;
}
[data-modal-type="books"] .album-card .album-art,
.scout-enemies .album-card .album-art {
  flex: 1;
}
.album-card:not(.is-locked) .album-art > svg {
  filter: drop-shadow(2px 2px 0 #fffdf0) drop-shadow(-2px -2px 0 #fffdf0);
}
.album-card > b.long-name {font-size:10px;line-height:1.1;hyphens:manual}


.album-card.is-locked .album-art .painted-sprite {opacity:.2;filter:grayscale(1)}
.album-card:disabled {opacity:1;cursor:default}
.unit-overview {display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:stretch}
.unit-portrait {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;padding:12px 3px 23px;border:3px solid var(--slate-950);border-radius:15px;background:repeating-conic-gradient(from 0deg at 50% 38%,#ffdd52 0deg 24deg,#d8ac2d 24deg 48deg);overflow:visible}
.unit-portrait.is-passive {background:repeating-conic-gradient(from 0deg at 50% 38%,#50c9f7 0deg 24deg,#199bcf 24deg 48deg)}
/* Friends and enemies take their Album card's colour: soft bands over a deeper tint of the main shade. */
.unit-portrait.is-friend {background:repeating-conic-gradient(from 0deg at 50% 38%,var(--red-soft) 0deg 24deg,color-mix(in srgb,var(--red) 78%,white) 24deg 48deg)}
.unit-portrait.is-enemy {background:repeating-conic-gradient(from 0deg at 50% 38%,var(--green-soft) 0deg 24deg,color-mix(in srgb,var(--green) 78%,white) 24deg 48deg)}
.unit-portrait.is-mega {background:repeating-conic-gradient(from 0deg at 50% 38%,var(--purple-soft) 0deg 24deg,color-mix(in srgb,var(--purple) 78%,white) 24deg 48deg)}
.unit-portrait>svg {width:90px;height:90px}
.unit-portrait-cost {position:absolute;bottom:-10px;display:flex;white-space:nowrap;align-items:center;gap:2px;padding:2px 8px;background:var(--slate-900);border:2px solid var(--slate-950);border-radius:10px;color:white;font-size:18px}
.is-passive .unit-portrait-cost {font-size:10px;padding:5px}
.unit-description {padding:15px 13px;border-radius:12px;background:var(--slate-500);display:flex;flex-direction:column;min-width:0}
.unit-description>h3 {margin:0 0 8px;color:white;font-size:18px;line-height:1.1;text-align:left;-webkit-text-stroke:3px var(--slate-900);paint-order:stroke fill}
.unit-description>p {margin:0;color:white;font-size:15px;line-height:1.4;text-align:left}
.unit-description>small {margin-top:auto;padding-top:10px;font-size:10px;color:#e7f5ff}
.detail-boosts {display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:10px}.detail-boosts small {margin-right:2px;font-size:10px;color:#e7f5ff}.detail-boosts span {display:flex}
.unit-upgrades {margin-top:22px;overflow:hidden;border-radius:14px;background:var(--slate-500);box-shadow:inset 0 -3px #c4ddeb;padding-bottom:8px}
.unit-upgrades h3 {margin:0 0 6px;padding:10px 14px;background:var(--slate-700);color:white;font-size:22px;text-align:left;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.unit-upgrade-row {display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;min-height:24px;padding:2px 14px;color:white;font-size:13px;line-height:1.25}
.unit-upgrade-row>span {display:flex;gap:0}.unit-upgrade-row em {font-style:normal;color:#7dff6b}.unit-upgrade-row.is-future em {color:inherit}.unit-upgrade-row.is-future {color:var(--slate-800)}
.unit-passive-summary {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:25px;padding:16px;background:var(--slate-500);border-radius:12px;color:white}.unit-passive-summary>span {font-size:12px}
.detail-stats {margin-top:22px}
.defeat-tip.detail-callout {margin-top:22px;text-transform:none}.detail-callout .defeat-tip-title {text-transform:uppercase}.detail-callout em {font-style:normal;color:#85ef28}
.friend-detail .modal-body>.btn {display:block;width:100%;margin:22px 0 0}
.unit-evo-reminder {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px;color:var(--slate-800);font-size:12px}.unit-evo-reminder>span {display:flex;align-items:center;gap:3px}.unit-evo-reminder i {font-style:normal}.unit-evo-reminder small {flex-basis:100%;text-align:center;font-size:10px}
@media(max-width:360px){.unit-overview{grid-template-columns:85px minmax(0,1fr);gap:10px}.unit-portrait>svg{width:76px;height:76px}.unit-description{padding:12px 10px}.unit-description>p{font-size:13px}.unit-upgrade-row{font-size:12px;padding-inline:10px;gap:7px}.unit-description>h3{font-size:16px}
}