/* leadai.hu -- Lead's pixel office, one immersive page (card 65e06122).
   Palette is sampled from the cover (store/lead-fb/epit.py), so the page and the scene are one room.
   Mobile-first; breakpoints 768 / 1024. */

@font-face { font-family: 'Pixelify Sans'; src: url(betuk/PixelifySans-var.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(betuk/InstrumentSans-var.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #081830;        /* room wall, cover background */
  --navy-2: #0d2444;
  --ink: #e6eef6;
  --muted: #9fb3c8;       /* 8.1:1 on --navy */
  --cyan: #2dc4da;
  --cyan-hi: #80f4f8;
  --amber: #f0b640;       /* the lamp in the scene */
  --pixel: 'Pixelify Sans', 'Courier New', monospace;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); color-scheme: dark; }
body { margin: 0; background: var(--navy); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--cyan-hi); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
h1, h2 { font-family: var(--pixel); font-weight: 600; letter-spacing: .01em; margin: 0; }
p { margin: 0; }

/* ---------- hero ---------- */
.hos {
  min-height: 88vh; min-height: 88svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 18px; padding: 56px 20px 40px;
  /* faint pixel grid: the same 8 px cell the scene is built on */
  background-image:
    linear-gradient(rgba(45, 196, 218, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 196, 218, .06) 1px, transparent 1px);
  background-size: 16px 16px;
}
.hos__logo { width: 124px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(45, 196, 218, .35)); }
.hos__felulcim { font: 500 15px/1 var(--pixel); color: var(--amber); letter-spacing: .12em; text-transform: uppercase; }
.hos__cim { font-size: clamp(34px, 9vw, 64px); line-height: 1.08; max-width: 19ch; text-shadow: 4px 4px 0 var(--navy-2); }
.hos__bevezeto { max-width: 34em; color: var(--muted); font-size: 17px; }
.hos__gorgess { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 14px/1 var(--pixel); color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; }
/* pixel arrow: two stacked bars, no image */
.nyil { display: block; width: 16px; height: 12px; background:
  linear-gradient(var(--cyan), var(--cyan)) 0 0 / 4px 4px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) 12px 0 / 4px 4px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) 4px 4px / 8px 4px no-repeat,
  linear-gradient(var(--cyan), var(--cyan)) 6px 8px / 4px 4px no-repeat;
  animation: ugral 1.4s steps(2, end) infinite; }
@keyframes ugral { 0% { transform: translateY(0); } 100% { transform: translateY(8px); } }

/* ---------- the scroll story ---------- */
/* Tall track; the stage sticks while the reader scrolls through it. 420vh = 320vh of scroll
   for 100 ticks (assumption: ~3 screens of thumb-scrolling per three scenes reads calm, not
   rushed; checked 2026-10-14 at 1440x900 and 390x844). */
