/* mash.css — button-masher sequences (fights, the run). Owned by lead. */

.ms {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  /* Transparent: the set plays behind. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200, 16, 46, .14), transparent 56%),
    radial-gradient(100% 74% at 50% 54%, transparent 32%, rgba(4, 3, 8, .74));
  animation: ms-in .4s cubic-bezier(.22, 1, .36, 1) both;
}
.ms-run {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 107, 122, .18), transparent 56%),
    radial-gradient(100% 74% at 50% 54%, transparent 34%, rgba(6, 8, 12, .70));
}
.ms-out { animation: ms-outa .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ms-in   { from { opacity: 0; transform: scale(1.03); } }
@keyframes ms-outa { to   { opacity: 0; transform: scale(.98); } }

/* --- health / pace bars ------------------------------------------- */
.ms-hud {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 18px; padding: 20px 26px 0;
}
.ms-side { display: flex; flex-direction: column; gap: 6px; }
.ms-right { align-items: flex-end; }
.ms-name { font-size: 11px; font-weight: 800; letter-spacing: .28em; color: #cfc6bb; }
.ms-bar {
  height: 13px; width: 100%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  overflow: hidden; transform: skewX(-22deg);
}
.ms-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #ffb020, #ff2d6f);
  transition: width .16s cubic-bezier(.22, 1, .36, 1);
}
.ms-bar-foe i { background: linear-gradient(90deg, #c8102e, #ff6a3d); }
.ms-run .ms-bar i     { background: linear-gradient(90deg, #9fb4c6, #dfe9ee); }
.ms-run .ms-bar-foe i { background: linear-gradient(90deg, #5a6b7a, #9fb4c6); }
.ms-mid { font-size: 10px; letter-spacing: .34em; font-weight: 800; color: rgba(255,255,255,.45); }

/* --- the call ------------------------------------------------------ */
.ms-stage { flex: 1; position: relative; display: grid; place-items: center; }

.ms-prompt {
  display: grid; place-items: center; gap: 8px;
  width: min(280px, 62vw);
}
.ms-pop { animation: ms-pop .26s cubic-bezier(.22, 1, .36, 1); }
@keyframes ms-pop { from { transform: scale(.82); opacity: .4; } }

.ms-glyph {
  font-size: clamp(72px, 15vw, 150px);
  line-height: 1; font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(255, 45, 111, .8), 0 6px 30px rgba(0, 0, 0, .9);
}
.ms-run .ms-glyph { text-shadow: 0 0 40px rgba(159, 180, 198, .8), 0 6px 30px rgba(0, 0, 0, .9); }

.ms-label {
  font-size: 13px; font-weight: 800; letter-spacing: .34em;
  color: #ffd76a; text-shadow: 0 2px 12px #000;
}
.ms-run .ms-label { color: #dfe9ee; }

/* charge = how hard you are hitting it. timer = how long you have left. */
.ms-charge, .ms-timer {
  width: 100%; height: 10px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
}
.ms-charge i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffd76a, #ff2d6f);
  transition: width .06s linear;
}
.ms-timer { height: 4px; border: none; background: rgba(255,255,255,.08); }
.ms-timer i {
  display: block; height: 100%; width: 100%;
  background: rgba(255, 255, 255, .5);
}

/* --- judgement / combo --------------------------------------------- */
.ms-judge {
  position: absolute; top: 16%; left: 0; right: 0; text-align: center;
  font-size: clamp(24px, 4.6vw, 48px); font-weight: 900; letter-spacing: .1em;
  animation: ms-j .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
@keyframes ms-j { from { transform: scale(.7); opacity: 0; } }
.ms-perfect { color: #ffd76a; text-shadow: 0 0 26px rgba(255, 176, 32, .85); }
.ms-good    { color: #9fe8ff; text-shadow: 0 0 20px rgba(0, 229, 255, .6); }
.ms-miss    { color: #ff5c74; text-shadow: 0 0 20px rgba(200, 16, 46, .75); }

.ms-combo {
  position: absolute; bottom: 16%; left: 0; right: 0; text-align: center;
  font-size: 14px; font-weight: 800; letter-spacing: .3em;
  color: rgba(255, 255, 255, .8);
}

/* --- dialogue: ABOVE the prompt, never across it -------------------- */
.ms-sub {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: min(680px, 88vw); text-align: center;
  font-size: 15px; line-height: 1.55;
  color: #efe9e2; text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
  pointer-events: none; opacity: 0;
}
.ms-sub b {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .28em;
  color: #ffb020; margin-bottom: 5px;
}
.ms-sub i { color: #c9c1ba; font-style: italic; }
.ms-sub-in { animation: ms-sub 5.4s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes ms-sub {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

.ms-help {
  text-align: center; padding: 0 0 26px;
  font-size: 10px; letter-spacing: .22em; font-weight: 700;
  color: rgba(255, 255, 255, .34);
}

.ms-hurt { animation: ms-shake .18s; }
@keyframes ms-shake {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-7px, 2px); }
  70% { transform: translate(7px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ms, .ms-out, .ms-judge, .ms-hurt, .ms-pop { animation: none; }
}

/* --- touch pads: phones have no arrow keys ------------------------------- */
.ms-pads {
  display: none;
  gap: 10px;
  justify-content: center;
  padding: 0 14px 26px;
}
.ms-pad {
  flex: 1 1 0;
  max-width: 110px;
  aspect-ratio: 1 / .82;
  display: grid; place-items: center; gap: 2px;
  font-size: 30px; font-weight: 900; line-height: 1;
  color: #efe9e2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-pad.is-hit { background: rgba(255, 45, 111, .55); transform: scale(.94); }
.ms-run .ms-pad.is-hit { background: rgba(159, 180, 198, .55); }

/* Show pads on anything without a fine pointer — phones and tablets. */
@media (hover: none), (pointer: coarse) {
  .ms-pads { display: flex; }
  .ms-help { display: none; }
}


/* --- the run: two arrows, always on screen -------------------------------- */
/*
 * The run is a left/right cadence, so it gets exactly two pads instead of the fight's
 * four — drawing SPRAWL and CLINCH there put two buttons on screen that were never the
 * right answer and cost health when pressed. These show on desktop too: they are the
 * sequence's interface, not a touch fallback.
 */
.ms-pad b { display: block; font-size: 1em; line-height: 1; }
.ms-pad span {
  display: block;
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  color: rgba(255, 255, 255, .5);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ms-pad.is-hit span { color: rgba(255, 255, 255, .85); }

.ms-pads-duo {
  display: flex !important;          /* beats the coarse-pointer-only default */
  gap: 22px;
  justify-content: center;
  padding: 0 18px 30px;
}
.ms-pads-duo .ms-pad {
  max-width: 168px;
  aspect-ratio: 1 / .62;
  font-size: clamp(34px, 7vw, 54px);
  border-color: rgba(223, 233, 238, .34);
  background: rgba(223, 233, 238, .06);
}
.ms-pads-duo .ms-pad span { font-size: 10px; letter-spacing: .24em; }

/* The foot you owe next, lit. Set from the glyph the prompt is showing. */
.ms-pads-duo .ms-pad.is-next {
  border-color: rgba(223, 233, 238, .85);
  background: rgba(223, 233, 238, .16);
  box-shadow: 0 0 26px rgba(159, 180, 198, .3);
}

/* With real buttons on screen the keyboard legend is redundant on touch, but keep it
   for desktop players who would rather use the arrow keys. */
@media (hover: none), (pointer: coarse) {
  .ms-run .ms-help { display: none; }
}