/* =========================================================================
   Orang3 — Bevezető feladat: bináris kód
   (látványterv: latvanytervek/bevezeto_feladat.png)

   A képernyő egy 4 soros rács. A két rugalmas sor nyeli el a függőleges
   holtjátékot – ez az egész reszponzív stratégia: az iskolai laptophoz
   (1366×620 a böngészősávok után) NEM kell médialekérdezés.

   Ellenőrzés 1920×1080-on:  fejléc alja 143,6 · borítéksáv 474,4 ·
   kártya 618-777 · segédgomb 825-889 · súgósor 899-916 · alsó levegő 164.
   ========================================================================= */

.binary {
  display: grid;
  grid-template-rows:
    minmax(0, 1fr)      /* 1  borítéksáv        */
    auto                /* 2  kártya            */
    auto                /* 3  segédgomb + súgósor */
    minmax(0, .346fr);  /* 4  alsó levegő       */
  justify-items: center;
  height: 100%;
  padding: 8.975rem 2rem 0;   /* 143,6px – a fejléc-márkajel alatt kezdődik */
}

/* =========================================================================
   1. sor — a boríték
   ========================================================================= */

.env-stage {
  place-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.env-btn {
  display: block;
  cursor: default;
  border-radius: 1rem;
}
.env-btn:not([disabled]) { cursor: pointer; }

.env {
  width: var(--env-w);         /* 320px */
  height: var(--env-h);        /* 220px */
  overflow: visible;
}

/* --- Az előrajz -------------------------------------------------------- *
   A teljes boríték halványan, az első betű előtt is: a gyerek így tudja,
   MIT épít, és minden helyes betű egy darabot élesít ki belőle.
   Teljesen statikus – sem itt, sem később nem animálódik semmi rajta.     */
.env-ghost-paper { fill: var(--paper); stroke: none; opacity: var(--paper-ghost-fill); }
.env-ghost-paper--flap { fill: var(--paper-flap); }

.env-ghost-edge {
  fill: none;
  stroke: var(--paper-line);
  stroke-width: var(--env-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: var(--paper-ghost-line);
}

.env-ghost-seal {
  fill: var(--orange);
  stroke: none;
  opacity: var(--paper-ghost-fill);
}

/* --- A papír ----------------------------------------------------------- *
   A törzs az 5., a fül a 6. betűnél telik meg. A késleltetés szándékos:
   előbb fut le a friss darab zöld pillanata a sötét háttéren, és csak
   utána úszik alá a papír – különben a zöld beleolvadna a bőrszínbe.      */
.env-paper {
  fill: var(--paper);
  stroke: none;
  opacity: 0;
  transition: opacity 520ms var(--ease-out) 620ms;
}
.env-paper--flap { fill: var(--paper-flap); }

.env--paper .env-paper { opacity: 1; }
.env--flap-paper .env-paper--flap { opacity: 1; }

/* --- A hét darab ------------------------------------------------------- */
.env-piece {
  fill: none;
  stroke: var(--paper-line);
  stroke-width: var(--env-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* a hajszálvonal se a rem-skálától
                                          ne vékonyodjon el, se az elúszás
                                          1,42× nagyításától ne hízzon meg */
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

/* Egy darab „megvan" állapota. Az osztály önmagában leírja a végállapotot
   (6. szabály), ezért újratöltés után villanás nélkül visszaépül. */
.env-piece.is-on {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset var(--t-draw) var(--ease-draw),
    stroke var(--t-cool) linear;
}

/* Ha a darab végigrajzolódott, elveszi a szaggatást. A `non-scaling-stroke`
   mellett a szaggatás mintája a NAGYÍTOTT úthosszhoz igazodik, a dasharray
   viszont felhasználói egységben marad: az 1,42×-esre nagyított borítékon
   ettől kimaradna a vonalak utolsó harmada. */
.env-piece.is-drawn { stroke-dasharray: none; }

/* A frissen megrajzolt darab zölden érkezik (azonnal, átmenet nélkül),
   és amikor az .is-fresh lekerül róla, a fenti átmenet hűti vissza a papír
   színére: a zöld megjelöli a helyes pillanatot, aztán félreáll. */
.env-piece.is-fresh {
  stroke: var(--ok);
  transition: stroke-dashoffset var(--t-draw) var(--ease-draw), stroke 0s;
}

/* Elúszás középre – a végállapotot osztály írja le (6. szabály). */
.env-stage { transition: transform var(--t-float) var(--ease-in-out); }
.env-stage.is-floating { transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(1.42); }

/* --- Kinyitás ---------------------------------------------------------- *
   FONTOS: SVG-elemen a böngészők nem támogatják a 3D transzformot – egy
   `rotateX()` némán identitásra lapul, és a fül meg sem mozdul. Ezért a
   fül nyílását 2D-ben imitáljuk: a függőleges összenyomás átfut a nullán
   (élére áll), majd a túloldalon nyílik ki. Ugyanaz a mozdulat, csak
   olyan eszközzel, ami tényleg működik.
   A végállapotot itt is osztály írja le (6. szabály), így csökkentett
   mozgásnál egyszerűen odaugrik.                                          */
.env-stage.is-open .env-seal {
  transform: scale(0) rotate(22deg);
  opacity: 0;
  transition: transform 300ms var(--ease-in) 60ms, opacity 140ms linear 220ms;
}

.env-stage.is-open .env-flap {
  transform: scaleY(-0.92);
  animation: flap-open 620ms var(--ease-out) 180ms both;
}

@keyframes flap-open {
  0%   { transform: scaleY(1);    }
  46%  { transform: scaleY(0.02); }
  100% { transform: scaleY(-0.92); }
}

/* Az előrajz pecsétje az igazi ALATT ül, ezért zárt borítéknál nem látszik.
   Nyitáskor viszont a fül elmegy fölüle, és ott maradna egy folt – ezért
   pontosan az igazi pecséttel együtt tűnik el.
   Az előrajz PAPÍRJA szándékosan marad: az adja a kinyílt boríték meleg,
   árnyékos belsejét. */
.env-stage.is-open .env-ghost-seal {
  opacity: 0;
  transition: opacity 140ms linear 220ms;
}

.env-stage.is-open .env-btn { pointer-events: none; }

/* Újratöltés / visszaállítás: minden darab a helyén, animáció nélkül. */
.env--instant .env-piece,
.env--instant .env-paper,
.env--instant .env-seal { transition: none !important; }

.env-flap {
  transform-box: view-box;
  /* A zsanér a boríték felső éle (y=12), ahol a fül a két felső sarokból
     indul – így nyitáskor a fül a borítékon MARAD, nem lebeg el fölötte. */
  transform-origin: 160px 12px;
}

/* Ha a böngésző nem ismeri a view-box transform-boxot, a fül saját dobozához
   igazodunk. A fül doboza pont a felső élnél kezdődik, tehát ugyanoda esik. */
.no-viewbox .env-flap {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

/* --- A pecsét ----------------------------------------------------------- *
   Az objektum egyetlen élénk színe és egyben a kattintható cél. A belé
   vésett gyűrűtől lesz viaszpecsét és nem korong.                          */
.env-seal {
  transform-box: view-box;
  transform-origin: 160px 128px;
  transform: scale(0);
}
.env-seal.is-on {
  transform: scale(1);
  transition: transform 380ms var(--ease-pop);   /* --ease-pop, 1/2 */
}

.env-seal__wax { fill: var(--orange); stroke: none; }   /* sosem megy át zöldön */

.env-seal__ring {
  fill: none;
  stroke: var(--paper-shade);
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}

/* A felirat a KÉPERNYŐ közepéhez igazodik, nem a borítékhoz: így a boríték
   dobozának mérete nem változik, és az elúszás középre pontos marad
   (a scale() a doboz közepe körül forog). */
.env-caption {
  position: fixed;
  left: 50%;
  top: calc(50% + var(--env-h) * 0.71 + 2.125rem);   /* a 1,42×-es boríték alatt 34px-re */
  transform: translateX(-50%);
  font-size: var(--fs-pill);
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.env-caption.is-on { opacity: 1; }

/* =========================================================================
   2. sor — a kártya
   ========================================================================= */

.card {
  width: var(--card-w);           /* 878px */
  height: var(--card-h);          /* 159px */
  max-width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-bottom: 2.3125rem;      /* 37px – így esik a vonások sora y=736-ra */
  border-radius: var(--r-card);
}

/* --- Az aktuális 8 bites csoport -------------------------------------- *
   Egyszerre egy betű kódja látszik. Hét csoport egymás mellett 1750px
   lenne egy 878px-es kártyán; ráadásul egy csoport feleannyi terhelés
   az első tíz másodpercben.                                              */
.octet {
  place-self: center;
  font-size: var(--fs-octet);     /* 46px */
  line-height: 1;
  white-space: nowrap;
  transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in);
}

.octet.is-out { opacity: 0; transform: translateY(-8px); }

/* --- A hét betűhely ---------------------------------------------------- */
.slots {
  display: flex;
  justify-content: center;
}

.slot {
  width: var(--dash-pitch);       /* 60,5px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot__letter {
  font-size: var(--fs-letter);    /* 40px */
  line-height: 1;
  color: var(--ink);
  min-height: 1em;
}

.slot__letter:empty::after { content: '\200b'; }   /* megtartja a sormagasságot */

/* Villogó kurzor: ez mondja meg, hogy IDE lehet írni.
   Ez az EGYETLEN ciklikus mozgás a felületen – szándékos kivétel az
   1. szabály alól, mert az írási hely jelzésének ez az egyetemes jele.
   Csökkentett mozgásnál nem villog, csak áll (lásd lentebb). */
.slot__caret {
  position: absolute;
  bottom: var(--dash-h);          /* pont a vonáson ül, mint egy szövegkurzor */
  width: 2px;
  height: 1.75rem;                /* 28px */
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  /* Kifejezetten átmenet NÉLKÜL: a csökkentett mozgás globális szabálya
     mindenre ad egy 0,01 ms-os átmenetet, és egy `all` átmenet a kurzor
     LÁTHATÓSÁGÁT tenné animációfüggővé – pont amit a 6. szabály tilt. */
  transition: none;
}

.slot.is-active .slot__caret { animation: caret 1.1s steps(1, end) infinite; }

@keyframes caret {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slot.is-active .slot__caret { animation: none; opacity: 1; }
}
:root[data-motion='off'] .slot.is-active .slot__caret { animation: none; opacity: 1; }

.slot__dash {
  width: var(--dash-w);           /* 38px */
  height: var(--dash-h);          /*  4px */
  margin-top: .3125rem;           /*  5px */
  border-radius: 999px;
  background: var(--dash-idle);
  transition: background var(--t-fast) var(--ease-in-out), opacity var(--t-fast) linear;
}

.slot.is-active .slot__dash { background: var(--ink); }

.slot.is-solved .slot__dash  { background: var(--ok-line); transition-delay: 120ms; }
.slot.is-solved .slot__letter { color: var(--ok); }

/* A megérkező betű: előbb megjelenik fehéren, és csak utána vált zöldre.
   A kétütemű visszajelzés ok-okozati láncot olvastat („betű, AZTÁN helyes"),
   szemben egy zöld villanással, ami dísznek látszik. */
.slot__letter.is-print { animation: letter-print 240ms var(--ease-out) both; }
.slot.is-solved .slot__letter { transition: color 240ms var(--ease-in-out) 90ms; }

@keyframes letter-print {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* Rossz tipp: halvány kísértet-betű, ami elpárolog. Semmi piros, semmi
   rázkódás – egy huszonöt fős teremben a rázkódás a szomszéd padból is
   látszik, és pont azt közli, amitől egy 13 éves abbahagyja a tippelést. */
.slot__ghost {
  position: absolute;
  font-size: var(--fs-letter);
  line-height: 1;
  color: rgba(255, 255, 255, .4);
  pointer-events: none;
  opacity: 1;                      /* a láthatóság NEM az animációtól függ */
  animation: ghost 310ms var(--ease-in) both;
}
.slot { position: relative; }

@keyframes ghost {
  0%, 29%  { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(-4px); }
}

.slot.is-nudge .slot__dash { animation: dash-dip 240ms var(--ease-in-out); }
@keyframes dash-dip {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* =========================================================================
   Belépés — „előbb a körvonal, aztán az anyag"
   ========================================================================= */

.binary.is-entering .env-ghost      { animation: appear 460ms var(--ease-out) 240ms both; }
.binary.is-entering .card::before   { animation: appear 240ms var(--ease-out) 480ms both; }
.binary.is-entering .card::after    { animation: appear 340ms var(--ease-out) 640ms both; }
.binary.is-entering .octet          { animation: rise   240ms var(--ease-out) 700ms both; }
.binary.is-entering .helper         { animation: appear 300ms var(--ease-out) 1000ms both; }
.binary.is-entering .slot__dash {
  animation: dash-in 180ms var(--ease-out) both;
  animation-delay: calc(640ms + var(--i) * 26ms);
}

@keyframes dash-in {
  from { opacity: 0; transform: scaleX(.4); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   3. sor — a segédgomb
   ========================================================================= */

/* A segédgomb ugyanabból az üvegből van, mint a modál: ez a panel „fogantyúja".
   Nagy célpont – ez a gyerek egyetlen kapaszkodója, ha nem boldogul a kóddal. */
.helper {
  margin-top: 3rem;               /* 48px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* „itt a segítség" – halk, kisbetűs útbaigazítás a gomb alatt. Egy gyereknek,
   aki elakadt, ez mondja meg, hogy van hova nyúlnia. */
.helper__hint {
  margin-top: .625rem;            /* 10px */
  font-size: var(--fs-hint);      /* 17px */
  color: var(--ink-3);
  letter-spacing: .02em;
}

.helper-btn {
  position: relative;
  width: 20rem;                   /* 320px */
  height: 4rem;                   /*  64px */
  border-radius: 2rem;
  font-size: 1.625rem;            /*  26px */
  line-height: 1;
  color: rgba(255, 255, 255, .78);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, .075) 0%,
    rgba(255, 255, 255, .028) 55%,
    rgba(255, 255, 255, .055) 100%
  );
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}

.helper-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, .34) 0%,
    rgba(255, 255, 255, .10) 44%,
    rgba(255, 255, 255, .20) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background var(--t-fast) linear;
}

.helper-btn:hover,
.helper-btn:focus-visible {
  color: var(--ink);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, .12) 0%,
    rgba(255, 255, 255, .05) 55%,
    rgba(255, 255, 255, .09) 100%
  );
}
.helper-btn:hover::before,
.helper-btn:focus-visible::before {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, .52) 0%,
    rgba(255, 255, 255, .18) 44%,
    rgba(255, 255, 255, .32) 100%
  );
}
.helper-btn:active { transform: scale(.99); transition-duration: var(--t-tick); }

/* =========================================================================
   A bináris ábécé — egyszerre segédtábla ÉS billentyűzet

   Valódi <dialog>, modálisan megnyitva: a fókuszcsapdát, az Esc-et, a háttér
   letiltását és a felső réteget a böngésző adja. Nekünk csak az anyag marad.

   AZ ANYAG: „liquid glass" — áttetsző lap, ami elmossa és telítettebbé teszi
   a mögötte lévő képernyőt, felül éles fénytöréssel, alul halkabb visszfénnyel.
   A `backdrop-filter` az EGYETLEN helye a terméknek (5. szabály alóli
   szándékos kivétel): egyetlen elemen, statikusan, sosem animálva – így egy
   integrált grafikás iskolai laptop is elbírja.
   ========================================================================= */

.abc {
  /* a <dialog> alapértelmezett dobozát leszedjük */
  padding: 0;
  border: 0;
  margin: auto;                     /* a modális dialógust a böngésző középre teszi */
  max-width: none;
  max-height: none;
  background: none;
  color: inherit;
  overflow: visible;
}

.abc::backdrop {
  /* A lap KÖRÜL is elmosódik minden: a hátteret is elmossuk, és a panel erre
     rak rá még egy erősebb réteget. Így nem „sötét fólia + éles háttér",
     hanem egyetlen, mélységében elmosódott kép. */
  background: rgba(8, 8, 9, .40);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  animation: appear 260ms var(--ease-out) both;
}

/* --- Az üveglap: közös anyag minden modális panelhez ------------------ */
.glass {
  position: relative;
  border-radius: 2rem;

  /* EGYENLETES fagyott felület, nem színátmenetes kártya: a látvány az
     elmosódásból jöjjön, ne egy rajzolt átmenetből. */
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.12);
          backdrop-filter: blur(32px) saturate(180%) brightness(1.12);
  box-shadow:
    0 2.25rem 5rem rgba(0, 0, 0, .55),        /* a lap elemelkedik a laptól */
    inset 0 1px 0 rgba(255, 255, 255, .26),   /* felső fénytörés */
    inset 0 -1px 0 rgba(255, 255, 255, .06);  /* alsó visszfény */
  animation: abc-in 320ms var(--ease-out) both;
}

/* A panel csak azért fókuszálható, hogy a modális dialógus fókusza legyen
   hova kerüljön. NEM interaktív elem, ezért nem kap fókuszgyűrűt: enélkül a
   megnyíláskor egy vastag körvonal ül a panel körül, ami csak Tab-ra tűnik
   el, kattintásra nem (a fókusz a legközelebbi fókuszálható ősön marad). */
[data-panel]:focus,
[data-panel]:focus-visible { outline: none; }

.abc__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 3rem 3rem 2.25rem;
  max-width: min(92vw, 82rem);
  max-height: min(88vh, 46rem);
}

