/* ============================================================
   MÉHESDI HELYTÖRTÉNETI MÚZEUM — képregény-kvíz (js/tortenelem-ui.js). 2D réteg: a 3D kép áll (.overlay2d).
   Csak tokenek; a panelek hátterei TARTALOM-színek (a jelenet ege és földje), névvel deklarálva a panel-osztályokon.
   ============================================================ */
#ttLayer { position:fixed; inset:0; z-index:var(--z-hud); display:flex; flex-direction:column; color:var(--ink); font-family:var(--body);
  background:var(--bg); padding:calc(54px + env(safe-area-inset-top)) var(--sp-3) max(10px, env(safe-area-inset-bottom)); }
/* a 2D rétegen a rendszergombok (#sysBtns) egy sorban a bal felső sarokban állnak – a fejléc alájuk kerül */
#ttLayer.hidden { display:none; }
.tortenelem #score, .tortenelem #hud, .tortenelem #hudBtn, .tortenelem #hint, .tortenelem #reticle, .tortenelem #touchBtns, .tortenelem #joy { display:none !important; }
.ttHead { align-self:center; width:min(900px, 100%); display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:6px 10px; }
.ttNagyi { width:44px; height:44px; flex:0 0 44px; } .ttNagyi svg, .ttChar svg, .ttSayBig svg, .ttAfter .ds-say svg { width:100%; height:100%; }
.ttTitle b { display:block; font:400 var(--fs-l)/1.05 var(--display); } .ttTitle small { color:var(--ink-soft); font-weight:700; font-size:12px; }
.ttDots { margin:0 0 0 auto; padding:0; list-style:none; display:flex; gap:4px; }
.ttDots li { width:10px; height:10px; border-radius:50%; border:2px solid var(--line); background:var(--surface); }
.ttDots li.is-done { background:var(--leaf); } .ttDots li.on { background:var(--accent); }
.ttMain { flex:1; overflow-y:auto; align-self:center; width:min(900px, 100%); padding:var(--sp-3) 2px var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
/* előcsarnok */
.ttLobby { display:flex; flex-direction:column; gap:var(--sp-3); }
.ttSayBig { align-items:center; } .ttSayBig > .szereplo, .ttSayBig > svg { width:84px; height:84px; flex:0 0 84px; }
.ttRooms { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--sp-2); }
.ttRoom { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.ttRoom small { color:var(--ink-soft); }
/* rajzolt előcsarnok (js/tortenelem-csarnok.js): a fal és a padló vászonra rajzolva a .ttHall mögött; az ajtók a padlón
   (--tt-floor = a padló magassága = alsó belső margó, ezt olvassa a rajzoló). Széles: buborék + körbevezetés felül, alul Nagyi
   a pultnál és a folyosó; telefonon Nagyi a buborék mellett, az ajtók vízszintesen görgethető folyosón. */
.ttMain:has(> .ttHall) { width:min(1400px, 100%); }
.ttHall { --tt-floor:48px; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:128px minmax(0, 1fr) auto;
  grid-template-areas:"say say tour" "host doors doors"; align-items:end; align-content:space-between; flex:1 0 auto; gap:var(--sp-4) var(--sp-3);
  padding:52px var(--sp-4) var(--tt-floor); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft); background:var(--cream); }
.ttHallBg { position:absolute; inset:0; z-index:-1; width:100%; height:100%; display:block; }
.ttHallSay { grid-area:say; justify-self:start; max-width:640px; margin:0 0 6px; font-size:var(--fs-s); line-height:1.4; box-shadow:var(--soft-sm); }
.ttHall .ttHallSay::after { left:44px; bottom:-9px; transform:rotate(-45deg); }   /* a farok lefelé, Nagyira mutat */
.ttHallTour { grid-area:tour; align-self:center; }
.ttHost { grid-area:host; display:flex; flex-direction:column; align-items:center; margin-bottom:-6px; }
.ttHost > svg:first-child { width:96px; height:96px; }
.ttDesk { width:128px; height:auto; margin-top:-30px; }
.ttDoors { grid-area:doors; min-width:0; display:flex; align-items:stretch; gap:var(--sp-2); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding:6px 6px 0; margin-bottom:-4px; scrollbar-width:thin; }
.ttDoor { flex:1 0 100px; max-width:168px; display:flex; flex-direction:column; gap:var(--sp-2); padding:0; border:0; background:none; font:inherit;
  color:var(--ink); text-align:center; cursor:pointer; scroll-snap-align:start; border-radius:var(--r-s); touch-action:manipulation; }
.ttDoor:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.ttPlaque { margin-bottom:auto; padding:5px 6px 4px; background:var(--butter); border:2px solid var(--line); border-radius:var(--r-s); box-shadow:var(--soft-sm); }
.ttPlaque b { display:block; font:400 var(--fs-s)/1.1 var(--display); text-wrap:balance; } .ttPlaque b .pic { width:14px; height:14px; vertical-align:-2px; }
.ttPlaque small { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); }
.ttDoor.is-hazai .ttPlaque { background:var(--sage-bg); }
.ttDoorArt { position:relative; display:block; width:104px; align-self:center; }
.ttDoorSvg { display:block; width:100%; height:auto; overflow:visible; }
.ttEmb { position:absolute; left:48%; top:21%; width:36%; aspect-ratio:1; transform:translate(-50%, -50%); display:grid; place-items:center; padding:2px;
  background:var(--paper); border:2px solid var(--line); border-radius:50%; }
