/* ============================================================
   RAJZOLT ELŐNÉZET (.elonez) — tiszta CSS, semmi kép, semmi JS

   Minden minta ugyanabból a három rétegből épül fel:
     • maga az elem háttere = a „jelenet" (ég, fal, alap-szín),
     • a ::before         = a téma (megvilágított gömb, alak, keret),
     • a ::after          = a ráadás (fénynyaláb, rács, szemcse, karc).
   A kártya pipás lapkáját rajzoló .opt::before / .opt::after ÉRINTETLEN.
   A minták saját, rögzített színekkel dolgoznak (ez egy „fénykép"),
   ezért sötét és világos témában egyformán olvashatók; csak a
   keretvonal igazodik a témához.
   ============================================================ */
.elonez {
  position: relative; display: block; width: 100%; height: 40px;
  flex: 0 0 auto; margin-bottom: 3px;
  border-radius: 3px; overflow: hidden; background: #15151b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
:root[data-theme="light"] .elonez { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16); }
.elonez::before, .elonez::after { content: ""; position: absolute; inset: 0; }

/* Az előnézetes kártya nagyobb — a user kifogása szerint a régi „alig látszott". */
/* Két hasáb esetén a hasáb kb. 400-430 px — a 232 px-es minimum ott már csak EGY
   kártyát engedett (232×2+12 = 476 > 424), így fele annyi fért a képernyőre.
   188 px-nél a legszűkebb hasábon is kettő van: 188×2+12 = 388 < 400. */
.sec-grid .opts.elonezetes { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); }

