/* ===== Quest page redesign to match provided iPhone mockup ===== */
.quests-mock-page {
  background:
    linear-gradient(180deg, rgba(5,9,16,.66) 0%, rgba(5,9,16,.78) 100%),
    #050911 !important;
}
.quests-mock-page .secondary-page-header {
  
  
  margin: 0 4px;
  
  border-radius: 10px 10px 0 0;
  
  
  border: 1px solid rgba(209,166,89,.26);
  box-shadow: inset 0 -40px 52px rgba(4,8,15,.72);
}
.quests-mock-page .secondary-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,15,25,.02) 0%, rgba(8,15,25,.12) 42%, rgba(8,15,25,.78) 100%);
  pointer-events: none;
}
.quests-mock-page .secondary-page-header .secondary-page-title {
  position: absolute;
  left: 16px;
  right: 16px;
  
  
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.quests-mock-page .secondary-page-header .secondary-page-title h2 {
  
  
  color: #f3c66a !important;
  text-transform: uppercase;
  
}
.quests-mock-page .secondary-page-header .secondary-page-title span {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(233,181,84,.85), transparent);
  position: relative;
}
.quests-mock-page .secondary-page-header .secondary-page-title span::after {
  content: "✦";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-53%);
  font-size: .6rem;
  color: rgba(236,194,108,.8);
}
.quests-mock-page .secondary-page-header .secondary-page-title span:last-child::after {
  right: auto;
  left: -6px;
}

.quests-mock-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: -8px 4px 4px !important;
  
  border-radius: 10px !important;
  
  
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02) !important;
  overflow: hidden;
}
.quests-mock-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(236,201,128,.08);
  pointer-events: none;
}
.quests-mock-switch {
  flex: 0 0 42px !important;
  
  
  
  
  gap: 0 !important;
  
  
  
}
.quests-mock-switch button {
  
  
  
  
  text-transform: uppercase;
  padding: 0 8px !important;
}


.quests-mock-list {
  
  
  display: flex;
  flex-direction: column;
  
  overflow: hidden;
}
.quests-mock-row {
  
  display: grid !important;
  
  
  
  
  
  
  
  
  
  
  
}
.quests-mock-row::before,
.quests-mock-row::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid rgba(230,187,103,.82);
  pointer-events: none;
}
.quests-mock-row::before {
  
  border-right: 0;
  border-bottom: 0;
}
.quests-mock-row::after {
  inset: auto 4px 4px auto;
  border-left: 0;
  border-top: 0;
}
.quests-mock-row.completed {
  box-shadow: inset 0 0 0 1px rgba(236,198,103,.05), 0 0 0 1px rgba(236,198,103,.04);
}
.quest-mock-icon-shell {
  
  
  
  display: grid;
  place-items: center;
  
  
  
}

.quest-mock-main {
  
  display: flex;
  flex-direction: column;
  
  
}


.quest-mock-meter { display: block; }
.quest-mock-meter .progress-track {
  width: 100%;
  
  
  
  
  overflow: hidden;
}

.quest-mock-reward {
  
  display: flex;
  
  justify-content: center;
  
  
}
.quest-mock-coin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f1ca77 !important;
  font-size: .92rem !important;
}
.quest-mock-coin strong {
  font-weight: 600;
  color: #f1ca77;
}
.quest-mock-coin-badge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #f9dd92, #d59837 62%, #a66a1e 100%);
  color: #684113;
  box-shadow: inset 0 1px 0 rgba(255,250,235,.45), 0 0 0 1px rgba(255,214,139,.30);
  font-size: .9rem;
}
.quest-mock-claim {
  
  
  border-radius: 8px !important;
  
  letter-spacing: .08em !important;
}
.quest-mock-done {
  font-size: 1.2rem;
  color: #93d97f;
  text-shadow: 0 0 10px rgba(124,211,95,.24);
}
.quests-mock-quote-strip {
  
  
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(217,172,88,.28);
  background: linear-gradient(180deg, rgba(10,21,37,.96), rgba(8,17,30,.98));
}
.quests-mock-quote-text {
  color: #e1c995;
  font-size: .72rem;
  line-height: 1.2;
  font-style: italic;
  text-align: center;
}
.quests-mock-quote-accent {
  color: #d8af60;
  font-size: .8rem;
  text-align: center;
}

body[data-theme="light"] .quests-mock-page {
  background: linear-gradient(180deg, #f4ead6, #e9dbc0) !important;
}
body[data-theme="light"] .quests-mock-page .secondary-page-header {
  background:
    linear-gradient(180deg, rgba(251,244,228,.08), rgba(95,70,33,.18)),
    url("../assets/bg_focus_mockup_scene.webp") center 25% / cover no-repeat !important;
}
body[data-theme="light"] .quests-mock-page .secondary-page-header::before {
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,247,227,.04) 36%, rgba(49,30,8,.42) 100%);
}
body[data-theme="light"] .quests-mock-page .secondary-page-header .secondary-page-title h2 { color: #fff2cf !important; }
body[data-theme="light"] .quests-mock-body {
  background: linear-gradient(180deg, rgba(253,247,235,.98) 0%, rgba(241,230,203,.98) 100%) !important;
  border-color: rgba(190,138,57,.34) !important;
}
body[data-theme="light"] .quests-mock-switch {
  background: linear-gradient(180deg, rgba(253,246,232,.98), rgba(241,229,201,.98)) !important;
  border-color: rgba(188,138,57,.34) !important;
}
body[data-theme="light"] .quests-mock-switch button { color: #7e541f !important; }
body[data-theme="light"] .quests-mock-switch button.active {
  color: #59350e !important;
  background: linear-gradient(180deg, #f5cd76, #e5ac4f) !important;
}
body[data-theme="light"] .quests-mock-row {
  background: linear-gradient(180deg, rgba(255,250,241,.99) 0%, rgba(246,237,216,.99) 100%) !important;
  border-color: rgba(188,136,56,.30) !important;
}
body[data-theme="light"] .quest-mock-icon-shell {
  background: radial-gradient(circle at 30% 28%, rgba(255,243,216,.96), rgba(240,225,195,.98) 72%);
}


body[data-theme="light"] .quest-mock-meter .progress-track { background: linear-gradient(180deg, rgba(208,185,141,.30), rgba(239,229,207,.50)); }
body[data-theme="light"] .quests-mock-quote-strip {
  background: linear-gradient(180deg, rgba(255,250,242,.98), rgba(244,235,216,.98));
  border-color: rgba(188,136,56,.28);
}
body[data-theme="light"] .quests-mock-quote-text { color: #7f5b34; }
body[data-theme="light"] .quests-mock-quote-accent { color: #b27c28; }

@media (max-width: 390px) {
  .quests-mock-page .secondary-page-header {
    
    
    padding: 14px 10px 10px !important;
  }
  .quests-mock-page .secondary-page-header .secondary-page-title {
    left: 12px;
    right: 12px;
    
    gap: 10px;
  }
  
  
  .quests-mock-switch {
    flex-basis: 38px !important;
    
    
  }
  
  
  
  
  
  
  
  
  .quest-mock-coin { font-size: .82rem !important; gap: 6px; }
  .quest-mock-coin-badge { width: 30px; height: 30px; font-size: .82rem; }
  .quest-mock-claim {  min-height: 30px;  }
  .quests-mock-quote-strip {
    flex-basis: 48px;
    min-height: 48px;
    margin-top: 7px;
    padding: 8px 12px;
  }
  .quests-mock-quote-text { font-size: .66rem; }
}

/* ===== Quest + stats dark refinement / filigree pass ===== */
body[data-theme="dark"] .quests-mock-page,
body[data-theme="dark"] .stats-mock-page {
  background: linear-gradient(180deg, rgba(3,7,14,.98) 0%, rgba(4,8,15,1) 100%) !important;
}
body[data-theme="dark"] .quests-mock-body,
body[data-theme="dark"] .stats-mock-page > .iphone-surface {
  background: linear-gradient(180deg, rgba(8,15,26,.985) 0%, rgba(6,11,19,.99) 100%) !important;
  border-color: rgba(217,171,82,.30) !important;
}
body[data-theme="dark"] .stats-mock-summary-tile,
body[data-theme="dark"] .stats-mock-goal-row,
body[data-theme="dark"] .stats-mock-detail-row,
body[data-theme="dark"] .stats-mock-lifetime-panel {
  background: linear-gradient(180deg, rgba(11,22,39,.96), rgba(7,15,27,.98)) !important;
  border-color: rgba(221,176,89,.24) !important;
}
body[data-theme="dark"] .stats-mock-chart-shell,
body[data-theme="dark"] .stats-range-select-shell {
  background: linear-gradient(180deg, rgba(11,21,37,.98), rgba(8,15,26,.98)) !important;
  border-color: rgba(219,175,89,.26) !important;
}

/* ornate filigree around text blocks, different from the existing stats frame art */
.quests-mock-page .secondary-page-title h2,
.quest-mock-main,
.quests-mock-quote-text,
.stats-mock-section-title,
.stats-mock-caption,
.stats-mock-detail-copy,
.stats-mock-lifetime-copy,
.stats-mock-goal-main,
.stats-mock-goal-side,
.stats-mock-value {
  position: relative;
}
.quest-mock-main,
.stats-mock-detail-copy,
.stats-mock-lifetime-copy,
.stats-mock-goal-main,
.stats-mock-goal-side {
  padding: 4px 10px;
}
.quest-mock-main::before,
.quest-mock-main::after,
.stats-mock-detail-copy::before,
.stats-mock-detail-copy::after,
.stats-mock-lifetime-copy::before,
.stats-mock-lifetime-copy::after,
.stats-mock-goal-main::before,
.stats-mock-goal-main::after,
.stats-mock-goal-side::before,
.stats-mock-goal-side::after,
.stats-mock-section-title::before,
.stats-mock-section-title::after,
.quests-mock-quote-text::before,
.quests-mock-quote-text::after,
.stats-mock-caption::before,
.stats-mock-caption::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.quest-mock-main::before,
.stats-mock-detail-copy::before,
.stats-mock-lifetime-copy::before,
.stats-mock-goal-main::before,
.stats-mock-goal-side::before,
.stats-mock-section-title::before,
.quests-mock-quote-text::before,
.stats-mock-caption::before {
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background:
    radial-gradient(circle at left center, rgba(241,205,118,.88) 0 1.2px, transparent 1.5px) left 4px center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(226,181,92,.86) 14px, rgba(226,181,92,.24) calc(100% - 14px), transparent 100%);
  opacity: .8;
}
.quest-mock-main::after,
.stats-mock-detail-copy::after,
.stats-mock-lifetime-copy::after,
.stats-mock-goal-main::after,
.stats-mock-goal-side::after,
.stats-mock-section-title::after,
.quests-mock-quote-text::after,
.stats-mock-caption::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background:
    radial-gradient(circle at right center, rgba(241,205,118,.88) 0 1.2px, transparent 1.5px) right 4px center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(226,181,92,.24) 14px, rgba(226,181,92,.86) calc(100% - 14px), transparent 100%);
  opacity: .8;
}
.stats-mock-section-title {
  display: inline-block;
  padding: 5px 16px;
  
  
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.stats-mock-section-title::before,
.stats-mock-section-title::after {
  height: 10px;
}

/* quest page rows */




.quest-mock-main {
  
  
  
  padding-top: 2px;
}





.quest-mock-reward-stack {
  
  display: flex;
  
  
  
  
}

.quest-mock-unlock-reward {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #f1cf86;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: center;
}

.quest-mock-unlock-reward img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.42));
}
.quest-mock-reward-line {
  display: inline-flex;
  
  
  color: #f1cf86;
  
  letter-spacing: .02em;
  
}

