:root {
  --black: #000;
  --ink: #eef1e4;          /* törtfehér szöveg */
  --dim: rgba(238, 241, 228, .55);
  --faint: rgba(238, 241, 228, .32);
  --line: rgba(238, 241, 228, .12);
  --glow: #cdfd02;         /* neon lime – fény, kiemelés */
  --bottle: #34470a;       /* mély olívzöld – árnyék */
  --film: #0b0e03;         /* filmszalag alap */
  --glass: rgba(14, 17, 6, .55);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(18px, 3vw, 36px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--black);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  letter-spacing: -.011em;
  font-feature-settings: 'ss01', 'cv11';
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

canvas.gl {
  position: fixed;
  inset: 0;
  display: block;
}

button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 6px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* üvegfelület – menü, szűrők, ablakok közös alapja */
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- fejléc ---------- */
.top {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .8s .5s var(--ease), transform .8s .5s var(--ease);
}
body.ready .top { opacity: 1; transform: none; }
.top > * { pointer-events: auto; }
.logo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 99px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 40px rgba(205, 253, 2, .07);
}
.menu button {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  color: var(--faint);
  transition: color .4s;
}
.menu button:hover, .menu button.on { color: var(--ink); }
.menu-wave { width: 44px; height: 12px; overflow: visible; }
.menu-wave path { fill: none; stroke: var(--glow); stroke-width: 1.2; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--glow)); }

/* ---------- írisz-fázis: amíg az objektív nincs nyitva, csak az látszik ---------- */
body.iris .top, body.iris .panel, body.iris .rail { opacity: 0 !important; pointer-events: none !important; }
body.iris .panel > *, body.iris .top > * { pointer-events: none !important; }
.top, .panel, .rail { transition: opacity .9s var(--ease) !important; }

/* ---------- bal panel ---------- */
.panel {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  width: min(560px, calc(100vw - 2 * var(--pad)));
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.panel > * { pointer-events: auto; }
body.is-focus .panel { opacity: 0; }
body.is-focus .panel > * { pointer-events: none; }

.now { margin-bottom: 26px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
body.ready:not(.iris) .now { opacity: 1; }
.now-cat { margin: 0 0 8px; color: var(--glow); font-size: 13px; font-weight: 500; }
.now-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
}
.now-meta { margin: 10px 0 0; color: var(--dim); }
.now.swap > * { animation: swap .8s var(--ease-out) both; }
.now.swap > :nth-child(2) { animation-delay: 50ms; }
.now.swap > :nth-child(3) { animation-delay: 100ms; }
@keyframes swap { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

.filters { opacity: 0; transition: opacity .8s 1.1s var(--ease); }
body.ready .filters { opacity: 1; }
.filters p { margin: 0 0 10px; color: var(--faint); font-size: 13px; }
.filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 6px; }   /* asztalon egy sorban */
.filters li { flex: none; }
.filters li.br { display: none; }
.filters button {
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 14px;
  color: var(--dim);
  background: rgba(14, 17, 6, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .3s, box-shadow .3s, background-color .3s;
}
.filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(205, 253, 2, .4); }
.filters button[aria-current="true"] { color: var(--black); background: var(--glow); box-shadow: 0 0 24px rgba(205, 253, 2, .35); }

/* ---------- jobb oldali sáv: kattintható blokkok, projektenként egy ---------- */
.rail {
  position: fixed;
  right: calc(var(--pad) - 8px);
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  opacity: 0;
  transition: opacity .6s;
}
body.ready .rail { opacity: 1; }
body.is-focus .rail { opacity: 0; pointer-events: none; }
.rail-num { color: var(--ink); }
.rail-segs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rail-segs li.gap { height: 6px; }                 /* kategóriák között kis szünet */
.rail-seg {
  position: relative;
  display: block;
  width: 20px;
  height: 22px;
  border-radius: 4px;
}
.rail-seg::before {                                /* maga a blokk – a gomb nagyobb, hogy könnyű legyen eltalálni */
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 1px; bottom: 1px;
  border-radius: 2px;
  background: rgba(238, 241, 228, .18);
  transition: background-color .3s, left .35s var(--ease-out), right .35s var(--ease-out), box-shadow .3s;
}
.rail-seg:hover::before { background: rgba(238, 241, 228, .5); left: 6px; right: 6px; }
.rail-seg[aria-current="true"]::before { background: var(--glow); left: 5px; right: 5px; box-shadow: 0 0 12px rgba(205, 253, 2, .6); }
.rail-seg .tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 6px -50%;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink);
  background: rgba(14, 17, 6, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .3s var(--ease-out);
}
.rail-seg:hover .tip, .rail-seg:focus-visible .tip { opacity: 1; translate: 0 -50%; }
.rail-seg .tip small { color: var(--glow); margin-right: 6px; font-size: 11px; }

