body.whack-deluxe {
  --whack-ink: #081f2d;
  --whack-deep: #073d43;
  --whack-teal: #0d716d;
  --whack-aqua: #6ee7d8;
  --whack-cream: #fff9e9;
  --whack-gold: #ffd66b;
  --whack-coral: #ff6f68;
  --whack-blue: #81d8ff;
  background: #082d3b;
  color: var(--whack-cream);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

body.whack-deluxe::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 25, 35, .18), transparent 18%, transparent 82%, rgba(4, 25, 35, .18)),
    radial-gradient(circle at 50% 45%, transparent 44%, rgba(4, 21, 32, .2) 100%);
  mix-blend-mode: multiply;
}

body.whack-deluxe #game-wrap canvas {
  filter: saturate(1.06) contrast(1.025);
}

#impact-flash,
#broadcast-lines,
#callout {
  position: fixed;
  pointer-events: none;
}

#broadcast-lines {
  inset: 0;
  z-index: 6;
  opacity: .2;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}

#impact-flash {
  inset: 0;
  z-index: 22;
  opacity: 0;
  background: radial-gradient(circle at var(--hit-x, 50%) var(--hit-y, 50%), rgba(255,244,175,.42), transparent 32%);
  transition: opacity 150ms ease-out;
}

#impact-flash.is-live { opacity: 1; }
#impact-flash.is-miss {
  background: radial-gradient(circle at var(--hit-x, 50%) var(--hit-y, 50%), rgba(255,94,99,.32), transparent 34%);
}

#callout {
  left: 50%;
  top: 25%;
  z-index: 24;
  min-width: 190px;
  padding: 9px 18px 10px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 999px;
  color: var(--whack-ink);
  background: linear-gradient(180deg, #fffef4, #ffe89f);
  box-shadow: 0 13px 30px rgba(3,28,36,.28), inset 0 0 0 2px rgba(255,255,255,.55);
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 20px) scale(.78) rotate(-2deg);
}

#callout.is-live { animation: whackCallout 760ms cubic-bezier(.18,.9,.22,1) both; }
#callout.is-miss {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  background: linear-gradient(180deg, #ff7e78, #db3f55);
}
#callout.is-streak {
  background: linear-gradient(135deg, #fff3aa, #77f0df 54%, #8ed5ff);
  box-shadow: 0 0 34px rgba(111,231,216,.44), 0 13px 30px rgba(3,28,36,.3);
}

@keyframes whackCallout {
  0% { opacity: 0; transform: translate(-50%, 24px) scale(.72) rotate(-3deg); }
  18% { opacity: 1; transform: translate(-50%, -5px) scale(1.08) rotate(1deg); }
  70% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(.94) rotate(1deg); }
}

body.whack-deluxe #hud {
  top: 18px !important;
  left: 18px !important;
  width: min(410px, calc(100vw - 160px));
  min-width: 0;
  padding: 12px 14px 13px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 18px !important;
  color: var(--whack-cream) !important;
  background: linear-gradient(145deg, rgba(6,42,52,.91), rgba(5,28,43,.78)) !important;
  box-shadow: 0 18px 46px rgba(3,21,32,.28), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  text-shadow: none !important;
}

.hud-kicker {
  color: var(--whack-aqua);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

body.whack-deluxe #hud .title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2px 0 9px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

body.whack-deluxe #hud .title em {
  color: var(--whack-gold);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .1em;
}

body.whack-deluxe .hud-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
}

body.whack-deluxe .hud-row + .hud-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 7px;
}

.hud-stat {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.075);
}

.hud-stat small {
  display: block;
  margin-bottom: 2px;
  color: rgba(228,248,244,.62);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hud-stat b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.hud-stat b.bump { animation: statBump 260ms ease-out; }
@keyframes statBump { 45% { color: var(--whack-gold); transform: scale(1.16); } }

#combo-track {
  position: relative;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

#combo-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--whack-gold), var(--whack-coral), var(--whack-aqua));
  box-shadow: 0 0 14px rgba(255,214,107,.5);
  transition: width 150ms ease-out;
}

