#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  padding-inline: clamp(6px, 3cqw, 16px);
  display: none;
  align-items: flex-start;
  pointer-events: none;
  gap: 8px;
  z-index: 20;
}
#hud.show { display: flex; }
/* MERETEZES: minden HUD-elem KET deklaraciot kap - eloszor `vw`, utana
   `cqw`. A `cqw` (container query unit) a #game-wrap kereten belul mer,
   ami keskenyebb az ablaknal; ez a helyes ertek. Regi bongeszo (Safari
   16 elott) nem ismeri, eldobja az erteket, es a `vw`-s soron marad -
   az pontatlan, de hasznalhato. Egyetlen deklaracioval a HUD eltunne. */
/* a HUD bal oszlopa: tábla -> XP-csík -> szívek, egymás alatt */
.hud-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* v5: a pontszám dobozból FA TÁBLA lett, az XP-sávból INDÁS FA CSÍK.
   Mindkét kép ugyanarról a generált lapról származik, mint a szívek és a
   gombok – ezért egységes rajtuk a fa, az inda és a fényirány.
   A CSS-panel (háttér, keret, árnyék) helyére a kép lép; a szövegek a
   képen belüli mezőkbe kerülnek. */
.score-box {
  position: relative;
  background: url("../assets/hud_board.png") no-repeat center / 100% 100%;
  border: 0;
  padding: 0;
  width: min(58vw, 266px);
  width: min(58cqw, 266px);
  aspect-ratio: 420 / 189;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45));
  line-height: 1.1;
}
.score-box .label { display: none; }
.score-box .value {
  position: absolute;
  /* a tábla írható lapja a képen kissé jobbra és lejjebb ül, mint a
     befoglaló téglalap közepe – ezért nem 50%-os középre igazítás */
  left: 22%; top: 30%; width: 60%; height: 25%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 7.0vw, 40px);
  font-size: clamp(26px, 7.0cqw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffe9a8;
  text-shadow: 3px 3px 0 #1a0e06, -1px -1px 0 #1a0e06;
}
/* MERT ZONA: a tabla kepen a tiszta falap fuggolegesen 30%..72%,
   vizszintesen 22%..82% kozott van -- ezen kivul INDA es LEVEL fut.
   Semmilyen szoveg nem lephet ki innen. A rekord ezert kozvetlenul a
   pontszam alatt, meg a fan belul ul. */
.stat-row {
  position: absolute;
  left: 22%; top: 55%; width: 60%; height: 14%;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  overflow: hidden;
  margin: 0;
  font-size: clamp(16px, 4.2vw, 22px);
  font-size: clamp(16px, 4.2cqw, 22px);
  font-weight: 800;
  color: #ffe9a8;
  text-shadow: 2px 2px 0 #1a0e06;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* az emoji sajat line-height-ja megnyujtja a span-t a beallitott doboz
   ala -- ezert fix sormagassag es a szulohoz igazitott magassag. */
/* a rekord kupaja: sajat asszet, a szoveg magassagaban */
.stat .cup {
  /* a kep negyzetes (96x96) -- flex-kontenerben a `width:auto` es a
     `flex:0 0 auto` is elnyujtotta, ezert a flex-basis-t is lekotjuk */
  height: 1.05em;
  width: 1.05em;
  min-width: 1.05em;
  flex: 0 0 1.05em;
  object-fit: contain;
  vertical-align: -.16em;
  image-rendering: auto;
}
.stat-row .stat {
  display: flex; align-items: center; gap: 4px;
  line-height: 1;
  height: 100%;
}
.stat-row .stat[hidden] { display: none; }

/* XP-sor: a szint a fapajzson, a sáv az indás vályúban fut. */
.level-row {
  position: relative;
  margin-top: 10px;
  width: min(78vw, 362px);
  width: min(78cqw, 362px);
  aspect-ratio: 480 / 77;
  background: url("../assets/hud_xp_bar.png") no-repeat center / 100% 100%;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
}
/* MERT ZONA: a pajzs belsejet soronkent kimertem a hud_xp_bar.png-en.
   A vizszintes kozeppont 9.17% (nem 8.75%, ahogy elsore beallitottam),
   a fuggoleges kiterjedes 8%..88%, tehat a kozep 48%. A dobozt EZEKRE a
   kozeppontokra kozpontositom, kulonben az egy jegyu szam balra csuszik. */
.level-row #level-label {
  position: absolute;
  left: 3.67%; top: 23%; width: 11%; height: 56%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 4.8vw, 26px);
  font-size: clamp(18px, 4.8cqw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  color: #ffe9a8;
  text-shadow: 2px 2px 0 #1a0e06, -1px -1px 0 #1a0e06;
  z-index: 3;
}
/* egy szamjegy: a pajzs szelesseget a ketjegyu szint hatarozza meg, igy
   egyetlen jegynel maradna ures hely -- azt hasznaljuk ki. */
.level-row #level-label.one {
  font-size: clamp(23px, 6.1vw, 33px);
  font-size: clamp(23px, 6.1cqw, 33px);
}
/* MERT ZONA: a valyu (sotet melyedes) a hud_xp_bar.png-en.
   FONTOS: a melyedes felso 3 sora (y30-32, rgb 40,14,15) a valyu BELSO
   ARNYEKA, nem kulso kontur -- elsore konturnak vettem, ezert indult a
   csik 4%-kal lejjebb es maradt felette barna sav.
     vizszintesen 15.00% .. 96.88%   (a bal szel Roland dontese: a csik
       a valyu bal ivenel kezdodjon, ne a sik aljanal)
     fuggolegesen 38.96% .. 63.64%   (y 30..48 a 77 pixeles kepen)
   A jobb szelet elsore 99.58%-ra vettem: ott mar a keret VILAGOS faja
   van (x465-tol), nem a melyedes -- ezert lógott tul a csik.
   A zold csik PONTOSAN ezt tolti fel -- se elobb, se magasabban.
   Az inda atfut a valyu folott, ezert kulon retegkent (hud_xp_vine.png)
   a csik FOLE kerul; kulonben a telitodo csik eltakarna. */