.quest-mock-reward-medal {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .74rem;
  color: #6f4514;
  background: radial-gradient(circle at 32% 28%, #f9e1a0, #db9e3c 62%, #a96b20 100%);
  box-shadow: inset 0 1px 0 rgba(255,245,217,.44), 0 0 0 1px rgba(255,222,152,.24);
}
.quest-mock-reward-medal.xp {
  color: #5f3a12;
  background: radial-gradient(circle at 32% 28%, #f5da96, #c98935 62%, #8b561d 100%);
}
.quest-mock-claim {
  
  align-self: flex-start;
}
.quest-mock-status.claimed {
  color: #92da81;
  
  
}
body[data-theme="light"] .quest-mock-progress-copy { color: #3d3428 !important; }
body[data-theme="light"] .quest-mock-title { color: #7b4f1f !important; }

/* stats page darker / more cohesive */
body[data-theme="dark"] .stats-mock-page > .secondary-page-header {
  background:
    linear-gradient(180deg, rgba(5,10,17,.10), rgba(5,10,17,.48)),
    url("../assets/bg_focus_mockup_scene.webp") center 20% / cover no-repeat !important;
  border: 1px solid rgba(217,171,82,.26);
  box-shadow: inset 0 -34px 50px rgba(4,8,15,.72);
}
body[data-theme="dark"] .stats-mock-page > .secondary-page-header .secondary-page-title h2 {
  color: #f2c774 !important;
}
body[data-theme="dark"] .stats-mock-summary-icon,
body[data-theme="dark"] .stats-mock-goal-icon,
body[data-theme="dark"] .stats-mock-detail-icon,
body[data-theme="dark"] .stats-mock-lifetime-icon {
  filter: grayscale(.24) sepia(.96) saturate(1.15) brightness(1.03) drop-shadow(0 2px 4px rgba(0,0,0,.24));
}
body[data-theme="dark"] .stats-mock-value { color: #f2dfbc !important; }
body[data-theme="dark"] .stats-mock-caption { color: #cfb07a !important; padding: 4px 7px; }
body[data-theme="dark"] .stats-mock-goal-name,
body[data-theme="dark"] .stats-mock-detail-copy strong,
body[data-theme="dark"] .stats-mock-lifetime-copy strong {
  color: #f1cd87 !important;
}
body[data-theme="dark"] .stats-mock-goal-sub,
body[data-theme="dark"] .stats-mock-detail-copy span,
body[data-theme="dark"] .stats-mock-goal-side span,
body[data-theme="dark"] .stats-mock-lifetime-copy span,
body[data-theme="dark"] .stats-y-ticks span,
body[data-theme="dark"] .stats-x-label {
  color: #ebe8e3 !important;
}
body[data-theme="dark"] .stats-mock-goal-track {
  background: linear-gradient(180deg, rgba(6,10,18,.94), rgba(12,19,31,.90));
  border-color: rgba(224,180,91,.24);
}
body[data-theme="dark"] .stats-mock-chart {
  background: linear-gradient(to bottom,
    rgba(214,171,89,.14) 0 1px,
    transparent 1px calc(50% - .5px),
    rgba(214,171,89,.10) calc(50% - .5px) calc(50% + .5px),
    transparent calc(50% + .5px) calc(100% - 17px),
    rgba(214,171,89,.16) calc(100% - 17px) calc(100% - 16px),
    transparent calc(100% - 16px)) !important;
}
body[data-theme="dark"] .stats-mock-chart .stats-bar-button .iphone-bar {
  background: linear-gradient(180deg, rgba(31,52,81,.96), rgba(16,27,43,.98)) !important;
  border-radius: 4px 4px 1px 1px !important;
  border-color: rgba(239,195,101,.44) !important;
}
body[data-theme="dark"] .stats-mock-chart .stats-bar-button.selected .iphone-bar,
body[data-theme="dark"] .stats-mock-chart .stats-bar-button:focus-visible .iphone-bar {
  background: linear-gradient(180deg, #efc668, #b77424) !important;
}

@media (max-width: 390px) {
  
  
  
  
  
  
  .quest-mock-reward-medal { width: 24px; height: 24px; font-size: .68rem; }
  .quest-mock-main,
  .stats-mock-detail-copy,
  .stats-mock-lifetime-copy,
  .stats-mock-goal-main,
  .stats-mock-goal-side { padding: 4px 8px; }
}

/* ===== quest card asset/border/icon cleanup ===== */
/* Remove the decorative highlight lines sitting over text. */
.quest-mock-main::before,
.quest-mock-main::after,
.stats-mock-detail-copy::before,
.stats-mock-detail-copy::after,
.stats-mock-lifetime-copy::before,
.stats-mock-lifetime-copy::after,
.stats-mock-goal-main::before,
.stats-mock-goal-main::after,
.stats-mock-goal-side::before,
.stats-mock-goal-side::after,
.stats-mock-section-title::before,
.stats-mock-section-title::after,
.quests-mock-quote-text::before,
.quests-mock-quote-text::after,
.stats-mock-caption::before,
.stats-mock-caption::after {
  display: none !important;
}


.quests-mock-row::before,
.quests-mock-row::after {
  display: none !important;
}

.quests-mock-row::marker { display:none; }
.quests-mock-row::selection { background: transparent; }
.quests-mock-row::backdrop { background: transparent; }



.quests-mock-row::after,
.quests-mock-row::before { content: none !important; }
.quests-mock-row {
  background-image: linear-gradient(180deg, rgba(8,20,38,.98), rgba(6,14,28,.99));
}
.quests-mock-row > .quest-card-frame-overlay {
  display:none;
}




.quest-mock-title {
  margin-top: 0 !important;
  
  
}


.quest-mock-meter .progress-track {
  
  border-color: rgba(226,180,90,.28) !important;
}



.quest-reward-icon {
  
  
  
  
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.24));
}





/* darker, more mockup-like stats backdrop */
body[data-theme="dark"] .stats-mock-page > .iphone-surface,
body[data-theme="dark"] .stats-mock-page {
  background-color: #060e1a !important;
}




/* ===== Final quest/stats refinement pass ===== */
/* Restore gold gradient bars in stats and stop gold-washing stats icons. */
body[data-theme="dark"] .stats-mock-chart .stats-bar-button .iphone-bar,
body[data-theme="light"] .stats-mock-chart .stats-bar-button .iphone-bar {
  background: linear-gradient(180deg, #f0c969 0%, #d28f30 100%) !important;
  border-color: rgba(246, 213, 126, .46) !important;
  border-radius: 4px 4px 1px 1px !important;
  box-shadow: inset 0 0 10px rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.14) !important;
}
body[data-theme="dark"] .stats-mock-chart .stats-bar-button.selected .iphone-bar,
body[data-theme="dark"] .stats-mock-chart .stats-bar-button:focus-visible .iphone-bar,
body[data-theme="light"] .stats-mock-chart .stats-bar-button.selected .iphone-bar,
body[data-theme="light"] .stats-mock-chart .stats-bar-button:focus-visible .iphone-bar {
  background: linear-gradient(180deg, #f7d885 0%, #c77821 100%) !important;
}
body[data-theme="dark"] .stats-mock-summary-icon,
body[data-theme="dark"] .stats-mock-goal-icon,
body[data-theme="dark"] .stats-mock-detail-icon,
body[data-theme="dark"] .stats-mock-lifetime-icon,
body[data-theme="light"] .stats-mock-summary-icon,
body[data-theme="light"] .stats-mock-goal-icon,
body[data-theme="light"] .stats-mock-detail-icon,
body[data-theme="light"] .stats-mock-lifetime-icon {
  filter: none !important;
}

/* Darker quest section and tighter vertical positioning. */
.quests-mock-page .secondary-page-header {
  
  
  
  background-position: center 20% !important;
}





/* Only show five cards in the viewport and scroll for more. */





/* Quest card refinements */

.quests-mock-row::before {
  
  
  
  display: block !important;
  
  
  
  
}

.quests-mock-row.completed.repeatable .quest-mock-title,
.quests-mock-row.completed.repeatable .quest-mock-progress-copy,
.quests-mock-row.completed.repeatable .quest-mock-reward-line strong {
  color: rgba(241, 220, 185, .82) !important;
}





.quest-mock-meter {
  
  margin-top: 0 !important;
}








.quest-mock-status.claimed {
  
  
  margin-top: 1px !important;
}
.quest-mock-status-tick {
  width: 100% !important;
  
  
  
  
  
  text-shadow: 0 0 10px rgba(120,208,96,.18) !important;
}
.quest-mock-claim {
  
  
  
  margin-top: 2px !important;
}

/* Move quote strip down slightly below scrolling list while keeping cards higher. */
.quests-mock-quote-strip {
  margin-top: 6px !important;
  flex: 0 0 50px !important;
  min-height: 50px !important;
}

/* Mobile sizing */
@media (max-width: 390px) {
  
  
  
  
  
  
  
  
  
  
  
  
  .quest-mock-claim {  font-size: .5rem !important; }
}

/* ===== User-requested quest/stats cleanup ===== */
/* Remove filigree from Daily Goal and Weekly Goal rows, keep section title styling. */
.stats-mock-goal-main,
.stats-mock-goal-side {
  padding: 0 !important;
}
.stats-mock-goal-main::before,
.stats-mock-goal-main::after,
.stats-mock-goal-side::before,
.stats-mock-goal-side::after {
  display: none !important;
}

/* Raise the Quests page title and cards. */
.quests-mock-page .secondary-page-header {
  
  
  padding-top: 8px !important;
}


.quests-mock-body {
  
  padding-top: 6px !important;
  
}
.quests-mock-switch { margin-bottom: 5px !important; }

/* Darker quest page and visible simple filigree around each quest card. */


.quests-mock-row::before {
  
  
  
  
  
  
  mix-blend-mode: screen;
  
}


/* Remove any shaded rectangle around icons. */
.quest-mock-icon-shell {
  
  
  
  background-image: none !important;
  
  
  outline: none !important;
  overflow: hidden !important;
}



/* Improve quest card text fit and prevent overlap. */
.quest-mock-main {
  
  
  
  
  
  overflow: hidden !important;
}








.quest-mock-reward-line strong {
  
  
  white-space: nowrap !important;
}



/* Keep stats darker but without gold shading on icons; gold bars remain. */
body[data-theme="dark"] .stats-mock-page,
body[data-theme="dark"] .stats-mock-page > .iphone-surface {
  background-color: #060d19 !important;
}
body[data-theme="dark"] .stats-mock-summary-tile,
body[data-theme="dark"] .stats-mock-goal-row,
body[data-theme="dark"] .stats-mock-detail-row,
body[data-theme="dark"] .stats-mock-lifetime-panel,
body[data-theme="dark"] .stats-mock-chart-shell,
body[data-theme="dark"] .stats-range-select-shell {
  background: linear-gradient(180deg, rgba(9,18,33,.98), rgba(6,12,22,.995)) !important;
}

@media (max-width: 390px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  .quest-mock-claim { min-width: 58px !important; }
}

/* ===== Quest quote removal + increased card spacing ===== */
.quests-mock-quote-strip {
  display: none !important;
}
.quests-mock-list {
  flex: 1 1 auto !important;
  
  
  min-height: 0 !important;
  
  padding: 4px 2px 10px 0 !important;
  
}
.quests-mock-row {
  flex: 0 0 88px !important;
  
  
  
}
@media (max-width: 390px) {
  .quests-mock-list {
    
    padding-top: 3px !important;
    padding-bottom: 8px !important;
  }
  .quests-mock-row {
    flex-basis: 84px !important;
    
    
    
  }
}

/* ===== Quests page mockup alignment pass ===== */
body[data-theme="dark"] .quests-mock-page,
body[data-theme="dark"] .iphone-quests-page.quests-mock-page {
  background: linear-gradient(180deg, #020a15 0%, #04101c 34%, #040d18 100%) !important;
}

/* Lift the title area and deepen the scheme to match the provided mockup */
.quests-mock-page .secondary-page-header {
  position: relative;
  flex: 0 0 128px !important;
  min-height: 128px !important;
  padding: 10px 12px 6px !important;
  background:
    linear-gradient(180deg, rgba(4,10,18,.20), rgba(4,10,18,.58)),
    url("../assets/bg_focus_mockup_scene.webp") center 28% / cover no-repeat !important;
  border-bottom: 1px solid rgba(219,174,85,.20) !important;
  overflow: hidden;
}
.quests-mock-page .secondary-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,11,18,.02) 0%, rgba(5,10,18,.0) 50%, rgba(6,11,20,.48) 100%);
  pointer-events: none;
}
.quests-mock-page .secondary-page-header .secondary-page-title {
  bottom: 7px !important;
  z-index: 2;
}
.quests-mock-page .secondary-page-header .secondary-page-title h2 {
  font-size: 1.98rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.46), 0 1px 0 rgba(255,238,195,.08);
}
.quests-mock-page .secondary-page-header .secondary-page-title span {
  margin-top: 6px;
  opacity: .95;
}

.quests-mock-body {
  margin-top: -12px !important;
  padding: 10px 12px 10px !important;
  background: linear-gradient(180deg, rgba(5,11,19,.995) 0%, rgba(4,8,14,1) 100%) !important;
  border: 1px solid rgba(217,171,82,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 -20px 40px rgba(0,0,0,.25);
}

/* Tab control closer to mockup */
.quests-mock-switch {
  margin: 0 0 10px !important;
  min-height: 56px !important;
  background: linear-gradient(180deg, rgba(8,22,40,.98), rgba(7,18,33,.99)) !important;
  border: 1px solid rgba(222,178,91,.42) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 10px rgba(0,0,0,.18);
}
.quests-mock-switch button {
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  color: #e9cc91 !important;
  background: transparent !important;
  border-radius: 10px !important;
  min-height: 46px !important;
}
.quests-mock-switch button.active {
  color: #513110 !important;
  background: linear-gradient(180deg, #f1cb79 0%, #dd993b 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,247,220,.55), 0 1px 8px rgba(0,0,0,.18);
}

/* 5-card viewport with spacing and scroll */
.quests-mock-list {
  height: 520px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  gap: 12px !important;
}
.quests-mock-list::-webkit-scrollbar { width: 6px; }
.quests-mock-list::-webkit-scrollbar-thumb { background: rgba(205,157,74,.44); border-radius: 999px; }
.quests-mock-list::-webkit-scrollbar-track { background: transparent; }

/* Card styling based on mockup */
.quests-mock-row {
  position: relative;
  overflow: hidden !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  grid-template-columns: 88px minmax(0,1fr) 118px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(225,179,90,.28) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(7,19,35,.985) 0%, rgba(5,13,25,.995) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 3px 12px rgba(0,0,0,.16) !important;
}
.quests-mock-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: url("../assets/quest_card_filigree_frame.webp") center/100% 100% no-repeat !important;
  opacity: .98 !important;
}
.quests-mock-row > * {
  position: relative;
  z-index: 2;
}
.quests-mock-row.completed.repeatable {
  opacity: .58 !important;
}

/* Icon area: no rectangle, just gold ring */
.quest-mock-icon-shell {
  width: 72px !important;
  height: 72px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 50% !important;
  border: 2px solid rgba(236,188,95,.92) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255,240,202,.08), 0 2px 7px rgba(0,0,0,.20) !important;
}
.quest-mock-icon-shell::before,
.quest-mock-icon-shell::after {
  display: none !important;
  content: none !important;
}
.quest-mock-icon {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
}

.quest-mock-main {
  min-width: 0 !important;
  align-self: start !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 !important;
  margin-top: 1px !important;
}
.quest-mock-main::before,
.quest-mock-main::after { display: none !important; }
.quest-mock-title {
  margin: 0 !important;
  font-size: .92rem !important;
  line-height: 1.08 !important;
  color: #f0cf8d !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.quest-mock-progress-copy {
  margin: 0 !important;
  font-size: .67rem !important;
  line-height: 1.1 !important;
  color: #f6f4ef !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.quest-mock-meter {
  margin-top: 2px !important;
  width: 100% !important;
}
.quest-mock-meter .progress-track {
  height: 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(224,180,91,.32) !important;
  background: linear-gradient(180deg, rgba(7,11,18,.95), rgba(15,24,38,.92)) !important;
}
.quest-mock-meter .progress-fill {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f2ce7a 0%, #d58d2d 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,245,221,.30);
}

.quest-mock-reward {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(225,179,90,.20) !important;
  overflow: hidden !important;
}
.quest-mock-reward-stack {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
}
.quest-mock-reward-line {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  line-height: 1 !important;
}
.quest-reward-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  object-fit: contain !important;
}
.quest-reward-icon.xp {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
}
.quest-mock-reward-line strong {
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: #f1cf86 !important;
}
.quest-mock-status-tick {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #92d776 !important;
  font-size: 1.35rem !important;
}
.quest-mock-status.claimed {
  font-size: .55rem !important;
  letter-spacing: .12em !important;
}
.quest-mock-claim {
  min-width: 72px !important;
  min-height: 28px !important;
  font-size: .55rem !important;
}

/* Remove any old quote strip if still present in DOM/CSS usage */
.quests-mock-quote-strip,
.quests-mock-quote-text { display: none !important; }

@media (max-width: 390px) {
  .quests-mock-page .secondary-page-header {
    flex-basis: 118px !important;
    min-height: 118px !important;
    padding-top: 8px !important;
  }
  .quests-mock-page .secondary-page-header .secondary-page-title {
    bottom: 5px !important;
  }
  .quests-mock-page .secondary-page-header .secondary-page-title h2 {
    font-size: 1.78rem !important;
  }
  .quests-mock-body {
    margin-top: -14px !important;
    padding: 9px 10px 9px !important;
  }
  .quests-mock-switch {
    min-height: 52px !important;
    margin-bottom: 9px !important;
  }
  .quests-mock-switch button {
    min-height: 42px !important;
    font-size: .74rem !important;
  }
  .quests-mock-list {
    height: 498px !important;
    max-height: 498px !important;
    gap: 10px !important;
  }
  .quests-mock-row {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    grid-template-columns: 80px minmax(0,1fr) 104px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .quest-mock-icon-shell {
    width: 66px !important;
    height: 66px !important;
  }
  .quest-mock-icon {
    width: 42px !important;
    height: 42px !important;
  }
  .quest-mock-title { font-size: .82rem !important; }
  .quest-mock-progress-copy { font-size: .62rem !important; }
  .quest-mock-meter .progress-track { height: 8px !important; }
  .quest-mock-reward-line { gap: 5px !important; font-size: .66rem !important; }
  .quest-reward-icon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
  .quest-reward-icon.xp { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
  .quest-mock-reward-line strong { font-size: .67rem !important; }
}

/* =========================================================
   QUESTS — supplied mockup fidelity pass (2026-08-18)
   ========================================================= */
body.secondary-screen-active .quests-mock-page {
  background:
    radial-gradient(circle at 50% 18%, rgba(20, 43, 70, .20), transparent 36%),
    linear-gradient(180deg, #030812 0%, #040a12 100%) !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* Use the supplied mockup's quest scene/title crop so the hero composition is exact. */
body.secondary-screen-active .quest-mock-hero {
  position: relative;
  flex: 0 0 132px;
  min-height: 132px;
  margin: 0 4px;
  overflow: hidden;
  border-left: 1px solid rgba(210, 154, 57, .18);
  border-right: 1px solid rgba(210, 154, 57, .18);
  background:
    linear-gradient(180deg, rgba(3, 7, 13, .02), rgba(3, 7, 13, .08)),
    url("../assets/quest_hero_mockup.jpg") center / cover no-repeat !important;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .18);
}

/* The mockup has no large enclosing card behind the tabs/list. */
body.secondary-screen-active .quests-mock-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 4px 4px !important;
  padding: 9px 6px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(4, 10, 18, .96), rgba(3, 8, 14, .99)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body.secondary-screen-active .quests-mock-body::before { display: none !important; }

/* Mockup-style three-way period selector. */
body.secondary-screen-active .quests-mock-switch {
  position: relative;
  flex: 0 0 48px !important;
  min-height: 48px !important;
  margin: 0 0 10px !important;
  padding: 4px !important;
  gap: 0 !important;
  border: 1px solid rgba(225, 165, 56, .82) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(5, 18, 32, .99), rgba(4, 13, 24, .99)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(248, 205, 114, .08),
    0 0 0 1px rgba(0, 0, 0, .45) !important;
  overflow: visible !important;
}
body.secondary-screen-active .quests-mock-switch button {
  min-height: 38px !important;
  padding: 0 7px !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(208, 153, 58, .35) !important;
  color: #f0cb82 !important;
  background: transparent !important;
  
  font-size: .86rem !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
body.secondary-screen-active .quests-mock-switch button:last-child { border-right: 0 !important; }
body.secondary-screen-active .quests-mock-switch button.active {
  color: #241304 !important;
  background: linear-gradient(180deg, #f3c95f 0%, #d89227 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 204, .55),
    inset 0 -1px 0 rgba(112, 57, 5, .28),
    0 0 10px rgba(224, 159, 43, .12) !important;
}

/* Five large daily cards, with weekly/lifetime lists scrolling naturally when longer. */
body.secondary-screen-active .quests-mock-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 0 1px 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 132, 39, .46) transparent;
}
body.secondary-screen-active .quests-mock-list::-webkit-scrollbar { width: 4px; }
body.secondary-screen-active .quests-mock-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(194, 132, 39, .46);
}

/* Simple, visible gold filigree frame copied from the mockup corners. */
body.secondary-screen-active .quests-mock-row {
  position: relative !important;
  flex: 0 0 96px !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 84px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(204, 136, 35, .84) !important;
  border-radius: 4px !important;
  background:
    radial-gradient(circle at 38% 25%, rgba(20, 43, 68, .20), transparent 42%),
    linear-gradient(180deg, #07182b 0%, #04111f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(239, 189, 90, .05),
    0 3px 8px rgba(0, 0, 0, .18) !important;
  overflow: hidden !important;
  opacity: 1 !important;
}
body.secondary-screen-active .quests-mock-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  background-image:
    url("../assets/quest_corner_tl.webp"),
    url("../assets/quest_corner_tr.webp"),
    url("../assets/quest_corner_bl.webp"),
    url("../assets/quest_corner_br.webp") !important;
  background-position: left top, right top, left bottom, right bottom !important;
  background-size: 31px 31px !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
body.secondary-screen-active .quests-mock-row::after { content: none !important; display: none !important; }
body.secondary-screen-active .quests-mock-row > * { position: relative; z-index: 2; }
body.secondary-screen-active .quests-mock-row.completed { opacity: 1 !important; }
body.secondary-screen-active .quests-mock-row.completed .quest-mock-meter .progress-fill {
  filter: brightness(1.06);
}

/* Exact mockup icon crops: no gold overlay/filter applied by CSS. */
body.secondary-screen-active .quest-mock-icon-shell {
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body.secondary-screen-active .quest-mock-icon {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
}

body.secondary-screen-active .quest-mock-main {
  min-width: 0 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.secondary-screen-active .quest-mock-main::before,
body.secondary-screen-active .quest-mock-main::after { display: none !important; }
body.secondary-screen-active .quest-mock-title {
  margin: 0 !important;
  color: #f2ce86 !important;
  
  font-size: .90rem !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: .005em !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .48);
}
body.secondary-screen-active .quest-mock-progress-copy {
  margin: 0 !important;
  color: #e1e5ec !important;
  
  font-size: .66rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.secondary-screen-active .quest-mock-meter {
  width: 100% !important;
  margin: 0 !important;
}
body.secondary-screen-active .quest-mock-meter .progress-track {
  width: 100% !important;
  height: 7px !important;
  border: 1px solid rgba(185, 116, 27, .92) !important;
  border-radius: 999px !important;
  background: #06101c !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}
body.secondary-screen-active .quest-mock-meter .progress-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, #f4c45f 0%, #d58925 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 181, .32), 0 0 5px rgba(230, 158, 42, .15) !important;
}

body.secondary-screen-active .quest-mock-reward {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 0 0 9px !important;
  border-left: 1px solid rgba(198, 133, 40, .66) !important;
  overflow: visible !important;
}
body.secondary-screen-active .quest-mock-reward-stack {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
body.secondary-screen-active .quest-mock-reward-value,
body.secondary-screen-active .quest-mock-reward-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f2c866 !important;
  
  cursor: pointer;
}
body.secondary-screen-active .quest-mock-reward-value.claimed { opacity: .78; }
body.secondary-screen-active .quest-reward-icon {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
}
body.secondary-screen-active .quest-mock-reward-value strong,
body.secondary-screen-active .quest-mock-reward-button strong {
  color: #f2c866 !important;
  
  font-size: 1.12rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

body.secondary-screen-active .quest-mock-reward-button:focus-visible {
  outline: 1px solid rgba(242, 196, 95, .8) !important;
  outline-offset: 3px !important;
  border-radius: 5px !important;
}
body.secondary-screen-active .quest-mock-status.claimed {
  margin: 1px 0 0 !important;
  color: #93c987 !important;
  font-size: .46rem !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
}

/* No legacy quote strip or XP reward line on the mockup-driven quest board. */
body.secondary-screen-active .quests-mock-quote-strip,
body.secondary-screen-active .quests-mock-quote-text,
body.secondary-screen-active .quest-mock-reward-line.xp,
body.secondary-screen-active .quest-reward-icon.xp { display: none !important; }

/* Keep the same visual proportions on narrower iPhones without card overlap. */
@media (max-width: 390px) {
  body.secondary-screen-active .quest-mock-hero {
    flex-basis: 120px !important;
    min-height: 120px !important;
  }
  body.secondary-screen-active .quests-mock-body { padding: 7px 5px 6px !important; }
  body.secondary-screen-active .quests-mock-switch {
    flex-basis: 44px !important;
    min-height: 44px !important;
    margin-bottom: 8px !important;
    padding: 3px !important;
  }
  body.secondary-screen-active .quests-mock-switch button {
    min-height: 36px !important;
    font-size: .78rem !important;
  }
  body.secondary-screen-active .quests-mock-list { gap: 7px !important; }
  body.secondary-screen-active .quests-mock-row {
    flex-basis: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    grid-template-columns: 66px minmax(0, 1fr) 76px !important;
    gap: 6px !important;
    padding: 8px 9px !important;
  }
  body.secondary-screen-active .quest-mock-icon-shell,
  body.secondary-screen-active .quest-mock-icon {
    width: 57px !important;
    height: 57px !important;
  }
  body.secondary-screen-active .quest-mock-title { font-size: .80rem !important; }
  body.secondary-screen-active .quest-mock-progress-copy { font-size: .60rem !important; }
  body.secondary-screen-active .quest-mock-meter .progress-track { height: 6px !important; }
  
  body.secondary-screen-active .quest-reward-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }
  body.secondary-screen-active .quest-mock-reward-value strong,
  body.secondary-screen-active .quest-mock-reward-button strong { font-size: .98rem !important; }
  body.secondary-screen-active .quests-mock-row::before { background-size: 27px 27px !important; }
}

@media (max-height: 760px) {
  body.secondary-screen-active .quest-mock-hero {
    flex-basis: 104px !important;
    min-height: 104px !important;
  }
  body.secondary-screen-active .quests-mock-switch {
    flex-basis: 40px !important;
    min-height: 40px !important;
    margin-bottom: 6px !important;
  }
  body.secondary-screen-active .quests-mock-switch button { min-height: 32px !important; }
  body.secondary-screen-active .quests-mock-list { gap: 6px !important; }
  body.secondary-screen-active .quests-mock-row {
    flex-basis: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    grid-template-columns: 58px minmax(0, 1fr) 70px !important;
    padding: 6px 8px !important;
  }
  body.secondary-screen-active .quest-mock-icon-shell,
  body.secondary-screen-active .quest-mock-icon { width: 50px !important; height: 50px !important; }
  body.secondary-screen-active .quest-mock-main { gap: 4px !important; }
  body.secondary-screen-active .quest-mock-title { font-size: .74rem !important; }
  body.secondary-screen-active .quest-mock-progress-copy { font-size: .54rem !important; }
  body.secondary-screen-active .quest-reward-icon { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
  body.secondary-screen-active .quest-mock-reward-value strong,
  body.secondary-screen-active .quest-mock-reward-button strong { font-size: .90rem !important; }
}


/* ===== Revert stats page and simplify filigree ===== */
/* Remove the heavy illustrated filigree frame and replace it with a lighter, simpler gold treatment. */
.stats-mock-page > .iphone-surface,
.stats-mock-summary-tile,
.stats-mock-goal-row,
.stats-mock-detail-row,
.stats-mock-lifetime-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(222, 173, 84, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 8px 16px rgba(0,0,0,.12) !important;
}

.stats-mock-page > .iphone-surface::after,
.stats-mock-summary-tile::after,
.stats-mock-goal-row::after,
.stats-mock-detail-row::after,
.stats-mock-lifetime-panel::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
}

.stats-mock-page > .iphone-surface::before,
.stats-mock-summary-tile::before,
.stats-mock-goal-row::before,
.stats-mock-detail-row::before,
.stats-mock-lifetime-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 5px !important;
  border: 1px solid rgba(239, 198, 108, .14) !important;
  border-radius: 7px !important;
  pointer-events: none !important;
  box-shadow: none !important;
  background:
    linear-gradient(90deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) top 8px left 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) top 8px left 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) top 8px right 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) top 8px right 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) bottom 8px left 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) bottom 8px left 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) bottom 8px right 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.68), rgba(239,198,108,.68)) bottom 8px right 8px / 1px 11px no-repeat !important;
}

