/* ============================================================
   A mi bolygónk — a glóbusz fölötti réteg (a 3D a közös vásznon fut; ez csak a saját elemeinél fogja el a koppintást)
   Csak tokenek (docs/arculat.md). Fajta: ! probléma (parázs) · ✓ siker (levél) · ◆ startup (méz) – szín ÉS jel.
   ============================================================ */
.bolygo #hud, .bolygo #hudBtn, .bolygo #score, .bolygo #hint, .bolygo #joy, .bolygo #touchBtns, .bolygo #reticle,
.bolygo #nameTag, .bolygo #coach { display:none !important; }
.bolygo #sysBtns { flex-direction:row; top:10px; left:10px; gap:6px; }   /* a réteg a jatek-menu.css-é: a Menü minden panel fölött (menu-proba) */
@media (pointer:fine){ .bolygo #sysBtns button { width:36px; height:36px; } }
#bl { position:fixed; inset:0; z-index:var(--z-hud); pointer-events:none; color:var(--ink); }
#bl > * { pointer-events:auto; }
#bl.hidden { display:none; }
#blTop { position:absolute; top:54px; left:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; pointer-events:none; }
#blTop > * { pointer-events:auto; }
#blCim { display:flex; gap:6px; align-items:center; font:400 var(--fs-l)/1.1 var(--display); background:var(--surface); border-radius:var(--r-m); padding:6px 10px; box-shadow:var(--soft-sm); }
#blCim .pic { width:24px; height:24px; }
#blCim small { display:block; font:600 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); }
#blGombok { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#blTemak { position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
#blTemak .ds-chip { min-height:var(--tap); cursor:pointer; box-shadow:var(--soft-sm); }

/* jelmagyarázat + idővonal */
#blJm { position:absolute; left:12px; bottom:72px; width:min(92vw, 360px); display:grid; gap:6px; padding:10px 12px; border-radius:var(--r-l);
  background:var(--surface); box-shadow:var(--soft); font-size:var(--fs-xs); }
#blJm.hidden { display:none; }
.blSkala { display:flex; flex-wrap:wrap; gap:4px 10px; }
.blSav { display:inline-flex; gap:4px; align-items:center; }
.blSav i { width:16px; height:12px; border-radius:3px; background:var(--c); border:1px solid var(--line); }
.blSav i.blNincsMinta { background:repeating-linear-gradient(45deg, var(--paper) 0 3px, var(--sage) 3px 5px); }
.blIdo { display:flex; gap:8px; align-items:center; }
.blIdo input { flex:1; accent-color:var(--honey-deep); min-height:var(--tap); }
.blEvSzam { font:400 var(--fs-l)/1 var(--display); margin:0; }
.blJmForras { color:var(--ink-soft); display:inline-flex; gap:4px; align-items:center; overflow-wrap:anywhere; }
.blJmForras .pic { width:14px; height:14px; flex:none; }
.blVita { background:var(--sky-bg); font-size:var(--fs-xs); }

