/* ═══════════════════════════════════════════════════════════════
   Math Hero — V2 adventure layer (home hub / world map / stage play)
   Matches the visual language of the inline stylesheet in index.html:
   space gradients, chunky 3D buttons, rounded-black typography, RTL-aware.
   Animations stick to transform/opacity for 60fps.
   ═══════════════════════════════════════════════════════════════ */

/* ─── View switching ─── */
#homeScreen, #mapScreen, #playScreen {
  display: none;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
body.view-home #homeScreen { display: flex; }
body.view-map  #mapScreen  { display: flex; }
body.view-play #playScreen { display: flex; }
#homeScreen { gap: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
/* Hub entrance: each section rises into place just after the one above it,
   the way HomeView staggers its sections on appear. One-shot — it runs when
   the hub is entered and never again, so nothing here animates continuously. */
body.view-home #homeScreen > * { animation: riseIn var(--m-standard) var(--m-bouncy) both; }
body.view-home #homeScreen > *:nth-child(1) { animation-delay: .02s; }
body.view-home #homeScreen > *:nth-child(2) { animation-delay: .06s; }
body.view-home #homeScreen > *:nth-child(3) { animation-delay: .10s; }
body.view-home #homeScreen > *:nth-child(4) { animation-delay: .14s; }
body.view-home #homeScreen > *:nth-child(5) { animation-delay: .18s; }
body.view-home #homeScreen > *:nth-child(6) { animation-delay: .22s; }
body.view-home #homeScreen > *:nth-child(n+7) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  body.view-home #homeScreen > * { animation: none; }
}
#homeScreen::-webkit-scrollbar { display: none; }

/* ─── Home hub ─── */
#statBadges { display: flex; gap: 8px; flex: none; }
#statBadges .badge {
  flex: 1; justify-content: center; gap: 4px;
  font-size: 14px; min-height: 42px;
}
#coinsBadge { color: var(--yellow); background: rgba(255, 217, 61, .14); border: 1px solid rgba(255, 217, 61, .35); }

#bigPlayWrap { flex: none; padding: 4px 2px 6px; }
#bigPlay {
  position: relative; width: 100%; min-height: 96px; border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--orange));
  border: 2px solid rgba(255, 255, 255, .4);
  box-shadow: 0 7px 0 rgba(90, 55, 150, .8), 0 14px 26px rgba(132, 94, 194, .45),
              inset 0 2px 0 rgba(255, 255, 255, .45);
  animation: bigPulse 1.5s ease-in-out infinite alternate;
}
@keyframes bigPulse { from { transform: scale(1); } to { transform: scale(1.03); } }
#bigPlay:active { animation: none; transform: translateY(5px) scale(.99); box-shadow: 0 2px 0 rgba(90, 55, 150, .8), 0 6px 14px rgba(132, 94, 194, .35), inset 0 2px 0 rgba(255, 255, 255, .45); }
#bigPlayRow { display: flex; align-items: center; justify-content: center; gap: 16px; }
#bigPlayEmoji { font-size: 42px; line-height: 1; animation: floaty 2s ease-in-out infinite alternate; }
/* iOS's map preview: the five worlds peeking under the label, the one the
   child is on lifted and full size, the ones ahead greyed. It answers "where
   am I?" without opening the map. */
#worldStrip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .25);
}
#worldStrip i { font-style: normal; font-size: 15px; line-height: 1.35; opacity: .4; filter: grayscale(.9); }
#worldStrip i.seen { opacity: 1; filter: none; }
#worldStrip i.here { font-size: 20px; transform: translateY(-2px); }
#bigPlayText { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; }
#bigPlayLbl { font-size: 27px; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
#bigPlaySub { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); }

#quickCard {
  flex: none; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; 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);
}
#quickHead { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: var(--text-secondary); }
#quickStart {
  min-height: 48px; 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 14px rgba(255, 217, 61, .3);
}
#quickStart:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-deep), 0 4px 8px rgba(255, 217, 61, .25); }