.stats-mock-page > .iphone-surface::before,
.stats-mock-lifetime-panel::before {
  inset: 6px !important;
}

.stats-mock-summary-tile,
.stats-mock-goal-row,
.stats-mock-detail-row {
  border-color: rgba(222, 173, 84, .16) !important;
}

body[data-theme="light"] .stats-mock-page > .iphone-surface,
body[data-theme="light"] .stats-mock-summary-tile,
body[data-theme="light"] .stats-mock-goal-row,
body[data-theme="light"] .stats-mock-detail-row,
body[data-theme="light"] .stats-mock-lifetime-panel {
  border-color: rgba(171, 119, 44, .18) !important;
}

body[data-theme="light"] .stats-mock-page > .iphone-surface::before,
body[data-theme="light"] .stats-mock-summary-tile::before,
body[data-theme="light"] .stats-mock-goal-row::before,
body[data-theme="light"] .stats-mock-detail-row::before,
body[data-theme="light"] .stats-mock-lifetime-panel::before {
  border-color: rgba(178, 127, 48, .18) !important;
  background:
    linear-gradient(90deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) top 8px left 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) top 8px left 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) top 8px right 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) top 8px right 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) bottom 8px left 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) bottom 8px left 8px / 1px 11px no-repeat,
    linear-gradient(90deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) bottom 8px right 8px / 11px 1px no-repeat,
    linear-gradient(180deg, rgba(182,127,47,.60), rgba(182,127,47,.60)) bottom 8px right 8px / 1px 11px no-repeat !important;
}

@media (max-width: 390px) {
  .stats-mock-page > .iphone-surface::before,
  .stats-mock-summary-tile::before,
  .stats-mock-goal-row::before,
  .stats-mock-detail-row::before,
  .stats-mock-lifetime-panel::before {
    inset: 4px !important;
    background:
      linear-gradient(90deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) top 7px left 7px / 9px 1px no-repeat,
      linear-gradient(180deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) top 7px left 7px / 1px 9px no-repeat,
      linear-gradient(90deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) top 7px right 7px / 9px 1px no-repeat,
      linear-gradient(180deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) top 7px right 7px / 1px 9px no-repeat,
      linear-gradient(90deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) bottom 7px left 7px / 9px 1px no-repeat,
      linear-gradient(180deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) bottom 7px left 7px / 1px 9px no-repeat,
      linear-gradient(90deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) bottom 7px right 7px / 9px 1px no-repeat,
      linear-gradient(180deg, rgba(239,198,108,.64), rgba(239,198,108,.64)) bottom 7px right 7px / 1px 9px no-repeat !important;
  }
}


/* ===== Stats page large-box filigree refinement ===== */
/* Keep the small cards on the simple style, but give the larger section boxes
   a more ornate existing-frame treatment that stays restrained. */
.stats-mock-summary-panel,
.stats-mock-goals-panel,
.stats-mock-activity-panel,
.stats-mock-lifetime-panel {
  position: relative;
}

.stats-mock-summary-panel::after,
.stats-mock-goals-panel::after,
.stats-mock-activity-panel::after,
.stats-mock-lifetime-panel::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 7 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image-source: url("../assets/stats_filigree_frame.webp") !important;
  border-image-slice: 34 !important;
  border-image-repeat: stretch !important;
  opacity: .66 !important;
  filter: saturate(.90) brightness(.96) !important;
}

.stats-mock-summary-panel::after,
.stats-mock-goals-panel::after,
.stats-mock-activity-panel::after {
  border-width: 14px !important;
  border-image-width: 14px !important;
}

.stats-mock-lifetime-panel::after {
  border-width: 13px !important;
  border-image-width: 13px !important;
  opacity: .62 !important;
}

/* Preserve the simpler inner-line filigree for readability. */
.stats-mock-summary-panel::before,
.stats-mock-goals-panel::before,
.stats-mock-activity-panel::before,
.stats-mock-lifetime-panel::before {
  inset: 6px !important;
  border-color: rgba(239, 198, 108, .16) !important;
}

body[data-theme="light"] .stats-mock-summary-panel::after,
body[data-theme="light"] .stats-mock-goals-panel::after,
body[data-theme="light"] .stats-mock-activity-panel::after,
body[data-theme="light"] .stats-mock-lifetime-panel::after {
  opacity: .54 !important;
  filter: saturate(.84) sepia(.08) brightness(.95) !important;
}

@media (max-width: 390px) {
  .stats-mock-summary-panel::after,
  .stats-mock-goals-panel::after,
  .stats-mock-activity-panel::after {
    border-width: 12px !important;
    border-image-width: 12px !important;
  }

  .stats-mock-lifetime-panel::after {
    border-width: 11px !important;
    border-image-width: 11px !important;
  }
}


/* ===== Rewards page mockup remake ===== */
body.secondary-screen-active .rewards-mock-page {
  
  
  
  
  overflow: hidden;
  min-height: 0;
}

.rewards-mock-hero {
  position: relative;
  min-height: 172px;
  border-radius: 12px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(222, 173, 84, .22);
  background:
    linear-gradient(180deg, rgba(4,9,17,.24), rgba(4,9,17,.58)),
    url("../assets/quest_hero_mockup.jpg") center 44%/cover no-repeat;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
.rewards-mock-hero::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid rgba(239,198,108,.13);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) top 8px left 8px / 14px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) top 8px left 8px / 1px 14px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) top 8px right 8px / 14px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) top 8px right 8px / 1px 14px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) bottom 8px left 8px / 14px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) bottom 8px left 8px / 1px 14px no-repeat,
    linear-gradient(90deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) bottom 8px right 8px / 14px 1px no-repeat,
    linear-gradient(180deg, rgba(239,198,108,.78), rgba(239,198,108,.78)) bottom 8px right 8px / 1px 14px no-repeat;
}

.rewards-mock-title-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.rewards-mock-title-panel {
  position: relative;
  min-width: min(84%, 520px);
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  border-radius: 18px;
  color: #f1cc7a;
  background: linear-gradient(180deg, rgba(12,28,48,.92), rgba(7,18,31,.96));
  border: 1px solid rgba(233,192,106,.34);
  box-shadow: inset 0 0 0 1px rgba(255,236,192,.04), 0 10px 18px rgba(0,0,0,.16);
}
.rewards-mock-title-panel::before {
  content: "";
  position: absolute;
  
  pointer-events: none;
  background: url("../assets/top_hud_rect_filigree.webp") center/100% 100% no-repeat;
  opacity: .95;
}
.rewards-mock-title-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 2rem;
  letter-spacing: .06em;
  color: #efc970;
}
.rewards-title-flourish {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
}
.rewards-title-flourish::before,
.rewards-title-flourish::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f4cf7f, #d1852f);
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.rewards-title-flourish.left::after,
.rewards-title-flourish.right::after {
  inset: 5px;
  background: #0a1627;
}

.rewards-mock-coin-card {
  position: relative;
  z-index: 1;
  
  
  
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  
  
  background: linear-gradient(180deg, rgba(10,25,42,.95), rgba(6,16,29,.98));
  border: 1px solid rgba(224,179,92,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.14);
}
.rewards-mock-coin-card::before {
  content: "";
  position: absolute;
  
  pointer-events: none;
  background: url("../assets/quest_card_filigree_frame.webp") center/100% 100% no-repeat;
  opacity: .86;
}
.rewards-mock-coin-card span,
.rewards-mock-coin-card strong {
  position: relative;
  z-index: 1;
}
.rewards-mock-coin-card span {
  
  letter-spacing: .03em;
  color: #e8c474;
}
.rewards-mock-coin-card strong {
  display: inline-flex;
  align-items: center;
  
  
  color: #f1cb76;
  font-weight: 400;
}
.rewards-mock-coin-card strong img {
  
  
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}

.rewards-mock-tabs {
  display: grid;
  
  gap: 0;
  overflow: hidden;
  
  border: 1px solid rgba(224,179,92,.24);
  background: linear-gradient(180deg, rgba(8,18,31,.98), rgba(5,12,22,1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.rewards-mock-tabs button {
  position: relative;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  
  color: #deb86a;
  border: 0;
  border-right: 1px solid rgba(224,179,92,.18);
  background: transparent;
}
.rewards-mock-tabs button:last-child { border-right: 0; }
.rewards-mock-tabs button.active {
  color: #f3d18a;
  background: linear-gradient(180deg, rgba(28,48,74,.88), rgba(12,24,39,.98));
  box-shadow: inset 0 0 0 1px rgba(243,208,133,.24);
}
.rewards-mock-tabs button.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, #f7d47d, #d58c31);
  border: 1px solid rgba(243,208,133,.8);
  box-shadow: 0 0 10px rgba(243,208,133,.18);
}
.rewards-tab-icon { display: grid;    }
.rewards-tab-icon svg {
  
  
  stroke: currentColor;
  fill: none;
  
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.2));
}


