/* ============================================================================
   KÉM-LELŐ · KÉMIA-PREZENTÁCIÓK — közös dia-motor + design-rendszer
   ----------------------------------------------------------------------------
   Egyetlen ALAP, amelyet minden prezentáció használ. Prezentációnként csak a
   SZÍNVILÁG / HANGULAT / HÁTTÉR változik: a <body> kap egy téma-osztályt
   (pl. class="tema-alkimia"), a többit ez a fájl adja.
   Vezérlés (deck.js):  →/szóköz előre · ←/⌫ vissza · F teljes képernyő ·
                        O áttekintő rács · S kvíz-szkenner
   Kártyás kvíz: kviz.js (ArUco-kártyák, Plickers-elv).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

/* ===========================================================================
   1) DESIGN-ZSETONOK  —  közös alap + téma-változók
   =========================================================================== */
:root{
  /* felület */
  --paper:#FAF6EF;         /* meleg krém vászon */
  --surface:#FFFFFF;
  --ink:#1E2A44;           /* tinta-navy szöveg */
  --muted:#6B7480;
  --line:#E7E0D4;

  /* a kártyák négy válaszszíne (A/B/C/D) — a szkenner-rendszerrel AZONOS */
  --a:#E0301E;  --a-d:#B31E10;   /* A · Tűz  🔥 */
  --b:#199E19;  --b-d:#0F7A0F;   /* B · Föld ⛰️ */
  --c:#1177FF;  --c-d:#0B57C4;   /* C · Víz  💧 */
  --d:#E6B800;  --d-d:#B58C00;   /* D · Levegő ☁️ */

  /* TÉMA-változók — a téma-osztály felülírja ezeket */
  --accent:#F0912E;   --accent-d:#D6791A;   /* vezérszín */
  --accent2:#33AEB5;  --accent2-d:#278289;  /* másodlagos */
  --spot:#F6C333;                            /* kiemelő pötty */
  --bg1:#FFFDF8; --bg2:#FBF3E6;              /* háttér-glow színek */
  --bg-a:12% 0%; --bg-b:100% 100%;           /* háttér-glow helyek */
  --title-ink:#1E2A44;                       /* címlap-szöveg színe */

  /* betűk */
  --display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --hand:'Caveat','Segoe Print','Comic Sans MS',cursive;

  /* forma */
  --shadow:0 2px 6px rgba(30,42,68,.08), 0 16px 44px rgba(30,42,68,.12);
  --shadow-sm:0 2px 10px rgba(30,42,68,.12);
  --radius:22px;
  --scale:1;               /* JS állítja projektorhoz */
}

/* ===========================================================================
   2) TÉMÁK  —  csak ennyi különbözik prezentációnként
   =========================================================================== */
/* 1.1 · Bevezetés a kémiába — alkimista-történelmi (borostyán + mély türkiz) */
body.tema-alkimia{
  --accent:#C8892B;   --accent-d:#9C6412;
  --accent2:#2C8C93;  --accent2-d:#1E656B;
  --spot:#E7B23C;
  --paper:#F7EEDD; --bg1:#FBF4E2; --bg2:#EFE0C4; --bg-a:8% -5%; --bg-b:105% 108%;
  --ink:#3A2A16; --muted:#7A6647; --line:#E6D6B6;
  --title-ink:#F7EEDD;
}
/* 1.2 · Ismerkedés a kémiával — anyag/természet (üde zöld + égkék) */
body.tema-anyag{
  --accent:#3FA35A;   --accent-d:#2C7E43;
  --accent2:#2F8FD0;  --accent2-d:#1F6DA6;
  --spot:#7ED957;
  --paper:#F3F8F1; --bg1:#F5FBF2; --bg2:#E3F1E7; --bg-a:10% 0%; --bg-b:100% 105%;
  --ink:#183A2A; --muted:#5C7A66; --line:#D8E7DC;
  --title-ink:#EAFBEF;
}
/* 1.3 · Kémiai jelölések — misztikustól a logikusig (mély lila → tiszta kék) */
body.tema-jelek{
  --accent:#7A54C9;   --accent-d:#5E3AA8;
  --accent2:#2E7BC4;  --accent2-d:#1E5C9A;
  --spot:#C9A227;
  --paper:#F3F0F9; --bg1:#F6F3FC; --bg2:#E6DEF3; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#241A3D; --muted:#66597F; --line:#DFD6EE;
  --title-ink:#F3EFFA;
}

/* 1.2–1.3 · Kísérleti eszközök és mérés — laboros, precíz (teál + meleg narancs) */
body.tema-labor{
  --accent:#0E8F9E;   --accent-d:#0A6B77;
  --accent2:#E07B2C;  --accent2-d:#B85F18;
  --spot:#F2B33D;
  --paper:#F1F7F8; --bg1:#F4FAFB; --bg2:#E1EFF1; --bg-a:10% 0%; --bg-b:100% 105%;
  --ink:#123239; --muted:#5A757C; --line:#D7E7EA;
  --title-ink:#EAF9FB;
}

/* 2.1 · Az anyagok tulajdonságai — édes, meleg (málna-magenta + karamell-méz) */
body.tema-tulajdonsag{
  --accent:#C9386E;   --accent-d:#9E2451;
  --accent2:#E08A2B;  --accent2-d:#B96A14;
  --spot:#F4C245;
  --paper:#FBF1F4; --bg1:#FEF6F1; --bg2:#F7E3EA; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#3A1E2C; --muted:#8A6273; --line:#EED6DE;
  --title-ink:#FBEEF3;
}

/* 2.3 · A halmazállapotok — jég/víz/gőz, hőmérséklet (azúr-víz + meleg korall) */
body.tema-halmaz{
  --accent:#1E8BD0;   --accent-d:#1568A6;
  --accent2:#E9705A;  --accent2-d:#C4503B;
  --spot:#57C7DE;
  --paper:#EEF5FB; --bg1:#F3F9FD; --bg2:#DEECF7; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#123049; --muted:#5E7488; --line:#D6E5F0;
  --title-ink:#EAF6FD;
}

/* 2.2 · Magnézium és hipermangán — összehasonlítás (ezüst-acél + hipermangán-lila + vaku-arany) */
body.tema-osszehas{
  --accent:#9B2FB4;   --accent-d:#79218E;
  --accent2:#5F7688;  --accent2-d:#455A6B;
  --spot:#F2CE45;
  --paper:#F4F0F7; --bg1:#F8F4FB; --bg2:#E9E1F1; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#2A1E38; --muted:#6E6280; --line:#E3DAED;
  --title-ink:#F5EFFA;
}

/* 2.4–2.5 · Az oldódás, az oldatok, a töménység — színes oldatok (királykék + magenta-rózsa + cián) */
body.tema-oldat{
  --accent:#2C5AA8;   --accent-d:#1E3F7A;
  --accent2:#D6336C;  --accent2-d:#A61E4D;
  --spot:#38C1D6;
  --paper:#EEF1FA; --bg1:#F4F6FD; --bg2:#E6EAF6; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#1B2A4A; --muted:#5D6B88; --line:#D7DEEE;
  --title-ink:#EEF2FC;
}

