/* ============================================================
   ÖKOS-REJTÉLY — készülék-kártya, kódzár, tippek (a rezsi-cards.js felülete) · csak tokenekkel
   ============================================================ */
/* készülék-kártya */
.rzOpts { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; margin-top:12px; }
.rzOpt { font-family:inherit; text-align:left; cursor:pointer; color:var(--ink); background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-l);
  padding:10px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--soft-sm); }
.rzOpt b { font-size:15px; line-height:1.25; }
.rzOpt.oko { background:var(--good-bg); } .rzOpt.hagyomanyos { background:var(--butter); }
.rzOpt.sel { outline:4px solid var(--accent); outline-offset:2px; box-shadow:var(--press); }
.rzOpt.lock { opacity:.65; }
.rzKind { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.rzOptNum { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .rzOptFt { font-size:12px; }
.rzInfoBtn { font:700 13px/1.3 var(--body); background:none; border:none; color:var(--focus); cursor:pointer; margin-top:10px; padding:4px 0; text-align:left; }
.rzInfo { background:var(--surface); border:2.5px solid var(--sage); border-radius:var(--r-m); padding:6px 12px 10px; font-size:13px; }
.rzInfo ul { margin:6px 0 0 18px; font-size:13px; line-height:1.45; }
.rzSrcT { display:block; margin-top:8px; font-size:13px; }
.rzSrc { font-size:12px !important; } .rzSrc a { color:var(--focus); word-break:break-word; }

/* kódzár */
.rzCode { margin:12px auto 0; width:min(220px, 80%); text-align:center; font-family:"Courier New", monospace; font-size:32px; font-weight:700; letter-spacing:6px;
  background:var(--rz-lcd-bg); color:var(--rz-lcd); border:var(--line-w) solid var(--line); border-radius:var(--r-s); padding:4px; }
.rzCode.shake { animation:dsShake var(--t-slow) var(--ease); }
.rzKeys { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:min(240px, 86%); margin:10px auto 0; }
.rzKeys button { font:400 24px/1 var(--display); height:52px; padding-top:4px; border:var(--line-w) solid var(--line); border-radius:var(--r-m); background:var(--surface);
  box-shadow:var(--press); cursor:pointer; color:var(--ink); }
.rzKeys button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.rzKeys button[data-k="ok"] { background:var(--accent); color:var(--on-accent); }
.rz-lock .rzCodeMsg { text-align:center; min-height:1.4em; }

.rzHint { background:var(--surface); border:2.5px solid var(--sage); border-radius:var(--r-m); padding:8px 10px; margin-top:8px; font-size:14px; line-height:1.4; }
.rzHint b { display:block; font-size:12px; color:var(--ink-soft); }

/* forgó mérőóra-tárcsa a készülék-kártyán (rzSpinHTML): a választott beállítás fogyasztásával arányosan pörög */
.rzDescRow { display:flex; align-items:center; gap:12px; } .rzDescRow .rzDesc { flex:1 1 auto; }
.rzSpin { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; font-size:10px; font-weight:700; color:var(--ink-soft); }
.rzSpin svg { width:48px; height:48px; animation:dsSpin var(--spin) linear infinite; }
.rzSpin circle { fill:var(--surface); stroke:var(--line); stroke-width:3; } .rzSpin path { stroke:var(--line); stroke-width:3; stroke-linecap:round; }
.rzSpin circle.dot { fill:var(--bad-ink); stroke:none; }
.rzSpin.stop svg { animation:none; }
.reduce-motion .rzSpin svg { animation:none; }
@media (prefers-reduced-motion: reduce){ .rzSpin svg { animation:none; } }