/* ============================================================
   Mi van mögötte? — 2D tábla: 4 termék + címkepakli (párosítás)
   A közös .overlay2d réteg (index.html) elrejti a 3D-s HUD-ot és leállítja a 3D-t.
   A design systemre építve (ds-chip, ds-meter, ds-card, ds-tag, ds-feedback, ds-panel); csak tokenekkel.
   Hatás-típusok: környezeti = levél + zsálya, társadalmi = emberek + égkék (szín ÉS ikon).
   ============================================================ */
#imp {
  position:fixed; inset:0; z-index:var(--z-hud); display:none; flex-direction:column; align-items:center;
  color:var(--ink); overflow:hidden; touch-action:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v30L28 61 2 46V16Z M28 61v36 M2 46-2 48 M54 46l4 2' fill='none' stroke='%23D8A500' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(circle at 85% 12%, rgba(254,207,57,.26) 0 150px, transparent 151px),
    radial-gradient(circle at 8% 92%, rgba(110,137,71,.16) 0 190px, transparent 191px),
    var(--bg); }                                   /* méhsejt-minta + két színfolt – mint a főmenüben */
.imp #imp { display:flex; }

/* — felső sáv — */
#impTop { width:min(96vw,980px); margin:54px 0 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; padding:0 8px; }
#impTitle { display:flex; align-items:center; gap:6px; font:400 var(--fs-l)/1.1 var(--display); padding-top:2px; }
#impTitle .pic { width:24px; height:24px; }
#impTitle small { display:block; font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
#impStats { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
#impStats .ds-chip { font-size:17px; padding:3px 10px 1px 7px; }
#impStats .ds-chip .pic { width:19px; height:19px; }
#impStats .impLegend { display:inline-flex; gap:5px; }
#impStats .impLegend .ds-tag { font-size:var(--fs-xs); padding:3px 8px 2px; }
#impProg { width:min(96vw,964px); margin:8px 0 0; }

/* — tábla: asztali gépen 4 oszlop, keskeny kijelzőn 2×2 — */
#impBoard { width:min(96vw,980px); flex:1 1 auto; min-height:0; margin-top:14px; padding:0 8px 4px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-content:center; overflow-y:auto; }
@media (max-width:760px){ #impBoard { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; align-content:start; } }   /* minmax(0,…): a hosszú termék-név nem tolja ki a jobb oszlopot (telefon-kör, 2026-10-06) */
.impProd { padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; border-radius:var(--r-l); position:relative;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-base); cursor:default; }
.impProdHead { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.impProdHead b { font:400 var(--fs-m)/1.1 var(--display); }
.impHex { --size:min(13vw, 118px); --acc:var(--sage-bg); }                /* a termék hatszögben ül – méhsejt-diorama */
.impProd.dim2 .impHex { --acc:var(--sky-bg); }
.impHex img.art { width:76%; }
.impKey { position:absolute; top:8px; left:10px; font-size:12px; padding:2px 8px 1px; }
@media (pointer:coarse){ .impKey { display:none; } }            /* érintésnél nincs billentyű */
.impCount { position:absolute; top:8px; right:10px; font:700 12px/1 var(--body); color:var(--ink-soft);
  background:var(--bg); border:2px solid var(--line); border-radius:var(--r-pill); padding:4px 8px 3px; }
.impSlots { display:grid; grid-template-columns:1fr; gap:5px; }
.impSlot { min-height:32px; border:2px dashed var(--sage); border-radius:var(--r-s); display:flex; position:relative; }
.impSlot:empty::after { content:""; position:absolute; left:10px; top:50%; width:13px; height:14px; transform:translateY(-50%);
  clip-path:var(--hex); background:var(--sage); opacity:.5; }   /* üres hely: halvány hatszög-jel */
.impProd.hover { transform:scale(1.04); background:var(--butter); box-shadow:var(--soft); }
#impBoard.choosing .impProd { cursor:pointer; box-shadow:0 0 0 3px var(--accent), var(--soft); }
.impProd.full { background:var(--sage-bg); }
.impProd.full .impCount { background:var(--good-bg); color:var(--good-ink); border-color:var(--good); display:inline-flex; align-items:center; gap:3px; }
.impProd.full .impCount .pic { width:13px; height:13px; }
.impProd.good { background:var(--good-bg); }
.impProd.bad { background:var(--bad-bg); animation:dsShake var(--t-slow) var(--ease); }
@media (max-width:760px){
  .impProd { padding:8px; gap:6px; }
  .impHex { --size:min(22vw, 84px); }
  .impProdHead b { font-size:var(--fs-s); }
  .impSlot { min-height:28px; }
  .impCount { top:5px; right:6px; font-size:11px; padding:3px 6px 2px; }
}
/* álló telefon: mind a négy termék férjen ki görgetés nélkül (átvilágítás, 2026-10-06: „4-ből 2 termék látszik”) –
   kép és név egy sorban, a négy címkehely két oszlopban; a színjelmagyarázat fent a csipeszeken már látszik */
@media (max-width:760px) and (orientation:portrait){
  .impProdHead { flex-direction:row; justify-content:flex-start; text-align:left; gap:6px; }
  .impProdHead b { min-width:0; }
  .impCount { top:-11px; right:10px; }   /* a számláló a kártya felső szélén ül: a hosszú név („Elektromos autó”) nem fut alá */
  .impHex { --size:min(13vw, 52px); flex:none; }
  .impSlots { grid-template-columns:1fr 1fr; gap:4px; }
  .impSlot { min-height:26px; }
  .impTrayHint { display:none; }
}

/* zseton = már jó helyre tett címke; koppintásra megfordul (a szöveg két sorba törhet) */
.impChip { width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font:700 11px/1.2 var(--body); text-align:left; cursor:pointer; color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-s); padding:3px 6px; box-shadow:var(--soft-sm);
  transition:transform var(--t-fast) var(--ease); }
