/* ---------- alapok ---------- */
:root {
  color-scheme: light dark;

  --paper:       #FBF8F3;
  --surface:     #FFFFFF;
  --surface-alt: #F3EEE5;
  --ink:         #262320;
  --ink-soft:    #6E665C;
  --ink-faint:   #A79E92;
  --line:        #E3DACB;
  --accent:      #8A5A6D;
  --accent-soft: #F4EBEE;

  --correct:     #4C7A5B;
  --present:     #B4832A;
  --absent:      #98908A;
  --tile-text:   #FFFFFF;

  --radius:  14px;
  --radius-s: 9px;
  --shadow:  0 1px 2px rgba(38, 35, 32, .06), 0 8px 24px rgba(38, 35, 32, .06);

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #17151A;
    --surface:     #201D24;
    --surface-alt: #2A2630;
    --ink:         #F0EBE4;
    --ink-soft:    #B0A69C;
    --ink-faint:   #776F68;
    --line:        #322D39;
    --accent:      #C79BAB;
    --accent-soft: #2E2530;

    --correct:     #5C8E6B;
    --present:     #C2913A;
    --absent:      #565058;
    --tile-text:   #FFFFFF;
    --shadow:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --paper: #17151A; --surface: #201D24; --surface-alt: #2A2630;
  --ink: #F0EBE4; --ink-soft: #B0A69C; --ink-faint: #776F68; --line: #322D39;
  --accent: #C79BAB; --accent-soft: #2E2530;
  --correct: #5C8E6B; --present: #C2913A; --absent: #565058; --tile-text: #FFFFFF;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

/* A LAP MAGA NEM GÖRGET — a görgetés az `.app`-on belül van.
   Ez az iOS „húzd le a frissítéshez" mozdulata ellen kell: Safariban a
   dokumentum tetejéről lefelé húzva a lap gumiszerűen elmozdul, a tetején
   megjelenik a pörgettyű, és közben az egész felület összecsúszik. Nálunk
   ez játék közben különösen zavaró: a tábla mozdul el az ujj alól.
   Ha a dokumentum egyáltalán nem görgethető, a mozdulat nem indul el; ami
   görgetni való (napi lap, eredmény), az az `.app` belsejében görget, és az
   `overscroll-behavior` megakadályozza, hogy a görgetés „átterjedjen" a
   lapra a széleken. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  /* iPhone-on a duplakattintás ránagyít, és ez a billentyűzeten meg a
     csempéken pokoli: két gyors koppintás közben elugrik a kép. A
     `manipulation` pontosan a duplakoppintás-nagyítást tiltja — a két
     ujjas nagyítás MEGMARAD, tehát nem rontjuk el az akadálymentességet. */
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.app {
  /* Ez a görgető felület, nem a lap. A `dvh` az iOS-en változó
     böngészősávval is a TÉNYLEGES magasságot adja. */
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
}

/* A képernyők KITÖLTIK a magasságot, de nem zsugorodnak a tartalmuk alá:
   `flex: 1` (azaz `1 1 0`) esetén a flex-doboz inkább összenyomná őket,
   mint hogy görgetni engedjen — pont az, amit el akarunk kerülni. Ezért
   mindegyiknél `1 0 auto` áll a saját szabályában. */

/* ---------- fejléc ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0 10px;
  min-height: 56px;
}
/* A KÉPERNYŐCÍM (4 betűs szó, Ráadás, Ranglista) marad kompakt: ez adat,
   nem márka — és ha nagyobb lenne, két sorba törne, a fejléc megnőne, és
   azt a magasságot a tábla veszítené el (mérve: 62 -> 90 px). */
.topbar__title { font-size: 15px; font-weight: 600; letter-spacing: .02em; margin: 0; }

/* A MÁRKA helyén a CSEMPÉS LOGÓ van, nem felirat — ugyanaz a jel, mint a
   betöltő lapon és az ikonon. Egy feliratot mindig lehet „majdnem
   ugyanolyannak" nézni; egy jelet nem. */
.topbar__title--marka { line-height: 0; }
.topbar__sub { font-size: 13px; color: var(--ink-soft); margin: 0; }
.topbar__spacer { flex: 1; }
/* ---------- gombok: egy rendszer ----------

   Három szint, és mindegyik ugyanúgy viselkedik:
     .btn            elsődleges — kitöltött, ez a következő lépés
     .btn--ghost     másodlagos — keretes, egyenrangú alternatíva
     .btn--quiet     halk — se keret, se kitöltés, csak szöveg
   Plusz két saját alakú, jelentéssel bíró gomb: .chip (rövid választás)
   és .hintbtn (a segítség, ami megmutatja, mit ad és mit kér).

   Ami MINDEGYIKRE igaz, egy helyen: a lenyomás visszajelez, a fókusz
   látszik, és a tapintható méret legalább 44 px. Korábban ez szanaszét
   volt, és több gombon egyáltalán nem volt. */
.btn, .btn--ghost, .btn--quiet, .chip, .hintbtn, .iconbtn, .key, .tab,
.level, .linkbtn, .tile { touch-action: manipulation; }

.btn, .btn--ghost, .btn--quiet, .chip, .hintbtn, .iconbtn, .key, .tab, .level {
  font: inherit; cursor: pointer;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, transform .1s ease;
}
.btn:active, .chip:active, .hintbtn:active, .iconbtn:active,
.key:active, .tab:active { transform: translateY(1px); }
.btn:focus-visible, .btn--quiet:focus-visible, .chip:focus-visible,
.hintbtn:focus-visible, .iconbtn:focus-visible, .key:focus-visible,
.tab:focus-visible, .level:focus-visible, .linkbtn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.iconbtn {
  border: 1px solid var(--line); background: var(--surface);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
}
.iconbtn:hover { background: var(--surface-alt); border-color: var(--ink-faint); }

/* ---------- belépés ---------- */
.gate { flex: 1 0 auto; display: grid; place-items: center; padding: 24px 0 48px; }
.gate__card {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 26px;
}
.gate__mark { font-size: 30px; line-height: 1; margin-bottom: 14px; }
.gate__title { font-family: var(--serif); font-size: 24px; margin: 0 0 6px; font-weight: 400; }
.gate__lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); font-size: 16px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); margin: 16px 0 20px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.btn {
  width: 100%; min-height: 46px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: var(--radius-s);
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px;
}
/* Sötétítés befelé vetett árnyékkal, nem opacitással: az opacitás a
   szöveget is kimosta, és halványabb lett a kontraszt, mint alapban. */