/* Színátmenetes hajszálkeret: felül-balról erős, jobbra-lefelé elhaló –
   ettől néz ki üvegnek és nem sötét dobozzal. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, .40) 0%,
    rgba(255, 255, 255, .13) 40%,
    rgba(255, 255, 255, .10) 65%,
    rgba(255, 255, 255, .24) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.glass > * { position: relative; z-index: 3; }

/* Ahol nincs backdrop-filter, ott tömör lap – az üveg nélkül is működik. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: #1b1b1e; }
  .abc::backdrop,
  .intro::backdrop,
  .dlg::backdrop { background: rgba(8, 8, 9, .88); }
}

@keyframes abc-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Bezáró X a panel jobb felső sarkában ----------------------------- */
.abc__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}

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

.abc__close svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* --- A kitűzött, aktuális kód ----------------------------------------- */
.abc__pinned {
  flex: none;
  text-align: center;
  font-size: var(--fs-abc-pin);   /* 48px */
  line-height: 1;
  letter-spacing: .06em;
}

/* --- A tábla ---------------------------------------------------------- */
.abc__scroll {
  min-height: 0;                  /* enélkül a flex-elem nem tud zsugorodni */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.abc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 16.25rem));   /* 4 × max 260px */
  grid-template-rows: repeat(7, 3.5rem);                   /* 7 × 56px  */
  grid-auto-flow: column;                       /* oszlopfolytonos: A–G, H–N, O–U, V–Z */
  column-gap: 2.5rem;                           /* 40px */
}