.progress {
  position: absolute;
  left: 15%; top: 38.96%; width: 81.88%; height: 24.68%;
  margin: 0;
  max-width: none;
  background: none;
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
}
/* az inda-reteg: ugyanaz a keret, csak az indak - a csik folott ul */
.level-row .vine-overlay {
  position: absolute;
  inset: 0;
  background: url("../assets/hud_xp_vine.png") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  /* pixelesen csíkozott, élő növényi sáv – nem lapos színátmenet */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.20) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
    linear-gradient(#cdf76a 0 38%, #7fd132 38% 74%, #3f8f1e 74% 100%);
  box-shadow: inset 0 -2px 0 rgba(20, 60, 10, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.25s ease;
}
/* v5: a szívek a tábla és az XP-csík ALÁ kerülnek, a HUD bal oszlopában.
   Korábban abszolút pozícióban ültek egy fix 112px eltolással, ami a régi
   CSS-panel magasságához volt szabva – az új, képalapú tábla más magas,
   ezért a fix érték elcsúszna. A flow-ba helyezve maguktól a helyükre
   kerülnek, bármilyen képernyőméreten. */
.lives {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.lives img {
  width: clamp(43px, 12.7vw, 66px);
  width: clamp(43px, 12.7cqw, 66px);
  height: auto;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
  transform-origin: center;
  -webkit-user-drag: none;
  user-select: none;
}
/* utolsó élet: pulzáló szív piros ragyogással – szavak nélkül jelzi a tétet
   (a törés/gyógyulás animációk felülírják, amíg lejátszódnak) */
.lives img.last { animation: heartPulse 0.8s ease-in-out infinite; }
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 7px var(--shadow)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  }
  50% {
    transform: scale(1.22);
    filter: drop-shadow(0 4px 7px var(--shadow)) drop-shadow(0 0 9px rgba(255, 60, 60, 0.95));
  }
}
.lives img.breaking { animation: heartBreak 0.45s ease; }
@keyframes heartBreak {
  0%   { transform: scale(1.45); }
  40%  { transform: scale(0.8) rotate(-12deg); }
  70%  { transform: scale(1.12) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.lives img.healing { animation: heartHeal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes heartHeal {
  0%   { transform: scale(0.2); opacity: 0.3; }
  60%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); }
}

/* Arany szív: nyugodt, lassú ragyogás – látszik hogy értékes, de nem vonja el a figyelmet */
.lives img.gold { animation: goldGlow 3.2s ease-in-out infinite; }
.lives img.gold.healing {
  animation: heartHeal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
             goldGlow 3.2s ease-in-out 0.55s infinite;
}
@keyframes goldGlow {
  0%, 100% {
    filter: drop-shadow(0 4px 7px var(--shadow)) drop-shadow(0 0 4px rgba(255, 211, 77, 0.7))
            brightness(1);
  }
  50% {
    filter: drop-shadow(0 4px 7px var(--shadow)) drop-shadow(0 0 9px rgba(255, 214, 70, 0.85))
            brightness(1.12) saturate(1.08);
  }
}
/* Arany szív törése: felvillan, megpördül és szertefoszlik */
.lives img.gold.breaking { animation: goldBreak 0.55s ease forwards; }
@keyframes goldBreak {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255, 214, 70, 1)) brightness(1.7);
  }
  35% { transform: scale(1.45) rotate(-16deg); opacity: 1; }
  100% {
    transform: scale(0.05) rotate(32deg);
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(255, 214, 70, 0.5)) brightness(2.2);
  }
}

/* A gombok fuggoleges kozepe a TABLA kozepere esik. Mindketto a keret
   szelessegehez skalazodik, ezert fix eltolas nem jo -- szamolni kell:
     tabla magassaga = tabla szelessege * 189/420  (a kep aranya)
     eltolas = padding + tablaH/2 - gombH/2
   A masodik sor (tema-gomb) ez ala kerul, a grid-flow viszi. */
.top-buttons {
  position: absolute;
  --board-w: min(58cqw, 266px);
  --board-h: calc(var(--board-w) * 189 / 420);
  --btn-h: clamp(44px, 13.6cqw, 62px);
  top: calc(max(12px, env(safe-area-inset-top))
            + var(--board-h) / 2 - var(--btn-h) / 2);
  right: clamp(6px, 3cqw, 16px);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "sound pause"
    ".     theme";
  gap: 8px;
  pointer-events: auto;
  align-items: center;
  justify-items: end;
}
#sound-btn { grid-area: sound; }
#pause-btn { grid-area: pause; }
#theme-btn { grid-area: theme; }

/* A gombok a KERET szelessegehez skalazodnak. Fix 52px-nel keskeny
   kereten (iPhone SE, Pixel XL) a ket gomb + a #hud paddingja tulnyult a
   kereten, amit az `overflow:hidden` levagott. */
.icon-btn {
  width: 62px;
  width: clamp(44px, 13.6cqw, 62px);
  height: 62px;
  height: clamp(44px, 13.6cqw, 62px);
  border: none;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 3px 5px var(--shadow));
  transition: transform .12s ease;
}
/* a gomb-hátterek futásidőben állnak be az assets/ mappából (applyDomAssets) */
#theme-btn { width: 76px; }
.icon-btn:active { transform: scale(0.9); }