/* minigames.css, El Juego del Dinero
   Retos y mini-juegos. Capa autónoma sobre el juego principal.
   Paleta heredada: --cyan #22D3EE · --gold #D4AF37 · --green #50C878 */

#mg-root{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;
  background:radial-gradient(120% 120% at 50% 0%,#0a1c2e 0%,#02060f 70%);
  color:#e2e8f0;font-family:inherit;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mg-root.mg-open{display:flex}
.mg-wrap{width:100%;max-width:1040px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 64px;flex:1}

/* ── Top bar ───────────────────────────────────── */
.mg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 18px}
.mg-top .mg-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em}
.mg-top .mg-brand span{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold,#D4AF37),#b8902a);color:#1a1206;font-weight:900;font-size:1.05rem}
.mg-btn{padding:9px 16px;border-radius:9px;font-weight:700;cursor:pointer;font-family:inherit;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#cbd5e1;
  transition:.15s;font-size:.9rem;touch-action:manipulation}
.mg-btn:hover{border-color:var(--cyan,#22D3EE);color:#fff}
.mg-btn.mg-primary{background:linear-gradient(135deg,var(--cyan,#22D3EE),#0ea5c9);color:#02060f;border:none}
.mg-btn.mg-primary:hover{transform:translateY(-1px)}
.mg-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Hub intro ─────────────────────────────────── */
.mg-intro{text-align:center;margin:6px 0 22px}
.mg-kicker{color:var(--cyan,#22D3EE);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:800;margin:0 0 6px}
.mg-h1{margin:0 0 8px;font-size:clamp(1.8rem,4.5vw,2.7rem);font-weight:900;letter-spacing:-.02em}
.mg-sub{margin:0 auto;max-width:56ch;color:rgba(226,232,240,.66);font-size:.98rem;line-height:1.5}

/* ── Setup row: difficulty + avatar ────────────── */
.mg-setup{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
@media(max-width:680px){.mg-setup{grid-template-columns:1fr}}
.mg-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 18px}
.mg-panel-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(226,232,240,.6);margin:0 0 12px}
.mg-diff{display:flex;gap:8px}
.mg-diff button{flex:1;padding:12px 6px;border-radius:11px;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:rgba(226,232,240,.7);cursor:pointer;font-family:inherit;
  font-weight:800;font-size:.92rem;transition:.15s;display:flex;flex-direction:column;gap:3px;align-items:center;touch-action:manipulation}
.mg-diff button small{font-weight:600;font-size:.68rem;opacity:.7}
.mg-diff button[aria-pressed="true"]{border-color:var(--cyan,#22D3EE);background:rgba(34,211,238,.14);color:#fff}
.mg-diff button .mg-stars{letter-spacing:1px}

/* ── Avatar grid ───────────────────────────────── */
.mg-avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
@media(max-width:680px){.mg-avatars{grid-template-columns:repeat(8,1fr)}}
@media(max-width:420px){.mg-avatars{grid-template-columns:repeat(6,1fr)}}
.mg-av{aspect-ratio:1;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);cursor:pointer;font-size:0;display:grid;place-items:center;
  transition:.13s;touch-action:manipulation;line-height:1;overflow:hidden;padding:3px}
.mg-av:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.5)}
.mg-av[aria-pressed="true"]{border-color:var(--gold,#D4AF37);background:rgba(212,175,55,.18);box-shadow:0 0 0 2px rgba(212,175,55,.25) inset}
.mg-av svg{width:100%;height:100%;display:block;border-radius:9px}
.mg-av .mg-cw{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mg-av .mg-cw .avatar3d{animation:none!important;width:86px;height:104px;transform:scale(.46);transform-origin:center;filter:none}
.mg-av-sub{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(226,232,240,.45);margin:11px 0 7px}
.mg-av-sub:first-of-type{margin-top:2px}
/* avatar in small contexts (HUD, versus) */
.av{display:inline-grid;place-items:center;vertical-align:middle;line-height:1}
.av svg{width:1.7em;height:1.7em;display:block}
.av .mg-cw{width:1.9em;height:1.9em;display:flex;align-items:center;justify-content:center;overflow:hidden}
.av .mg-cw .avatar3d{animation:none!important;width:86px;height:104px;transform:scale(.3);transform-origin:center;filter:none}
.mg-vs-player .av .mg-cw{width:2.4em;height:2.4em}
.mg-vs-player .av .mg-cw .avatar3d{transform:scale(.42)}

/* ── Games grid ────────────────────────────────── */
.mg-section-h{display:flex;align-items:center;gap:10px;margin:8px 2px 13px}
.mg-section-h b{font-size:1.05rem;font-weight:900;letter-spacing:-.01em}
.mg-section-h .mg-line{flex:1;height:1px;background:rgba(255,255,255,.08)}
.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:13px;margin-bottom:30px}
.mg-card{position:relative;text-align:left;padding:18px 17px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#e2e8f0;
  display:flex;flex-direction:column;gap:7px;transition:.16s;font-family:inherit;min-height:148px;touch-action:manipulation}
.mg-card:hover{transform:translateY(-4px);border-color:var(--accent,#22D3EE);box-shadow:0 16px 38px rgba(0,0,0,.34)}
.mg-card .mg-emoji{font-size:2rem;line-height:1}
.mg-card b{font-size:1.04rem;font-weight:800;letter-spacing:-.01em}
.mg-card small{font-size:.83rem;color:rgba(226,232,240,.6);line-height:1.45;flex:1}
.mg-card .mg-badge{position:absolute;top:13px;right:13px;font-size:.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:rgba(34,211,238,.16);color:var(--cyan,#22D3EE)}
.mg-card.mg-special{background:linear-gradient(160deg,rgba(255,191,0,.1),rgba(255,255,255,.03))}
.mg-card.mg-special:hover{border-color:var(--gold,#D4AF37)}
.mg-card.mg-special .mg-badge{background:rgba(255,191,0,.18);color:var(--gold,#D4AF37)}

/* ── Stage (a game is playing) ─────────────────── */
.mg-stage{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:20px;
  padding:24px 22px 26px;min-height:60vh}
.mg-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.mg-stage-head .mg-game-title{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;margin:0}
.mg-stage-head .mg-game-sub{color:rgba(226,232,240,.62);font-size:.9rem;margin:3px 0 0;max-width:52ch;line-height:1.45}
.mg-hud{display:flex;gap:10px;align-items:center;flex-shrink:0}
.mg-chip{display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:7px 14px;min-width:64px}
.mg-chip b{font-size:1.2rem;font-weight:900;line-height:1}
.mg-chip small{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:rgba(226,232,240,.55);margin-top:2px}
.mg-chip.mg-timer b{color:var(--gold,#D4AF37)}
.mg-chip.mg-danger b{color:#fca5a5}
.mg-avatar-tag{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem}
.mg-avatar-tag .av{font-size:1.5rem}

/* ── Drag/tap items shared ─────────────────────── */
.mg-prompt{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.2);border-radius:13px;
  padding:13px 16px;margin:16px 0 18px;font-size:1rem;font-weight:600;line-height:1.5}
.mg-prompt b{color:var(--cyan,#22D3EE)}
.mg-token{user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.mg-token.mg-dragging{cursor:grabbing;opacity:.5}
.mg-floating{position:fixed;z-index:9500;pointer-events:none;transform:translate(-50%,-50%) scale(1.1);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* Coins game */
.mg-coins-area{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:10px 0 22px;min-height:90px}
.mg-coin{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-weight:900;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold,#D4AF37) 70%);color:#5a4408;
  border:2px solid #b8902a;box-shadow:0 4px 10px rgba(0,0,0,.3);font-size:1rem}
.mg-piggy{margin:0 auto;width:min(340px,90%);min-height:150px;border-radius:20px;border:2.5px dashed rgba(80,200,120,.4);
  background:rgba(80,200,120,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.15s}
.mg-piggy.mg-over{border-color:var(--green,#50C878);background:rgba(80,200,120,.16)}
.mg-piggy .mg-piggy-emoji{font-size:3rem}
.mg-piggy .mg-piggy-sum{font-size:1.5rem;font-weight:900}

/* Balance game */
.mg-balance{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:560px){.mg-balance{grid-template-columns:1fr 1fr}}
.mg-drop{min-height:130px;border-radius:16px;border:2.5px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);padding:12px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.mg-drop.mg-over{border-color:var(--cyan,#22D3EE);background:rgba(34,211,238,.1)}
.mg-drop .mg-drop-h{text-align:center;font-weight:800;font-size:.92rem;padding:4px;border-radius:8px}
.mg-drop.need .mg-drop-h{color:#86efac}
.mg-drop.want .mg-drop-h{color:#f9a8d4}
.mg-drop-items{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.mg-pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:18px 0 6px;min-height:74px}
.mg-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 12px;border-radius:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);min-width:74px}
.mg-item .mg-item-emoji{font-size:1.7rem;line-height:1}
.mg-item .mg-item-label{font-size:.72rem;font-weight:600;color:rgba(226,232,240,.8);text-align:center}

/* Budget sliders */
.mg-budget{display:flex;flex-direction:column;gap:15px;margin-top:16px}
.mg-cat{display:grid;grid-template-columns:130px 1fr 76px;gap:12px;align-items:center}
@media(max-width:520px){.mg-cat{grid-template-columns:96px 1fr 64px}}
.mg-cat .mg-cat-name{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px}
.mg-cat input[type=range]{width:100%;accent-color:var(--cyan,#22D3EE);height:26px}
/* Slider táctil propio, no roba el scroll en tablet/móvil */
.mg-slider{display:flex;align-items:center;gap:8px;touch-action:none}
.mg-sl-btn{flex-shrink:0;width:38px;height:38px;border-radius:10px;border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#e2e8f0;font-size:1.3rem;font-weight:800;line-height:1;
  cursor:pointer;display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mg-sl-btn:hover{border-color:var(--cyan,#22D3EE);color:#fff}
.mg-sl-btn:active{background:rgba(34,211,238,.2)}
.mg-sl-track{position:relative;flex:1;height:40px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  touch-action:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
.mg-sl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:12px 0 0 12px;
  background:linear-gradient(90deg,rgba(34,211,238,.35),rgba(34,211,238,.6));pointer-events:none}
.mg-sl-thumb{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--cyan,#22D3EE);border:3px solid #02060f;
  box-shadow:0 2px 8px rgba(0,0,0,.45);pointer-events:none}
.mg-slider:focus{outline:none}
.mg-slider:focus .mg-sl-track{border-color:var(--cyan,#22D3EE);box-shadow:0 0 0 2px rgba(34,211,238,.3)}
.mg-cat .mg-cat-val{text-align:right;font-weight:900;font-variant-numeric:tabular-nums}
.mg-budget-bar{height:26px;border-radius:8px;overflow:hidden;display:flex;background:rgba(0,0,0,.3);margin-top:6px}
.mg-budget-bar span{height:100%;transition:width .2s}
.mg-budget-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-weight:700}
.mg-budget-foot .mg-left{font-size:.9rem}

/* Shop game */
.mg-shop{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px}
.mg-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.mg-product{padding:12px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  cursor:pointer;text-align:center;transition:.13s;font-family:inherit;color:#e2e8f0;touch-action:manipulation}
.mg-product:hover{border-color:var(--cyan,#22D3EE);transform:translateY(-2px)}
.mg-product[aria-pressed="true"]{border-color:var(--green,#50C878);background:rgba(80,200,120,.16)}
.mg-product .pe{font-size:1.7rem;line-height:1}
.mg-product .pn{font-size:.76rem;font-weight:600;margin-top:4px;color:rgba(226,232,240,.82)}
.mg-product .pp{font-size:.92rem;font-weight:900;color:var(--gold,#D4AF37);margin-top:2px}
.mg-product.mg-need-star::after{content:"★ lista";display:block;font-size:.58rem;color:var(--cyan,#22D3EE);font-weight:800;margin-top:3px}
.mg-cart{display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px 16px;font-weight:800}
.mg-cart .mg-cart-total{font-size:1.3rem}
.mg-cart .mg-over-budget{color:#fca5a5}

/* Order steps */
.mg-steps{display:flex;flex-direction:column;gap:9px;margin-top:16px;max-width:520px}
.mg-step{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-weight:600;font-size:.95rem}
.mg-step .mg-step-num{width:28px;height:28px;border-radius:50%;background:rgba(34,211,238,.16);color:var(--cyan,#22D3EE);
  display:grid;place-items:center;font-weight:900;flex-shrink:0;font-size:.85rem}
.mg-step .mg-step-txt{flex:1}
.mg-step .mg-step-move{display:flex;flex-direction:column;gap:3px}
.mg-step .mg-step-move button{width:30px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:#cbd5e1;cursor:pointer;font-size:.7rem;line-height:1;touch-action:manipulation}
.mg-step .mg-step-move button:hover{border-color:var(--cyan,#22D3EE);color:#fff}
.mg-step.mg-correct{border-color:rgba(80,200,120,.5);background:rgba(80,200,120,.1)}

/* Scam timed */
.mg-scam-card{max-width:540px;margin:18px auto 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;padding:22px 22px 24px;text-align:center}
.mg-scam-from{font-size:.78rem;color:rgba(226,232,240,.55);font-weight:700;margin-bottom:8px}
.mg-scam-msg{font-size:1.12rem;line-height:1.5;font-weight:600;margin-bottom:20px}
.mg-scam-actions{display:flex;gap:12px;justify-content:center}
.mg-scam-actions button{flex:1;max-width:200px;padding:15px;border-radius:13px;font-weight:800;font-size:1rem;cursor:pointer;
  font-family:inherit;border:none;transition:.13s;touch-action:manipulation}
.mg-scam-safe{background:linear-gradient(135deg,var(--green,#50C878),#3aa05f);color:#04210f}
.mg-scam-fraud{background:linear-gradient(135deg,#ef4444,#c0392b);color:#fff}
.mg-scam-actions button:hover{transform:translateY(-2px)}
.mg-timebar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;max-width:540px;margin:16px auto 0}
.mg-timebar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold,#D4AF37),#ef4444);transition:width .1s linear}

/* Versus */
.mg-versus-setup{display:flex;flex-direction:column;gap:14px;max-width:460px;margin:18px auto 0}
.mg-vs-player{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px 14px}
.mg-vs-player .av{font-size:1.9rem}
.mg-vs-player input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);border-radius:9px;
  padding:10px 12px;color:#fff;font-family:inherit;font-size:.95rem}
.mg-vs-turn{text-align:center;font-weight:900;font-size:1.15rem;margin:6px 0 14px}
.mg-vs-score{display:flex;justify-content:center;gap:24px;margin-bottom:14px}
.mg-vs-score div{text-align:center}
.mg-vs-score b{font-size:1.6rem;display:block}
.mg-vs-score.p1 b{color:var(--cyan,#22D3EE)}
.mg-vs-score.p2 b{color:var(--gold,#D4AF37)}
.mg-options{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:8px auto 0}
.mg-option{padding:14px 16px;border-radius:13px;border:1.5px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);
  color:#e2e8f0;cursor:pointer;font-family:inherit;font-size:.96rem;font-weight:600;text-align:left;transition:.13s;touch-action:manipulation}
.mg-option:hover{border-color:var(--cyan,#22D3EE);background:rgba(34,211,238,.08)}
.mg-option.mg-ok{border-color:var(--green,#50C878);background:rgba(80,200,120,.16)}
.mg-option.mg-no{border-color:#ef4444;background:rgba(239,68,68,.14);opacity:.85}

/* Footer actions inside stage */
.mg-stage-foot{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}

/* Result overlay */
.mg-result{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(2,6,23,.85);backdrop-filter:blur(6px)}
.mg-result-card{background:linear-gradient(165deg,#0a1c2e,#071422);border:2px solid rgba(34,211,238,.34);
  border-radius:1.5rem;padding:2.3rem 2rem 1.8rem;max-width:420px;width:100%;text-align:center;position:relative;overflow:hidden;
  animation:mgPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes mgPop{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:scale(1)}}
.mg-result-emoji{font-size:3.4rem}
.mg-result-h{font-size:1.7rem;font-weight:900;margin:.4rem 0 .3rem;letter-spacing:-.02em}
.mg-result-stars{font-size:1.7rem;letter-spacing:5px;margin:.3rem 0}
.mg-result-msg{color:rgba(226,232,240,.72);font-size:.95rem;line-height:1.5;margin-bottom:1.4rem}
.mg-result-actions{display:flex;flex-direction:column;gap:.6rem}

.mg-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mg-confetti i{position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;animation:mgFall linear infinite}
@keyframes mgFall{to{transform:translateY(520px) rotate(540deg);opacity:.3}}

/* reduced motion */
.a11y-noanim .mg-confetti,.a11y-noanim #mg-particles{display:none}
.a11y-noanim .mg-result-card,.a11y-noanim .mg-card:hover{animation:none;transform:none}

/* feedback flash */
.mg-flash{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9700;padding:12px 22px;border-radius:12px;
  font-weight:800;font-size:1rem;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:mgFlash 1.4s ease forwards}
.mg-flash.ok{background:var(--green,#50C878);color:#04210f}
.mg-flash.no{background:#ef4444;color:#fff}
@keyframes mgFlash{0%{opacity:0;transform:translate(-50%,-12px)}15%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}