/* =========================================================================
   Orang3 — 1. feladat: az arató robot

   Az álló feladatlap ugyanabból az üvegből van, mint a modálok, csak egy
   árnyalattal világosabb: ez a lap NEM a képernyő fölött lebeg, hanem maga
   a képernyő tartalma.

   Bal oldalon épül a program, jobb oldalon arat a drón.

   A tábla egy megdöntött sík (`rotateX`), a búza pedig VISSZAforgatva áll
   rajta: ettől lesz farm és nem sakktábla. Ez a teljes 3D, nulla könyvtárral.
   ========================================================================= */

:root {
  /* --- A blokkok saját színrendszere --------------------------------------
     SZÁNDÉKOSAN nem a termék meglévő színei. A `--ok` mentazöld továbbra is
     csak azt jelenti, hogy „ez helyes", a `--orange` pedig csak a pecsété.
     A blokkoknak zárt, három hangú palettájuk van, Scratch módjára.        */
  --blk-vezerles: #8B6BC7;   /* lila  – a program belépési pontja */
  --blk-mozgas:   #4682C4;   /* kék   – helyváltoztatás           */
  --blk-aratas:   #6AA84F;   /* zöld  – munka a búzán             */

  /* --- A farm ------------------------------------------------------------ */
  --soil-a:  #AA6A31;
  --soil-b:  #97592A;
  --soil-sown: #7A4A22;      /* a szantott, bevetett mezo (a buzasor) */
  --soil-e:  #6E3F1D;        /* a tábla pereme, „vastagsága" */
  --wheat-1: #E8C25A;
  --wheat-2: #C99A34;
  --leaf:    #6FA24A;
  --pump:    #E08A2E;

  --tilt: 47deg;             /* a tábla dőlése */
}

/* =========================================================================
   A lap
   ========================================================================= */

.t1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9.6rem 2rem 1.5rem;   /* a fejléc-márkajel alja 8,95rem */
}

.sheet {
  width: min(47rem, 100%);
  min-width: 0;
  height: 100%;
  max-height: 52rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: 1.75rem;
}

/* Egy árnyalattal világosabb üveg, mint a modáloké: ez a lap a tartalom,
   nem egy fölé úszó panel. Az anyag ugyanaz (lásd .glass a binary.css-ben). */
