/* ============================================================
   Greenwashing-vadász — Tinder-szerű kártyajáték (2D, DOM)
   A 3D játékok felett, teljes képernyős rétegként fut; a 3D render ilyenkor áll.
   A design systemre építve (ds-chip, ds-meter, ds-tag, ds-say, ds-btn); csak tokenekkel.
   ============================================================ */
#gw {
  /* TARTALOM-színek: a kitalált „öko-pecsétek" szándékosan valódi címkéket utánoznak (zöld levél, kék bélyegző) */
  --gw-leaf:#7bc86c; --gw-leaf-edge:#4c9a3e; --gw-seal-bg:#e9f3e4; --gw-seal:#2f6b28; --gw-stamp:#1e5aa8; --gw-tag:#1f7a4d; --gw-tag-edge:#0f4f30;
  --gw-white:#ffffff;
  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:
    radial-gradient(circle at 18% 22%, rgba(254,207,57,.30) 0 90px, transparent 91px),
    radial-gradient(circle at 85% 78%, rgba(110,137,71,.20) 0 130px, transparent 131px),
    var(--bg); }
.gw #gw { display:flex; }

/* — felső sáv: cím + csipeszek + haladás — */
#gwTop { width:min(94vw,520px); margin:54px 0 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; }
#gwTitle { display:flex; align-items:center; gap:6px; font:400 var(--fs-l)/1.1 var(--display); padding-top:2px; }
#gwTitle .pic { width:24px; height:24px; }
#gwTitle small { display:block; font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
#gwStats { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
#gwStats .ds-chip { font-size:17px; padding:3px 10px 1px 7px; }
#gwStats .ds-chip .pic { width:19px; height:19px; }
#gwProg { width:min(94vw,520px); margin:8px 0 0; }
@media (max-width:560px){ #gwTop, #gwProg { width:calc(100vw - 28px); } }

/* — kártyapakli — */
#gwStage { position:relative; flex:1 1 auto; width:100%; display:flex; align-items:center; justify-content:center; perspective:1200px; min-height:0; }
.gwCard { position:absolute; width:min(88vw,370px); height:min(62vh,500px); cursor:grab; user-select:none;
  transform-style:preserve-3d; transition:transform .35s var(--ease); will-change:transform; }
.gwCard.dragging { transition:none; cursor:grabbing; }
.gwCard.enter { transform:scale(.9) translateY(18px); opacity:0; }
.gwInner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.3,.9,.3,1); }
.gwCard.flipped .gwInner { transform:rotateY(180deg); }
.gwFace { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--soft);
  padding:16px 18px; display:flex; flex-direction:column; overflow:hidden; }
.gwBack { transform:rotateY(180deg); background:var(--bg); overflow-y:auto; }

/* előlap: a TERMÉK a főszereplő, a címke/pecsét rá van „ragasztva" a jobb alsó sarkára */
.gwHero { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; margin:2px 0 6px; padding:0 20% 8% 0; }
.gwEmoji { display:block; }
.gwEmoji .art, .gwHero img.art { width:min(74%, 190px); height:auto; display:block; filter:drop-shadow(0 6px 0 rgba(47,55,30,.10)); }
.gwLabelArea { position:absolute; right:-6px; bottom:-2px; display:flex; align-items:center; justify-content:center; }
.gwName { text-align:center; margin-bottom:6px; }
.gwName b { font:400 var(--fs-l)/1.1 var(--display); display:block; }
.gwName small { font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
.gwClaim { font:400 var(--fs-l)/1.25 var(--display); text-align:center; background:var(--butter);
  border:2.5px dashed var(--ink-soft); border-radius:var(--r-m); padding:10px 12px 8px; }
.gwClaim small { display:block; font:400 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); margin-top:4px; }
.gwHint { display:flex; justify-content:space-between; margin-top:10px; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); }
.gwHint span { display:inline-flex; align-items:center; gap:3px; } .gwHint .pic { width:15px; height:15px; }

/* jelvények: rajzolt öko-pecsét keret (js/art/art-pecset.js) a kitalált márkáknak ÉS az engedélyköteles hivatalos címkéknek */
.gwBadge { position:relative; width:min(34vw, 118px); height:min(34vw, 118px); display:grid; place-items:center; text-align:center; }
/* hivatalos logó: ugyanakkora, mint a rajzolt pecsét, matricás kerettel („rá van ragasztva a termékre") */
.gwLabelArea > img { width:min(34vw, 116px); height:min(34vw, 116px); object-fit:contain; background:var(--surface);
  border:2.5px solid var(--line); border-radius:var(--r-s); padding:5px; box-shadow:var(--soft-sm); }