/* ÚJ ALAP-PALETTA · MELEG — krém + bordó + türkiz + mustársárga + meleg kék (honlap-hangulat) */
body.tema-meleg{
  --accent:#A62639;   --accent-d:#7E1D2C;    /* bordó */
  --accent2:#1B9AAA;  --accent2-d:#127885;   /* türkiz */
  --spot:#F2B705;                            /* mustársárga */
  --kek:#2A6F97;                             /* meleg kék (kiegészítő) */
  --paper:#FBF3E6; --bg1:#FDF7EC; --bg2:#F3E4CC; --bg-a:10% -4%; --bg-b:104% 106%;
  --ink:#3A2A20; --muted:#8A6E56; --line:#EAD9BE;
  --title-ink:#FBF3E6;
}

/* ÚJ ALAP-PALETTA · SÖTÉT & SEJTELMES — mély tinta + antik arany + óbor bordó + patinás türkiz (1700-as évek + modern) */
body.tema-setet{
  --accent:#D4AC4E;   --accent-d:#EBCE86;    /* antik arany; a -d VILÁGOSABB (sötét háttéren szöveg) */
  --accent2:#5FB0AE;  --accent2-d:#93D1CD;   /* patinás türkiz */
  --spot:#E8B84B;                            /* arany ragyogás */
  --bor:#C0556A;                             /* óbor bordó (kiegészítő, világosított) */
  --paper:#17131E; --bg1:#2A2033; --bg2:#101A1C; --bg-a:16% -6%; --bg-b:102% 106%;
  --ink:#F1E7D3; --muted:#B9A98C; --line:rgba(241,231,211,.16);
  --surface:rgba(40,31,46,.72);
  --title-ink:#F5EDD9;
}

/* 3.1 · Az atomok felfedezése — RÉGIES, PERGAMENES (öreg papír + szépia tinta + antik arany, tompa antik-kék árnyalattal) */
body.tema-pergamen{
  --accent:#7A5330;   --accent-d:#513620;    /* meleg szépia / bronz tinta */
  --accent2:#4C5F63;  --accent2-d:#37494E;   /* TOMPA antik kék-szürke (kevesebb kék) */
  --spot:#BC8A2E;                            /* antik arany */
  --paper:#EAD9B4; --bg1:#F1E4C4; --bg2:#DBC195; --bg-a:12% -4%; --bg-b:104% 106%;
  --ink:#3A2C1A; --muted:#7A684C; --line:#D6C097;
  --title-ink:#F1E6CC;
}
/* aggott PERGAMEN-textúra: finom barnás foltok az egyszínű háttér helyett */
body.tema-pergamen{
  background:
    radial-gradient(circle at 17% 12%, rgba(120,85,45,.09), transparent 34%),
    radial-gradient(circle at 83% 20%, rgba(120,85,45,.07), transparent 30%),
    radial-gradient(circle at 64% 82%, rgba(90,63,33,.09), transparent 36%),
    radial-gradient(circle at 26% 74%, rgba(125,88,48,.07), transparent 30%),
    radial-gradient(circle at 48% 45%, rgba(150,112,60,.05), transparent 55%),
    radial-gradient(120% 90% at 12% -4%, var(--bg1), transparent 60%),
    radial-gradient(120% 90% at 104% 106%, var(--bg2), transparent 55%),
    var(--paper);
}

/* 3.2+ · Az atom szerkezete — ŰR + HOMOK + EZÜSTMETÁL (acélkék + meleg homok + ezüst csillogás; SÖTÉT) */
body.tema-atom{
  --accent:#5B93B0;   --accent-d:#A8CBDC;    /* acélkék; a -d VILÁGOS, mert sötét háttéren szöveg */
  --accent2:#C29E64;  --accent2-d:#E4C68F;   /* meleg homok / bronz; -d VILÁGOS */
  --spot:#D6DAE0;                            /* ezüst metál csillogás */
  --paper:#141A20; --bg1:#28323C; --bg2:#0E1319; --bg-a:16% -6%; --bg-b:102% 106%;
  --ink:#EAE6DD; --muted:#A9B0B8; --line:rgba(234,230,221,.16);
  --surface:rgba(30,40,50,.74);
  --title-ink:#F0ECE2;
}

/* 4. fejezet (4.4-től) · a FELHASZNÁLÓ VÁLASZTOTTA PALETTA — mélykék + piros + narancs + arany + krém
   Meleg, magabiztos „retró-plakát" hangulat: a KRÉM a háttér, az erős színek CSAK kiemelésként. */
body.tema-retro{
  --accent:#D3232A;   --accent-d:#A5171E;    /* piros — vezérszín */
  --accent2:#EE7D0E;  --accent2-d:#B15900;   /* narancs — másodlagos */
  --spot:#FBC24C;                            /* arany-sárga — kiemelő pötty */
  --kek:#0B3550;                             /* mélykék — kiegészítő / címlap-háttér */
  --paper:#F6F2E0; --bg1:#FBF8EC; --bg2:#E9E6C6; --bg-a:10% -4%; --bg-b:104% 106%;
  --ink:#0B2E44;  --muted:#6E6A52; --line:#E4DDC3;
  --title-ink:#F8F4E6;
}

/* 4. fejezet (4.8-tól) · SZÍNPALETTA 9 — mélykék + acélkék + arany + világos szürke + világoskék
   Világos, meleg-hűvös „petrol + arany" hangulat: a KRÉM-SZÜRKE a háttér, az erős színek CSAK kiemelésként.
   A 6 lecke FELVÁLTVA használja a két testvér-témát (azonos háttér+szöveg → egység, cserélt vezérszín → változatosság). */
/* A-variáns · ACÉLKÉK vezérszín + arany kiemelő (4.8, 4.10, 4.12) */
body.tema-kek{
  --accent:#4B758B;   --accent-d:#33556B;    /* acélkék — vezérszín */
  --accent2:#B0851F;  --accent2-d:#8A6612;   /* arany, sötétítve az olvashatóságért */
  --spot:#F0B412;                            /* arany-sárga — kiemelő ragyogás */
  --kek:#203B4E;                             /* mélykék — címlap-háttér / ink-kiegészítő */
  --paper:#F4F3EF; --bg1:#FAFAF7; --bg2:#E3E7E7; --bg-a:10% -4%; --bg-b:104% 106%;
  --ink:#203B4E;  --muted:#66727C; --line:#DBDFDD;
  --title-ink:#F4F3EF;
}
/* B-variáns · ARANY vezérszín + acélkék másodlagos (4.9, 4.11, 4.13) */
body.tema-kek-b{
  --accent:#B0851F;   --accent-d:#8A6612;    /* arany (sötétített) — vezérszín, olvasható krémen */
  --accent2:#4B758B;  --accent2-d:#33556B;   /* acélkék — másodlagos */
  --spot:#F0B412;                            /* arany ragyogás */
  --kek:#203B4E;                             /* mélykék — címlap-háttér / ink-kiegészítő */
  --paper:#F4F3EF; --bg1:#FAFAF7; --bg2:#E3E7E7; --bg-a:10% -4%; --bg-b:104% 106%;
  --ink:#203B4E;  --muted:#66727C; --line:#DBDFDD;
  --title-ink:#F4F3EF;
}

/* 5. fejezet · SZÍNPALETTA 120 — barna + arany-sárga + krém + világoszöld + olívazöld
   Meleg, földes-olívás „természetes labor" hangulat: a KRÉM a háttér, az olíva/barna/arany CSAK kiemelésként.
   A 3 paletta (retro / kek / oliva) FELVÁLTVA fut az 5. fejezet leckéin — mindegyik más jelleg. */