.glass--sheet {
  background: rgba(255, 255, 255, .115);
  box-shadow:
    0 2.5rem 5.5rem rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.sheet__head { text-align: center; }

.sheet__eyebrow {
  font-size: .9375rem;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet__title {
  margin-top: .15rem;
  font-size: 2.5rem;
  line-height: 1.05;
}

.sheet__sub {
  margin-top: .35rem;
  font-size: 1.3125rem;
  color: var(--ink-2);
}

/* A két hasáb NEM egyenlő: a blokkoknak elég egy keskeny sáv, a táblának
   viszont kell a hely, különben a búza és a drón olvashatatlanul apró. */
.sheet__body {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 1.25rem;
  min-height: 0;
}

/* =========================================================================
   Bal oldal: a program
   ========================================================================= */

.code {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .75rem;
  min-height: 0;
}

/* --- A zöld indítógomb, a kód FÖLÖTT ------------------------------------ */
.run-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 3.25rem;
  border-radius: 1.625rem;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(172deg, #47A968 0%, #368051 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 .25rem .9rem rgba(0, 0, 0, .28);
  transition: filter var(--t-fast) linear, transform var(--t-tick) var(--ease-out);
}

.run-btn__icon { display: grid; place-items: center; }
.run-btn__icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.run-btn:hover:not([disabled]),
.run-btn:focus-visible:not([disabled]) { filter: brightness(1.14); }
.run-btn:active:not([disabled]) { transform: scale(.985); }

.run-btn[disabled] {
  cursor: default;
  filter: saturate(.25) brightness(.72);
  color: rgba(255, 255, 255, .6);
}

/* --- A terminál --------------------------------------------------------- */
.term {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: .9rem;
  background: rgba(14, 14, 16, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  overflow: hidden;
  transition: box-shadow var(--t-fast) linear;
}

/* Vontatás közben a terminál MEGJELÖLI magát: enélkül nem látszik, hova
   lehet ejteni a blokkot. */
.is-dragging .term { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38); }

.term__bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  background: rgba(255, 255, 255, .05);
}

.term__dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.term__name {
  margin-left: .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

.term__empty {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 1rem;
  color: var(--ink-4);
  pointer-events: none;
}

.term.is-locked { opacity: .82; }

/* --- A készlet ---------------------------------------------------------- */
.pal-label {
  margin-bottom: .4rem;
  font-size: .875rem;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pal {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.pal.is-locked { opacity: .6; }

/* =========================================================================
   A blokkok
   ========================================================================= */

.blk {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 2.5rem;
  padding: .35rem .8rem;
  border-radius: .5rem;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: .045em;
  text-align: left;
  color: #fff;
  background: var(--blk-c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .26);
  touch-action: none;              /* különben az érintőpad görgetésnek veszi */
  transition: filter var(--t-fast) linear, transform var(--t-tick) var(--ease-out);
}

.blk--vezerles { --blk-c: var(--blk-vezerles); }
.blk--mozgas   { --blk-c: var(--blk-mozgas); }
.blk--aratas   { --blk-c: var(--blk-aratas); }

/* A Scratch-féle bütyök. Csak jelzés, hogy ezek egymás alá valók. */
.blk::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  bottom: -.26rem;
  width: 1.05rem;
  height: .3rem;
  border-radius: 0 0 .28rem .28rem;
  background: var(--blk-c);
}

/* A kalapblokk a program teteje: felül lekerekített, és nincs fölötte semmi. */
.blk--hat { border-radius: 1.1rem 1.1rem .5rem .5rem; }

.blk__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
}

.blk__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk__label { flex: 1 1 auto; min-width: 0; }

.blk:hover:not([disabled]),
.blk:focus-visible:not([disabled]) { filter: brightness(1.14); }
.blk:active:not([disabled]) { transform: scale(.99); }
.blk[disabled] { cursor: default; }

/* A vontatott másolat. A <body>-n ül, fixen: se az üveg elmosódása, se a
   terminál kerete nem torzítja és nem vágja le. */
.blk--dragging {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  pointer-events: none;
  filter: brightness(1.12);
  box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* A rés, ahova a blokk esne. */
.blk-gap {
  height: 2.5rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* Épp ez a blokk fut. Vékony fehér vonal, nem fény (7. szabály szellemében:
   a megerősítés zöldjét NEM használjuk el jelölésre). */
.blk.is-running {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .85),
    0 1px 2px rgba(0, 0, 0, .26);
}

.is-dragging { cursor: grabbing; }
.is-dragging * { cursor: grabbing !important; }

/* =========================================================================
   Jobb oldal: a farm
   ========================================================================= */

.farm {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  min-height: 0;
}

.field {
  width: 100%;
  display: grid;
  place-items: center;
  perspective: 82rem;
  --cell: 4.3rem;
}

.plane {
  position: relative;
  width: calc(var(--n) * var(--cell));
  height: calc(var(--n) * var(--cell));
  transform: rotateX(var(--tilt));
  transform-style: preserve-3d;
}

/* A tábla „vastagsága": egy sötétebb lap a föld alatt. Ettől ül a pálya a
   levegőben, ahogy a látványterven is. */
.plane::before {
  content: '';
  position: absolute;
  inset: -.15rem;
  border-radius: .35rem;
  background: var(--soil-e);
  transform: translateZ(-.7rem);
  box-shadow: 0 0 0 .12rem var(--soil-e);
}

.tile {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  background: var(--soil-a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.tile--alt { background: var(--soil-b); }

/* --- A SZÁNTOTT mezők: itt fut a búzasor ------------------------------- *
   Ez a tábla legfontosabb olvashatósági eszköze. Sötétebb, barázdás föld,
   világos peremmel: a sor alakja, iránya és a kanyarjai így a FÖLDBŐL is
   kiolvashatók, nem csak a szálakból. Aratás után is megmarad, tehát az is
   látszik, hol járt már a drón.                                          */
.tile--sown {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, .16) 0 2px,
      rgba(255, 255, 255, .05) 2px 7px),
    var(--soil-sown);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 210, .22),
    inset 0 0 .6rem rgba(0, 0, 0, .28);
}

/* Hiba után: ezek a mezők maradtak learatatlanul. Fehér körvonal, pár
   másodpercre. Semmi piros, semmi rázkódás (8. szabály). */
.tile.is-left {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .85),
    inset 0 0 .6rem rgba(0, 0, 0, .28);
}

/* --- Ami a földön áll ---------------------------------------------------- *
   Vissza van forgatva a tábla dőlésével, ezért felállnak a földről. A
   forgáspont a mező alsó éle: ott gyökereznek.                            */
.sprite {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: calc(var(--cell) * 1.35);
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--c) * var(--cell)),
              calc(var(--r) * var(--cell) + var(--cell) - 100%))
    rotateX(calc(-1 * var(--tilt)))
    rotate(var(--lean, 0deg));
  transform-style: preserve-3d;
  transition: opacity 220ms var(--ease-in), transform 260ms var(--ease-in);
}