.gwBadge .gwSealBg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.gwBadge b { position:absolute; left:var(--tx, 50%); top:var(--ty, 50%); transform:translate(-50%, -50%); width:var(--tw, 48%);
  font:700 clamp(12px, 3vw, 13px)/1.12 var(--body); letter-spacing:.02em; text-transform:uppercase; color:var(--ink); overflow-wrap:anywhere; hyphens:auto; }
.gwBadge b.is-long { font-size:var(--fs-xs); width:calc(var(--tw, 48%) + 6%); }   /* legalább 12 px (méret-próba, 2026-10-06) */
.gwBadge b.is-xlong { font-size:var(--fs-xs); width:calc(var(--tw, 48%) + 14%); line-height:1.05; letter-spacing:0; }
/* 40 karakter fölött (2 kitalált „intézet”-pecsét) 12 px-en kilógna a pecsétből: ott marad az apró, „apró betűs” felirat – szándékos kivétel */
.gwBadge b.is-xxlong { font-size:clamp(8px, 2.3vw, 10px); width:calc(var(--tw, 48%) + 10%); line-height:1.08; }
@media (max-height:700px){ .gwBadge, .gwLabelArea > img { width:100px; height:100px; } }

/* húzás közbeni pecsétek */
.gwStamp { position:absolute; top:22px; padding:6px 12px 3px; font:400 24px/1 var(--display); border:var(--line-w) solid;
  border-radius:var(--r-s); opacity:0; pointer-events:none; background:var(--surface); z-index:2; }
.gwStamp.no  { left:16px;  color:var(--bad-ink); border-color:var(--bad-ink); --stamp-rot:-12deg; transform:rotate(-12deg); }
.gwStamp.yes { right:16px; color:var(--good); border-color:var(--good); --stamp-rot:12deg; transform:rotate(12deg); }

/* hátlap (magyarázat) */
.gwVerdict { display:flex; align-items:center; gap:8px; font:400 var(--fs-xl)/1.1 var(--display); margin-bottom:6px; }
.gwVerdict .pic { width:28px; height:28px; }
.gwVerdict.ok { color:var(--good-ink); } .gwVerdict.bad { color:var(--bad-ink); }
.gwTruth { align-self:flex-start; margin:0 0 10px; }
.gwBack p { font-size:13.5px; line-height:1.45; margin:0 0 8px; }
.gwWhere { margin:4px 0 8px; }
.gwWhere .ds-bubble { font-size:13.5px; }
.gwSrc { display:flex; gap:5px; align-items:flex-start; font-size:var(--fs-xs); color:var(--ink-soft); margin-top:auto; padding-top:6px; }
.gwSrc .pic { width:15px; height:15px; flex:0 0 auto; }
.gwSrc a { color:var(--focus); min-width:0; overflow-wrap:anywhere; }   /* a hosszú link törik, a „Forrás:” szó nem */
/* a „Tovább" gomb hosszú magyarázatnál is mindig látszik: a hátlap alján ragad (a szöveg görgethető) */
.gwNextBar { position:sticky; bottom:-16px; margin:8px -18px -16px; padding:10px 0 14px; display:flex; justify-content:center;
  background:linear-gradient(to bottom, rgba(255,248,231,0), var(--bg) 30%); }

/* — döntés-gombok — */
#gwBtns { display:flex; gap:16px; margin:6px 0 14px; }
#gwBtns button { display:flex; flex-direction:column; align-items:center; font:400 20px/1.1 var(--display); cursor:pointer; color:var(--ink);
  border:var(--line-w) solid var(--line); border-radius:var(--r-pill); padding:10px 22px 8px; box-shadow:var(--press); min-width:150px; }
#gwBtns button span { display:inline-flex; align-items:center; gap:6px; }
#gwBtns button .pic { width:20px; height:20px; }
#gwBtns button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
#gwNo { background:var(--bad-bg); color:var(--bad-ink); } #gwYes { background:var(--good-bg); color:var(--good-ink); }
#gwBtns button small { display:block; font:600 var(--fs-xs)/1.2 var(--body); opacity:.85; margin-top:2px; }
#gwBtns button[disabled] { opacity:.4; cursor:default; }
#gwTut { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:3; font-size:13px; padding:7px 14px; }

/* ── Tablet és érintő-TV (2026-10-06, átvilágítás: „tableten kicsi a kártya, sok az üres hely”):
   a kártya a képernyővel nő, a termék, a pecsét és az állítás is nagyobb – a döntés így messziről is olvasható. */
