/* ============================================================
   GREENWASHING-PÁRBAJ — kétszemélyes osztott képernyő (js/parbaj.js)
   Bal oldal = Kék játékos, jobb oldal = Zöld játékos, középen a kártya. Rendezvényi nagy érintőképernyőre
   (1920×1080) és tabletre: a méretek a kijelző magasságához igazodnak (vh), hogy távolról is olvasható legyen.
   Csak tokenek (css/tokens.css); a játékos-színek szerep-nevek a palettára mutatva.
   ============================================================ */
#pb {
  /* a két játékos színe (a palettából): kék = égkék, zöld = zsálya/levél */
  --pb-p1-bg:var(--sky-bg); --pb-p1-acc:var(--focus);
  --pb-p2-bg:var(--sage-bg); --pb-p2-acc:var(--leaf);
  position:fixed; inset:0; z-index:var(--z-hud); display:none;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap:clamp(10px, 1.6vw, 28px);
  padding:max(58px, 5.5vh) clamp(10px, 1.6vw, 28px) max(14px, env(safe-area-inset-bottom));
  color:var(--ink); font-family:var(--body); overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  background:   /* méhsejt-minta, mint a főmenüben (--honey-deep halványan) + mézes színfolt a kártya fölött */
    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 50% 4%, rgba(254,207,57,.30) 0 22vh, transparent calc(22vh + 1px)),
    var(--bg); }
.parbaj #pb { display:grid; }

/* ---- játékos-oldal ---- */
.pbSide { --pb-bg:var(--pb-p1-bg); --pb-acc:var(--pb-p1-acc);
  display:flex; flex-direction:column; align-items:stretch; gap:clamp(6px, 1.2vh, 16px); min-height:0;
  background:var(--pb-bg); border:var(--line-w) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--soft);
  padding:clamp(10px, 1.8vh, 24px) clamp(10px, 1.4vw, 24px); transition:background var(--t-base) var(--ease); }
.pbSide.is-p2 { --pb-bg:var(--pb-p2-bg); --pb-acc:var(--pb-p2-acc); }
.pbSide.is-win { background:var(--butter); }
.pbHead { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); font:400 clamp(var(--fs-xl), 4.4vh, 52px)/1 var(--display); }
.pbHex { display:inline-grid; place-items:center; flex:0 0 auto; width:1.35em; aspect-ratio:1/1.1; clip-path:var(--hex);
  background:var(--pb-acc); color:var(--cream); font:400 .8em/1 var(--display); padding-top:.12em; }
.pbScore { text-align:center; font-size:clamp(64px, 17vh, 200px); line-height:.9; color:var(--ink); }
.pbState { min-height:clamp(30px, 4.4vh, 48px); display:flex; justify-content:center; align-items:center; }
.pbState .ds-tag { font-size:clamp(var(--fs-s), 2.2vh, var(--fs-xl)); padding:.4em .9em .3em; border-width:var(--line-w);
  /* a „Ezt a kártyát kihagyod – most a másik tippelhet” tördelődjön, ne lógjon ki a keskeny oldalsávból (2026-10-06) */
  white-space:normal; max-width:100%; text-align:center; line-height:1.2; border-radius:var(--r-l); text-wrap:balance; }
.pbState .ds-tag .pic { width:1.1em; height:1.1em; }

/* ---- a két nagy gomb ---- */
.pbBtns { flex:1 1 auto; min-height:0; display:grid; grid-template-rows:1fr 1fr; gap:clamp(8px, 1.6vh, 20px); }
.pbBtn { min-height:max(var(--tap), 9vh); display:flex; align-items:center; justify-content:center; gap:.4em; cursor:pointer;
  border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--press); padding:.3em .6em .2em;
  font:400 clamp(var(--fs-xl), 5.4vh, 64px)/1 var(--display); touch-action:none; user-select:none; -webkit-user-select:none;
  transition:transform .06s, box-shadow .06s, opacity var(--t-base); }