/* ---------- vissza az elejére ---------- */
.totop {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(14, 17, 6, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease-out), box-shadow .3s, color .3s;
}
.totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.totop:hover { color: var(--glow); box-shadow: inset 0 0 0 1px var(--glow); }
.totop:hover svg { transform: translateY(-2px); }
body.far .totop { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.iris .totop, body.is-focus .totop { opacity: 0 !important; pointer-events: none !important; }

.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 30;
  display: none;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--glow);
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  scale: .6;
  transition: opacity .2s, scale .3s var(--ease-out);
}
.cursor.on { opacity: 1; scale: 1; }
@media (pointer: fine) { .cursor { display: block; } }

/* ---------- betöltő ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--black);
  transition: opacity 1s .2s var(--ease), visibility 0s 1.2s;
}
/* a korong középpontja = a képernyő közepe = az írisz középpontja */
.loader-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.loader-glyphs {
  margin: 0;
  font: 500 11px/13px ui-monospace, 'SF Mono', Consolas, monospace;
  letter-spacing: .5px;
  color: rgba(205, 253, 2, .13);
  white-space: pre;
}
.loader-glyphs b { font-weight: 500; color: var(--glow); text-shadow: 0 0 8px rgba(205, 253, 2, .65); }
.loader-glyphs i { font-style: normal; color: #f4ffc8; }
.loader-count {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 6px;
  background: var(--black);
  font: 600 12px/1 ui-monospace, 'SF Mono', Consolas, monospace;
  color: #f6ffd8;
  letter-spacing: .06em;
}
.loader-name { position: absolute; left: 0; right: 0; top: calc(50% + 118px); margin: 0; text-align: center; font-size: 13px; color: var(--faint); letter-spacing: -.01em; }
body.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- megnyitott projekt: mögötte a weboldal elmosva, elsötétítve ---------- */
.detail {
  position: fixed;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
body.is-open .detail { visibility: visible; opacity: 1; transition: opacity .6s var(--ease) .35s; }
.detail-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75) 100%),
    rgba(0, 0, 0, .25);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
.detail-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sw, 60vw);
  height: var(--sh, 34vw);
  transform: translate(-50%, -50%) scale(.82);
  border-radius: 16px;
  overflow: hidden;
  background: var(--film);
  box-shadow: 0 0 0 1px rgba(205, 253, 2, .3), 0 0 90px rgba(205, 253, 2, .1), 0 40px 120px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
}
body.is-open .detail-stage { transform: translate(-50%, -50%); opacity: 1; transition: transform .8s var(--ease-out) .55s, opacity .5s var(--ease) .55s; }
.detail-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* teljes képernyőn a videó mindig egészében látszik (21:9 monitoron, telefonon is), a maradék fekete sáv */
.detail-video:fullscreen { object-fit: contain; }
.detail-video:-webkit-full-screen { object-fit: contain; }
.detail-sound {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  background: var(--glow);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .4);
}
.detail-sound[hidden] { display: none; }
.detail-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detail-x {
  position: absolute;
  top: calc(var(--pad) + env(safe-area-inset-top, 0px));
  right: var(--pad);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(14, 17, 6, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, transform .4s var(--ease-out), box-shadow .3s;
}
.detail-x:hover { background: rgba(205, 253, 2, .14); box-shadow: inset 0 0 0 1px var(--glow); transform: rotate(90deg); }
.detail-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.detail-info {
  position: absolute;
  left: var(--pad);
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  width: min(340px, calc(100vw - 2 * var(--pad)));
  transform: translateY(16px);
  opacity: 0;
  filter: blur(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
body.is-open .detail-info { opacity: 1; transform: none; filter: none; transition-delay: .45s; transition-duration: .9s; }
.detail-cat { margin: 0 0 8px; color: var(--glow); font-size: 13px; font-weight: 500; }
.detail-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.045em;
}
.detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0 0 16px; }
.detail-facts dt { color: var(--faint); }
.detail-facts dd { margin: 0; }
.detail-desc { margin: 0 0 22px; color: var(--dim); max-width: 42ch; }
.detail-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 99px;
  font-weight: 500;
  background: rgba(14, 17, 6, .5);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s, color .3s;
}
.detail-close:hover { color: var(--glow); box-shadow: inset 0 0 0 1px var(--glow); }
.detail-close kbd { font: inherit; font-size: 12px; color: var(--dim); padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); }

/* ---------- kapcsolat ---------- */
.contact {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 24px;
  color: var(--ink);
  background: transparent;
  overflow: visible;
}
.contact[open] { animation: pop .7s var(--ease-out); }
.contact.closing { animation: unpop .35s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(10px); } }
@keyframes unpop { to { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(6px); } }
.contact::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .5s var(--ease); }
.contact.closing::backdrop { animation: fade .35s var(--ease) reverse forwards; }
@keyframes fade { from { opacity: 0; } }

/* forgó, zöld fényű keret */
.contact::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1px;
  background: conic-gradient(from var(--a, 0deg), transparent 0 25%, rgba(205, 253, 2, .9) 38%, transparent 50% 75%, rgba(205, 253, 2, .4) 88%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 6s linear infinite;
  pointer-events: none;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }

