/* The rewards board: its Dailies, Missions and Chapter Rewards tabs, with their rows, chests and claim buttons. */
[data-modal-type="quests"] .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
[data-modal-type="daily"] .modal-body {
  min-height: 0;
  overscroll-behavior: contain;
}
.quest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--slate-500);
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  margin: 9px 0;
  padding: 12px 8px;
  text-align: left;
}
.quest-row > div {
  flex: 1;
}
.quest-row b {
  font-size: 11px;
}
.quest-row small {
  display: block;
  font-size: 10px;
  margin: 5px 0;
  color: #d4e5df;
}
.quest-row .btn {
  padding: 6px 9px;
}
.quest-row progress {
  width: 100%;
  height: 6px;
  accent-color: #a9df57;
  display: block;
}
.quest-row .btn.claimed {
  background: var(--slate-500);
  color: #e4edf1;
  box-shadow: none;
  opacity: 1;
}
.quest-row.is-claimed {
  border-color: #80a29b;
}
.daily-track {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--slate-500);
  border-radius: 12px;
  padding: 12px 6px;
}
.daily-points {
  display: grid;
  place-items: center;
  min-width: 36px;
  color: white;
}
.daily-chests {
  flex: 1;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 13px;
}
.daily-chest {
  position: relative;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: white;
  padding: 0;
  min-width: 0;
  z-index: 1;
}
.daily-chest:disabled {
  opacity: 0.65;
}
.daily-chest em {
  position: absolute;
  right: 0;
  top: -6px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  padding: 1px 5px;
}
.daily-chests progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  accent-color: #a5e924;
}
.daily-reset {
  font-size: 12px !important;
  color: var(--slate-900) !important;
}
.daily-gift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background: #fff0bf;
  border-radius: 10px;
  margin-bottom: 12px;
  color: var(--slate-900);
}
.daily-gift-row > span:first-child {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 2px 9px;
  text-align: left;
}
/* The streak day on a yellow shield: main shade for the badge, top shade for its highlight. */
.daily-streak-badge {
  grid-row: span 3;
  display: grid;
  place-items: center;
  align-content: center;
  height: 52px;
  background: var(--yellow);
  box-shadow: inset 0 4px var(--yellow-top);
  border: 3px solid var(--ink);
  border-radius: 8px 8px 50% 50% / 8px 8px 30% 30%;
  color: white;
  font-family: "Lilita One", sans-serif;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.objectives-modal .daily-streak-badge b {font-size:20px;line-height:1}
.objectives-modal .daily-streak-badge small {font:12px/1 "Lilita One",sans-serif;color:white;-webkit-text-stroke:2px var(--ink)}
/* Seven pips for the reward week; the last, bigger one is the big day. */
.daily-week {display:flex;align-items:center;gap:3px;margin-top:2px}
.daily-week i {width:14px;height:6px;border-radius:3px;background:var(--slate-700)}
.daily-week i.big {width:20px;height:8px;background:var(--yellow-soft)}
.daily-week i.done {background:var(--green-top)}
.daily-week i.today {background:var(--yellow-top);box-shadow:0 0 0 2px var(--ink)}
.daily-gift-row small {
  font:
    11px/1.4 Arial,
    sans-serif;
}
.daily-gift-row .btn {
  padding: 9px;
}
.daily-task {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: var(--slate-500);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  margin: 9px 0;
  padding: 10px 8px;
  color: white;
}
.daily-task-points {
  display: grid;
  place-items: center;
  min-width: 36px;
}
.daily-task > div {
  flex: 1;
  min-width: 0;
}
.daily-task > div > b {
  display: block;
  font-size: 13px;
  line-height: 1.3;
}
.daily-task progress {
  display: block;
  width: 100%;
  height: 14px;
  accent-color: #a6df20;
  margin-top: 5px;
}
.daily-task small {
  display: block;
  text-align: center;
  font:
    11px Arial,
    sans-serif;
}
.daily-task .btn {
  padding: 8px 6px;
  min-width: 64px;
}

/* Reward alerts stay circular regardless of inherited display fonts. */
.daily-chest em { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; font: 900 18px/1 Arial, sans-serif; font-style: normal; border: 2px solid white; box-shadow: 0 2px 0 var(--slate-900); box-sizing: border-box; }

.daily-claim-all { display: flex; justify-content: center; margin: -6px 0 16px; }
.daily-claim-all .btn { width: 100%; }

/* Finished objectives sit below actionable rewards and upcoming tasks. */
.daily-task-list {display:flex;flex-direction:column}
.daily-task-list > .is-claimed {order:1}
.daily-task.is-claimed,.daily-gift-row.is-claimed,.quest-row.is-claimed {
  background:var(--slate);border-color:var(--slate-300);color:#dce7ed;
}
.task-complete-mark {display:grid;place-items:center;flex:0 0 56px}
.task-complete-mark {color:#8ee244}
.task-complete-mark svg {width:40px;height:40px}
.quest-row.is-claimed progress {height:10px;accent-color:var(--green)}

/* Rewards board: generous, consistent rows with inset progress and side rewards. */
/* The frame's bottom strip matches the footer so its rounded corners can't anti-alias against light slate. */
.objectives-modal {height:min(780px,88dvh);max-width:610px;background:linear-gradient(to top,var(--slate-800) 24px,var(--slate-300) 0);border:3px solid var(--slate-900);border-radius:15px}
.objectives-modal .modal-title {font-family:"Lilita One",sans-serif;font-size:28px;padding:17px 48px;background:var(--yellow);color:white;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;box-shadow:inset 0 4px var(--yellow-top);border-bottom:4px solid var(--slate-700)}
.objectives-modal .close-modal {width:44px;height:44px;right:-7px;top:-17px;font-size:36px;line-height:30px;z-index:2}
.objectives-modal .modal-body {flex:1;min-height:0;padding:14px 13px 20px;overscroll-behavior:contain}
.objectives-modal .daily-track {padding:12px 7px 8px;border-radius:17px;border-top:4px solid var(--slate-700);box-shadow:0 3px #c0d3e1;background:var(--slate-500);gap:8px}
.objectives-modal .daily-points {font-size:20px;width:44px}
.objectives-modal .daily-points svg {width:44px;height:44px}
.objectives-modal .daily-chests {padding-bottom:0;isolation:isolate;align-items:center}
.objectives-modal .daily-chest {min-height:61px;font-size:18px;gap:3px}
.objectives-modal .daily-chest:disabled {opacity:1;filter:none}
/* Opened chests keep the open art, dimmed so the ones still to earn stand out. */
.objectives-modal .daily-chest.claimed > svg {filter:brightness(.6)}
.objectives-modal .daily-chests progress {top:17px;bottom:auto;height:16px;z-index:-1;appearance:none;border:2px solid var(--slate-900);background:var(--slate-900);border-radius:0}
.objectives-modal .daily-chests progress::-webkit-progress-bar {background:var(--slate-900)}
.objectives-modal .daily-chests progress::-webkit-progress-value {background:var(--green-top);box-shadow:inset 0 -3px var(--green)}
.objectives-modal .daily-chests progress::-moz-progress-bar {background:var(--green-top)}
.objectives-modal .daily-reset {font-size:16px!important;color:white!important;margin:12px 0;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.objectives-modal .daily-claim-all {justify-content:flex-end;margin:12px 0 17px}
.objectives-modal .daily-claim-all .btn {width:auto;padding:8px 18px}
.objectives-modal .objective-row {display:grid;grid-template-columns:62px minmax(0,1fr) 94px;gap:10px;align-items:center;margin:0 0 14px;padding:9px 8px 9px 0;border:0;border-radius:14px;background:var(--slate-500);color:white;box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df;min-height:90px;text-align:left}
.objectives-modal .objective-reward {display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;gap:0;padding:4px;background:var(--slate-500);border-right:3px solid var(--slate-300);border-radius:13px 0 0 13px;font-size:17px;text-align:center}
.objectives-modal .objective-reward small {display:flex;align-items:center;gap:3px;font:13px "Lilita One",sans-serif}
.objectives-modal .objective-detail {min-width:0}
.objectives-modal .objective-detail>b {display:block;font-size:15px;text-transform:uppercase;line-height:1.15;margin-bottom:9px;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}
.objective-progress {position:relative;height:23px;background:var(--slate-900);border:2px solid var(--slate-900);border-radius:0 10px 10px 0;overflow:hidden;text-align:center}
.objective-progress i {position:absolute;inset:0 auto 0 0;background:var(--green-top);box-shadow:inset 0 -4px var(--green)}
.objective-progress b {position:relative;display:block;color:white;font-size:16px;line-height:19px;-webkit-text-stroke:2px var(--slate-950);paint-order:stroke fill}
.objectives-modal .objective-row .btn {width:100%;min-width:0;padding:8px 3px;white-space:normal}
.objectives-modal .objective-row.is-claimed {opacity:.7}
.objectives-modal .task-complete-mark {justify-self:center}
.objectives-modal .daily-gift-row {margin:0 0 16px;padding:12px 9px;background:var(--slate-500);color:white;box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df;border-radius:14px}
.objectives-modal .daily-gift-row b {text-transform:uppercase;font-size:16px}
.objectives-modal .daily-gift-row small {font:11px "Lilita One",sans-serif;color:#f9edbd}
.objectives-modal .daily-gift-rewards {display:flex;gap:10px;font-size:13px!important}
.objectives-modal .daily-gift-rewards i {display:inline-flex;align-items:center;gap:3px;font-style:normal}
.objectives-modal .daily-gift-row .btn {min-width:94px;}
/* Match the task rows' right padding so every check sits on one vertical line. */
.objectives-modal .daily-gift-row {padding-right:8px}
.objectives-modal .daily-gift-row .task-complete-mark {flex:0 0 40px;margin-right:27px}
.objectives-modal .daily-gift-row > span:first-child {min-width:0}
.objectives-modal .daily-gift-rewards {flex-wrap:wrap;row-gap:2px}
.mission-overview {display:flex;align-items:center;gap:13px;padding:12px;background:var(--slate-500);border-radius:14px;text-align:left;color:white;box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df}
.mission-overview b {display:block;font-size:19px;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill}.mission-overview small {display:block;margin-top:5px;color:#e2edf5;font-size:12px}
.objective-tabs {display:flex;flex-shrink:0;gap:6px;padding:0 12px 8px;background:var(--slate-300);border-radius:0 0 12px 12px}
@media(max-width:360px){.objectives-modal .modal-body{padding:12px 8px}.objectives-modal .objective-row{grid-template-columns:48px minmax(0,1fr) 74px;gap:7px}.objectives-modal .objective-detail>b{font-size:13px}.objectives-modal .objective-reward{font-size:15px}.objectives-modal .daily-chest svg{width:31px;height:31px}.objectives-modal .daily-points{width:32px}.objectives-modal .daily-points svg{width:34px;height:34px}.objectives-modal .daily-reset{font-size:14px!important}
}

/* A separate footer anchors rewards navigation below the scrolling list. */
.objectives-modal .objective-tabs {position:relative;gap:7px;padding:0 10px 12px;background:var(--slate-800);border-top:4px solid var(--slate-900);box-shadow:0 -4px 0 var(--slate-200);isolation:isolate}
/* Rewards tabs hang from the top edge of the bar: no top border or top corners, taller than a plain tab. */
.objective-tabs button {border-top:0;border-radius:0 0 10px 10px;padding-top:13px}
@media(max-width:400px){.objectives-modal .modal-title {font-size:23px;padding:19px 44px}
}
@media(max-width:380px){.objectives-modal .objective-tabs {gap:5px;padding:0 8px 10px}
}
/* Chapter rewards on the board: milestones are objective rows, like missions. */
.objectives-modal .chapter-overview b {text-transform:uppercase}
.objectives-modal .chapter-overview small {color:#fff2cc}
.objectives-modal .chapter-overview {justify-content:space-between;text-align:center}
.objectives-modal .chapter-overview-info {flex:1;min-width:0}
.objectives-modal .chapter-overview-info small {margin:0 0 2px;font-size:11px;letter-spacing:.5px}
.objectives-modal .chapter-overview-arrow:disabled {opacity:.35}
.objectives-modal .chapter-overview-stars {display:flex;justify-content:center;gap:2px;margin-top:6px}
.objectives-modal .chapter-overview-stars svg {width:22px;height:22px}
.objectives-modal .chapter-milestones {display:block}
.objectives-modal .chapter-milestone-star {display:inline-flex}
.objectives-modal .quest-row.objective-row {grid-template-columns:minmax(0,1fr) 94px;padding-left:14px}
.objectives-modal .chapter-milestone.is-claimed {opacity:.7}
.objectives-modal .objective-row .btn {padding:8px 3px}
@media(max-width:360px) {
  .objectives-modal .objective-row {grid-template-columns:44px minmax(0,1fr) 86px;gap:6px}
  .objectives-modal .quest-row.objective-row {grid-template-columns:minmax(0,1fr) 86px;padding-left:10px}
  .objectives-modal .daily-gift-row .task-complete-mark {margin-right:23px}
  .objectives-modal .daily-gift-row .btn {min-width:86px}
}
.chapter-overview-arrow .round-chevron {width:19px;height:19px}

/* The Rewards popup (src/ui/reward-popup.js): what a claim gave, as tiles over a dark scrim.
   Tiles are small badges, so they take a main shade with its top shade as a band. */
.reward-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: #080f17d9;
  cursor: pointer;
  outline: none;
  animation: reward-popup-fade .18s ease-out;
}
.reward-popup-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 28px;
  letter-spacing: 1px;
}
.reward-popup-title i {
  font-style: normal;
  font-size: 18px;
  letter-spacing: 4px;
}
.reward-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 300px;
}
/* Sized like the Bag's tiles (crates.css .inventory-bag-modal .bag-resource). */
.reward-tile {
  --tile: var(--gray);
  --tile-top: var(--gray-top);
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  padding: 3px;
  border: 2px solid var(--slate-950);
  border-radius: 11px;
  background: var(--tile);
  box-shadow: inset 0 3px var(--tile-top);
  animation: reward-tile-pop .34s cubic-bezier(.3, 1.6, .5, 1) both;
  animation-delay: var(--tile-delay, 0ms);
}
.reward-tile > .painted-sprite, .reward-tile > .epic-key, .reward-tile > svg {width: 83%; height: 83%}
.reward-tile .epic-key svg {width: 100%; height: 100%}
/* Fixed at the Bag's phone size: the tile doesn't grow with the viewport, so neither can
   the text, or a long amount (×3,950) spills out of the tile on wide screens. */
.reward-tile b {
  position: absolute;
  right: 4px;
  bottom: 2px;
  max-width: calc(100% - 6px);
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
  color: white;
  -webkit-text-stroke: 2px var(--slate-950);
  paint-order: stroke fill;
}
.reward-tile-points {--tile: var(--cream); --tile-top: white}
/* The same tile colors as the Shop and My Stash: gold on green, gems on purple, energy on blue,
   and XP and every key on cream, like the stars (the art tells them apart). */
.reward-tile-gold {--tile: var(--green); --tile-top: var(--green-top)}
.reward-tile-gems {--tile: var(--purple); --tile-top: var(--purple-top)}
.reward-tile-xp,.reward-tile-keys,.reward-tile-epicKeys,.reward-tile-legendaryKeys {--tile: var(--cream); --tile-top: white}
.reward-tile-energy {--tile: var(--blue); --tile-top: var(--blue-top)}
.reward-popup-hint {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--slate-200);
}
@keyframes reward-popup-fade {from {opacity: 0}}
/* Reward flight (src/ui/reward-flight.js): the popup's rewards fly to their counter or the bag. */
.reward-flight {position: fixed; inset: 0; z-index: 91; pointer-events: none; overflow: hidden}
.reward-flight-sprite {position: absolute; left: 0; top: 0; offset-anchor: center; offset-rotate: 0deg; filter: drop-shadow(0 2px 0 #080f1799)}
.reward-flight-sprite svg {display: block}
.reward-flight-trails {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round}
.reward-flight-bag {position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; font-family: "Lilita One", Arial, sans-serif; filter: drop-shadow(0 3px 0 #080f1799)}
.reward-flight-bag small {font-size: 13px; white-space: nowrap; color: white; -webkit-text-stroke: 3px var(--slate-900); paint-order: stroke fill}
/* A dialog's scrim covers the top bar; lift the bar while its counters take the rewards. */
.resource-bar.is-receiving {z-index: 21}
@keyframes reward-tile-pop {
  from {transform: scale(.3); opacity: 0}
  to {transform: scale(1); opacity: 1}
}
/* A mission's reward, between its title and progress bar, drawn like the daily gift's. */
.objectives-modal .objective-rewards {display:flex;flex-wrap:wrap;gap:2px 10px;margin:-4px 0 7px;font-size:13px}
.objectives-modal .objective-rewards i {display:inline-flex;align-items:center;gap:3px;font-style:normal}

/* Unclaimed daily gift and unlocked chests call for a tap: the gift's frame pulses in the yellow
   top shade, chests bob. The streak item in the gift's reward line wears a yellow pill. */
@keyframes daily-ready-pulse {50% {box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df,0 0 0 4px var(--yellow-top)}}
@keyframes daily-chest-bob {50% {translate:0 -4px}}
.objectives-modal .daily-gift-row.is-ready {box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df,0 0 0 2px var(--yellow-top);animation:daily-ready-pulse 1.4s ease-in-out infinite}
.objectives-modal .daily-chest.is-ready svg {animation:daily-chest-bob 1s ease-in-out infinite}
.objectives-modal .daily-gift-base {display:inline-flex;gap:3px;margin-left:6px;vertical-align:-2px}
.objectives-modal .daily-gift-rewards .streak-bonus {display:inline-flex;align-items:center;gap:6px;padding:1px 7px;border-radius:9px;background:var(--yellow);color:white;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
@media (prefers-reduced-motion:reduce) {
  .objectives-modal .daily-gift-row.is-ready,.objectives-modal .daily-chest.is-ready svg {animation:none}
}
/* Dailies: the refresh timer on the left shares Claim All's row. */
.objectives-modal .daily-claim-all.with-reset {justify-content:space-between;align-items:center;gap:8px}
.objectives-modal .daily-claim-all.with-reset .daily-reset {margin:0;text-align:left}
/* Done rows swap the button for a check: shrink that column so the check hugs the right edge and the title gets the room. */
.objectives-modal .objective-row.is-claimed {grid-template-columns:62px minmax(0,1fr) 44px}
.objectives-modal .quest-row.objective-row.is-claimed {grid-template-columns:minmax(0,1fr) 44px}
.objectives-modal .objective-row .task-complete-mark {justify-self:end}
.objectives-modal .daily-gift-row .task-complete-mark {margin-right:0}
@media(max-width:360px) {
  .objectives-modal .objective-row.is-claimed {grid-template-columns:44px minmax(0,1fr) 44px}
  .objectives-modal .quest-row.objective-row.is-claimed {grid-template-columns:minmax(0,1fr) 44px}
}