/* Bandicoot Millionairs Mint (Scratch UI)
   Minimal per-game CSS: provides default ScratchMainUI variables and reveal styling.
   Use the DEV editor (?editor=1) to export overrides and paste them here.
*/

.scratch-bg{
  background-image: url("../assets/background/bandicoot-millionaire-mint-BG.svg");
}

/* Always-on coin cursor (Millionairs Mint only) */
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"],
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] *{
  cursor: url("../assets/coin-scratch-cursor/bandicoot-scratch-coin-scratcher.png") 16 16, auto !important;
}

/* Subtle sparkle overlay (Millionairs Mint) */
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-stage::before,
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-stage::after{
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  filter: blur(0.15px) drop-shadow(0 0 10px rgba(255,255,255,0.18));
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-stage::before{
  background-image:
    radial-gradient(14px 14px at 18% 22%, rgba(255,255,255,0.72), rgba(255,255,255,0) 72%),
    radial-gradient(16px 16px at 76% 18%, rgba(255,255,255,0.62), rgba(255,255,255,0) 74%),
    radial-gradient(12px 12px at 62% 74%, rgba(255,255,255,0.52), rgba(255,255,255,0) 72%),
    radial-gradient(18px 18px at 28% 78%, rgba(255,255,255,0.42), rgba(255,255,255,0) 76%),
    radial-gradient(12px 12px at 88% 66%, rgba(255,255,255,0.40), rgba(255,255,255,0) 72%),
    radial-gradient(10px 10px at 46% 38%, rgba(255,255,255,0.48), rgba(255,255,255,0) 72%),
    radial-gradient(9px 9px at 8% 40%, rgba(255,255,255,0.36), rgba(255,255,255,0) 72%),
    radial-gradient(11px 11px at 94% 44%, rgba(255,255,255,0.44), rgba(255,255,255,0) 72%);
  animation: dvSparkleA 2.9s ease-in-out infinite;
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-stage::after{
  background-image:
    radial-gradient(12px 12px at 12% 56%, rgba(255,255,255,0.44), rgba(255,255,255,0) 72%),
    radial-gradient(18px 18px at 44% 16%, rgba(255,255,255,0.46), rgba(255,255,255,0) 76%),
    radial-gradient(14px 14px at 92% 34%, rgba(255,255,255,0.58), rgba(255,255,255,0) 74%),
    radial-gradient(11px 11px at 54% 88%, rgba(255,255,255,0.40), rgba(255,255,255,0) 72%),
    radial-gradient(18px 18px at 72% 58%, rgba(255,255,255,0.36), rgba(255,255,255,0) 78%),
    radial-gradient(10px 10px at 36% 66%, rgba(255,255,255,0.42), rgba(255,255,255,0) 72%),
    radial-gradient(9px 9px at 66% 46%, rgba(255,255,255,0.34), rgba(255,255,255,0) 72%),
    radial-gradient(12px 12px at 22% 12%, rgba(255,255,255,0.40), rgba(255,255,255,0) 74%);
  animation: dvSparkleB 4.2s ease-in-out infinite;
}

@keyframes dvSparkleA{
  0%, 100%{ opacity: 0.06; transform: translate3d(0, 0, 0) scale(1); }
  12%{ opacity: 0.62; }
  24%{ opacity: 0.12; transform: translate3d(0.55%, -0.25%, 0) scale(1.012); }
  42%{ opacity: 0.54; }
  58%{ opacity: 0.14; transform: translate3d(-0.45%, 0.55%, 0) scale(1.007); }
  74%{ opacity: 0.48; }
}

@keyframes dvSparkleB{
  0%, 100%{ opacity: 0.05; transform: translate3d(0, 0, 0) scale(1); }
  9%{ opacity: 0.44; }
  20%{ opacity: 0.10; transform: translate3d(-0.55%, 0.3%, 0) scale(1.012); }
  40%{ opacity: 0.56; }
  54%{ opacity: 0.12; transform: translate3d(0.5%, 0.2%, 0) scale(1.008); }
  82%{ opacity: 0.42; }
}

/* Export-friendly defaults (desktop/tablet) */
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"]{
  --stage-max-width: 520px;
  --stage-top-offset: 0px;
  --stage-action-gap: 10px;

  --ticket-top: 50%;
  --ticket-left: 50%;
  --ticket-w: 100%;
  --ticket-rotate: 0deg;

  --surface-top: 50%;
  --surface-left: 50%;
  --surface-w: 86%;
  --surface-h: 62%;
  --surface-opacity: 1;

  --reveal-top: 50%;
  --reveal-left: 50%;
  --reveal-w: 80%;
  --reveal-h: 56%;
  --reveal-scale: 1;
  --reveal-padding: 10px;
  --reveal-radius: 14px;
  --reveal-align: center;

  --grid-cols: 4;
  --grid-rows: 2;
  --grid-gap: 10px;
  --grid-row-gap: 10px;
  --grid-col-gap: 10px;
}

/* Mobile profile scaffold (paste exported vars here) */
@media (max-width: 768px){
  .scratch-app[data-scratch-game="bandicoot-millionairs-mint"]{
    /* Example only; editor export will overwrite */
    --stage-max-width: 420px;
  }
}

/* Reveal layer styles (your numbers + winning numbers) */
.gf-reveal{
  width: 100%;
  height: 100%;
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: center;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--reveal-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.gf-label{
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  margin-top: 2px;
}

.gf-winning{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gf-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-auto-rows: 1fr;
  row-gap: var(--grid-row-gap);
  column-gap: var(--grid-col-gap);
}

.gf-cell{
  height: clamp(40px, 7.4vmin, 58px);
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 236, 190, 0.18);
}

.gf-num{
  font-size: clamp(14px, 3.2vmin, 20px);
  font-weight: 950;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffefb0, #f6d36b 55%, #8a5f14);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
}

.gf-cell.is-match{
  border-color: rgba(255, 239, 176, 0.7);
  box-shadow:
    0 0 0 2px rgba(255, 239, 176, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gf-cell.is-match::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(70% 70% at 50% 50%, rgba(255, 232, 140, 0.22), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .mm-symbolIcon{
  width: 72%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gf-result{
  margin-top: 2px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  justify-self: center;
}

/* Readability tweaks (Golden Fortune only)
   - Make reveal text black (requested)
   - Add black outline to ScratchUI buttons */
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-label,
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-num,
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-result{
  color: rgba(0, 0, 0, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-num{
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  filter: none;
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-result{
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(0, 0, 0, 0.65);
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-btn{
  border-color: rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65) inset;
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .scratch-ticket img{
  border-radius: 12px;
}

/* Wallet / bet mounts (Golden Fortune only) */
.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-hudLabel{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.scratch-app[data-scratch-game="bandicoot-millionairs-mint"] .gf-hudValue{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 950;
  color: rgba(255,255,255,0.95);
}


.scratch-app[data-scratch-game="bandicoot-millionairs-mint"]{
  --grid-col-gap: 11px;
  --grid-cols: 4;
  --grid-gap: 0px;
  --grid-row-gap: 30px;
  --grid-rows: 3;
  --reveal-h: 35%;
  --reveal-left: 49.5%;
  --reveal-padding: 35px;
  --reveal-radius: 2px;
  --reveal-scale: 0.6;
  --reveal-top: 45%;
  --reveal-w: 100%;
  --stage-action-gap: 0px;
  --stage-max-width: 510px;
  --stage-top-offset: -40px;
  --surface-h:70%;
  --surface-left: 50%;
  --surface-opacity: 1;
  --surface-rotate: 0deg;
  --surface-top: 49%;
  --surface-w: 96%;
  --ticket-rotate: 0deg;
  --ticket-top: 50%;
  --ticket-w: 120%;
}

  @media (max-width: 768px){
    .scratch-app[data-scratch-game="bandicoot-millionairs-mint"]{
    --grid-col-gap: 5px;
    --grid-gap: 10px;
    --grid-row-gap: 11px;
    --reveal-align: center;
    --reveal-h: 57.5%;
    --reveal-left: 49.5%;
    --reveal-padding: 0px;
    --reveal-radius: 9px;
    --reveal-scale: 0.6;
    --reveal-top: 55%;
    --reveal-w: 87.5%;
    --stage-action-gap: 0px;
    --stage-max-width: 460px;
    --stage-top-offset: 20px;
    --surface-h: 67.5%;
    --surface-left: 50%;
    --surface-opacity: 1;
    --surface-top: 49%;
    --surface-w: 98%;
    --ticket-top: 50%;
  }
}