.abc__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  padding: 0 .5rem;
  border-radius: .625rem;
  text-align: left;
  transition: background 120ms linear;
  animation: abc-row 240ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 8ms);
}

@keyframes abc-row {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.abc__letter {
  width: 2.125rem;                 /* 34px */
  font-size: var(--fs-abc-letter); /* 26px */
  line-height: 1;
  color: var(--ink);
  transition: color 120ms linear;
}

.abc__bits {
  font-size: var(--fs-abc-bits);   /* 22px */
  line-height: 1;
  color: var(--ink-2);
  transition: color 120ms linear;
}

/* Rossz tipp nyitott panel mellett: a kártyán megjelenő kísértet-betűt
   eltakarná a panel, ezért itt a beütött betű sora halkul el egy pillanatra.
   Semmi piros, semmi rázkódás, csak annyi, hogy „nem ez". */
.abc__row.is-miss .abc__letter,
.abc__row.is-miss .abc__bits { color: var(--ink-4); transition: none; }

.abc__dismiss {
  flex: none;
  max-width: 46rem;
  text-align: center;
  line-height: 1.45;
  font-size: var(--fs-hint);
  color: var(--ink-3);
}

/* --- Záródás ---------------------------------------------------------- *
   A `.dlg` a KÖZÖS jelölő: minden további feladat modálja ezt kapja, és
   ettől megörökli a nyitás, a záródás és a háttér viselkedését.          */
.abc.is-closing,
.intro.is-closing,
.dlg.is-closing { pointer-events: none; }
.abc.is-closing .glass,
.intro.is-closing .glass,
.dlg.is-closing .glass { animation: abc-out 200ms var(--ease-in) both; }
.abc.is-closing::backdrop,
.intro.is-closing::backdrop,
.dlg.is-closing::backdrop { animation: abc-out 200ms var(--ease-in) both; }

@keyframes abc-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.99); }
}