.contact-inner {
  position: relative;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(205, 253, 2, .12), transparent 60%),
    rgba(10, 12, 5, .82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 120px rgba(0, 0, 0, .7);
}
.contact-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.contact-head h2 { margin: 0; font-size: 15px; font-weight: 500; color: var(--dim); letter-spacing: -.01em; }
.contact-x {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, transform .4s var(--ease-out);
}
.contact-x:hover { background: rgba(205, 253, 2, .14); transform: rotate(90deg); }
.contact-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.contact-lead { margin: 0 0 22px; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }

.contact-mail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.contact-mail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: var(--glow);
  -webkit-user-select: text;
  user-select: text;
}
.contact-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-copy {
  flex: none;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  background: var(--glow);
  transition: filter .3s, transform .3s var(--ease-out);
}
.contact-copy:hover { filter: brightness(1.1); }
.contact-copy:active { transform: scale(.96); }

.contact-social { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-social a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s, box-shadow .3s;
}
.contact-social a:hover { background: rgba(205, 253, 2, .08); box-shadow: inset 0 0 0 1px rgba(205, 253, 2, .45); }
.contact-social .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-social .ext { width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; transition: stroke .3s, transform .3s var(--ease-out); }
.contact-social a:hover .ext { stroke: var(--glow); transform: translate(2px, -2px); }
.contact-social strong { display: block; font-weight: 500; }
.contact-social small { display: block; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- lábléc: billentyűzet-konzol ---------- */
.foot {
  --fp: 0;                                       /* 0 = rejtve, 1 = teljesen fent (JS állítja görgetésre) */
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 6;
  transform: translateY(calc((1 - var(--fp)) * 115%));
  pointer-events: none;
}
body.at-foot .foot { pointer-events: auto; }
body.at-foot .panel, body.at-foot .rail, body.at-foot .totop { opacity: 0 !important; pointer-events: none !important; }
.foot-glow {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 55%;
  height: 420px;
  background: radial-gradient(48% 62% at 50% 100%, rgba(205, 253, 2, .42), rgba(205, 253, 2, .12) 50%, transparent 76%);
  filter: blur(10px);
  opacity: calc(var(--fp) * 1);
  pointer-events: none;
}

/* a renderelt konzol: képszeletek (bal | nyújtott rács | jobb), szkóp-videó, LCD-réteg, gombsprite-ok */
.deck { position: relative; width: 100%; height: 280px; }
.deck-img { position: absolute; inset: 0; display: flex; pointer-events: none; }
.deck-img > div { height: 100%; background: no-repeat 0 0 / 100% 100%; }
.deck-l, .deck-r { flex: none; }
.deck-m { flex: 1; }
.deck-r {                                         /* az eleje lágyan ráúszik a nyújtott rácsra */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 0px));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 0px));
}
.deck-base { display: none; flex: 1; }
.deck.mob .deck-l, .deck.mob .deck-m, .deck.mob .deck-r, .deck.mob .deck-scope { display: none; }
.deck.mob .deck-base { display: block; }
.deck-scope {
  position: absolute;
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  /* a videó széle lágyan beleolvad az állóképbe */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent), linear-gradient(transparent, #000 10px, #000 calc(100% - 10px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent), linear-gradient(transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-composite: intersect;
}
.deck-lcd {                                       /* renderelt LCD-üzenet a kijelzőn, lágy ki-be úszással */
  position: absolute;
  z-index: 2;
  background: no-repeat 0 0 / 100% 100%;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  /* a kivágás széle beleolvad az állóképbe */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent), linear-gradient(transparent, #000 4px, #000 calc(100% - 4px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent), linear-gradient(transparent, #000 4px, #000 calc(100% - 4px), transparent);
  mask-composite: intersect;
}
.deck-lcd.on { opacity: 1; }
.deck-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kimg { position: absolute; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; }
.deck .key {                                      /* átlátszó, kattintható réteg a renderelt sapkák fölött */
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deck .key span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deck .key:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* ---------- WebGL nélkül ---------- */
.fallback { position: relative; z-index: 4; height: 100%; overflow: auto; touch-action: auto; padding: 120px var(--pad) 60px; display: grid; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fallback video { width: 100%; border-radius: 12px; background: var(--film); }
.fallback h3 { margin: 12px 0 0; font-weight: 600; letter-spacing: -.03em; font-size: 22px; }
body.no-webgl { overflow: auto; touch-action: auto; }
body.no-webgl .panel, body.no-webgl .rail, body.no-webgl .totop, body.no-webgl .loader { display: none; }

.nojs { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; }

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .rail { display: none; }
  .totop { left: auto; right: var(--pad); bottom: auto; top: calc(78px + env(safe-area-inset-top, 0px)); padding: 10px; transform: translateY(-6px); }
  .totop span { display: none; }
  body.far .totop { transform: none; }
  .now { margin-bottom: 18px; }
  /* mobilon két, nagyjából egyforma hosszú sor */
  .filters ul { flex-wrap: wrap; }
  .filters li.br { display: block; flex-basis: 100%; height: 0; }
  .menu-wave { width: 28px; }
  .detail-stage { top: 38%; }
  .detail-desc { display: none; }
  .contact-inner { padding: 22px; }
  .contact-lead { font-size: 19px; }
  .contact-social { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}