/* In-game heads-up display: score, hearts, level track, boost bar, power-ups,
   corner buttons, hints, level banner, floating points, sticker toast and the school logo. */

/* ---------- HUD ---------- */
#hud {
  position: fixed; z-index: 4; pointer-events: none;
  top: calc(14px + env(safe-area-inset-top)); left: calc(18px + env(safe-area-inset-left));
  font-size: clamp(13px, 1.15vw, 22px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(8, 5, 28, .85), 0 0 12px rgba(170, 150, 255, .55);
  opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s;
}
body.in-game #hud { opacity: 1; transform: none; }
.hud-row { display: flex; align-items: center; gap: .55em; white-space: nowrap; }
.lbl { color: var(--ink-dim); }
#score { font-variant-numeric: tabular-nums; min-width: 3ch; }
.sep { opacity: .45; }
#stars { display: inline-flex; align-items: center; gap: .3em; font-variant-numeric: tabular-nums; }
#stars b { color: var(--gold); text-shadow: 0 0 10px rgba(255, 211, 90, .9); }
#stars.pop { animation: heartGain .5s cubic-bezier(.3, 1.7, .5, 1); }
#hearts { display: inline-flex; gap: .28em; }
.heart { width: 1.2em; height: 1.2em; display: inline-block; }
.heart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.heart path { fill: var(--pink); stroke: #ffd3e3; stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(255, 111, 160, .85)); transition: fill .3s, stroke .3s; }
.heart.empty path { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .35); filter: none; }
.heart.pop { animation: heartPop .6s ease; }
.heart.gain { animation: heartGain .7s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes heartPop { 0% { transform: scale(1); } 25% { transform: scale(1.45) rotate(-12deg); } 50% { transform: scale(.85) rotate(9deg); } 100% { transform: scale(1); } }
@keyframes heartGain { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
#level { display: inline-block; color: var(--mint); }
#level.pop { animation: heartGain .7s cubic-bezier(.3, 1.7, .5, 1); }
#mode { transition: color .2s; }
#mode.boost { color: var(--gold); text-shadow: 0 0 14px rgba(255, 211, 90, .9); }
#mode.recharge { color: var(--ink-dim); }
#mode.solar { color: #ffb36b; text-shadow: 0 0 14px rgba(255, 150, 80, .9); }
#mode.gravity { color: #ffb36b; text-shadow: 0 0 14px rgba(255, 150, 80, .9); }
.journey { margin-top: .5em; display: flex; align-items: center; gap: .6em; font-size: .82em; white-space: nowrap; }
#track { display: inline-flex; align-items: center; gap: .34em; }
#track i { display: block; width: .62em; height: .62em; border-radius: 50%; background: var(--c, #fff); opacity: .28; }
#track i.done { opacity: .95; }
#track i.now { opacity: 1; box-shadow: 0 0 0 .14em rgba(255, 255, 255, .9), 0 0 .7em var(--c, #fff); animation: nowPulse 1.4s ease-in-out infinite; }
#track i.bh { background: #000; box-shadow: inset 0 0 0 .13em #ffae5a; }
#track i.bh.now { box-shadow: inset 0 0 0 .13em #ffae5a, 0 0 0 .14em #fff, 0 0 .7em #ffae5a; }
#track i.alt { background: conic-gradient(#ff7ae0, #ffe07a, #8ff7cf, #7fb0ff, #ff7ae0); }
@keyframes nowPulse { 50% { transform: scale(1.3); } }
.bar { margin-top: .55em; width: 9.5em; height: .3em; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#boostFill {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #ffe07a, #ffb13d);
  box-shadow: 0 0 10px rgba(255, 211, 90, .8);
  transform-origin: left center;
}

/* ---------- Power-ups ---------- */
.powers { display: flex; gap: .5em; margin-top: .5em; }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .55em .2em .35em; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.chip i { display: block; width: 3em; height: .28em; border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--gold)); transform-origin: left center; }

/* ---------- Corner buttons ---------- */
#corner {
  position: fixed; z-index: 5; display: flex; gap: 10px;
  top: calc(12px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right));
}
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(34, 24, 78, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .15s, background .2s, opacity .3s;
}
.icon-btn:hover { transform: scale(1.08); background: rgba(70, 50, 140, .65); }
.icon-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.icon-btn svg { width: 20px; height: 20px; overflow: visible; }
.icon-btn svg .fill { fill: currentColor; }
.icon-btn svg .stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#btnMute .x { display: none; }
#btnMute.muted .x { display: inline; }
#btnMute.muted .wave { display: none; }
#btnPause, #btnPhoto { display: none; }
body.playing #btnPause, body.playing #btnPhoto { display: grid; }