.impChip:focus-visible { transform:translateY(-1px) scale(1.02); }
@media (hover:hover) and (pointer:fine){ .impChip:hover { transform:translateY(-1px) scale(1.02); } }
.impChip .pic { width:13px; height:13px; vertical-align:-2px; margin-right:2px; }
.impChip.dim-env, .impLabel.dim-env { background:var(--sage-bg); }
.impChip.dim-soc, .impLabel.dim-soc { background:var(--sky-bg); }
@media (max-width:760px){ .impChip { font-size:var(--fs-xs); padding:2px 5px; line-height:1.2; } }   /* 12 px: a címke olvasható maradjon */

/* — címkepakli (alul) — */
#impTray { width:min(96vw,980px); margin-top:auto; padding:10px 8px max(18px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:6px; }
.impLabel { display:flex; align-items:center; gap:12px; max-width:min(92vw,560px); font:400 var(--fs-l)/1.2 var(--display);
  border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--press); padding:10px 20px 8px 12px;
  cursor:grab; touch-action:none; user-select:none; position:relative; }
.impLabel::before { content:""; position:absolute; left:-9px; top:50%; width:14px; height:14px; transform:translateY(-50%);
  background:var(--line); clip-path:var(--hex); }                                  /* „lyukasztott" címke-forma */
