/* SLOP RUSH — the microgame stage inside the monitor (desk main area, bottom bar hidden: 720×396). */
.rx {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-family: var(--sd-font); color: var(--sd-ink);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.rx[hidden] { display: none !important; }

/* top strip: wave label · result pips · combo */
.rx-hud { height: 34px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  font: 800 13px/1 var(--sd-font); letter-spacing: .14em; color: var(--sd-ink3); }
.rx-hud-wave { color: #fff; }
.rx-hud-pips { display: flex; gap: 6px; }
.rx-pip { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.rx-pip.now { background: #fff; box-shadow: 0 0 10px #fff; animation: rx-pulse .8s ease-in-out infinite; }
.rx-pip.win { background: var(--sd-ok); box-shadow: none; }
.rx-pip.lose { background: var(--sd-flag); box-shadow: none; }
.rx-pip.false { background: var(--sd-warn); box-shadow: none; }
.rx-hud-combo { margin-left: auto; color: var(--sd-warn); letter-spacing: .08em; }
.rx-hud-combo.hot { color: #fff; text-shadow: 0 0 12px #ffc24b, 0 0 2px #ff5c9a; animation: rx-pulse .6s ease-in-out infinite; }
@keyframes rx-pulse { 50% { transform: scale(1.12); } }

.rx-arena { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 12px; }

/* the burning fuse */
.rx-fuse { position: relative; height: 12px; flex: none; margin: 2px 0 10px; border-radius: 6px; background: rgba(255,255,255,.1); }
.rx-fuse-fill { position: absolute; inset: 0; border-radius: 6px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rx-c, #a78bfa), #ffd36b); box-shadow: 0 0 14px var(--rx-c, #a78bfa); }
.rx-fuse-spark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #ffd36b 40%, rgba(255,120,60,0) 70%); filter: blur(.3px); }
.rx-fuse.warn .rx-fuse-fill { background: linear-gradient(90deg, #ff4f74, #ffd36b); box-shadow: 0 0 18px #ff4f74; }
.rx-fuse.warn { animation: rx-shake .12s linear infinite; }
@keyframes rx-shake { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }

/* where a game builds itself: about 692×330 */
.rx-play { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden;
  background: rgba(10, 6, 26, .42); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rx-c, #a78bfa) 45%, transparent); }
.rx-play.own { touch-action: none; }
.rx-frozen .rx-play { filter: saturate(.4) brightness(.8); }
.rx-frozen .rx-fuse-spark { animation: none; opacity: .5; }

/* the shouted instruction / stamp / intro card */
.rx-slam { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, rgba(10,6,26,.88), rgba(10,6,26,.7)); }
.rx-slam[hidden] { display: none !important; }
.rx-slam > * { transform: scale(.6) rotate(-4deg); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.6, .4, 1), opacity .12s; }
.rx-slam.in > * { transform: none; opacity: 1; }
.rx-slam.out > * { transform: scale(1.25); opacity: 0; transition-duration: .14s; }
.rx-slam-big { font: 900 64px/1 var(--sd-font); letter-spacing: -.02em; color: #fff;
  text-shadow: 3px 3px 0 #ff5c9a, -2px -2px 0 #7c5cff, 0 0 30px rgba(255,92,154,.5); }
.rx-slam-k { font: 800 16px/1 var(--sd-font); letter-spacing: .3em; color: var(--sd-warn); margin-bottom: 10px; }
.rx-slam-s { margin-top: 12px; font: 600 20px/1.2 var(--sd-font); color: var(--sd-ink2); }
.rx-slam-f { margin-bottom: 10px; padding: 6px 14px; border-radius: 999px; font: 800 16px/1 var(--sd-font); letter-spacing: .06em;
  background: color-mix(in srgb, var(--rx-c) 30%, transparent); box-shadow: inset 0 0 0 2px var(--rx-c); color: #fff; }
.rx-slam.verb .rx-slam-big { font-size: 58px; }
.rx-slam.verb.long .rx-slam-big { font-size: 44px; max-width: 640px; }
.rx-slam.stamp { background: rgba(10,6,26,.45); }
.rx-stamp-i { font: 900 92px/1 var(--sd-font); }
.rx-stamp-t { font: 900 46px/1 var(--sd-font); letter-spacing: .08em; padding: 4px 18px; border: 5px solid currentColor; border-radius: 12px; transform: rotate(-6deg); }
.rx-slam.stamp.win { color: var(--sd-ok); }
.rx-slam.stamp.lose { color: var(--sd-flag); }
.rx-slam.stamp.false { color: var(--sd-warn); }
.rx-slam.stamp.win > .rx-stamp-t { transform: rotate(-6deg); }
.rx-slam.outro.perfect .rx-slam-big { color: #ffd36b; }

/* floating "+1" style bursts a game can drop at a point */
.rx-burst { position: absolute; z-index: 10; transform: translate(-50%, -50%); pointer-events: none;
  font: 900 30px/1 var(--sd-font); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 14px var(--rx-c, #a78bfa);
  animation: rx-burst .7s ease-out forwards; }
.rx-burst.bad { color: var(--sd-flag); }
.rx-burst.good { color: var(--sd-ok); }
@keyframes rx-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(.7); } 30% { transform: translate(-50%, -80%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

/* shared bits games can use */
.rx-card { border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.rx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font: 700 15px/1 var(--sd-font); }
.rx-big-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 64px; padding: 0 22px; border-radius: 18px;
  font: 900 26px/1 var(--sd-font); letter-spacing: .04em; color: #fff; cursor: pointer; background: var(--sd-grad);
  box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.rx-big-btn:active, .rx-big-btn.down { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.rx-shake { animation: rx-shake .12s linear 3; }

/* Friday boss wave */
.rx.rx-boss .rx-hud-wave { color: #ff4f74; text-shadow: 0 0 10px rgba(255,79,116,.6); }
.rx-slam.boss { background: radial-gradient(70% 70% at 50% 50%, rgba(60,0,20,.92), rgba(10,6,26,.8)); }
.rx-slam.boss .rx-slam-k { color: #ff4f74; animation: rx-pulse .5s ease-in-out infinite; }
.rx-slam.boss .rx-slam-big { font-size: 56px; text-shadow: 3px 3px 0 #ff4f74, -2px -2px 0 #ffd36b, 0 0 34px rgba(255,79,116,.7); }
.rx.rx-boss .rx-play { box-shadow: inset 0 0 0 2px #ff4f74, 0 0 22px rgba(255,79,116,.25); }