/* ==================================================================
   KÉRDÉSEK KETTŐNKNEK – stíluslap

   Felépítés:
     1. Alapváltozók (színek, betűk, méretek) – itt állíts, ha hangolsz
     2. Alapok és segédosztályok
     3. Rombusz-motívum (a kategóriák jele)
     4. Kezdőoldal
     5. Várakozás
     6. Játékfelület
     7. Kártya
     8. Alsó gombsáv
     9. Fiókok (napló, beállítások)
    10. Apróságok (értesítés, offline jelzés)
    11. Nagyobb képernyők
    12. Akadálymentesség

   Mobile first: az alapértelmezett szabályok telefonra szólnak
   (390×844 a kiindulópont), a nagyobb képernyők a fájl végén jönnek.
   ================================================================== */


/* ==================================================================
   1. ALAPVÁLTOZÓK
   ================================================================== */

:root {
  /* --- Alapszínek: törtfehér háttér, meleg sötétbarna szöveg ------ */
  --bg:            #FAF7F2;
  --bg-raised:     #FFFDFA;
  --bg-sunken:     #F2EBE1;
  --ink:           #2E2A26;
  --ink-soft:      #7A6E62;
  --ink-faint:     #A2958A;
  --line:          #E6DED2;
  --line-soft:     #F0E8DD;

  /* --- Kategóriaszínek ---
     Ezeket futásidőben a szerver adja (az adatbázisból), a JavaScript
     írja felül. Az itteni értékek csak addig látszanak, amíg az első
     válasz meg nem érkezik. */
  --cat-from:      #EFB894;
  --cat-to:        #C8724C;
  --cat-ink:       #A85433;

  /* --- Betűk --- */
  --font-serif:    "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:     Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Térközök --- */
  --gap-xs:        6px;
  --gap-sm:        10px;
  --gap:           16px;
  --gap-lg:        24px;
  --gap-xl:        36px;

  /* --- Formák --- */
  --radius-sm:     10px;
  --radius:        18px;
  --radius-lg:     26px;
  --radius-pill:   999px;

  /* --- Árnyékok: melegek, nem szürkék --- */
  --shadow-sm:     0 2px 8px rgba(88, 62, 40, .06);
  --shadow:        0 10px 30px rgba(88, 62, 40, .09);
  --shadow-lg:     0 22px 56px rgba(88, 62, 40, .14);

  /* --- Mozgás --- */
  --ease:          cubic-bezier(.22, .61, .36, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:      160ms;
  --dur:           280ms;
  --dur-slow:      520ms;

  /* --- Biztonságos területek (notch, home indicator) --- */
  --safe-t:        env(safe-area-inset-top, 0px);
  --safe-b:        env(safe-area-inset-bottom, 0px);
  --safe-l:        env(safe-area-inset-left, 0px);
  --safe-r:        env(safe-area-inset-right, 0px);

  /* Legkisebb érinthető méret – ez alá semmi ne menjen */
  --touch:         44px;

  color-scheme: light dark;
}

/* --- Sötét mód: meleg tónusú, nem kékes-hideg -------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #17130F;
    --bg-raised:   #201B16;
    --bg-sunken:   #2A231C;
    --ink:         #EDE4D9;
    --ink-soft:    #A2958A;
    --ink-faint:   #7E7368;
    --line:        #352C24;
    --line-soft:   #2C2520;

    --shadow-sm:   0 2px 8px rgba(0, 0, 0, .3);
    --shadow:      0 10px 30px rgba(0, 0, 0, .4);
    --shadow-lg:   0 22px 56px rgba(0, 0, 0, .5);
  }
}


/* ==================================================================
   2. ALAPOK
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/*
 * A `hidden` attribútum mindig nyerjen.
 *
 * A böngésző alapértelmezése szerint a hidden `display: none`-t jelent,
 * de ezt bármelyik saját `display` szabályunk felülírja – például egy
 * `.stack { display: flex }`. Emiatt a rejtettnek szánt blokkok
 * (csatlakozási mező, fiókok) mégis látszanának. Ez az egy sor
 * megelőzi az összes ilyen esetet.
 */
[hidden] { display: none !important; }

html {
  /* A böngésző ne nagyítson magától fekvő tájolásban */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;          /* a mobil címsor ne vágja el a layoutot */
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;

  /* Dupla koppintásos nagyítás kikapcsolása a játékfelületen */
  touch-action: manipulation;

  /* A felület nem szövegdokumentum: ne lehessen véletlenül kijelölni.
     A kérdés szövegére ezt később külön visszakapcsoljuk. */
  -webkit-user-select: none;
  user-select: none;

  /* iOS-en ne villanjon szürke doboz koppintáskor */
  -webkit-tap-highlight-color: transparent;

  overscroll-behavior-y: none;
}

/* A nézetek egymást váltják; mindig csak egy látszik */
.view {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.view[hidden] { display: none; }

.wrap {
  width: 100%;
  margin: 0 auto;
  padding:
    calc(var(--safe-t) + var(--gap-lg))
    calc(var(--safe-r) + var(--gap-lg))
    calc(var(--safe-b) + var(--gap-lg))
    calc(var(--safe-l) + var(--gap-lg));
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap--narrow { max-width: 26rem; }

.stack        { display: flex; flex-direction: column; gap: var(--gap); }
.stack--tight { gap: var(--gap-sm); }

/* Csak képernyőolvasónak */
.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;
}


/* --- Gombok ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  min-height: var(--touch);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 500 .95rem/1 var(--font-sans);
  letter-spacing: .02em;
  cursor: pointer;
  text-align: center;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.btn:active { transform: scale(.975); }

.btn:focus-visible {
  outline: 2px solid var(--cat-ink);
  outline-offset: 3px;
}

.btn[disabled] {
  opacity: .42;
  cursor: default;
  pointer-events: none;
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--bg-raised); }

.btn--quiet {
  background: transparent;
  color: var(--ink-soft);
  min-height: var(--touch);
  padding: 12px 20px;
  font-size: .88rem;
}
.btn--quiet:hover { color: var(--ink); }

/* Kategóriaszínű gomb – a kártya alatt használjuk */
.btn--cat {
  background: var(--cat-ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--cat:hover { box-shadow: var(--shadow); }


/* --- Űrlapmezők -------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--gap-xs); }

.field__label {
  font: 500 .72rem/1 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field__input {
  width: 100%;
  min-height: var(--touch);
  padding: 13px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-sans);

  /* A beírás legyen kijelölhető, ellentétben a felület többi részével */
  -webkit-user-select: text;
  user-select: text;

  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.field__input::placeholder { color: var(--ink-faint); }

.field__input:focus {
  outline: none;
  border-color: var(--cat-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-ink) 14%, transparent);
}

/* A szobakód mezője: nagy, ritkított, csupa nagybetű */
.field__input--code {
  font: 500 1.5rem/1.2 var(--font-sans);
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
  padding-left: calc(16px + .28em);
}

.field__hint {
  font-size: .78rem;
  color: var(--ink-faint);
}

.fineprint {
  margin: var(--gap-lg) 0 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}


/* ==================================================================
   3. ROMBUSZ-MOTÍVUM

   Minden kategória egy álló rombuszban hordozza a számát, a rombusz
   három csúcsán apró pontokkal. A számot NEM forgatjuk vissza a
   szülővel: a rombuszt egy elforgatott négyzet adja, a szám pedig
   ellenforgatással áll egyenesen.
   ================================================================== */

.diamond {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1.5px solid var(--cat-ink);
  border-radius: 7px;
  transform: rotate(45deg);
  flex: none;
}

.diamond__num {
  transform: rotate(-45deg);
  font: 400 1.35rem/1 var(--font-serif);
  color: var(--cat-ink);
  /* Egyforma magassagu szamjegyek – lasd a .code__value-nal irtakat. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.diamond__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cat-ink);
}

/*
 * A három pont a rombusz FELSŐ, BAL és JOBB CSÚCSÁN.
 *
 * Figyelem, ez trükkös: a rombuszt egy 45 fokkal elforgatott négyzet
 * adja, ezért a pontokat a négyzet SARKAIRA kell tenni – az elforgatás
 * viszi őket a rombusz csúcsaiba. Ha az élek közepére tennénk (top: 50%),
 * a forgatás után az átlós élek közepén ülnének, nem a csúcsokon.
 *
 *   négyzet bal-felső sarka   ->  rombusz felső csúcsa
 *   négyzet bal-alsó sarka    ->  rombusz bal csúcsa
 *   négyzet jobb-felső sarka  ->  rombusz jobb csúcsa
 */
.diamond__dot--t { top: -2.5px;    left: -2.5px; }
.diamond__dot--l { bottom: -2.5px; left: -2.5px; }
.diamond__dot--r { top: -2.5px;    right: -2.5px; }

/* A nyitóoldal és a várakozás nagyobb, üres rombusza */
.diamond--brand {
  width: 66px;
  height: 66px;
  border-width: 1.5px;
}


/* ==================================================================
   4. KEZDŐOLDAL
   ================================================================== */

.brand {
  text-align: center;
  margin-bottom: var(--gap-xl);
}

.brand .diamond { margin-bottom: var(--gap-lg); }

.brand__title {
  margin: 0 0 var(--gap-sm);
  font: 400 2.1rem/1.15 var(--font-serif);
  letter-spacing: -.015em;
}

.brand__sub {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-soft);
}


/* ==================================================================
   5. VÁRAKOZÁS A PÁRRA
   ================================================================== */

.waiting { text-align: center; }

.waiting__pulse {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-lg);
  animation: breathe 3.6s var(--ease) infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.07); opacity: .72; }
}

