/* ===== v5 FOMENU =====================================================
 * A menu a jatek SAJAT asszetjeibol epul: a tabla a HUD pontszam-tablaja
 * (hud_board.png), a kapibara es a hatter szinten a jatekbol jon. Nincs
 * kulon UI-keszlet, igy a menu es a jatek kozott nincs stilustores.
 *
 * MERETEZES: minden `cqw`-ben megy -- azaz a JATEKKERETEN belul mer,
 * nem az ablakban, pontosan ugy, mint a HUD (lasd game-hud.css). Igy a
 * menu egyutt skalazodik a jatekkal minden telefonon. Regi bongeszo
 * (Safari 16 elott) a `vw`-s tartalek-sorra esik vissza.
 * ==================================================================== */

/* A kezdokepernyo NEM sotetit: a referencian a dzsungel teljes eroben
   latszik. A `.overlay` radialis arnyekat itt kikapcsoljuk. */
#start-screen {
  background: none;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.menu-root {
  /* A teljes keretet ki kell toltenie: korabban `height:100%` volt, de a
     flex-szulon belul 785px lett a 844-bol, es igy a --ground-y szazalek
     egy kisebb dobozra vonatkozott -- a kapibara a valos fusav ALA esett. */
  position: absolute;
  inset: 0;
  /* `size` (nem csak `inline-size`): a kapibara merete a keret ROVIDEBB
     oldalabol jon, ahhoz a cqh egyseg is kell */
  container-type: size;
  container-name: menuframe;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 3cqw 4cqw calc(2cqw + env(safe-area-inset-bottom));
}

/* ---- logo ---- */
.menu-logo {
  position: relative;
  width: min(92vw, 380px);
  width: min(92cqw, 380px, 40dvh);
  flex: 0 0 auto;
  margin-bottom: 1cqw;
  animation: mDrop .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.menu-logo img {
  width: 100%;
  display: block;
  /* ez rajzolt asset, nem pixel art -- elsimitva kicsinyitjuk */
  image-rendering: auto;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
/* A REKORD a logo alsó kis tablacskajan ul (mert zona: 34%..68% x 71%..90%),
   nem kulon elemkent -- a tablan pont ennek van hely kihagyva. */
.logo-best {
  position: absolute;
  /* MERT a MEGJELENITETT elemen (nem a nyers kepen -- az mas aranyu):
     a kis tablacska fuggolegesen 77.0%..87.2%, a kozepe 82.1%;
     vizszintesen 33.5%..65.6%, a kozepe 49.5%. */
  left: 33.5%; top: 71.5%; width: 32.1%; height: 16.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #ffeec9;
  gap: .3em;
  font-size: clamp(15px, 5cqw, 24px);
  font-variant-numeric: tabular-nums;
  text-shadow: 2px 2px 0 #2b1608, -1px -1px 0 #2b1608;
}
.logo-best[hidden] { display: none; }

/* ---- kozos tabla: kep + rauljo szoveg ---- */
.mplate {
  position: relative;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
}
.mplate > img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}
/* MERT ZONA (hud_board.png): a tiszta falap vizszintesen 22%..82%,
   fuggolegesen 30%..71% -- ezen kivul INDA es LEVEL fut, oda szoveg
   nem kerulhet. */
.mplate .mf {
  position: absolute;
  left: 22%; top: 30%; width: 60%; height: 41%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* a hosszu cimke (TELJESITMENYEK) egy sorban nem fer a tabla mert
     60%-os tiszta savjaba -- toresre engedjuk, a mezo magas eleg hozza */
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.02;
  font-weight: 800;
  color: #ffeec9;
  letter-spacing: .01em;
  text-shadow: 2px 2px 0 #2b1608, -1px -1px 0 #2b1608,
               0 2px 0 #2b1608, 2px 0 0 #2b1608, 0 -1px 0 #2b1608;
}
/* MENUIKON: 64px natív pixel art (assets/icon_*.png), nem rendszer-emoji.
   Az emoji vektoros es lekerekitett -- kilogott a jatek pixel art
   vilagabol. Az ikon a tabla bal szelen ul, a mert tiszta savon belul. */
/* MENUIKON: indas FAKORONG (assets/disc_*.png). Sajat kerete van, ezert
   nem a tabla belsejebe kerul, hanem a BAL SZELERE ulteve, kisse tullogva
   rajta -- mint egy rafuggesztett jelveny. Igy nem szoritja ossze a
   feliratot, es a tabla indaival egy nyelvet beszel. */
.mplate .micon {
  position: absolute;
  /* A REFERENCIAROL MERT ertekek: a korong a gomb szelessegenek
     8%..30%-at foglalja, es MAGASABB a tablanal -- fole es ala is
     kilog, mint egy rafuggesztett jelveny. */
  left: -6%; top: 50%;
  transform: translateY(-50%);
  /* a referencian a korong MAGASABB a tablanal: fole es ala is kilog */
  width: 31%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .38));
  z-index: 2;
}
.mplate:active {
  transform: translateY(3px);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}