.rewards-mock-list {
  display: grid;
  align-content: start;
  gap: 10px;
  
  
  padding-right: 2px;
}
.rewards-mock-row {
  position: relative;
  display: grid;
  
  align-items: center;
  gap: 12px;
  
  
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(9,21,37,.985), rgba(6,15,28,.995));
  border: 1px solid rgba(224,179,92,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 16px rgba(0,0,0,.14);
  overflow: hidden;
}
.rewards-mock-row::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background: url("../assets/quest_card_filigree_frame.webp") center/100% 100% no-repeat;
  opacity: .9;
}
.rewards-mock-art-frame,
.rewards-mock-copy,
.rewards-mock-side { position: relative; z-index: 1; }
.rewards-mock-art-frame {
  position: relative;
  
  
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13,30,52,.96), rgba(8,18,34,.98));
  border: 1px solid rgba(225,184,96,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rewards-mock-art-frame::before {
  content: "";
  position: absolute;
  
  
  
  pointer-events: none;
}
.rewards-mock-art-bg {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 70% 18%, rgba(230,188,99,.22), transparent 20%),
    radial-gradient(circle at 20% 25%, rgba(138,162,255,.16), transparent 18%),
    linear-gradient(180deg, rgba(18,41,71,.95), rgba(10,22,40,.98));
}
.rewards-mock-art {
  position: absolute;
  
  
  
  
  border-radius: 10px;
}
.rewards-mock-art.silhouette {
  filter: brightness(0) saturate(0) contrast(1.05);
  opacity: .96;
}
.rewards-mock-lock-badge {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f1cd79, #c47b29);
  color: #17263c;
  font-size: .9rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.rewards-mock-copy { min-width: 0; }
.rewards-mock-name {
  color: #f0cf84;
  
  line-height: 1.05;
}
.rewards-mock-rarity {
  margin-top: 5px;
  font-size: .72rem;
  letter-spacing: .03em;
}
.rewards-mock-rarity.common { color: #e7d3a4; }
.rewards-mock-rarity.starter { color: #e7d3a4; }
.rewards-mock-rarity.rare { color: #8cb7ff; }
.rewards-mock-rarity.epic { color: #c58bf7; }
.rewards-mock-rarity.legendary { color: #f0b141; }
.rewards-mock-rarity.mythic { color: #cb93ff; }
.rewards-mock-desc {
  margin-top: 8px;
  color: #d9c8aa;
  font-size: .74rem;
  line-height: 1.35;
  
}
.rewards-mock-side { display: flex;  }
.rewards-mock-action {
  
  
  
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
  border: 1px solid rgba(237,196,108,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.16);
}
button.rewards-mock-action {
  cursor: pointer;
}
button.rewards-mock-action:disabled {
  opacity: .45;
  cursor: default;
}
.rewards-mock-action strong {
  font-weight: 400;
  
  letter-spacing: .02em;
}
.rewards-mock-action.equipped,
.rewards-mock-action.price,
.rewards-mock-action.equip {
  background: linear-gradient(180deg, #f0c96f, #cf8330);
  color: #1e1a18;
}
.rewards-mock-action.equip {
  min-width: 144px;
}
.rewards-mock-action.price img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.rewards-mock-action.locked {
  flex-direction: column;
  gap: 2px;
  
  padding-top: 8px;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(9,20,34,.96), rgba(5,12,23,.98));
  color: #ecc97a;
}
.rewards-mock-action.locked span {
  
  color: #e2cb99;
}

body[data-theme="light"] .rewards-mock-hero {
  background: linear-gradient(180deg, rgba(255,246,231,.38), rgba(247,235,210,.7)), url("../assets/quest_hero_mockup.jpg") center 44%/cover no-repeat;
}
body[data-theme="light"] .rewards-mock-title-panel,
body[data-theme="light"] .rewards-mock-coin-card,
body[data-theme="light"] .rewards-mock-tabs,
body[data-theme="light"] .rewards-mock-row {
  background-color: rgba(249,240,221,.96);
}

@media (max-width: 390px) {
  .rewards-mock-hero { min-height: 154px; padding-left: 10px; padding-right: 10px; }
  .rewards-mock-title-panel { min-height: 56px; min-width: 100%; padding: 0 18px; }
  .rewards-mock-title-panel h2 { font-size: 1.72rem; }
  .rewards-mock-coin-card { min-height: 68px; padding: 0 14px; }
  .rewards-mock-coin-card span { font-size: .9rem; }
  .rewards-mock-coin-card strong { font-size: 1.34rem; gap: 9px; }
  .rewards-mock-coin-card strong img { width: 34px; height: 34px; }
  
  .rewards-tab-icon, .rewards-tab-icon svg { width: 20px; height: 20px; }
  
  .rewards-mock-list { gap: 8px; }
  .rewards-mock-row {
    
    gap: 10px;
    
    
  }
  
  
  
  .rewards-mock-desc { margin-top: 6px;   }
  
  
  .rewards-mock-action.price img { width: 20px; height: 20px; }
  .rewards-mock-action.locked { min-width: 116px; }
  
}


/* ===== Bottom nav icon refresh: simple mockup-inspired icons ===== */




.nav-item {
  
  
  
  display: flex !important;
  align-items: center;
  justify-content: center;
  
  
  transition: color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nav-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.nav-glyph {
  
  
  
  
  
  
  
  
  transition: transform .16s ease, filter .16s ease;
}
.nav-label {
  display: block !important;
  
  font-size: .62rem;
  letter-spacing: .06em;
  line-height: 1;
  color: currentColor;
}


.nav-item.active .nav-stack::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, #f7d57d, #d69136);
  border: 1px solid rgba(244, 206, 118, .88);
  box-shadow: 0 0 8px rgba(244,206,118,.18);
}
.nav-item:hover .nav-glyph,
.nav-item:focus-visible .nav-glyph {
  transform: translateY(-1px);
}


body[data-theme="light"] .nav-item.active {
  
  
  box-shadow: inset 0 0 0 1px rgba(186,127,45,.28), 0 0 0 1px rgba(186,127,45,.12), 0 6px 14px rgba(86,58,24,.08) !important;
}

@media (max-width: 390px) {
  body.secondary-screen-active .content,
  body.focus-screen-active .content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .bottom-nav {
    height: 78px !important;
    min-height: 78px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }
  .nav-item { min-height: 62px !important; }
  .nav-glyph { width: 25px !important; height: 25px !important; }
  .nav-label { font-size: .56rem; }
}


/* ===== Title-card standardisation + rewards cleanup ===== */
body.secondary-screen-active .quests-mock-page,
body.secondary-screen-active .stats-mock-page,
body.secondary-screen-active .iphone-teams-page,
body.secondary-screen-active .rewards-mock-page {
  gap: 10px !important;
}

body.secondary-screen-active .standardized-title-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 132px !important;
  height: 132px !important;
  margin: 0 4px !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(210, 154, 57, .18) !important;
  border-right: 1px solid rgba(210, 154, 57, .18) !important;
  background: linear-gradient(180deg, rgba(3, 7, 13, .04), rgba(3, 7, 13, .18)), url("../assets/stats_header_scene.webp") center 46%/cover no-repeat !important;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .18) !important;
}
body.secondary-screen-active .standardized-title-card.title-card-quests,
body.secondary-screen-active .standardized-title-card.title-card-rewards,
body.secondary-screen-active .standardized-title-card.title-card-teams {
  background: linear-gradient(180deg, rgba(3, 7, 13, .05), rgba(3, 7, 13, .20)), url("../assets/hero_avatar_scene.webp") center 48%/cover no-repeat !important;
}
body.secondary-screen-active .standardized-title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 28%, rgba(33,65,102,.16), transparent 42%);
  pointer-events: none;
}
body.secondary-screen-active .secondary-title-card-panel {
  position: relative;
  z-index: 1;
  min-width: min(80%, 520px);
  max-width: 86%;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  border-radius: 18px;
  color: #f1cc7a;
  background: linear-gradient(180deg, rgba(12,28,48,.93), rgba(7,18,31,.97));
  border: 1px solid rgba(233,192,106,.34);
  box-shadow: inset 0 0 0 1px rgba(255,236,192,.04), 0 10px 18px rgba(0,0,0,.16);
}
body.secondary-screen-active .secondary-title-card-panel::before {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background: url("../assets/top_hud_rect_filigree.webp") center/100% 100% no-repeat;
  opacity: .96;
}
body.secondary-screen-active .secondary-title-card-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 2rem;
  letter-spacing: .06em;
  color: #efc970;
}
body.secondary-screen-active .secondary-title-flourish {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
body.secondary-screen-active .secondary-title-flourish::before,
body.secondary-screen-active .secondary-title-flourish::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f4cf7f, #d1852f);
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
body.secondary-screen-active .secondary-title-flourish::after {
  inset: 5px;
  background: #0a1627;
}

body[data-theme="light"] .standardized-title-card {
  background: linear-gradient(180deg, rgba(255,246,231,.22), rgba(247,235,210,.42)), url("../assets/stats_header_scene.webp") center 46%/cover no-repeat !important;
}
body[data-theme="light"] .standardized-title-card.title-card-quests,
body[data-theme="light"] .standardized-title-card.title-card-rewards,
body[data-theme="light"] .standardized-title-card.title-card-teams {
  background: linear-gradient(180deg, rgba(255,246,231,.22), rgba(247,235,210,.42)), url("../assets/hero_avatar_scene.webp") center 48%/cover no-repeat !important;
}

/* Rewards page: fix background/title issue, refined tabs, contained art, and slimmer actions. */
body.secondary-screen-active .rewards-mock-page {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding-left: 7px !important;
  padding-right: 7px !important;
  background: radial-gradient(circle at 50% 18%, rgba(20, 43, 70, .16), transparent 34%), linear-gradient(180deg, #030812 0%, #040a12 100%) !important;
}
.rewards-mock-head {
  display: grid;
  
}
.rewards-mock-coin-card {
  
  width: auto !important;
  
}
.rewards-mock-tabs {
  margin: 0 4px;
  border-radius: 10px;
}
.rewards-mock-tabs button {
  
  padding: 8px 3px 7px !important;
  gap: 4px !important;
  overflow: hidden;
}

.rewards-tab-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.75 !important;
}
.rewards-tab-label {
  
  
  letter-spacing: .045em;
}
.rewards-mock-list {
  margin: 0 4px 4px !important;
}
.rewards-mock-row {
  grid-template-columns: 102px minmax(0, 1fr) 152px !important;
  min-height: 112px !important;
  padding: 13px 14px !important;
}
.rewards-mock-art-frame {
  width: 88px !important;
  height: 88px !important;
}
.rewards-mock-art {
  inset: 9px !important;
  width: calc(100% - 18px) !important;
  height: calc(100% - 18px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
.rewards-mock-name {
  font-size: .98rem !important;
}
.rewards-mock-desc {
  max-width: 26ch !important;
}
.rewards-mock-side {
  justify-content: center !important;
}
.rewards-mock-action {
  min-width: 138px !important;
  min-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
}
.rewards-mock-action strong {
  font-size: .88rem !important;
}
.rewards-mock-action.equip,
.rewards-mock-action.equipped {
  min-width: 132px !important;
}
.rewards-mock-action.locked {
  min-width: 138px !important;
}
.rewards-mock-action.locked span {
  font-size: .64rem !important;
}

/* Keep quest/stat/teams title cards aligned with the same presentation. */
body.secondary-screen-active .quests-mock-page .iphone-page-body,
body.secondary-screen-active .iphone-teams-page .iphone-page-body,
body.secondary-screen-active .stats-mock-page > .iphone-surface {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
body.secondary-screen-active .iphone-teams-page .iphone-page-body {
  margin-bottom: 4px !important;
}

@media (max-width: 390px) {
  body.secondary-screen-active .standardized-title-card {
    min-height: 118px !important;
    height: 118px !important;
  }
  body.secondary-screen-active .secondary-title-card-panel {
    min-height: 54px;
    min-width: min(90%, 420px);
    padding: 0 18px;
    gap: 12px;
  }
  body.secondary-screen-active .secondary-title-card-panel h2 {
    font-size: 1.72rem;
  }
  .rewards-mock-tabs button {
    
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  
  .rewards-tab-icon svg { width: 19px !important; height: 19px !important; }
  
  .rewards-mock-row {
    grid-template-columns: 78px minmax(0,1fr) 118px !important;
    min-height: 96px !important;
    padding: 10px 11px !important;
  }
  .rewards-mock-art-frame { width: 68px !important; height: 68px !important; }
  .rewards-mock-name { font-size: .86rem !important; }
  .rewards-mock-rarity { font-size: .60rem !important; }
  .rewards-mock-desc { font-size: .66rem !important; max-width: 18ch !important; }
  .rewards-mock-action {
    min-width: 108px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
  }
  .rewards-mock-action strong { font-size: .74rem !important; }
  .rewards-mock-action.locked span { font-size: .56rem !important; }
}


/* ===== Requested reversion: Stats-style title cards + old bottom nav + quest-style rewards cards ===== */

/* Restore the bottom navigation panel from before the mockup-icon redesign. */
body.secondary-screen-active .content,
body.focus-screen-active .content {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
.bottom-nav {
  height: 62px !important;
  min-height: 62px !important;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 2px !important;
  align-items: stretch !important;
  background: linear-gradient(180deg, rgba(5,8,12,.10), rgba(5,8,12,.96) 26%, rgba(5,8,12,.99)) !important;
  border-top: 1px solid rgba(215,171,96,.10) !important;
  box-shadow: none !important;
  grid-template-columns: repeat(5, 1fr) !important;
}
.bottom-nav .nav-item::before,
.bottom-nav .nav-item::after { display: none !important; }
.nav-item {
  min-width: 0 !important;
  min-height: 50px !important;
  display: grid !important;
  place-items: center !important;
  padding: 2px !important;
  gap: 0 !important;
  border-radius: 0 !important;
  color: rgba(221,189,126,.72) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-item .nav-stack,
.nav-item .nav-label { display: none !important; }
.nav-glyph {
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  filter: none !important;
}
.nav-glyph-fill { fill: currentColor !important; stroke: none !important; }
.nav-item.active {
  color: #f1c96d !important;
  background: rgba(229,174,69,.075) !important;
  box-shadow: none !important;
}
.nav-item.active .nav-glyph {
  transform: scale(1.10) !important;
  filter: drop-shadow(0 0 6px rgba(228,177,76,.25)) !important;
}
.nav-item.active .nav-stack::before,
.nav-item.active .nav-stack::after { display: none !important; content: none !important; }
body[data-theme="light"] .bottom-nav {
  background: rgba(248,240,224,.96) !important;
  border-top-color: rgba(137,96,48,.10) !important;
}
body[data-theme="light"] .nav-item { color: rgba(112,77,37,.68) !important; }
body[data-theme="light"] .nav-item.active {
  color: #a76518 !important;
  background: rgba(190,122,36,.08) !important;
}

/* Make Quests, Stats, Rewards and Teams use the previous Stats title-card treatment. */
body.secondary-screen-active .iphone-quests-page > .secondary-page-header,
body.secondary-screen-active .stats-mock-page > .secondary-page-header,
body.secondary-screen-active .rewards-mock-head > .secondary-page-header,
body.secondary-screen-active .iphone-teams-page > .secondary-page-header {
  position: relative !important;
  flex: 0 0 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 4px !important;
  padding: 0 10px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(207,160,80,.26) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,rgba(8,14,24,.26),rgba(8,14,24,.72)), url("../assets/stats_header_scene.webp") center 34%/cover no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(235,199,117,.08) !important;
}
body.secondary-screen-active .iphone-quests-page > .secondary-page-header::before,
body.secondary-screen-active .stats-mock-page > .secondary-page-header::before,
body.secondary-screen-active .rewards-mock-head > .secondary-page-header::before,
body.secondary-screen-active .iphone-teams-page > .secondary-page-header::before,
body.secondary-screen-active .iphone-quests-page > .secondary-page-header::after,
body.secondary-screen-active .stats-mock-page > .secondary-page-header::after,
body.secondary-screen-active .rewards-mock-head > .secondary-page-header::after,
body.secondary-screen-active .iphone-teams-page > .secondary-page-header::after {
  content: none !important;
  display: none !important;
}
body.secondary-screen-active .iphone-quests-page .secondary-page-title,
body.secondary-screen-active .stats-mock-page .secondary-page-title,
body.secondary-screen-active .rewards-mock-page .secondary-page-title,
body.secondary-screen-active .iphone-teams-page .secondary-page-title {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(34px,1fr) auto minmax(34px,1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 9px !important;
  transform: none !important;
}
body.secondary-screen-active .iphone-quests-page .secondary-page-title h2,
body.secondary-screen-active .stats-mock-page .secondary-page-title h2,
body.secondary-screen-active .rewards-mock-page .secondary-page-title h2,
body.secondary-screen-active .iphone-teams-page .secondary-page-title h2 {
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  color: #efcb81 !important;
  
  font-size: 1.22rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.4),0 0 10px rgba(239,203,129,.08) !important;
}
body.secondary-screen-active .iphone-quests-page .secondary-page-title span,
body.secondary-screen-active .stats-mock-page .secondary-page-title span,
body.secondary-screen-active .rewards-mock-page .secondary-page-title span,
body.secondary-screen-active .iphone-teams-page .secondary-page-title span {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 1px !important;
  opacity: .8 !important;
  background: linear-gradient(90deg,transparent,rgba(220,174,84,.9),transparent) !important;
}
body.secondary-screen-active .iphone-quests-page .secondary-page-title span::before,
body.secondary-screen-active .iphone-quests-page .secondary-page-title span::after,
body.secondary-screen-active .stats-mock-page .secondary-page-title span::before,
body.secondary-screen-active .stats-mock-page .secondary-page-title span::after,
body.secondary-screen-active .rewards-mock-page .secondary-page-title span::before,
body.secondary-screen-active .rewards-mock-page .secondary-page-title span::after,
body.secondary-screen-active .iphone-teams-page .secondary-page-title span::before,
body.secondary-screen-active .iphone-teams-page .secondary-page-title span::after {
  content: none !important;
  display: none !important;
}
body[data-theme="light"] body.secondary-screen-active .iphone-quests-page > .secondary-page-header,
body[data-theme="light"] body.secondary-screen-active .stats-mock-page > .secondary-page-header,
body[data-theme="light"] body.secondary-screen-active .rewards-mock-head > .secondary-page-header,
body[data-theme="light"] body.secondary-screen-active .iphone-teams-page > .secondary-page-header {
  background: linear-gradient(180deg,rgba(250,242,225,.22),rgba(250,242,225,.56)), url("../assets/stats_header_scene.webp") center 34%/cover no-repeat !important;
}

/* Quests no longer uses the tall image-only hero; keep its list immediately beneath the Stats-style title card. */
body.secondary-screen-active .quests-mock-page {
  gap: 4px !important;
}
body.secondary-screen-active .quests-mock-body {
  margin-top: 0 !important;
}

/* Rewards header: remove the ornate custom Rewards hero and retain the coin strip below the shared title card. */
.rewards-mock-head {
  display: grid !important;
  grid-template-rows: 58px auto !important;
  
}
.rewards-mock-title-wrap,
.rewards-mock-title-panel,
.rewards-title-flourish { display: none !important; }
.rewards-mock-coin-card {
  margin: 0 4px !important;
}

/* Style Rewards shop item cards like the Quest cards. */
body.secondary-screen-active .rewards-mock-list {
  
  padding-right: 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.secondary-screen-active .rewards-mock-row {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  opacity: 1 !important;
}
body.secondary-screen-active .rewards-mock-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  background-image: url("../assets/quest_corner_tl.webp"),url("../assets/quest_corner_tr.webp"),url("../assets/quest_corner_bl.webp"),url("../assets/quest_corner_br.webp") !important;
  background-position: left top,right top,left bottom,right bottom !important;
  background-size: 31px 31px !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
body.secondary-screen-active .rewards-mock-row::after { content: none !important; display: none !important; }
body.secondary-screen-active .rewards-mock-row > * { position: relative !important;  }
body.secondary-screen-active .rewards-mock-art-frame {
  width: 64px !important;
  height: 64px !important;
  justify-self: center !important;
  align-self: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(211,145,42,.74) !important;
  background: #06101c !important;
  box-shadow: inset 0 0 0 1px rgba(245,205,121,.06) !important;
  overflow: hidden !important;
}
body.secondary-screen-active .rewards-mock-art-frame::before,
body.secondary-screen-active .rewards-mock-art-bg { display: none !important; content: none !important; }
body.secondary-screen-active .rewards-mock-art {
  position: absolute !important;
  inset: 5px !important;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 50% !important;
}
body.secondary-screen-active .rewards-mock-copy {
  min-width: 0 !important;
  
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  
}
body.secondary-screen-active .rewards-mock-name {
  margin: 0 !important;
  
  
  
  
  
  white-space: normal !important;
}
body.secondary-screen-active .rewards-mock-rarity {
  margin: 0 !important;
  
  
  
}
body.secondary-screen-active .rewards-mock-desc {
  
  
  
  
  
  
  display: -webkit-box !important;
  
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.secondary-screen-active .rewards-mock-side {
  
  
  
  
  padding-left: 8px !important;
  
}
body.secondary-screen-active .rewards-mock-action {
  min-width: 0 !important;
  width: 112px !important;
  max-width: 112px !important;
  min-height: 42px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  gap: 6px !important;
}
body.secondary-screen-active .rewards-mock-action strong {
  
  white-space: nowrap !important;
}

body.secondary-screen-active .rewards-mock-action.locked {
  width: 112px !important;
  max-width: 112px !important;
  min-height: 44px !important;
  padding: 5px 7px !important;
  gap: 2px !important;
}
body.secondary-screen-active .rewards-mock-action.locked span {
  
  line-height: 1.08 !important;
  text-align: center !important;
}
body.secondary-screen-active .rewards-mock-lock-badge {
  width: 21px !important;
  height: 21px !important;
  bottom: 4px !important;
  font-size: .7rem !important;
}

@media (max-width:390px) {
  body.secondary-screen-active .content,
  body.focus-screen-active .content { padding-bottom: calc(62px + env(safe-area-inset-bottom,0px)) !important; }
  .bottom-nav { height: 58px !important; min-height: 58px !important; }
  .nav-item { min-height: 46px !important; }
  .nav-glyph { width: 28px !important; height: 28px !important; }
  body.secondary-screen-active .iphone-quests-page > .secondary-page-header,
  body.secondary-screen-active .stats-mock-page > .secondary-page-header,
  body.secondary-screen-active .rewards-mock-head > .secondary-page-header,
  body.secondary-screen-active .iphone-teams-page > .secondary-page-header {
    height: 54px !important;
    min-height: 54px !important;
    flex-basis: 54px !important;
  }
  body.secondary-screen-active .iphone-quests-page .secondary-page-title h2,
  body.secondary-screen-active .stats-mock-page .secondary-page-title h2,
  body.secondary-screen-active .rewards-mock-page .secondary-page-title h2,
  body.secondary-screen-active .iphone-teams-page .secondary-page-title h2 { font-size: 1.12rem !important; }
  .rewards-mock-head { grid-template-rows: 54px auto !important; }
  body.secondary-screen-active .rewards-mock-row {
    grid-template-columns: 64px minmax(0,1fr) 102px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    gap: 6px !important;
    padding: 8px 9px !important;
  }
  body.secondary-screen-active .rewards-mock-art-frame { width: 56px !important; height: 56px !important; }
  body.secondary-screen-active .rewards-mock-name { font-size: .78rem !important; }
  body.secondary-screen-active .rewards-mock-rarity,
  body.secondary-screen-active .rewards-mock-desc { font-size: .52rem !important; }
  body.secondary-screen-active .rewards-mock-side { padding-left: 6px !important; }
  body.secondary-screen-active .rewards-mock-action,
  body.secondary-screen-active .rewards-mock-action.locked {
    width: 88px !important;
    max-width: 88px !important;
  }
  body.secondary-screen-active .rewards-mock-action strong { font-size: .68rem !important; }
  body.secondary-screen-active .rewards-mock-action.price img { width: 17px !important; height: 17px !important; }
  body.secondary-screen-active .rewards-mock-action.locked span { font-size: .46rem !important; }
  body.secondary-screen-active .rewards-mock-row::before { background-size: 27px 27px !important; }
}

/* ===== Refined illustrated bottom-nav glyphs (panel/layout intentionally unchanged) ===== */
.nav-glyph .nav-glyph-fill-soft {
  fill: currentColor !important;
  fill-opacity: .13 !important;
  stroke: currentColor !important;
  stroke-opacity: .88 !important;
}
.nav-glyph .nav-glyph-fill {
  fill: currentColor !important;
  fill-opacity: .92 !important;
  stroke: none !important;
}
.nav-glyph .nav-glyph-accent {
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
}
.nav-item.active .nav-glyph .nav-glyph-fill-soft {
  fill-opacity: .24 !important;
}
.nav-item.active .nav-glyph .nav-glyph-fill {
  filter: drop-shadow(0 0 3px rgba(241,201,109,.28));
}

/* ===== Teams page mockup treatment — keep existing shared title card unchanged ===== */
body.secondary-screen-active .teams-mock-page {
  gap: 4px !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(22,49,78,.18), transparent 38%),
    linear-gradient(180deg, #030812 0%, #040b14 100%) !important;
}
body.secondary-screen-active .teams-mock-content {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  
}

.teams-academy-card {
  position: relative;
  flex: 0 0 155px;
  min-height: 155px;
  display: grid;
  grid-template-columns: 122px minmax(0,1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgba(211,145,42,.84);
  border-radius: 7px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3,12,22,.92) 0%, rgba(6,18,32,.82) 52%, rgba(4,12,22,.38) 100%),
    url("../assets/bg_academy_night.webp") right center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(239,189,90,.05), 0 4px 12px rgba(0,0,0,.20);
}
.teams-academy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    url("../assets/quest_corner_tl.webp"),
    url("../assets/quest_corner_tr.webp"),
    url("../assets/quest_corner_bl.webp"),
    url("../assets/quest_corner_br.webp");
  background-position: left top, right top, left bottom, right bottom;
  background-size: 35px 35px;
  background-repeat: no-repeat;
}
.teams-academy-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(239,198,108,.10);
  border-radius: 5px;
  pointer-events: none;
}
.teams-banner-wrap,
.teams-academy-copy {
  position: relative;
  z-index: 2;
}
.teams-banner-wrap {
  
  display: grid;
  place-items: center;
}
.teams-banner-pole {
  position: absolute;
  top: 5px;
  left: 17px;
  right: 11px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg,#e2ad4e,#7f4718 60%,#d59d3a);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.teams-banner-pole::before,
.teams-banner-pole::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 10px;
  height: 11px;
  background: linear-gradient(180deg,#efc66e,#9c5b20);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.teams-banner-pole::before { left: -5px; }
.teams-banner-pole::after { right: -5px; }
.teams-banner {
  position: relative;
  
  
  margin-top: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#0b2c4c 0%,#061a30 100%);
  border: 2px solid #c98a31;
  box-shadow: inset 0 0 0 2px rgba(244,205,121,.10), 0 6px 12px rgba(0,0,0,.28);
  clip-path: polygon(0 0,100% 0,100% 79%,50% 100%,0 79%);
}
.teams-banner::before {
  content: "";
  position: absolute;
  
  border: 1px solid rgba(232,183,84,.48);
  clip-path: polygon(0 0,100% 0,100% 83%,50% 100%,0 83%);
}
.teams-banner::after {
  content: "";
  position: absolute;
  
  
  
  height: 22px;
  border-bottom: 1px solid rgba(223,170,69,.78);
  border-radius: 50%;
}
.teams-banner img {
  position: relative;
  z-index: 1;
  
  
  
  
}
.teams-banner-star {
  position: absolute;
  z-index: 1;
  color: #e5b45a;
  font-size: .72rem;
}
.teams-banner-star.top { top: 18px; right: 18px; }
.teams-banner-star.bottom { bottom: 24px; left: 18px; }

.teams-academy-copy {
  min-width: 0;
  padding-right: 6px;
}
.teams-academy-name {
  color: #f0ca78;
  
  
  
  
  
}
.teams-academy-motto {
  margin-top: 10px;
  color: #e9c986;
  
  font-size: .88rem;
  font-style: italic;
  line-height: 1.1;
}
.teams-academy-rule {
  margin: 12px 0 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  color: #d79a39;
}
.teams-academy-rule span {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(216,151,48,.75));
}
.teams-academy-rule span:last-child {
  background: linear-gradient(90deg,rgba(216,151,48,.75),transparent);
}
.teams-academy-rule i { font-style: normal; font-size: .7rem; }
.teams-academy-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ead4a5;
  
  font-size: .72rem;
  letter-spacing: .025em;
}
.teams-academy-meta > span:not(.teams-meta-separator) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.teams-academy-meta b {
  color: #e1a845;
  font-size: .86rem;
  font-weight: 400;
}
.teams-meta-separator {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg,transparent,rgba(218,156,56,.74),transparent);
}

.teams-leaderboard-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 9px 10px;
  border: 1px solid rgba(199,134,40,.52);
  border-radius: 7px;
  background: linear-gradient(180deg,rgba(7,20,36,.97),rgba(4,13,25,.99));
  overflow: hidden;
}
.teams-leaderboard-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image:
    url("../assets/quest_corner_tl.webp"),
    url("../assets/quest_corner_tr.webp"),
    url("../assets/quest_corner_bl.webp"),
    url("../assets/quest_corner_br.webp");
  background-position: left top,right top,left bottom,right bottom;
  background-size: 29px 29px;
  background-repeat: no-repeat;
  opacity: .88;
}
.teams-leaderboard-toolbar,
.teams-section-heading,
.teams-leaderboard-list,
.teams-invite-card,
.teams-link-panel { position: relative; z-index: 2; }
.teams-leaderboard-toolbar {
  flex: 0 0 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}
.teams-section-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(12px,1fr) auto minmax(12px,1fr);
  align-items: center;
  gap: 7px;
  color: #e7bd68;
  
  font-size: .82rem;
  letter-spacing: .045em;
}
.teams-section-heading span {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(213,151,53,.72));
}
.teams-section-heading span:last-child {
  background: linear-gradient(90deg,rgba(213,151,53,.72),transparent);
}
.teams-section-heading strong { font-weight: 500; white-space: nowrap; }
.teams-period-control {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  
  color: #9faec0;
  
  font-size: .52rem;
  letter-spacing: .08em;
}
.teams-period-control > span { white-space: nowrap; }
.teams-period-control select {
  max-width: 92px;
  min-width: 74px;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid rgba(214,147,44,.68);
  border-radius: 5px;
  color: #efc36c;
  background: #07182a;
  
  font-size: .62rem;
  letter-spacing: .035em;
}
.teams-leaderboard-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5,minmax(0,1fr));
  gap: 4px;
}
.teams-rank-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 44px 50px minmax(0,1fr) 86px;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 6px;
  border: 1px solid rgba(185,154,115,.32);
  border-radius: 5px;
  background: linear-gradient(180deg,rgba(8,24,42,.92),rgba(5,17,31,.94));
}
.teams-rank-row.leader {
  border-color: rgba(223,170,70,.82);
  background: linear-gradient(180deg,rgba(10,30,52,.98),rgba(6,20,37,.98));
  box-shadow: inset 0 0 0 1px rgba(244,205,121,.04);
}
.teams-rank-number {
  display: grid;
  justify-items: center;
  color: #9eafc4;
  
}
.teams-rank-number strong {
  font-size: 1.25rem;
  line-height: .9;
  font-weight: 400;
}
.teams-rank-number span { margin-top: 2px; font-size: .54rem; }
.teams-rank-row.leader .teams-rank-number { color: #efc25f; }
.teams-rank-row:nth-child(3) .teams-rank-number { color: #d88b4a; }
.teams-avatar-shell {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(217,159,61,.82);
  background: #07111e;
  box-shadow: inset 0 0 0 1px rgba(255,235,185,.05);
}
.teams-avatar-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.teams-member-copy { min-width: 0; }
.teams-member-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #efc36c;
  
  font-size: .84rem;
  line-height: 1.04;
}
.teams-crown { color: #f1bb43; font-size: .8rem; }
.teams-member-role {
  margin-top: 3px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #aab4c5;
  
  font-size: .62rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
}
.teams-member-rank {
  flex: 0 0 auto;
  color: #e7bd68;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.teams-member-role-dot { flex: 0 0 auto; color: rgba(231,189,104,.62); }
.teams-member-role-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teams-member-time {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #efc36c;
  
  font-size: .78rem;
  white-space: nowrap;
}
.teams-member-time span { color: #d79734; font-size: .76rem; }

.teams-invite-card {
  flex: 0 0 58px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  text-align: left;
  border: 1px solid rgba(214,147,44,.78);
  border-radius: 5px;
  color: #ead09a;
  background: linear-gradient(180deg,rgba(9,27,46,.97),rgba(5,17,31,.99));
}
.teams-invite-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  color: #f0bc58;
  border: 1px solid rgba(220,158,55,.78);
  background: radial-gradient(circle at 35% 30%,rgba(40,73,104,.88),rgba(8,25,43,.96) 68%);
}
.teams-invite-icon b { font-size: .92rem; font-weight: 400; transform: translate(-3px,-2px); }
.teams-invite-icon i {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
}
.teams-invite-copy { display: grid; gap: 2px; }
.teams-invite-copy strong {
  color: #efc673;
  
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .035em;
}
.teams-invite-copy small {
  color: #d8c2a1;
  
  font-size: .58rem;
}
.teams-invite-arrow {
  justify-self: end;
  color: #e5a343;
  
  font-size: 1.65rem;
  line-height: 1;
}

.teams-link-panel {
  flex: 0 0 88px;
  min-height: 88px;
  padding: 8px 10px 7px;
  border: 1px solid rgba(145,139,131,.20);
  border-radius: 5px;
  background: linear-gradient(180deg,rgba(5,17,31,.96),rgba(4,13,24,.98));
}
.teams-link-title {
  margin-bottom: 5px;
  color: #e5bd72;
  
  font-size: .67rem;
  letter-spacing: .07em;
}
.teams-link-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 88px;
  gap: 7px;
}
.teams-link-box {
  height: 35px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #cbd4e2;
  border: 1px solid rgba(135,145,160,.28);
  border-radius: 4px;
  background: rgba(3,10,19,.52);
  
  font-size: .61rem;
  overflow: hidden;
}
.teams-link-box span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teams-link-chain { color: #90b2d6; font-size: .9rem; }
.teams-copy-button {
  height: 35px;
  border: 1px solid rgba(216,151,48,.82);
  border-radius: 4px;
  color: #e9bd67;
  background: linear-gradient(180deg,rgba(14,34,56,.96),rgba(7,20,36,.98));
  
  font-size: .68rem;
  letter-spacing: .045em;
}
.teams-link-note {
  margin-top: 5px;
  color: #8997ab;
  
  font-size: .54rem;
}
.teams-link-note span { color: #9cb0c9; margin-left: 4px; }
.teams-real-invite { display: none; }

body[data-theme="light"] .teams-academy-card,
body[data-theme="light"] .teams-leaderboard-panel,
body[data-theme="light"] .teams-rank-row,
body[data-theme="light"] .teams-invite-card,
body[data-theme="light"] .teams-link-panel {
  color: #68441f;
  background-color: rgba(249,240,220,.96);
}

@media (max-width:390px) {
  body.secondary-screen-active .teams-mock-content { gap: 5px; }
  .teams-academy-card {
    flex-basis: 138px;
    min-height: 138px;
    grid-template-columns: 100px minmax(0,1fr);
    gap: 10px;
    padding: 9px 12px 9px 9px;
  }
  .teams-banner-wrap { height: 118px; }
  .teams-banner { width: 74px; height: 102px; }
  .teams-banner img { width: 36px; height: 36px; }
  
  .teams-academy-motto { margin-top: 7px; font-size: .73rem; }
  .teams-academy-rule { margin: 9px 0 6px; }
  .teams-academy-meta { gap: 8px; font-size: .60rem; }
  .teams-academy-meta b { font-size: .72rem; }
  .teams-meta-separator { height: 20px; }
  .teams-leaderboard-toolbar { gap: 5px; }
  .teams-section-heading { gap: 5px;  letter-spacing: .025em; }
  .teams-section-heading { grid-template-columns: minmax(6px,1fr) auto minmax(6px,1fr); }
  .teams-period-control > span { display: none; }
  .teams-period-control select { min-width: 70px; max-width: 78px; height: 26px; padding-left: 6px; font-size: .57rem; }
  .teams-leaderboard-panel { gap: 5px; padding: 7px 7px 8px; }
  .teams-section-heading { flex-basis: 23px; font-size: .76rem; }
  .teams-leaderboard-list { gap: 3px; }
  .teams-rank-row {
    grid-template-columns: 34px 42px minmax(0,1fr) 70px;
    gap: 5px;
    padding: 2px 7px 2px 4px;
  }
  .teams-rank-number strong { font-size: 1.04rem; }
  .teams-avatar-shell { width: 36px; height: 36px; }
  .teams-member-name { font-size: .72rem; }
  .teams-member-role { font-size: .55rem; }
  .teams-member-time { gap: 4px; font-size: .66rem; }
  .teams-invite-card {
    flex-basis: 52px;
    min-height: 52px;
    grid-template-columns: 40px minmax(0,1fr) 20px;
    gap: 7px;
    padding: 6px 10px;
  }
  .teams-invite-icon { width: 36px; height: 36px; }
  .teams-invite-copy strong { font-size: .72rem; }
  .teams-invite-copy small { font-size: .51rem; }
  .teams-link-panel { flex-basis: 78px; min-height: 78px; padding: 6px 8px; }
  .teams-link-title { font-size: .60rem; }
  .teams-link-row { grid-template-columns: minmax(0,1fr) 72px; gap: 5px; }
  .teams-link-box, .teams-copy-button { height: 31px; }
  .teams-link-box { font-size: .53rem; padding: 0 7px; }
  .teams-copy-button { font-size: .59rem; }
  .teams-link-note { margin-top: 4px; font-size: .48rem; }
}

@media (max-height:720px) {
  .teams-academy-card { flex-basis: 120px; min-height: 120px; }
  .teams-banner-wrap { height: 104px; }
  .teams-banner { width: 68px; height: 91px; }
  .teams-academy-name { font-size: 1.08rem; }
  .teams-academy-motto { margin-top: 5px; font-size: .67rem; }
  .teams-academy-rule { margin: 6px 0 5px; }
  .teams-academy-meta { font-size: .55rem; }
  .teams-section-heading { flex-basis: 21px; }
  .teams-invite-card { flex-basis: 45px; min-height: 45px; }
  .teams-invite-icon { width: 32px; height: 32px; }
  .teams-link-panel { flex-basis: 68px; min-height: 68px; }
  .teams-link-box, .teams-copy-button { height: 27px; }
  .teams-link-note { font-size: .44rem; }
}


/* ===== Image-based icon refresh for bottom nav + rewards category tabs ===== */
.nav-icon-img {
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .86;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.08));
  transform: none !important;
}
.nav-item.active .nav-icon-img {
  opacity: 1;
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 6px rgba(228,177,76,.25));
}
.nav-glyph { display: none !important; }

.rewards-tab-icon {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
}
.rewards-tab-icon-img {
  display: block;
  
  
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.rewards-mock-tabs button.active .rewards-tab-icon-img {
  transform: scale(1.04);
}

@media (max-width: 390px) {
  .nav-icon-img {
    width: 28px !important;
    height: 28px !important;
  }
  .rewards-tab-icon {
    width: 24px !important;
    height: 24px !important;
  }
  .rewards-tab-icon-img {
    width: 21px !important;
    height: 21px !important;
  }
}


/* ===== Fix image-based nav visibility + correct pet tab icon ===== */
.bottom-nav .nav-item > img.nav-icon-img {
  display: block !important;
  visibility: visible !important;
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  object-position: center !important;
  
  
}
.bottom-nav .nav-item.active > img.nav-icon-img {
  
  transform: scale(1.08) !important;
  
}
.bottom-nav .nav-item svg.nav-glyph,
.bottom-nav .nav-item .nav-stack,
.bottom-nav .nav-item small,
.bottom-nav .nav-item .nav-label {
  display: none !important;
}
.rewards-mock-tabs .rewards-tab-icon-img {
  display: block !important;
  visibility: visible !important;
}
@media (max-width: 390px) {
  .bottom-nav .nav-item > img.nav-icon-img {
    width: 28px !important;
    height: 28px !important;
  }
}


/* ===== Muted nav artwork + favourite-subject settings ===== */





.subject-settings-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 4px 0 12px;
}
.subject-settings-search {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid rgba(214,176,106,.24);
  outline: 0;
  color: #efe0c2;
  background: linear-gradient(180deg, rgba(14,25,40,.94), rgba(9,17,29,.98));
}
.subject-settings-search:focus {
  border-color: rgba(231,189,105,.58);
  box-shadow: 0 0 0 2px rgba(214,176,106,.08);
}
.subject-favorite-count {
  white-space: nowrap;
  color: #e5c174;
  font-size: .72rem;
  letter-spacing: .04em;
}
.subject-settings-list {
  display: grid;
  gap: 14px;
  max-height: min(58vh, 610px);
  overflow-y: auto;
  padding: 2px 3px 8px 0;
}
.subject-settings-group {
  display: grid;
  gap: 7px;
}
.subject-settings-group-title {
  color: #d6ad62;
  
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(214,176,106,.13);
  padding-bottom: 5px;
}
.subject-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.subject-favorite-row {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(210,163,82,.14);
  color: #c8b18b;
  background: linear-gradient(180deg, rgba(17,29,46,.72), rgba(10,19,31,.76));
}
.subject-favorite-row:hover,
.subject-favorite-row:focus-visible {
  border-color: rgba(226,183,98,.34);
}
.subject-favorite-row.selected {
  color: #f0d292;
  border-color: rgba(226,183,98,.38);
  background: linear-gradient(180deg, rgba(38,50,64,.84), rgba(20,31,47,.88));
  box-shadow: inset 0 0 0 1px rgba(247,215,145,.04);
}
.subject-favorite-star {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(194,168,120,.46);
  font-size: .72rem;
  border: 1px solid rgba(214,176,106,.12);
}
.subject-favorite-row.selected .subject-favorite-star {
  color: #efc76d;
  border-color: rgba(232,190,101,.34);
  background: rgba(218,165,65,.10);
}
.subject-favorite-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .75rem;
  line-height: 1.12;
}
.subject-settings-footer {
  margin-top: 10px;
}
.subject-settings-tip {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
  margin-bottom: 9px;
}