/* Learatva. Nem tűnik el, hanem lekaszálódik: a magassága nullára fut. */
.sprite--wheat.is-cut {
  opacity: 0;
  transform:
    translate(calc(var(--c) * var(--cell)),
              calc(var(--r) * var(--cell) + var(--cell) - 100%))
    rotateX(calc(-1 * var(--tilt)))
    rotate(var(--lean, 0deg))
    scaleY(.12);
}

.stalk {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: .2rem;
  height: var(--h);
  border-radius: .1rem;
  transform: rotate(var(--t)) scaleY(var(--d));
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--wheat-1) 0 44%, var(--wheat-2) 100%);
}

/* A kalász: egy vastagabb pötty a szál tetején. */
.stalk::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -.16rem;
  width: .38rem;
  height: .62rem;
  margin-left: -.19rem;
  border-radius: .19rem;
  background: var(--wheat-1);
  box-shadow: inset -.08rem 0 .1rem rgba(0, 0, 0, .16);
}

.leaf {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: .34rem;
  height: calc(var(--h) * .4);
  transform: rotate(var(--t));
  transform-origin: 50% 100%;
  border-radius: 50% 50% 30% 30%;
  background: var(--leaf);
}

.sprite--pumpkin {
  height: calc(var(--cell) * .5);
}

.sprite--pumpkin::before {
  content: '';
  position: absolute;
  left: 26%; right: 26%; bottom: 0;
  height: 92%;
  border-radius: 46% 46% 50% 50%;
  background: radial-gradient(120% 100% at 32% 22%, #F2A950 0%, var(--pump) 62%);
  box-shadow:
    inset -.16rem -.08rem .26rem rgba(0, 0, 0, .22),
    inset .1rem 0 0 rgba(0, 0, 0, .1);
}

.sprite--pumpkin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: .16rem;
  height: .26rem;
  margin-left: -.08rem;
  border-radius: .08rem;
  background: #5E7A38;
}

/* --- A drón --------------------------------------------------------------- *
   Ugyanennek a síknak a gyereke, csak `translateZ`-vel megemelve: az árnyék
   a földön marad, ő fölötte lebeg, és a mozgása magától jó perspektívában
   történik.                                                                */
.drone,
.drone-shadow {
  position: absolute;
  left: 0; top: 0;
  width: var(--cell);
  height: var(--cell);
  transition: transform var(--t-drone, 260ms) var(--ease-in-out);
}

.drone {
  z-index: 2;
  transform:
    translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)))
    translateZ(calc(var(--cell) * .5))
    rotate(var(--rot, 0deg));
  transform-style: preserve-3d;
}

.drone-shadow {
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)))
             translateZ(.02rem);
}

.drone-shadow::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  filter: blur(2.5px);
}

.drone.no-move,
.drone-shadow.no-move { transition: none; }

.drone__svg { width: 132%; height: 132%; margin: -16%; overflow: visible; }

.drone__arms {
  fill: none;
  stroke: #3B3729;
  stroke-width: 9;
  stroke-linecap: round;
}