.pbBtn .pic { width:1.1em; height:1.1em; }
.pbBtn span { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.pbBtn small { font:700 clamp(var(--fs-xs), 1.8vh, var(--fs-l))/1.2 var(--body); opacity:.85; }
.pbBtn.is-guilty { background:var(--bad-bg); color:var(--bad-ink); }
.pbBtn.is-fair { background:var(--good-bg); color:var(--good-ink); }
.pbBtn:active:not([disabled]) { transform:translateY(4px); box-shadow:0 0 0 var(--line); }
.pbBtn[disabled] { opacity:.45; cursor:default; }
.pbBtn:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.pbSide.is-locked .pbBtns { filter:grayscale(.7); }
.pbKeys { text-align:center; font:600 var(--fs-xs)/1.4 var(--body); color:var(--ink-soft); }
@media (pointer:coarse){ .pbKeys { display:none; } }

/* ---- közép: fejléc, idősáv, kártya, magyarázat ---- */
.pbMid { display:flex; flex-direction:column; align-items:center; gap:clamp(6px, 1.2vh, 14px); min-width:0; min-height:0; }
.pbTop { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-2); }
.pbTitle { display:inline-flex; align-items:center; gap:6px; font:400 clamp(var(--fs-l), 3vh, var(--fs-2xl))/1 var(--display); margin-right:var(--sp-2); }
.pbTitle .pic { width:1.1em; height:1.1em; }
.pbTop .ds-chip { font-size:clamp(16px, 2.4vh, 28px); }
.pbTop .ds-chip .pic { width:1em; height:1em; }
.pbTime { width:100%; height:clamp(12px, 1.8vh, 20px); flex:0 0 auto; border:var(--line-w) solid var(--line); border-radius:var(--r-pill);
  background:var(--sage-bg); overflow:hidden; }
.pbTime i { display:block; height:100%; background:var(--accent); transform-origin:left center; }
.pbTime.is-low i { background:var(--blossom); }

.pbStage { flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.pbCountdown { font:400 clamp(90px, 26vh, 300px)/1 var(--display); color:var(--ink); }
.pbCard { position:relative; box-sizing:border-box; width:min(100%, 66vh); height:100%; display:flex; flex-direction:column; gap:clamp(6px, 1vh, 12px);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--soft);
  padding:clamp(12px, 2vh, 26px); }
.pbHero { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 22% 6% 0; }
.pbArt img.art { width:auto; height:auto; max-width:100%; max-height:min(38vh, 420px); min-height:min(24vh, 260px); display:block;
  filter:drop-shadow(0 6px 0 rgba(47,55,30,.10)); }
.pbLabel { --pb-badge:clamp(92px, 17vh, 200px); position:absolute; right:0; bottom:0; display:flex; align-items:center; justify-content:center; }
.pbLabel .gwBadge { width:var(--pb-badge); height:var(--pb-badge); }
.pbLabel .gwBadge b, .pbLabel .gwBadge b.is-long, .pbLabel .gwBadge b.is-xlong { font-size:calc(var(--pb-badge) * .1); }
.pbLabel .gwBadge b.is-xlong { font-size:calc(var(--pb-badge) * .085); }
.pbLabel > img { width:var(--pb-badge); height:var(--pb-badge); object-fit:contain; background:var(--surface);
  border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:6px; box-shadow:var(--soft-sm); }
.pbName { text-align:center; }
.pbName b { display:block; font:400 clamp(var(--fs-l), 3.4vh, 38px)/1.1 var(--display); }
.pbName small { font:600 clamp(var(--fs-xs), 1.5vh, var(--fs-m))/1.3 var(--body); color:var(--ink-soft); }
.pbClaim { text-align:center; font:400 clamp(var(--fs-l), 3.8vh, 44px)/1.15 var(--display); background:var(--butter);
  border:var(--line-w) dashed var(--ink-soft); border-radius:var(--r-m); padding:.35em .5em .25em; overflow-wrap:anywhere; }

/* ítélet-pecsét: a helyes válasz (a DS „stamp” mozgásával csap le) */
.pbStamp { position:absolute; left:0; right:0; top:28%; margin:auto; width:max-content; max-width:92%; opacity:0; pointer-events:none;
  --stamp-rot:-8deg; transform:rotate(var(--stamp-rot)); font:400 clamp(44px, 9vh, 110px)/1 var(--display); padding:.12em .4em 0;
  border:calc(var(--line-w) * 2) solid; border-radius:var(--r-l); box-shadow:var(--soft); }
.pbStamp.is-bad { opacity:1; color:var(--bad-ink); border-color:var(--bad-ink); background:var(--bad-bg); }
.pbStamp.is-good { opacity:1; color:var(--good-ink); border-color:var(--good); background:var(--good-bg); }