.btn:hover { box-shadow: inset 0 0 0 999px rgb(0 0 0 / .1); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); font-weight: 500;
}
.btn--ghost:hover {
  background: var(--surface-alt); border-color: var(--ink-faint); box-shadow: none;
}
.btn--quiet {
  width: auto; min-height: 44px; padding: 10px 14px;
  background: transparent; border-color: transparent;
  color: var(--ink-soft); font-weight: 500;
}
.btn--quiet:hover { background: var(--surface-alt); color: var(--ink); box-shadow: none; }

.notice { font-size: 13.5px; margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-s); }
.notice--error { background: var(--accent-soft); color: var(--accent); }
.notice--jo { background: var(--surface-alt); color: var(--ink-soft); }
.notice--jo p { margin: 0 0 8px; line-height: 1.5; }
.notice--jo p:last-child { margin-bottom: 0; }
.regok__cim { font-weight: 600; color: var(--ink); }
.regok__apro { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- napi áttekintő ---------- */
.today { flex: 1 0 auto; padding-bottom: 32px; }
.hello { font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 8px 0 2px; }
.hello__date { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; }

.levels { display: flex; flex-direction: column; gap: 12px; }
.level {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .12s, border-color .15s;
}
.level:hover { transform: translateY(-1px); border-color: var(--ink-faint); }
.level:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.level__num {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  background: var(--surface-alt); color: var(--ink-soft);
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
}
.level__body { flex: 1; min-width: 0; }
.level__title { font-weight: 600; font-size: 15.5px; }
.level__meta { font-size: 13px; color: var(--ink-soft); }
.level__state { font-size: 19px; flex: none; width: 24px; text-align: center; }
/* Ugyanaz a jelentés, ugyanaz a szín, mint a statisztika `.jel` jelein. */
.level--won .level__num     { background: var(--correct); color: var(--tile-text); }
.level--lost .level__num    { background: var(--absent);  color: var(--tile-text); }
.level--playing .level__num { background: var(--present); color: var(--tile-text); }
.level--new .level__num     { background: var(--accent-soft); color: var(--accent); }
.level--won .level__state     { color: var(--correct); }
.level--lost .level__state    { color: var(--absent); }
.level--playing .level__state { color: var(--present); }

.daydone {
  margin-top: 22px; padding: 18px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--serif); font-size: 16px; text-align: center;
}
.repeat-note { margin-top: 18px; font-size: 13px; color: var(--ink-faint); text-align: center; }

