/* ============================================================
   beeco JÁTÉKMECHANIKÁK — a négy közös építőelem felülete (web/js/mech/*.js)
   Előtagok: .mk- döntéskártya · .mr- rács · .mv- pontok összekötése · .mc- kombinálás · .mp- ügyességi próba
   A design systemre épül (tokens.css, ds.css, ds-game.css, ds-motion.css) – itt CSAK tokenek állnak.
   Leírás: docs/mechanikak.md · Bemutató: /mechanikak.html
   ============================================================ */

/* ---- 1. Döntéskártya ------------------------------------------------------------------------ */
.mk{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.mk-stage{ position:relative; width:min(360px, 100%); min-height:260px; display:grid; place-items:center; }
.mk-card{ position:relative; width:100%; min-height:240px; display:flex; align-items:center; justify-content:center; text-align:center;
  touch-action:pan-y; user-select:none; cursor:grab; transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.mk-card.is-dragging{ transition:none; cursor:grabbing; }
.mk-card.is-leaving{ transition:transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); pointer-events:none; }
.mk-card:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.mk-body{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); font-size:var(--fs-m); line-height:1.45; }
.mk-stamp{ position:absolute; top:var(--sp-4); padding:4px 12px 1px; border:var(--line-w) solid currentColor; border-radius:var(--r-s);
  font:400 var(--fs-xl)/1.1 var(--display); text-transform:uppercase; opacity:0; pointer-events:none; background:var(--surface); }
.mk-stamp.is-left{ right:var(--sp-4); color:var(--bad-ink); --stamp-rot:8deg; transform:rotate(8deg); }
.mk-stamp.is-right{ left:var(--sp-4); color:var(--good-ink); --stamp-rot:-8deg; transform:rotate(-8deg); }
.mk-buttons{ display:flex; gap:var(--sp-3); justify-content:center; }
.mk-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); min-width:120px; justify-content:center; font-size:var(--fs-m); }
.mk-btn .pic{ width:20px; height:20px; }
.mk-empty{ display:flex; align-items:center; gap:var(--sp-2); }

/* ---- 2. Rács -------------------------------------------------------------------------------- */
.mr{ display:flex; flex-direction:column; gap:var(--sp-3); }
.mr-meters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--sp-2) var(--sp-4); }
.mr-meter{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px var(--sp-2); }
.mr-meter .ds-meter{ grid-column:1 / -1; }
.mr-mlabel{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:var(--fs-s); }
.mr-mnum{ font-size:var(--fs-l); line-height:1; }
.mr-view{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.mr-view .ds-seg{ flex:0 1 auto; flex-wrap:wrap; max-width:100%; }
.mr-grid{ display:flex; flex-direction:column; gap:4px; width:min(100%, 520px); align-self:center; }
.mr-row{ display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:4px; }
.mr-cell{ position:relative; aspect-ratio:1; min-width:var(--tap); padding:0; cursor:pointer; display:grid; place-items:center;
  border:2.5px solid var(--sage); border-radius:var(--r-s); color:var(--ink); background:var(--surface); --heat:0;
  transition:background var(--t-base) var(--ease); }
.mr-cell.is-filled{ border-color:var(--line); }
/* hőtérkép: az adatskála fokozatai (docs/adatskala.md) – a szín mellett mindig ott a +/− jelvény is */
.mr-cell.is-s1{ background:var(--data-seq-1); } .mr-cell.is-s2{ background:var(--data-seq-2); } .mr-cell.is-s3{ background:var(--data-seq-3); }
.mr-cell.is-s4{ background:var(--data-seq-4); } .mr-cell.is-s5{ background:var(--data-seq-5); }
.mr-cell.is-n1{ background:var(--data-neg-1); } .mr-cell.is-n2{ background:var(--data-neg-2); }
@media (hover:hover) and (pointer:fine){ .mr-cell:hover { border-color:var(--line); } }
.mr-cell:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.mr-tile{ font-size:clamp(22px, 6vw, 38px); line-height:1; display:grid; place-items:center; }
.mr-tile img.art{ width:1.2em; height:1.2em; vertical-align:0; }
.mr-badge{ position:absolute; right:2px; bottom:2px; font:700 var(--fs-xs)/1 var(--body); padding:3px 5px 2px; border-radius:var(--r-pill);
  background:var(--surface); border:2px solid var(--line); font-variant-numeric:tabular-nums; }
.mr-badge:empty{ display:none; }
.mr-cell.is-minus .mr-badge{ background:var(--bad-bg); color:var(--bad-ink); }
.mr-cell.is-plus .mr-badge{ background:var(--good-bg); color:var(--good-ink); }
.mr-tray{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); flex-wrap:wrap; }
.mr-tiles{ display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; }
.mr-pick{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; min-height:var(--tap); padding:6px 8px 4px; cursor:pointer;
  background:var(--surface); color:var(--ink); border:var(--line-w) solid var(--line); border-radius:var(--r-m); box-shadow:var(--soft-sm);
  font:700 var(--fs-xs)/1.1 var(--body); }