.pbSay { flex:0 0 auto; min-height:clamp(64px, 12vh, 150px); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center; }
.pbWho, .pbLead { font:400 clamp(var(--fs-l), 3.6vh, 42px)/1.1 var(--display); }
.pbWhy { font:600 clamp(var(--fs-m), 2.5vh, 30px)/1.3 var(--body); max-width:34em; text-wrap:balance; }
/* felfedés: a teljes rövid magyarázat 4 mp-ig látszik, koppintásra tovább (2026-10-06) */
.pbSay.is-reveal { cursor:pointer; position:relative; z-index:1; background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:var(--sp-2) var(--sp-3); }   /* álló telefonon a kártya alja se takarja */
.pbTap { font:600 var(--fs-xs)/1.2 var(--body); color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; }
.pbTap .pic { width:14px; height:14px; }

/* ---- eredmény ---- */
.pbEnd { position:absolute; inset:0; z-index:var(--z-panel); background:var(--scrim); display:flex; align-items:center; justify-content:center;
  padding:max(56px, 5vh) var(--sp-4) var(--sp-4); overflow-y:auto; }
.pbEnd.hidden { display:none; }
.pbEnd .ds-panel { width:min(720px, 100%); padding:clamp(16px, 3vh, 36px); }
.pbEnd .ds-result-bee { --size:clamp(80px, 13vh, 150px); }
.pbEnd .ds-result-title { font-size:clamp(var(--fs-2xl), 6vh, 72px); }
.pbEnd .ds-result-lead { font-size:clamp(var(--fs-m), 2.4vh, var(--fs-xl)); }
.pbEnd .ds-btn { font-size:clamp(21px, 3.2vh, 36px); min-height:max(var(--tap), 7vh); }
.pbEnd .ds-btn .pic, .pbEnd .ds-btn-sm .pic { width:1.1em; height:1.1em; }
.pbEnd .ds-btn-sm { font-size:clamp(var(--fs-s), 2vh, var(--fs-l)); min-height:var(--tap); padding:.5em 1.2em; }
.pbFinals { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); width:100%; }
.pbFinal { --pb-bg:var(--pb-p1-bg); --pb-acc:var(--pb-p1-acc); display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  background:var(--pb-bg); border:var(--line-w) solid var(--line); border-radius:var(--r-l); padding:var(--sp-3); }
.pbFinal.is-p2 { --pb-bg:var(--pb-p2-bg); --pb-acc:var(--pb-p2-acc); }
.pbFinal.is-top { box-shadow:0 0 0 5px var(--accent), var(--soft); }
.pbFinalName { display:inline-flex; align-items:center; gap:var(--sp-2); font:400 clamp(var(--fs-l), 3vh, 34px)/1 var(--display); }
.pbFinalScore { font-size:clamp(48px, 10vh, 120px); line-height:.95; }
.pbFinal .ds-stars { --size:clamp(24px, 4vh, 44px); }

/* ---- álló kijelző (álló tablet): kártya felül, a két játékos alul egymás mellett ---- */
@media (max-aspect-ratio:4/5){
  #pb { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) auto; }
  .pbMid { grid-column:1 / -1; grid-row:1; }
  .pbSide.is-p1 { grid-column:1; grid-row:2; } .pbSide.is-p2 { grid-column:2; grid-row:2; }
  .pbSide { gap:var(--sp-2); }
  .pbScore { font-size:clamp(48px, 8vh, 110px); }
  .pbState { min-height:clamp(28px, 3.4vh, 44px); }
  .pbBtns { flex:0 0 auto; grid-template-rows:auto auto; }
  .pbBtn { min-height:max(var(--tap), 10vh); font-size:clamp(var(--fs-l), 4vh, 52px); }
  .pbCard { width:min(100%, 56vh); }
  /* a matrica a képsáv közepén (csiszoló kör, 2026-10-05: a magas spirálfüzet rálógott a névre – telefonon lásd lent) */
  .pbArt { display:flex; align-items:center; justify-content:center; }
  .pbArt img.art { max-height:22vh; min-height:0; }
  .pbLabel { --pb-badge:clamp(80px, 12vh, 160px); }
  .pbSay { min-height:clamp(56px, 9vh, 120px); }
}
/* keskeny, álló telefon: a két oszlop egyenként ~170 px – a gombfelirat a szélességhez igazodik, és a gomb
   soha nem lóghat ki az oszlopából (a méret-próba itt találta: tools/meret-proba.js) */