/* ---- a negy menugomb ---- */
.menu-btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* a 3. tag: alacsony kepernyon (iPhone SE) a nagyobb gombok +
     kapibara kulonben nem fert ki -- a gomb magassaga a szelessegbol
     jon, ezert a szelesseget a keperno magassagahoz is kotjuk */
  width: min(72vw, 300px);
  width: min(72cqw, 300px);
  gap: 1.4cqw;
  flex: 0 0 auto;
  /* A gomb kepe 3:1 aranyu, igy negy gomb magassaga a szelesseg 4/3-a --
     alacsony kepernyon (iPhone SE) ez tullogott a kapibaran. A SAV
     magassagat kotjuk le, a gombok azon belul osztoznak. */
  height: min(calc(min(72cqw, 300px) / 3 * 4 + 3 * 1.4cqw), 40dvh);
}
.menu-btns .mbtn { width: 100%; flex: 1 1 0; min-height: 0; }
/* CSAK a tabla kepere -- a korong (.micon) sajat meretet kap lentebb.
   Korabban ez a szabaly ra is vonatkozott, ezert a korong a gomb teljes
   szelesseget felvette es rafeküdt a feliratra. */
.menu-btns .mbtn > img:not(.micon) {
  width: 100%; height: 100%; object-fit: contain;
}
.menu-btns .mf {
  font-size: clamp(13px, 4.4vw, 21px);
  font-size: clamp(13px, 4.4cqw, 21px);
}

.menu-btns .mbtn:nth-child(1) { animation: mSlide .45s ease .10s both; }
.menu-btns .mbtn:nth-child(2) { animation: mSlide .45s ease .17s both; }
.menu-btns .mbtn:nth-child(3) { animation: mSlide .45s ease .24s both; }
.menu-btns .mbtn:nth-child(4) { animation: mSlide .45s ease .31s both; }

/* ---- kapibara a fusavon ----
   A TALAJVONAL nem a menu aljan van, hanem ott, ahol a jatekban: a
   hatterkep 91%-anal (SCENE_WALK). A hatterkep `cover`-rel illeszkedik,
   ezert a vonal helye a kereten belul FUGG a keret aranyatol -- ugyanaz
   a szamitas, mint a jatek sceneFit()-jeben. A --ground-y valtozot a
   JS allitja be (lasd game-menu.js), a CSS csak felhasznalja. */
.menu-stage {
  position: absolute;
  left: 0;
  right: 0;
  /* a talpvonal; amig a JS nem szolt, a keret 88%-a a tartalek */
  top: var(--ground-y, 88%);
  height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  animation: mFade .5s ease .38s both;
}
/* A kapibara BALRA huzodik, a jelzotabla JOBBRA melle -- mindketto a
   talajvonalon all, mint a jatekban. */
.menu-capy {
  position: absolute;
  bottom: 0;
  /* a tabla 72cqw szeles, ezert a kapibara balra huzodik */
  left: 5%;
  /* A JATEK kepletevel azonos meret (game-world.js):
       capy.size = max(150, min(keretSzelesseg, keretMagassag) * 0.26)
     Igy a menuben pontosan akkora, mint jatek kozben. */
  height: max(150px, min(26cqw, 26cqh));
  width: auto;
  object-fit: contain;
  object-position: bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3));
}
/* JELZOTABLA a kapibara mellett jobbra. A karója a fuben all, ezert az
   also szele is a talajvonalra kerul. Mert tiszta deszkafelulet:
   vizszintesen 13%..85%, fuggolegesen 17%..62%. */