.waiting__title {
  margin: 0 0 var(--gap-xs);
  font: 400 1.6rem/1.25 var(--font-serif);
}

.waiting__sub {
  margin: 0 0 var(--gap-lg);
  font-size: .9rem;
  color: var(--ink-soft);
}

/* A nagy, koppintható szobakód */
.code {
  display: block;
  width: 100%;
  padding: var(--gap-lg) var(--gap);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.code:active { transform: scale(.985); }
.code:hover  { box-shadow: var(--shadow); }

.code__value {
  display: block;
  font: 400 2.6rem/1 var(--font-serif);
  letter-spacing: .18em;
  /* A ritkítás jobbra tolja a szöveget; ennyivel hozzuk vissza középre */
  text-indent: .18em;
  color: var(--ink);

  /*
   * Egyenletes magasságú, azonos szélességű számjegyek.
   *
   * A Playfair Display alapból régies (mediaeval) számokat rajzol, ahol
   * a 3, 4, 7, 9 a sorvonal alá lóg, a 6 és a 8 pedig fölé nyúlik. Egy
   * díszes szövegben ez szép, de egy telefonban felolvasandó kódnál
   * kifejezetten zavaró – a betűk és számok egy hullámvonalon táncolnak.
   * A `lining-nums` egyforma magasra hozza őket, a `tabular-nums` pedig
   * egyforma szélesre, hogy a hat karakter rendezett rácsban álljon.
   */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.code__hint {
  display: block;
  margin-top: var(--gap);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.waiting__actions { margin-top: var(--gap-lg); }


/* ==================================================================
   6. JÁTÉKFELÜLET
   ================================================================== */

.view--game {
  position: relative;
  overflow: hidden;
  padding:
    var(--safe-t)
    var(--safe-r)
    var(--safe-b)
    var(--safe-l);
}

/* A kategória színe ezen a rétegen úszik át, a jobb felső sarokból */
.ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 100% 0%,
      color-mix(in srgb, var(--cat-from) 46%, transparent) 0%,
      color-mix(in srgb, var(--cat-to) 16%, transparent) 42%,
      transparent 72%
    );
  transition: background var(--dur-slow) var(--ease);
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .ambient {
    background:
      radial-gradient(
        120% 90% at 100% 0%,
        color-mix(in srgb, var(--cat-to) 40%, transparent) 0%,
        color-mix(in srgb, var(--cat-to) 12%, transparent) 45%,
        transparent 74%
      );
  }
}


/* --- Felső sáv --------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap);
}

.topbar__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.topbar__btn:hover  { background: var(--bg-raised); color: var(--ink); }
.topbar__btn:active { transform: scale(.94); }

.topbar__badge {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  font: 600 .64rem/1 var(--font-sans);
}

.topbar__code {
  padding: 9px 16px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font: 500 .78rem/1 var(--font-sans);
  letter-spacing: .18em;
  text-indent: .18em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.topbar__code:hover { border-color: var(--cat-ink); color: var(--ink); }


/* --- Játékossáv -------------------------------------------------- */

.players {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--gap-xs) var(--gap) var(--gap-sm);
  min-height: 34px;
}