.drone__body { fill: #46422F; }
.drone__nose { fill: #F0E4C4; }   /* az irany jele: a legvilagosabb elem a dronon */

.rotor { transform-box: fill-box; transform-origin: 50% 50%; }
.rotor__disc { fill: rgba(255, 255, 255, .07); }
.rotor__hub  { fill: #2C2921; }

.rotor__blades {
  fill: none;
  stroke: #2C2921;
  stroke-width: 3.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* A rotorok CSAK futás közben pörögnek. A nyugalmi képernyőn nulla mozgás
   van (1. szabály); ez a kivétel a ceremónia idejére szól. */
.drone.is-flying .rotor__blades { animation: rotor .26s linear infinite; }
@keyframes rotor { to { transform: rotate(360deg); } }

/* A farmerkalap. Ez teszi a drónt arató robottá. */
.drone__brim  { fill: #EBC66E; }
.drone__band  { fill: #D8822C; }
.drone__crown { fill: #F2DAA1; }

/* --- Füst ---------------------------------------------------------------- *
   Ha a program hibás, a drón megáll és füstölni kezd. Három pamacs, aztán
   vége: nem ciklizik. Szürke, nem piros, és semmi nem rázkódik (8. szabály). */
/* A füst a búzához hasonlóan VISSZAforgatva áll a mezőn (lásd .sprite),
   ezért a képernyőn fölfelé száll, nem a tábla mélyébe. */
.smoke {
  height: calc(var(--cell) * 1.6);
  pointer-events: none;
  /* A drón MAGASSÁGÁBAN áll, nem a földön: különben a saját teste takarná el
     a füstöt. A translateZ a sík normálisa mentén emel, ahogy a drónnál is. */
  transform:
    translate(calc(var(--c) * var(--cell)),
              calc(var(--r) * var(--cell) + var(--cell) - 100%))
    translateZ(calc(var(--cell) * .62))
    rotateX(calc(-1 * var(--tilt)));
}

.puff {
  position: absolute;
  left: 50%;
  bottom: 32%;
  width: 1.1rem; height: 1.1rem;
  margin-left: -.55rem;
  border-radius: 50%;
  background: rgba(216, 216, 216, .55);
  animation: puff 1.5s var(--ease-out) both;
  animation-delay: calc(var(--i) * .26s);
}

@keyframes puff {
  from { opacity: 0;   transform: translate(0, 0) scale(.4); }
  20%  { opacity: .8; }
  to   { opacity: 0;   transform: translate(var(--dx), -3.2rem) scale(2); }
}

.drone.is-broken .drone__body { fill: #3A362A; }

/* A pálya egyetlen ki nem olvasható adata: hány szakasz. A fordulók IRÁNYA
   marad a feladat, azt a szántott mezőkből kell leolvasni. */
.t1-goal {
  margin-top: .7rem;
  font-size: 1.25rem;
  color: var(--ink-2);
  text-align: center;
}

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

.t1-hint {
  margin-top: .35rem;
  min-height: 1.4em;
  font-size: 1.1875rem;
  color: var(--ink-2);
  text-align: center;
}

/* =========================================================================
   Belépés: a lap a borítékból nő ki
   ========================================================================= */

.t1.is-entering .sheet__head { animation: rise 420ms var(--ease-out) 420ms both; }
.t1.is-entering .code        { animation: rise 420ms var(--ease-out) 540ms both; }
.t1.is-entering .farm        { animation: rise 420ms var(--ease-out) 620ms both; }

/* Siker: a lap egyszer, halkan megerősít. Zöld TINTA, nem felület. */
.t1.is-solved .sheet__title { color: var(--ok); transition: color 320ms var(--ease-in-out); }

/* =========================================================================
   A magyarázó
   ========================================================================= */

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

.t1-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;
}

/* Cím, (hiba), GÖRGETHETŐ tartalom, és egy fix láb az „Értem"-mel.
   Enélkül a gomb a hajtás alá csúszik, és egy 13 éves nem fog utána görgetni.

   SZÁNDÉKOSAN FLEX, NEM RÁCS. Rácsnál a sorokat a gyerekelemek SORSZÁMA
   kapja, a hibasáv viszont `hidden`, amíg nincs hiba: ilyenkor eggyel
   kevesebb elem van, minden felcsúszik egy sorral, a görgethető rész a
   zsugorodni nem tudó `auto` sorba kerül, és KILÖKI A GOMBOT a panelből.
   Flexben a szerep az elemhez tartozik, nem a helyéhez.                    */
.t1-intro__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.2rem 2.4rem 1.6rem;
  width: min(94vw, 54rem);
  max-height: min(88vh, 46rem);
}

.t1-intro__panel > .t1-intro__title,
.t1-intro__panel > .t1-intro__error,
.t1-intro__panel > .intro__ok { flex: 0 0 auto; }

.t1-intro__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-right: .4rem;
}

.t1-intro__title {
  font-size: 2.1rem;
  line-height: 1.05;
  text-align: center;
}

/* A hiba a magyarázó TETEJÉN jelenik meg, ugyanazzal az ikonnal, amit a
   blokkon is lát. Nem külön hibaablak: ugyanaz a lap, csak most szól is. */
.t1-intro__error {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
}

.t1-err__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
}

.t1-err__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-2);
}

/* A feladatleírás a képernyő legfontosabb szövege: ezt olvassa el a gyerek
   az első tíz másodpercben. Inkább legyen nagy. */
.t1-intro__body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

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

/* --- A blokkok szótára ---------------------------------------------------- */
.legend {
  display: grid;
  gap: .35rem;
}

/* A szótár blokkjai kisebbek: itt nem fogni kell őket, csak megnézni. */
.legend .blk { min-height: 2.35rem; font-size: 1.0625rem; }

.legend__cat {
  margin-top: .35rem;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.legend__cat--vezerles { color: #B49BE0; }
.legend__cat--mozgas   { color: #8FB8E4; }
.legend__cat--aratas   { color: #A2CD8C; }

.legend__row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: .9rem;
  align-items: center;
}

.legend__row .blk { pointer-events: none; }
.legend__row .blk::after { display: none; }

.legend__help {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--ink-2);
}

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

/* Alacsony képernyőn a magyarázó tömörebb, hogy a blokkszótár utolsó sora
   is a hajtás fölé kerüljön. A BETŰMÉRET marad: azt a felhasználó kérte
   nagyobbra, a levegőt viszont el lehet venni. */
@media (max-height: 760px) {
  .t1-intro__panel {
    max-height: 93vh;
    gap: .6rem;
    padding: 1.5rem 1.9rem 1.1rem;
  }
  .t1-intro__body { gap: .55rem; }
  .t1-intro__title { font-size: 1.85rem; }
  .legend { gap: .22rem; }
  .legend__cat { margin-top: .18rem; }
  .legend .blk { min-height: 2.1rem; }
  .t1-intro__panel .intro__ok { height: 3rem; }
}

@media (max-height: 780px) {
  .t1 { padding: 9.6rem 1.5rem 1.25rem; }
  .sheet { padding: 1.15rem; gap: .8rem; }
  .sheet__title { font-size: 1.9rem; }
  .sheet__sub { font-size: .9375rem; }
  .field { --cell: 4.1rem; }
  .blk { min-height: 2.2rem; font-size: .9375rem; }
  .blk-gap { height: 2.2rem; }
  .run-btn { height: 2.75rem; font-size: 1.15rem; }
}

@media (max-height: 620px) {
  .t1 { padding: 9.6rem 1.25rem 1rem; }
  .sheet__eyebrow, .sheet__sub { display: none; }
  .sheet__title { font-size: 1.6rem; }
  .field { --cell: 4rem; }
  .legend__row { grid-template-columns: 11rem 1fr; }
}

/* Telefon állóban: a két hasáb egymás alá kerül, a pálya felülre, mert
   azt kell nézni építés közben. A cél a gépes kitöltés, ez csak vészháló. */
@media (max-width: 700px) {
  .t1 { padding: 5.5rem .75rem 1rem; }
  .sheet { max-height: none; padding: 1rem; }
  .sheet__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .9rem;
    overflow-y: auto;
  }
  .farm { order: -1; }
  .field { --cell: 3.1rem; }
  .legend__row { grid-template-columns: 1fr; gap: .3rem; }
  .t1-intro__panel { padding: 2rem 1.25rem 1.25rem; width: 94vw; }
  .t1-intro__title { font-size: 1.9rem; }
  .t1-intro__body { font-size: 1.05rem; }
}