/* ── 1. VILÁGÍTÁS — megvilágított gömb: látszik a fény iránya és keménysége ── */
.ep-lighting { background: #15161d; }
.ep-lighting::before {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0f0f4, #8b8b96 58%, #2a2a34 100%);
}
.f-mozis { background: linear-gradient(100deg, #123043 0%, #0c1620 55%, #20130c 100%); }
.f-mozis::before { background: radial-gradient(circle at 26% 30%, #ffd9a2, #c2763a 45%, #16202b 88%); }
.f-mozis::after { background: radial-gradient(circle at 74% 46%, rgba(90, 190, 255, 0.42), transparent 40%); }

.f-volum { background: linear-gradient(160deg, #1d2434, #0b0e15); }
.f-volum::before { background: radial-gradient(circle at 40% 24%, #fff3d0, #8a7a55 55%, #1b1f2a 100%); }
.f-volum::after { background: repeating-linear-gradient(72deg, rgba(255, 240, 200, 0.30) 0 3px, transparent 3px 11px); }

.f-aranyora { background: linear-gradient(90deg, #ffb35c 0%, #c2701f 30%, #3a2412 100%); }
.f-aranyora::before { background: radial-gradient(circle at 12% 44%, #fff0cd, #e09a3e 40%, #3d2a16 92%); }

.f-neon { background: linear-gradient(90deg, #3d0a33 0%, #12101f 50%, #052b3a 100%); }
.f-neon::before { background: linear-gradient(90deg, #ff3ec8 0%, #5a2f66 46%, #2fd8ff 100%); }
.f-neon::after {
  background: radial-gradient(circle at 6% 50%, rgba(255, 62, 200, 0.45), transparent 36%),
              radial-gradient(circle at 94% 50%, rgba(47, 216, 255, 0.45), transparent 36%);
}

.f-rolo { background: #151820; }
.f-rolo::before { background: radial-gradient(circle at 30% 30%, #e8e4d6, #8e8878 60%, #22222b 100%); }
.f-rolo::after { background: repeating-linear-gradient(100deg, rgba(255, 238, 190, 0.38) 0 4px, rgba(0, 0, 0, 0.42) 4px 10px); }

.f-pont { background: radial-gradient(circle at 50% 18%, #33333e 0%, #0b0b10 62%); }
.f-pont::before { background: radial-gradient(circle at 42% 18%, #ffffff 0%, #ffffff 20%, #3c3c46 30%, #0d0d12 62%); }

.f-rembrandt { background: linear-gradient(120deg, #241f1a, #0c0b0a); }
.f-rembrandt::before { background: radial-gradient(circle at 30% 22%, #ffe6c0 0%, #a8794a 34%, #241a12 70%); }

.f-elfeny { background: linear-gradient(90deg, #0b0d12, #141a24); }
.f-elfeny::before { background: radial-gradient(circle at 88% 38%, #ffffff 0%, #cfe4ff 9%, #2a3140 34%, #12151c 78%); }

.f-softbox { background: linear-gradient(180deg, #d8d9dd, #a9abb2); }
.f-softbox::before { background: radial-gradient(circle at 36% 26%, #ffffff, #c9cbd2 62%, #7c7f88 100%); }
.f-softbox::after { background: radial-gradient(ellipse at 52% 90%, rgba(0, 0, 0, 0.30), transparent 50%); }

.f-dramai { background: linear-gradient(90deg, #000000 56%, #1b1b22 100%); }
.f-dramai::before { background: linear-gradient(88deg, #0a0a0d 52%, #6e6a60 66%, #f4e9d4 100%); }

.f-biolum { background: radial-gradient(ellipse at 50% 50%, #0d3b3a 0%, #04100f 72%); }
.f-biolum::before {
  background: radial-gradient(circle at 50% 50%, #b6ffe8 0%, #25c9a3 38%, #083b34 80%);
  box-shadow: 0 0 12px rgba(60, 255, 205, 0.55);
}

.f-deli { background: linear-gradient(180deg, #cfe6ff 0%, #e8dcc0 52%, #b39a72 100%); }
.f-deli::before { background: linear-gradient(180deg, #ffffff 0%, #e6dcc4 36%, #3b332a 60%, #1d1913 100%); }
.f-deli::after { background: radial-gradient(ellipse at 50% 84%, rgba(0, 0, 0, 0.55), transparent 38%); }

.f-gyertya { background: radial-gradient(ellipse at 26% 70%, #6b3a12 0%, #180d06 64%); }
.f-gyertya::before { background: radial-gradient(circle at 20% 68%, #ffd08a 0%, #c1712a 38%, #1a0f07 84%); }

.f-holdfeny { background: linear-gradient(180deg, #152238 0%, #070b14 100%); }
.f-holdfeny::before { background: radial-gradient(circle at 44% 18%, #dce9ff 0%, #7f93b5 44%, #161c2a 88%); }

.f-strobo { background: linear-gradient(180deg, #e9e9ee, #c6c6cf); }
.f-strobo::before { background: radial-gradient(circle at 50% 32%, #ffffff 0%, #f0f0f4 40%, #9a9aa4 58%, #4a4a54 100%); }
.f-strobo::after { background: linear-gradient(84deg, transparent 58%, rgba(0, 0, 0, 0.60) 60%, rgba(0, 0, 0, 0.60) 76%, transparent 78%); }

.f-sziluett { background: radial-gradient(ellipse at 50% 58%, #ffd89a 0%, #e07b2e 34%, #3c1d0d 84%); }
.f-sziluett::before { background: #0a0a0c; }

.f-highkey { background: linear-gradient(180deg, #fbfbfc, #ececed); }
.f-highkey::before { background: radial-gradient(circle at 40% 34%, #ffffff, #e2e2e6 70%, #c8c8ce 100%); }

.f-lowkey { background: linear-gradient(180deg, #101014, #050507); }
.f-lowkey::before { background: radial-gradient(circle at 62% 26%, #5c5c68 0%, #22222a 42%, #0a0a0e 88%); }

.f-ablak { background: linear-gradient(90deg, #cfd8e2 0%, #8e97a3 40%, #3f4550 100%); }
.f-ablak::before { background: radial-gradient(circle at 16% 36%, #ffffff, #c3cad4 48%, #4a505c 96%); }
.f-ablak::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0.50) 0 13%, transparent 21%); }

.f-osztott { background: linear-gradient(90deg, #1b1f28 50%, #0a0b0f 50%); }
.f-osztott::before { background: linear-gradient(90deg, #f0ece2 0%, #cfc7b6 48%, #1a1a20 50%, #0e0e12 100%); }

.f-pillango { background: linear-gradient(180deg, #2a2d36, #14161c); }
.f-pillango::before { background: radial-gradient(circle at 50% 6%, #fff6e2 0%, #d9cdb4 32%, #4a4438 72%, #1e1c18 100%); }
.f-pillango::after { background: radial-gradient(ellipse at 50% 64%, rgba(0, 0, 0, 0.55), transparent 24%); }

.f-alsomeg { background: linear-gradient(180deg, #0a0a0e 0%, #241a10 100%); }
.f-alsomeg::before { background: linear-gradient(0deg, #ffd9a0 0%, #a9702c 30%, #2a2018 62%, #0d0d11 100%); }

/* ── 2. KOMPOZÍCIÓ & KAMERA — sematikus keret: hol és mekkora az alak ── */
.ep-camera { background: linear-gradient(180deg, #242a36 0%, #1a1f29 58%, #12161d 100%); }

.k-szuperkozeli::before {
  left: 50%; top: -9px; right: auto; bottom: auto;
  width: 46px; height: 58px; margin-left: -23px;
  border-radius: 50% 50% 44% 44%; background: #dfe4ee;
}
.k-nagylatoszog { background: linear-gradient(180deg, #33405a 0%, #5d6f8c 46%, #2b3340 47%, #1a2029 100%); }
.k-nagylatoszog::before {
  left: 50%; top: 12px; right: auto; bottom: auto;
  width: 4px; height: 8px; margin-left: -2px; border-radius: 1px; background: #e6eaf2;
}
.k-beka { background: linear-gradient(180deg, #4b5f80 0%, #2b3545 100%); }
.k-beka::before {
  left: 50%; bottom: 0; top: auto; right: auto;
  width: 34px; height: 32px; margin-left: -17px; background: #e6eaf2;
  clip-path: polygon(38% 0, 62% 0, 82% 100%, 18% 100%);
}
.k-madartavlat { background: radial-gradient(ellipse at 50% 50%, #39414f, #1a1e26); }
.k-madartavlat::before {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e6eaf2;
}
.k-madartavlat::after { background: radial-gradient(ellipse at 63% 64%, rgba(0, 0, 0, 0.55) 0 10%, transparent 24%); }

.k-ferde { background: linear-gradient(158deg, #4a5872 0%, #4a5872 48%, #252c38 49%, #161b23 100%); }
.k-ferde::before {
  left: 50%; top: 7px; right: auto; bottom: auto;
  width: 10px; height: 26px; margin-left: -5px; border-radius: 3px;
  background: #e6eaf2; transform: rotate(14deg);
}
.k-vallfeletti::before {
  left: 52%; top: 8px; right: auto; bottom: auto;
  width: 17px; height: 28px; border-radius: 7px 7px 0 0; background: #dfe4ee;
}
.k-vallfeletti::after {
  left: -6px; bottom: -12px; top: auto; right: auto;
  width: 48px; height: 46px; border-radius: 50% 50% 0 0; background: #0d1017;
}
/* Egész alakos: kis alak, fejtér fent, talaj alul — látszik, hogy belefér a teljes test. */
.k-egeszalakos { background: linear-gradient(180deg, #3b4759 0 82%, #232a35 82%, #171d25 100%); }
.k-egeszalakos::before {
  left: 50%; top: 7px; right: auto; bottom: auto;
  width: 8px; height: 26px; margin-left: -4px; border-radius: 4px 4px 1px 1px; background: #e6eaf2;
}
/* Félalakos: derékban levágva — az alak kilóg a keret aljából. */
.k-felalakos::before {
  left: 50%; top: 5px; right: auto; bottom: -6px;
  width: 24px; margin-left: -12px; border-radius: 11px 11px 0 0; background: #e6eaf2;
}
.k-telefoto {
  background: linear-gradient(180deg, #3c4658 0 34%, #333c4c 34% 56%, #29303d 56% 76%, #1d232c 76%);
}
.k-telefoto::before {
  left: 50%; top: 10px; right: auto; bottom: auto;
  width: 15px; height: 28px; margin-left: -7px; border-radius: 7px 7px 0 0; background: #eef1f7;
}
.k-szemmagassag { background: linear-gradient(180deg, #3b4557 0 50%, #242b36 50%, #171c24 100%); }
.k-szemmagassag::before {
  left: 50%; top: 5px; right: auto; bottom: auto;
  width: 17px; height: 31px; margin-left: -8px; border-radius: 8px 8px 0 0; background: #e6eaf2;
}
.k-szemmagassag::after {
  left: 0; right: 0; top: 12px; bottom: auto; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(201, 255, 53, 0.9) 0 4px, transparent 4px 8px);
}
.k-felsoszog { background: linear-gradient(180deg, #2b3340 0%, #3d4757 100%); }
.k-felsoszog::before {
  left: 50%; top: 8px; right: auto; bottom: auto;
  width: 26px; height: 28px; margin-left: -13px; background: #e6eaf2;
  clip-path: polygon(10% 0, 90% 0, 68% 100%, 32% 100%);
}
.k-pov { background: linear-gradient(180deg, #3a4557 0%, #20262f 100%); }
.k-pov::before {
  left: -6px; bottom: -9px; top: auto; right: auto;
  width: 27px; height: 23px; border-radius: 8px; background: #d9c3a8; transform: rotate(-18deg);
}
.k-pov::after {
  right: -6px; bottom: -9px; top: auto; left: auto;
  width: 27px; height: 23px; border-radius: 8px; background: #d9c3a8; transform: rotate(18deg);
}
/* Profil: fej oldalról — kerek koponya + kiálló orr, hogy ne csak folt legyen. */
.k-profil::before {
  left: 50%; top: 4px; right: auto; bottom: auto;
  width: 28px; height: 32px; margin-left: -16px;
  border-radius: 52% 42% 44% 50%; background: #e6eaf2;
}
.k-profil::after {
  left: 50%; top: 15px; right: auto; bottom: auto;
  width: 10px; height: 11px; margin-left: 9px; background: #e6eaf2;
  clip-path: polygon(0 0, 100% 46%, 0 100%);
}
.k-panorama { background: linear-gradient(180deg, #46587a 0%, #7c8fae 30%, #5d6d86 44%, #33404f 46%, #222932 100%); }
.k-panorama::before {
  left: 0; right: 0; top: 17px; bottom: auto; height: 3px;
  background: linear-gradient(90deg, transparent, #1a2029 12%, #1a2029 88%, transparent);
}
.k-panorama::after {
  left: 50%; top: 12px; right: auto; bottom: auto;
  width: 3px; height: 6px; margin-left: -1px; background: #eef1f7;
}
.k-szimmetrikus {
  background: linear-gradient(90deg, #1c222c 0 14%, #39445a 14% 32%, #232b37 32% 68%, #39445a 68% 86%, #1c222c 86%);
}
.k-szimmetrikus::before {
  left: 50%; top: 0; bottom: 0; right: auto; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(201, 255, 53, 0.9) 0 4px, transparent 4px 8px);
}
.k-szimmetrikus::after {
  left: 50%; top: 11px; right: auto; bottom: auto;
  width: 13px; height: 26px; margin-left: -6px; border-radius: 6px 6px 0 0; background: #e6eaf2;
}
.k-harmadolas { background: linear-gradient(180deg, #3b4759 0 62%, #232a35 62%, #181d25 100%); }
.k-harmadolas::before {
  background:
    linear-gradient(90deg, transparent 32.4%, rgba(201, 255, 53, 0.75) 32.4% 33.2%,
      transparent 33.2% 66%, rgba(201, 255, 53, 0.75) 66% 66.8%, transparent 66.8%),
    linear-gradient(180deg, transparent 31%, rgba(201, 255, 53, 0.75) 31% 33.5%,
      transparent 33.5% 64%, rgba(201, 255, 53, 0.75) 64% 66.5%, transparent 66.5%);
}
.k-harmadolas::after {
  left: 66%; top: 20%; right: auto; bottom: auto;
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #eef1f7;
}
.k-akciostop { background: linear-gradient(180deg, #2f3849, #171c24); }
.k-akciostop::before {
  left: 50%; top: 7px; right: auto; bottom: auto;
  width: 13px; height: 26px; margin-left: -6px; border-radius: 3px;
  background: #eef1f7; transform: rotate(-12deg);
}
.k-akciostop::after {
  background:
    radial-gradient(circle at 18% 28%, #dfe6f2 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 80% 20%, #dfe6f2 0 1.4px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, #dfe6f2 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 88% 72%, #dfe6f2 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 62% 86%, #dfe6f2 0 1.2px, transparent 1.3px);
}
.k-hosszuzarido { background: linear-gradient(180deg, #252c39, #141920); }
.k-hosszuzarido::before {
  left: 8%; right: 8%; top: 12px; bottom: auto; height: 16px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.85) 42%, rgba(238, 241, 247, 0.32) 72%, transparent);
  filter: blur(1.6px);
}
.k-kismelyseg { background: linear-gradient(180deg, #2c3548, #161b23); }
.k-kismelyseg::before {
  background:
    radial-gradient(circle at 14% 26%, rgba(255, 214, 140, 0.55) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 64%, rgba(140, 200, 255, 0.45) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 30%, rgba(255, 180, 220, 0.45) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 76%, rgba(200, 255, 180, 0.40) 0 5px, transparent 6px);
  filter: blur(2.2px);
}
.k-kismelyseg::after {
  left: 50%; top: 8px; right: auto; bottom: auto;
  width: 15px; height: 28px; margin-left: -7px; border-radius: 7px 7px 0 0; background: #f2f5fa;
}
.k-melyfokusz { background: linear-gradient(180deg, #39445a 0 46%, #222a36 46%, #171d25 100%); }
.k-melyfokusz::before {
  background: linear-gradient(90deg, transparent 6%, #cfd7e6 6% 8%, transparent 8% 22%,
    #cfd7e6 22% 24%, transparent 24% 76%, #cfd7e6 76% 78%, transparent 78% 92%,
    #cfd7e6 92% 94%, transparent 94%);
}
.k-melyfokusz::after {
  left: 50%; top: 9px; right: auto; bottom: auto;
  width: 14px; height: 27px; margin-left: -7px; border-radius: 7px 7px 0 0; background: #f2f5fa;
}
.k-muholdkep {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #2f4034, #1c2a22);
}
.k-muholdkep::before { left: 16%; top: 20%; right: auto; bottom: auto; width: 26%; height: 36%; background: #4d6153; }
.k-muholdkep::after { left: 56%; top: 48%; right: auto; bottom: auto; width: 30%; height: 32%; background: #3c5245; }

.k-vizalatt { background: linear-gradient(180deg, #0d5f7a 0%, #07394d 60%, #04222e 100%); }
.k-vizalatt::before { background: repeating-linear-gradient(74deg, rgba(190, 255, 255, 0.22) 0 2px, transparent 2px 9px); }
.k-vizalatt::after {
  left: 50%; top: 11px; right: auto; bottom: auto;
  width: 15px; height: 22px; margin-left: -7px; border-radius: 8px; background: rgba(226, 240, 246, 0.85);
}

/* ── 3. FILMSTOCK — a nyersanyag színválasza + a jellemző textúra ── */
.ep-film { background: linear-gradient(180deg, #8ea6c0 0%, #c8bfa8 52%, #6b5c46 100%); }
.ep-film::after {
  background: radial-gradient(rgba(255, 255, 255, 0.13) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}
.s-portra { background: linear-gradient(180deg, #b9c6d2 0%, #e6cdb4 50%, #8a6f58 100%); }
.s-velvia { background: linear-gradient(180deg, #1848a8 0%, #0f8f4a 46%, #d81a1a 100%); }
.s-velvia::after { background: none; }
.s-polaroid {
  background: linear-gradient(180deg, #a8c0c6 0%, #d8c8b0 55%, #8a7a68 100%);
  box-shadow: inset 0 0 0 4px #f4f2ea, inset 0 0 0 5px rgba(0, 0, 0, 0.14);
}
.s-bw35 { background: linear-gradient(180deg, #d2d2d4 0%, #8a8a8e 50%, #26262a 100%); }
.s-agfa { background: linear-gradient(180deg, #7fa8d8 0%, #f0c07a 50%, #c04a3a 100%); }
.s-hp5 { background: linear-gradient(180deg, #f2f2f4 0%, #6e6e74 44%, #0e0e12 100%); }
.s-hp5::after {
  background: radial-gradient(rgba(255, 255, 255, 0.30) 0.8px, transparent 0.9px),
              radial-gradient(rgba(0, 0, 0, 0.30) 0.8px, transparent 0.9px);
  background-size: 4px 4px, 4px 4px; background-position: 0 0, 2px 2px;
}
.s-kodachrome { background: linear-gradient(180deg, #1c4c86 0%, #d8b878 48%, #a82418 100%); }
.s-technicolor { background: linear-gradient(104deg, #d81030 0 33%, #0f9c3c 33% 66%, #1030c8 66%); }
.s-technicolor::after { background: none; }
.s-super8 { background: radial-gradient(ellipse at 50% 48%, #e8c088 0%, #8a5c30 68%, #2a180c 100%); }
.s-super8::after { background: repeating-linear-gradient(180deg, rgba(255, 235, 190, 0.16) 0 2px, transparent 2px 7px); }
.s-16mm { background: linear-gradient(180deg, #8c9aa4 0%, #5e6a70 50%, #2a3034 100%); }
.s-16mm::after {
  background: radial-gradient(rgba(255, 255, 255, 0.26) 0.7px, transparent 0.8px),
              radial-gradient(rgba(0, 0, 0, 0.26) 0.7px, transparent 0.8px);
  background-size: 3px 3px, 3px 3px; background-position: 0 0, 1px 2px;
}
.s-vhs { background: linear-gradient(180deg, #3a2a6a 0%, #2a6a8a 50%, #1a2a4a 100%); }
.s-vhs::before { background: linear-gradient(90deg, rgba(255, 0, 110, 0.45) 0 6%, transparent 6% 92%, rgba(0, 220, 255, 0.45) 92%); }
.s-vhs::after {
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 3px),
              linear-gradient(180deg, transparent 0 40%, rgba(255, 255, 255, 0.35) 40% 44%, transparent 44%);
}
.s-cctv { background: linear-gradient(180deg, #2a3a2a 0%, #16221a 60%, #0c140e 100%); }
.s-cctv::before { left: auto; right: 5px; top: 4px; bottom: auto; width: 16px; height: 4px; background: rgba(200, 255, 200, 0.6); }
.s-cctv::after { background: repeating-linear-gradient(180deg, rgba(160, 255, 160, 0.15) 0 1px, transparent 1px 3px); }
.s-dager {
  background: linear-gradient(115deg, #c8c4b4 0%, #8a8878 30%, #e4e0d0 55%, #6a6a5e 100%);
  box-shadow: inset 0 0 11px rgba(90, 70, 40, 0.75);
}
.s-ciano { background: linear-gradient(180deg, #e8f0f8 0%, #2a6ea8 45%, #0c2a52 100%); }
.s-autochrome { background: linear-gradient(180deg, #cfd8c0 0%, #e8c8a8 50%, #a89078 100%); }
.s-autochrome::after {
  background: radial-gradient(#ff6a4a 0 0.8px, transparent 0.9px),
              radial-gradient(#4aa0ff 0 0.8px, transparent 0.9px),
              radial-gradient(#6ad86a 0 0.8px, transparent 0.9px);
  background-size: 4px 4px; background-position: 0 0, 2px 1px, 1px 3px; opacity: 0.55;
}
.s-crossproc { background: linear-gradient(180deg, #00c8d8 0%, #c8d820 50%, #3a1a6a 100%); }
.s-lejart {
  background: radial-gradient(ellipse at 22% 30%, rgba(255, 60, 60, 0.55), transparent 46%),
              radial-gradient(ellipse at 78% 68%, rgba(60, 255, 180, 0.35), transparent 44%),
              linear-gradient(180deg, #a89078, #6a5a4a);
}
.s-lomo { background: radial-gradient(ellipse at 50% 44%, #f0c060 0%, #3a8a5a 46%, #0a1a1a 94%); }
.s-cinestill { background: linear-gradient(180deg, #0a2a4a 0%, #123a5a 60%, #0a1a2a 100%); }
.s-cinestill::before {
  background: radial-gradient(circle at 26% 40%, rgba(255, 70, 45, 0.9) 0 3px, rgba(255, 70, 45, 0.32) 7px, transparent 13px),
              radial-gradient(circle at 72% 64%, rgba(255, 95, 45, 0.85) 0 2px, rgba(255, 95, 45, 0.28) 6px, transparent 12px);
}
.s-infra { background: linear-gradient(180deg, #0a1a5a 0%, #ff4a8a 46%, #ffc8d8 100%); }
.s-gold { background: linear-gradient(180deg, #9cb8d8 0%, #f0c878 50%, #a87a3a 100%); }
.s-raw { background: linear-gradient(180deg, #9a9a9e 0%, #86868c 50%, #6e6e74 100%); }
.s-raw::after { background: none; }

/* ── 4. UTÓMUNKA — mindegyik UGYANAZON az alapképen, hogy a hatás legyen a különbség ──
   Az alapkép szándékosan tartalmaz ÉLES éleket (két kontrasztos csík) és egy
   csúcsfényt: enélkül az elmosás, a szemcse és az élesség nem látszana rajta. */
.ep-post {
  background:
    linear-gradient(90deg, transparent 0 21%, rgba(255, 255, 255, 0.85) 21% 24%,
      transparent 24% 31%, rgba(16, 22, 34, 0.9) 31% 33.5%, transparent 33.5%),
    radial-gradient(circle at 79% 29%, #fff8e0 0 5%, rgba(255, 244, 210, 0.35) 14%, transparent 30%),
    linear-gradient(120deg, #2a3446 0%, #4a5a72 44%, #c9b48a 74%, #f4e6c8 100%);
}
.u-szemcse::after {
  background: radial-gradient(rgba(255, 255, 255, 0.32) 0.6px, transparent 0.7px),
              radial-gradient(rgba(0, 0, 0, 0.32) 0.6px, transparent 0.7px);
  background-size: 3px 3px, 3px 3px; background-position: 0 0, 1px 2px;
}
.u-fenyfolt::after {
  background: radial-gradient(circle at 80% 26%, rgba(255, 255, 255, 0.95) 0 3px, rgba(255, 230, 180, 0.45) 9px, transparent 21px),
              radial-gradient(circle at 58% 44%, rgba(120, 255, 200, 0.35) 0 4px, transparent 5px),
              radial-gradient(circle at 38% 60%, rgba(255, 140, 90, 0.32) 0 6px, transparent 7px);
}
.u-halation::after {
  background: radial-gradient(circle at 82% 30%, rgba(255, 90, 50, 0.75) 0 4px, rgba(255, 120, 60, 0.35) 13px, transparent 26px);
}
.u-kroma::before { background: linear-gradient(90deg, rgba(255, 0, 60, 0.55) 0 4%, transparent 4% 96%, rgba(0, 210, 255, 0.55) 96%); }
.u-kroma::after {
  background: linear-gradient(90deg, transparent 43%, rgba(255, 0, 60, 0.5) 43% 45%,
    transparent 45% 48%, rgba(0, 220, 255, 0.5) 48% 50%, transparent 50%);
}
.u-vignetta::after { background: radial-gradient(ellipse at 50% 50%, transparent 44%, rgba(0, 0, 0, 0.72) 100%); }
.u-karcok::after {
  background: linear-gradient(90deg, transparent 18%, rgba(255, 255, 255, 0.6) 18% 18.7%,
      transparent 18.7% 52%, rgba(0, 0, 0, 0.5) 52% 52.6%, transparent 52.6% 74%,
      rgba(255, 255, 255, 0.45) 74% 74.6%, transparent 74.6%),
    radial-gradient(rgba(0, 0, 0, 0.5) 0.7px, transparent 0.8px);
  background-size: auto, 9px 9px;
}
/* A ghost-réteg az alapképet ismétli oldalra tolva — ettől „húz" a mozgás. */
.u-bemozdulas::before { background: inherit; transform: translateX(9px); opacity: 0.6; filter: blur(2.5px); }
.u-bemozdulas::after { background: inherit; transform: translateX(-7px); opacity: 0.45; filter: blur(1.8px); }
.u-szivargas::after { background: linear-gradient(100deg, rgba(255, 140, 40, 0.85) 0%, rgba(255, 90, 60, 0.5) 18%, transparent 42%); }
.u-tueles::after {
  background: linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, 0.85) 46% 47%,
      rgba(0, 0, 0, 0.7) 47% 48%, transparent 48%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(0, 0, 0, 0.10) 1px 2px);
}
.u-lagyfokusz::before { background: inherit; filter: blur(3px); transform: scale(1.14); opacity: 0.9; }
.u-lagyfokusz::after { background: radial-gradient(ellipse at 72% 34%, rgba(255, 255, 255, 0.45), transparent 58%); }

/* ── 5. SZÍNVILÁG — valódi színminta: árnyék → középtón → csúcsfény ── */
.ep-grade::after {
  left: 0; right: 0; bottom: 0; top: auto; height: 9px;
  background: linear-gradient(90deg, var(--g1) 0 33.34%, var(--g2) 33.34% 66.67%, var(--g3) 66.67%);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.28);
}
.c-teal { --g1: #08303f; --g2: #2b7d94; --g3: #ff9c3e; background: linear-gradient(105deg, #07242f, #1d6a80 45%, #d1782e 80%, #ffc07a); }
.c-meleg { --g1: #3a2410; --g2: #c98a3a; --g3: #ffe0a8; background: linear-gradient(105deg, #2a1a0c, #9c6828 48%, #f0b45e 82%, #ffeec8); }
.c-hideg { --g1: #0d1b30; --g2: #3a6ba8; --g3: #cfe2ff; background: linear-gradient(105deg, #0a1626, #2d5a91 48%, #88b6e6 84%, #e6f0ff); }
.c-fako { --g1: #4a4a4e; --g2: #8d8d92; --g3: #d8d8dc; background: linear-gradient(105deg, #42434a, #8b8c93 50%, #c9cad0); }
.c-bleach { --g1: #14161a; --g2: #8a9096; --g3: #f4f6f8; background: linear-gradient(105deg, #0e1013, #7e858c 46%, #eef1f4); }
.c-sotet { --g1: #000000; --g2: #2c2f36; --g3: #c9ccd4; background: linear-gradient(105deg, #000000, #1b1e24 52%, #9aa0ac 88%, #e6e9ef); }
.c-pasztell { --g1: #c8b8d8; --g2: #ffd9cf; --g3: #fff4e2; background: linear-gradient(105deg, #bfc9e8, #f2cfd8 45%, #ffe7cf 78%, #fffaf0); }
.c-elenk { --g1: #0e2f6b; --g2: #e01f4a; --g3: #ffd400; background: linear-gradient(105deg, #0d2a63, #c8123f 45%, #ff8a00 78%, #ffe600); }
.c-mono { --g1: #0d0d10; --g2: #75757c; --g3: #f2f2f4; background: linear-gradient(105deg, #0b0b0e, #6f6f76 52%, #f4f4f6); }
.c-szepia { --g1: #3a2a18; --g2: #9c7c4e; --g3: #f0dcb8; background: linear-gradient(105deg, #2c2013, #8a6c42 50%, #e4cda2); }
.c-zoldes { --g1: #12241a; --g2: #4c7a52; --g3: #cfe4bc; background: linear-gradient(105deg, #101f17, #3f6b48 50%, #bcd9a6); }
.c-biboros { --g1: #2b1030; --g2: #9c3a86; --g3: #ffd0ea; background: linear-gradient(105deg, #240d29, #8c3378 50%, #f6c4e2); }
.c-retro { --g1: #4a3f3a; --g2: #a08a72; --g3: #e8d9c2; background: linear-gradient(105deg, #4a4038, #9d8a76 50%, #e2d3bd); }
.c-neon { --g1: #12002a; --g2: #ff2bd1; --g3: #2ff0ff; background: linear-gradient(105deg, #12002a, #7a0fb0 38%, #ff2bd1 68%, #2ff0ff); }

/* ── 6. OBJEKTÍV — a látószög ÉKE + a háttér elmosódása ── */
.ep-lens { background: linear-gradient(180deg, #20262f, #12161c); }
.ep-lens::before {
  background: linear-gradient(180deg, rgba(201, 255, 53, 0.38), rgba(201, 255, 53, 0.06));
  clip-path: polygon(50% 100%, 4% 0, 96% 0);
}
.o-14::before { clip-path: polygon(50% 100%, 1% 0, 99% 0); }
.o-24::before { clip-path: polygon(50% 100%, 9% 0, 91% 0); }
.o-35::before { clip-path: polygon(50% 100%, 18% 0, 82% 0); }
.o-50::before { clip-path: polygon(50% 100%, 27% 0, 73% 0); }
.o-85::before { clip-path: polygon(50% 100%, 35% 0, 65% 0); }
.o-100::before { clip-path: polygon(50% 100%, 39% 0, 61% 0); }
.o-200::before { clip-path: polygon(50% 100%, 44% 0, 56% 0); }
.o-anamorf::before { clip-path: polygon(50% 100%, 13% 0, 87% 0); }
.o-halszem::before { clip-path: polygon(50% 100%, 0 0, 100% 0); }
.o-tiltshift::before { clip-path: polygon(50% 100%, 30% 0, 70% 0); }
/* a ::after mutatja, mennyire olvad szét a háttér */
.o-14::after, .o-24::after, .o-35::after {
  background: radial-gradient(circle at 12% 20%, #8fa8c9 0 1.4px, transparent 1.5px),
              radial-gradient(circle at 40% 15%, #8fa8c9 0 1.4px, transparent 1.5px),
              radial-gradient(circle at 68% 22%, #8fa8c9 0 1.4px, transparent 1.5px),
              radial-gradient(circle at 90% 13%, #8fa8c9 0 1.4px, transparent 1.5px);
}
.o-50::after {
  background: radial-gradient(circle at 20% 20%, rgba(160, 190, 230, 0.7) 0 2.6px, transparent 3.2px),
              radial-gradient(circle at 78% 17%, rgba(160, 190, 230, 0.7) 0 2.6px, transparent 3.2px);
  filter: blur(0.8px);
}
.o-85::after {
  background: radial-gradient(circle at 18% 22%, rgba(190, 215, 255, 0.6) 0 5px, transparent 6px),
              radial-gradient(circle at 76% 18%, rgba(255, 214, 170, 0.55) 0 5px, transparent 6px);
  filter: blur(1.8px);
}
/* Makró: fent teljesen szétolvadó háttér, lent tű-éles apró részlet. */
.o-100::after {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 28% 22%, rgba(210, 230, 255, 0.55) 0 4px, rgba(210, 230, 255, 0.18) 11px, transparent 17px),
    radial-gradient(circle at 76% 19%, rgba(255, 220, 180, 0.5) 0 4px, rgba(255, 220, 180, 0.16) 11px, transparent 17px);
  background-size: 100% 34%, auto, auto;
  background-position: 0 100%, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, no-repeat;
}
.o-200::after {
  background: radial-gradient(circle at 18% 24%, rgba(190, 215, 255, 0.65) 0 7px, transparent 8px),
              radial-gradient(circle at 76% 20%, rgba(255, 214, 170, 0.6) 0 8px, transparent 9px);
  filter: blur(2.6px);
}
.o-anamorf::after {
  left: 0; right: 0; top: 13px; bottom: auto; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(90, 180, 255, 0.85) 30%, rgba(160, 220, 255, 0.95) 50%, rgba(90, 180, 255, 0.85) 70%, transparent);
  filter: blur(1px);
}
.o-halszem::after {
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  background: radial-gradient(circle, transparent 56%, rgba(0, 0, 0, 0.45) 100%);
}
.o-tiltshift::after {
  background: linear-gradient(180deg, rgba(120, 150, 190, 0.55) 0 26%, transparent 26% 62%, rgba(120, 150, 190, 0.55) 62%);
  filter: blur(2px);
}

/* ── 7. KÉPARÁNY — igazi arányú téglalap, nem szöveg ── */
.ep-ratio { background: var(--bg-elevated); }
.ep-ratio::before {
  left: 50%; top: 50%; right: auto; bottom: auto;
  height: 22px; transform: translate(-50%, -50%); border-radius: 2px;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line);
}
.r-169::before { width: 39px; }
.r-916::before { width: 12px; }
.r-11::before  { width: 22px; }
.r-45::before  { width: 18px; }
.r-239::before { width: 53px; }
.r-43::before  { width: 29px; }
.r-31::before  { width: 66px; }

/* ── 8. NAPSZAK ÉS IDŐJÁRÁS — ugyanaz a táj tizenhét különböző órában ──
   Az alap az ég-gradiens, a horizont mindenütt 63%-nál van, alatta a talaj.
   A ::before a fényforrás (nap, hold) vagy maga a levegő (felhő, fátyol),
   a ::after az időjárás nyoma: árnyék, eső, hó, villám, szemcse. */
.ep-time { background: linear-gradient(180deg, #46689a 0%, #90b2d0 42%, #bcd2e4 63%, #3c4550 63%, #212831 100%); }

/* Hajnal — hideg lila-rózsaszín ég, a nap még alig van a horizont fölött */
.n-hajnal { background: linear-gradient(180deg, #2f2b57 0%, #644b7c 30%, #b8788e 52%, #e3a597 63%, #2a2130 63%, #16111c 100%); }
.n-hajnal::before {
  left: 62%; top: 47%; right: auto; bottom: auto;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 212, 0.95) 0 28%, rgba(255, 186, 168, 0.40) 54%, transparent 78%);
}
.n-hajnal::after { background: linear-gradient(180deg, transparent 44%, rgba(255, 206, 196, 0.30) 58%, transparent 66%); }

/* Reggel — világoskék ég, oldalról érkező sárgás fény */
.n-reggel { background: linear-gradient(180deg, #5f9fd8 0%, #a3cbea 44%, #d6e6f1 63%, #3f4a42 63%, #232b26 100%); }
.n-reggel::before {
  left: 22%; top: 30%; right: auto; bottom: auto;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe4 0 26%, rgba(255, 236, 164, 0.45) 50%, transparent 76%);
}
.n-reggel::after { background: linear-gradient(102deg, rgba(255, 240, 186, 0.34) 0 24%, transparent 54%); }

/* Dél — fehéres-kék ég, éles kis nap fent; az álló alak árnyéka rövid és kemény */
.n-del { background: linear-gradient(180deg, #79b1e7 0%, #cbe2f4 42%, #edf2f3 63%, #6a695f 63%, #3a3931 100%); }
.n-del::before {
  left: 50%; top: 16%; right: auto; bottom: auto;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 48%, rgba(255, 255, 255, 0.50) 68%, transparent 84%);
}
.n-del::after {
  background: radial-gradient(ellipse 3% 15% at 50% 51%, #33402f 0 92%, transparent 100%),
              radial-gradient(ellipse 11% 5% at 50% 67%, rgba(0, 0, 0, 0.55) 0 88%, transparent 100%);
}

/* Késő délután — meleg sárga fény, a naptól elnyúló hosszú árnyék */
.n-keso { background: linear-gradient(180deg, #78a4cd 0%, #dfc292 46%, #f2d29c 63%, #5a4630 63%, #2c2317 100%); }
.n-keso::before {
  left: 76%; top: 44%; right: auto; bottom: auto;
  width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff4d2 0 26%, rgba(255, 212, 134, 0.42) 52%, transparent 78%);
}
.n-keso::after {
  background: linear-gradient(100deg, transparent 4%, rgba(48, 28, 12, 0.60) 10% 46%, transparent 54%);
  background-size: 100% 37%; background-position: 0 100%; background-repeat: no-repeat;
}

/* Naplemente — narancs-piros korong félig a horizont alatt, alatta a fény visszaverődése */
.n-naplemente { background: linear-gradient(180deg, #2c2a4e 0%, #8a4a6a 24%, #dd7040 48%, #ffb463 63%, #3a2418 63%, #190f09 100%); }
.n-naplemente::before {
  left: 50%; top: 63%; right: auto; bottom: auto;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8 0 36%, #ff7c2e 64%, rgba(255, 110, 40, 0.22) 84%, transparent 100%);
}
.n-naplemente::after { background: radial-gradient(ellipse 20% 26% at 50% 84%, rgba(255, 138, 60, 0.50), transparent 100%); }

/* Alkonyat — mély kék-lila; a nap már lement, csak az utófény izzik, feljön az első csillag */
.n-alkonyat { background: linear-gradient(180deg, #141d3c 0%, #2b3a68 28%, #6b4a78 50%, #bc7460 62%, #241d2c 63%, #0f0b15 100%); }
.n-alkonyat::before { background: linear-gradient(180deg, transparent 42%, rgba(255, 152, 92, 0.40) 58%, transparent 64%); }
.n-alkonyat::after { background: radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.80) 0 0.9px, transparent 1.2px); }

/* Éjszaka — sötétkék ég, hold és néhány csillag */
.n-ejszaka { background: linear-gradient(180deg, #050b1a 0%, #0d1933 44%, #192947 63%, #0a1120 63%, #04070e 100%); }
.n-ejszaka::before {
  left: 70%; top: 28%; right: auto; bottom: auto;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f6f8ff, #ccd6ec 60%, #93a2c0 100%);
  box-shadow: 0 0 8px rgba(190, 215, 255, 0.45);
}
.n-ejszaka::after {
  background: radial-gradient(circle at 16% 20%, #ffffff 0 0.9px, transparent 1.1px),
              radial-gradient(circle at 34% 12%, #ffffff 0 0.7px, transparent 0.9px),
              radial-gradient(circle at 47% 32%, #ffffff 0 0.6px, transparent 0.8px),
              radial-gradient(circle at 88% 15%, #ffffff 0 0.8px, transparent 1px),
              radial-gradient(circle at 26% 44%, #ffffff 0 0.6px, transparent 0.8px);
}

/* Borult ég — lapos szürke takaró, sehol egy nap */
.n-borult { background: linear-gradient(180deg, #969fa8 0%, #b0b7bd 42%, #c0c5c9 63%, #4d5257 63%, #32363b 100%); }
.n-borult::before {
  background: radial-gradient(ellipse 34% 26% at 22% 22%, rgba(255, 255, 255, 0.30), transparent 100%),
              radial-gradient(ellipse 40% 22% at 68% 15%, rgba(255, 255, 255, 0.24), transparent 100%),
              radial-gradient(ellipse 30% 20% at 46% 36%, rgba(88, 98, 108, 0.30), transparent 100%);
}

/* Eső — szürke ég sötét felhőalj, ferde esőcsíkokkal */
.n-eso { background: linear-gradient(180deg, #56606b 0%, #77808a 42%, #8a9199 63%, #32373d 63%, #1d2125 100%); }
.n-eso::before { background: linear-gradient(180deg, rgba(28, 34, 42, 0.55) 0 24%, transparent 46%); }
.n-eso::after { background: repeating-linear-gradient(104deg, rgba(214, 232, 245, 0.55) 0 1px, transparent 1px 6px); }

/* Zápor után — az eső elállt, a sötét nedves talaj visszaveri az eget */
.n-zaportan { background: linear-gradient(180deg, #7d8c98 0%, #a8b6c0 40%, #c8d4dc 63%, #2b333a 63%, #171d22 100%); }
.n-zaportan::before {
  background: linear-gradient(180deg, transparent 0 63%, rgba(200, 224, 240, 0.42) 63%, rgba(200, 224, 240, 0.04) 88%, transparent 100%);
}
/* A tükröződés néhány elmosott fényoszlop, nem egyenletes rács */
.n-zaportan::after {
  background: linear-gradient(90deg, transparent 16%, rgba(226, 244, 255, 0.34) 20% 25%, transparent 29%),
              linear-gradient(90deg, transparent 45%, rgba(255, 236, 206, 0.30) 49% 54%, transparent 58%),
              linear-gradient(90deg, transparent 72%, rgba(226, 244, 255, 0.28) 76% 81%, transparent 85%);
  background-size: 100% 32%, 100% 29%, 100% 34%;
  background-position: 0 100%, 0 100%, 0 100%;
  background-repeat: no-repeat;
  filter: blur(1.2px);
}

/* Köd — szürke fátyol; a horizont és a távoli alakok is csak sejlenek */
.n-kod { background: linear-gradient(180deg, #bcc2c5 0%, #ced2d4 40%, #d4d8d9 60%, #b6bbbd 78%, #949a9c 100%); }
.n-kod::before {
  background: radial-gradient(ellipse 20% 30% at 24% 58%, rgba(84, 94, 100, 0.32), transparent 100%),
              radial-gradient(ellipse 14% 24% at 63% 60%, rgba(84, 94, 100, 0.26), transparent 100%),
              linear-gradient(180deg, transparent 60%, rgba(96, 106, 112, 0.22) 64%, transparent 70%);
  filter: blur(2.6px);
}
.n-kod::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0 36%, rgba(255, 255, 255, 0.58) 72%, rgba(255, 255, 255, 0.44) 100%);
}

/* Hóesés — sötét ég, sűrű fehér hópöttyök, világos havas talaj */
.n-hoeses { background: linear-gradient(180deg, #38424e 0%, #515f6d 44%, #6a7784 63%, #d8e0e8 63%, #a9b5c1 100%); }
.n-hoeses::before { background: linear-gradient(180deg, transparent 40%, rgba(18, 24, 32, 0.35) 63%, transparent 63%); }
.n-hoeses::after {
  background: radial-gradient(circle at 12% 20%, #ffffff 0 1.6px, transparent 1.9px),
              radial-gradient(circle at 33% 44%, #ffffff 0 1.4px, transparent 1.7px),
              radial-gradient(circle at 60% 15%, #ffffff 0 1.7px, transparent 2px),
              radial-gradient(circle at 82% 36%, #ffffff 0 1.5px, transparent 1.8px),
              radial-gradient(circle at 24% 7%, #ffffff 0 1.2px, transparent 1.5px),
              radial-gradient(circle at 70% 54%, #ffffff 0 1.5px, transparent 1.8px),
              radial-gradient(circle at 46% 29%, #ffffff 0 1.2px, transparent 1.5px),
              radial-gradient(circle at 91% 9%, #ffffff 0 1.3px, transparent 1.6px),
              radial-gradient(circle at 5% 50%, #ffffff 0 1.3px, transparent 1.6px);
}

/* Szél — néhány hosszú, ferde húzott vonal, és egy oldalra kidőlt fa */
.n-szel { background: linear-gradient(180deg, #7c95ab 0%, #a6bacb 44%, #c0d0dc 63%, #5b6250 63%, #343a2d 100%); }
.n-szel::before {
  left: 22%; bottom: 18%; top: auto; right: auto;
  width: 11px; height: 20px; margin-left: -5.5px; background: #263021;
  clip-path: polygon(30% 100%, 62% 100%, 100% 0, 76% 0);
}
.n-szel::after { background: repeating-linear-gradient(4deg, rgba(255, 255, 255, 0.50) 0 1.5px, transparent 1.5px 22px); }

/* Vihar — súlyos sötét felhő, alatta villám-ék */
.n-vihar { background: linear-gradient(180deg, #1a2029 0%, #2a323e 32%, #434d5b 60%, #222831 63%, #11151b 100%); }
.n-vihar::before {
  background: radial-gradient(ellipse 40% 32% at 26% 14%, rgba(10, 14, 20, 0.85), transparent 100%),
              radial-gradient(ellipse 46% 28% at 72% 10%, rgba(14, 18, 26, 0.80), transparent 100%);
}
.n-vihar::after {
  left: 54%; top: 22%; right: auto; bottom: auto;
  width: 11px; height: 18px; background: #fff6c4;
  clip-path: polygon(58% 0, 16% 56%, 46% 56%, 28% 100%, 84% 42%, 52% 42%, 76% 0);
}

/* Poros levegő — barnás fátyol, benne lebegő szemcse */
.n-poros { background: linear-gradient(180deg, #a9855a 0%, #c6a072 40%, #d6b085 63%, #795b37 63%, #48341f 100%); }
.n-poros::before { background: linear-gradient(102deg, rgba(212, 172, 112, 0.55) 0 30%, rgba(188, 148, 94, 0.28) 62%, transparent 100%); }
.n-poros::after {
  background: radial-gradient(rgba(255, 234, 194, 0.26) 0.6px, transparent 0.7px),
              radial-gradient(rgba(88, 64, 36, 0.26) 0.6px, transparent 0.7px);
  background-size: 3px 3px, 4px 4px; background-position: 0 0, 1px 2px;
}

/* Füst — gomolygás: egymásra csúszó, elmosott szürke foltok */
.n-fust { background: linear-gradient(180deg, #64646a 0%, #828288 42%, #97979d 63%, #43434a 63%, #25252a 100%); }
.n-fust::before {
  background: radial-gradient(ellipse 30% 40% at 22% 46%, rgba(234, 234, 238, 0.55), transparent 100%),
              radial-gradient(ellipse 34% 34% at 54% 26%, rgba(212, 212, 218, 0.50), transparent 100%),
              radial-gradient(ellipse 28% 44% at 80% 58%, rgba(178, 178, 186, 0.55), transparent 100%);
  filter: blur(1.4px);
}
.n-fust::after {
  background: radial-gradient(ellipse 26% 30% at 38% 70%, rgba(48, 48, 55, 0.45), transparent 100%),
              radial-gradient(ellipse 22% 26% at 68% 14%, rgba(58, 58, 66, 0.40), transparent 100%);
  filter: blur(1.8px);
}

/* Párás pára — meleg fehér fátyol, a levegő maga világít */
.n-paras { background: linear-gradient(180deg, #c8b6a1 0%, #e0d1bb 42%, #eee2ce 63%, #9c8e7b 63%, #6b6154 100%); }
.n-paras::before { background: radial-gradient(ellipse 58% 46% at 50% 46%, rgba(255, 250, 238, 0.72), transparent 100%); }
.n-paras::after { background: linear-gradient(180deg, rgba(255, 252, 244, 0.42) 0 46%, rgba(255, 250, 238, 0.22) 100%); }

/* Tizenhét elem: az oszlopszám csak 3 vagy 5 lehet — a 4 és a 2 magányos
   elemet hagyna az utolsó sorban. A doboz SAJÁT szélességét kérdezzük, mert a
   szakasz-hasáb szélessége nem a képernyő méretéből következik. */
.field-szeles:has(#minta-time) { container-type: inline-size; }
#minta-time { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 600px) {
  #minta-time { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── A lenyílók alatti minta-sor (színvilág, képarány, objektív) ── */
/* A sor szélessége korlátos, hogy ne fusson szét egy hosszú, ritka sorrá. */
.minta-sor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px; margin-top: 5px; max-width: 640px;
}
.minta-gomb {
  display: flex; flex-direction: column; gap: 5px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 600;
  line-height: 1.25; text-align: left; cursor: pointer; transition: all 0.15s;
}
.minta-gomb:hover { background: var(--bg-card-hover); border-color: var(--text-dim); color: var(--text); }
.minta-gomb[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.minta-gomb:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.minta-gomb .elonez { height: 34px; margin-bottom: 0; }
/* Egy rács-elem alapból nem lehet keskenyebb a tartalma min-content méreténél —
   a belső minta-rács emiatt 375 px-en kifeszítette az egész hasábot. A min-width: 0
   engedi összemenni; csak a minta-soros szakaszokra vonatkozik. */
.sec-grid > .sec:has(.minta-sor) { min-width: 0; }
/* A minta-sor a teljes hasábot használja, a lenyíló marad a megszokott szélességű. */
.field.field-szeles { max-width: none; }
.field.field-szeles select { max-width: 420px; }
.field-szeles + .field-szeles { margin-top: 18px; }

/* ===== Szakasz-fejléc eszközökkel: összecsukás, keresés, „mind ki" =====
   A Slepnex Appok-oldalának eszköztárát követi. Ettől lesz kezelhető egy
   90 dobozos lap: becsukod, amit már beállítottál, és keresel a többiben. */
.sec-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sec-mini { border-color: var(--border); text-transform: none; letter-spacing: 0; }
.sec-mini:hover { color: var(--text); border-color: var(--accent-line); }
/* A `.sec-tools` előtag nem díszítés: a lenti mező-alap (`.field input, …,
   .sec-keres`) ugyanolyan erős, és mivel KÉSŐBB áll, eddig ő nyert — a fejléc
   keresője 42 px magas, 15 px-es mezőként jelent meg, és kitörte a fejléc sorát. */
/* 🔴 2026-08-05 (este): 32 → 44 px, az érintés-célpont minimuma miatt.
   A fenti megjegyzés a 42 px-es mezőre panaszkodott, ami „kitörte a fejléc
   sorát" — ezért mérve emeltem: a fejléc `align-items: center`-rel egy sorban
   marad, csak magasabb lesz. Ha ez valaha mégis törik, a fejléc igazítását
   kell javítani, NEM a keresőt visszazsugorítani. */
.sec-tools .sec-keres {
  flex: 0 1 210px; width: auto; min-width: 130px; min-height: 44px;
  padding: 5px 10px; font-size: 12.5px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* Összecsukható szakasz: a fejlécre kattintva zárul-nyílik. */
.sec-label.csukhato { cursor: pointer; user-select: none; }
/* A nyilat CSS rajzolja — nem karakter, tehát nincs betűtípus-függése,
   és ugyanaz a vonalvastagság, mint az SVG-ikonoké. */
.sec-label.csukhato::after {
  content: ""; display: inline-block; align-self: center;
  width: 7px; height: 7px; margin: -3px 0 0 4px;
  border-right: 1.7px solid var(--text-dim); border-bottom: 1.7px solid var(--text-dim);
  transform: rotate(45deg); transition: transform 0.15s;
}
.sec.zarva > .sec-label.csukhato::after { transform: rotate(-45deg); margin-top: 0; }
.sec.zarva > .sec-hint,
.sec.zarva > .opts,
.sec.zarva > .checks,
.sec.zarva > .field-row,
.sec.zarva > .wlai-select,
.sec.zarva > .sec-sub { display: none; }
/* A fenti felsorolás nem ér el minden szakaszt: a Képalkotó lenyílói `.field`-be
   vannak ágyazva, a Karakter-építő hiba-listája pedig saját dobozban áll. Becsukva
   a fejlécen kívül semmi nem látszik — így a becsukás mindenhol ugyanazt jelenti. */
.sec.zarva > * { display: none; }
.sec.zarva > .sec-label { display: flex; }
/* Becsukott szakasznál a fejlécben ott marad, mit választottál — így nem vész el. */
.sec-osszegzes {
  display: none; font-size: 12.5px; color: var(--accent-ink);
  font-weight: 500; text-transform: none; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.sec.zarva .sec-osszegzes { display: block; }
/* Keresésnél elrejtett kártya */
.opt.rejtve, .check.rejtve { display: none; }
.sec-nincs {
  display: none; padding: 14px; color: var(--text-dim); font-size: 13.5px;
}
.sec.ures .sec-nincs { display: block; }

/* KÉT KERESŐ EGY SZAKASZBAN — a Hook-tár, a Kameramozgás és a Zene lapon a
   szakasznak SAJÁT keresője van (az a csoport-szűrőt is kezeli, és újrarajzolja
   a listát), a közös réteg viszont minden 12+ elemű szakaszba tesz még egyet.
   A kettő egymás alatt zavaró, ráadásul a beépített el is romlik, amint a lap
   újrarajzolja a kártyákat. Ahol van saját kereső, ott a beépítettet elrejtjük —
   a `display: none` a billentyűzet-sorrendből is kiveszi. */
.sec:has(> .field > input[type="search"]) .sec-tools .sec-keres,
.sec:has(> .field > input[type="search"]) > .sec-nincs { display: none; }

/* Önálló lenyíló (nem mezőn belül) — a mező-alapot használja. */
.wlai-select { max-width: 420px; }