.player {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 .8rem/1 var(--font-sans);
  letter-spacing: .04em;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
  max-width: 42vw;
}

.player__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Akin a sor van, kiemelve */
.player.is-turn {
  color: var(--ink);
}

.player__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.player.is-turn .player__dot {
  background: var(--cat-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-ink) 20%, transparent);
}
/* Aki épp nincs vonalban */
.player.is-away .player__name { opacity: .5; }
.player.is-away .player__dot  { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-faint); }

.players__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}


/* --- Színpad (kocka / kártya) ------------------------------------ */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap) var(--gap-lg);
  min-height: 0;    /* hogy a flexbox ne nyomja ki a gombokat */
}

.stage__hint {
  margin: var(--gap-lg) 0 0;
  text-align: center;
  font-size: .86rem;
  color: var(--ink-soft);
  min-height: 1.4em;
}

.dice-zone,
.card-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dice-zone[hidden], .card-zone[hidden] { display: none; }

/* --- A dobókocka ------------------------------------------------
   Valódi test: hat lapot helyezünk el a térben, és a kocka tényleg
   arra az oldalára fordul, amit a szerver kidobott.

   A méretet EGY helyen, a --dice változóban állítjuk – a lapok
   kitolása a kocka közepétől ennek a fele (--dice-half). Ha átméretezed,
   csak ezt a két értéket kell együtt mozgatni.
   ---------------------------------------------------------------- */

