/* ============================================================
   ÖKOS-REJTÉLY — játékosítás: jelvények, rang, album, megosztás, szereplők, táska, rábeszélés, mini-játékok
   A design systemre építve (jelvény = hatszög, kártyák, buborékok, gombok); csak tokenekkel.
   ============================================================ */

/* ---- felugró jelvény ---- */
#rzBadgePop { position:fixed; top:max(16px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:var(--z-top); display:flex; gap:12px; align-items:center;
  width:min(400px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--soft); padding:10px 14px; cursor:pointer; animation:rzBadgeIn .45s var(--bounce); }
#rzBadgePop small { display:block; font-size:12px; font-weight:700; color:var(--ink-soft); } #rzBadgePop b { display:block; font:400 var(--fs-l)/1.1 var(--display); }
#rzBadgePop p { margin:2px 0 0; font-size:13px; line-height:1.35; }
@keyframes rzBadgeIn { from { transform:translate(-50%, -40px) scale(.7); opacity:0; } to { transform:translate(-50%, 0) scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ #rzBadgePop { animation:none; } }
.reduce-motion #rzBadgePop { animation:none; }

/* ---- jelvény-érem: hatszög (design system), méz = jelvény, égkék = rang ---- */
.rzMedal { flex:0 0 auto; width:54px; aspect-ratio:1/1.1; clip-path:var(--hex); display:inline-flex; align-items:center; justify-content:center; font-size:28px;
  background:radial-gradient(circle at 40% 30%, var(--butter), var(--honey) 62%, var(--honey-deep)); }
.rzMedal .pic { width:48%; height:48%; } .rzMedal img.art { width:74%; height:auto; }
.rzMedal.rank { background:radial-gradient(circle at 40% 30%, var(--sky-bg), var(--sky) 70%); }
.rzMedal.off { background:var(--sage-bg); filter:grayscale(1); opacity:.55; }

/* ---- rang-sáv a nyomozófalon / albumban ---- */
.rzBadgeStrip { background:var(--surface); border:2.5px solid var(--line); border-radius:var(--r-m); padding:8px 10px; margin-top:12px; }
.rzRankBtn { font-family:inherit; display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--ink); padding:0; font-size:15px; }
.rzRankBtn small { display:block; font-size:12px; color:var(--ink-soft); }
.rzMedals { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.rzMedals .rzMedal { width:34px; font-size:17px; }

/* ---- jelvények panel ---- */
.rzBadgeGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; margin-top:12px; }
.rzBadgeCard { display:flex; gap:10px; align-items:center; background:var(--surface); border:2.5px solid var(--line); border-radius:var(--r-m); padding:8px 10px; }
.rzBadgeCard b { display:block; font-size:14px; } .rzBadgeCard small { display:block; font-size:12px; line-height:1.35; color:var(--ink-soft); }
.rzBadgeCard.off { background:var(--sage-bg); border-style:dashed; } .rzBadgeCard.off b { opacity:.65; }

/* ---- album ---- */
.rzAlbumSec { background:var(--surface); border:2.5px solid var(--line); border-radius:var(--r-m); padding:6px 12px 10px; margin-top:10px; }
.rzAlbumSec h3 { margin:6px 0 4px !important; }
.rzAlbumRow { margin-top:6px; } .rzAlbumRow > span { display:block; font-size:13px; font-weight:700; }
.rzAlbumRow .rzNotes { margin-top:4px; }
.rzBees { font-size:18px; letter-spacing:2px; }
.rzBees .pic { width:22px; height:22px; }
.rzBees .pic.off { opacity:.3; filter:grayscale(1); }
.rzAlbumSec .rzBadgeStrip { margin-top:4px; border:none; padding:0; background:none; }

/* ---- megosztás ---- */
#rzShare { position:fixed; inset:0; z-index:calc(var(--z-top) - 1); background:rgba(31,38,21,.7); display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; }
.rzShareBox { width:min(520px, 100%); background:var(--bg); border:var(--line-w) solid var(--line); border-radius:var(--r-xl); box-shadow:var(--soft); padding:14px; }
.rzShareBox img { display:block; width:100%; border-radius:var(--r-m); border:var(--line-w) solid var(--line); }
.rzShareBox p { font-size:14px; line-height:1.45; margin:10px 0 0; }
.rzHomeShare { display:block; margin:8px auto 0; }
.rzHomeRank b { color:var(--ink) !important; }
.rzBig #rzBadgePop p, .rzBig .rzBadgeCard small { font-size:15px; } .rzBig .rzBadgeCard b { font-size:16px; }

/* ---- rajzolt szereplők ---- */
.rzAva .rzChar { width:112%; height:112%; margin-top:14%; display:block; }
.rzAva img.rzChar { width:100%; height:100%; margin:0; object-fit:contain; }

/* ---- táska ---- */
.rzBag { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:12px; }
.rzBagItem { font-family:inherit; text-align:left; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-m); padding:8px 10px; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--soft-sm); }
.rzBagItem span { font-size:30px; } .rzBagItem b { font-size:14px; } .rzBagItem small { font-size:12px; color:var(--ink-soft); line-height:1.3; }
.rzBagItem.sel { outline:4px solid var(--accent); outline-offset:2px; background:var(--butter); }
.rzBagItem.done { background:var(--good-bg); cursor:default; box-shadow:none; }