/* kártya: asztalon oldalt, telefonon alul */
#blLap { position:absolute; top:112px; right:12px; bottom:72px; width:min(92vw, 400px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
#blLap.hidden { display:none; }
.blZar { position:sticky; top:0; align-self:flex-end; flex:none; }
.blLapFej b { font:400 var(--fs-l)/1.1 var(--display); display:block; }
.blLapFej small { color:var(--ink-soft); font-size:var(--fs-xs); }
.blTetel { display:flex; gap:10px; align-items:flex-start; }
.blTetel b { display:block; }
.blTetel small { color:var(--ink-soft); font-size:var(--fs-xs); }
.blTetel p, .blUres, .blKosz { margin:4px 0; font-size:var(--fs-s); line-height:1.45; }
.blEv { color:var(--ink-soft); font-style:italic; }
.blJel { flex:none; width:26px; height:26px; clip-path:var(--hex); display:grid; place-items:center; font:800 13px/1 var(--body); color:var(--paper); }
.blJel.f-problema { background:var(--ember); }
.blJel.f-siker { background:var(--leaf); }
.blJel.f-startup { background:var(--honey-deep); }
.blAlcim { margin:6px 0 0; font:400 var(--fs-m)/1.2 var(--display); display:flex; align-items:center; gap:8px; }
.blAlcim .blJel { width:22px; height:22px; font-size:11px; }
.blMutatok { display:grid; gap:8px; }
.blMutato { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:baseline; font-size:var(--fs-xs); padding:6px 8px; border-radius:var(--r-m); background:var(--bg); }
.blMutato b { font:700 var(--fs-s)/1.2 var(--body); text-align:right; }
.blMutato b small { font-weight:600; color:var(--ink-soft); }
.blNincs { color:var(--ink-soft); }
.blSpark { grid-column:1 / -1; width:100%; height:24px; }
.blSpark polyline { fill:none; stroke:var(--honey-deep); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.blForras p { font-size:var(--fs-xs) !important; overflow-wrap:anywhere; }
.blLista { display:grid; gap:6px; }
.blListaElem { display:flex; gap:8px; align-items:center; text-align:left; min-height:var(--tap); padding:6px 8px; border:0; border-radius:var(--r-m);
  background:var(--bg); color:var(--ink); font:600 var(--fs-s)/1.3 var(--body); cursor:pointer; }
.blListaElem:focus-visible { background:var(--butter); }
@media (hover:hover) and (pointer:fine){ .blListaElem:hover { background:var(--butter); } }

/* nézetváltó panel (2.0): asztalon bal oldalt, telefonon alul; közelítő gombok jobb oldalt; ország-szinten „itt vagy” */
#blNezet { position:absolute; top:112px; left:12px; bottom:72px; width:min(92vw, 300px); overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
#blNezet.hidden { display:none; }
#blNezet .blListaElem.on { background:var(--butter); box-shadow:inset 0 0 0 2px var(--honey-deep); }
#blNezet .blListaElem .pic { width:20px; height:20px; flex:none; }
.blAlReteg { flex-wrap:wrap; margin:-2px 0 4px 12px; }
.blAlReteg button { flex:1 1 auto; line-height:1.2; }
.blKapcs { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:var(--tap); font:600 var(--fs-s)/1.3 var(--body); }
.blKapcs > span { display:inline-flex; align-items:center; gap:8px; }
.blKapcs .pic { width:20px; height:20px; }
.blKapcs .blJel { width:22px; height:22px; font-size:11px; }
#blNezet:not(.hidden) ~ #blJm { left:calc(24px + min(92vw, 300px)); }
.blJmMit { color:var(--ink-soft); line-height:1.35; }
#blZoom { position:absolute; right:12px; top:50%; translate:0 -50%; display:grid; gap:6px; justify-items:center; }
#blZoom .ds-icon-btn { box-shadow:var(--soft-sm); }
.blSzintNev { font:700 var(--fs-xs)/1 var(--body); color:var(--ink-soft); background:var(--surface); border-radius:var(--r-s); padding:3px 6px; }

/* országkártya 2.0: szavas harmad-jelzés, összevetés; tétel-címkék, link / QR, „miért fontos 2050-hez” */
.blJel.f-tudas { background:var(--berry); }
.blHarmad { grid-column:1 / -1; display:inline-flex; gap:6px; align-items:center; color:var(--ink-soft); font-size:var(--fs-xs); }
.blHarmadJel { display:inline-flex; gap:2px; }
.blHarmadJel i { width:8px; height:10px; border-radius:2px; background:var(--sage); opacity:.45; }
.blHarmadJel i.on { background:var(--olive); opacity:1; }
.blOsszGomb { align-self:flex-start; }
.blOsszFej { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.blOsszFej small { display:block; font-weight:600; color:var(--ink-soft); font-size:var(--fs-xs); }
.blOsszTabla { overflow-x:auto; flex:none; }
.blOsszTabla table { width:100%; border-collapse:collapse; font-size:var(--fs-xs); }
.blOsszTabla th, .blOsszTabla td { text-align:left; vertical-align:top; padding:6px 4px; border-top:1px solid var(--sage); }
.blOsszTabla th small { display:block; font-weight:600; color:var(--ink-soft); }
.blOsszTabla td b { font-size:var(--fs-s); }
.blOsszTabla .blHarmad { display:flex; margin-top:2px; }
.blCimkek { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }
.blCimkek .ds-tag { font-size:var(--fs-xs); }
.blDij { background:var(--butter); }
.blKiado { background:var(--bg); }
.blMegnyit { margin:4px 0; }
.blQr { display:flex; gap:8px; align-items:center; margin:6px 0; }
.blQr small { color:var(--ink-soft); font-size:var(--fs-xs); }
.blMiert { margin-top:4px; }

/* Tudástár (lista) – a kártya-panel szélesebb változata */
#blLap.blTudastar { width:min(92vw, 460px); }
.blTudSzuro { display:flex; flex-wrap:wrap; gap:6px; }
.blTudSzuro .ds-chip { min-height:var(--tap); cursor:pointer; }
.blTudSzuro .blJel { width:20px; height:20px; font-size:10px; }
.blTudSor { display:grid; gap:6px; }
.blTudTema { display:flex; gap:8px; align-items:center; }
.blTudTema select { flex:1; min-height:var(--tap); }
.blTudDb { margin:0; color:var(--ink-soft); font-size:var(--fs-xs); }
.blTudElem span { display:grid; gap:2px; }
.blTudElem small { font-weight:600; color:var(--ink-soft); font-size:var(--fs-xs); }
.blTudTemak { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; }
.blTudTemak .pic { width:14px; height:14px; margin-right:2px; }
.blTudVissza { align-self:flex-start; }

/* országnevek és zászlók a gömbön (csak felirat – a koppintás a gömbé) */
#bl > #blCimkek { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.blCimke { position:absolute; left:0; top:0; display:flex; align-items:center; gap:4px; padding:2px 6px 2px 3px; border-radius:var(--r-s);
  background:var(--surface); box-shadow:var(--soft-sm); font:700 var(--fs-xs)/1.2 var(--body); color:var(--ink); white-space:nowrap; opacity:.92; }
.blZaszlo { display:inline-block; flex:none; background-image:url(../assets/bolygo/zaszlok.webp); border-radius:2px; outline:1px solid var(--sage); }

/* útlevél */
.blPecsetek { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.blPecset { display:flex; flex-direction:column; align-items:center; gap:4px; min-height:var(--tap); padding:8px 4px; border:2px dashed var(--sage); border-radius:var(--r-m);
  background:var(--bg); color:var(--ink-soft); font:600 var(--fs-xs)/1.2 var(--body); text-align:center; cursor:pointer; }
.blPecset.on { border-style:solid; border-color:var(--honey-deep); background:var(--butter); color:var(--ink); }
.blPecsetKep { width:44px; height:44px; display:grid; place-items:center; }
.blPecsetKep img.art { width:100%; }

/* kvíz */
#blKviz { position:absolute; top:112px; left:50%; translate:-50% 0; width:min(92vw, 440px); }
#blKviz.hidden { display:none; }
.blKvizKartya { display:grid; gap:6px; padding:12px 14px; }
.blKvizKartya.jo { background:var(--good-bg); }
.blKvizKartya p { margin:0; font-size:var(--fs-s); line-height:1.4; }
.blKvizKer { display:flex; gap:6px; align-items:center; font-weight:700; }

/* javaslat-űrlap */
.blUrlap { display:grid; gap:10px; }
.blUrlap label { display:grid; gap:4px; font:600 var(--fs-xs)/1.2 var(--body); }
.blHely, .blFigy { margin:0; display:flex; gap:6px; align-items:flex-start; font-size:var(--fs-xs); }
.blFigy { color:var(--ink-soft); }
.blUrlap .blKor { display:flex; gap:8px; align-items:center; min-height:var(--tap); font-size:var(--fs-s); }
.blUrlap .blKor input { width:22px; height:22px; accent-color:var(--honey-deep); }

@media (max-width:820px), (orientation:portrait){
  #blLap { top:auto; left:8px; right:8px; bottom:70px; width:auto; max-height:52vh; }
  #blKviz { top:auto; bottom:70px; }
  #blJm { bottom:70px; }
  #blLap:not(.hidden) ~ #blJm, #blKviz:not(.hidden) ~ #blJm { display:none; }
  #blNezet { top:auto; left:8px; right:8px; bottom:70px; width:auto; max-height:56vh; }
  #blLap:not(.hidden) ~ #blNezet, #blNezet:not(.hidden) ~ #blJm { display:none; }
  #blZoom { top:112px; translate:none; }
  #blNezet:not(.hidden) ~ #blZoom { display:none; }
}
@media (max-width:620px){
  .blGombNev { display:none; }
  #blTemak { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:4px; }
  #blTemak .ds-chip { flex:none; }
}
/* játékérzet (kit 1.10): az ítélet pecsétként lecsap – egyenesen, a saját szélességén (nem a teljes rácssoron) */
.blKvizItelet { justify-self:start; --stamp-rot:0deg; }
.blPecsetKep { --stamp-rot:0deg; }
/* egyszeri „lámpa-villanás” (billenőpont-jel, bolygóhatár-állapot) – a ds-anim- előtag miatt a „Kevesebb mozgás” is leállítja */
@keyframes blLampa { 0%, 100% { transform:scale(1); box-shadow:0 0 0 0 var(--glow-0); } 45% { transform:scale(1.18); box-shadow:0 0 0 6px var(--glow); } }
.ds-anim-bl-lampa { animation:blLampa var(--t-slow) var(--ease-out) both; }
@media (prefers-reduced-motion:reduce){ .ds-anim-bl-lampa { animation:none !important; } }
.reduce-motion .ds-anim-bl-lampa { animation:none !important; }