body.whack-deluxe #combo {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: var(--whack-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.whack-deluxe #timer-chip {
  top: 18px !important;
  min-width: 118px;
  padding: 10px 16px 9px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(6,42,52,.94), rgba(5,28,43,.8)) !important;
  box-shadow: 0 15px 36px rgba(3,21,32,.26), inset 0 1px 0 rgba(255,255,255,.14) !important;
  text-align: center;
  backdrop-filter: blur(14px);
}

#timer-chip small {
  display: block;
  color: var(--whack-aqua);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

#timer-value {
  display: block;
  margin-top: 1px;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

body.whack-deluxe #timer-chip.warn {
  border-color: rgba(255,111,104,.8) !important;
  background: linear-gradient(145deg, rgba(112,29,42,.95), rgba(55,18,37,.88)) !important;
  animation: timerPulse 820ms ease-in-out infinite alternate;
}

@keyframes timerPulse { to { transform: translateX(-50%) scale(1.055); box-shadow: 0 0 32px rgba(255,86,91,.32) !important; } }

body.whack-deluxe #hint {
  left: 18px !important;
  bottom: 16px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(5,31,42,.68) !important;
  box-shadow: 0 9px 28px rgba(3,21,32,.2);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

body.whack-deluxe #menu {
  z-index: 40;
  padding: 22px;
  background:
    linear-gradient(115deg, rgba(6,39,51,.74), rgba(6,21,37,.52)),
    radial-gradient(circle at 20% 18%, rgba(255,203,111,.2), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(110,231,216,.18), transparent 36%) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

body.whack-deluxe #menu .panel {
  position: relative;
  width: min(940px, 94vw) !important;
  max-height: 90vh;
  overflow: auto;
  padding: clamp(24px, 4vw, 48px) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 28px !important;
  color: var(--whack-cream) !important;
  background:
    linear-gradient(135deg, rgba(9,63,69,.97), rgba(5,29,44,.98) 62%),
    #073b45 !important;
  box-shadow: 0 40px 110px rgba(2,18,28,.5), inset 0 1px 0 rgba(255,255,255,.17) !important;
  isolation: isolate;
}

body.whack-deluxe #menu .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.045) 50%, transparent 50.2%),
    radial-gradient(circle at 76% 8%, rgba(255,214,107,.16), transparent 26%);
}

.menu-eyebrow {
  display: flex;
  justify-content: center;
  gap: 12px;
  color: var(--whack-aqua);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.whack-deluxe #menu h1 {
  margin: 14px 0 10px !important;
  color: #fff !important;
  font-size: clamp(48px, 8vw, 92px) !important;
  font-weight: 900 !important;
  line-height: .86;
  letter-spacing: -.055em !important;
  text-shadow: 0 10px 30px rgba(2,21,28,.25) !important;
}

body.whack-deluxe #menu h1 span {
  color: var(--whack-gold);
  -webkit-text-stroke: 1px rgba(255,255,255,.2);
}

.menu-lede {
  width: min(650px, 100%);
  margin: 18px auto 0 !important;
  color: rgba(245,255,251,.82) !important;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.55 !important;
  text-align: center;
}

.menu-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: min(700px, 100%);
  margin: 24px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.12);
}

.menu-specs span {
  padding: 12px 10px;
  background: rgba(4,29,41,.52);
  text-align: center;
}