body[data-theme="light"] .subject-settings-search {
  color: #57391d;
  background: linear-gradient(180deg, #fff9ed, #f4e5c8);
  border-color: rgba(171,117,39,.24);
}
body[data-theme="light"] .subject-settings-group-title { color: #8b5a20; border-color: rgba(171,117,39,.15); }
body[data-theme="light"] .subject-favorite-row {
  color: #775a38;
  background: linear-gradient(180deg, rgba(255,250,240,.98), rgba(247,236,214,.96));
  border-color: rgba(171,117,39,.16);
}
body[data-theme="light"] .subject-favorite-row.selected {
  color: #6e451b;
  border-color: rgba(171,117,39,.36);
  background: linear-gradient(180deg, #fff1cf, #efd5a1);
}
body[data-theme="light"] .subject-favorite-count { color: #9a651f; }

@media (max-width: 390px) {
  .subject-settings-toolbar { grid-template-columns: 1fr; gap: 7px; }
  .subject-favorite-count { justify-self: start; }
  .subject-settings-grid { grid-template-columns: 1fr; }
  .subject-settings-list { max-height: min(55vh, 540px); }
}


/* ===== Simplified low-colour nav icon artwork (replaces grayscale treatment) ===== */
.bottom-nav .nav-item > img.nav-icon-img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.16)) !important;
  opacity: .92 !important;
}
.bottom-nav .nav-item.active > img.nav-icon-img {
  filter: drop-shadow(0 0 5px rgba(228,177,76,.18)) !important;
  opacity: 1 !important;
}
body[data-theme="light"] .bottom-nav .nav-item > img.nav-icon-img {
  filter: brightness(.88) drop-shadow(0 1px 2px rgba(0,0,0,.10)) !important;
}
body[data-theme="light"] .bottom-nav .nav-item.active > img.nav-icon-img {
  filter: brightness(.96) drop-shadow(0 0 4px rgba(186,127,45,.14)) !important;
}

/* ===== Simplified five-part reward system ===== */
body[data-reward-theme="academy_night"] {
  background: linear-gradient(180deg, rgba(5,8,14,.88), rgba(4,7,12,.95)), url("../assets/bg_academy_night.webp") center/cover fixed no-repeat, var(--bg);
}
body[data-reward-theme="moonlit_study"] {
  background: linear-gradient(180deg, rgba(4,9,18,.76), rgba(4,8,16,.93)), url("../assets/bg_focus_mockup_scene.webp") center/cover fixed no-repeat, #06101d;
}
body[data-reward-theme="castle_courtyard"] {
  background: linear-gradient(180deg, rgba(6,8,12,.72), rgba(5,7,11,.92)), url("../assets/quest_hero_mockup.jpg") center/cover fixed no-repeat, #090b0f;
}
body[data-reward-theme="scholars_hall"] {
  background: linear-gradient(180deg, rgba(5,10,18,.76), rgba(5,9,16,.94)), url("../assets/stats_header_scene.webp") center/cover fixed no-repeat, #07101a;
}
body[data-reward-theme="starlit_archive"] {
  background: linear-gradient(180deg, rgba(4,8,16,.76), rgba(3,7,13,.94)), url("../assets/hero_avatar_scene.webp") center/cover fixed no-repeat, #06101a;
}
body[data-reward-theme="moonlit_study"] .app-shell,
body[data-reward-theme="scholars_hall"] .app-shell,
body[data-reward-theme="starlit_archive"] .app-shell {
  background: linear-gradient(180deg, rgba(7,17,29,.94), rgba(6,14,24,.98));
}
body[data-reward-theme="castle_courtyard"] .app-shell {
  background: linear-gradient(180deg, rgba(13,14,17,.94), rgba(8,10,14,.98));
}



.rewards-tab-label {
  
  white-space: nowrap;
}

.rewards-system-panel {
  position: relative;
  margin: 0 4px;
  padding: 12px;
  border: 1px solid rgba(221,174,87,.22);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(13,28,47,.96), rgba(7,18,31,.985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.14);
  color: #dfc995;
}
.rewards-system-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(237,195,106,.12);
  border-radius: 8px;
}
.rewards-system-panel > * { position: relative; z-index: 1; }
.rewards-system-panel > img,
.castle-progress-head > img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22));
}
.relic-panel,
.theme-panel {
  min-height: 88px;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}
