/* ═══════════════════════════════════════════════════════════════
   Math Hero — V2.1 economy layer styles
   (hero shop, look editor, power-ups, daily chest + missions,
    celebrations, screen-transition motion). RTL-aware, 60fps:
   transform/opacity animations only.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Screen-transition motion ("warp" enter on navigation) ─── */
body.view-home #homeScreen,
body.view-map  #mapScreen,
body.view-play #playScreen,
body.view-shop #shopScreen {
  animation: viewWarp .38s var(--m-snappy);
}
@keyframes viewWarp {
  from { opacity: 0; transform: scale(.955) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Avatar SVG bits ─── */
#avatarEmoji svg { display: block; }
.avEyes { animation: avBlink 3.6s linear infinite; }
@keyframes avBlink {
  0%, 95.5% { transform: scaleY(1); }
  96.5%, 98.8% { transform: scaleY(.12); }
  100% { transform: scaleY(1); }
}
.avBreathe {
  animation: avBreathe 1.7s ease-in-out infinite alternate;
  transform-origin: 100px 176px;
}
@keyframes avBreathe { from { transform: scale(.99); } to { transform: scale(1.015); } }
.avPet { animation: avPetBob 1.1s ease-in-out infinite alternate; }
@keyframes avPetBob { from { transform: translateY(1.5px); } to { transform: translateY(-2.5px); } }

/* ─── Shop screen shell ─── */
#shopScreen { display: none; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
body.view-shop #shopScreen { display: flex; }
#shopTop { display: flex; align-items: center; gap: 6px; flex: none; }
#shopTitle {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 900; color: var(--title-color);
  text-shadow: 0 0 8px color-mix(in srgb, var(--title-color) 55%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#shopCoins { color: var(--yellow); background: rgba(255, 217, 61, .14); border: 1px solid rgba(255, 217, 61, .35); }
#shopScroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px;
}
#shopScroll::-webkit-scrollbar { display: none; }

.shopCard {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 20px;
  background: var(--card-fill); border: 1.5px solid var(--card-stroke);
  box-shadow: inset 0 1px 0 var(--card-topline), 0 5px 12px rgba(132, 94, 194, .18);
  animation: riseIn .45s var(--m-bouncy) both;
}
.shopSecHead { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; }
.freeTag {
  margin-inline-start: auto; font-size: 10px; font-weight: 700; color: var(--green);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 201, 167, .13); border: 1px solid rgba(0, 201, 167, .35);
}

/* hero preview */
.heroCard { align-items: center; gap: 6px; }
.heroWrap { animation: avBreatheWrap 1.7s ease-in-out infinite alternate; }
@keyframes avBreatheWrap { from { transform: scale(1); } to { transform: scale(1.012); } }
.heroName { font-size: 13px; font-weight: 800; color: var(--text-secondary); }

/* look editor */
.lookLbl { font-size: 11px; font-weight: 800; color: var(--text-faint); }
.chipRow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--card-stroke);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--m-bouncy), border-color .2s, box-shadow .2s;
}
.chip:active { transform: scale(.9); }
.chip.sel {
  border-color: var(--yellow); transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 217, 61, .55);
}
.chip.sel::after {
  content: "✓"; position: absolute; bottom: -4px; inset-inline-end: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 900; color: #1a1a4e; line-height: 16px; text-align: center;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
}
.hairChip { background: var(--track-fill); overflow: hidden; }
.hairChip svg { display: block; }

/* power-ups list */
.puList { display: flex; flex-direction: column; gap: 8px; }
.puRow {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px;
  background: var(--track-fill); border: 1px solid var(--card-stroke);
}
.puEmoji { font-size: 25px; flex: none; }
.puInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: start; }
.puInfo b { font-size: 13.5px; font-weight: 900; }
.puInfo small { font-size: 10.5px; font-weight: 600; color: var(--text-faint); }
.puCount {
  flex: none; font-size: 12px; font-weight: 900; color: var(--teal); direction: ltr;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(78, 205, 196, .13); border: 1px solid rgba(78, 205, 196, .4);
}
.buyBtn, .itemBtn {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 900; color: #1a1a4e; direction: ltr;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 2px 0 var(--yellow-deep), 0 4px 8px rgba(255, 217, 61, .3);
  transition: transform .15s ease;
}
.buyBtn:active, .itemBtn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--yellow-deep); }
.buyBtn.deny, .itemBtn.deny { animation: denyShake .35s linear; }
@keyframes denyShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 75% { transform: translateX(3px); }
}