.dice {
  --dice: 104px;
  --dice-half: 52px;

  width: var(--dice);
  height: var(--dice);

  /* A térhatás forrása. Minél kisebb, annál erősebb a perspektíva. */
  perspective: 720px;

  cursor: pointer;
  flex: none;

  /* A koppintás ne jelöljön ki semmit, és ne hozzon elő menüt */
  -webkit-touch-callout: none;
}

.dice[aria-disabled="true"] { cursor: default; }

/* Ez a réteg forog – a JavaScript ennek írja a transform-ját */
.dice__cube {
  position: relative;
  width: 100%;
  height: 100%;

  /* Enélkül a lapok laposan egymásra lapulnának, nem testet alkotnának */
  transform-style: preserve-3d;

  will-change: transform;
}

.dice__face {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;
  background:
    linear-gradient(
      152deg,
      color-mix(in srgb, var(--cat-from) 22%, var(--bg-raised)) 0%,
      var(--bg-raised) 58%
    );
  border: 1px solid var(--line);

  /*
   * A hátrafelé néző lapokat elrejtjük.
   *
   * Enélkül a kocka üvegtestként viselkedne: átlátnánk rajta, és a
   * túloldali lapok tükörképe zavarna bele a képbe.
   */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* A hat lap elhelyezése. A szemköztiek összege mindig hét. */
.dice__face--1 { transform: translateZ(var(--dice-half)); }
.dice__face--6 { transform: rotateY(180deg) translateZ(var(--dice-half)); }
.dice__face--2 { transform: rotateY(90deg)  translateZ(var(--dice-half)); }
.dice__face--5 { transform: rotateY(-90deg) translateZ(var(--dice-half)); }
.dice__face--3 { transform: rotateX(90deg)  translateZ(var(--dice-half)); }
.dice__face--4 { transform: rotateX(-90deg) translateZ(var(--dice-half)); }

/* A lapokon ülő rombuszok kisebbek, mint máshol */
.dice__face .diamond {
  width: 40px;
  height: 40px;
  border-width: 1px;
  border-radius: 5px;
}
.dice__face .diamond__num { font-size: 1rem; }
.dice__face .diamond__dot { width: 3px; height: 3px; }

/*
 * Árnyék a kocka alatt: ettől „áll” valamin, nem lebeg a semmiben.
 *
 * A kocka dobozán BELÜL van, nem a színpadon – így pontosan alatta
 * marad. (Ha a .dice-zone-hoz igazítanánk, a súgószöveg magassága
 * elmozdítaná, mert az is a zóna része.)
 */
.dice { position: relative; }

.dice__shadow {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 76px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(88, 62, 40, .18);
  filter: blur(7px);
  pointer-events: none;

  /* A dobás alatt a JavaScript animálja; ez csak a nyugalmi állapot. */
  transition: opacity var(--dur) var(--ease);
}

@media (prefers-color-scheme: dark) {
  .dice__shadow { background: rgba(0, 0, 0, .55); }
}

/* Ha nem te következel, a kocka háttérbe húzódik */
.dice[aria-disabled="true"] .dice__shadow,
.dice[aria-disabled="true"] .dice__face { opacity: .5; }


/* --- Kifogyott kategória ----------------------------------------- */

.empty-pool {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}
.empty-pool[hidden] { display: none; }

.empty-pool__title {
  margin: 0;
  font: 400 1.25rem/1.35 var(--font-serif);
  max-width: 18rem;
}

.empty-pool__sub {
  margin: 0;
  font: 500 .74rem/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cat-ink);
}