.menu-specs small,
.menu-specs b { display: block; }
.menu-specs small { color: rgba(214,247,241,.53); font-size: 8px; letter-spacing: .15em; }
.menu-specs b { margin-top: 3px; color: #fff; font-size: 11px; letter-spacing: .06em; }

body.whack-deluxe .menu-controls { margin-top: 22px !important; }

body.whack-deluxe .chip {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  font-weight: 800;
  letter-spacing: .05em;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

body.whack-deluxe .chip:hover,
body.whack-deluxe .chip:focus-visible {
  border-color: rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 25px rgba(2,18,28,.22);
  outline: none;
  transform: translateY(-2px);
}

body.whack-deluxe #toggle-sfx,
body.whack-deluxe #toggle-music {
  border-color: rgba(110,231,216,.42) !important;
  color: var(--whack-cream) !important;
  background-color: rgba(11,87,89,.72) !important;
  background-image: none !important;
  text-shadow: none !important;
}

body.whack-deluxe #start-round,
body.whack-deluxe #end-controls .chip-primary {
  min-width: 260px;
  padding: 13px 22px !important;
  border-color: rgba(255,241,174,.72) !important;
  color: var(--whack-ink) !important;
  background: linear-gradient(180deg, #fff3ac, #ffc95e) !important;
  box-shadow: 0 13px 26px rgba(255,179,65,.16), inset 0 1px 0 #fff;
  font-size: 13px;
  text-transform: uppercase;
}

body.whack-deluxe #result {
  margin: 20px auto 0;
  border: 1px solid rgba(255,255,255,.18);
  border-left: 4px solid var(--whack-gold);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
  text-align: center;
}

.lobby-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  color: rgba(229,251,247,.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.lobby-link:hover { color: #fff; }

body.whack-deluxe #bamboo-stick {
  filter: drop-shadow(0 16px 20px rgba(2,15,24,.34));
}

body.whack-deluxe #bamboo-stick .glove {
  top: -151px;
  scale: .82;
  transform-origin: 50% 100%;
}

body.whack-deluxe #bamboo-stick .cuff {
  border-color: #061b25;
  background: linear-gradient(180deg, #7ff0dc, #2aa79e 58%, #126b6c);
}

body.whack-deluxe #bamboo-stick.can-hit {
  filter: drop-shadow(0 0 15px rgba(255,214,107,.76)) drop-shadow(0 16px 20px rgba(2,15,24,.3));
}

body.whack-deluxe #dmg-global-controls {
  z-index: 70 !important;
  top: 18px !important;
  right: 18px !important;
  gap: 7px !important;
}

body.whack-deluxe #dmg-global-controls .dmg-ctl-btn {
  min-width: 64px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.27) !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(6,52,61,.93), rgba(5,29,44,.88)) !important;
  box-shadow: 0 12px 26px rgba(2,18,28,.24), inset 0 1px 0 rgba(255,255,255,.13) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.whack-deluxe #dmg-pause-overlay {
  z-index: 65 !important;
  background: rgba(4,23,35,.58) !important;
  backdrop-filter: blur(12px) saturate(.7);
}

body.whack-deluxe #dmg-pause-overlay .dmg-pause-card {
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(9,72,75,.96), rgba(5,30,46,.96)) !important;
  box-shadow: 0 30px 80px rgba(2,18,28,.4) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}

@media (max-width: 760px) {
  body.whack-deluxe #hud { width: calc(100vw - 20px); top: 60px !important; left: 10px !important; padding: 9px !important; }
  body.whack-deluxe #hud .title { font-size: 15px; }
  .hud-stat { padding: 4px 5px; }
  .hud-stat b { font-size: 12px; }
  body.whack-deluxe #timer-chip { top: auto !important; right: 10px; bottom: 58px; left: auto; min-width: 90px; transform: none; }
  body.whack-deluxe #timer-chip.warn { animation-name: timerPulseMobile; }
  @keyframes timerPulseMobile { to { transform: scale(1.05); } }
  #timer-value { font-size: 18px; }
  body.whack-deluxe #hint { display: none; }
  body.whack-deluxe #dmg-global-controls { top: 10px !important; right: 10px !important; }
  body.whack-deluxe #dmg-global-controls .dmg-ctl-btn { min-width: 48px; min-height: 40px; padding: 0 8px !important; font-size: 8px !important; }
  .menu-specs { grid-template-columns: 1fr; }
  body.whack-deluxe #menu .panel { padding: 24px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #broadcast-lines { display: none; }
  #callout.is-live { animation-duration: 440ms; }
  body.whack-deluxe #timer-chip.warn { animation: none; }
  body.whack-deluxe .chip { transition: none; }
}