@media (min-width:700px) and (min-height:740px){
  .gwCard { width:min(62vw, 520px); height:min(64vh, 700px); }
  .gwFace { padding:22px 26px; }
  .gwEmoji .art, .gwHero img.art { width:clamp(170px, 27vh, 280px); }   /* a % itt a zsugorodó szülőhöz mérne – ezért képernyő-arányos */
  .gwBadge, .gwLabelArea > img { width:min(22vw, 156px); height:min(22vw, 156px); }
  .gwBadge b { font-size:clamp(12px, 1.5vw, 16px); } .gwBadge b.is-long { font-size:clamp(12px, 1.3vw, 14px); } .gwBadge b.is-xlong { font-size:clamp(12px, 1.2vw, 13px); }
  .gwBadge b.is-xxlong { font-size:clamp(10px, 1.1vw, 12px); }
  .gwName b { font-size:var(--fs-xl); } .gwName small { font-size:var(--fs-s); }
  .gwClaim { font-size:var(--fs-xl); padding:14px 16px 10px; } .gwClaim small { font-size:var(--fs-s); }
  .gwHint { font-size:var(--fs-s); } .gwHint .pic { width:18px; height:18px; }
  .gwBack { font-size:var(--fs-m); } .gwBack p.gwLead { font-size:var(--fs-l); }
  .gwMini { --mini-badge:min(150px, 20vw); }
}
@media (min-width:700px) and (min-height:740px) and (orientation:landscape){ .gwCard { height:min(60vh, 700px); } }   /* fekvőben a súgósor ne lógjon rá */

@media (prefers-reduced-motion: reduce){ .gwCard, .gwInner { transition-duration:.01s !important; } }

/* ── Fekvő telefon (alacsony kijelző): a döntőgombok a kártya két oldalára kerülnek ── */
@media (max-height:520px) and (orientation:landscape){
  .gw #gwTop { margin-top:8px; margin-left:200px; width:calc(100vw - 220px); flex-wrap:nowrap; }
  .gw #gwProg { margin-top:4px; width:calc(100vw - 40px); height:12px; }
  #gwTitle { font-size:var(--fs-m); white-space:nowrap; overflow:hidden; } #gwTitle small { display:none; }
  #gwStats { flex-wrap:nowrap; } #gwStats .ds-chip { font-size:15px; padding:2px 8px 0 6px; border-width:2.5px; }
  .gwCard { width:min(56vw,420px); height:calc(100vh - 78px); }
  .gwFace { padding:10px 14px; }
  .gwEmoji .art { width:min(52%, 150px); } .gwName b { font-size:var(--fs-m); }
  .gwBadge { width:110px; height:110px; } .gwLabelArea > img { width:104px; height:104px; }
  .gwClaim { font-size:var(--fs-m); padding:6px 10px 4px; } .gwHint { display:none; }
  #gwBtns { position:fixed; inset:0; margin:0; pointer-events:none; justify-content:space-between; align-items:center; padding:0 10px; }
  #gwBtns button { pointer-events:auto; min-width:0; width:max(18vw,110px); padding:14px 8px 10px; }
  #gwTut { bottom:4px; }
}
.gwBack p.gwLead { font-size:16px; font-weight:600; }   /* az indoklás első mondata (a többi lenyitható) */

/* ── Páros kártya: „Melyik a hiteles a kettő közül?” (js/greenwash-par.js, minden 5. lap) ──
   A két kis kártyán a CÍMKE a főszereplő (azon múlik a döntés), a termék-matrica kisebb, a sarokban. */
#gw.is-par #gwBtns { visibility:hidden; }          /* a hely megmarad, a kártya nem ugrik */
.gwParFront { gap:var(--sp-2); cursor:default; padding:14px 14px 12px; }
.gwParCim { display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; font:400 var(--fs-l)/1.15 var(--display); text-wrap:balance; }
.gwParCim .pic { width:22px; height:22px; flex:none; }
.gwPar { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
.gwMini { --mini-badge:min(124px, 30vw); min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 12px;
  font:inherit; color:var(--ink); text-align:center; cursor:pointer; touch-action:manipulation;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--press);
  transition:transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out), background var(--t-fast) var(--ease-out); }