/* =========================================================================
   „Mit kell csinálni?" — a feladat magyarázata

   Ez ugrik fel elsőnek, nagy betűkkel, és ezt hozza vissza a fejlécben lévő
   gomb is. Ugyanaz az üveg és ugyanaz az elmosódás, mint az ábécénél.
   ========================================================================= */

.intro {
  padding: 0;
  border: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  background: none;
  color: inherit;
  overflow: visible;
}

.intro::backdrop {
  background: rgba(8, 8, 9, .40);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  animation: appear 260ms var(--ease-out) both;
}

.intro__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 3.75rem 4rem 3rem;
  width: min(88vw, 50rem);
  max-height: min(88vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.intro__title {
  font-size: 3.5rem;            /* 56px – nagy betűkkel, ahogy kérted */
  line-height: 1.05;
  color: var(--ink);
}

.intro__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 38rem;
  font-size: 1.5rem;            /* 24px */
  line-height: 1.45;
  color: var(--ink-2);
}

.intro__body b { color: var(--ink); font-weight: 400; }

.intro__ok {
  margin-top: .5rem;
  min-width: 12rem;
  height: 3.75rem;
  padding: 0 2rem;
  border-radius: 1.875rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: background var(--t-fast) linear;
}

.intro__ok:hover,
.intro__ok:focus-visible { background: rgba(255, 255, 255, .17); }
.intro__ok:active { transform: scale(.99); transition-duration: var(--t-tick); }