/* ─── Get-the-app card (browser visitors only) ─── */
#getAppCard {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px; 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);
}
#getAppLine { font-size: 13px; font-weight: 900; color: var(--text-secondary); }
#getAppRow { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; }
#appStoreLink { display: block; direction: ltr; border-radius: 10px; transition: transform .15s ease, opacity .15s ease; }
#appStoreLink svg { display: block; height: 46px; width: auto; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
#appStoreLink:active { transform: scale(.95); }
#apkLink {
  display: flex; align-items: center; gap: 7px; padding: 0 16px; min-height: 46px;
  border-radius: 10px; font-size: 14px; font-weight: 900; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #3DDC84, #1FA75C);
  border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: 0 4px 0 #157a42, 0 7px 12px rgba(61, 220, 132, .3);
  transition: transform .15s ease, opacity .15s ease;
}
#apkLink:active { transform: translateY(3px); box-shadow: 0 1px 0 #157a42, 0 3px 6px rgba(61, 220, 132, .25); }
#getAppRow .secondary { transform: scale(.88); opacity: .7; order: 1; }
/* Installed as PWA/TWA — never advertise the store inside the app. */
@media (display-mode: standalone) { #getAppCard { display: none !important; } }

/* ─── Play screen top bar (minimal) ─── */
#playTop { display: flex; align-items: center; gap: 8px; flex: none; }
#stageLbl {
  flex: 1; min-width: 0; text-align: center; font-size: 15px; 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;
}

/* ─── Boss HP bar ─── */
#bossBar {
  display: none; position: relative; flex: none;
  align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px;
  background: rgba(255, 107, 107, .12); border: 1.5px solid rgba(255, 107, 107, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
#bossBar.visible { display: flex; }
#bossFace { font-size: 27px; line-height: 1; animation: breathe 1.3s ease-in-out infinite alternate; }
#bossBar.hit #bossFace { animation: bossHit .45s var(--m-bouncy); }
@keyframes bossHit { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-10deg); } 100% { transform: scale(1); } }
/* iOS stacks the track over a stat row rather than putting a bare number
   beside it: the number alone never said what it was out of, so 40 could be
   most of the boss left or almost none. */
#bossHpWrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#bossHpTrack { height: 10px; border-radius: 999px; background: var(--track-fill); overflow: hidden; }
#bossStats { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#bossHpFill {
  display: block; height: 100%; border-radius: 999px; width: 100%;
  background: linear-gradient(90deg, var(--red), var(--orange));
  box-shadow: 0 0 7px rgba(255, 107, 107, .6);
  transition: width .45s var(--m-snappy);
}
#bossHpLbl {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-secondary); direction: ltr;
}
/* Only from x2 — a "combo" of one is just an answer. */
#bossCombo {
  font-size: 11px; font-weight: 900; color: var(--orange); direction: ltr;
}
#bossDmg {
  position: absolute; inset-inline-end: 16px; top: -8px; pointer-events: none;
  font-size: 17px; font-weight: 900; color: var(--yellow); direction: ltr;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45); opacity: 0;
}
#bossDmg.crit { font-size: 22px; color: #FFD93D; filter: drop-shadow(0 0 6px rgba(255, 217, 61, .9)); }
#bossDmg.pop { animation: dmgFloat .85s ease-out; }
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translateY(8px) scale(.5); }
  22%  { opacity: 1; transform: translateY(-4px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* ─── Adventure map ─── */
#mapTop { display: flex; align-items: center; gap: 6px; flex: none; }
#mapTitle {
  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;
}
#mapStars { color: var(--title-color); background: rgba(255, 217, 61, .14); border: 1px solid rgba(255, 217, 61, .35); }
#mapCoins { color: var(--yellow); background: rgba(255, 217, 61, .14); border: 1px solid rgba(255, 217, 61, .35); }
#mapScroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: none;
  border-radius: 20px; padding-bottom: 12px;
}
#mapScroll::-webkit-scrollbar { display: none; }

.world {
  position: relative; border-radius: 22px; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--wc) 20%, transparent),
    color-mix(in srgb, var(--wc) 6%, transparent));
  border: 1.5px solid color-mix(in srgb, var(--wc) 35%, var(--card-stroke));
  box-shadow: inset 0 1px 0 var(--card-topline);
}
.world.wlocked { filter: saturate(.3); opacity: .6; }
.worldBanner { display: flex; align-items: center; gap: 10px; padding: 13px 14px 6px; }
.worldBanner .we { font-size: 30px; line-height: 1; }
.worldBanner .wn { flex: 1; min-width: 0; font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worldBanner .ws {
  font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr;
  color: var(--yellow); padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 217, 61, .13); border: 1px solid rgba(255, 217, 61, .3);
}
.worldPath { position: relative; height: 660px; }
.pathSvg { position: absolute; inset: 0; pointer-events: none; }
.pathLine { fill: none; stroke: rgba(var(--star-color), .3); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.5 15; }

