/* ============================================================
TÖRTÉNETEK – új képregény-sablon (2026-10-03, jóváhagyva; a #ttLayer.tt-v2 alatt él, ez az alapértelmezett)
Tesztelői visszajelzés: „nagyon látszik az AI, újrarajzoltatnám a képregényeket, beecós bejegyzés-sablon”.
Kristóf döntése: a sablont a beeco arculatából tervezzük, előbb 2–3 mintapanel jóváhagyásra.
• rétegzett jelenet: ég-színátmenet + nap/lámpa + távoli sziluett (domb, erdő, város, gyár, hegy…) + ívelt talaj
– minden a 15 háttér saját TARTALOM-színeiből (névvel deklarálva, docs/arculat.md);
• beecós keret: vastag olíva körvonal, puha árnyék · mézszínű felirat-sáv felül, Lalezar betűvel (a beeco-posztok mintájára);
• igazi szövegbuborék farokkal, a szereplő alatt puha árnyék.
A régi kinézet összevetéshez: az oldal címe után ?kepregeny=1 (js/tortenelem.js). Mind a 108 panel ezt használja, a tartalomhoz nem kellett nyúlni.
============================================================ */
#ttLayer.tt-v2 .ttPage { gap:14px; }
#ttLayer.tt-v2 .ttPanel { border:calc(var(--line-w) + 1px) solid var(--line); border-radius:var(--r-m); box-shadow:var(--soft); isolation:isolate;
background:
radial-gradient(circle at 82% 30%, var(--tt-sun) 0 6%, transparent 6.4%),
radial-gradient(circle at 82% 30%, var(--tt-sun-glow) 0 13%, transparent 13.5%),
linear-gradient(180deg, var(--tt-sky-top) 12%, var(--tt-sky) 62%); }
/* távoli sziluett (maszk + a jelenet saját színe) és a talaj (ívelt horizont) */
#ttLayer.tt-v2 .ttPanel::before { content:''; position:absolute; z-index:0; left:0; right:0; bottom:30%; height:30%; background:var(--tt-far);
-webkit-mask:var(--tt-sil) bottom / 100% 100% no-repeat; mask:var(--tt-sil) bottom / 100% 100% no-repeat; }
#ttLayer.tt-v2 .ttPanel::after { content:''; position:absolute; z-index:0; left:-12%; right:-12%; bottom:0; height:34%;
background:linear-gradient(180deg, var(--tt-ground-top), var(--tt-ground)); border-radius:50% 50% 0 0 / 16% 16% 0 0;
box-shadow:inset 0 3px 0 var(--tt-ground-edge); }
/* a felirat saját sávot kap, a jelenet alatta kezdődik – így hosszú (több soros) feliratnál sem csúszik a buborék alá */
#ttLayer.tt-v2 .ttPanel { display:flex; flex-direction:column; }
#ttLayer.tt-v2 .ttScene { position:relative; inset:auto; flex:1 1 auto; min-height:0; z-index:1; }
/* felirat: mézszínű sáv a panel tetején */
#ttLayer.tt-v2 .ttCap { position:relative; inset:auto; flex:none; border:0; border-bottom:var(--line-w) solid var(--line); border-radius:0; box-shadow:none;
background:var(--accent); color:var(--ink); padding:7px 12px 5px; font:400 var(--fs-s)/1.25 var(--display); letter-spacing:.01em; text-wrap:balance; }
/* szövegbuborék farokkal (a farok a beszélő felé mutat: jobb oldali szereplő → jobbra lent, bal oldali → balra lent) */
#ttLayer.tt-v2 .ttSay { border-radius:16px; padding:6px 11px 5px; font:700 13px/1.3 var(--body); box-shadow:var(--soft-sm); margin-bottom:10px; }
#ttLayer.tt-v2 .ttSay::after { content:''; position:absolute; bottom:-8px; right:26%; width:13px; height:13px; background:var(--surface);
border-right:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(45deg); border-bottom-right-radius:3px; }
#ttLayer.tt-v2 .ttChar + .ttChar .ttSay::after { right:auto; left:26%; }
/* a szereplő a talajon áll: puha árnyék alatta */
#ttLayer.tt-v2 .ttChar::after { content:''; position:absolute; z-index:-1; left:12%; right:12%; bottom:2%; height:8%; border-radius:50%;
background:radial-gradient(closest-side, var(--tt-shadow), transparent); }
#ttLayer.tt-v2 .ttProp .art, #ttLayer.tt-v2 .ttProp img { filter:drop-shadow(0 3px 0 var(--tt-shadow)); }
/* belső terek: egyenes padló, falon ablak (iroda), csempe (labor); bánya: boltív és lámpafény; űr: csillagok */
#ttLayer.tt-v2 .ttPanel.tt-bg-iroda::after, #ttLayer.tt-v2 .ttPanel.tt-bg-labor::after, #ttLayer.tt-v2 .ttPanel.tt-bg-banya::after { left:0; right:0; border-radius:0; height:30%;
background:repeating-linear-gradient(90deg, transparent 0 15%, var(--tt-ground-edge) 15% calc(15% + 2px)), linear-gradient(180deg, var(--tt-ground-top), var(--tt-ground)); }
#ttLayer.tt-v2 .ttPanel.tt-bg-iroda::before { -webkit-mask:none; mask:none; left:9%; right:auto; top:22%; bottom:auto; width:26%; height:30%; border-radius:4px;
background:linear-gradient(var(--tt-far), var(--tt-far)) center / 4px 100% no-repeat, linear-gradient(var(--tt-far), var(--tt-far)) center / 100% 4px no-repeat, linear-gradient(180deg, var(--tt-sun), var(--tt-window-low));
border:4px solid var(--tt-far); }
#ttLayer.tt-v2 .ttPanel.tt-bg-iroda { background:linear-gradient(180deg, var(--tt-sky-top) 12%, var(--tt-sky) 62%); } /* bent nincs nap: az ablak a fény */
#ttLayer.tt-v2 .ttPanel.tt-bg-labor { background:repeating-linear-gradient(0deg, var(--tt-far) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, var(--tt-far) 0 1px, transparent 1px 22px), linear-gradient(180deg, var(--tt-sky-top), var(--tt-sky)); }
#ttLayer.tt-v2 .ttPanel.tt-bg-labor::before { display:none; }
#ttLayer.tt-v2 .ttPanel.tt-bg-banya { background:radial-gradient(circle at 50% 8%, var(--tt-sun) 0 3%, var(--tt-sun-glow) 3.5% 22%, transparent 40%), linear-gradient(180deg, var(--tt-sky-top), var(--tt-sky)); }
#ttLayer.tt-v2 .ttPanel.tt-bg-banya::before { top:0; bottom:0; height:auto; }
#ttLayer.tt-v2 .ttPanel.tt-bg-ur { background:radial-gradient(circle, var(--tt-sun) 0 1px, transparent 1.5px) 0 0 / 34px 34px, radial-gradient(circle, var(--tt-sun) 0 1px, transparent 1.5px) 17px 11px / 46px 46px, linear-gradient(180deg, var(--tt-sky-top), var(--tt-sky)); }
#ttLayer.tt-v2 .ttPanel.tt-bg-ur::before { display:none; }
#ttLayer.tt-v2 .ttPanel.tt-bg-ur::after { border-radius:50% 50% 0 0 / 40% 40% 0 0; }
/* a 15 jelenet tartalom-színei (név szerint) és sziluettje */
#ttLayer.tt-v2 .tt-bg-mezo { --tt-sky-top:#e6f4fb; --tt-sky:#bfe3f5; --tt-far:#93bb7d; --tt-ground-top:#a8cf74; --tt-ground:#86b35a; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#bfe3f5; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-erdo { --tt-sky-top:#dff0e8; --tt-sky:#a9d6c2; --tt-far:#3f6e3a; --tt-ground-top:#5f8f47; --tt-ground:#46733a; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#a9d6c2; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-irtas { --tt-sky-top:#eef3ea; --tt-sky:#d9e6d8; --tt-far:#a3ae92; --tt-ground-top:#a88a5c; --tt-ground:#8c6d44; --tt-ground-edge:#2f371e26; --tt-sun:#f7f0c8; --tt-sun-glow:#f7f0c866; --tt-window-low:#d9e6d8; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-gyar { --tt-sky-top:#ddd8d0; --tt-sky:#c9c3bb; --tt-far:#8a7f74; --tt-ground-top:#8b7d70; --tt-ground:#6f6357; --tt-ground-edge:#2f371e26; --tt-sun:#e8e0c8; --tt-sun-glow:#e8e0c866; --tt-window-low:#c9c3bb; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-szmog { --tt-sky-top:#c9bea4; --tt-sky:#b5a98f; --tt-far:#7d725f; --tt-ground-top:#7a6f60; --tt-ground:#5f564a; --tt-ground-edge:#2f371e26; --tt-sun:#d8c58f; --tt-sun-glow:#d8c58f66; --tt-window-low:#b5a98f; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-varos { --tt-sky-top:#e7f2fa; --tt-sky:#cfe4f2; --tt-far:#a3b3c1; --tt-ground-top:#b4b4aa; --tt-ground:#98988f; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#cfe4f2; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-tenger { --tt-sky-top:#e3f3fb; --tt-sky:#bfe3f5; --tt-far:#86aac0; --tt-ground-top:#6aa9cc; --tt-ground:#3f80a8; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#bfe3f5; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-folyo { --tt-sky-top:#e6f4fa; --tt-sky:#cfe8f2; --tt-far:#93bb7d; --tt-ground-top:#84bad4; --tt-ground:#5a98b8; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#cfe8f2; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-piac { --tt-sky-top:#fdf1d0; --tt-sky:#fbe7b5; --tt-far:#d9906c; --tt-ground-top:#dfc08a; --tt-ground:#cfa96e; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#fbe7b5; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-sivatag { --tt-sky-top:#fbefd2; --tt-sky:#f6e2b3; --tt-far:#e3c48a; --tt-ground-top:#dcb878; --tt-ground:#c99f5c; --tt-ground-edge:#2f371e26; --tt-sun:#fff7d6; --tt-sun-glow:#fff7d666; --tt-window-low:#f6e2b3; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-hegy { --tt-sky-top:#e6f4fa; --tt-sky:#cfe8f2; --tt-far:#8fa3ab; --tt-ground-top:#8fb366; --tt-ground:#6f9449; --tt-ground-edge:#2f371e26; --tt-sun:#fff3b0; --tt-sun-glow:#fff3b066; --tt-window-low:#cfe8f2; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-ur { --tt-sky-top:#141f33; --tt-sky:#253550; --tt-far:#3f5a7a; --tt-ground-top:#4a6788; --tt-ground:#354d6b; --tt-ground-edge:#2f371e26; --tt-sun:#fff8e7; --tt-sun-glow:#fff8e766; --tt-window-low:#253550; --tt-shadow:#2f371e40; }
#ttLayer.tt-v2 .tt-bg-iroda { --tt-sky-top:#faf3e3; --tt-sky:#f4ecd8; --tt-far:#8c6d44; --tt-ground-top:#dcc9a8; --tt-ground:#c8b18a; --tt-ground-edge:#2f371e26; --tt-sun:#cfe4f2; --tt-sun-glow:#cfe4f266; --tt-window-low:#f4ecd8; --tt-shadow:#2f371e40; }
#ttLayer.tt-v2 .tt-bg-labor { --tt-sky-top:#f4f9f7; --tt-sky:#e8f2ef; --tt-far:#b9d1ca; --tt-ground-top:#d3e3dd; --tt-ground:#bcd2ca; --tt-ground-edge:#2f371e26; --tt-sun:#cfe4f2; --tt-sun-glow:#cfe4f266; --tt-window-low:#e8f2ef; --tt-shadow:#2f371e40; }
#ttLayer.tt-v2 .tt-bg-banya { --tt-sky-top:#4a4038; --tt-sky:#5a4e44; --tt-far:#2e2722; --tt-ground-top:#463c34; --tt-ground:#332b25; --tt-ground-edge:#2f371e26; --tt-sun:#f2c14e; --tt-sun-glow:#f2c14e66; --tt-window-low:#5a4e44; --tt-shadow:#2f371e40; --tt-sil:url("data:image/svg+xml,"); }
#ttLayer.tt-v2 .tt-bg-iroda, #ttLayer.tt-v2 .tt-bg-labor, #ttLayer.tt-v2 .tt-bg-ur { --tt-sun-glow:transparent; }
#ttLayer.tt-v2 .tt-bg-iroda { --tt-window-low:#e9f4fb; }
@media (max-width:700px){ #ttLayer.tt-v2 .ttCap { font-size:var(--fs-s); } }