body.tema-oliva{
  --accent:#708A22;   --accent-d:#55691A;    /* olívazöld — vezérszín */
  --accent2:#846246;  --accent2-d:#63472F;   /* meleg barna — másodlagos */
  --spot:#DFC135;                            /* arany-sárga — kiemelő ragyogás */
  --kek:#4B5A1C;                             /* mély olíva — címlap-háttér / ink-kiegészítő */
  --paper:#F7F1DA; --bg1:#FBF7E9; --bg2:#EAE3C2; --bg-a:10% -4%; --bg-b:104% 106%;
  --ink:#40331D;  --muted:#786C4C; --line:#E6DCB6;
  --title-ink:#F7F1DA;
}

/* 1.4 · Belépés a részecskék birodalmába — SÖTÉT, REJTÉLYES (mély lila + cián) */
body.tema-reszecske{
  --accent:#8b5cf6;   --accent-d:#c4b5fd;   /* ibolya; a -d VILÁGOS, mert sötét háttéren szöveg */
  --accent2:#22d3ee;  --accent2-d:#7dd3fc;  /* cián */
  --spot:#f0abfc;                            /* rózsaszín ragyogás */
  --paper:#0c0a1e; --bg1:#241657; --bg2:#0a1638; --bg-a:18% -8%; --bg-b:100% 108%;
  --ink:#ece9fb; --muted:#a99cca; --line:rgba(255,255,255,.15);
  --surface:rgba(32,24,62,.72);
  --title-ink:#f4effe;
}
/* sötét téma — a világos, hardkódolt felületek átállítása */
body.tema-reszecske .def{background:var(--surface);backdrop-filter:blur(3px)}
body.tema-reszecske .card{background:var(--surface);backdrop-filter:blur(3px)}
body.tema-reszecske .card.soft{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.32)}
body.tema-reszecske .abra{background:var(--surface)}
body.tema-reszecske .chip{background:rgba(255,255,255,.08)}
body.tema-reszecske .chip.ghost{background:rgba(139,92,246,.18)}
body.tema-reszecske .valasz{background:rgba(24,18,48,.9);color:var(--ink)}
body.tema-reszecske .diak{background:var(--surface)}
body.tema-reszecske .kephely{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.45);color:var(--accent-d)}
body.tema-reszecske .karusszel{background:rgba(139,92,246,.12)}
body.tema-reszecske .lista .b{background:rgba(139,92,246,.22);border-color:rgba(139,92,246,.42)}
body.tema-reszecske .osszefugges .kozep{background:radial-gradient(circle at 50% 40%,#241a4a,#140f30);
  border-color:rgba(139,92,246,.5)}
body.tema-reszecske .counter{background:rgba(0,0,0,.4);color:var(--muted)}
body.tema-reszecske .hint{background:rgba(0,0,0,.4)}
body.tema-reszecske .nav-arrow{background:rgba(255,255,255,.12);color:#fff}
body.tema-reszecske .kozep-uzenet .def,body.tema-reszecske .eredmeny .diak{backdrop-filter:blur(4px)}

/* világító részecske-háttér (finom, lebegő pontok a rejtélyes hangulathoz) */
.reszecske-por{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.reszecske-por span{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(196,181,253,.9),rgba(139,92,246,0));animation:lebeg 11s ease-in-out infinite}

/* ===========================================================================
   3) VÁSZON  —  fix 1280×720 (16:9) színpad, projektorra méretezve
   =========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(120% 90% at var(--bg-a), var(--bg1), transparent 60%),
    radial-gradient(120% 90% at var(--bg-b), var(--bg2), transparent 55%),
    var(--paper);
  color:var(--ink); font-family:var(--body); overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
.stage{position:fixed;inset:0;overflow:hidden}
.deck{position:absolute;top:50%;left:50%;width:1280px;height:720px;
  transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center center}
.slide{position:absolute;inset:0;padding:46px 60px;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
  background:transparent;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  transform:translateY(18px) scale(.99)}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2}
.slide.fent{justify-content:flex-start;padding-top:40px}
.slide.fent>.torzs{justify-content:flex-start;height:auto}
.slide{transform:translateX(60px)}                 /* belépő: jobbról besuhan */
.slide.prev{transform:translateX(-60px) scale(.99)}/* kilépő: balra kicsúszik */

/* ===========================================================================
   4) TIPOGRÁFIA
   =========================================================================== */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;
  color:var(--ink);text-wrap:balance}
p{margin:0;line-height:1.5}
.eyebrow{font-family:var(--body);font-weight:800;font-size:19px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-d);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--accent)}
.h1{font-size:72px;letter-spacing:-.015em}
.h2{font-size:54px;letter-spacing:-.01em}
.h3{font-size:32px}
.lead{font-size:29px;color:var(--ink);opacity:.9;max-width:24em;line-height:1.4}
.small{font-size:21px;color:var(--muted)}
.hand{font-family:var(--hand);font-weight:700;color:var(--accent-d);font-size:1.15em}
mark,.mark{background:linear-gradient(transparent 56%, color-mix(in srgb,var(--spot) 70%,transparent) 0);
  color:inherit;padding:0 .1em;border-radius:3px;font-weight:600}
b,strong{font-weight:700;color:var(--accent-d)}
.formula{font-family:'Fraunces',Georgia,serif;font-weight:600}
.formula sub{font-size:.62em;vertical-align:-.25em;font-weight:600}
.ital{font-style:italic}