/* ==================================================================
   7. KÁRTYA
   ================================================================== */

/*
 * A kártya-színpad adja a térhatást a forduláshoz.
 * A perspective a szülőn van, hogy a kártya körül maradjon a tér.
 */
.card-zone { perspective: 1400px; }

.card {
  position: relative;
  width: 100%;
  max-width: 21rem;
  min-height: 22rem;

  /* A két lap valódi elő- és hátlapként áll egymás mögött */
  transform-style: preserve-3d;
  will-change: transform;
}

/*
 * A magasságot az ELŐLAP adja (position: relative), a hátlap pedig
 * ráfekszik (position: absolute). Így a kártya pontosan akkora lesz,
 * amekkora a kérdés szövegéhez kell – egy hosszabb kérdés sem lóg ki,
 * és nem kell fix magasságot találgatni.
 */
.card__face {
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hátlap: a kategória színébe öltözött, üres felület a rombusszal */
.card__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--cat-from) 60%, var(--bg-raised)) 0%,
      color-mix(in srgb, var(--cat-to) 26%, var(--bg-raised)) 100%
    );
}

/* Halvány rombusz-vízjel a hátlapon */
.card__face--back::after {
  content: "";
  width: 92px;
  height: 92px;
  border: 1.5px solid color-mix(in srgb, var(--cat-ink) 34%, transparent);
  border-radius: 12px;
  transform: rotate(45deg);
}

.card__face--front {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  padding: var(--gap-lg);
}

/* A kategória lágy gradiense a jobb felső sarokból fut ki */
.card__face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      86% 62% at 100% 0%,
      color-mix(in srgb, var(--cat-from) 52%, transparent) 0%,
      color-mix(in srgb, var(--cat-to) 18%, transparent) 46%,
      transparent 76%
    );
}

.card__diamond {
  position: absolute;
  top: var(--gap-lg);
  right: var(--gap-lg);
  width: 46px;
  height: 46px;
}
.card__diamond .diamond__num { font-size: 1.15rem; }

.card__category {
  position: relative;
  margin: 0 0 var(--gap-lg);
  padding-right: 64px;      /* hely a rombusznak */
  font: 500 .72rem/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cat-ink);
}

.card__question {
  position: relative;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  font: 400 1.5rem/1.4 var(--font-serif);
  letter-spacing: -.005em;
  color: var(--ink);

  /* A kérdés szövegét KI LEHET jelölni és másolni – szemben a
     felület többi részével. */
  -webkit-user-select: text;
  user-select: text;
}

.card__hint {
  position: relative;
  margin: var(--gap) 0 0;
  padding-right: 40px;      /* hely a szívnek */
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}
.card__hint:empty { display: none; }

/* Szív */
.heart {
  position: absolute;
  right: var(--gap-lg);
  bottom: var(--gap-lg);
  width: var(--touch);
  height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.heart:hover  { color: var(--cat-ink); }
.heart:active { transform: scale(.88); }

.heart[aria-pressed="true"] {
  color: var(--cat-ink);
}
.heart[aria-pressed="true"] svg path {
  fill: var(--cat-ink);
}

/* Csere jelzése a kártyán */
.card.is-swapped .card__category::after {
  content: " · cserélt";
  color: var(--ink-faint);
  letter-spacing: .1em;
}


/* ==================================================================
   8. ALSÓ GOMBSÁV

   A fő akciók a képernyő alsó harmadában, hüvelykujjal elérhető helyen.
   ================================================================== */

.actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap) var(--gap-lg) calc(var(--gap-lg) + var(--gap-xs));
  min-height: 96px;
}

.actions .btn { width: 100%; }