.gwMini:active { transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.gwMini:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@media (hover:hover){ .gwMini:hover { background:var(--butter); } }
.gwMiniHero { position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; }
.gwMiniArt { position:absolute; left:0; top:0; }
.gwMiniArt .art, .gwMiniArt img.art { width:46px; height:auto; display:block; }
.gwMiniLabel .gwBadge, .gwMiniLabel > img { width:var(--mini-badge); height:var(--mini-badge); }
.gwMiniLabel > img { object-fit:contain; background:var(--surface); border:2.5px solid var(--line); border-radius:var(--r-s); padding:4px; }
.gwMiniLabel .gwBadge b, .gwMiniLabel .gwBadge b.is-long { font-size:calc(var(--mini-badge) * .105); }
.gwMiniLabel .gwBadge b.is-xlong { font-size:calc(var(--mini-badge) * .095); }
.gwMiniName { font:400 var(--fs-m)/1.1 var(--display); overflow-wrap:break-word; hyphens:auto; }
.gwMiniClaim { width:100%; font:400 var(--fs-s)/1.25 var(--display); background:var(--butter); border:2px dashed var(--ink-soft);
  border-radius:var(--r-s); padding:5px 6px 3px; overflow-wrap:break-word; hyphens:auto; }
/* hátlap: a két kártya indoklása egymás alatt */
.gwParMiert { padding:8px 0 4px; border-top:1.5px dashed var(--ink-soft); }
.gwParMiert > b { display:flex; align-items:flex-start; gap:6px; font:400 var(--fs-m)/1.2 var(--display); margin-bottom:4px; }
.gwParMiert > b .pic { width:20px; height:20px; flex:none; }
.gwParMiert.is-jo > b { color:var(--good-ink); } .gwParMiert.is-rossz > b { color:var(--bad-ink); }
.gwParMiert .gwSrc { margin-top:0; }

/* jó ítélet után a hátlap magától továbblép: a „Tovább” alján futó sáv mutatja a hátralévő időt (js/greenwash-par.js) */
.gwNext.is-auto { position:relative; overflow:hidden; }
.gwNext.is-auto::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--ink); opacity:.4;
  transform-origin:left center; animation:gwAuto var(--gw-auto, 4s) linear forwards; }
@keyframes gwAuto { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-height:520px) and (orientation:landscape){
  .gwParFront { padding:8px 10px; } .gwParCim { font-size:var(--fs-m); }
  .gwMini { --mini-badge:76px; padding:6px; gap:4px; } .gwMiniArt { display:none; }
  .gwMiniName { font-size:var(--fs-s); }
}
.gwPar { container-type:size; }
@supports (width:1cqh){
  .gwMini { --mini-badge:min(124px, 30vw, 44cqh); }
  @container (max-height:240px){ .gwMini .gwMiniArt { display:none; } }
}

/* ── Hátlap címke-sora (js/greenwash-hatlap.js, 2026-10-06): kis címke + az állítás, benne kiemelve az árulkodó szó ── */
.gwKulcs { --kulcs-badge:64px; display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:6px 10px 6px 6px;
  background:var(--surface); border:2px dashed var(--ink-soft); border-radius:var(--r-m); }
.gwKulcsCimke { flex:none; width:var(--kulcs-badge); height:var(--kulcs-badge); display:grid; place-items:center; }
.gwKulcsCimke .gwBadge { width:var(--kulcs-badge); height:var(--kulcs-badge); }
.gwKulcsCimke .gwBadge b { display:none; }   /* kicsiben csak a pecsét formája: a felirat mellette olvasható, kiemeléssel */
.gwKulcsCimke > img { width:var(--kulcs-badge); height:var(--kulcs-badge); object-fit:contain; background:var(--surface);
  border:2px solid var(--line); border-radius:var(--r-s); padding:3px; }
.gwKulcsSzoveg { min-width:0; display:flex; flex-direction:column; gap:2px; }
.gwKulcsSzoveg small { font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.gwKulcsSzoveg > span { font:400 var(--fs-m)/1.25 var(--display); overflow-wrap:break-word; }
.gwKulcsJel { color:inherit; background:var(--honey); border-radius:4px; padding:0 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.gwKulcs.is-wash .gwKulcsJel { background:var(--bad-bg); box-shadow:inset 0 -3px 0 var(--bad-ink); }
.gwKulcs.is-green .gwKulcsJel { background:var(--good-bg); box-shadow:inset 0 -3px 0 var(--good-ink); }
@media (min-width:700px) and (min-height:740px){ .gwKulcs { --kulcs-badge:84px; } .gwKulcsSzoveg > span { font-size:var(--fs-l); } }
@media (max-height:520px) and (orientation:landscape){ .gwKulcs { --kulcs-badge:48px; margin-bottom:6px; } }