/* ============================================================
   GiverGames Whack It -- wm.css
   Builds on dnd.css (marquee, gate, result, code box, sparks).
   ============================================================ */

.wm-page .marquee-title .mt-deal { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.wm-page .dnd-stage.playing .mt-deal { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }


/* ============================================================
   THE BIG BOARD: 18 squares around a center panel
   ============================================================ */
.wm-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 6px;
  max-width: 640px;
  margin: 0 auto 22px;
  padding: 10px;
  border-radius: 22px;
  background: #0A1417;
  box-shadow: 0 0 0 3px rgba(253,205,44,0.6), 0 18px 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.6);
}
.wm-board.shake { animation: wm-shake 0.6s ease; }
@keyframes wm-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-10px, 4px) rotate(-1deg); }
  30% { transform: translate(9px, -4px) rotate(1deg); }
  45% { transform: translate(-7px, 3px); }
  60% { transform: translate(6px, -2px); }
  80% { transform: translate(-3px, 1px); }
}

.wm-sq {
  position: relative;
  min-width: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 2px;
  min-height: clamp(48px, 13vw, 76px);
  background: linear-gradient(180deg, #13505A, #0B3238);
  box-shadow: inset 0 0 0 2px rgba(19,199,182,0.35);
  color: var(--white);
  transition: background 0.08s linear, box-shadow 0.08s linear, transform 0.08s linear;
}
.wm-sq b {
  font-size: clamp(1rem, 4.6vw, 1.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.wm-sq small {
  font-size: clamp(0.45rem, 1.8vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 2px;
}
.wm-sq.is-spin small { color: var(--yellow); }
.wm-sq.is-whammy { background: linear-gradient(180deg, #8E1E17, #4E0E0A); box-shadow: inset 0 0 0 2px rgba(255,138,128,0.5); }
.wm-sq.is-whammy b { font-size: clamp(0.5rem, 2.1vw, 0.8rem); letter-spacing: 0.04em; color: #FFD1CC; }

/* The racing light */
.wm-sq.lit {
  background: linear-gradient(180deg, #FFF3B0, var(--yellow) 55%, #D9A300);
  box-shadow: 0 0 0 3px #FFFBE6, 0 0 22px rgba(253,205,44,0.9);
  color: var(--charcoal);
  transform: scale(1.06);
  z-index: 2;
}
.wm-sq.lit small { color: var(--charcoal); }
.wm-sq.lit.is-whammy { background: linear-gradient(180deg, #FF8A80, #E2574C 55%, #B23030); box-shadow: 0 0 0 3px #FFE1DD, 0 0 26px rgba(226,87,76,0.9); }
.wm-sq.lit.is-whammy b { color: var(--white); }
.wm-sq.landed { animation: wm-land 0.5s ease 3; }
@keyframes wm-land { 50% { transform: scale(1.14); filter: brightness(1.25); } }

/* Center panel */
.wm-center {
  grid-column: 2 / span 4;
  grid-row: 2 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #1F3A40, #0E1D21);
  box-shadow: inset 0 0 0 1.5px rgba(253,205,44,0.35);
  padding: 8px;
}
.wm-total-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.wm-total {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--yellow);
  text-shadow: 0 0 22px rgba(253,205,44,0.45);
  font-variant-numeric: tabular-nums;
}
.wm-total.bump { animation: thump 0.45s ease; }
.wm-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.wm-meta b { color: var(--teal); font-size: 1rem; }
.wm-whams { display: inline-flex; gap: 4px; }
.wm-whams i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.wm-whams i.hit { background: #E2574C; box-shadow: 0 0 8px rgba(226,87,76,0.8); }


/* ============================================================
   BUTTONS
   ============================================================ */
.wm-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.wm-actions:has(#bankBtn:not([hidden])) { grid-template-columns: 1.3fr 1fr; }
.wm-stop {
  padding: 18px 10px;
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: linear-gradient(180deg, #FFE27A, var(--yellow) 50%, #D9A300);
  box-shadow: 0 7px 0 #9C7400, 0 12px 28px rgba(253,205,44,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.wm-stop.is-stop {
  color: var(--white);
  background: radial-gradient(circle at 50% 35%, #FF6B5E, #D63A2E 60%, #9E2018);
  box-shadow: 0 7px 0 #6E120C, 0 0 0 4px rgba(255,138,128,0.35), 0 12px 30px rgba(226,87,76,0.55);
  animation: wm-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes wm-pulse { to { filter: brightness(1.15); box-shadow: 0 7px 0 #6E120C, 0 0 0 8px rgba(255,138,128,0.25), 0 12px 34px rgba(226,87,76,0.7); } }
.wm-stop:active { transform: translateY(5px); box-shadow: none; }
.wm-stop:disabled { opacity: 0.55; cursor: wait; animation: none; transform: none; }
.wm-actions .btn-nodeal { font-size: 1.05rem; padding: 16px 8px; }
.wm-actions .btn-nodeal:disabled { opacity: 0.55; }


/* ============================================================
   THE GREEDY + TOASTS
   ============================================================ */
.wm-whammy {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(226,87,76,0.55), rgba(60,8,6,0.85) 70%);
  animation: wm-flash 0.18s steps(2) 6, fade 0.3s ease both;
}
.wm-whammy[hidden] { display: none; }
@keyframes wm-flash { 50% { background: radial-gradient(circle, rgba(253,205,44,0.45), rgba(60,8,6,0.8) 70%); } }
.wm-whammy-word {
  font-size: clamp(3rem, 15vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFF;
  text-shadow: 0 0 30px #FF3B2E, 0 6px 0 #7A1009, 0 10px 30px rgba(0,0,0,0.6);
  animation: wm-burst 0.6s cubic-bezier(.2,1.7,.4,1) both;
}
.wm-whammy small { font-size: 1.05rem; font-weight: 700; color: #FFE1DD; text-align: center; margin: 0 20px; padding: 12px 18px; border-radius: 14px; background: rgba(40,6,4,0.85); max-width: 420px; }
@keyframes wm-burst {
  from { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(-6deg); opacity: 1; }
}

.sw-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 150;
  transform: translate(-50%, -50%);
  padding: 18px 30px;
  border-radius: 22px;
  background: rgba(24,34,40,0.94);
  box-shadow: 0 0 0 2px rgba(253,205,44,0.6), 0 20px 50px rgba(0,0,0,0.5);
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--yellow);
  white-space: nowrap;
  pointer-events: none;
  animation: wmToast 0.5s cubic-bezier(.2,1.6,.4,1) both;
}
.sw-toast small { display: block; font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-top: 4px; white-space: normal; }
.sw-toast.teal { color: var(--teal); box-shadow: 0 0 0 2px rgba(19,199,182,0.6), 0 20px 50px rgba(0,0,0,0.5); }
@keyframes wmToast {
  from { transform: translate(-50%, -50%) scale(2) rotate(-8deg); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .wm-board { gap: 4px; padding: 7px; border-radius: 16px; }
  .wm-sq { border-radius: 8px; }
  .wm-meta { font-size: 0.7rem; }
  .wm-whams i { width: 11px; height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-board.shake, .wm-sq.landed, .wm-stop.is-stop, .wm-whammy, .wm-whammy-word, .sw-toast { animation: none !important; }
}