.impLabel .impDimHex { --size:44px; --acc:var(--surface); flex:0 0 auto; }
.impLabel .impDimHex > .pic { width:52%; height:52%; }
.impLabel.selected { outline:4px solid var(--accent); outline-offset:3px; }
.impLabel.dragging { opacity:.35; }
.impLabel.shake { animation:dsShake var(--t-slow) var(--ease); }
.impDim .pic { width:30px; height:30px; }
.impTrayHint { font:700 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.impTrayHint .pic { width:16px; height:16px; }
.impTrayInfo { font-size:var(--fs-xs); color:var(--ink-soft); text-align:center; }
.impLegend { display:inline-flex; gap:10px; margin-top:4px; }
.impGhost { position:fixed; z-index:var(--z-scene); pointer-events:none; transform:translate(-50%,-60%) rotate(-3deg); opacity:.95; margin:0; animation:none !important; }

/* visszajelző sor a pakli fölött (a buborék helyett – nem takarja el a következő címkét) */
.impFeedback { min-height:36px; max-width:min(94vw,560px); display:flex; align-items:center; gap:6px; justify-content:center; text-align:center;
  font-size:13px; line-height:1.35; border-radius:var(--r-m); padding:4px 12px; border:2px solid transparent; }
.impFeedback .pic { width:20px; height:20px; flex:0 0 auto; }
.impFeedback.ok { background:var(--good-bg); color:var(--good-ink); border-color:var(--good); }
.impFeedback.bad { background:var(--bad-bg); color:var(--bad-ink); border-color:var(--bad-ink); }

/* kör vége a pakli helyén */
.impRoundEnd { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:var(--fs-s); padding:12px 18px; }
.impRoundEnd b { font:400 var(--fs-l)/1.15 var(--display); }
.impRoundEnd .ds-stars { --size:30px; }
.impRoundEnd .ds-btn { margin-top:6px; }

/* — hátoldal (részletek) — előlapról megfordul — */
#impDetail { position:fixed; inset:0; z-index:var(--z-bubble); background:var(--scrim); display:flex; align-items:center; justify-content:center; perspective:1200px; }
#impDetail.hidden { display:none; }
.impFlip { position:relative; width:min(90vw,420px); height:min(78vh,520px); transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,.9,.3,1); }
.impFlip.flipped { transform:rotateY(180deg); }
.impFace { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:var(--line-w) solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--soft); padding:18px; display:flex; flex-direction:column; }
.impFront { background:var(--surface); align-items:center; justify-content:center; text-align:center; gap:12px; font:400 var(--fs-xl)/1.2 var(--display); }
.impDimBig .pic { width:72px; height:72px; }
.impBack { background:var(--bg); transform:rotateY(180deg); overflow-y:auto; }
.impBack h3 { font:400 var(--fs-xl)/1.1 var(--display); margin:8px 0 6px; }
.impBack p { font-size:var(--fs-s); line-height:1.45; margin:0 0 8px; }
.impBackHead { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.impProdTag img.art { height:26px; width:auto; vertical-align:-7px; margin-right:2px; }
.impSay { margin:2px 0 10px; }
.impSay .ds-avatar { --size:52px; }
.impSay .ds-bubble { font-size:var(--fs-s); line-height:1.45; }
#imp .ds-tag.dim-env { background:var(--sage-bg); } #imp .ds-tag.dim-soc { background:var(--sky-bg); }
.impNum { --stamp-rot:-2deg; background:var(--accent); color:var(--on-accent); border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:8px 12px 6px; margin:4px 0 10px; }
.impNum b { display:block; font:400 var(--fs-xl)/1.1 var(--display); }
.impNum small { display:block; font-size:var(--fs-xs); margin-top:3px; }
.impAlso, .impSrc { display:flex; gap:6px; align-items:flex-start; }
.impAlso .pic, .impSrc .pic { width:17px; height:17px; flex:0 0 auto; }
.impAlso { font-size:13px !important; }
.impSrc { font-size:11.5px !important; color:var(--ink-soft); word-break:break-word; }
.impSrc a { color:var(--focus); }
.impBackBar { position:sticky; bottom:-18px; margin:auto -18px -18px; padding:10px 0 16px; display:flex; justify-content:center;
  background:linear-gradient(to bottom, rgba(255,248,231,0), var(--bg) 35%); }

@media (prefers-reduced-motion: reduce){
  .impFlip, .impProd { transition-duration:.01s !important; }
  .impChip, .impLabel, .impProd.bad, .impLabel.shake { animation:none !important; }
}

/* a visszajelző buborék a pakli fölött jelenjen meg, ne takarja a tábla zsetonjait */
.imp #toast { top:96px; }
/* mobilon a reakció-méhecske kisebb, ne lógjon rá a pakli alatti szövegre */
@media (max-width:760px){ .overlay2d #mascot { width:54px; bottom:6px; left:6px; } }

/* ── Fekvő telefon (alacsony kijelző): tömör termék-lapok, görgethető oldal ── */
@media (max-height:520px) and (orientation:landscape){
  #imp { overflow-y:auto; }
  #impTop { margin-top:48px; }
  #impBoard { flex:0 0 auto; overflow:visible; gap:8px; margin-top:6px; }
  .impProd { padding:6px 8px; gap:4px; }
  .impProdHead { flex-direction:row; gap:6px; justify-content:center; align-items:center; }
  .impHex { --size:48px; }
  .impProdHead b { font-size:12px; }
  .impKey, .impCount { top:4px; font-size:10.5px; padding:2px 6px 1px; }
  .impSlots { grid-template-columns:1fr 1fr; gap:4px; }
  .impSlot { min-height:26px; }
  .impChip { font-size:10px; padding:2px 4px; }
  #impTray { margin-top:8px; padding-bottom:10px; gap:4px; }
  .impLabel { font-size:var(--fs-m); padding:8px 12px 6px; }
  .impFeedback { min-height:0; font-size:12px; padding:2px 8px; }
  .impFlip { height:calc(100vh - 30px); }
  .impTrayHint { display:none; }   /* fekvő telefonon nincs hely: a jelmagyarázat fent a csipeszeken látszik */
}

/* ── „Miért ide kerültek?” – kör végi magyarázat (js/impact-miert.js, 2026-10-06) ──
   Termékenként a címkék, mindegyiknél egy mondat „mi van mögötte”. Felül a cím és a bezárás, alul a tovább gomb ragad. */
#impMiert { position:fixed; inset:0; z-index:var(--z-panel); background:var(--scrim); display:flex; align-items:center; justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
#impMiert.hidden { display:none; }
.impMiertDoboz { width:min(100%, 760px); max-height:100%; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); overflow:hidden;
  animation:impMiertBe var(--t-base) var(--ease-out) both; }
@keyframes impMiertBe { from { opacity:0; transform:translateY(12px) scale(.98); } }
.impMiertDoboz:focus { outline:none; }
.impMiertFej { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.impMiertFej h2 { margin:0; display:flex; align-items:center; gap:8px; font:400 var(--fs-xl)/1.1 var(--display); text-wrap:balance; }
.impMiertFej h2 .pic { width:26px; height:26px; flex:none; }
.impMiertBe { margin:0; font-size:var(--fs-s); color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.impMiertJelmagy { display:inline-flex; gap:6px; }
.impMiertLista { overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:var(--sp-3); padding:2px 2px var(--sp-2); }
.impMiertTermek h3 { margin:0 0 6px; display:flex; align-items:center; gap:8px; font:400 var(--fs-l)/1.1 var(--display); }
.impMiertKep img.art { width:40px; height:40px; display:block; }
.impMiertTermek ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.impMiertSor { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:var(--r-m); border:1.5px solid color-mix(in srgb, var(--line) 25%, transparent); }
.impMiertSor.dim-env { background:var(--sage-bg); } .impMiertSor.dim-soc { background:var(--sky-bg); }
.impMiertJel .pic { width:20px; height:20px; margin-top:2px; }
.impMiertSor b { display:block; font-size:var(--fs-s); line-height:1.3; }
.impMiertSor p { margin:2px 0 0; font-size:var(--fs-s); line-height:1.4; }
.impMiertForras { font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); }
.impMiertLab { display:flex; justify-content:center; padding-top:var(--sp-1); }
.impMiertLab:empty { display:none; }
.impRoundEnd .impMiertGomb { margin-top:2px; }
@media (prefers-reduced-motion: reduce){ .impMiertDoboz { animation:none; } }