.mr-pick img.art{ width:30px; height:30px; vertical-align:0; }
.mr-pick .pic{ width:26px; height:30px; }
.mr-pick[aria-checked="true"]{ background:var(--accent); color:var(--on-accent); transform:translateY(-3px); }
.mr-pick:focus-visible, .mr-undo:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.mr-undo{ display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); }

/* ---- 3. Pontok összekötése ------------------------------------------------------------------ */
.mv{ display:flex; flex-direction:column; gap:var(--sp-2); max-width:820px; margin-inline:auto; }
.mv-stats{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.mv-map{ position:relative; width:100%; aspect-ratio:var(--ar); background:var(--sage-bg); border:var(--line-w) solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--soft); overflow:hidden; touch-action:none; user-select:none; }
.mv-lines{ position:absolute; inset:0; width:100%; height:100%; }
.mv-range{ fill:var(--glow); fill-opacity:.5; stroke:var(--honey-deep); stroke-width:2; stroke-dasharray:6 6; vector-effect:non-scaling-stroke; pointer-events:none; }
.mv-link{ stroke:var(--leaf); stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:none; }
.mv-hit{ stroke:transparent; stroke-width:26; stroke-linecap:round; vector-effect:non-scaling-stroke; cursor:pointer; }
.mv-edge.is-bridge .mv-link{ stroke:var(--berry); stroke-dasharray:10 7; }
.mv-edge:focus-visible .mv-link { stroke-width:9; }
@media (hover:hover) and (pointer:fine){ .mv-edge:hover .mv-link { stroke-width:9; } }
.mv-edge:focus{ outline:none; }
.mv-edge:focus-visible .mv-hit{ stroke:var(--focus); stroke-opacity:.35; }
.mv-edge.is-new:not(.is-bridge) .mv-link{ stroke-dasharray:200; animation:mvDraw var(--t-slow) var(--ease) both; }
@keyframes mvDraw{ from{ stroke-dashoffset:200; } to{ stroke-dashoffset:0; } }
.mv-temp{ stroke:var(--ink); stroke-width:4; stroke-dasharray:4 8; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0; pointer-events:none; }
.mv-temp.is-on{ opacity:.8; }
.mv-node{ position:absolute; width:52px; height:56px; margin:-28px 0 0 -26px; padding:0; cursor:grab; touch-action:none;
  display:grid; place-items:center; border:none; background:none; color:var(--ink); }
.mv-node::before{ content:""; position:absolute; inset:2px 3px; clip-path:var(--hex); background:var(--line); }
.mv-node::after{ content:""; position:absolute; inset:5px 6px; clip-path:var(--hex); background:var(--butter); transition:background var(--t-fast); }
.mv-ico{ position:relative; z-index:1; font-size:24px; line-height:1; }
.mv-ico img.art{ width:30px; height:30px; vertical-align:0; }
.mv-flag{ position:absolute; z-index:2; right:-4px; top:-2px; width:22px; height:22px; border-radius:50%; display:none; place-items:center;
  background:var(--bad-bg); color:var(--bad-ink); border:2px solid var(--line); }
.mv-flag .pic{ width:14px; height:14px; }
.mv-node.is-critical .mv-flag{ display:grid; }
.mv-node.is-critical::after{ background:var(--blossom); }
.mv-node.is-isolated{ opacity:.7; }
.mv-node.is-isolated::after{ background:var(--surface); }
.mv-node.is-reach::after{ background:var(--accent); }
.mv-node.is-selected::after, .mv-node.is-target::after{ background:var(--accent); }
.mv-node.is-selected, .mv-node.is-target{ transform:scale(1.15); z-index:1; }
.mv-node:focus-visible{ outline:3px solid var(--focus); outline-offset:0; border-radius:var(--r-s); }
.mv-node.is-gone{ pointer-events:none; }
.mv-msg{ min-height:1.5em; margin:0; }