.rewards-system-panel span,
.castle-progress-head span {
  display: block;
  color: #c99c51;
  font-size: .58rem;
  letter-spacing: .1em;
}
.rewards-system-panel strong,
.castle-progress-head strong {
  display: block;
  margin-top: 3px;
  color: #f0ce82;
  
  font-size: .92rem;
  font-weight: 400;
}
.rewards-system-panel p,
.castle-progress-head p {
  margin: 5px 0 0;
  color: #cbb997;
  font-size: .62rem;
  line-height: 1.35;
}

.castle-progress-panel {
  padding: 12px 11px 11px;
}
.castle-progress-head {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 1px 4px 11px;
  border-bottom: 1px solid rgba(221,174,87,.14);
}
.castle-progress-head > img {
  width: 72px;
  height: 64px;
}
.castle-room-upgrades {
  display: grid;
  gap: 6px;
  padding-top: 9px;
}
.castle-room-upgrade {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 74px;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 7px;
  border: 1px solid rgba(214,168,82,.13);
  border-radius: 8px;
  background: rgba(8,17,29,.52);
}
.castle-room-upgrade > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.castle-room-copy {
  min-width: 0;
}
.castle-room-copy strong {
  margin: 0;
  font-size: .72rem;
  color: #e5c47e;
}
.castle-room-copy strong small {
  color: #ad9874;
  font-size: .54rem;
}
.castle-room-copy span {
  margin-top: 3px;
  color: #aa9a7d;
  font-size: .54rem;
  letter-spacing: 0;
  line-height: 1.2;
}
.castle-room-button {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(229,181,87,.34);
  background: linear-gradient(180deg, rgba(31,47,68,.92), rgba(13,25,40,.96));
  color: #eacb82;
  font-size: .61rem;
}
.castle-room-button:disabled {
  opacity: .42;
  cursor: default;
}

.theme-preview {
  width: 68px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(228,184,96,.24);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.reward-system-themes .rewards-mock-art {
  inset: 7px !important;
  width: calc(100% - 14px) !important;
  height: calc(100% - 14px) !important;
  object-fit: cover !important;
  border-radius: 10px;
}



.focus-reward-loadout {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.focus-reward-loadout span {
  max-width: 47%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(220,173,85,.16);
  background: rgba(6,14,24,.50);
  color: #bfa773;
  font-size: .49rem;
  letter-spacing: .035em;
}

body[data-theme="light"] .rewards-system-panel {
  background: linear-gradient(180deg, rgba(255,249,238,.98), rgba(245,232,208,.97));
  border-color: rgba(171,117,39,.22);
}
body[data-theme="light"] .rewards-system-panel strong,
body[data-theme="light"] .castle-progress-head strong { color: #76491b; }
body[data-theme="light"] .rewards-system-panel p,
body[data-theme="light"] .castle-progress-head p,
body[data-theme="light"] .castle-room-copy span { color: #806541; }
body[data-theme="light"] .castle-room-upgrade { background: rgba(255,250,241,.70); }

@media (max-width: 390px) {
  
  .rewards-system-panel { padding: 10px; }
  .relic-panel, .theme-panel { grid-template-columns: 60px minmax(0,1fr); gap: 9px; }
  .rewards-system-panel > img { width: 52px; height: 52px; }
  .theme-preview { width: 56px; height: 50px; }
  .castle-progress-head { grid-template-columns: 62px minmax(0,1fr); gap: 9px; }
  .castle-progress-head > img { width: 58px; height: 52px; }
  .castle-room-upgrade { grid-template-columns: 29px minmax(0,1fr) 66px; gap: 6px; }
  .castle-room-upgrade > img { width: 25px; height: 25px; }
  .castle-room-button { font-size: .55rem; padding: 0 5px; }
}

body.secondary-screen-active .rewards-mock-page.has-system-panel .rewards-mock-list {
  min-height: 0 !important;
  overflow-y: auto !important;
}
.reward-system-themes .rewards-mock-art-frame,
.reward-system-castles .rewards-mock-art-frame {
  border-radius: 9px !important;
}

/* ===== Focus declutter + XP cosmetics + non-warped filigree fixes ===== */
/* Loadout now lives directly under the quote rather than in the control stack. */
.focus-quote-overlay {
  width: min(86%, 430px) !important;
}
.focus-loadout-strip {
  margin: 7px auto 0;
  width: min(94%, 390px);
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  color: rgba(228,204,150,.88);
  font-size: .49rem;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.48);
}
.focus-loadout-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-loadout-strip span:first-child { text-align: right; }
.focus-loadout-strip span:last-child { text-align: left; }
.focus-loadout-strip b {
  margin-right: 4px;
  color: #e7bd68;
  font-weight: 700;
  letter-spacing: .08em;
}
.focus-loadout-strip i {
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, transparent, rgba(225,177,86,.72), transparent);
}
.focus-last-session,
.focus-reward-loadout {
  display: none !important;
}

/* Timer direction deliberately sits beneath the Casual/Strict control. */
.focus-timer-choice-row {
  
  margin-top: 1px !important;
}







/* With the old Last Focus line gone, let the button sit cleanly above navigation. */
body.focus-screen-active .focus-live-controls {
  padding-bottom: 4px !important;
}
body.focus-screen-active .focus-mega-button {
  margin-bottom: 2px !important;
}

/* Purchase coin has a transparent background and is optically centered in the gold button. */

body.secondary-screen-active .rewards-mock-action.price {
  gap: 5px !important;
  overflow: hidden;
}

/* Do not stretch decorative frame artwork to arbitrary aspect ratios. Wide cards use
   fixed-size corner motifs; larger frames use a 9-slice asset so corners retain shape. */
body.secondary-screen-active .quests-mock-row::before,
body.secondary-screen-active .rewards-mock-row::before,
.quests-mock-row::before,
.rewards-mock-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border: 1px solid rgba(210,145,43,.76) !important;
  border-radius: inherit !important;
  background-image:
    url("../assets/quest_corner_tl.webp"),
    url("../assets/quest_corner_tr.webp"),
    url("../assets/quest_corner_bl.webp"),
    url("../assets/quest_corner_br.webp") !important;
  background-position: left top, right top, left bottom, right bottom !important;
  background-size: 30px 30px !important;
  background-repeat: no-repeat !important;
  opacity: .92 !important;
  box-sizing: border-box !important;
}

/* Square item thumbnails stay deliberately simple instead of forcing a 3:1 frame into a square. */
.rewards-mock-art-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  display: block !important;
  pointer-events: none !important;
  background: none !important;
  border: 1px solid rgba(228,184,95,.22) !important;
  border-radius: 10px !important;
  opacity: 1 !important;
}

/* 9-slice frames preserve the filigree corners instead of scaling the entire bitmap. */
.rewards-mock-coin-card::before,
.rewards-mock-title-panel::before {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image-source: url("../assets/filigree_frame_9slice.webp") !important;
  border-image-slice: 190 !important;
  border-image-repeat: stretch !important;
  opacity: .82 !important;
  box-sizing: border-box !important;
}
.rewards-mock-coin-card::before {
  inset: 3px !important;
  border-width: 10px !important;
  border-image-width: 10px !important;
}
.rewards-mock-title-panel::before {
  inset: -2px !important;
  border-width: 12px !important;
  border-image-width: 12px !important;
}

/* Keep XP-gated cosmetic lock copy legible without widening the purchase column. */
body.secondary-screen-active .rewards-mock-action.locked span {
  max-width: 96px;
  white-space: normal !important;
}

@media (max-width: 390px) {
  .focus-loadout-strip {
    width: min(98%, 360px);
    gap: 6px;
    font-size: .45rem;
  }
  .focus-loadout-strip b { margin-right: 3px; }
  body.secondary-screen-active .quests-mock-row::before,
  body.secondary-screen-active .rewards-mock-row::before,
  .quests-mock-row::before,
  .rewards-mock-row::before {
    background-size: 27px 27px !important;
  }
}

/* ===== Rewards sorting/scroll cleanup, claim alerts, focus layout, compact castle management ===== */
/* Rewards keep touch/mouse-wheel scrolling but never show a visual scrollbar. */
body.secondary-screen-active .rewards-mock-list,
.rewards-mock-list {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.secondary-screen-active .rewards-mock-list::-webkit-scrollbar,
.rewards-mock-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Larger, cleaner currency mark inside purchase buttons. */

body.secondary-screen-active .rewards-mock-action.price,
.rewards-mock-action.price {
  gap: 6px !important;
}

/* Claimable quests should read as a reward waiting for the user, not just a completed row. */

.quests-mock-row.claimable .quest-mock-meter .progress-fill {
  box-shadow: 0 0 8px rgba(240,186,74,.46) !important;
}
.quest-mock-reward-button.claim-ready {
  position: relative;
  min-width: 76px !important;
  min-height: 47px !important;
  padding: 4px 8px 5px !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 3px !important;
  row-gap: 0 !important;
  border-color: rgba(255,221,137,.90) !important;
  background: linear-gradient(180deg, #f4ca6f, #c98328) !important;
  color: #251506 !important;
  box-shadow: inset 0 1px 0 rgba(255,244,203,.72), 0 0 12px rgba(234,171,54,.28) !important;
}
.quest-claim-label {
  grid-column: 1 / -1;
  display: block;
  
  
  
  
  
}
.quest-mock-reward-button.claim-ready .quest-reward-icon {
  width: 18px !important;
  height: 18px !important;
}
.quest-mock-reward-button.claim-ready > strong {
  color: #2b1707 !important;
}
@keyframes questClaimGlow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.025); filter: brightness(1.08); }
}
.quest-mock-reward-button.claim-ready {
  animation: questClaimGlow 1.8s ease-in-out infinite;
}
.reduce-motion .quest-mock-reward-button.claim-ready { animation: none !important; }

/* Bottom-nav quest notification. It is an actual child element so it is not affected by old nav pseudo-element rules. */
.bottom-nav .nav-item { position: relative !important; }
.bottom-nav .nav-notification-dot {
  position: absolute !important;
  z-index: 10 !important;
  top: 5px !important;
  left: calc(50% + 10px) !important;
  width: 9px !important;
  height: 9px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #d9382f !important;
  border: 1.5px solid #fff0d1 !important;
  box-shadow: 0 0 0 2px rgba(8,12,18,.72), 0 0 7px rgba(222,48,42,.48) !important;
  pointer-events: none !important;
}
.bottom-nav .nav-notification-dot.hidden { display: none !important; }