/* wearable item grid */
.itemGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.itemCard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border-radius: 16px;
  background: var(--track-fill); border: 1.5px solid var(--card-stroke);
  transition: border-color .25s, box-shadow .25s;
}
.itemCard.on {
  border-color: rgba(255, 217, 61, .8);
  box-shadow: 0 0 10px rgba(255, 217, 61, .3);
}
.itemEmoji { font-size: 30px; line-height: 1.2; }
.itemName {
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.itemBtn { width: 100%; padding: 0 4px; font-size: 11.5px; }
.itemBtn.priceBtn.poor { filter: saturate(.35); opacity: .72; }
.itemBtn.ownedBtn {
  color: var(--text-primary); background: var(--card-fill);
  border: 1.5px solid var(--card-stroke); box-shadow: none;
}
.itemBtn.equipped {
  color: #003333; background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  box-shadow: 0 2px 6px rgba(78, 205, 196, .4);
}

/* iOS-only monetization notice */
.iosLock { align-items: center; text-align: center; gap: 8px; border-style: dashed; }
.iosLockTitle { font-size: 14px; font-weight: 900; color: var(--text-secondary); }
.iosLockBody { font-size: 12.5px; font-weight: 600; color: var(--text-faint); line-height: 1.55; max-width: 300px; }
.iosLockBtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px;
  border-radius: 12px; font-size: 13px; font-weight: 900; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #1a1a4e, #302b63);
  border: 1.5px solid rgba(255, 255, 255, .3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.iosLockBtn::before { content: ""; }
.iosLockBtn:active { transform: scale(.95); }

/* ─── Daily hub (chest + missions, inside the modal) ─── */
/* The panel chrome moved to the modal; on the hub #dailyCard is just the
   compact button, so it must not draw a card of its own around it. */
#dailyCard { flex: none; }
.chestRow {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px;
  background: var(--track-fill); border: 1.5px solid var(--card-stroke);
}
.chestRow.openable { border-color: rgba(255, 217, 61, .55); }
.chestEmoji { font-size: 32px; line-height: 1; flex: none; }
.chestRow.openable .chestEmoji { animation: chestWobble 1.6s ease-in-out infinite; }
@keyframes chestWobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); }
}
.chestInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: start; }
.chestInfo b { font-size: 14px; font-weight: 900; }
.chestInfo small { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.chestOpenBtn {
  flex: none; min-height: 38px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 3px 0 var(--yellow-deep), 0 6px 12px rgba(255, 217, 61, .35);
  animation: glowY 1.2s ease-in-out infinite alternate;
}
.chestOpenBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-deep); }
.chestDone { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 18px; }
.chestDone small { font-size: 10px; font-weight: 700; color: var(--text-faint); direction: ltr; }
.cDots { display: flex; justify-content: center; gap: 9px; }
.cDot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--track-fill); border: 1px solid var(--card-stroke);
  font-size: 7px; font-weight: 900; color: var(--text-faint);
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cDot.on { background: linear-gradient(180deg, var(--yellow), #FFC300); border-color: transparent; box-shadow: 0 1px 4px rgba(255, 217, 61, .5); }
.cDot.cur { transform: scale(1.35); border: 1.5px solid var(--yellow); }

/* mission rows */
.mList { display: flex; flex-direction: column; gap: 7px; }
.mRow {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px;
  background: var(--track-fill); border: 1px solid var(--card-stroke);
}
.mRow.claimed { opacity: .62; }
.mEmoji { font-size: 21px; flex: none; line-height: 1; }
.mInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: start; }
.mTitle { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mBar { position: relative; height: 5px; border-radius: 999px; background: rgba(0,0,0,.18); overflow: hidden; }
body[data-theme="light"] .mBar { background: rgba(36, 30, 78, .1); }
.mBar i {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--green));
  transition: width .5s var(--m-snappy);
}
.mProg { flex: none; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-faint); }
.mCheck { flex: none; font-size: 16px; }
.mClaimBtn {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 11px;
  font-size: 12px; font-weight: 900; color: #1a1a4e; white-space: nowrap;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 2px 0 var(--yellow-deep), 0 4px 10px rgba(255, 217, 61, .4);
  animation: claimPulse 1.1s ease-in-out infinite alternate;
}
@keyframes claimPulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.mClaimBtn:active { transform: scale(.94); animation: none; }