/* ---- rábeszélés ---- */
.rzTalk { display:flex; gap:12px; align-items:flex-end; padding-right:40px; }
.rzTalkWho { flex:0 0 auto; width:96px; height:96px; border-radius:50%; border:var(--line-w) solid var(--line); overflow:hidden; }
.rzTalkWho .rzChar { width:112%; height:112%; margin:14% 0 0 -6%; display:block; }
.rzTalkBubble { position:relative; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l) var(--r-l) var(--r-l) 6px; padding:8px 12px; flex:1; box-shadow:var(--soft-sm); }
.rzTalkBubble b { font-size:13px; } .rzTalkBubble p { margin:2px 0 0; font-size:16px !important; font-weight:600; }
.rzTalkReplies { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.rzTalkReply { font-family:inherit; text-align:left; font-size:14px; line-height:1.4; background:var(--butter); border:var(--line-w) solid var(--line); border-radius:var(--r-l) var(--r-l) 6px var(--r-l);
  padding:9px 12px; cursor:pointer; color:var(--ink); box-shadow:var(--soft-sm); min-height:var(--tap); }
.rzTalkReply:active { transform:translateY(2px); box-shadow:none; }

/* ---- mini-játékok ---- */
.rzMiniBtn { margin-right:auto; }
.rzMiniRow { justify-content:flex-start; }
.rzMiniLock { display:block; margin-right:auto; align-self:center; }
.rzMiniDots { display:flex; gap:5px; justify-content:center; margin:10px 0 4px; }
.rzMiniDots i { width:12px; height:12px; border-radius:50%; border:2px solid var(--line); background:var(--surface); }
.rzMiniDots i.on { background:var(--good); } .rzMiniDots i.cur { background:var(--accent); width:24px; border-radius:var(--r-pill); }
.rzMiniItem { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px auto; background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l); padding:10px 16px; width:max-content; max-width:100%; }
.rzMiniItem b { font:400 var(--fs-xl)/1.1 var(--display); } .rzMiniItem img { width:72px; height:72px; object-fit:contain; }
.rzMiniDot { width:34px; height:34px; border-radius:50%; border:var(--line-w) solid var(--line); }
.rzMiniZones { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin-top:10px; }
.rzMiniZone { position:relative; font:700 14px/1.25 var(--body); color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-m); padding:10px 8px; cursor:pointer; text-align:left; box-shadow:var(--soft-sm); min-height:var(--tap); }
/* a zóna / kuka valódi színe egy színmintában (a vastag színes oldalcsík helyett) – csak ahol van szín */
.rzMiniZone[style*="--zc"] { padding-left:36px; }
.rzMiniZone[style*="--zc"]::before { content:""; position:absolute; left:10px; top:50%; width:16px; height:16px; margin-top:-8px;
  border-radius:50%; background:var(--zc); border:2px solid var(--line); }
.rzMiniZone.sel { outline:4px solid var(--accent); outline-offset:2px; } .rzMiniZone.done { background:var(--good-bg); opacity:.75; cursor:default; }
.rzMiniFb { border:2.5px solid var(--line); border-radius:var(--r-m); padding:8px 12px; margin-top:10px; background:var(--surface); }
.rzMiniFb.ok { background:var(--good-bg); color:var(--good-ink); } .rzMiniFb.no { background:var(--bad-bg); color:var(--bad-ink); }
.rzMiniFb b { font-size:14px; } .rzMiniFb p { margin:4px 0 0; font-size:13px !important; } .rzMiniFb small { display:block; font-size:11px; opacity:.8; margin-top:4px; }
.rzMiniCard { display:flex; flex-direction:column; align-items:center; gap:4px; margin:10px auto; width:min(300px, 100%); background:var(--surface); border:var(--line-w) solid var(--line);
  border-radius:var(--r-xl); padding:14px; box-shadow:var(--soft); text-align:center; }
.rzMiniCard span { font-size:46px; } .rzMiniCard small { font-size:13px; color:var(--ink-soft); } .rzMiniCard b { font:400 var(--fs-xl)/1.1 var(--display); }
.rzMiniSwipe { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.rzMatch { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; } .rzMatch > div { display:flex; flex-direction:column; gap:8px; }
.rzMiniRes { display:flex; flex-direction:column; align-items:center; gap:2px; margin:12px 0; }
.rzMiniRes span { font-size:52px; } .rzMiniRes .ds-stars { --size:40px; } .rzMiniRes b { font:400 var(--fs-2xl)/1.1 var(--display); } .rzMiniRes small { font-size:13px; color:var(--ink-soft); }
/* reakció-játék: sötét lámpa-rács, a felgyulladó lámpa mézszínű */
.rzReactTop { display:flex; justify-content:space-between; font-size:18px; margin-top:8px; }
.rzReactGrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
.rzReact { font-family:inherit; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--night-surface); color:var(--sage);
  border:var(--line-w) solid var(--line); border-radius:var(--r-m); cursor:pointer; padding:4px; transition:background var(--t-fast), transform var(--t-fast); }
.rzReact span { font-size:30px; filter:grayscale(1) brightness(.6); } .rzReact small { font-size:10.5px; line-height:1.2; text-align:center; }
.rzReact.lit { background:var(--accent); color:var(--on-accent); transform:scale(1.05); box-shadow:var(--soft-sm); } .rzReact.lit span { filter:none; }
.rzReactWhy { min-height:2.8em; }
@media (max-width:600px){ .rzReactGrid { grid-template-columns:repeat(4, 1fr); gap:5px; } .rzReact span { font-size:24px; } .rzReact small { font-size:9px; } .rzMatch { gap:6px; } .rzTalkWho { width:72px; height:72px; } }