.tortenet { position: relative; height: 420vh; }
.szinpad {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 12px 0 22px;
}
.vaszon-keret { flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; }
#jelenet { display: block; image-rendering: pixelated; background: var(--navy); }
.nojs-kep { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.nojs-szoveg { text-align: center; color: var(--muted); padding: 10px 20px; }

.feliratok { display: grid; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }
.felirat { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .15s, transform .15s; }
.felirat.aktiv { opacity: 1; transform: none; transition: opacity .3s .15s, transform .3s .15s; }  /* old one out first, then the new one in: no overlapping lines */
.felirat__sorszam { font: 500 14px/1 var(--pixel); color: var(--amber); letter-spacing: .1em; margin-bottom: 6px; }
.felirat__cim { font-size: 26px; line-height: 1.15; margin-bottom: 8px; color: var(--cyan-hi); }
.felirat__szoveg { color: var(--ink); font-size: 16px; line-height: 1.55; max-width: 40em; }
.lepes-jel { grid-area: 2 / 1; display: flex; gap: 8px; margin-top: 14px; }
.lepes-jel span { width: 10px; height: 10px; background: var(--navy-2); box-shadow: inset 0 0 0 2px var(--cyan); }
.lepes-jel span.aktiv { background: var(--cyan); }

/* ---------- reduced motion: the three scenes as stills ---------- */
.allokepek { display: flex; flex-direction: column; gap: 56px; padding: 24px 0 40px; }
.allokep { margin: 0; }
.allokep canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.allokep figcaption { max-width: 760px; margin: 18px auto 0; padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .tortenet { display: none; }
  .nyil { animation: none; }
  .felirat { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .allokepek { display: none; }
}

/* ---------- Facebook ---------- */
.fb {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 72px 20px 80px; border-top: 4px solid var(--navy-2);
}
.fb__cim { font-size: clamp(28px, 7vw, 44px); line-height: 1.12; max-width: 24ch; }
.fb__szoveg { color: var(--muted); max-width: 30em; }
.fb-gomb {
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 520px; min-height: 76px; padding: 14px 24px;
  background: var(--amber); color: var(--navy);
  font: 600 20px/1.2 var(--pixel); text-decoration: none;
  border: 4px solid var(--navy); outline: 4px solid var(--amber);
  box-shadow: 8px 8px 0 4px var(--cyan);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.fb-gomb:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 4px var(--cyan); }
.fb-gomb:active { transform: translate(8px, 8px); box-shadow: 0 0 0 4px var(--cyan); }
.fb-gomb:focus-visible { outline: 4px solid var(--ink); }
.fb-gomb__ikon { flex: 0 0 auto; width: 32px; height: 32px; }
.fb__kicsi { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- the game: "Lead egy napja" (card 30629c97) ---------- */
.jatek {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 64px 20px 72px; border-top: 4px solid var(--navy-2);
}
.jatek__cim { font-size: clamp(28px, 7vw, 44px); line-height: 1.12; }
.jatek__szoveg { color: var(--muted); max-width: 34em; }
/* The room is 120x84 cells. Width: the column, at most 840 px (7 px a cell), and never so tall that
   the HUD, the room and the legend do not fit one screen (200 px for HUD + legend + margins;
   checked 2026-10-14 at 1440x900 and 390x844). */
.jatek__doboz { width: min(100%, 840px, calc((100svh - 200px) * 120 / 84)); margin-top: 6px; }
.jatek__hud { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 0 0 10px; font: 600 16px/1 var(--pixel); }
.jatek__adat { color: var(--muted); letter-spacing: .04em; }
.jatek__adat output { color: var(--cyan-hi); font-size: 20px; margin-left: 4px; display: inline-block; min-width: 2.2ch; text-align: left; }
.jatek__hang {
  margin-left: auto; min-height: 44px; padding: 8px 14px; cursor: pointer;
  font: 600 15px/1 var(--pixel); color: var(--ink); background: var(--navy-2);
  border: 3px solid var(--cyan); border-radius: 0;
}
.jatek__hang[aria-pressed="true"] { border-color: var(--muted); color: var(--muted); }
.jatek__keret { position: relative; width: 100%; aspect-ratio: 120 / 84; background: var(--navy-2); border: 4px solid var(--navy-2); box-shadow: 8px 8px 0 0 #051020; outline: none; }
#jatek-vaszon { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: manipulation; }
/* while a round runs, a swipe on the room steers Lead instead of scrolling the page */
.jatek__keret--megy #jatek-vaszon { touch-action: none; user-select: none; -webkit-user-select: none; }
.jatek__ablak {
  position: absolute; inset: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; background: rgba(5, 16, 32, .82);
}
.jatek__ablak[hidden] { display: none; }
.jatek__ablak-cim { font: 600 clamp(18px, 4.6vw, 30px)/1.15 var(--pixel); color: var(--cyan-hi); }
.jatek__ablak-szoveg { font-size: clamp(13px, 3.4vw, 17px); line-height: 1.45; max-width: 30em; }
.jatek__ablak-kicsi { font: 500 14px/1.2 var(--pixel); color: var(--amber); letter-spacing: .04em; }
.jatek__vegpont { font: 700 clamp(26px, 7vw, 44px)/1 var(--pixel); color: var(--amber); }
.jatek__gomb {
  min-height: 44px; padding: 10px 26px; cursor: pointer;
  font: 600 18px/1 var(--pixel); color: var(--navy); background: var(--amber);
  border: 3px solid var(--navy); border-radius: 0; outline: 3px solid var(--amber);
  box-shadow: 5px 5px 0 3px var(--cyan);
}
.jatek__gomb:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 3px var(--cyan); }
.jatek__gomb:focus-visible { outline: 3px solid var(--ink); }
.jatek__link { font: 600 16px/1 var(--pixel); padding: 12px 6px; }
.jatek__nojs { position: absolute; inset: auto 0 40%; color: var(--muted); }
/* legend: three equal columns sit right under the three desks (desk centres at 1/6, 3/6, 5/6) */
.jatek__jelek { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); font: 600 15px/1.2 var(--pixel); color: var(--ink); }
.jatek__jelek li { display: flex; align-items: center; justify-content: center; gap: 8px; }
.jatek__szin { display: inline-block; width: 14px; height: 14px; box-shadow: inset 0 0 0 2px #051020; flex: 0 0 auto; }
.jatek__szin--kep { background: #ee7ac8; }
.jatek__szin--szoveg { background: #f0b640; }
.jatek__szin--kod { background: #3cd6a0; }
/* narrow phones: HUD and mute button on one line (fits 350 px, checked 2026-10-14 at 390) */
@media (max-width: 480px) {
  .jatek__hud { gap: 6px 12px; font-size: 13px; }
  .jatek__adat output { font-size: 16px; margin-left: 2px; }
  .jatek__hang { padding: 6px 10px; font-size: 13px; }
  .jatek__jelek { font-size: 13px; }
  .jatek__jelek li { gap: 5px; }
}

/* ---------- contact: two pixel-framed tiles, stacked on mobile ---------- */
.kapcsolat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 64px 20px 72px; border-top: 4px solid var(--navy-2);
}
.kapcsolat__cim { font-size: clamp(28px, 7vw, 44px); line-height: 1.12; }
.kapcsolat__szoveg { color: var(--muted); max-width: 30em; }
.kapcsolat__csempek { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; max-width: 760px; margin-top: 10px; }
.csempe {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px;
  align-items: center; text-align: left; min-height: 76px; padding: 16px 20px;
  background: var(--navy); color: var(--ink); text-decoration: none;
  border: 4px solid var(--cyan); box-shadow: 6px 6px 0 0 var(--navy-2);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.csempe:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 0 var(--navy-2); }
.csempe:focus-visible { outline: 4px solid var(--amber); outline-offset: 2px; }
.csempe__ikon { grid-row: 1 / span 2; width: 32px; height: 32px; color: var(--cyan-hi); }
.csempe__cimke { font: 600 14px/1.2 var(--pixel); color: var(--muted); letter-spacing: .04em; }
/* the number never breaks (its digits are joined by NBSP); the address keeps one line too while it fits.
   Values use the text face, not the pixel one: in Pixelify Sans the 2 read as an 8 (Zoltan TG 54102, 2026-10-14) */
.csempe__ertek { font: 600 20px/1.25 var(--sans); color: var(--cyan-hi); white-space: nowrap; }
/* below 400px the 20px address (about 243px) plus icon, gap and padding asks 339px, more than the column
   (280px at 320, 320px at 360; measured 2026-10-14, Codex P2 on 117e352441): tighter tile, smaller type,
   and the address may break after the @ (<wbr>) if a font fallback is wider still */
@media (max-width: 399px) {
  .kapcsolat { padding-inline: 16px; }
  .csempe { grid-template-columns: 24px 1fr; column-gap: 12px; padding: 14px 12px; }
  .csempe__ikon { width: 24px; height: 24px; }
  .csempe__ertek { font-size: 17px; }
  .csempe__ertek--cim { white-space: normal; }
}

/* ---------- footer ---------- */
.lab { padding: 28px 20px 120px; text-align: center; color: var(--muted); font-size: 15px; border-top: 4px solid var(--navy-2); display: flex; flex-direction: column; gap: 8px; }
.lab a { color: var(--cyan-hi); }
/* maker's mark: white logo on navy, 48px tall (2x asset 187x96) */
.lab__logo { display: inline-block; align-self: center; margin-bottom: 6px; padding: 4px; line-height: 0; }
.lab__logo img { display: block; width: 94px; height: 48px; }
.lab__logo:focus-visible { outline: 4px solid var(--amber); }

@media (min-width: 768px) {
  .hos__bevezeto { font-size: 19px; }
  .felirat__cim { font-size: 32px; }
  .felirat__szoveg { font-size: 18px; }
  .fb-gomb { font-size: 24px; min-height: 84px; }
  .kapcsolat__csempek { grid-template-columns: 1fr 1fr; }
  .csempe__ertek { font-size: 22px; }
  .lab { padding-bottom: 96px; }
}

/* ---------- consent bar: layer 1 = Elfogadom + Beállítások, layer 2 = per-category switches ----------
   Landing placement: non-blocking bottom bar. The card lets taps that miss a control
   pass through to the page; layer 2 is fully interactive (opened on purpose). */
body{padding-bottom:var(--kk-sav-hely,0px)}
.kkc{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:980px;margin:0 auto;max-height:calc(100vh - 32px);overflow:auto;background:#0d2444;border:2px solid #2dc4da;border-radius:0;box-shadow:6px 6px 0 rgba(0,0,0,.45);font:400 14.5px/1.5 var(--sans);color:#d4e2ee;pointer-events:none}
.kkc.kkc--r2{pointer-events:auto}
.kkc a,.kkc button,.kkc input{pointer-events:auto}
.kkc [hidden]{display:none!important}
.kkc__belso{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:16px 20px}
.kkc__szoveg{flex:1 1 320px;margin:0}
.kkc a{color:var(--cyan-hi)}
.kkc__gombok{display:flex;gap:10px;flex-shrink:0}
.kkc__gomb{font:600 14.5px/1 var(--sans);min-height:44px;padding:10px 18px;border-radius:0;cursor:pointer;background:transparent;color:#d4e2ee;border:2px solid rgba(230,238,246,.35)}
.kkc__gomb:hover{border-color:var(--cyan-hi);color:var(--cyan-hi)}
.kkc__gomb--fo{background:var(--amber);color:var(--navy);border-color:var(--amber)}
.kkc__gomb--fo:hover{background:#ffd06a;color:var(--navy)}
.kkc__r2{display:flex;flex-direction:column;gap:10px;width:100%}
.kkc__r2cim{margin:0;font:600 18px/1.3 var(--pixel);color:var(--ink)}
.kkc__r2cim:focus{outline:none}
.kkc__r2cim:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.kkc__kat{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 0 2px;border-top:1px solid rgba(230,238,246,.16)}
.kkc__katszoveg{margin:0;font-size:13.5px;line-height:1.45;color:#c2d3e2}
.kkc__katszoveg b{display:block;font-size:14.5px;color:var(--ink)}
.kkc__mindig{flex-shrink:0;font-size:13px;font-weight:600;color:#c2d3e2;padding-top:2px}
/* Switch: 44 px wide visual track inside a 44 px tall hit area. Off = slate, on = cyan. */
.kkc__kapcs{position:relative;flex-shrink:0;display:inline-flex;align-items:center;width:48px;height:44px;margin-top:-10px;cursor:pointer}
.kkc__kapcs input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kkc__kapcs span{position:relative;display:block;width:48px;height:26px;background:#3c5370;border:2px solid rgba(230,238,246,.55);transition:background .15s}
.kkc__kapcs span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#e6eef6;transition:transform .15s}
.kkc__kapcs input:checked+span{background:#1a8fa3;border-color:var(--cyan-hi)}
.kkc__kapcs input:checked+span::after{transform:translateX(22px)}
.kkc__kapcs input:focus-visible+span{outline:3px solid var(--amber);outline-offset:3px}
.kkc__r2 .kkc__gombok{flex-wrap:wrap;margin-top:4px}
.kkc__r2 .kkc__gomb{flex:1 1 180px}
@media (prefers-reduced-motion:reduce){.kkc__kapcs span,.kkc__kapcs span::after{transition:none}}
@media (max-width:767px){.kkc{left:8px;right:8px;bottom:8px;max-height:calc(100vh - 16px);font-size:12.5px;line-height:1.38}.kkc__belso{padding:10px 12px;gap:8px}.kkc__gombok{width:100%}.kkc__gomb{flex:1;min-height:44px;padding:8px 10px;font-size:13.5px}.kkc.kkc--r2 .kkc__belso{padding:12px 14px}.kkc__katszoveg{font-size:12.5px}.kkc__katszoveg b{font-size:13.5px}}