/* Felszólítás a regisztrációra. Csendes, de látszik: nem ablak, nem takar
   el semmit, és a „Most nem" ugyanolyan elérhető, mint az igen. */
.cta {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.cta__text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.cta__row { display: flex; align-items: center; gap: 14px; }
.cta__row .btn { width: auto; }
.btn--small { padding: 9px 14px; font-size: 14px; }
.gate__back { display: inline-block; margin-bottom: 18px; font-size: 13.5px; }

/* Állandó út a fiókhoz. Csendes, de az első pillanattól látszik. */
.accountline {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; text-align: center; color: var(--ink-faint);
}
.accountline__text { color: var(--ink-faint); }
.accountline__sep { margin: 0 8px; color: var(--line); }

/* ---------- ranglista ---------- */
.rang { list-style: none; margin: 0; padding: 0; }
.rang__sor {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px; border-radius: var(--radius-s); font-size: 14px;
}
.rang__hely {
  width: 24px; flex: none;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.rang__sor:nth-child(odd) { background: var(--surface-alt); }
.rang__sor--enyem { outline: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; }
.rang__nev { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang__pont { font-variant-numeric: tabular-nums; font-weight: 600; }
.rang__pont small { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
.rang__hivo { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 12px; line-height: 1.5; }
.rang__db { font-size: 12px; color: var(--ink-faint); }

/* ---------- magyarázatok a statisztika lapon ---------- */
.szakasz {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.magyarazat { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 4px; }
.magyarazat--apro { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 12px; }
.stat__note { font-size: 11px; color: var(--ink-faint); margin-top: 2px; line-height: 1.3; }

/* ---------- eredmények: két oldal, fülekkel ---------- */
.eredmeny { padding-bottom: 24px; }
#screen-stats { flex: 1 0 auto; padding-bottom: 32px; }
.tabs {
  display: flex; gap: 6px; margin: 4px 0 20px;
  border-bottom: 1px solid var(--line);
}
.tab {
  background: transparent; border: 0; padding: 10px 4px 12px;
  font-size: 14px; font-weight: 600; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab--aktiv { color: var(--accent); border-bottom-color: var(--accent); }
.tab + .tab { margin-left: 18px; }

/* napi előzmény */
.napok { list-style: none; margin: 0; padding: 0; }
.nap {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-s); font-size: 13.5px;
}
.nap:nth-child(odd) { background: var(--surface-alt); }
.nap--ures { color: var(--ink-faint); background: none; }
.nap__datum { flex: 1; color: var(--ink-soft); }
.nap__jelek { display: flex; gap: 4px; }
.nap__pont { width: 62px; text-align: right; color: var(--ink-faint); font-size: 12px; }
.jel {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--tile-text);
}
.jel--won { background: var(--correct); }
.jel--lost { background: var(--absent); }
.jel--playing { background: var(--present); }
.jel--nincs { background: transparent; color: var(--ink-faint); border: 1px dashed var(--line); }

/* átlagos tippszám */
.atlag { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 4px; }
.atlag__egy { font-size: 13.5px; color: var(--ink-soft); }
.atlag__egy b { color: var(--ink); font-weight: 600; }

/* ---------- játék ---------- */
.game { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 10px; }
/* A tábla és a MELLETTE lévő segítség-sáv egy sorban: a csoport együtt
   kerül középre. Így az oldalsáv nem lóg rá a csempékre, és nem is vesz el
   egyetlen képpontot sem a tábla MAGASSÁGÁBÓL. */
.board {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 6px 0 14px;
}
.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--len, 5), var(--cell, 56px));
}
.tile {
  /* A magasság RÖGZÍTETT, nem a tartalomból jön. Korábban `aspect-ratio: 1`
     adta, magasság nélkül — és amint a cella kisebb lett a betű sormagas-
     ságánál (alacsony kijelzőn 38 px cella, 41 px sormagasság), a beírt betű
     feltolta a sort. Ezért is méretezzük a betűt a cellából, ne a képernyő
     szélességéből: így minden cellaméretnél belefér. */
  height: var(--cell, 56px); display: grid; place-items: center; overflow: hidden;
  border: 2px solid var(--line); border-radius: 8px;
  font-size: calc(var(--cell, 56px) * .5); line-height: 1;
  font-weight: 700; text-transform: uppercase;
  background: var(--surface); color: var(--ink);
  /* A szín NEM animálódik: a fordulás felénél cseréljük, amikor a csempe
     élével áll, tehát a váltás nem látszik. Az áttűnés itt elárulná
     az eredményt a fordulás előtt. */
  transition: border-color .12s ease;
}
.tile--filled { border-color: var(--ink-faint); }
.tile--pop { animation: pop .12s ease-out; }
.tile--correct { background: var(--correct); border-color: var(--correct); color: var(--tile-text); }
.tile--present { background: var(--present); border-color: var(--present); color: var(--tile-text); }
.tile--absent  { background: var(--absent);  border-color: var(--absent);  color: var(--tile-text); }
.row--invalid { animation: shake .4s; }

@keyframes pop { from { transform: scale(.9); } to { transform: scale(1); } }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}
@keyframes flip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
/* A hosszt az app.js adja meg (--flip), hogy egy helyen legyen leírva. */
.tile--flip { animation: flip var(--flip, 560ms) ease both; }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile--pop, .tile--flip, .row--invalid, .level {
    animation: none !important; transition: none !important;
  }
}