/* ==================================================================
   9. FIÓKOK (napló, beállítások)
   ================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet[hidden] { display: none; }

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 42, 38, .34);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in var(--dur) var(--ease);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  padding-bottom: var(--safe-b);
  animation: sheet-up var(--dur-slow) var(--ease-out);
}

/*
 * A panel megnyitáskor fókuszt kap, hogy a képernyőolvasó a fiók
 * címénél folytassa, és innen induljon a billentyűzetes navigáció.
 * Ez viszont csak fogódzó, nem kezelőelem, ezért nem rajzolunk köré
 * gyűrűt – a gombok a maguk fókuszjelzését továbbra is megkapják.
 */
.sheet__panel:focus,
.sheet__panel:focus-visible { outline: none; }

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet__grab {
  width: 36px; height: 4px;
  margin: var(--gap-sm) auto 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  flex: none;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--gap) var(--gap-lg) var(--gap-sm);
}

.sheet__title {
  margin: 0;
  font: 400 1.3rem/1.2 var(--font-serif);
}

.sheet__close {
  width: var(--touch); height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
}
.sheet__close:hover { background: var(--bg-sunken); color: var(--ink); }

.sheet__lead {
  margin: 0 0 var(--gap-lg);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sheet__body {
  padding: var(--gap-sm) var(--gap-lg) var(--gap-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sheet__foot {
  margin-top: var(--gap-lg);
  padding-top: var(--gap);
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: center;
}


/* --- Szűrőgombok ------------------------------------------------- */

.segmented {
  display: flex;
  gap: 3px;
  margin: 0 var(--gap-lg) var(--gap-sm);
  padding: 3px;
  background: var(--bg-sunken);
  border-radius: var(--radius-pill);
}

.segmented__btn {
  flex: 1;
  min-height: 38px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font: 500 .82rem/1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.segmented__btn.is-on {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}


/* --- Naplóbejegyzések -------------------------------------------- */

.log-list { list-style: none; margin: 0; padding: 0; }

.log-item {
  display: flex;
  gap: var(--gap);
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--line-soft);
}
.log-item:last-child { border-bottom: 0; }

.log-item__mark {
  flex: none;
  width: 30px; height: 30px;
  margin-top: 2px;
}
.log-item__mark .diamond {
  width: 30px; height: 30px;
  border-width: 1px;
  border-radius: 5px;
}
.log-item__mark .diamond__num { font-size: .82rem; }
.log-item__mark .diamond__dot { display: none; }

.log-item__body { flex: 1; min-width: 0; }

.log-item__cat {
  margin: 0 0 4px;
  font: 500 .64rem/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cat-ink);
}

.log-item__q {
  margin: 0;
  font: 400 1.02rem/1.45 var(--font-serif);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}

.log-item__heart {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ink-faint);
  cursor: pointer;
}
.log-item__heart[aria-pressed="true"] { color: var(--cat-ink); }
.log-item__heart[aria-pressed="true"] svg path { fill: var(--cat-ink); }

.log-empty {
  padding: var(--gap-xl) var(--gap);
  text-align: center;
  color: var(--ink-faint);
  font-size: .9rem;
}


/* --- Kategórialista a beállításokban ----------------------------- */

.cat-list { list-style: none; margin: 0; padding: 0; }

.cat-row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: var(--touch);
  cursor: pointer;
}
.cat-row:last-child { border-bottom: 0; }

.cat-row__mark { flex: none; width: 32px; height: 32px; }
.cat-row__mark .diamond {
  width: 32px; height: 32px;
  border-width: 1px; border-radius: 5px;
}
.cat-row__mark .diamond__num { font-size: .86rem; }
.cat-row__mark .diamond__dot { display: none; }

.cat-row__text { flex: 1; min-width: 0; }

.cat-row__name {
  display: block;
  font: 500 .82rem/1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.cat-row__count {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  color: var(--ink-faint);
}

.cat-row.is-off .cat-row__name,
.cat-row.is-off .cat-row__mark { opacity: .38; }


/* --- Kapcsoló ---------------------------------------------------- */

.switch-row {
  margin-top: var(--gap-lg);
  padding-top: var(--gap);
  border-top: 1px solid var(--line-soft);
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--touch);
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.switch__track {
  position: relative;
  flex: none;
  width: 46px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.switch__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}

.switch input:checked + .switch__track {
  background: var(--cat-ink);
  border-color: var(--cat-ink);
}
.switch input:checked + .switch__track .switch__knob {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--cat-ink);
  outline-offset: 3px;
}

