/* ============================================================
   EGY ÖKOS POLGÁRMESTER ÉLETE — 2D réteg (js/polgarmester.js, js/polgarmester-ui.js)
   Háttérben Méhesd (a kit 2D városa: szmogosból zöldbe), fölötte évszak-színezés; középen a döntéskártya (css/mech.css .mk-…).
   Csak tokenek. Az évszakok színe TARTALOM-szín (az évszak hangulata), ezért névvel deklarálva a rétegen.
   ============================================================ */
#pmLayer {
  --pm-tint-tavasz:rgba(190, 230, 160, .22); --pm-tint-nyar:rgba(255, 214, 120, .22);
  --pm-tint-osz:rgba(230, 150, 70, .22);     --pm-tint-tel:rgba(215, 232, 250, .42);
  position:fixed; inset:0; z-index:var(--z-hud); display:none; overflow:hidden; color:var(--ink); font-family:var(--body);
  background:var(--bg); user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.polgarmester #pmLayer { display:block; }
.pmCity { position:absolute; inset:0; }
.pmCity canvas { width:100%; height:100%; display:block; }
.pmTint { position:absolute; inset:0; background:var(--pm-tint-tavasz); transition:background var(--t-slow) var(--ease); pointer-events:none; }
#pmLayer[data-season="nyar"] .pmTint { background:var(--pm-tint-nyar); }
#pmLayer[data-season="osz"] .pmTint { background:var(--pm-tint-osz); }
#pmLayer[data-season="tel"] .pmTint { background:var(--pm-tint-tel); }

.pmWrap { position:relative; height:100%; max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-2);
  padding:max(56px, env(safe-area-inset-top)) var(--sp-4) max(12px, env(safe-area-inset-bottom)); overflow-y:auto; }