.menu-post {
  position: absolute;
  /* A tabla a FOLDON all: a karoja a fuben, akarcsak a kapibara talpa.
     Egy hajszalnyival a talajvonal folott, hogy a karo vege ne vagodjon le. */
  bottom: 7cqw;
  right: 1%;
  width: min(72cqw, 330px);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .32));
}
.menu-post img {
  width: 100%;
  display: block;
  image-rendering: auto;
}
.menu-post .pf {
  /* MERT tiszta deszkafelulet: 13%..85% vizszintesen, 17%..62% fuggolegesen */
  position: absolute;
  left: 16%; top: 20%; width: 66%; height: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* a forgatott sorok sarkai lejjebb nyulnak, mint a sormagassag --
     ezert kell nagyobb koz, kulonben hosszu nevnel osszeernek */
  gap: .28em;
  line-height: 1.15;
  text-align: center;
  /* A deszka ket ele KULONBOZO szogben all (mert: felso -1.04°, also
     -0.76°), ezert nem kozos forgatast adunk, hanem SORONKENT -- a felso
     sor jobban dol, az also kevesbe, ugyanabban az aranyban (1.37x). */
  font-weight: 800;
  color: #ffeec9;
  text-shadow: 2px 2px 0 #2b1608, -1px -1px 0 #2b1608;
  overflow: hidden;
}
.menu-post .pf b { font-weight: 800; display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-post .pf-nev  {
  font-size: clamp(13px, 5cqw, 24px);
  transform: rotate(-2.5deg);      /* felso el: -1.04° */
  width: 100%;
  max-width: 100%;
  padding-bottom: .12em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25em;
}
.menu-post .pf-nev > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.menu-post .pf-pont {
  font-size: clamp(15px, 6cqw, 29px);
  color: #ffd166;
  font-variant-numeric: tabular-nums;
  transform: rotate(-1.6deg);      /* also el: -0.76° -- laposabb */
}

/* ---- kihivas-banner: a menuben keskenyebb ---- */
#start-screen .challenge-banner {
  width: min(84vw, 340px);
  width: min(84cqw, 340px);
  margin: 0 0 2cqw;
  flex: 0 0 auto;
}

/* ---- telepites-gomb: diszkret, a menu aljan ---- */
#start-screen .install-btn {
  position: absolute;
  left: 50%;
  bottom: calc(2cqw + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: auto;
  max-width: 86cqw;
  margin: 0;
  animation: mFade .5s ease .5s both;
}

/* A credit a regi kartyas elrendezesben a felso sarokban ult -- a menuben
   a logora lógott. Az aljara kerul, diszkreten. */
#start-screen .corner-credit {
  position: absolute;
  top: auto;
  left: 50%;
  right: auto;
  bottom: calc(1cqw + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: 86cqw;
  text-align: center;
  /* a sotet foldsavon a halvany szurke olvashatatlan volt -- vilagos
     betu + sotet kontur, mint a tobbi feliraton */
  opacity: 1;
  color: #ffeec9;
  text-shadow: 1px 1px 0 #2b1608, -1px -1px 0 #2b1608,
               0 1px 0 #2b1608, 1px 0 0 #2b1608;
  z-index: 2;
}
#start-screen .corner-credit b { color: #ffd166; }
#start-screen .corner-credit .app-ver { opacity: .85; color: #ffeec9; }
#start-screen .corner-credit:hover { transform: translateX(-50%) translateY(-2px); }

/* --- UJ TABLA (menu_board2) ---
   Mas az aranya (3:1) es mas a tiszta zonaja, mint a reginek:
     uj  : vizszintesen 15%..80%, fuggolegesen 25%..80%
     regi: vizszintesen 22%..82%, fuggolegesen 30%..71%
   Ezert a szoveg- es ikonmezot kulon adjuk meg. */
.mbtn.b2 .mf {
  /* A korong 25%-nal vegzodik, a tabla 86%-nal -- a KOZTUK levo hasznos
     savot kell felezni, kulonben a szoveg jobbra tolodottnak latszik. */
  left: 27%; top: 25%; width: 58%; height: 55%;
}

/* A kupa nem rendszer-emoji, hanem sajat asszet (assets/set_cup.png):
   a bongeszo betukeszletebol exportalt, pixelre azonos alak, sotet
   konturral -- igy minden eszkozon ugyanaz, es illik a pixel arthoz.
   A szoveggel egy sorban ul, annak magassagahoz igazitva. */
.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;
}

@keyframes mDrop  { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes mSlide { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes mFade  { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .menu-root * { animation: none !important; opacity: 1 !important; transform: none !important; }
}