/* Focus hierarchy: time first, then subject, then mode/timer. */
.focus-duration-block { order: 1 !important; }
.focus-subject-row { order: 2 !important; }
.focus-mode-label { order: 3 !important; }
.focus-mode-switch { order: 4 !important; }
.focus-timer-choice-row { order: 5 !important; }
.focus-mega-button { order: 7 !important; }
body.focus-screen-active .focus-mega-button {
  width: min(300px, 76%) !important;
  max-width: 300px !important;
}
@media (max-width: 390px) {
  body.focus-screen-active .focus-mega-button {
    width: min(286px, 75%) !important;
  }
}

/* The Castles category shows only a compact current-castle summary. Room management moves into a sheet. */
body.secondary-screen-active .rewards-mock-page.has-system-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}
.castle-current-panel {
  min-height: 82px !important;
  
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
.castle-current-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 9px;
  align-items: center;
}
.castle-current-summary > img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.22));
}
.castle-current-summary span {
  display: block;
  color: #b9965b;
  font-size: .48rem;
  letter-spacing: .10em;
}
.castle-current-summary strong {
  display: block;
  margin-top: 2px;
  color: #f0d28d;
  font-size: .78rem;
}
.castle-current-summary p {
  margin: 3px 0 0;
  color: #c5ad83;
  font-size: .52rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.castle-current-summary small {
  display: block;
  margin-top: 3px;
  color: #9e8b6b;
  font-size: .47rem;
}
.castle-manage-button {
  min-width: 112px;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid rgba(224,177,86,.42);
  
  
  color: #edc66d;
  font-size: .53rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
.castle-manage-button b { font-size: 1rem; vertical-align: -1px; }

/* v76 — Castles page: one clean Current Castle card, no nested inset frame. */
.castle-current-panel::before {
  content: none !important;
  display: none !important;
}
.castle-current-panel {
  margin: 0 4px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(221,174,87,.24) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(13,31,53,.94), rgba(7,20,36,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.12) !important;
}
.castle-current-summary {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.castle-manage-button {
  border-radius: 10px !important;
  background: rgba(9,24,43,.52) !important;
  box-shadow: none !important;
}

/* Castle-room upgrade sheet. */
.castle-sheet-summary {
  display: grid;
  
  gap: 12px;
  align-items: center;
  margin: 2px 0 12px;
  padding: 9px;
  border: 1px solid rgba(214,168,82,.20);
  border-radius: 9px;
  background: rgba(18,31,48,.56);
}
.castle-sheet-summary img { width: 72px; height: 64px; object-fit: contain; }
.castle-sheet-summary strong { display:block; color:#eac879; font-size:.70rem; line-height:1.35; }
.castle-sheet-summary span { display:block; margin-top:4px; color:#a99673; font-size:.58rem; }
.castle-sheet-room-list {
  display: grid;
  gap: 7px;
  
  overflow-y: auto;
  scrollbar-width: none;
}
.castle-sheet-room-list::-webkit-scrollbar { display:none; }
.castle-sheet-room {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 82px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(215,169,83,.17);
  border-radius: 8px;
  background: rgba(13,25,40,.66);
}
.castle-sheet-room > img { width:32px; height:32px; object-fit:contain; }
.castle-sheet-room-copy strong { display:block; color:#edd08b; font-size:.68rem; }
.castle-sheet-room-copy strong small { color:#ad956d; font-size:.52rem; font-weight:500; }
.castle-sheet-room-copy span { display:block; margin-top:3px; color:#b7a17b; font-size:.55rem; line-height:1.3; }
.castle-sheet-room .castle-room-button { min-height:34px; }

@media (max-width: 390px) {
  .castle-current-panel { grid-template-columns: minmax(0,1fr) 96px !important; gap:6px !important; }
  .castle-current-summary { grid-template-columns: 49px minmax(0,1fr); gap:7px; }
  .castle-current-summary > img { width:47px; height:47px; }
  .castle-current-summary p { max-width: 155px; }
  .castle-manage-button { min-width: 92px; padding:0 6px; font-size:.48rem; }
  .castle-sheet-room { grid-template-columns: 30px minmax(0,1fr) 70px; gap:6px; padding:7px; }
  .castle-sheet-room > img { width:27px; height:27px; }
}

/* ===== Claim-state, timer-label, and XP-lock refinements ===== */
/* Timer direction no longer needs a redundant TIMER label. */
.focus-timer-choice-row {
  grid-template-columns: 1fr !important;
  width: min(300px, 86%) !important;
  gap: 0 !important;
}
.focus-timer-switch {
  width: 100% !important;
}

/* Claimable quests keep their coin/value, with a clear green CLAIM status underneath. */
body.secondary-screen-active .quest-mock-reward-button.claim-ready,
.quest-mock-reward-button.claim-ready {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f2c866 !important;
  animation: none !important;
}
.quest-claim-reward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1 !important;
}
.quest-claim-label {
  display: block !important;
  margin-top: 1px !important;
  color: #73d38a !important;
  font-size: .48rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-shadow: 0 0 7px rgba(73, 190, 103, .28) !important;
}
.quest-mock-reward-button.claim-ready:hover .quest-claim-label,
.quest-mock-reward-button.claim-ready:focus-visible .quest-claim-label {
  color: #9be7aa !important;
}

/* Once claimed, the green tick replaces the coin and reward value entirely. */
.quest-mock-claimed-tick {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  color: #79d38d !important;
  
  font-size: 1.85rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(81, 191, 108, .22) !important;
}
body[data-theme="light"] .quest-mock-claimed-tick,
body[data-theme="light"] .quest-claim-label {
  color: #347d43 !important;
  text-shadow: none !important;
}

/* XP-gated rewards retain an explicit lock symbol with the requirement directly beneath it. */
body.secondary-screen-active .rewards-mock-action.locked.xp-locked,
.rewards-mock-action.locked.xp-locked {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
}
body.secondary-screen-active .reward-xp-lock,
.reward-xp-lock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #ecc97a !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  white-space: nowrap !important;
}
.reward-xp-lock-icon {
  display: inline-block !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  filter: saturate(.65) sepia(.18);
}
body.secondary-screen-active .rewards-mock-action.locked .reward-xp-requirement,
.rewards-mock-action.locked .reward-xp-requirement {
  display: block !important;
  max-width: 100px !important;
  color: #c9b17e !important;
  font-size: .47rem !important;
  line-height: 1.08 !important;
  letter-spacing: .045em !important;
  white-space: normal !important;
}


/* ===== Focus label + clean coin refinements ===== */
.focus-live-controls .focus-minimum-hint { display: none !important; }
.focus-subject-row > span { display: none !important; }
.rewards-mock-action.price img,
.quest-mock-reward-button .quest-reward-icon,
.quest-mock-reward-value .quest-reward-icon {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Final focus duration + rewards purchase-button refinement ===== */
/* Keep the duration readout the same size when switching Count Down / Count Up. */
.focus-time-value,
.focus-duration-block.is-open-ended .focus-time-value {
  font-size: clamp(1.55rem, 6.5vw, 2.15rem) !important;
  
  letter-spacing: .025em !important;
  font-variant-numeric: tabular-nums;
}

/* Purchase = one uninterrupted filled gold pill: coin left, price right. */
body.secondary-screen-active button.rewards-mock-action.price,
button.rewards-mock-action.price,
body.secondary-screen-active .rewards-mock-action.price,
.rewards-mock-action.price {
  width: 126px !important;
  min-width: 126px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  
  
  overflow: hidden !important;
  border-radius: 13px !important;
  border: 1px solid #f4d47d !important;
  background: #e5ad45 !important;
  background-image: none !important;
  color: #24180a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 9px rgba(0,0,0,.16) !important;
}
body.secondary-screen-active button.rewards-mock-action.price::before,
body.secondary-screen-active button.rewards-mock-action.price::after,
button.rewards-mock-action.price::before,
button.rewards-mock-action.price::after {
  content: none !important;
  display: none !important;
}
body.secondary-screen-active .rewards-mock-action.price img,
.rewards-mock-action.price img {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  
  filter: drop-shadow(0 1px 1px rgba(69,37,3,.24)) !important;
}
body.secondary-screen-active .rewards-mock-action.price strong,
.rewards-mock-action.price strong {
  margin: 0 !important;
  flex: 0 0 auto !important;
  color: #24180a !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  
  white-space: nowrap !important;
}
@media (max-width: 390px) {
  body.secondary-screen-active button.rewards-mock-action.price,
  button.rewards-mock-action.price,
  body.secondary-screen-active .rewards-mock-action.price,
  .rewards-mock-action.price {
    width: 116px !important;
    min-width: 116px !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 10px !important;
  }
  body.secondary-screen-active .rewards-mock-action.price img,
  .rewards-mock-action.price img {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }
  body.secondary-screen-active .rewards-mock-action.price strong,
  .rewards-mock-action.price strong {
    font-size: .76rem !important;
  }
}

/* ===== Reward purchase alignment + fixed focus character sizing + mystery reward features ===== */
/* Purchase pill stays filled gold, but coin/value sit as a compact centered pair. */
body.secondary-screen-active button.rewards-mock-action.price,
button.rewards-mock-action.price,
body.secondary-screen-active .rewards-mock-action.price,
.rewards-mock-action.price {
  justify-content: center !important;
  gap: 7px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.secondary-screen-active .rewards-mock-action.price img,
.rewards-mock-action.price img {
  transform: translateY(-2px) !important;
  margin: 0 !important;
}
body.secondary-screen-active .rewards-mock-action.price strong,
.rewards-mock-action.price strong {
  text-align: center !important;
}

/* Subject selector is centered; the redundant MODE label is gone. */
.focus-mode-label { display: none !important; }
.focus-subject-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.focus-subject-row select {
  width: min(270px, 76%) !important;
  max-width: 270px !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Character and companion sizes are fixed so timer-mode layout changes never resize them. */
.focus-character-ground .hero-avatar {
  width: 210px !important;
  height: 292px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 210px !important;
  min-height: 292px !important;
  bottom: 0 !important;
}
.focus-character-ground .hero-pet {
  width: 82px !important;
  height: 84px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 82px !important;
  min-height: 84px !important;
  bottom: 3px !important;
}
@media (max-width: 390px) {
  .focus-character-ground .hero-avatar {
    width: 190px !important;
    height: 248px !important;
    min-width: 190px !important;
    min-height: 248px !important;
  }
  .focus-character-ground .hero-pet {
    width: 70px !important;
    height: 72px !important;
    min-width: 70px !important;
    min-height: 72px !important;
  }
}

/* Six compact reward categories including mystery chests. */

.rewards-mock-tabs button {
  min-width: 0 !important;
  
  
}



/* Mystery chests occupy the content region and scroll naturally without a visible scrollbar. */
.mystery-chest-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 0 4px 4px;
}
.mystery-chest-list::-webkit-scrollbar { display: none; }
.mystery-chest-card {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) 116px;
  gap: 10px;
  align-items: center;
  min-height: 94px;
  padding: 10px 12px;
  border: 1px solid rgba(222,176,88,.20);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12,27,46,.97), rgba(7,17,30,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.mystery-chest-card > img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.24));
}
.mystery-chest-copy { min-width: 0; }
.mystery-chest-copy > span {
  display: block;
  color: #c99b50;
  font-size: .48rem;
  letter-spacing: .11em;
}
.mystery-chest-copy > strong {
  display: block;
  margin-top: 3px;
  color: #efd087;
  
  font-size: .82rem;
  font-weight: 400;
}
.mystery-chest-copy p {
  margin: 4px 0 0;
  color: #c0ad89;
  font-size: .56rem;
  line-height: 1.3;
}
.mystery-chest-copy small {
  display: block;
  margin-top: 4px;
  color: #8fac80;
  font-size: .50rem;
}
.mystery-chest-buy {
  width: 108px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #f4d47d;
  border-radius: 13px;
  background: #e5ad45;
  color: #24180a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 9px rgba(0,0,0,.16);
}
.mystery-chest-buy img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  transform: translateY(-2px);
}
.mystery-chest-buy strong {
  color: #24180a;
  font-size: .78rem;
  line-height: 1;
}
.mystery-chest-buy:disabled { opacity: .42; }
body.secondary-screen-active .rewards-mock-page.has-system-panel:has(.mystery-chest-list) {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}
body.secondary-screen-active .rewards-mock-page.has-system-panel:has(.mystery-chest-list) .rewards-mock-list {
  display: none !important;
}
@media (max-width: 390px) {
  .mystery-chest-card {
    grid-template-columns: 58px minmax(0,1fr) 94px;
    gap: 7px;
    padding: 8px;
  }
  .mystery-chest-card > img { width: 54px; height: 54px; }
  .mystery-chest-buy { width: 90px; height: 40px; }
  .mystery-chest-buy img { width: 24px; height: 24px; }
  .mystery-chest-buy strong { font-size: .70rem; }
}

/* ===== Rewards boosts + richer theme skins ===== */
.rewards-mock-tabs {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.rewards-mock-tabs button {
  min-width: 0;
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.rewards-tab-label {
  font-size: .50rem !important;
  line-height: 1.05;
}

.rewards-system-panel.boost-panel {
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.boost-state-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.boost-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid rgba(220,174,84,.12);
  background: rgba(8,16,27,.34);
}
.boost-state-row strong,
.boost-state-row span {
  margin: 0 !important;
  display: block;
  font-size: .56rem !important;
  letter-spacing: .07em;
}
.boost-state-row strong { color: #efcd81 !important; }
.boost-state-row span { color: #ccb996 !important; text-align: right; }
.boost-state-row.active {
  border-color: rgba(97,184,139,.28);
  background: linear-gradient(180deg, rgba(19,47,39,.72), rgba(11,28,22,.84));
}
.rewards-mock-action.active-boost,
body.secondary-screen-active .rewards-mock-action.active-boost {
  display: grid !important;
  gap: 2px;
  min-width: 126px;
  background: linear-gradient(180deg, rgba(20,72,55,.96), rgba(12,44,33,.98)) !important;
  border-color: rgba(90,170,130,.34) !important;
  color: #d9f0e5 !important;
}
.rewards-mock-action.active-boost span,
body.secondary-screen-active .rewards-mock-action.active-boost span {
  display: block;
  font-size: .50rem !important;
  letter-spacing: .08em;
  color: #bfe3d2 !important;
}
.reward-system-boosts .rewards-mock-desc { line-height: 1.35; }

.mystery-chest-card small {
  display: block;
  margin-top: 5px;
  color: #bfa574;
}

@media (max-width: 390px) {
  .rewards-mock-tabs button { min-height: 64px !important; }
  .rewards-tab-label { font-size: .43rem !important; }
  .rewards-system-panel.boost-panel { grid-template-columns: 60px minmax(0, 1fr); gap: 9px; }
  .boost-state-row { padding: 4px 6px; }
  .boost-state-row strong,
  .boost-state-row span { font-size: .50rem !important; }
}

/* Theme skin variables */

body[data-reward-theme="moonlit_study"] {
  --fq-theme-accent: #87bae7;
  --fq-theme-accent-soft: rgba(135,186,231,.18);
  --fq-theme-border: rgba(126,183,228,.26);
  --fq-theme-shell: linear-gradient(180deg, rgba(6,20,39,.96), rgba(5,14,27,.985));
  --fq-theme-panel: linear-gradient(180deg, rgba(16,39,66,.96), rgba(8,22,39,.985));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(26,51,84,.92), rgba(10,25,43,.96));
  --fq-theme-text-soft: #b6cee3;
  --fq-theme-topbar: linear-gradient(180deg, rgba(8,22,40,.94), rgba(8,17,32,.90));
  --fq-theme-nav: linear-gradient(180deg, rgba(8,24,43,.96), rgba(7,18,31,.98));
}
body[data-reward-theme="castle_courtyard"] {
  --fq-theme-accent: #e3b171;
  --fq-theme-accent-soft: rgba(227,177,113,.18);
  --fq-theme-border: rgba(205,150,90,.26);
  --fq-theme-shell: linear-gradient(180deg, rgba(28,18,14,.96), rgba(17,11,10,.985));
  --fq-theme-panel: linear-gradient(180deg, rgba(52,31,23,.95), rgba(28,16,14,.985));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(74,44,32,.92), rgba(33,19,16,.96));
  --fq-theme-text-soft: #d8c0a7;
  --fq-theme-topbar: linear-gradient(180deg, rgba(36,22,17,.94), rgba(26,16,13,.90));
  --fq-theme-nav: linear-gradient(180deg, rgba(31,19,15,.96), rgba(19,12,10,.98));
}
body[data-reward-theme="scholars_hall"] {
  --fq-theme-accent: #d7c17f;
  --fq-theme-accent-soft: rgba(215,193,127,.18);
  --fq-theme-border: rgba(190,171,109,.24);
  --fq-theme-shell: linear-gradient(180deg, rgba(12,24,35,.96), rgba(9,18,28,.985));
  --fq-theme-panel: linear-gradient(180deg, rgba(21,41,56,.96), rgba(14,28,39,.985));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(31,57,76,.92), rgba(17,31,43,.96));
  --fq-theme-text-soft: #c8c4a9;
  --fq-theme-topbar: linear-gradient(180deg, rgba(14,27,38,.94), rgba(12,22,31,.90));
  --fq-theme-nav: linear-gradient(180deg, rgba(13,26,36,.96), rgba(10,20,28,.98));
}
body[data-reward-theme="starlit_archive"] {
  --fq-theme-accent: #af97ef;
  --fq-theme-accent-soft: rgba(175,151,239,.18);
  --fq-theme-border: rgba(153,122,228,.26);
  --fq-theme-shell: linear-gradient(180deg, rgba(17,11,35,.96), rgba(11,8,25,.985));
  --fq-theme-panel: linear-gradient(180deg, rgba(31,21,62,.96), rgba(17,12,35,.985));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(48,33,84,.92), rgba(23,15,46,.96));
  --fq-theme-text-soft: #c8bde8;
  --fq-theme-topbar: linear-gradient(180deg, rgba(20,13,40,.94), rgba(15,10,31,.90));
  --fq-theme-nav: linear-gradient(180deg, rgba(18,12,36,.96), rgba(13,9,28,.98));
}

body[data-reward-theme] .app-shell { background: var(--fq-theme-shell) !important; }
body[data-reward-theme] .topbar {
  
  border-bottom-color: var(--fq-theme-border) !important;
}
body[data-reward-theme] .bottom-nav {
  background: var(--fq-theme-nav) !important;
  border-top-color: var(--fq-theme-border) !important;
}
body[data-reward-theme] .icon-button,
body[data-reward-theme] .profile-button,
body[data-reward-theme] .secondary-button,
body[data-reward-theme] .danger-button,
body[data-reward-theme] .tiny-button,
body[data-reward-theme] .segmented button,
body[data-reward-theme] .team-tabs button,
body[data-reward-theme] .iphone-quests-page .iphone-tab-switch button,
body[data-reward-theme] .rewards-mock-tabs button {
  border-color: var(--fq-theme-border) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.04) !important;
}
body[data-reward-theme] .iphone-surface,
body[data-reward-theme] .rewards-system-panel,
body[data-reward-theme] .rewards-mock-row,
body[data-reward-theme] .mystery-chest-card,
body[data-reward-theme] .iphone-quest-row,
body[data-reward-theme] .team-feature-card,
body[data-reward-theme] .team-member-row,
body[data-reward-theme] .team-leaderboard,
body[data-reward-theme] .team-invite-card,
body[data-reward-theme] .teams-link-panel,
body[data-reward-theme] .stats-mock-summary-tile,
body[data-reward-theme] .stats-mock-goal-row,
body[data-reward-theme] .stats-mock-detail-row,
body[data-reward-theme] .stats-mock-lifetime-panel,
body[data-reward-theme] .stats-range-select-shell,
body[data-reward-theme] .focus-quote-overlay,
body[data-reward-theme] .focus-settings-card,
body[data-reward-theme] .focus-panel,
body[data-reward-theme] .screen-card {
  background: var(--fq-theme-panel) !important;
  border-color: var(--fq-theme-border) !important;
}
body[data-reward-theme] .stats-mock-chart-shell,
body[data-reward-theme] .castle-sheet-room,
body[data-reward-theme] .boost-state-row,
body[data-reward-theme] .castle-sheet-summary,
body[data-reward-theme] .reward-character-panel,
body[data-reward-theme] .castle-current-panel {
  background: var(--fq-theme-panel-soft) !important;
  border-color: var(--fq-theme-border) !important;
}
body[data-reward-theme] .brand-lockup p,
body[data-reward-theme] .rewards-system-panel span,
body[data-reward-theme] .castle-progress-head span,
body[data-reward-theme] .boost-state-row span,
body[data-reward-theme] .rewards-mock-desc,
body[data-reward-theme] .iphone-row-sub,
body[data-reward-theme] .iphone-row-progress,
body[data-reward-theme] .team-motto,
body[data-reward-theme] .team-meta,
body[data-reward-theme] .teams-member-role,
body[data-reward-theme] .stats-mock-caption,
body[data-reward-theme] .stats-mock-goal-sub,
body[data-reward-theme] .stats-mock-goal-side span,
body[data-reward-theme] .focus-loadout-strip,
body[data-reward-theme] .quest-tab-summary,
body[data-reward-theme] .subtle-invite {
  color: var(--fq-theme-text-soft) !important;
}
body[data-reward-theme] .secondary-page-title h2,
body[data-reward-theme] .rewards-system-panel strong,
body[data-reward-theme] .castle-progress-head strong,
body[data-reward-theme] .stats-mock-section-title,
body[data-reward-theme] .stats-mock-value,
body[data-reward-theme] .stats-mock-goal-name,
body[data-reward-theme] .stats-mock-goal-side strong,
body[data-reward-theme] .teams-academy-name,
body[data-reward-theme] .teams-section-heading strong,
body[data-reward-theme] .member-copy strong,
body[data-reward-theme] .rewards-wallet strong,
body[data-reward-theme] .rewards-mock-name,
body[data-reward-theme] .rewards-mock-rarity,
body[data-reward-theme] .coin-reward,
body[data-reward-theme] .quest-claim-state.claimable,
body[data-reward-theme] .focus-loadout-strip b {
  color: var(--fq-theme-accent) !important;
}
body[data-reward-theme] .rewards-mock-tabs button.active,
body[data-reward-theme] .iphone-quests-page .iphone-tab-switch button.active,
body[data-reward-theme] .team-tabs button.active,
body[data-reward-theme] .compact-range button.active,
body[data-reward-theme] .segmented button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fq-theme-accent) 24%, transparent), color-mix(in srgb, var(--fq-theme-accent) 12%, transparent)) !important;
  color: var(--fq-theme-accent) !important;
  border-color: color-mix(in srgb, var(--fq-theme-accent) 48%, rgba(255,255,255,.1)) !important;
}
body[data-reward-theme] .focus-loadout-strip,
body[data-reward-theme] .focus-quote-overlay,
body[data-reward-theme] .quest-tab-summary,
body[data-reward-theme] .rewards-wallet,
body[data-reward-theme] .teams-link-box {
  box-shadow: 0 0 0 1px var(--fq-theme-accent-soft), inset 0 1px 0 rgba(255,255,255,.02) !important;
}
body[data-reward-theme="moonlit_study"] .secondary-page-header,
body[data-reward-theme="moonlit_study"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(7,24,44,.26), rgba(7,24,44,.74)), url("../assets/bg_focus_mockup_scene.webp") center 42%/cover no-repeat !important;
}
body[data-reward-theme="castle_courtyard"] .secondary-page-header,
body[data-reward-theme="castle_courtyard"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(31,16,10,.20), rgba(31,16,10,.72)), url("../assets/quest_hero_mockup.jpg") center 42%/cover no-repeat !important;
}
body[data-reward-theme="scholars_hall"] .secondary-page-header,
body[data-reward-theme="scholars_hall"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(10,24,33,.24), rgba(10,24,33,.74)), url("../assets/stats_header_scene.webp") center 42%/cover no-repeat !important;
}
body[data-reward-theme="starlit_archive"] .secondary-page-header,
body[data-reward-theme="starlit_archive"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(18,10,37,.22), rgba(18,10,37,.76)), url("../assets/hero_avatar_scene.webp") center 42%/cover no-repeat !important;
}
body[data-reward-theme="academy_night"] .secondary-page-header,
body[data-reward-theme="academy_night"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(8,14,24,.26), rgba(8,14,24,.72)), url("../assets/bg_academy_night.webp") center 42%/cover no-repeat !important;
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, white 50%, black)) {
  body[data-reward-theme] .rewards-mock-tabs button.active,
  body[data-reward-theme] .iphone-quests-page .iphone-tab-switch button.active,
  body[data-reward-theme] .team-tabs button.active,
  body[data-reward-theme] .compact-range button.active,
  body[data-reward-theme] .segmented button.active {
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  }
}