/* ===========================================================================
   5) ÚJRAHASZNOSULÓ ELEMEK
   =========================================================================== */
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;
  padding:9px 18px;border-radius:999px;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.chip.accent{background:var(--accent);color:#fff;border-color:transparent}
.chip.ghost{background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent-d);
  border-color:color-mix(in srgb,var(--accent) 26%,#fff)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 28px;font-size:21px;line-height:1.35}
.card b{font-size:1.05em}
.card.soft{background:color-mix(in srgb,var(--accent) 6%,#fff);
  border-color:color-mix(in srgb,var(--accent) 18%,#fff)}

/* keret-doboz kiemelt definícióhoz / összefoglaláshoz */
.def{position:relative;background:#fff;border-radius:18px;padding:22px 26px 22px 30px;
  box-shadow:var(--shadow);border:1px solid var(--line)}
.def::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:7px;border-radius:6px;
  background:linear-gradient(var(--accent),var(--accent2))}
.def .cimke{font-size:17px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-d);margin-bottom:6px}
.def{font-size:23px;line-height:1.4}

/* ikonos jegyzék-elem */
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.lista li{display:flex;gap:18px;align-items:flex-start;font-size:26px;line-height:1.32}
.lista .b{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  font-size:31px;background:color-mix(in srgb,var(--accent) 15%,#fff);
  border:1.5px solid color-mix(in srgb,var(--accent) 30%,#fff)}

/* elrendezés-segédek */
.row{display:flex;gap:26px}
.col{display:flex;flex-direction:column}
.center{align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
.gap-s{gap:12px}.gap-l{gap:36px}
.mt-s{margin-top:14px}.mt{margin-top:26px}.mt-l{margin-top:40px}

/* ===========================================================================
   6) CÍMLAP  (.tabla-cim)  —  jellegzetes „rám valló" nyitódia
   =========================================================================== */
.cimlap{align-items:flex-start;justify-content:center;text-align:left}
.cimlap .kicsi{font-family:var(--hand);font-size:34px;color:var(--spot);
  transform:rotate(-3deg);margin-bottom:6px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.cimlap h1{font-size:88px;line-height:.98;color:var(--title-ink);
  text-shadow:0 2px 30px rgba(0,0,0,.18);max-width:15ch}
.cimlap h1{font-size:96px}
.cimlap .alcim{font-size:30px;margin-top:22px;color:var(--title-ink);opacity:.92;
  max-width:32ch;font-weight:500;line-height:1.35}
.cimlap .kicsi{font-size:38px}
.cimlap .meta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.cimlap .meta .chip{background:rgba(255,255,255,.16);color:var(--title-ink);
  border-color:rgba(255,255,255,.35);backdrop-filter:blur(3px)}
/* címlap háttér: telített téma-színátmenet */
.slide.cimlap{background:
  radial-gradient(130% 120% at 82% 18%, color-mix(in srgb,var(--accent) 55%,transparent), transparent 60%),
  radial-gradient(120% 120% at 8% 96%, color-mix(in srgb,var(--accent2) 60%,transparent), transparent 55%),
  linear-gradient(135deg,var(--accent-d),color-mix(in srgb,var(--accent2-d) 80%, #101021))}

/* logó-vízjel a jobb alsó sarokban */
.logo-vj{position:absolute;right:40px;bottom:34px;width:196px;opacity:.92;z-index:5;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.cimlap .logo-vj{opacity:.96}

/* ===========================================================================
   KÖTELEZŐ FORRÁS-VÍZJEL (Realika) — MINDEN dián, halványan, jogi okból
   A bal alsó sarokban (a Kém-Lelő logó a jobb alsó sarokban van).
   Egyetlen .deck::after → automatikusan minden dián és minden diasoron ott van,
   mert előre nem tudjuk, melyik diára kerül majd Realika-kép/animáció/kisfilm.
   =========================================================================== */
.deck::after{
  content:"Animáció/Videó forrása: Realika – Digitális foglalkozásgyűjtemény (Educatio / Sulinet)";
  position:absolute;left:22px;bottom:11px;z-index:20;pointer-events:none;
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.005em;
  line-height:1.2;max-width:58%;color:rgba(110,110,110,.5);
}
/* sötét témán/dián kicsit világosabb, hogy ott is „alig, de látszódjon" */
body.tema-reszecske .deck::after{color:rgba(230,230,240,.28)}
/* áttekintő (overview) nézetben ne lógjon bele a rácsba */
body.overview .deck::after{display:none}

/* ===========================================================================
   ÚJ EGYSÉGES DIA-RENDSZER  (body.uj)  —  2026-07-22
   Cél: (1) MINDEN dia legyen TELE (cím fent, tartalom kifeszítve, NAGY
   következtetés alul), (2) MINDEN dián legyen KÉPHELY (halvány, de ott van,
   ide jön a Realika-videó/kép), (3) a lényegi zárómondat NE legyen apró.
   Csak a body.uj osztályú (új) diasorokra hat — a régi, jóváhagyott
   diasorokat (2.1–2.3 stb.) NEM érinti.
   =========================================================================== */
/* a törzs kitölti a teljes dia-magasságot, a tartalom függőlegesen eloszlik */
body.uj .slide{padding:40px 56px}
body.uj .slide>.torzs{height:100%;display:flex;flex-direction:column;
  justify-content:flex-start;gap:16px}
/* a "mag" a maradék helyet kitölti (így nincs félüres dia) */
body.uj .mag{flex:1 1 auto;min-height:0;display:flex;gap:30px;align-items:stretch}
body.uj .mag.oszlop{flex-direction:column}
body.uj .mag.kozep{align-items:center;justify-content:center}
body.uj .mag>.szoveg{display:flex;flex-direction:column;justify-content:center;gap:16px}
body.uj .mag .grow{display:flex;flex-direction:column;justify-content:center;gap:16px}
/* a zárás alulra tolva, NAGY, kézírásos — a legfontosabb gondolat */
body.uj .zaras{flex:none;margin-top:4px;text-align:center;
  font-family:var(--hand);font-weight:700;font-size:50px;line-height:1.12;color:var(--accent-d)}
body.uj .zaras b{color:var(--accent2-d)}
body.uj .zaras.kicsit{font-size:42px}
/* tartalmi szövegek nagyobb alapon az új rendszerben */
body.uj .def{font-size:25px}
body.uj .lista li{font-size:27px}
/* ZÁRÓ dia (.cimlap, de NEM foto-hero): NEM a tele-kitöltő logika szerint,
   hanem KÖZÉPRE igazítva (a felkúszó elköszönés hibájának központi javítása) */
body.uj .slide.cimlap:not(.foto-hero)>.torzs{height:auto;justify-content:center}
/* kvíz az új rendszerben: kompakt, hogy az oldalsó képhely mellett is elférjen */
body.uj .kviz .kerdes{font-size:46px}
body.uj .kviz .valaszok{margin-top:16px}
body.uj .kviz .valasz{font-size:28px;padding-top:15px;padding-bottom:15px}
body.uj .kviz .szavazz{margin-top:14px}
body.uj .kviz .mag{flex:0 1 auto}

/* ---- MÉDIA-DOMINÁNS elrendezés (5. fejezettől; felhasználói kérés: NAGY képek, teli dia) ----
   A kép/videó-helyek KITÖLTIK a mag teljes magasságát → nincs üres hely, nagy képek.
   FONTOS: a .mag-ra NE tegyél inline align-items:center-t (marad a default stretch),
   különben a média összezsugorodik és félüres lesz a dia. */
body.uj .mag>.szoveg-fo{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:14px}
body.uj .mag>.media-fo{flex:1.15 1 0;display:flex;flex-direction:column;gap:16px;min-height:0}
body.uj .media-fo .mhely{flex:1;min-height:0}
body.uj .mediasor.hero{flex:1 1 auto;min-height:0;gap:18px}          /* teljes szélességű kép-sáv, magasra nyúlik */
body.uj .mediasor.hero .mhely{min-height:0}
body.uj .mhely.tall{min-height:300px}
body.uj .media-fo .kep-alairas,body.uj .mediasor.hero .kep-alairas{flex:none}

/* ---- UNIVERZÁLIS KÉPHELY (.mhely) — minden dián, halványan, de jelölve ---- */
.mhely{position:relative;border-radius:18px;overflow:hidden;min-height:130px;
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1.6px dashed color-mix(in srgb,var(--accent) 30%,transparent);
  display:flex;align-items:center;justify-content:center}
.mhely img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* ---- KÉP IGAZÍTÁSA A KERETHEZ  (2026-09-09) --------------------------------
   Alap: `cover` — a kép KITÖLTI a keretet, a fölösleget levágja. Ez fotóknál jó,
   de egy széles ábrának/képernyőképnek egy magas keretben csak a közepe látszik
   („nagyon torzak a képek, ki kell húznom akkorára, amekkorára ő gondolja").
   A `.kep-tel` osztállyal a TELJES kép látszik, vágás nélkül, torzítás nélkül.
   A szerkesztő teszi rá, és a mentéssel a kész diasorba is átkerül. */
.mhely.kep-tel img,.foto-keret.kep-tel img,.kepkartya.kep-tel .foto-keret img{
  object-fit:contain}
.mhely .jel{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;
  gap:5px;text-align:center;padding:10px;opacity:.7;
  color:color-mix(in srgb,var(--accent-d) 62%,var(--muted))}
.mhely .jel .ik{font-size:30px;line-height:1}
.mhely .jel .cim{font-weight:800;font-size:15px}
.mhely .jel code{font-size:11px;padding:2px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent-d)}
.mhely.mini{min-height:96px}
.mhely.mini .jel .ik{font-size:24px}
/* média-sor: 1/2/4 hely egymás mellett */
.mediasor{display:flex;gap:16px}
.mediasor>*{flex:1}
.mediarács{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- SÖTÉT KOMPONENS-FELÜLÍRÁSOK (body.sotet) — az új sötét témához ---- */
body.sotet .def{background:var(--surface);backdrop-filter:blur(3px)}
body.sotet .card{background:var(--surface);backdrop-filter:blur(3px)}
body.sotet .card.soft{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
body.sotet .abra{background:var(--surface)}
body.sotet .chip{background:rgba(255,255,255,.08)}
body.sotet .chip.ghost{background:color-mix(in srgb,var(--accent) 18%,transparent)}
body.sotet .valasz{background:rgba(20,16,26,.9);color:var(--ink)}
body.sotet .diak{background:var(--surface)}
body.sotet .mhely{background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
body.sotet .lista .b{background:color-mix(in srgb,var(--accent) 20%,transparent);
  border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
body.sotet .counter,body.sotet .hint{background:rgba(0,0,0,.42);color:var(--muted)}
body.sotet .nav-arrow{background:rgba(255,255,255,.12);color:#fff}

/* ===========================================================================
   7) SZEKCIÓ-VÁLTÓ dia  (.szekcio)
   =========================================================================== */
.szekcio{align-items:flex-start;justify-content:center}
.szekcio .no{font-family:var(--display);font-size:160px;font-weight:700;line-height:1;
  color:color-mix(in srgb,var(--accent) 26%,transparent);letter-spacing:-.04em}
.szekcio h2{font-size:66px;margin-top:8px}
.szekcio .alcim{font-size:28px;color:var(--muted);margin-top:14px;max-width:30ch;line-height:1.35}

/* ---- KÉPHELY: jelölt hely, ahová a felhasználó saját fotót tehet ---- */
.kephely{border:3px dashed color-mix(in srgb,var(--accent) 45%,#fff);border-radius:20px;
  background:color-mix(in srgb,var(--accent) 7%,#fff);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:var(--accent-d);padding:24px;gap:8px}
.kephely .ik{font-size:52px;opacity:.75}
.kephely .cim{font-weight:800;font-size:21px}
.kephely .le{font-size:16px;color:var(--muted);max-width:24ch}
.kephely code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  font-size:14px;color:var(--accent-d)}

/* ===========================================================================
   8) KÉP-HELYETTESÍTŐ / SVG-illusztráció keret
   =========================================================================== */
.abra{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:18px;display:flex;align-items:center;justify-content:center}
.abra.plain{background:transparent;border:none;box-shadow:none;padding:0}
.abra svg{width:100%;height:auto;display:block}
.kep-alairas{font-size:14px;color:var(--muted);margin-top:8px;text-align:center;font-style:italic}

/* ---- VALÓDI FOTÓK / FESTMÉNYEK ---- */
/* keretezett kép (szplit-elrendezéshez, kártyához) */
.foto{border-radius:18px;box-shadow:var(--shadow);border:4px solid #fff;overflow:hidden;background:#eee;
  display:block;width:100%;height:100%;object-fit:cover}
.foto-keret{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff;
  position:relative;background:#e8e2d6}
.foto-keret img{display:block;width:100%;height:100%;object-fit:cover}
.foto-keret .credit{position:absolute;right:8px;bottom:7px;font-size:11px;color:#fff;
  background:rgba(0,0,0,.5);padding:2px 8px;border-radius:8px;font-style:italic}
.foto-alairas{font-size:15px;color:var(--muted);margin-top:10px;font-style:italic;display:flex;gap:8px;align-items:center}
.foto-alairas::before{content:"📷";font-style:normal}

/* teljes vászon FOTÓ-HŐSDIA — kép háttérrel, szöveg alul, sötét fátyollal */
.slide.foto-hero{padding:0;justify-content:flex-end}
.foto-hero .htr{position:absolute;inset:0;overflow:hidden;z-index:0}
.foto-hero .htr img{width:100%;height:100%;object-fit:cover}
.foto-hero .fatyol{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,8,16,.78) 0%,rgba(10,8,16,.5) 42%,rgba(10,8,16,.05) 75%),
             linear-gradient(0deg,rgba(10,8,16,.7) 0%,transparent 45%)}
.foto-hero .torzs{position:relative;z-index:2;height:100%;justify-content:flex-end;padding:56px 76px}
.foto-hero h1,.foto-hero h2,.foto-hero .lead,.foto-hero .eyebrow{color:#fff}
.foto-hero h1,.foto-hero h2{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.foto-hero .lead{color:#f3eee6;opacity:.96;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.foto-hero .eyebrow{color:var(--spot)}
.foto-hero .eyebrow::before{background:var(--spot)}
.foto-hero .credit{position:absolute;right:16px;top:14px;z-index:2;font-size:11.5px;color:rgba(255,255,255,.72);
  font-style:italic;background:rgba(0,0,0,.32);padding:3px 10px;border-radius:8px}

/* KEN BURNS — a still kép lassan él: finoman ráközelít és úszik (aktív dián) */
.kb{transform:scale(1.08);transform-origin:60% 40%}
.slide.active .kb{animation:kenburns 18s ease-out both}
@keyframes kenburns{
  from{transform:scale(1.02) translate(0,0)}
  to{transform:scale(1.16) translate(-2.5%,-2%)}
}
.kb.jobbrol{transform-origin:30% 50%}
.slide.active .kb.jobbrol{animation:kenburns2 18s ease-out both}
@keyframes kenburns2{from{transform:scale(1.03) translate(0,0)}to{transform:scale(1.15) translate(2.5%,-1.5%)}}

/* ---- KÉP+FELIRAT kártya (3-képes / 4-képes / 2-2-képes dia-típusokhoz) ---- */
.kepkartya{display:flex;flex-direction:column;gap:12px}
.kepkartya .foto-keret{width:100%}
.kepkartya .cimke{text-align:center;font-weight:800;font-size:24px;color:var(--ink);line-height:1.15}
.kepkartya .cimke small{display:block;font-weight:600;font-size:17px;color:var(--muted);margin-top:2px}
.kepkartya.kiemelt .cimke{color:var(--accent-d)}
.kepkartya.kiemelt .foto-keret{border-color:var(--accent)}

/* ---- KÉPHELY üres állapot kicsi változata (kártyában) ---- */
.kephely.mini{padding:14px}
.kephely.mini .ik{font-size:38px}
.kephely.mini .cim{font-size:17px}
.kephely.mini .le{font-size:13px}

/* ---- KARUSSZEL (diavetítés dia — a képek maguktól váltakoznak) ---- */
.karusszel{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  border:5px solid #fff;background:color-mix(in srgb,var(--accent) 8%,#eee)}
.karusszel .kk-lap{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.karusszel .kk-lap.mutat{opacity:1}
.karusszel .kk-lap img{width:100%;height:100%;object-fit:cover;display:block}
.karusszel .kk-pont{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.karusszel .kk-pont i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
.karusszel .kk-pont i.aktiv{background:#fff}

/* ---- VIDEÓ-keret (videós dia — ide illeszthető videó/kísérlet) ---- */
.video-keret{position:relative;border-radius:14px;overflow:hidden;background:#0d0b16;
  border:9px solid #17131f;box-shadow:var(--shadow);aspect-ratio:16/9}
.video-keret video,.video-keret iframe,.video-keret img{width:100%;height:100%;object-fit:cover;display:block;border:0}
.video-keret .jel{position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:#cfc7e0;text-align:center;
  background:radial-gradient(circle at 50% 42%,#241d33,#0d0b16)}

/* 🔑 A SZÜRKE „Ide kerül a kísérleti videó" DOBOZ LÁTHATÓSÁGA — 2026-09-06.
   Ez a doboz `position:absolute;inset:0`, vagyis RÁFEKSZIK a videóra. Ha látszik,
   a videó akkor sem látható, ha tökéletesen betöltött. Régebbi diasorokba be van
   égetve a `style="display:flex"`, és az `onerror` is inline stílust ír — ezért
   kell az `!important`: így KIZÁRÓLAG a deck.js dönt, a `nincs-video` osztállyal.
   Következmény: bármelyik gépen, bármilyen régi diasorral ugyanaz látszik. */
.video-keret .jel{display:none!important}
.video-keret.nincs-video .jel{display:flex!important}
.video-keret.nincs-video video{display:none!important}
.video-keret .play{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.13);
  display:grid;place-items:center;font-size:34px;border:2px solid rgba(255,255,255,.25)}
.video-keret .jel .cim{font-weight:800;font-size:20px;color:#e7dffa}
.video-keret .jel .le{font-size:15px}
.video-keret .jel code{background:rgba(255,255,255,.08);border-radius:6px;padding:2px 9px;font-size:13.5px;color:#cbb8ff}

/* ---- ÖSSZEFÜGGÉS-ábra (a középpontot körbeölelő elemek) ---- */
.osszefugges{position:relative;width:100%;height:560px;margin-top:-6px}
.osszefugges .kozep{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:260px;height:260px;border-radius:50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--accent) 12%,#fff));
  border:3px solid color-mix(in srgb,var(--accent) 35%,#fff);box-shadow:var(--shadow)}
.osszefugges .kozep .cim{font-family:var(--display);font-weight:700;font-size:30px;color:var(--accent-d);line-height:1.05}
.osszefugges .kozep .le{font-size:16px;color:var(--muted);margin-top:6px;max-width:80%}
.osszefugges .agrajz{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.osszefugges .tag{position:absolute;z-index:2;width:210px;transform:translate(-50%,-50%)}
.osszefugges .tag .foto-keret{aspect-ratio:5/4}
.osszefugges .tag .cimke{text-align:center;font-weight:800;font-size:22px;margin-top:8px;color:var(--ink)}
.osszefugges .tag.kiemelt .cimke{color:var(--accent-d)}
.osszefugges .tag.kiemelt .foto-keret{border-color:var(--accent)}

/* ---- MÉRLEG (két ellentét szemben — pl. szennyezés ↔ zöld technológia) ---- */
.merleg{position:relative;width:100%;height:560px}
.merleg .oldal{position:absolute;width:340px}
.merleg .bal-also{left:0;bottom:0}
.merleg .jobb-felso{right:0;top:0}
.merleg .oldal .foto-keret{aspect-ratio:4/3}
.merleg .cimke{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px;
  padding:8px 16px;border-radius:999px;margin-bottom:10px}
.merleg .rossz .cimke{background:#fde4e1;color:#b3271a}
.merleg .jo .cimke{background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent-d)}
.merleg .kozep-uzenet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  max-width:420px;text-align:center}

/* ===========================================================================
   9) ANIMÁCIÓK — a .fragment kattintásra CSÚSZIK be; a mód classal állítható.
      Nagyobb úthossz + rugós lassítás → látványos „besuhanás", nem puszta megjelenés.
   =========================================================================== */
.fragment{opacity:0;transition:opacity .55s ease, transform .7s cubic-bezier(.16,.84,.3,1);
  will-change:opacity,transform}
.fragment.fel{transform:translateY(60px)}
.fragment.le{transform:translateY(-60px)}
.fragment.balra{transform:translateX(90px)}
.fragment.jobbra{transform:translateX(-90px)}
.fragment.pop{transform:scale(.55)}
.fragment.tarul{transform:scale(.88);filter:blur(8px)}
.fragment.pordul{transform:rotate(-9deg) scale(.78);transform-origin:left center}
.fragment.suhan{transform:translateX(140px) scale(.96)}        /* messziről besuhan */
.fragment.visible{opacity:1;transform:none;filter:none}

/* „elrejtő" lépés: a képek/elemek szépen eltűnnek, hogy a helyükre jöhessen az állítás */
.rejtve{opacity:0 !important;transform:scale(.94);pointer-events:none;
  transition:opacity .55s ease, transform .55s ease}

/* fotó-feltárulás: a kép maszkkal balról jobbra „letörlődik" (nem csak megjelenik) */
.fragment.foto-torol{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.fragment.foto-torol.visible{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}

/* belépő animáció aktív diára (nem-fragment elemek finoman úsznak be) */
.slide.active .beuszik{animation:beuszik .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes beuszik{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.slide.active .beuszik.k1{animation-delay:.05s}
.slide.active .beuszik.k2{animation-delay:.16s}
.slide.active .beuszik.k3{animation-delay:.27s}
.slide.active .beuszik.k4{animation-delay:.38s}

/* lebegő díszek (parallax hangulat) */
.doodles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.doodle{position:absolute;opacity:.5;animation:lebeg 9s ease-in-out infinite}
.doodle svg{width:100%;height:100%}
@keyframes lebeg{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.slide>.torzs{position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:center;height:100%}

/* buborék-lüktetés (figyelemfelkeltő pötty) */
@keyframes lukt{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.lukteto{animation:lukt 2.4s ease-in-out infinite}

/* ===========================================================================
   10) KVÍZ — kérdés-diák + válaszlehetőségek (A/B/C/D = kártyaszínek)
   =========================================================================== */
.kviz{--qc:var(--accent)}
.kviz .fejlec{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.kviz .kviz-jel{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);
  padding:7px 16px;border-radius:999px}
.kviz .kviz-szamlalo{font-weight:700;color:var(--muted);font-size:17px}
.kviz .kviz-jel{font-size:19px;padding:8px 18px}
.kviz .kviz-szamlalo{font-size:20px}
.kviz .kerdes{font-family:var(--display);font-weight:600;font-size:58px;line-height:1.08;
  margin:10px 0 6px;max-width:26ch}
.kviz .kerdes .hand{font-size:1.05em}
.valaszok{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.valasz{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--line);
  border-radius:16px;padding:20px 24px;font-size:31px;font-weight:600;box-shadow:var(--shadow-sm);
  transition:transform .3s ease, border-color .3s ease, background .3s ease}
.valasz .betu{flex:none;width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:30px;color:#fff}
.valasz[data-v="A"] .betu{background:var(--a)} .valasz[data-v="A"]{border-color:color-mix(in srgb,var(--a) 40%,#fff)}
.valasz[data-v="B"] .betu{background:var(--b)} .valasz[data-v="B"]{border-color:color-mix(in srgb,var(--b) 40%,#fff)}
.valasz[data-v="C"] .betu{background:var(--c)} .valasz[data-v="C"]{border-color:color-mix(in srgb,var(--c) 40%,#fff)}
.valasz[data-v="D"] .betu{background:var(--d)} .valasz[data-v="D"]{border-color:color-mix(in srgb,var(--d) 40%,#fff)}
.valasz .elem{margin-left:auto;font-size:15px;color:var(--muted);font-weight:600;white-space:nowrap}
/* helyes válasz kiemelése (a „megoldás" lépésnél kap .helyes-t) */
.valasz.helyes{border-color:var(--b-d);background:color-mix(in srgb,var(--b) 12%,#fff);
  transform:translateY(-2px) scale(1.015)}
.valasz.helyes .betu{box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 35%,#fff)}
.valasz.helyes::after{content:"✓ helyes";margin-left:10px;font-size:15px;font-weight:800;color:var(--b-d)}
.valasz.rossz{opacity:.5}

/* szavazás-hívogató sáv a kérdés alján */
.szavazz{margin-top:26px;display:flex;align-items:center;gap:14px;font-size:22px;color:var(--muted)}
.szavazz .kartya-ikon{font-size:26px}
.szavazz b{color:var(--accent-d)}

/* ===========================================================================
   11) EREDMÉNY-dia — ki hány kérdésre válaszolt helyesen (3-ból)
   =========================================================================== */
.eredmeny .fejlec{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.eredmeny h2{font-size:42px}
.pont-racs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-content:start;
  max-height:520px;overflow:auto}
.diak{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.diak .nev{font-weight:700;font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.diak .pont{font-weight:800;font-size:15px;color:var(--muted)}
.sav{display:flex;gap:5px}
.sav .p{flex:1;height:12px;border-radius:4px;background:color-mix(in srgb,var(--muted) 22%,#fff);
  transition:background .4s ease}
.sav .p.jo{background:var(--b)}
.diak.tel{border-color:var(--b-d);background:color-mix(in srgb,var(--b) 10%,#fff)}
.diak.tel .nev::after{content:" ⭐"}
.eredmeny .osszegzo{margin-top:auto;padding-top:16px;display:flex;gap:28px;font-size:18px}
.eredmeny .osszegzo b{font-size:26px;color:var(--accent-d)}

/* ===========================================================================
   12) SZKENNER-RÉTEG  (kviz.js nyitja meg; kamera + élő felismerés)
   =========================================================================== */
#szkenner-reteg{position:fixed;inset:0;z-index:60;display:none;
  background:rgba(12,10,24,.94);color:#fff;flex-direction:column}
#szkenner-reteg.nyit{display:flex}
#szkenner-reteg .sz-fejlec{display:flex;align-items:center;gap:16px;padding:16px 26px;
  background:rgba(0,0,0,.3)}
#szkenner-reteg .sz-fejlec h3{color:#fff;font-family:var(--body);font-weight:800;font-size:20px;margin:0}
#szkenner-reteg .sz-torzs{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:18px;padding:18px 26px;
  min-height:0}
#sz-szinter{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
#sz-video{display:none}
#sz-canvas{width:100%;max-height:100%;border-radius:14px;background:#000;
  border:1px solid rgba(255,255,255,.2)}
.sz-oldal{display:flex;flex-direction:column;min-height:0}
.sz-oldal h4{margin:0 0 10px;font-family:var(--body);font-weight:800;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;color:#bda9ee}
#sz-lista{flex:1;overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:6px}
.sz-sor{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 12px;font-size:16px}
.sz-sor .v{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-weight:800;color:#fff}
.sz-sor .nm{font-weight:600}
.sz-sor.uj{animation:beuszik .35s ease both}
#sz-allapot{padding:6px 2px 0;font-size:15px;color:#c9bdf0;min-height:24px}
.sz-gombok{display:flex;gap:12px;padding:14px 26px 20px;background:rgba(0,0,0,.25)}
.gomb{font-family:var(--body);font-weight:700;font-size:17px;border:none;border-radius:999px;
  padding:13px 26px;cursor:pointer;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.gomb:hover{filter:brightness(1.07)}
.gomb.mp{background:rgba(255,255,255,.16);color:#fff}
.gomb.zold{background:var(--b)}
.gomb:disabled{opacity:.4;cursor:default}
.sz-szaml{margin-left:auto;align-self:center;font-weight:800;font-size:19px}

/* ===========================================================================
   13) NAVIGÁCIÓS FELÜLET
   =========================================================================== */
.progress{position:fixed;left:0;top:0;height:4px;background:var(--accent);width:0;z-index:40;
  transition:width .35s ease;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}
.counter{position:fixed;right:16px;bottom:12px;font-size:13px;color:var(--muted);z-index:40;
  font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.6);padding:4px 10px;border-radius:999px}
/* 2026-09-08: a lapozó nyilak 46 px-esek voltak és `opacity:.5`-ön álltak,
   amit CSAK a `:hover` vitt fel — érintőképernyőn (digitális tábla, telefon)
   viszont NINCS hover, tehát végig halványak és aprók maradtak. Ezért nem
   lehetett ujjal vezetni a prezentációt. Most mindenkinek nagyobbak és jól
   láthatók; érintésre (pointer:coarse) még nagyobbak.
   A `pointer:coarse` a CSS saját érintés-felismerése — akkor is működik, ha a
   böngésző a JS-nek nem vallja be, hogy érintőképernyőn fut (ez több
   digitális táblánál előfordul). */
.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.85);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);cursor:pointer;z-index:40;color:var(--ink);font-size:26px;opacity:.85;
  transition:opacity .2s,transform .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.nav-arrow:hover{opacity:1}
.nav-arrow:active{opacity:1;transform:translateY(-50%) scale(.9)}
@media (pointer:coarse){
  .nav-arrow{width:74px;height:74px;font-size:32px;opacity:.92;
    background:rgba(255,255,255,.92);border:2px solid rgba(0,0,0,.14);
    box-shadow:0 6px 22px rgba(0,0,0,.28)}
}
.nav-prev{left:14px}.nav-next{right:14px}
/* 2026-09-08: a súgó EDDIG PONTOSAN a „Tanári mód" gombon állt (mindkettő
   left:14-16px; bottom:12px), ezért a két felirat egymásra csúszott minden
   diasoron. A súgó feljebb kerül, hogy elférjen a gomb fölött. */
.hint{position:fixed;left:16px;bottom:52px;font-size:12.5px;color:var(--muted);z-index:40;
  background:rgba(255,255,255,.6);padding:5px 11px;border-radius:999px;
  max-width:calc(100vw - 32px)}
.hint b{color:var(--accent-d)}

/* ===========================================================================
   14) ÁTTEKINTŐ RÁCS (O gomb)
   =========================================================================== */
body.overview .deck{position:static;width:auto;height:auto;transform:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px}
body.overview .stage{overflow:auto}
body.overview .slide{position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;
  transform:scale(1);aspect-ratio:16/9;height:auto;border-radius:12px;border:2px solid var(--line);
  cursor:pointer;overflow:hidden;box-shadow:var(--shadow-sm)}
body.overview .slide *{pointer-events:none}
body.overview .slide:hover{border-color:var(--accent)}
body.overview .fragment{opacity:1;transform:none;filter:none}
body.overview .nav-arrow,body.overview .hint{display:none}

/* ===========================================================================
   NYOMTATÁS / PDF  (2026-09-09)
   ---------------------------------------------------------------------------
   🚨 MIÉRT KELL: a diák-oldalon a „⬇ Letöltés" gomb a CSUPASZ HTML-fájlt
   töltötte le (`<a href="....html" download>`) — CSS, képek és motor nélkül.
   A gyerek egy formázatlan szövegfalat kapott, a képek helyén fájlnevekkel.
   Ez SOHA nem működött. Mostantól a gyerek PDF-et tölt le, amit ez a
   szabálycsomag rajzol ki: MINDEN dia egymás alá, laponként egy.

   Képernyőn a diák egymáson fekszenek (position:absolute), és csak az aktív
   látszik. Nyomtatásnál mindet egymás alá tesszük, teljes tartalommal
   (a fragmentek is látszanak, mert azokat kattintásra nyitja a motor).
   =========================================================================== */
@media print{
  @page{ size:1280px 720px; margin:0 }
  html,body{background:#fff !important;width:auto;height:auto;overflow:visible}
  /* a képernyős vezérlők nem kellenek a papírra */
  .nav-arrow,.hint,.counter,.progress,#tanari-gomb,#tanari-reteg,
  .kviz-mento,.lejatszo,.kl-overlay,.reszecske-por,.doodles,
  .szerk-ugras{display:none !important}

  /* a színpad és a kicsinyítés megszűnik: valódi méretben, egymás alá */
  .stage{position:static !important;overflow:visible !important}
  .deck{position:static !important;transform:none !important;
        width:1280px !important;height:auto !important;display:block !important}

  /* MINDEN dia látszik, laponként egy */
  .slide{position:relative !important;inset:auto !important;
         width:1280px !important;height:720px !important;
         opacity:1 !important;visibility:visible !important;
         transform:none !important;animation:none !important;filter:none !important;
         transition:none !important;page-break-after:always;break-after:page;
         overflow:hidden !important}
  .slide:last-child{page-break-after:auto;break-after:auto}

  /* a lépésenként felfedett tartalom papíron MIND látszik */
  .fragment,.beuszik,.karusszel .kk-lap{
    opacity:1 !important;visibility:visible !important;
    transform:none !important;filter:none !important;animation:none !important}

  /* a videó/animáció helye papíron: érthető jelölés a fekete doboz helyett.
     A fájlnevet elrejtjük — a gyereknek semmit nem mond, csak zavaró. */
  .mhely,.foto-keret{background:#f4f0f7 !important;border:1px dashed #b9a9cf !important}
  .video-keret .jel,.mhely .jel,.foto-keret .jel{display:flex !important}
  .mhely .jel code,.foto-keret .jel code,.video-keret .jel code{display:none !important}
  .mhely .jel::after,.foto-keret .jel::after{
    content:"Ezt a honlapon tudod megnézni";display:block;
    font-size:12px;opacity:.75;margin-top:4px}


  /* ---- 🔑 MOZGOKEP A PAPIRON (2026-09-09) -----------------------------------
     A gyerek eddig egy szaggatott ures dobozt kapott a videó/animáció helyén,
     „Ezt a honlapon tudod megnézni" felirattal — de azt NEM tudta meg, HOL.
     Mostantol ott all egy QR-kod, ami EGYENESEN arra a diara nyitja meg a
     leckét, ahol a mozgókép van. Egy beolvasás, és indíthatja. */
  .mhely.van-mozgokep,.foto-keret.van-mozgokep{
    background:#fff !important;border:2px solid #199E19 !important}
  /* a jelolo a doboz EGESZET kitolti — igy a QR pontosan kozepre kerul,
     es semmi nem csuszik ki a doboz mellé (ez volt az elso probanyomat hibaja) */
  .mhely.van-mozgokep .jel,.foto-keret.van-mozgokep .jel{
    position:absolute !important;inset:0 !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    gap:7px !important;padding:9px !important;margin:0 !important;
    box-sizing:border-box !important;text-align:center !important;opacity:1 !important}
  .mhely.van-mozgokep .jel::after,.foto-keret.van-mozgokep .jel::after{content:"" !important}
  .mhely .pdf-qr,.foto-keret .pdf-qr{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:7px;
    padding:9px;box-sizing:border-box;text-align:center}
  .mhely .pdf-qr .cm,.foto-keret .pdf-qr .cm{
    font:800 14px/1.25 var(--display,Inter,sans-serif);color:#241657;max-width:96%}
  /* 🚨 a `.mhely img{position:absolute;inset:0}` szabalyt kell hatastalanitani,
     kulonben a QR a doboz bal felso sarkaba ragad */
  .mhely .pdf-qr img,.foto-keret .pdf-qr img{
    position:static !important;inset:auto !important;
    width:clamp(58px,46%,118px) !important;height:auto !important;aspect-ratio:1;
    object-fit:contain !important;image-rendering:pixelated;display:block}
  .mhely .pdf-qr .sz,.foto-keret .pdf-qr .sz{
    font-size:10.5px;font-weight:700;line-height:1.25;color:#137a13;max-width:96%}

  /* ures kephely: NE igerjunk semmit — ott a honlapon sincs mit megnezni */
  .mhely.ures-hely .jel,.foto-keret.ures-hely .jel{visibility:hidden}
  .mhely.ures-hely,.foto-keret.ures-hely{border-color:#e4dced !important}

  /* ---- zarolap: a lecke OSSZES mozgokepe egy helyen ---- */
  /* 🚨 SAJAT (pz-) OSZTALYNEVEK: a `.lista` es a `.tetel` mar hasznalatban van a
     diakon (`.lista{flex-direction:column}`), es felulirta ezt a lapot — az elso
     probanyomaton emiatt allt a QR-lista egyetlen, tullogo oszlopban. */
  .pdf-zarolap{position:relative !important;width:1280px !important;height:720px !important;
    page-break-before:always;break-before:page;padding:52px 60px;box-sizing:border-box;
    font-family:var(--body,system-ui,sans-serif);color:#241657;background:#fff;overflow:hidden}
  .pdf-zarolap h2{font:800 38px/1.15 var(--display,Inter,sans-serif);margin:0 0 6px}
  .pdf-zarolap .pz-alcim{font-size:16px;opacity:.75;margin:0 0 24px;max-width:1000px}
  .pdf-zarolap .pz-lista{display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;gap:18px !important;align-items:start}
  .pdf-zarolap .pz-tetel{display:flex;flex-direction:column;align-items:center;gap:6px;
    border:2px solid #ded4ec;border-radius:14px;padding:12px 8px;box-sizing:border-box}
  .pdf-zarolap .pz-tetel img{position:static !important;inset:auto !important;
    width:124px !important;height:124px !important;object-fit:contain !important;
    image-rendering:pixelated;display:block}
  .pdf-zarolap .pz-cm{font-size:12.5px;font-weight:800;text-align:center;line-height:1.25}
  .pdf-zarolap .pz-dia{font-size:12px;opacity:.7}
  .pdf-zarolap .pz-lab{position:absolute;left:60px;right:60px;bottom:30px;font-size:13.5px;opacity:.8}

  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
}

/* ================= SZERKESZTŐ-TÁMOGATÁS (szabadon mozgatott elemek) =================
   A vizuális szerkesztő (szerkeszto.html) a mozgatott/átméretezett dobozokat
   position:absolute + inline left/top/width értékekkel menti. Hogy a KÉSZ diasor is
   pontosan ugyanúgy jelenjen meg, a .torzs pozicionálási kontextust kap. Ez a flex
   elrendezést NEM változtatja meg (a relative csak koordináta-alapot ad). */
body.uj .slide>.torzs{position:relative}


/* Az eredmény-dia üzenete, amíg a telefonról feltöltött eredmény megérkezik
   (vagy ha még nem érkezett meg). 2026-09-09. */
.pont-racs .tolt{grid-column:1/-1;padding:26px 18px;text-align:center;
  font:600 20px/1.5 var(--body,system-ui,sans-serif);color:var(--muted,#6b6485)}
.pont-racs .tolt b{color:var(--accent-d,#241657)}