.ttEmb .art, .ttEmb img, .ttEmb svg { width:100%; height:100%; }
.ttProg { position:absolute; left:48%; top:68%; transform:translateX(-50%); white-space:nowrap; font-size:var(--fs-xs); padding:2px 8px; min-height:0; }
.ttDoor.is-done .ttEmb, .ttDoor.is-done .ttProg { background:var(--good-bg); }
/* az ajtó résnyire kinyílik (egér fölötte, billentyű-fókusz), mögötte a terem meleg fénye; „kevesebb mozgás”: azonnal */
.ttLeaf { transform-box:fill-box; transition:transform var(--t-base) var(--ease-out); } .ttLeafL { transform-origin:left center; } .ttLeafR { transform-origin:right center; }
.ttDoor:focus-visible .ttLeaf { transform:scaleX(.78); }
@media (hover:hover){ .ttDoor:hover .ttLeaf { transform:scaleX(.78); } }
.ttDoor:active .ttDoorArt { transform:translateY(2px); }
.reduce-motion .ttLeaf { transition:none; }
@media (prefers-reduced-motion: reduce){ .ttLeaf { transition:none; } }
@media (min-width:1500px){ .ttDoorArt { width:160px; } .ttDoor { flex-basis:160px; max-width:220px; } .ttHost > svg:first-child { width:120px; height:120px; } }
@media (max-width:640px){
  .ttHall { --tt-floor:36px; grid-template-columns:76px minmax(0, 1fr); grid-template-areas:"host say" "tour tour" "doors doors"; align-items:start; align-content:start; flex:none;
    padding:48px var(--sp-2) var(--tt-floor); gap:var(--sp-3) var(--sp-2); }
  .ttHost { align-self:start; margin:0; } .ttHost > svg:first-child { width:72px; height:72px; } .ttDesk { display:none; }
  .ttHallSay { margin:0; font-size:var(--fs-xs); } .ttHall .ttHallSay::after { left:-9px; bottom:auto; top:22px; transform:rotate(45deg); }
  .ttHallTour { justify-self:stretch; } .ttDoors { margin:0 calc(-1 * var(--sp-2)) -4px; padding:6px var(--sp-2) 0; } .ttDoor { flex-basis:100px; max-width:100px; } .ttDoor.is-hazai { flex-basis:auto; max-width:none; } .ttDoorArt { width:96px; }
}
/* a képregény */
.ttMeta { display:flex; flex-wrap:wrap; gap:4px; margin:0; } .ttMeta .is-vita { background:var(--butter); } .ttMeta .is-hazai { background:var(--sage-bg); }
.ttRoom.is-hazai { background:var(--sage-bg); } .ttRoom b .pic { width:18px; height:18px; vertical-align:-3px; }
.ttStoryTitle { margin:4px 0 8px; }
.ttPage { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ttPanel { position:relative; aspect-ratio:4 / 3; border:var(--line-w) solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--soft-sm);
  background:linear-gradient(180deg, var(--tt-sky) 0 58%, var(--tt-ground) 58% 100%); }   /* érkezés: tortenelem-juice.js (csak az új panel) */
.ttPanel.is-after { outline:3px solid var(--accent); outline-offset:-6px; }
.ttCap { position:absolute; left:8px; top:8px; right:8px; z-index:3; margin:0; background:var(--butter); border:2px solid var(--line); border-radius:var(--r-s);
  padding:4px 8px; font-size:13px; font-weight:700; line-height:1.3; box-shadow:var(--soft-sm); }
.ttScene { position:absolute; inset:0; }
.ttProp { position:absolute; width:30%; aspect-ratio:1; } .ttProp .art, .ttProp img, .ttProp canvas { width:100%; height:100%; }
/* a szereplő jobbra áll (a második balra) – a tárgyak a bal és a középső sávban, hogy ne takarják egymást */
.ttP0 { left:5%; bottom:8%; } .ttP1 { left:36%; bottom:8%; width:24%; } .ttP2 { left:30%; bottom:40%; width:18%; } .ttP3 { left:52%; bottom:36%; width:16%; }
.ttPanel.is-duo .ttP0 { left:37%; width:26%; bottom:6%; } .ttPanel.is-duo .ttP1 { left:34%; bottom:44%; width:16%; } .ttPanel.is-duo .ttP2 { left:51%; bottom:44%; width:15%; }
.ttChar { position:absolute; bottom:0; right:8%; width:28%; margin:0; z-index:2; display:flex; flex-direction:column; align-items:flex-end; }
.ttChar + .ttChar { right:auto; left:8%; align-items:flex-start; }
.ttChar > svg { width:100%; height:auto; }
.ttSay { margin:0 0 4px; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-m); padding:4px 8px; font-size:12px; font-weight:700; line-height:1.25;
  width:max-content; max-width:180%; position:relative; box-shadow:var(--soft-sm); }
