/* =========================================================================
   Orang3 — képernyőkezelés és állandó elemek (márkajel, chip)
   ========================================================================= */

#app {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- Képernyők --------------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
}

/* Az alapértelmezett (középre igazított) képernyő-elrendezés. A feladat-
   képernyők ezt felülírják a saját rácsukkal. */
.screen--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Alapértelmezett kilépés minden képernyőnek (2. szabály: lépcsőzés nélkül,
   egyszerre). A főoldal ezt saját, részletesebb koreográfiával váltja ki. */
.screen.is-leaving {
  pointer-events: none;
  animation: screen-out var(--t-exit) var(--ease-in) both;
}

@keyframes screen-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* Egyszerű képernyők belépése */
.crash.is-entering { animation: screen-in var(--t-enter) var(--ease-out) both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Márkajel (narancs + „Orang3") ------------------------------------- *
   Az eredeti logo.png-be bele volt égetve az „Orang3" felirat is; azt
   kivágtuk (assets/img/orange.png = csak a gyümölcs), a feliratot pedig élő
   Instrument Serif szöveg adja – így éles marad és tetszőlegesen méretezhető.
   A felirat szándékosan rálóg a narancs aljára, ahogy a látványterven is.

   A `.brand__mark` (narancs + felirat, a tagline NÉLKÜL) az a doboz, amit a
   főoldal → feladat átmenet FLIP-je mér. Ha a `.brand`-et mérnénk, a tagline
   magassága belerondítana a méretarányba.                                  */
.brand {
  --brand-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand__fruit {
  width: calc(6.4375rem * var(--brand-scale));   /* 103 px */
  pointer-events: none;
}

.brand__name {
  margin-top: -0.47em;                                   /* rálóg a narancs aljára */
  font-size: calc(var(--fs-brand) * var(--brand-scale)); /* 50 px */
  line-height: 1;
}

.brand__tagline {
  margin-top: 0.55em;
  font-size: calc(var(--fs-tagline) * var(--brand-scale)); /* 21 px */
  line-height: 1;
}

/* --- FÜLEKI logó ------------------------------------------------------- */
.fuleki {
  position: absolute;
  left: 50%;
  bottom: max(1.4375rem, env(safe-area-inset-bottom));   /* 23 px */
  transform: translateX(-50%);
  width: 4.8125rem;                                       /* 77 px */
  pointer-events: none;
}

/* =========================================================================
   HUD — a fejléc-márkajel és a chip. Egyszer épül fel és túléli a
   képernyőváltásokat: ez a két elem kíséri végig mind az öt feladatot.
   ========================================================================= */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-top: 4.4375rem;      /* 71 px – a narancs teteje a terven */
}

.topbar .brand { --brand-scale: 0.55; }

/* A tagline a fejlécben nem látszik, de a helyét a FLIP kedvéért
   összecsukjuk, nem töröljük. */
.topbar .brand__tagline {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* --- Chip (jobb felül) — a FELADAT SORSZÁMA, 1..5 ---------------------- *
   A látványterven csupasz „1" áll: mértékegység nélküli pontszám
   olvashatatlan, egy sorszám viszont magától értetődő. A csillagokat a
   feladatlap és a záró oklevél mutatja majd.                              */
.chip {
  position: absolute;
  top: var(--chip-top);
  right: var(--chip-right);
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: var(--r-chip);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.chip__num {
  font-size: var(--fs-chip);
  line-height: 1;
}

/* A chip érkezése. A végállapot (látszik) a CSS-ben van, az animáció csak
   ODAVISZ – ha bármiért nem futna le, a chip akkor is látszik (6. szabály). */
.chip { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.chip.is-arriving { opacity: 0; transform: translateY(-8px); }

/* --- „Mit kell csinálni?" a feladatszám alatt -------------------------- *
   A HUD-ban él, mert mind az öt feladatnál ugyanott lesz. A tartalmát az
   éppen futó képernyő adja.                                               */
.whatdo {
  position: absolute;
  top: calc(var(--chip-top) + var(--chip-size) + .75rem);
  right: var(--chip-right);
  height: 2.5rem;
  padding: 0 1.125rem;
  border-radius: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  pointer-events: auto;
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}

.whatdo:hover,
.whatdo:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, .10);
}

/* =========================================================================
   Kisebb képernyők
   ========================================================================= */

@media (max-width: 900px) {
  :root { --chip-top: 1.5rem; --chip-right: 1.5rem; --chip-size: 4.4rem; }
  .chip {
    border-radius: 1rem;
  }
  .whatdo { height: 2.125rem; font-size: .9375rem; padding: 0 .875rem; }
  .chip__num { font-size: 2.2rem; }
  .topbar { padding-top: 1.6rem; }
  .topbar .brand { --brand-scale: 0.42; }
}

/* Telefon állóban: a vw-hez kötött skála itt túl aprót adna. */
@media (max-width: 700px) {
  :root { font-size: 13px; }
}

/* =========================================================================
   Hibamentő kártya

   Ha a nap közepén elszáll valami, ne fehér képernyő nézzen vissza egy
   teremnyi gyerekre. A kártya NEM a megerősítés zöldjében beszél: a zöld
   azt jelenti, hogy valami jó (7. szabály).
   ========================================================================= */

.crash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.crash__word {
  font-size: 2.75rem;
  line-height: 1.15;
  color: var(--ink);
}

.crash .helper-btn { margin-top: 1rem; }

/* =========================================================================
   Csillagszámláló — a feladatszám MELLETT

   A koncepció szerint a pontokat csillagnak hívjuk, tehát ez a játék
   pontkijelzője. Ugyanabból a felületből van, mint a chip, hogy a kettő
   egy párnak látsszon; az arany csak a csillagon van, sehol máshol.
   ========================================================================= */

.stars {
  position: absolute;
  top: var(--chip-top);
  right: calc(var(--chip-right) + var(--chip-size) + .75rem);
  height: var(--chip-size);
  min-width: var(--chip-size);
  padding: 0 1rem;
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.stars__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--gold);
  stroke: none;
}

.stars__num {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .stars { border-radius: 1rem; padding: 0 .7rem; gap: .35rem; }
  .stars__icon { width: 1.25rem; height: 1.25rem; }
  .stars__num { font-size: 1.6rem; }
}

/* =========================================================================
   Visszaszámláló — bal felül, a chip tükörképeként

   Ugyanabból a felületből van, mint a chip és a csillag: a három együtt
   egy sor műszer a képernyő tetején.

   A 8. SZABÁLY MIATT NINCS PIROS ÉS NINCS VILLOGÁS. A sürgetés itt is
   TINTÁVAL történik, nem fénnyel: a szám előbb kivilágosodik, majd a doboz
   kap egy hajszálvékony fehér gyűrűt. Ennyi. Egy 25 fős teremben egy villogó
   piros óra a szomszéd padból is látszik, és pont attól hagyja abba egy
   13 éves a gondolkodást.
   ========================================================================= */

.clock {
  position: absolute;
  top: var(--chip-top);
  left: var(--chip-right);
  height: var(--chip-size);
  min-width: var(--chip-size);
  padding: 0 1.1rem;
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--ink-2);
  transition: color var(--t-fast) linear;
}

.clock__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clock__num {
  font-size: 2.25rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* A kettőspont és a számjegyek szélessége eltér az Instrument Serifben.
     Fix szélesség nélkül a doboz minden másodpercben egy hajszálnyit
     ugrálna – és egy ugráló óra pontosan az a ciklikus mozgás, amit az
     1. szabály tilt. */
  min-width: 3.6rem;
  text-align: center;
}

/* Két perc alatt: a szám teljes fehérre vált. Ennyi. */
.clock.is-soon { color: var(--ink); }

/* Fél perc alatt: a doboz kap egy hajszálvékony fehér gyűrűt is.
   Se szín, se mozgás, se hang. */
.clock.is-urgent {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* Lejárt: a szám 0:00-n áll, és a műszer elhalkul. A játék ilyenkor
   amúgy is a záróképernyőre megy. */
.clock.is-over { color: var(--ink-3); }

@media (max-width: 900px) {
  .clock { border-radius: 1rem; padding: 0 .7rem; gap: .35rem; }
  .clock__icon { width: 1.25rem; height: 1.25rem; }
  .clock__num { font-size: 1.6rem; min-width: 2.6rem; }
}