@media (max-width:520px){
  .pbSide { padding:var(--sp-2); }
  .pbBtn { min-width:0; font-size:clamp(var(--fs-m), 5.6vw, var(--fs-xl)); gap:.25em; padding:.3em .35em .2em; }
  .pbBtn span { min-width:0; }
  .pbBtn small { font-size:var(--fs-xs); overflow-wrap:anywhere; }
  .pbHead { font-size:var(--fs-xl); gap:var(--sp-2); }
  /* a bal felső „Menü” gomb ne lógjon rá a címre (csiszoló kör, 2026-10-05) */
  .pbTop { padding-inline-start:calc(var(--tap) + 14px); }
  /* álló telefonon a kártyának kevés hely jutott (a hosszú, háromsoros állításnál a kép eltűnt, a címke a fejlécre csúszott):
     kisebb pontszám, alacsonyabb gombok és állítás-betű, a matricának mindig marad egy sáv (csiszoló kör, 2026-10-05) */
  .pbScore { font-size:clamp(40px, 6vh, 64px); }
  .pbBtn { min-height:max(var(--tap), 7vh); }
  .pbSay { min-height:48px; }
  .pbState .ds-tag { font-size:var(--fs-s); padding:.35em .6em .25em; }   /* a „kihagyod” felirat két-három sorban, ne négyben */
  .pbClaim { font-size:clamp(var(--fs-m), 2.7vh, var(--fs-xl)); }
  .pbHero { min-height:clamp(56px, 9vh, 110px); }
  .pbArt img.art { max-height:min(15vh, 130px); }
}
/* alacsony, fekvő telefon: kisebb pontszám és gombfelirat */
@media (max-height:500px){
  #pb { padding-top:52px; }
  .pbScore { font-size:44px; } .pbHead { font-size:var(--fs-l); } .pbBtn small { display:none; }
  .pbSay { min-height:48px; }
}
@media (prefers-reduced-motion: reduce){ .pbSide, .pbBtn { transition:none; } }
.reduce-motion .pbSide, .reduce-motion .pbBtn { transition:none; }

/* ── Páros kártya és sorozat (js/parbaj-par.js) ── */
.pbSor { display:inline-flex; align-items:center; gap:2px; font:400 .6em/1 var(--display); color:var(--ink); }
.pbSor:empty { display:none; }
.pbSor .pic { width:1em; height:1em; }
.pbParCim { text-align:center; font:400 clamp(var(--fs-l), 3.6vh, 42px)/1.1 var(--display); }
.pbPar { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(8px, 1.4vw, 20px); }
.pbMini { --mini-badge:min(clamp(80px, 24vh, 300px), 28vw); position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center;
  gap:clamp(4px, .8vh, 10px); padding:clamp(8px, 1.4vh, 18px); text-align:center; background:var(--bg);
  border:var(--line-w) solid var(--line); border-radius:var(--r-l); transition:opacity var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out); }
.pbMiniJel { position:absolute; top:clamp(6px, 1vh, 12px); left:clamp(6px, 1vh, 12px); display:grid; place-items:center;
  width:clamp(28px, 4vh, 48px); height:clamp(28px, 4vh, 48px); border-radius:50%; background:var(--surface); border:var(--line-w) solid var(--line); }
.pbMini[data-gwpar="1"] .pbMiniJel { left:auto; right:clamp(6px, 1vh, 12px); }
.pbMiniJel .pic { width:60%; height:60%; }
.pbMini .gwMiniArt { left:auto; right:0; } .pbMini[data-gwpar="1"] .gwMiniArt { right:auto; left:0; }
.pbMini .gwMiniArt .art, .pbMini .gwMiniArt img.art { width:clamp(40px, 7vh, 90px); }
.pbMini .gwMiniName { font-size:clamp(var(--fs-m), 2.8vh, 34px); }
.pbMini .gwMiniClaim { font-size:clamp(var(--fs-s), 2.6vh, 32px); border-width:var(--line-w); }
.pbMini.is-jo { background:var(--good-bg); box-shadow:0 0 0 5px var(--good), var(--soft); }
.pbMini.is-rossz { opacity:.45; }
/* páros kártyán a gombok semlegesek: nem „bűnös/ártatlan”, hanem „bal/jobb” */
#pb.is-par .pbBtn { background:var(--surface); color:var(--ink); }
/* a kis kártyák címkéje a rendelkezésre álló MAGASSÁGHOZ igazodik (álló tableten és telefonon a középső sáv alacsony);
   szűk helyen a terméknév, a matrica és a nyíl elmarad – a címke és az állítás a lényeg */
.pbPar { container-type:size; }
@supports (width:1cqh){
  .pbMini { --mini-badge:min(clamp(64px, 24vh, 300px), 28vw, 44cqh); }
  @container (max-height:260px){ .pbMini .gwMiniName, .pbMini .gwMiniArt, .pbMiniJel { display:none; } }
}