.switch__label {
  font-size: .9rem;
  color: var(--ink);
}


/* ==================================================================
   10. APRÓSÁGOK
   ================================================================== */

/* Rövid üzenet a képernyő alján */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 84px);
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 48px);
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  box-shadow: var(--shadow);
  animation: toast-in var(--dur) var(--ease-out);
}
.toast[hidden] { display: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Kapcsolatvesztés csíkja a képernyő tetején */
.offline {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: calc(var(--safe-t) + 9px) var(--gap) 9px;
  background: var(--ink);
  color: var(--bg);
  font-size: .8rem;
  letter-spacing: .02em;
}
.offline[hidden] { display: none; }

.offline__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.4s var(--ease) infinite;
}

@keyframes blink {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}


/* ==================================================================
   11. NAGYOBB KÉPERNYŐK

   Nem felnagyított mobil: több levegő, nagyobb tipográfia, és a
   kocka mellé kiférő elrendezés.
   ================================================================== */

@media (min-width: 600px) {
  :root {
    --gap:    18px;
    --gap-lg: 28px;
    --gap-xl: 44px;
  }

  .brand__title   { font-size: 2.5rem; }
  .code__value    { font-size: 3.2rem; }

  .card           { max-width: 26rem; min-height: 25rem; }
  .card__question { font-size: 1.7rem; }
  .card__face--front { min-height: 25rem; padding: var(--gap-xl); }
  .card__diamond  { top: var(--gap-xl); right: var(--gap-xl); }
  .heart          { right: var(--gap-xl); bottom: var(--gap-xl); }

  .dice           { width: 116px; height: 116px; }

  /*
   * A játékfelület egy középre igazított oszlopba kerül.
   *
   * Enélkül a felső sáv végigfeszülne a képernyő teljes szélességén, a
   * kód és az ikonok pedig a két távoli sarokba szakadnának – a tartalom
   * elveszne a közepén. Így viszont a felület együtt marad, és a
   * nagyobb kijelző több levegőt ad, nem szétszórtságot.
   */
  .topbar,
  .players,
  .actions {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
  }

  /* A gombok ne feszüljenek végig a széles képernyőn */
  .actions {
    align-items: center;
    padding-bottom: calc(var(--gap-xl) + var(--safe-b));
  }
  .actions .btn { max-width: 24rem; }

  .sheet { align-items: center; }
  .sheet__panel {
    border-radius: var(--radius-lg);
    max-height: 84dvh;
    margin: var(--gap-lg);
  }
  .sheet__grab { display: none; }
}

@media (min-width: 900px) {
  .brand__title   { font-size: 2.9rem; }
  .card           { max-width: 30rem; min-height: 27rem; }
  .card__question { font-size: 1.85rem; }
  .dice           { width: 132px; height: 132px; }
  .stage__hint    { font-size: .95rem; }
}

/* Fekvő tájolás alacsony képernyőn: kevesebb függőleges térköz */
@media (max-height: 560px) and (orientation: landscape) {
  .wrap        { justify-content: flex-start; padding-top: var(--gap); }
  .brand       { margin-bottom: var(--gap); }
  .brand .diamond { width: 44px; height: 44px; margin-bottom: var(--gap-sm); }
  .brand__title { font-size: 1.5rem; }
  .card        { min-height: 15rem; }
  .card__face--front { min-height: 15rem; padding: var(--gap); }
  .card__question { font-size: 1.15rem; }
  .stage       { padding: var(--gap-sm) var(--gap); }
  .stage__hint { margin-top: var(--gap-sm); }
  .actions     { padding: var(--gap-sm) var(--gap-lg) var(--gap); min-height: 0; }
  .dice        { width: 68px; height: 68px; }
}


/* ==================================================================
   12. AKADÁLYMENTESSÉG

   Ha a rendszerben be van kapcsolva a mozgáscsökkentés, minden
   animáció rövid áttűnésre egyszerűsödik.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }

  .waiting__pulse,
  .offline__dot { animation: none; }

  .btn:active,
  .code:active,
  .dice:active,
  .heart:active { transform: none; }
}

/* Erős kontraszt igény esetén határozottabb vonalak */
@media (prefers-contrast: more) {
  :root {
    --line:      #C9BCAA;
    --ink-soft:  #5A5048;
    --ink-faint: #6E6259;
  }
  .btn--ghost { border-width: 2px; }
}