.wdeco {
  position: absolute; font-size: 24px; line-height: 1; opacity: .45; pointer-events: none;
  animation: decoFloat 3.2s ease-in-out infinite alternate;
}
@keyframes decoFloat { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(5deg); } }

/* 3D stage nodes */
.stageNode {
  position: absolute; width: 64px; height: 64px; margin-inline: 0; margin-left: -32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 70%, #fff 30%), var(--wc));
  border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--wc) 55%, #000),
              0 11px 16px rgba(0, 0, 0, .3),
              inset 0 2px 0 rgba(255, 255, 255, .55);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.stageNode:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--wc) 55%, #000), 0 5px 8px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .55); }
.stageNode.bossNode { width: 78px; height: 78px; margin-left: -39px; font-size: 32px; border-color: rgba(255, 217, 61, .9); }
.stageNode.locked {
  color: rgba(255, 255, 255, .75); font-size: 20px;
  background: linear-gradient(180deg, #8d8da8, #5f5f7c);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 5px 0 #3f3f55, 0 8px 12px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .25);
}
.stageNode.done { border-color: rgba(255, 217, 61, .85); }
.stageNode.cur { animation: nodePulse 1.1s ease-in-out infinite alternate; }
@keyframes nodePulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.nodeStars {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 5px; font-size: 12px; letter-spacing: 2px; white-space: nowrap;
  color: var(--yellow); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.nodeStars .off { opacity: .35; }
.startBub {
  position: absolute; bottom: 100%; left: 50%; margin-bottom: 12px;
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 900; color: #1a1a4e;
  background: linear-gradient(180deg, var(--yellow), #FFC300);
  box-shadow: 0 3px 9px rgba(255, 217, 61, .55);
  animation: bubBob 1s ease-in-out infinite alternate;
}
.startBub::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #FFC300;
}
@keyframes bubBob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-5px); }
}

/* ─── Stage end screen ─── */
#advEnd {
  display: none; flex-direction: column; align-items: center; gap: 16px;
  padding: 14px 20px 24px; text-align: center;
}
#advEnd.visible { display: flex; }
#advEndStars { display: flex; align-items: flex-end; gap: 12px; direction: ltr; min-height: 78px; }
.bigStar { font-size: 54px; line-height: 1; opacity: .3; transform: scale(.8); filter: grayscale(1); }
.bigStar.mid { font-size: 70px; }
.bigStar.lit { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 217, 61, .75)); animation: starPop .55s var(--m-bouncy) both; }
@keyframes starPop { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
#advEndTitle { font-size: 25px; font-weight: 900; color: var(--title-color); animation: riseIn .45s .1s var(--m-snappy) both; }
#advEndSub { margin-top: 5px; font-size: 14px; color: var(--text-secondary); animation: riseIn .45s .18s var(--m-snappy) both; }
#advCoinRow {
  display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px;
  font-weight: 900; color: var(--title-color); font-size: 15px;
  background: rgba(255, 217, 61, .14); border: 1.5px solid rgba(255, 217, 61, .45);
  box-shadow: 0 3px 10px rgba(255, 217, 61, .25);
  animation: riseIn .45s .3s var(--m-snappy) both;
}
#advCoinNum { font-size: 21px; font-variant-numeric: tabular-nums; direction: ltr; }
#advNextBtn {
  font-size: 18px; font-weight: 900; color: #fff; padding: 16px 40px; border-radius: 18px;
  background: linear-gradient(90deg, var(--purple), var(--orange));
  border: 1.5px solid rgba(255, 255, 255, .35);
  animation: riseIn .45s .45s var(--m-snappy) both, glowPulse 1.6s ease-in-out infinite alternate;
}
#advNextBtn:active { transform: scale(.96); }
#advEndRow { display: flex; gap: 12px; animation: riseIn .45s .55s var(--m-snappy) both; }
.advSecBtn {
  width: 58px; min-height: 48px; border-radius: 14px; font-size: 21px;
  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);
}
.advSecBtn:active { transform: scale(.92); }

@media (max-height: 640px) {
  #bigPlay { min-height: 78px; }
  #bigPlayLbl { font-size: 23px; }
  .bigStar { font-size: 44px; }
  .bigStar.mid { font-size: 56px; }
}