/* ---------- Hints & touch boost ---------- */
#hint {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100vw - 260px); text-align: center;  /* clear of the corner logo */
  font-size: clamp(10px, .85vw, 15px); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(190, 235, 255, .55); pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
body.in-game #hint { opacity: 1; }
#btnBoost {
  display: none; position: fixed; z-index: 5;
  right: calc(22px + env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom));  /* above the corner logo */
  width: 86px; height: 86px; border-radius: 50%;
  border: 2px solid rgba(255, 224, 122, .7);
  background: radial-gradient(circle at 35% 30%, rgba(255, 224, 122, .45), rgba(255, 150, 60, .2));
  color: #fff4c9; font: 800 13px/1 var(--font); letter-spacing: .1em;
  box-shadow: 0 0 22px rgba(255, 200, 90, .35);
  touch-action: none;
}
#btnBoost.active { transform: scale(.94); background: radial-gradient(circle at 35% 30%, rgba(255, 224, 122, .8), rgba(255, 150, 60, .45)); }
body.touch.playing #btnBoost { display: block; }

/* ---------- Montessori Garden logo: always in the bottom-right corner, above every screen ---------- */
.school-badge {
  position: fixed; z-index: 14; right: calc(12px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
  display: block; padding: 5px 8px; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .15s;
}
.school-badge:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.school-badge:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.school-badge img { display: block; width: auto; height: 46px; }

/* ---------- Level-up banner ---------- */
#banner {
  position: fixed; z-index: 6; left: 50%; top: 20%;
  width: max-content; max-width: calc(100vw - 32px);
  text-align: center; pointer-events: none; opacity: 0;
}
#banner.show { animation: bannerIn 3.4s ease forwards; }
.b-title {
  font-size: clamp(44px, 7vw, 88px); font-weight: 800; line-height: 1.05; letter-spacing: .02em;
  background: linear-gradient(90deg, #ffe07a, #ff9ac4 50%, #8ff7cf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(255, 190, 120, .45));
}
.b-sub { margin-top: 8px; font-size: clamp(15px, 1.6vw, 24px); font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(8, 5, 28, .85); }
.b-speed {
  margin-top: 6px; font-size: clamp(13px, 1.3vw, 19px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 12px rgba(255, 200, 80, .8), 0 2px 6px rgba(8, 5, 28, .85);
}
.b-speed:empty { display: none; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20% { opacity: 1; transform: translateX(-50%) scale(1); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ---------- Floating score text ---------- */
.float-text {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font-weight: 800; font-size: clamp(18px, 1.8vw, 32px); letter-spacing: .04em;
  color: var(--gold); text-shadow: 0 0 12px rgba(255, 200, 80, .85), 0 2px 0 rgba(0, 0, 0, .3);
  animation: floatUp 1s ease-out forwards;
}
.float-text.pink { color: var(--pink); text-shadow: 0 0 12px rgba(255, 120, 170, .9), 0 2px 0 rgba(0, 0, 0, .3); }
@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  15% { transform: translate(-50%, -85%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}

/* ---------- Sticker toast ---------- */
#toast {
  position: fixed; z-index: 13; left: 50%; top: calc(76px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(255, 224, 122, .96), rgba(255, 154, 196, .96)); color: #2a1446;
  font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  pointer-events: none; opacity: 0; transform: translate(-50%, -20px);
}
#toast.show { animation: toastIn 3.4s ease forwards; }
#toast canvas { width: 40px; height: 40px; }
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, -20px) scale(.9); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

@media (max-width: 520px) {
  .icon-btn { width: 40px; height: 40px; }
  .school-badge img { height: 36px; }
  #hint { max-width: calc(100vw - 200px); }
}
@media (max-width: 420px) {
  #hud { font-size: 12px; letter-spacing: .06em; left: calc(12px + env(safe-area-inset-left)); }
  .hud-row { gap: .4em; }
  .hud-row .lbl { display: none; }  /* room for 5 hearts on phones */
  #corner { gap: 8px; right: calc(10px + env(safe-area-inset-right)); }
}