/* ================================================================
   chame.io retention meta layer — self-contained styles.
   Everything is prefixed .mx- so it never collides with either
   game's CSS. Matches the game look: dark glass, #3ddc84 accent,
   14-16px radii, .btn-style pills.
   ================================================================ */

/* ---- menu chip row (mounted into a game menu column) ---- */
.mx-chip{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  width:100%;max-width:340px;margin:0 auto 14px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.mx-c{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#e7eef5;font-weight:800;font-size:14px;line-height:1;
  padding:9px 12px;border-radius:14px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .1s,background .15s;
}
.mx-c b{color:#fff;font-weight:900;}
.mx-c:active{transform:scale(.94);}
.mx-c-coins{background:rgba(61,220,132,.14);border-color:rgba(61,220,132,.35);}
.mx-c-streak{background:rgba(255,138,61,.14);border-color:rgba(255,138,61,.35);}
.mx-c-gift,.mx-c-spin,.mx-c-shop{font-size:16px;padding:9px 11px;}
.mx-dot{
  position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:#ff5d5d;box-shadow:0 0 0 2px #0e1116;display:none;
}
.mx-dot.on{display:block;animation:mxpulse 1.4s infinite;}
@keyframes mxpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}}
/* premium crown badge in the chip */
.mx-crown{
  display:inline-flex;align-items:center;font-size:16px;line-height:1;
  padding:8px 9px;border-radius:14px;
  background:linear-gradient(135deg,rgba(240,168,15,.28),rgba(255,216,77,.16));
  border:1px solid rgba(240,168,15,.55);box-shadow:0 0 10px rgba(240,168,15,.3);
}