/* =========================================================================
   A kártya és a segédgomb távozása a boríték feloldásakor
   ========================================================================= */

.binary.is-unlocked .card,
.binary.is-unlocked .helper,
.binary.is-unlocked .demo-btn {
  animation: sink-away var(--t-exit) var(--ease-in) both;
  pointer-events: none;
}

@keyframes sink-away {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(18px); }
}

/* =========================================================================
   Alacsony képernyők – két menekülőút, semmi több
   ========================================================================= */

/* A tokent írjuk felül, nem a .env méretét: a felirat pozíciója a --env-h-ból
   számol, különben elcsúszna. */
@media (max-height: 700px) {
  :root { --env-w: 15rem; --env-h: 10.3125rem; }   /* 240 × 165 */
  .binary { padding-top: 7.5rem; }
  .helper { margin-top: 1.5rem; }
  .abc__panel { gap: 2rem; }
}

@media (max-height: 600px) {
  :root { --env-w: 12.5rem; --env-h: 8.625rem; }   /* 200 × 138 */
  .card { padding-bottom: 1.85rem; }
  /* A kitűzött kód alacsony képernyőn is kell – a panel eltakarja a kártyát. */
  .abc__pinned { font-size: 2rem; }
  .abc__panel { gap: 1.25rem; padding: 2rem 2rem 1.5rem; }
  .abc__grid { grid-template-rows: repeat(7, 2.75rem); }
}