/* kvíz */
.ttQuiz { background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft); padding:10px 12px; }
.ttQuiz h3 { margin:0 0 8px; display:flex; gap:6px; align-items:center; font:400 var(--fs-m)/1.2 var(--display); }
.ttOpts { display:grid; gap:8px; }
.ttOpt { padding:10px 12px; text-align:left; font:inherit; font-weight:700; color:var(--ink); cursor:pointer; min-height:var(--tap); }
.ttOpt.is-real { background:var(--good-bg); border-color:var(--good-ink); } .ttOpt.is-chosen { background:var(--butter); } .ttOpt.is-dim { opacity:.55; }
.ttAfter { display:flex; flex-direction:column; gap:var(--sp-2); }
.ttVerdict { margin:0; font-weight:800; display:flex; gap:6px; align-items:center; } .ttVerdict.is-ok { color:var(--good-ink); }
.ttExplain { margin:0; } .ttFact { margin:0; } .ttVita { margin:0 0 6px; }
.ttAfter .ds-say svg { width:56px; height:56px; flex:0 0 56px; }
/* a pont nélküli második lépés: „Te mit tettél volna?” (Nagyi egy mondattal reagál) */
.ttMineNote { margin:-4px 0 8px; font-size:var(--fs-s); color:var(--ink-soft); }
.ttMineSay { margin-top:var(--sp-2); }
/* idővonal-fal */
.ttWall p { margin:0 0 var(--sp-2); }
.ttLine { list-style:none; margin:0; padding:0; display:flex; gap:6px; overflow-x:auto; align-items:center; min-height:220px; }
.ttLine li { flex:0 0 120px; border:2px solid var(--line); border-radius:var(--r-m); background:var(--surface); padding:6px 8px; font-size:12px; display:flex; flex-direction:column; gap:2px; }
.ttLine li b { font:400 var(--fs-m)/1 var(--display); }
.ttLine li.is-lejto { transform:translateY(40px); border-bottom-width:5px; } .ttLine li.is-kapaszkodo { transform:translateY(-40px); border-top-width:5px; border-top-color:var(--leaf); }
/* a fal kártyái sorban érkeznek (tortenelem-juice.js): a külön „translate” nem írja felül a le/fel eltoló transform-ot */
@keyframes ttWallIn { from { opacity:0; translate:0 12px; } to { opacity:1; translate:none; } }
.ttLine li.is-in { animation:ttWallIn var(--t-base) var(--ease-out) both; }
.reduce-motion .ttLine li.is-in { animation:none; }
@media (prefers-reduced-motion: reduce){ .ttLine li.is-in { animation:none; } }
.ttLine li.is-guessed b::after { content:' ✓'; color:var(--good-ink); }
/* jelenet-hátterek: TARTALOM-színek (ég / föld) */
.tt-bg-mezo    { --tt-sky:#bfe3f5; --tt-ground:#9cc46c; }
.tt-bg-erdo    { --tt-sky:#a9d6c2; --tt-ground:#4f7d3c; }
.tt-bg-irtas   { --tt-sky:#d9e6d8; --tt-ground:#9b7a4e; }
.tt-bg-gyar    { --tt-sky:#c9c3bb; --tt-ground:#7d6f63; }
.tt-bg-szmog   { --tt-sky:#b5a98f; --tt-ground:#6f6557; }
.tt-bg-varos   { --tt-sky:#cfe4f2; --tt-ground:#a9a9a0; }
.tt-bg-tenger  { --tt-sky:#bfe3f5; --tt-ground:#4d90b8; }
.tt-bg-folyo   { --tt-sky:#cfe8f2; --tt-ground:#6aa6c4; }
.tt-bg-labor   { --tt-sky:#e8f2ef; --tt-ground:#c9dcd6; }
.tt-bg-iroda   { --tt-sky:#f4ecd8; --tt-ground:#d6c3a1; }
.tt-bg-piac    { --tt-sky:#fbe7b5; --tt-ground:#d9b77e; }
.tt-bg-ur      { --tt-sky:#253550; --tt-ground:#3f5a7a; }
.tt-bg-sivatag { --tt-sky:#f6e2b3; --tt-ground:#d8b170; }
.tt-bg-banya   { --tt-sky:#5a4e44; --tt-ground:#3b332c; }
.tt-bg-hegy    { --tt-sky:#cfe8f2; --tt-ground:#7fa35a; }
@media (max-width:700px){
  .ttPage { grid-template-columns:1fr; } .ttTitle b { font-size:var(--fs-m); } .ttDots { display:none; }
  #ttLayer { padding-right:8px; padding-left:8px; }
}
/* a korszak évei egy sorban (a „Kr. e. 10 000-től” ne törjön a kötőjelnél) */
.ttPlaque small { white-space:nowrap; font-size:clamp(10px, 1.1vw, 13px); }