/* ---------- billentyűzet ---------- */
.keyboard { display: flex; flex-direction: column; gap: 7px; padding-bottom: 12px; }
.krow { display: flex; gap: 5px; justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; height: 58px; padding: 0 2px;
  border: 0; border-radius: 8px; background: var(--surface-alt); color: var(--ink);
  font-size: 19px; font-weight: 600; text-transform: uppercase;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.key:active { transform: translateY(1px); }
.key--wide { flex: 1.7 1 0; font-size: 12.5px; }
.key--correct { background: var(--correct); color: var(--tile-text); }
.key--present { background: var(--present); color: var(--tile-text); }
.key--absent  { background: var(--absent);  color: var(--tile-text); opacity: .75; }
.krow--accents .key { height: 46px; font-size: 17px; }

/* ---------- felugró rétegek ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 17, 22, .5);
  display: grid; place-items: end center;
  padding: 16px;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet__card {
  width: 100%; max-width: 488px;
  background: var(--surface); border-radius: 20px 20px var(--radius) var(--radius);
  padding: 28px 24px 22px; box-shadow: var(--shadow);
  animation: rise .28s cubic-bezier(.2, .8, .3, 1);
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
}
@keyframes rise { from { transform: translateY(22px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 560px) { .sheet { place-items: center; } .sheet__card { border-radius: var(--radius); } }

.result__head { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.result__word { font-family: var(--serif); font-size: 30px; margin: 4px 0 20px; letter-spacing: .04em; }
.quote {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; margin: 0 0 20px;
}
.quote__text { font-family: var(--serif); font-size: 18.5px; line-height: 1.55; margin: 0; }
.quote__source { display: block; margin-top: 9px; font-size: 13px; color: var(--ink-soft); font-style: normal; }
.sheet__actions { display: flex; gap: 10px; }
.sheet__actions .btn { flex: 1; }

/* ---------- statisztika ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 22px; }
.stat { text-align: center; background: var(--surface-alt); border-radius: var(--radius-s); padding: 12px 6px; }
.stat__value { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat__label { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.dist { display: flex; flex-direction: column; gap: 5px; }
.dist__row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.dist__n { width: 12px; color: var(--ink-soft); }
.dist__bar { height: 20px; border-radius: 4px; background: var(--accent); min-width: 22px;
             color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 6px; }
.dist__bar--empty { background: var(--surface-alt); color: var(--ink-faint); }
.sheet__title { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 16px; }

.toast {
  position: fixed; left: 50%; top: 66px; transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--ink); color: var(--paper);
  padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  z-index: 60; animation: fade .15s ease; pointer-events: none;
  /* Korábban `nowrap` volt, és a hosszabb üzenet kilógott a képernyőről.
     Törhet több sorba; a pirulaforma helyett ezért lekerekített doboz. */
  text-align: center; line-height: 1.45; border-radius: 14px;
}