/* ---- floating coin / status toasts ---- */
.mx-toast{
  position:fixed;z-index:200;pointer-events:none;
  background:rgba(6,9,13,.86);color:#fff;font-weight:800;font-size:14px;
  padding:8px 15px;border-radius:16px;white-space:nowrap;
  border:1px solid rgba(61,220,132,.4);box-shadow:0 6px 20px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.mx-toast.mx-toast-in{opacity:1;transform:translateX(-50%) translateY(-8px);}
.mx-toast.mx-toast-out{opacity:0;transform:translateX(-50%) translateY(-34px);}

/* ---- modal overlay ---- */
.mx-overlay{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.mx-backdrop{position:absolute;inset:0;background:rgba(3,6,9,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.mx-modal{
  position:relative;z-index:1;width:min(400px,94vw);max-height:90vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(160deg,rgba(16,26,21,.97),rgba(8,11,15,.98));
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  padding:18px 18px 20px;color:#e7eef5;
  animation:mxpop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mxpop{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}

.mx-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.mx-head h3{font-size:20px;font-weight:900;color:#fff;flex:1;letter-spacing:-.3px;}
.mx-bal{background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.35);color:#fff;font-weight:900;font-size:14px;padding:6px 11px;border-radius:12px;}
.mx-x{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;border:none;
  background:rgba(255,255,255,.08);color:#9fb3c8;font-size:15px;font-weight:800;cursor:pointer;
}
.mx-x:active{transform:scale(.9);}

/* ---- generic button (mirrors the game .btn) ---- */
.mx-btn{
  background:#3ddc84;color:#06210f;font-size:16px;font-weight:800;
  padding:13px 20px;border:none;border-radius:15px;cursor:pointer;
  box-shadow:0 6px 16px rgba(61,220,132,.3);display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.mx-btn:active{transform:scale(.97);}
.mx-btn:disabled{opacity:.5;cursor:default;box-shadow:none;}
.mx-btn-sm{font-size:14px;padding:10px 16px;border-radius:13px;}
.mx-btn-ghost{background:transparent;color:#9fb3c8;border:2px solid rgba(159,179,200,.35);box-shadow:none;}

/* ---- daily: login bonus card ---- */
.mx-login{
  display:flex;align-items:center;gap:12px;
  background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.28);
  border-radius:16px;padding:14px 15px;margin-bottom:14px;
}
.mx-login.claimed{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.mx-login-info{flex:1;min-width:0;}
.mx-login-t{font-size:15px;font-weight:900;color:#fff;}
.mx-login-a{font-size:13px;color:#9fb3c8;font-weight:700;margin-top:2px;}
.mx-login-ok{font-size:24px;color:#3ddc84;font-weight:900;}

/* ---- streak flame row ---- */
.mx-flames{display:flex;gap:5px;justify-content:space-between;margin-bottom:16px;}
.mx-flame{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:11px;padding:8px 2px 6px;font-size:16px;opacity:.5;filter:grayscale(1);
}
.mx-flame span{font-size:10px;font-weight:800;color:#9fb3c8;}
.mx-flame.on{opacity:1;filter:none;background:rgba(255,138,61,.14);border-color:rgba(255,138,61,.35);}
.mx-flame.on span{color:#ffb07a;}

/* ---- section title ---- */
.mx-sec-t{font-size:13px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#9fb3c8;margin:4px 0 9px;}

/* ---- missions ---- */
.mx-missions{display:flex;flex-direction:column;gap:9px;}
.mx-mission{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:11px 13px;}
.mx-mission.done{background:rgba(61,220,132,.10);border-color:rgba(61,220,132,.3);}
.mx-m-top{display:flex;align-items:center;gap:8px;}
.mx-m-text{flex:1;font-size:14px;font-weight:800;color:#fff;}
.mx-m-rew{font-size:13px;font-weight:900;color:#3ddc84;white-space:nowrap;}
.mx-m-bar{height:7px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;margin:8px 0 6px;}
.mx-m-bar i{display:block;height:100%;background:linear-gradient(90deg,#2ecc71,#3ddc84);border-radius:5px;transition:width .3s;}
.mx-m-foot{font-size:12px;font-weight:800;}
.mx-m-prog{color:#9fb3c8;}
.mx-m-done{color:#3ddc84;}

/* ---- spin wheel ---- */
.mx-spin-wrap{position:relative;width:100%;display:flex;justify-content:center;margin:4px 0 14px;}
/* explicit position/size so host-page global `canvas{position:fixed;...}` rules can't hijack it */
.mx-wheel{display:block;position:static;inset:auto;width:min(260px,72vw);height:min(260px,72vw);max-width:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));}
.mx-spin-ptr{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-size:26px;color:#3ddc84;z-index:2;text-shadow:0 2px 4px rgba(0,0,0,.6);pointer-events:none;}
.mx-spin-foot{display:flex;flex-direction:column;align-items:center;gap:10px;}
.mx-spin-foot .mx-btn{width:min(280px,80%);}
.mx-spin-win{font-size:24px;font-weight:900;color:#3ddc84;animation:mxpop .3s;}
.mx-count{font-size:13px;font-weight:700;color:#9fb3c8;}
.mx-count b{color:#e7eef5;font-variant-numeric:tabular-nums;}
.mx-spins-left{font-size:13px;font-weight:800;color:#9fb3c8;}
.mx-spins-left b{color:#3ddc84;font-variant-numeric:tabular-nums;}

/* ---- shop ---- */
.mx-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px;padding-bottom:2px;}
.mx-tab{
  flex:0 0 auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#9fb3c8;font-size:13px;font-weight:800;padding:8px 12px;border-radius:12px;cursor:pointer;white-space:nowrap;
}
.mx-tab.on{background:#3ddc84;color:#06210f;border-color:transparent;box-shadow:0 4px 12px rgba(61,220,132,.3);}
.mx-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mx-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:15px;padding:13px 10px 12px;
}
.mx-item-emoji{font-size:34px;line-height:1;}
.mx-item-name{font-size:14px;font-weight:900;color:#fff;}
.mx-item-desc{font-size:11px;font-weight:600;color:#9fb3c8;line-height:1.35;min-height:28px;}
.mx-item-act{margin-top:5px;width:100%;display:flex;justify-content:center;}
.mx-item-act .mx-btn{width:100%;}
.mx-owned{font-size:13px;font-weight:900;color:#9fb3c8;padding:9px 0;}
.mx-equip{
  width:100%;background:rgba(47,128,237,.16);border:1px solid rgba(47,128,237,.45);
  color:#cfe0ff;font-size:14px;font-weight:800;padding:9px 12px;border-radius:13px;cursor:pointer;
}
.mx-equip:active{transform:scale(.97);}
.mx-equip.mx-eq-on{background:rgba(61,220,132,.16);border-color:rgba(61,220,132,.5);color:#bff2d4;}

/* ---- premium exclusive shop items ---- */
.mx-item-prem{
  position:relative;
  background:linear-gradient(160deg,rgba(240,168,15,.14),rgba(255,255,255,.04));
  border-color:rgba(240,168,15,.4);
}
.mx-prem-tag{
  position:absolute;top:7px;right:7px;
  font-size:9px;font-weight:900;letter-spacing:.3px;color:#0e1116;
  background:linear-gradient(135deg,#ffd84d,#e0a80f);
  padding:3px 6px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.mx-locked{
  width:100%;background:rgba(240,168,15,.14);border:1px solid rgba(240,168,15,.42);
  color:#f4cf7a;font-size:13px;font-weight:800;padding:9px 10px;border-radius:13px;cursor:pointer;
}
.mx-locked:active{transform:scale(.97);}

/* insufficient-coins shake */
@keyframes mxshake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.mx-shake{animation:mxshake .5s;border-color:#ff5d5d !important;}

/* ---- round-end summary (rendered into game's end screen element) ---- */
.mx-re{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;}
.mx-re-total{font-size:26px;font-weight:900;color:#3ddc84;}
.mx-re-total span{font-size:22px;}
.mx-re-list{display:flex;flex-direction:column;gap:4px;width:100%;min-width:180px;}
.mx-re-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;font-weight:700;color:#9fb3c8;}
.mx-re-row b{color:#e7eef5;font-weight:900;}