/* =========================================================================
   Telefon állóban — újratördelés, nem kicsinyítés
   ========================================================================= */

@media (max-width: 700px) {
  .binary {
    padding: 6.5rem 1rem 0;
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, .35fr);
  }

  :root { --env-w: 12.5rem; --env-h: 8.625rem; }

  .card {
    width: 100%;
    height: auto;
    padding: 1.5rem 0 1.5rem;
    gap: 1.5rem;
  }

  :root { --fs-octet: 1.875rem; --fs-letter: 1.75rem; --dash-pitch: 2.75rem; --dash-w: 1.625rem; }

  .helper { margin-top: 1.5rem; width: 100%; }
  .helper-btn { width: 100%; height: 3.5rem; font-size: 1.375rem; }

  .abc__panel {
    gap: 1.5rem;
    padding: 2.5rem 1.25rem 1.25rem;
    border-radius: 1.5rem;
    max-width: 94vw;
    max-height: 92vh;
  }
  .abc__close { top: .6rem; right: .6rem; width: 2.5rem; height: 2.5rem; }
  .abc__pinned { font-size: 2rem; }
  .abc__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(13, 3.4rem);   /* 44px 13px-es alapnál – az
                                                 érintős célpont minimuma */
    column-gap: 1rem;
    width: 100%;
  }
  .abc__row { padding: 0 .5rem; }
  .abc__letter { font-size: 1.25rem; width: 1.5rem; }
  .abc__bits { font-size: 1rem; }
}

