:root {
  --bg-top: #5dade2;
  --bg-bottom: #aed9ef;
  --ground: #c98a3c;
  --ground-dark: #a9712c;
  /* v5: a menü és a párbeszédpanelek a HUD fájához igazodnak – sötét
     mahagóni lap, meleg világos szöveggel. Korábban krémfehér panel volt
     barna betűvel, ami az új dzsungel-grafika mellett idegen maradt.
     A változókat írjuk át, nem az egyes szabályokat: így minden overlay
     (menü, szünet, game over, ranglista, skinek) EGYÜTT vált – szabályonként
     javítva óhatatlanul maradna régi stílusú folt. */
  --text: #f6e7c8;
  --panel: rgba(58, 38, 20, 0.94);
  --panel-border: #8a5a2b;
  --accent: #e8a13f;
  --accent-hover: #ffc061;
  --shadow: rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] {
  --bg-top: #1e2433;
  --bg-bottom: #2c3a4f;
  --ground: #3a4a36;
  --ground-dark: #2c3a2a;
  --text: #f6e7c8;
  --panel: rgba(38, 26, 14, 0.96);
  --panel-border: #6f4720;
  --accent: #e8a13f;
  --accent-hover: #ffc061;
  --shadow: rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg-bottom);
}

/* v5: MOBIL-ONLY. A játék mindig álló (9:19.5) keretben jelenik meg –
   asztali gépen is, középre igazítva. Korábban a keret a teljes ablakot
   kitöltötte, ezért széles képernyőn a portré háttérkép cover-illesztése
   lefelé kilógott, és a talajvonallal együtt a capybara is a látható
   terület alá került.
   A `dvh` csak Chrome 108+ alatt él, ezért `vh` az alap, és a `dvh` külön
   @supports blokkban jön – egyébként az egész szabály érvénytelenné válna
   régebbi mobilon, és üres képernyőt adna. */
#game-wrap {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  /* A HUD a KERET szelessegehez meretezodik, nem az ablakehoz. A `vw` az
     ablakot meri; asztali gepen (es URL-savos telefonon) a keret ennel
     jelentosen keskenyebb, ezert a `vw`-ben megadott HUD tulnyult es az
     `overflow:hidden` levagta - merve a pause gomb kozepe nem volt
     koppinthato a legtobb telefonon. A `cqw` a konteneren belul mer. */
  container-type: inline-size;
  container-name: gameframe;
  /* ASZTALI GEP: valtozatlan 9:19.5 allo keret, kozepre igazitva.
     A rugalmas aranyt CSAK erintokepernyon kapcsoljuk be (lasd lentebb),
     mert Roland kerese szerint szamitogepen nem valtozhat a megjelenes. */
  width: min(100vw, calc(100vh * 9 / 19.5));
  height: min(100vh, calc(100vw * 19.5 / 9));
  display: flex;
  align-items: center;
  justify-content: center;
}
@supports (height: 100dvh) {
  #game-wrap {
    width: min(100vw, calc(100dvh * 9 / 19.5));
    height: min(100dvh, calc(100vw * 19.5 / 9));
  }
}
/* MOBIL: RUGALMAS ARANY -- a jatek mindig kitolti a kepernyot.
   A keret korabban itt is fixen 9:19.5 volt, ezert minden ettol eltero
   telefonon fekete savok maradtak: iPhone SE-n 82%, Xperia 1-en 93%,
   Fold csukva 93%. Most a keret 9:16 es 9:21.5 kozott FELVESZI a
   kepernyo alakjat -- ez lefedi a teljes valos mobilmezonyt (merve 19
   keszuleken: mind 100%). A hatarokon tul megall, igy a kompozicio nem
   borul es a kapibara sem vagodik le.
   A `hover:none and pointer:coarse` par az erintokepernyo szabvanyos
   jelzese; egermutato mellett (asztali gep) nem aktivalodik. */
@media (hover: none) and (pointer: coarse) {
  #game-wrap {
    width: min(100vw, calc(100vh * 9 / 16));
    height: min(100vh, calc(100vw * 21.5 / 9));
  }
  @supports (height: 100dvh) {
    #game-wrap {
      width: min(100vw, calc(100dvh * 9 / 16));
      height: min(100dvh, calc(100vw * 21.5 / 9));
    }
  }
}
html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
/* A keret `dvh`-ban mer (az URL-sav nelkuli, VALOBAN lathato magassag),
   a body viszont `vh`-ban (az URL-savval EGYUTT ertett magassag). Amikor
   a bongeszo URL-savja lathato, a ketto elter: a body magasabb lesz a
   keretnel, es a kozepre igazitas miatt a kulonbseg fele SZURKE SAVKENT
   jelenik meg a jatek FELETT. Roland valos telefonjan ez ~56 px volt.
   Megoldas: a body is `dvh`-ban merjen, igy nincs mit kozepre igazitani. */
@supports (height: 100dvh) {
  html, body {
    height: 100dvh;
    min-height: 100dvh;
  }
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* pixel art: a DOM-ban megjelenő képek is élsimítás nélkül nagyítódjanak */
.lives img, .icon-btn, .img-btn, .pause-icon, .logo-img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}