/* ---------- fiókválasztó és regisztráció ---------- */
.accounts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.account {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 7px 15px; font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.account:hover { background: var(--surface-alt); }
.account[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field__hint { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; }
.gate__switch { font-size: 13.5px; color: var(--ink-soft); text-align: center; margin: 18px 0 0; }
.linkbtn {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- ikonok, képernyőolvasó ---------- */
.iconbtn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- súgó ---------- */
.help__lead { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 20px; }
.help__row { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.help__tiles { display: flex; gap: 4px; flex: none; }
.help__tile {
  width: 30px; height: 30px; border-radius: 6px; border: 2px solid var(--line);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--surface); color: var(--ink);
}
.help__tile--correct { background: var(--correct); border-color: var(--correct); color: var(--tile-text); }
.help__tile--present { background: var(--present); border-color: var(--present); color: var(--tile-text); }
.help__tile--absent  { background: var(--absent);  border-color: var(--absent);  color: var(--tile-text); }
.help__text { font-size: 14px; line-height: 1.45; }
.help__rules { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.help__rules li { font-size: 14px; margin-bottom: 9px; line-height: 1.45; }
.help__rules ul { margin: 0; padding-left: 20px; }
.help__rules b { font-weight: 600; }
.daydone__timer {
  display: inline-block; margin-top: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- ráadás ---------- */
.raadas {
  margin: 22px 0 0; padding: 14px; border-radius: var(--radius-m);
  border: 1px solid var(--line); background: var(--surface-alt);
}
.raadas--kiemelt { border-color: var(--accent); background: var(--surface); }
.raadas__cim {
  margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.raadas--kiemelt .raadas__cim { color: var(--accent); }
.raadas__alcim { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
/* A ráadás választói ugyanazt a jelet viselik, mint a napi kártyák: a szám
   egy kis csempén. Így ránézésre látszik, hogy ugyanaz a játék — a korábbi
   csupasz keretes gomboknak semmi közük nem volt a táblához. */
/* RÁCS, nem egy sor. Négy gomb egy sorba erőltetve a felirat kilóg a
   gombból, ha a rendszer betűje szélesebb a miénknél (Androidon pont ez
   történt). Az `auto-fit` + `minmax` maga dönti el, hány fér ki: keskeny
   telefonon 2x2, szélesebb lapon egy sorban mind a négy — és a felirat
   sehol nem lóg ki, mert a hasáb sosem lesz szűkebb 120 px-nél. */
.raadas__gombok {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.chip {
  min-width: 0; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 500;
  white-space: nowrap;      /* a „4 betűs" ne törjön két sorba */
}
.chip:hover { background: var(--surface-alt); border-color: var(--ink-faint); }
.chip__num {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 700;
}
.chip--vak { color: var(--ink-soft); }
/* Ha a napi három megvan, a ráadás kap hangsúlyt — a csempe is zöldre. */
.raadas--kiemelt .chip { border-color: var(--accent); }
.raadas--kiemelt .chip__num { background: var(--correct); color: var(--tile-text); }
.raadas__lab { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.result__jegyzet {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint);
}

/* ---------- segítség ---------- */
.sugo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 0 6px;
}
.sugo__cimke {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.sugo__cellak { display: flex; gap: 4px; }
.sugo__cella {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px dashed var(--line);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.sugo__cella--jel {
  background: var(--correct); border-color: var(--correct); color: var(--tile-text);
}
/* Az oldalsáv. Ha nincs benne semmi (felhasznált segítség, vége a
   játszmának), eltűnik — enélkül a tábla oldalra csúszna a semmiért. */
.sugo__oldal { flex: none; display: flex; align-items: center; }
.sugo__oldal:empty { display: none; }

/* A SEGÍTSÉG GOMBJA: álló pirula a tábla mellett.

   Három dolgot mond, ugyanabban a nyelvben, amit a táblán is látsz:
     * fent egy üres, szaggatott csempe — ezt tölti ki helyetted,
     * alatta állva a szó, ritkított kis kapitálissal,
     * legalul, egy halk vonal alatt, az ára.
   Az álló forma nem dísz: oldalt csak így fér ki a szó, és így lesz a
   gombból a tábla társa, nem egy odaejtett pirula. */
.hintbtn {
  width: 40px; padding: 9px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow);
}
.hintbtn:hover { background: var(--surface-alt); border-color: var(--ink-faint); }
.hintbtn:active { transform: scale(.96); }
.hintbtn__tile {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  border: 1.5px dashed var(--ink-faint);
  transition: border-color .16s ease, background .16s ease;
}
/* Ráérintésre a csempe „megtelik": ez az, amit a gomb ígér. */
.hintbtn:hover .hintbtn__tile, .hintbtn:active .hintbtn__tile {
  border-style: solid; border-color: var(--correct); background: var(--correct);
}
/* Az álló felirat. A betűk EGYENESEN állnak egymás alatt (`upright`), nem
   elfordítva: így nem kell hozzá fejet fordítani — egy keskeny sávban ez az
   egyetlen olvasható szedés. A `letter-spacing` itt a betűk közti
   FÜGGŐLEGES rést állítja, ezért kicsi. */
.hintbtn__label, .hintbtn__cost {
  writing-mode: vertical-rl; text-orientation: upright;
  text-transform: uppercase; white-space: nowrap; letter-spacing: .02em;
}
.hintbtn__label {
  font-size: 11px; font-weight: 700; color: var(--ink);
}
.hintbtn__cost {
  font-size: 9.5px; color: var(--ink-faint);
  padding-top: 7px; border-top: 1px solid var(--line);
}
.hintbtn:hover .hintbtn__cost { border-top-color: var(--ink-faint); }

/* A kérdés a felugró lapon: a döntés ára SZÁMMAL, nem csak jelzésként. */
.sugo__kerdes {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  margin: 4px 0 14px;
}
.sugo__ar { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.sugo__ar b { color: var(--ink); font-weight: 600; }
.sugo__ar--halk { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 20px; }

/* ---------- nyitóképernyő ---------- */
/* A csempék a játék saját mozdulatával fordulnak zöldre — ugyanaz a nyelv,
   amit a táblán is látsz. A hosszakat az app.js is ismeri (SPLASH_MIN):
   annyi ideig marad kint akkor is, ha az adat hamarabb megjön, különben
   félbevágott animációt látnál. */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center;
  background: var(--paper);
  transition: opacity .42s ease, transform .42s ease;
  cursor: pointer;              /* koppintásra továbbenged */
}
.splash--el { opacity: 0; transform: scale(1.03); pointer-events: none; }

/* ---------- a logó ----------

   EGY komponens, két méretben: a betöltő lapon nagyban, fordulós
   animációval, a fejlécben kicsiben, mozdulatlanul. A név csempékből áll,
   mint a tábla — SZÓ fölött MESTER —, tehát a logó ugyanaz a jel mindenhol,
   nem egy külön rajz. A méretet egyetlen változó adja. */
.logo {
  display: inline-flex; flex-direction: column;
  gap: var(--logo-res); align-items: center;
}
.logo__row { display: flex; gap: var(--logo-res); }
.logo__tile {
  width: var(--logo-cella); height: var(--logo-cella);
  border-radius: calc(var(--logo-cella) * .19);
  display: grid; place-items: center;
  font-size: calc(var(--logo-cella) * .5); font-weight: 700; line-height: 1;
  border: var(--logo-vonal) solid var(--line);
  background: var(--surface); color: var(--ink);
}

/* A betöltő lapon: a leghosszabb sor hat csempe (MESTER), ezért a méret
   alkalmazkodik — 360 px-en is elfér, nagy kijelzőn nem hízik el. */
.logo--betolto {
  --logo-cella: min(52px, calc((100vw - 40px) / 6 - 8px));
  --logo-res: 8px;
  --logo-vonal: 2px;
}
.logo--betolto .logo__tile {
  /* EGY BETŰ ÁTFORDULÁSA 1,4 s. Ez az az egy szám, ami a fordulás
     sebességét adja — a menetrend hosszabbítása ezen nem segít, mert a szem
     a MOZGÁS tempóját látja, nem azt, meddig marad kint a lap. A következő
     csempe 160 ms-onként indul. */
  animation: splash-csempe 1.4s ease both;
  animation-delay: calc(var(--i) * 160ms);
}

/* A fejlécben: kicsi, kész, zöld — a megfejtett tábla állapotában. Nem
   animál, mert ott már nem történik semmi, csak azonosít. */
.logo--fejlec {
  --logo-cella: 16px;
  --logo-res: 2.5px;
  --logo-vonal: 1px;
  flex: none;
}
.logo--fejlec .logo__tile {
  background: var(--correct); border-color: var(--correct);
  color: var(--tile-text);
  font-size: 9.5px;
}
@keyframes splash-csempe {
  0%   { opacity: 0; transform: rotateX(0) translateY(8px); }
  45%  { opacity: 1; transform: rotateX(90deg) translateY(0); }
  /* A szín a fordulás közepén vált, amikor a csempe élével áll — ugyanúgy,
     ahogy a játékban. */
  46%  { background: var(--correct); border-color: var(--correct); color: var(--tile-text); }
  100% { opacity: 1; transform: rotateX(0);
         background: var(--correct); border-color: var(--correct); color: var(--tile-text); }
}
.gate__mottó {
  margin: -10px 0 22px; font-family: var(--serif); font-size: 15px;
  line-height: 1.5; color: var(--ink-soft);
}
.splash__lead {
  margin: 20px 0 0; font-family: var(--serif); font-size: 15.5px;
  color: var(--ink-soft); text-align: center;
  animation: fade .7s ease both; animation-delay: 1800ms;
}

/* Az app a nyitóképernyő után nem csak „ott terem": felúszik alá. */
/* A halk súgás, hogy nem kell kivárni. Csak a mottó UTÁN jelenik meg, hogy
   ne vele versenyezzen — és marad ideje látszani, mielőtt a lap elmegy. */
.splash__tipp {
  margin: 26px 0 0; font-size: 12px; letter-spacing: .04em;
  color: var(--ink-faint); text-align: center;
  animation: fade .6s ease both; animation-delay: 2600ms;
}

.app--belep { animation: app-belep .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes app-belep {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo--betolto .logo__tile, .splash__lead, .splash__tipp, .app--belep {
    animation: none !important;
  }
  .splash { transition: none !important; }
  /* Mozgás nélkül is a KÉSZ állapot látszik: a név megfejtve. */
  .logo--betolto .logo__tile {
    background: var(--correct); border-color: var(--correct); color: var(--tile-text);
  }
}

/* ---------- személyes üzenet ---------- */
.sheet__card--uzenet { text-align: center; }
.uzenet__kep {
  /* Álló fotó ne tolja le a szöveget a képernyőről: a lap magától is
     tekerhető, de a kép ne foglalja el az egészet. */
  display: block; width: 100%; height: auto; max-height: 45dvh;
  margin: -4px 0 18px;
  border-radius: var(--radius-m); object-fit: cover;
}
.uzenet__cim {
  margin: 0 0 10px; font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.3; color: var(--ink);
}
.uzenet__szoveg { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.uzenet__alairas {
  margin: 0; font-family: var(--serif); font-size: 15px; color: var(--ink-faint);
}
.uzenet__szamlalo {
  margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--ink-faint);
}
.uzenet__szamlalo p { margin: 0; }
.uzenet__szamlalo b { color: var(--ink-soft); font-weight: 600; }

/* ---------- gépen: a szélesség kapjon tartalmat ----------

   Egy lapon KÉTFÉLE igény van, és ezt fontos nem összemosni:

   * A TÁBLA és a BILLENTYŰZET szándékosan marad szűk és középen. Ott a szem
     fut a legkevesebbet, a betűgombok pedig egy 1600 px-re nyújtott sorban
     nevetségesen szét is állnának. (A Wordle is így néz ki gépen.)
   * A NAPI LAP viszont lista, és 520 px-en egy szalag: a három szó gépen
     kényelmesen KIFÉR EGYMÁS MELLÉ, és így egy pillantás az egész nap.

   Ezért a `.app` szélesebb lesz, de amit nincs mivel kitölteni (játék,
   belépés, eredmény), az középen marad a régi szélességben. Nyújtott üres
   sorokkal nem „használjuk ki" a helyet, csak elrontanánk az olvasást. */
@media (min-width: 820px) {
  .app { max-width: 880px; padding: 0 24px; }

  /* Ami szűk marad. A `width: 100%` kell: flex-oszlopban a `margin: auto`
     különben nem tud középre húzni. */
  .game, .gate__inner, .eredmeny { width: 100%; max-width: 540px; margin-inline: auto; }

  /* A nap köszöntése kapjon akkora hangot, amekkora egy nagy kijelzőn illik. */
  .hello { font-size: 34px; margin-top: 18px; }
  .hello__date { font-size: 15px; margin-bottom: 26px; }

  /* A három szó egy sorban, kártyaként: a szám fent, alatta a felirat.
     A magasság közös (`stretch`), hogy a három kártya egy blokknak
     látszódjon akkor is, ha az egyik feliratában van egy sorral több. */
  .levels { flex-direction: row; align-items: stretch; gap: 16px; }
  .level {
    flex: 1 1 0; flex-direction: column; align-items: flex-start;
    gap: 14px; padding: 22px; min-height: 150px; position: relative;
  }
  .level:hover { transform: translateY(-2px); }
  .level__num { width: 54px; height: 54px; border-radius: 15px; font-size: 22px; }
  .level__body { flex: none; }
  .level__title { font-size: 17px; }
  .level__meta { font-size: 13.5px; }
  /* Az állapotjel a kártya jobb felső sarkába kerül: a sor végén lógna a
     semmiben, itt viszont a kártya sarkára mutat, mint egy pecsét. */
  .level__state { position: absolute; top: 18px; right: 20px; font-size: 22px; width: auto; }

  /* A ráadás a három kártya alatt, teljes szélességben — a négy választó
     így egy nyugodt sorban áll, nem tördelve. */
  .raadas { margin-top: 26px; padding: 18px 20px; }
  .raadas__cim { font-size: 16px; }
  .raadas__gombok { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .chip { min-height: 50px; }

  .daydone { margin-top: 26px; }
  .cta { margin-top: 26px; padding: 18px 20px; }
  .accountline { margin-top: 30px; padding-top: 20px; }

  /* Egy rövid lap ne a kijelző tetején kuporogjon, alatta fél méter
     üresen: magas ablakban a nap a képernyő közepére kerül — kicsit a
     közép FÖLÉ, mert az optikai közép ott van. Ha a tartalom megnő (kész
     nap, felszólítás, üzenet), a doboz vele nő, tehát semmi nem vágódik
     le: a `.app` maga is nyúlik, nem fix magasságú. */
  @media (min-height: 720px) {
    #screen-today {
      display: flex; flex-direction: column; justify-content: center;
      padding-bottom: 90px;
    }
  }
}