/* ===== Premium environment themes with bespoke backgrounds ===== */
body[data-reward-theme="moon_castle"] {
  --fq-theme-accent: #b7cdff;
  --fq-theme-accent-soft: rgba(183,205,255,.20);
  --fq-theme-border: rgba(178,199,245,.26);
  --fq-theme-shell: linear-gradient(180deg, rgba(8,13,28,.66), rgba(6,10,22,.82));
  --fq-theme-panel: linear-gradient(180deg, rgba(13,24,52,.82), rgba(8,16,34,.90));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(22,35,68,.78), rgba(11,21,42,.86));
  --fq-theme-text-soft: #ced9f4;
  --fq-theme-topbar: linear-gradient(180deg, rgba(9,14,32,.84), rgba(8,12,26,.80));
  --fq-theme-nav: linear-gradient(180deg, rgba(8,14,30,.84), rgba(7,11,24,.90));
  background: linear-gradient(180deg, rgba(4,7,16,.54), rgba(4,7,16,.88)), url("../assets/theme_moon_castle_unique.webp") center/cover fixed no-repeat, var(--bg) !important;
}
body[data-reward-theme="volcano_castle"] {
  --fq-theme-accent: #ffbf79;
  --fq-theme-accent-soft: rgba(255,191,121,.18);
  --fq-theme-border: rgba(236,128,66,.28);
  --fq-theme-shell: linear-gradient(180deg, rgba(40,17,9,.66), rgba(24,10,7,.84));
  --fq-theme-panel: linear-gradient(180deg, rgba(58,24,14,.82), rgba(31,13,10,.90));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(79,33,19,.78), rgba(39,16,11,.88));
  --fq-theme-text-soft: #f2c8ad;
  --fq-theme-topbar: linear-gradient(180deg, rgba(45,18,11,.86), rgba(27,11,9,.80));
  --fq-theme-nav: linear-gradient(180deg, rgba(39,16,10,.88), rgba(24,10,8,.92));
  
}
body[data-reward-theme="beach_castle"] {
  --fq-theme-accent: #58a8de;
  --fq-theme-accent-soft: rgba(88,168,222,.18);
  --fq-theme-border: rgba(110,168,203,.28);
  --fq-theme-shell: linear-gradient(180deg, rgba(225,240,247,.60), rgba(193,223,236,.72));
  --fq-theme-panel: linear-gradient(180deg, rgba(249,243,232,.88), rgba(224,238,247,.92));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(236,246,250,.84), rgba(222,235,242,.90));
  --fq-theme-text-soft: #5d7282;
  --fq-theme-topbar: linear-gradient(180deg, rgba(236,245,248,.84), rgba(214,233,241,.82));
  --fq-theme-nav: linear-gradient(180deg, rgba(238,246,249,.88), rgba(216,234,241,.92));
  
}
body[data-reward-theme="cliffside_castle"] {
  --fq-theme-accent: #dce7f8;
  --fq-theme-accent-soft: rgba(220,231,248,.18);
  --fq-theme-border: rgba(192,208,230,.28);
  --fq-theme-shell: linear-gradient(180deg, rgba(12,24,43,.56), rgba(8,17,30,.76));
  --fq-theme-panel: linear-gradient(180deg, rgba(28,44,68,.78), rgba(13,28,47,.88));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(40,58,84,.74), rgba(16,30,50,.84));
  --fq-theme-text-soft: #d8e1ee;
  --fq-theme-topbar: linear-gradient(180deg, rgba(14,28,46,.82), rgba(10,20,34,.78));
  --fq-theme-nav: linear-gradient(180deg, rgba(13,25,42,.86), rgba(9,18,30,.90));
  
}
body[data-reward-theme="forest_castle"] {
  --fq-theme-accent: #b9df8f;
  --fq-theme-accent-soft: rgba(185,223,143,.18);
  --fq-theme-border: rgba(162,202,126,.26);
  --fq-theme-shell: linear-gradient(180deg, rgba(20,34,20,.54), rgba(13,24,15,.78));
  --fq-theme-panel: linear-gradient(180deg, rgba(40,60,35,.80), rgba(20,35,20,.88));
  --fq-theme-panel-soft: linear-gradient(180deg, rgba(53,75,46,.76), rgba(24,40,24,.84));
  --fq-theme-text-soft: #dce8ca;
  --fq-theme-topbar: linear-gradient(180deg, rgba(24,39,23,.84), rgba(15,28,16,.80));
  --fq-theme-nav: linear-gradient(180deg, rgba(22,36,21,.88), rgba(13,24,14,.90));
  background: linear-gradient(180deg, rgba(13,23,11,.40), rgba(10,19,10,.84)), url("../assets/theme_forest_castle.webp") center/cover fixed no-repeat, var(--bg) !important;
}

body[data-reward-theme="moon_castle"] .app-shell,
body[data-reward-theme="volcano_castle"] .app-shell,
body[data-reward-theme="beach_castle"] .app-shell,
body[data-reward-theme="cliffside_castle"] .app-shell,
body[data-reward-theme="forest_castle"] .app-shell {
  background: linear-gradient(180deg, rgba(7,12,20,.58), rgba(7,12,20,.86)), var(--fq-theme-shell) !important;
}

body[data-reward-theme="moon_castle"] .secondary-page-header,
body[data-reward-theme="moon_castle"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(7,14,31,.20), rgba(7,14,31,.70)), url("../assets/theme_moon_castle_unique.webp") center 34%/cover no-repeat !important;
}
body[data-reward-theme="volcano_castle"] .secondary-page-header,
body[data-reward-theme="volcano_castle"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(43,14,9,.15), rgba(43,14,9,.72)), url("../assets/theme_volcano_castle.webp") center 40%/cover no-repeat !important;
}
body[data-reward-theme="beach_castle"] .secondary-page-header,
body[data-reward-theme="beach_castle"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(10,41,62,.12), rgba(10,41,62,.66)), url("../assets/theme_beach_castle.webp") center 38%/cover no-repeat !important;
}
body[data-reward-theme="cliffside_castle"] .secondary-page-header,
body[data-reward-theme="cliffside_castle"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(14,24,39,.14), rgba(14,24,39,.70)), url("../assets/theme_cliffside_castle_unique.webp") center 36%/cover no-repeat !important;
}
body[data-reward-theme="forest_castle"] .secondary-page-header,
body[data-reward-theme="forest_castle"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(18,31,16,.12), rgba(18,31,16,.68)), url("../assets/theme_forest_castle.webp") center 38%/cover no-repeat !important;
}
body[data-reward-theme="celestial_observatory"] .secondary-page-header,
body[data-reward-theme="celestial_observatory"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(8,18,36,.14), rgba(8,18,36,.68)), url("../assets/theme_celestial_observatory.webp") center 34%/cover no-repeat !important;
}
body[data-reward-theme="moonlit_atlantis"] .secondary-page-header,
body[data-reward-theme="moonlit_atlantis"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(6,20,30,.14), rgba(6,20,30,.68)), url("../assets/theme_moonlit_atlantis_terrace_v2.webp") center 34%/cover no-repeat !important;
}
body[data-reward-theme="aurora_icy_citadel"] .secondary-page-header,
body[data-reward-theme="aurora_icy_citadel"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(8,20,34,.14), rgba(8,20,34,.68)), url("../assets/theme_aurora_icy_citadel.webp") center 34%/cover no-repeat !important;
}
body[data-reward-theme="crystal_cavern"] .secondary-page-header,
body[data-reward-theme="crystal_cavern"] .stats-mock-page > .secondary-page-header {
  background: linear-gradient(180deg, rgba(18,10,31,.14), rgba(18,10,31,.70)), url("../assets/theme_crystal_cavern.webp") center 34%/cover no-repeat !important;
}

body[data-reward-theme="moon_castle"] .ambient,
body[data-reward-theme="volcano_castle"] .ambient,
body[data-reward-theme="beach_castle"] .ambient,
body[data-reward-theme="cliffside_castle"] .ambient,
body[data-reward-theme="forest_castle"] .ambient {
  display: none !important;
}

body[data-reward-theme="beach_castle"] .secondary-page-title h2,
body[data-reward-theme="beach_castle"] .rewards-system-panel strong,
body[data-reward-theme="beach_castle"] .castle-progress-head strong,
body[data-reward-theme="beach_castle"] .stats-mock-section-title,
body[data-reward-theme="beach_castle"] .stats-mock-value,
body[data-reward-theme="beach_castle"] .stats-mock-goal-name,
body[data-reward-theme="beach_castle"] .stats-mock-goal-side strong,
body[data-reward-theme="beach_castle"] .teams-academy-name,
body[data-reward-theme="beach_castle"] .teams-section-heading strong,
body[data-reward-theme="beach_castle"] .member-copy strong,
body[data-reward-theme="beach_castle"] .rewards-wallet strong,
body[data-reward-theme="beach_castle"] .rewards-mock-name,
body[data-reward-theme="beach_castle"] .rewards-mock-rarity,
body[data-reward-theme="beach_castle"] .coin-reward,
body[data-reward-theme="beach_castle"] .quest-claim-state.claimable,
body[data-reward-theme="beach_castle"] .focus-loadout-strip b {
  color: #3f84b0 !important;
}
body[data-reward-theme="beach_castle"] .rewards-mock-desc,
body[data-reward-theme="beach_castle"] .iphone-row-sub,
body[data-reward-theme="beach_castle"] .iphone-row-progress,
body[data-reward-theme="beach_castle"] .team-motto,
body[data-reward-theme="beach_castle"] .team-meta,
body[data-reward-theme="beach_castle"] .teams-member-role,
body[data-reward-theme="beach_castle"] .stats-mock-caption,
body[data-reward-theme="beach_castle"] .stats-mock-goal-sub,
body[data-reward-theme="beach_castle"] .stats-mock-goal-side span,
body[data-reward-theme="beach_castle"] .focus-loadout-strip,
body[data-reward-theme="beach_castle"] .quest-tab-summary,
body[data-reward-theme="beach_castle"] .subtle-invite,
body[data-reward-theme="beach_castle"] .brand-lockup p,
body[data-reward-theme="beach_castle"] .rewards-system-panel span {
  color: #627886 !important;
}


/* ===== v83: remove outer wallpaper for beach / volcano / cliffside themes ===== */
body[data-reward-theme="volcano_castle"],
body[data-reward-theme="beach_castle"],
body[data-reward-theme="cliffside_castle"] {
  background-image: none !important;
}
body[data-reward-theme="volcano_castle"] {
  background: linear-gradient(180deg, rgba(27,8,5,.48), rgba(20,7,5,.88)), var(--bg) !important;
}
body[data-reward-theme="beach_castle"] {
  background: linear-gradient(180deg, rgba(8,29,43,.42), rgba(6,22,34,.84)), var(--bg) !important;
}
body[data-reward-theme="cliffside_castle"] {
  background: linear-gradient(180deg, rgba(8,16,26,.46), rgba(7,13,22,.88)), var(--bg) !important;
}