/* Whack-a-Mole (shared bits come from /water/water.css). The booth picture is 1672 × 941. */
.mtv { height: 100vh; overflow: hidden; background: #1a0610; display: grid; place-items: center; }
.mstage {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: url(/art/mole/booths.jpg) center / 100% 100% no-repeat, #300a18;
}
.mstage.inlobby { background-image: url(/art/mole/booths-mallets.jpg); }

/* name sign over each booth's "PLAYER 1" plaque, and the score lights over its "000" */
.mname {
  position: absolute; top: calc(352 / 941 * 100%); transform: translateX(-50%); z-index: 3; min-width: 8.6cqw; max-width: 15cqw;
  padding: .15cqw .8cqw; border-radius: .5cqw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 900 1.05cqw/1.45 'Nunito', sans-serif; color: #fff; box-shadow: inset 0 0 0 .12cqw rgba(255,255,255,.55), 0 .2cqw .5cqw rgba(0,0,0,.4);
  opacity: 0; transition: opacity .3s;
}
.mname.on { opacity: 1; }
.mname.b0 { background: linear-gradient(#ff4a5c, #c3122a); } .mname.b1 { background: linear-gradient(#4b86ff, #1c4fc4); }
.mname.b2 { background: linear-gradient(#36c765, #138a3c); } .mname.b3 { background: linear-gradient(#ffc23d, #d48a06); color: #3a2200; }
.mled {
  position: absolute; top: calc(388 / 941 * 100%); transform: translateX(-50%); z-index: 3; width: calc(128 / 1672 * 100%); height: calc(42 / 941 * 100%);
  display: grid; place-items: center; border-radius: .3cqw; background: #160404; box-shadow: inset 0 0 .5cqw #000;
  font: 900 2.05cqw/1 'Orbitron', monospace; letter-spacing: .12em; color: #ff3b2f; text-shadow: 0 0 .5cqw #ff2a1a, 0 0 1.2cqw #ff2a1a;
}
.mled.lead { color: #ffe14d; text-shadow: 0 0 .5cqw #ffb000, 0 0 1.2cqw #ffb000; }
.mempty {
  position: absolute; top: calc(470 / 941 * 100%); height: calc(190 / 941 * 100%); z-index: 4; display: grid; place-items: center;
  border-radius: 1cqw; background: rgba(10,4,20,.55); font: 800 1.2cqw 'Nunito', sans-serif; color: #fff; text-align: center;
}

/* the moles, standing in the booth's holes */
.mhole { position: absolute; z-index: 2; aspect-ratio: 1; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; }
.mhole .m { width: 100%; transform-origin: 50% 85%; }
.mhole.pop .m { animation: molepop .18s ease-out; }
@keyframes molepop { from { transform: translateY(14%) scaleY(.55); } }
.mhole .fx { position: absolute; left: 50%; bottom: 80%; width: 80%; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.mhole.hit .fx, .mhole.ouch .fx { animation: plus .9s ease-out; }
@keyframes plus { 0% { opacity: 0; transform: translate(-50%, 20%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.mhole.hit::after, .mhole.ouch::after {
  content: ''; position: absolute; left: 50%; bottom: 25%; width: 70%; aspect-ratio: 1; transform: translateX(-10%) rotate(-30deg);
  background: url(/art/mole/mallet-up.png) center / contain no-repeat; animation: bonk .35s ease-in forwards; transform-origin: 50% 100%;
}
@keyframes bonk { 0% { transform: translate(10%, -40%) rotate(30deg); opacity: 1; } 60% { transform: translate(-10%, -10%) rotate(-55deg); opacity: 1; } 100% { transform: translate(-10%, -10%) rotate(-55deg); opacity: 0; } }

.mcarl { position: absolute; left: .5%; top: 8%; height: 30%; aspect-ratio: 1; z-index: 6; pointer-events: none; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5)); }
.mcarl.boxed { border-radius: 1.2cqw; border: .25cqw solid #ffc53d; height: 24%; filter: none; }
.mbig {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 9; pointer-events: none;
  font: 900 9cqw/1 'Fredoka', sans-serif; color: #ffd23d; -webkit-text-stroke: .35cqw #7a1a00; text-shadow: 0 .6cqw 0 #7a1a00, 0 0 3cqw rgba(255,200,40,.8);
}
.mbig.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.msaid {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 9; padding: .5cqw 1.6cqw; border-radius: 99px; white-space: nowrap;
  background: rgba(40,6,20,.9); border: .2cqw solid #ffc53d; font-weight: 900; font-size: 1.6cqw; color: #fff;
}
.msaid.pop { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }

.mlobby { left: 21% !important; right: 21% !important; top: 7% !important; bottom: 6% !important; align-items: center; text-align: center; z-index: 11; }
.mlobby .btn { align-self: center; }
.mlegend { display: flex; gap: 1cqw; justify-content: center; flex-wrap: wrap; }
.mlegend span { display: flex; flex-direction: column; align-items: center; font: 800 1.2cqw 'Fredoka', sans-serif; color: #ffe08a; }
.mlegend span.bad { color: #ff7a7a; }
.mlegend img { width: 5.2cqw; }
.mlobbyps { display: flex; flex-wrap: wrap; gap: .5cqw; justify-content: center; min-height: 2.4cqw; }
.mlobbyps span { padding: .35cqw 1cqw; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 800; font-size: 1.1cqw; }
.mlobbyps span.b0 { box-shadow: inset 0 0 0 .15cqw #ff4a5c; } .mlobbyps span.b1 { box-shadow: inset 0 0 0 .15cqw #4b86ff; }
.mlobbyps span.b2 { box-shadow: inset 0 0 0 .15cqw #36c765; } .mlobbyps span.b3 { box-shadow: inset 0 0 0 .15cqw #ffc23d; }
.mbotrow { justify-content: center; gap: 1cqw; }
.mwin { left: 27% !important; right: 27% !important; top: 12% !important; bottom: 12% !important; align-items: center; text-align: center; z-index: 11; }
.mwin .btn { align-self: center; }
.mwinimg { width: 9cqw; animation: spinstar 2.6s ease-in-out infinite; }
@keyframes spinstar { 50% { transform: rotate(8deg) scale(1.06); } }
.mwho { display: flex; flex-direction: column; gap: .4cqw; font-size: 1.3cqw; font-weight: 800; }
.mtv .row { display: flex; gap: 1cqw; justify-content: center; }

/* ======================================================================================
   the phone
   ====================================================================================== */
.mphone { background: radial-gradient(120% 80% at 50% 0%, #7a1530 0%, #3a0818 60%, #1a0610 100%) fixed; min-height: 100vh; overscroll-behavior: none; }
.mphone main { max-width: 520px; margin: 0 auto; padding: 12px 14px 28px; }
.mphone header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mphone .me { font-weight: 800; }
.mphone .myscore { font: 900 1.2rem 'Orbitron', monospace; padding: 4px 12px; border-radius: 10px; background: #160404; color: #ff3b2f; text-shadow: 0 0 8px #ff2a1a; letter-spacing: .1em; }
.mphone .pcard { text-align: center; display: flex; flex-direction: column; gap: 12px; }
.mphone h1 { margin: 6px 0 0; font-size: 1.6rem; line-height: 1.15; }

/* your booth's board: 6 holes, staggered like the real booth */
.board {
  position: relative; width: 100%; aspect-ratio: 1 / 1.08; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 40%, #3a7bff 0%, #1d47b8 70%, #142f86 100%); box-shadow: inset 0 0 0 5px #ffc53d, 0 10px 30px rgba(0,0,0,.5);
}
.board .ph { position: absolute; width: 38%; aspect-ratio: 1.12; transform: translate(-50%, -87%); pointer-events: none; }
.board .ph .h, .board .ph .m { position: absolute; left: 0; bottom: 0; width: 100%; }
.board .ph .m { transform-origin: 50% 85%; }
.board .ph.pop .m { animation: molepop .16s ease-out; }
.board .ph .fx { position: absolute; left: 50%; bottom: 95%; width: 58%; transform: translateX(-50%); opacity: 0; }
.board .ph.hit .fx, .board .ph.ouch .fx, .board .ph.miss .fx { animation: plus .8s ease-out; }
.board .mallet { position: absolute; width: 30%; pointer-events: none; transform: translate(-30%, -85%) rotate(28deg); transform-origin: 30% 85%; z-index: 5; transition: transform .06s; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.board .mallet.down { transform: translate(-30%, -85%) rotate(-40deg); }
.board .mallet[hidden] { display: none; }
.mphone .stand { display: flex; flex-direction: column; gap: 6px; }
.mphone .stand div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-weight: 800; }
.mphone .stand div.me { outline: 2px solid #ffc53d; }
.count { font: 900 6rem/1 'Fredoka', sans-serif; color: #ffd23d; -webkit-text-stroke: 3px #7a1a00; }

/* the "−50" / "−10" that pops up with a grumpy hit or a miss */
.mhole .fxt, .board .ph .fxt { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: 'Fredoka', sans-serif; font-weight: 700; color: #ff2d2d; -webkit-text-stroke: .08em #fff; paint-order: stroke; text-shadow: 0 .06em .12em rgba(0,0,0,.6); }
.mhole .fxt { bottom: 125%; font-size: 2.4cqw; }
.board .ph .fxt { bottom: 140%; font-size: 1.9rem; }
.mhole.ouch .fxt, .board .ph.ouch .fxt, .board .ph.miss .fxt { animation: plus .9s ease-out; }
.mhole.ouch .fx { width: 55%; }
/* a big lobby (up to 50 names) */
.mlobbyps.many { gap: .25cqw; max-height: 9.5cqw; overflow: hidden; }
.mlobbyps.many span { font-size: .72cqw; padding: .15cqw .5cqw; }