/* ─── Profile-creation preset picker ─── */
#presetPick { display: flex; flex-direction: column; gap: 8px; }
#presetTitle { text-align: start; }
#presetRow { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.presetChip {
  width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); border: 2.5px solid rgba(255, 255, 255, .22);
  transition: transform .22s var(--m-bouncy), border-color .22s, box-shadow .22s;
}
.presetChip:active { transform: scale(.9); }
.presetChip.sel {
  border-color: var(--yellow); transform: scale(1.12);
  box-shadow: 0 0 12px rgba(255, 217, 61, .6);
}

/* ─── In-round power-up bar ─── */
#puBar { display: none; justify-content: center; gap: 10px; padding: 2px 0 6px; flex: none; }
.puBtn {
  position: relative; width: 52px; height: 46px; border-radius: 14px; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-fill); border: 1.5px solid var(--card-stroke);
  box-shadow: inset 0 1px 0 var(--card-topline), 0 3px 6px rgba(0, 0, 0, .18);
  transition: transform .15s ease, border-color .25s, box-shadow .25s;
}
.puBtn:active { transform: scale(.9); }
.puBtn i {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  font-style: normal; font-size: 10px; font-weight: 900; color: #1a1a4e; line-height: 18px;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.puBtn.off { opacity: .4; }
.puBtn.active {
  border-color: rgba(78, 205, 196, .85);
  box-shadow: 0 0 12px rgba(78, 205, 196, .55), inset 0 1px 0 var(--card-topline);
  animation: puArmed 1s ease-in-out infinite alternate;
}
@keyframes puArmed { from { transform: scale(1); } to { transform: scale(1.08); } }

/* frozen timer */
#timerBar.frozen > i { background: linear-gradient(90deg, #8FD8F0, #4D96FF) !important; }
#timerBar.frozen { box-shadow: 0 0 8px rgba(143, 216, 240, .8); }

/* ─── Celebrations ─── */

/* coin-fly sprite */
.flyCoin {
  position: fixed; z-index: 120; pointer-events: none;
  font-size: 20px; line-height: 1; margin: -10px 0 0 -10px;
  transition: transform .68s cubic-bezier(.35, 0, .6, 1), opacity .68s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
.coinPulse { animation: coinPulse .5s var(--m-bouncy); }
@keyframes coinPulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* claim ring + flying stars */
.claimRing {
  position: fixed; z-index: 118; pointer-events: none;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid var(--yellow);
  animation: ringOut .6s ease-out forwards;
}
@keyframes ringOut {
  from { transform: scale(.4); opacity: 1; }
  to   { transform: scale(5); opacity: 0; }
}
.burstStar {
  position: fixed; z-index: 119; pointer-events: none;
  font-size: 15px; line-height: 1; margin: -8px 0 0 -8px; color: var(--yellow);
  animation: starFly .72s cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes starFly {
  0%   { transform: translate(0, 0) scale(.5); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

/* chest cinematic overlay */
#chestModal .dimmer { background: rgba(0, 0, 0, .74); }
#chestStage {
  position: relative; width: 100%; max-width: 340px; min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.chRays {
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  top: 50%; left: 50%; margin: -210px 0 0 -160px;
  background: repeating-conic-gradient(rgba(255, 217, 61, .3) 0deg 12deg, transparent 12deg 28deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, .95) 8%, transparent 70%);
  mask: radial-gradient(circle, rgba(0, 0, 0, .95) 8%, transparent 70%);
  opacity: 0; transform: scale(.4);
  transition: opacity .3s ease, transform .45s var(--m-bouncy);
  pointer-events: none;
}
.chRays.show { opacity: 1; transform: scale(1); animation: chRaySpin 14s linear infinite; }
@keyframes chRaySpin { to { transform: scale(1) rotate(360deg); } }
.chBox {
  position: relative; z-index: 2; font-size: 92px; line-height: 1;
  margin-top: -60px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}
.chBox.drop { animation: chDrop .5s cubic-bezier(.25, 1.3, .45, 1) both; }
@keyframes chDrop {
  0%  { transform: translateY(-58vh) scale(.7); opacity: 0; }
  70% { transform: translateY(6px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.chBox.shake { animation: chShake .28s linear 3; }
@keyframes chShake {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-8deg) scale(1.03); }
  75% { transform: rotate(8deg) scale(1.03); }
}
.chBox.open { animation: chOpenPop .5s cubic-bezier(.25, 1.6, .5, 1) both; }
@keyframes chOpenPop {
  0% { transform: scale(.7); }
  55% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.chParticles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.chSpark {
  position: absolute; top: 42%; left: 50%; margin: -8px; font-size: 16px; color: var(--yellow);
  animation: starFly .8s cubic-bezier(.2, .7, .4, 1) forwards;
}
.chFountainCoin {
  position: absolute; top: 42%; left: 50%; margin: -11px; font-size: 22px; line-height: 1;
  animation: chFountain 1s cubic-bezier(.3, .1, .7, 1) forwards;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
@keyframes chFountain {
  0%   { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; }
  38%  { transform: translate(calc(var(--dx) * .55), var(--up)) scale(1) rotate(180deg); opacity: 1; }
  100% { transform: translate(var(--dx), 90px) scale(.9) rotate(420deg); opacity: 0; }
}
.chReward {
  position: relative; z-index: 4; margin-top: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .35s ease, transform .45s var(--m-bouncy);
  pointer-events: none;
}
.chReward.show { opacity: 1; transform: none; pointer-events: auto; }
.chCoins {
  display: flex; align-items: center; gap: 10px; direction: ltr;
  font-size: 44px; font-weight: 900; color: var(--yellow);
  text-shadow: 0 0 14px rgba(255, 217, 61, .6);
}
.chCoins b { font-variant-numeric: tabular-nums; }
.chCoinIcon { font-size: 38px; }
.chPu {
  font-size: 16px; font-weight: 900; color: #fff;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(132, 94, 194, .45); border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: 0 0 12px rgba(132, 94, 194, .55);
  animation: popIn .5s var(--m-bouncy) both;
}
.chBtn {
  min-height: 46px; padding: 0 34px; border-radius: 14px;
  font-size: 16px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 4px 0 var(--yellow-deep), 0 8px 16px rgba(255, 217, 61, .4);
}
.chBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-deep); }

/* ─── Reduced motion: settle everything instantly ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-height: 640px) {
  .chBox { font-size: 74px; }
  .itemEmoji { font-size: 26px; }
}

/* ─── Daily hub card on the home hub ─── */
/* The chest and three missions used to sit open on the home screen and pushed
   everything below the fold. iOS keeps them one tap away behind this. */
.dhCard { flex: none; }
.dhOpen {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 20px; color: #fff; text-align: start;
  background: linear-gradient(160deg, var(--orange), var(--orange-deep));
  border: 1.5px solid rgba(255, 255, 255, .4);
  box-shadow: 0 5px 0 rgba(190, 90, 50, .7), 0 10px 20px rgba(255, 150, 113, .35),
              inset 0 2px 0 rgba(255, 255, 255, .4);
}
.dhOpen:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(190, 90, 50, .7); }
.dhCardText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dhCardText b { font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.dhCardText small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .95); }
.dhChips { flex: none; display: flex; gap: 8px; }
.dhChip { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dhChipFace {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-style: normal;
  background: rgba(255, 255, 255, .18); border: 1.2px solid rgba(255, 255, 255, .35);
}
.dhChip.done .dhChipFace { background: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .9); }
.dhChip.claimed .dhChipFace { opacity: .55; }
/* The little corner stamp: a gift to collect, or a tick once collected. */
.dhChipFace b {
  position: absolute; inset-inline-end: -3px; bottom: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; background: var(--red); color: #fff;
}
.dhChip.claimed .dhChipFace b { background: var(--green); font-size: 9px; }
.dhTick {
  width: 30px; height: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .25); overflow: hidden; display: block;
}
.dhTick b { display: block; height: 100%; background: rgba(255, 255, 255, .95); }
/* Unclaimed count, so a finished mission is visible without opening anything. */
.dhBadge {
  position: absolute; inset-inline-end: -7px; top: -9px;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .4), transparent 55%), var(--red);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 5px rgba(255, 107, 107, .6);
}
#dailyHubBody { display: flex; flex-direction: column; gap: 10px; }