/* fejléc: polgármester-méhecske + város + évszak-sáv */
.pmHead { display:flex; align-items:center; justify-content:space-between; gap: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 12px; }
.pmTitle { display:flex; align-items:center; gap:var(--sp-2); }
.pmTitle img { width:48px; height:48px; object-fit:contain; }
.pmTitle b { display:block; font:400 var(--fs-l)/1 var(--display); } .pmTitle small { color:var(--ink-soft); font-weight:700; }
.pmSeasons { display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.pmSeasons li { display:flex; align-items:center; gap:3px; padding:2px 8px 2px 3px; border-radius:var(--r-pill); font-size:12px; font-weight:700;
  color:var(--ink-soft); border:2px solid transparent; }
.pmSeasons li .art, .pmSeasons li img { width:22px; height:22px; }
.pmSeasons li.is-now { background:var(--accent); color:var(--on-accent); border-color:var(--line); }
.pmSeasons li.is-done { opacity:.55; }

/* mérők: 2×2 mobilon, 4 egy sorban szélesen */
.pmMeters { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 10px;
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); box-shadow:var(--soft-sm); padding:8px 12px; }
@media (min-width:860px){ .pmMeters { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.pmMeter { position:relative; min-width:0; padding-bottom:24px; }
/* 2026-10-03 (tesztelői visszajelzés: „összecsúsznak a sávok”): a címke legfeljebb két sor, fix magassággal – így a négy sáv
   mindig egy vonalban marad; a szám és a változás-csip a sáv ALATT, egy fenntartott sorban (nem ugrál a magasság) */
.pmMeter .ds-mrow-head { min-height:2.45em; align-items:flex-start; padding-right:22px; }
.pmMeter .ds-mrow-head > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pmMeter .ds-mrow-head .ds-delta { position:absolute; right:0; bottom:0; margin:0; }
.pmMeter .pmVal { position:absolute; left:0; bottom:0; margin:0; }
.pmMeter .ds-mrow-head { font-size:12px; }
.pmVal { display:block; font:400 var(--fs-m)/1.1 var(--display); font-variant-numeric:tabular-nums; }
.pmMeter.is-warn .ds-meter { outline:2px solid var(--bad-ink); outline-offset:1px; }
.pmHint { position:absolute; top:-2px; right:-2px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--accent); border:2px solid var(--line); }
.pmHint .pic { width:14px; height:14px; }
.pmMeter.is-hint-up .pmHint, .pmMeter.is-hint-down .pmHint { animation:pmPop var(--t-base) var(--ease); }
@keyframes pmPop { from { transform:scale(.4); } to { transform:scale(1); } }

/* kártya */
.pmDeck { flex:1 0 auto; display:flex; justify-content:center; padding-top:var(--sp-2); }
.pmDeck .mk-stage { width:min(420px, 100%); min-height:300px; }
.pmDeck .mk-card { min-height:290px; padding:var(--sp-4); }
.pmDeck .mk-stamp.is-left, .pmDeck .mk-stamp.is-right { color:var(--ink); }   /* nincs „rossz” oldal: mindkét döntésnek ára van */
.pmDeck .mk-btn { min-width:0; flex:1 1 0; max-width:210px; white-space:normal; line-height:1.15; }
.pmWho { display:flex; align-items:center; gap:var(--sp-2); font-weight:800; }
.pmWho svg, .pmWho .szereplo { width:56px; height:56px; }
.pmArt .art, .pmArt img { width:64px; height:64px; }
.pmText { margin:0; font-size:var(--fs-m); font-weight:600; }
.pmNote { margin:0; font-size:13px; color:var(--ink-soft); font-style:italic; display:flex; align-items:center; gap:4px; }
.pmCrisis { position:absolute; top:-12px; left:50%; transform:translateX(-50%); }

/* „miért” sor a döntés után */
.pmWhy { min-height:48px; }
.pmWhy .pmLead { margin:0; text-align:center; font-weight:700; color:var(--ink-soft); display:flex; gap:6px; justify-content:center; align-items:center;
  background:var(--surface); border-radius:var(--r-pill); padding:6px 12px; }
.pmWhyBox { background:var(--surface); }
.pmWhyBox summary span { font-weight:600; }

/* évszak vége panel */
.pmPanel { position:absolute; inset:0; z-index:var(--z-panel); display:grid; place-items:center; padding:var(--sp-4); background:var(--scrim); }
.pmPanel.hidden { display:none; }
.pmPanelBox { width:min(460px, 100%); display:flex; flex-direction:column; gap:var(--sp-3); text-align:center; max-height:100%; overflow-y:auto; }
.pmSeasonArt .art, .pmSeasonArt img { width:72px; height:72px; }
.pmEvent { display:flex; gap:var(--sp-3); align-items:center; text-align:left; border-radius:var(--r-m); padding:var(--sp-3); border:2px solid var(--line); }
.pmEvent p { margin:0 0 4px; }
.pmEvent.is-ok { background:var(--good-bg); } .pmEvent.is-fail { background:var(--sage-bg); }
.pmDeltas { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pmChoices { margin:0; padding-left:1.1em; text-align:left; } .pmChoices li { margin-bottom:4px; }

@media (max-height:620px){ .pmTitle img { width:34px; height:34px; } .pmDeck .mk-stage, .pmDeck .mk-card { min-height:220px; } .pmArt .art, .pmArt img { width:44px; height:44px; } }
/* keskeny kijelző: az évszak-sávban csak az aktuális évszak neve; a „miért” sor lenyitás előtt két sor */
@media (max-width:480px){ .pmSeasons li:not(.is-now) span { display:none; } .pmSeasons li { padding-right:3px; } }
.pmWhyBox:not([open]) summary span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Álló telefon (telefon-kör, 2026-10-06): minden egy képernyőn, görgetés nélkül ──
   A fejléc a Menü gomb mellé kerül, egy sorba; a négy mérő EGY sorban: ikon + érték, alatta a sáv, alatta a változás
   (a mérő neve a title-ben és a sáv aria-labeljében). Így a kártya, a két válaszgomb és a „miért” sor is kifér
   (előtte a „miért” 745 px-nél kezdődött a 740 px magas képernyőn, a gombok alja levágva). */
@media (max-width:480px) and (orientation:portrait){
  .pmWrap { padding-top:max(8px, env(safe-area-inset-top)); gap:6px; }
  .pmHead { margin-left:56px; flex-wrap:nowrap; padding:4px 8px; gap:6px; }
  .pmTitle { min-width:0; gap:6px; } .pmTitle img { width:30px; height:30px; }
  .pmTitle b { font-size:var(--fs-m); } .pmTitle small { font-size:var(--fs-xs); }
  .pmSeasons { flex:none; gap:2px; } .pmSeasons li .art, .pmSeasons li img { width:20px; height:20px; }
  .pmMeters { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px 8px; padding:6px 10px 4px; }
  .pmMeter { display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"fej ertek" "sav sav" "valt valt";
    align-items:center; column-gap:4px; row-gap:3px; padding-bottom:0; }
  .pmMeter .ds-mrow { display:contents; }
  .pmMeter .ds-mrow-head { display:contents; }
  .pmMeter .ds-mrow-head > span:not(.ds-delta) { display:none; }                   /* a név a title-ben és a sáv aria-labeljében */
  .pmMeter .ds-mrow-head > .pic, .pmMeter .ds-mrow-head > img.art { grid-area:fej; width:20px; height:20px; }
  .pmMeter .ds-meter { grid-area:sav; height:10px; }
  .pmMeter .pmVal { grid-area:ertek; position:static; font-size:var(--fs-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pmMeter .ds-mrow-head .ds-delta { grid-area:valt; position:static; justify-self:start; max-width:100%; }
  .pmMeter::after { content:''; grid-area:valt; min-height:20px; }   /* a változás sora mindig fenntartva: nem ugrál a magasság */
  .pmHint { top:-6px; right:-6px; }
  .pmDeck { flex:0 0 auto; padding-top:0; }
  .pmDeck .mk-stage { min-height:0; }
  .pmDeck .mk-card { min-height:max(236px, calc(100dvh - 500px)); padding:var(--sp-3); }   /* magasabb telefonon nagyobb kártya */
  .pmDeck .mk-btn { font-size:var(--fs-s); padding-left:10px; padding-right:10px; }
  .pmWho svg, .pmWho .szereplo { width:46px; height:46px; }
  .pmArt .art, .pmArt img { width:52px; height:52px; }
  .pmWhy { min-height:0; }
  .pmWhy .pmLead { font-size:var(--fs-s); }
  /* az évszak-vége panel a Menü gomb alatt kezdődik (a gomb ne lógjon rá a panel sarkára) */
  .pmPanel { padding-top:calc(var(--tap) + 18px); }
}

/* ── Városi programok (perkek) az évszak-vége panelen (js/polgarmester-perk-ui.js) ──
   Három kártya rádiógombként: a választott kap mézes alapot és vastag keretet; a „Tovább” csak választás után él. */
.pmPerkek { display:flex; flex-direction:column; gap:var(--sp-2); text-align:left; padding-top:var(--sp-2); border-top:2px dashed var(--ink-soft); }
.pmPerkCim { margin:0; display:flex; gap:6px; align-items:center; justify-content:center; font:400 var(--fs-l)/1.15 var(--display); text-align:center; }
.pmPerkCim .pic { width:22px; height:22px; flex:none; }
.pmPerkLead { margin:0; text-align:center; font-size:var(--fs-s); color:var(--ink-soft); }
.pmPerkLista { display:grid; gap:var(--sp-2); }
.pmPerk { position:relative; display:flex; flex-direction:column; gap:4px; cursor:pointer; padding:10px 12px 10px 44px; min-height:var(--tap);
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-m); box-shadow:var(--soft-sm);
  transition:background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.pmPerk input { position:absolute; left:14px; top:13px; width:20px; height:20px; margin:0; accent-color:var(--leaf); }
.pmPerk:focus-within { outline:3px solid var(--focus); outline-offset:2px; }
.pmPerk.is-sel { background:var(--butter); box-shadow:0 0 0 2px var(--line), var(--soft-sm); }
@media (hover:hover){ .pmPerk:hover:not(.is-sel) { background:var(--bg); } }
.pmPerkNev { font:400 var(--fs-m)/1.15 var(--display); }
.pmPerkLeiras { font-size:var(--fs-s); line-height:1.35; }
.pmPerkSor { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.pmPerkSor small { min-width:5.5em; font-weight:700; color:var(--ink-soft); }
.pmPerkNem { align-self:center; }
.pmPerkMiert ul { margin:0; padding-left:1.1em; } .pmPerkMiert li { margin-bottom:var(--sp-2); font-size:var(--fs-s); }
.pmPerkHatas { margin:0; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-s); }
.pmPerkHatas .pic { width:18px; height:18px; }
.pmWhy .pmPerkHatas { background:var(--surface); border-radius:var(--r-pill); padding:4px 12px; }
.pmPanelBox .ds-btn[disabled] { opacity:.5; cursor:default; }