/* ---- 4. Kombinálás -------------------------------------------------------------------------- */
.mc{ display:flex; flex-direction:column; gap:var(--sp-3); }
.mc-top{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.mc-top .mc-tick{ margin-left:auto; }
.mc-board{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:var(--sp-2); }
.mc-slot{ min-height:112px; border-radius:var(--r-m); display:flex; }
.mc-slot.is-empty{ border:2.5px dashed var(--sage); background:var(--surface); }
.mc-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:var(--sp-2) 4px;
  cursor:grab; touch-action:none; user-select:none; font:700 var(--fs-xs)/1.15 var(--body); color:var(--ink); text-align:center;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast); }
.mc-item:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.mc-item.is-selected, .mc-item.is-over{ background:var(--accent); color:var(--on-accent); transform:translateY(-3px); }
.mc-item.is-lifted{ opacity:.35; }
.mc-item.is-late{ background:var(--bad-bg); }
.mc-item.is-process{ background:var(--sky-bg); cursor:default; }
.mc-ico{ font-size:34px; line-height:1; }
.mc-ico img.art{ width:40px; height:40px; vertical-align:0; }
.mc-ico.is-waiting{ opacity:.55; }
.mc-name{ max-width:100%; overflow-wrap:anywhere; }
.mc-timer .pic{ width:14px; height:14px; }
.mc-fresh{ display:flex; gap:3px; }
.mc-fresh i{ width:8px; height:8px; border-radius:50%; border:2px solid var(--line); background:var(--surface); }
.mc-fresh i.on{ background:var(--good); }
.mc-ghost{ position:fixed; z-index:var(--z-scene); width:92px; height:112px; margin:-56px 0 0 -46px; pointer-events:none;
  transform:rotate(-4deg) scale(1.05); box-shadow:var(--soft); opacity:.95; }
.mc-supply{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.mc-add{ min-width:var(--tap); min-height:var(--tap); font-size:var(--fs-l); display:grid; place-items:center; padding:4px 10px; }
.mc-add img.art{ width:28px; height:28px; vertical-align:0; }
.mc-msg{ min-height:1.5em; margin:0; }
.mc-recipes{ list-style:none; margin:0 0 12px !important; padding:0; display:flex; flex-direction:column; gap:6px; }
.mc-recipes li{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs-s); }
.mc-recipes li.is-hidden{ color:var(--ink-soft); letter-spacing:1px; }
.mc-recipes img.art{ width:26px; height:26px; }

/* ---- Keskeny kijelző (telefon) ---------------------------------------------------------------- */
@media (max-width:560px){
  .mr-badge{ font-size:10px; padding:2px 4px 1px; right:1px; bottom:1px; border-width:1.5px; }
  .mr-tile{ font-size:22px; }
  .mv-map{ aspect-ratio:var(--ar-tall, var(--ar)); }   /* magasabb térkép: a pontok nem zsúfolódnak (a vonalak és a hatótáv-kör vele nyúlnak) */
  .mv-node{ width:46px; height:50px; margin:-25px 0 0 -23px; }
}

/* ---- „Kevesebb mozgás” ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mk-card, .mk-card.is-leaving, .mr-cell, .mc-item, .mv-node::after{ transition:none; }
  .mv-edge.is-new .mv-link{ animation:none; stroke-dasharray:none; }
}
.reduce-motion .mk-card, .reduce-motion .mk-card.is-leaving, .reduce-motion .mr-cell, .reduce-motion .mc-item{ transition:none; }
.reduce-motion .mv-edge.is-new .mv-link{ animation:none; stroke-dasharray:none; }

/* ---- 5. ügyességi próba (.mp-): sáv célzónával, mozgó jelző, „Most!” gomb – js/mech/proba-*.js ---- */
.mp{ display:grid; gap:var(--sp-3); }
.mp-sav{ position:relative; height:36px; border:var(--line-w) solid var(--line); border-radius:var(--r-pill); background:var(--bg); overflow:hidden; }
.mp-zona{ position:absolute; top:0; bottom:0; left:var(--tol); width:var(--szel); background:var(--good-bg); border-inline:2px solid var(--good); }
.mp-jel{ position:absolute; top:3px; bottom:3px; left:0; width:6px; border-radius:3px; background:var(--ink); }
.mp-sav.is-ok{ box-shadow:0 0 0 4px var(--good); }
.mp-sav.is-fail{ box-shadow:0 0 0 4px var(--blossom); }
.mp-gomb .pic{ width:22px; height:22px; }