/* =========================================================================
   IDEIGLENES FEJLESZTŐI GOMB

   Végigjátssza magától a hét betűt. Szándékosan halk és a sarokban ül:
   ez nem a játék része, hanem szerszám. AZ ESEMÉNY ELŐTT KI KELL KAPCSOLNI
   (js/main.js -> DEMO_ALAPBOL = false, vagy ?demo=0).
   ========================================================================= */

.demo-btn {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 4;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: 1.125rem;
  font-size: .9375rem;
  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);
  transition: color var(--t-fast) linear, background var(--t-fast) linear;
}

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

.demo-btn[disabled] { color: var(--ink-4); cursor: default; }

/* --- „Amíg ezt olvasod, áll az idő." ------------------------------------
   A `ui/dialog.js` injektálja minden olyan panelbe, ami megállítja az órát.
   Halk, egysoros, a panel legalján: nem üzenet, csak megnyugtatás. Az
   időkorlát nem meglepetés, és a magyarázó elolvasása nem büntetés.

   A panelek FLEXEK (lásd az 1. feladat magyarázóját), ezért a sor magától
   a végére kerül, és nem tolja ki az „Értem" gombot.                      */
.dlg-pause {
  flex: 0 0 auto;
  margin-top: .1rem;
  font-size: var(--fs-hint);
  line-height: 1.3;
  color: var(--ink-3);
  text-align: center;
}