/* ==========================================================================
   PvP Online (1v1) + Team Battle (Red vs Blue)
   Everything is scoped to the four multiplayer screens.
   ========================================================================== */

#screen-pvp,
#screen-team-lobby,
#screen-pvp-battle,
#screen-team-battle {
  --mp-red: #ff5d6c;
  --mp-red-deep: #c93446;
  --mp-blue: #4d9bff;
  --mp-blue-deep: #2a63c9;
  --mp-me: var(--brand);
  justify-content: flex-start;
  padding: 0;
}

/* ---------- Lobby shell ---------- */
.mp-lobby {
  width: 100%;
  max-width: 560px;
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 28px;
}

.mp-lobby > *, .mp-battle > *, .mp-phase > * { flex-shrink: 0; }
.mp-head { text-align: center; }
.mp-head .mp-back {
  display: block;
  min-width: 0;
  margin: 0 0 6px;
  padding: 9px 14px;
  font-size: .9rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.mp-title {
  font-size: 1.9rem;
  color: var(--brand);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
  line-height: 1.15;
}
.mp-subtitle { color: var(--text-secondary); font-weight: 700; font-size: .95rem; margin-top: 2px; }
.mp-red-text { color: var(--mp-red); }
.mp-blue-text { color: var(--mp-blue); }

/* Step indicator */
.mp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  counter-reset: none;
}
.mp-steps li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
}
.mp-steps li span {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: .8rem;
}
.mp-steps li.done { color: var(--good); border-color: rgba(54, 211, 153, .5); }
.mp-steps li.done span { background: var(--good); color: #0e2a1f; font-size: 0; }
.mp-steps li.done span::before { content: '✓'; font-size: .85rem; }
.mp-steps li.current { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.mp-steps li.current span { background: var(--brand-ink); color: var(--brand); }

/* Status line */
.mp-status {
  min-height: 1.4em;
  text-align: center;
  font-weight: 800;
  color: var(--text-secondary);
}
.mp-status:empty { min-height: 0; margin: -7px 0; }
.mp-status[data-tone="good"] { color: var(--good); }
.mp-status[data-tone="bad"] { color: #ff9aa4; }

.mp-phase { display: flex; flex-direction: column; gap: 14px; width: 100%; }
/* Beat the older screens.css phase rules (narrow, centred, scrolling) */
#screen-pvp .mp-phase, #screen-team-lobby .mp-phase { max-width: none; align-items: stretch; flex: none; overflow: visible; padding: 0; }
#screen-team-lobby .mp-team-controls { display: grid; flex-wrap: nowrap; }
#screen-team-lobby .mp-rosters { display: grid; }

/* Big choice buttons */
.mp-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .25);
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.mp-choice:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.mp-choice:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.mp-choice:disabled { opacity: .5; cursor: not-allowed; }
.mp-choice-quick { background: linear-gradient(150deg, #ff9b3d, #e2531d); }
.mp-choice-friend { background: linear-gradient(150deg, #8b7cff, #5a45d6); }
.mp-choice-team { background: linear-gradient(120deg, var(--mp-red) 0%, #b765c6 50%, var(--mp-blue) 100%); }
.mp-choice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .2);
  font-size: 1.9rem;
}
.mp-choice-text { display: flex; flex-direction: column; gap: 2px; }
.mp-choice-text strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.mp-choice-text small { font-size: .92rem; font-weight: 700; opacity: .92; }

/* Join with a code */
.mp-join-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 2px dashed var(--border);
}
.mp-join-card label { font-weight: 800; color: var(--text-primary); }
.mp-join-row { display: flex; gap: 10px; }
.mp-code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border: 3px solid var(--border);
  border-radius: 14px;
  background: #111a27;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-align: center;
  text-transform: uppercase;
}
.mp-code-input::placeholder { color: #4a5b74; }
.mp-code-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(202, 238, 147, .2); }
.btn.mp-join-btn { min-width: 0; padding: 0 22px; font-family: var(--font-display); font-size: 1.15rem; }

.mp-rules {
  list-style: none;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: .9rem;
}

/* Empty state */
.mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  border-radius: 22px;
  background: var(--surface);
  border: 2px solid var(--border);
  text-align: center;
}
.mp-empty h3 { font-size: 1.5rem; color: var(--brand); }
.mp-empty p { color: var(--text-secondary); font-weight: 700; max-width: 32ch; }
.mp-empty-egg { font-size: 4rem; animation: mp-wobble 2.4s ease-in-out infinite; }

.btn.mp-big { min-width: 0; width: 100%; padding: 16px 18px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.btn.room-primary:disabled { filter: grayscale(.6); }

/* Waiting room */
.mp-wait-stage {
  position: relative;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mp-wait-stage::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 120px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, .45), transparent 70%);
}
.mp-wait-monster { transform: scale(1.3); transform-origin: bottom center; margin-bottom: 14px; z-index: 1; animation: mp-look 3s ease-in-out infinite; }
.mp-wait-bubble {
  position: absolute;
  top: 0;
  left: calc(50% + 40px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #2a3345;
  font-family: var(--font-display);
  font-size: 1.5rem;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  animation: mp-float 1.6s ease-in-out infinite;
}
.mp-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 3px solid var(--brand);
  text-align: center;
}
.mp-code-box p { font-weight: 800; color: var(--text-secondary); }
.mp-code {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 16vw, 4.2rem);
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--brand);
  text-shadow: 0 4px 0 rgba(0, 0, 0, .4);
  user-select: all;
}
.mp-code-box-slim { padding: 12px; gap: 6px; }
.mp-code-box-slim .mp-code { font-size: clamp(2.2rem, 12vw, 3rem); }
.mp-code-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; }
.mp-count { font-weight: 800; color: var(--text-primary); }
.btn.mp-copy { min-width: 0; padding: 10px 18px; background: var(--surface-2); border: 2px solid var(--border); font-size: 1rem; }
.mp-waiting-text { text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
.mp-dots::after { content: '…'; display: inline-block; width: 1.2em; text-align: left; animation: mp-blink 1.2s steps(1) infinite; }
.btn.mp-cancel { align-self: center; min-width: 0; padding: 10px 24px; background: var(--surface-2); border: 2px solid var(--border); }

/* Monster picker */
.mp-versus-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}
.mp-versus-strip b { font-family: var(--font-display); font-weight: 400; color: #ffd166; font-size: 1.2rem; }
.mp-me-tag, .mp-opp-tag { padding: 5px 12px; border-radius: 999px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-me-tag { background: var(--brand); color: var(--brand-ink); }
.mp-opp-tag { background: var(--mp-red); color: #fff; }
.mp-phase-title { font-family: var(--font-display); font-size: 1.35rem; text-align: center; }
.mp-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.mp-pick-grid.locked { opacity: .6; pointer-events: none; }
.mp-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  border: 3px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.mp-pick-card:hover { transform: translateY(-2px); border-color: #5b6f8e; }
.mp-pick-card.selected { border-color: var(--brand); background: linear-gradient(170deg, #34502f, var(--surface)); box-shadow: 0 0 0 3px rgba(202, 238, 147, .25), 0 4px 0 rgba(0, 0, 0, .3); }
.mp-pick-card.selected::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-family: var(--font-display);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.mp-pick-sprite { height: 78px; display: flex; align-items: flex-end; justify-content: center; }
.mp-pick-sprite > .monster { scale: none; } /* same size in the picker so cards line up */
.mp-partner-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ffd166;
  color: #3a2500;
  font-size: .68rem;
  font-weight: 900;
}
.mp-pick-name { font-family: var(--font-display); font-size: 1rem; text-align: center; line-height: 1.1; }
.mp-pick-stats { white-space: nowrap; font-size: .72rem; font-weight: 800; color: var(--text-secondary); }
.mp-opp-status { text-align: center; font-weight: 800; color: #ffd166; min-height: 1.3em; }

/* Mini monster avatars (rosters) */
.mp-avatar {
  flex: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3b4d69, #1a2536);
  border: 2px solid rgba(255, 255, 255, .18);
  overflow: hidden;
}
.mp-avatar-inner { position: absolute; left: 50%; bottom: 2px; width: 60px; height: 60px; margin-left: -30px; transform: scale(.62); transform-origin: bottom center; }
.mp-avatar .monster { animation: none; scale: none; }
.mp-sprite-empty {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 2.4rem;
}
.mp-avatar-big { width: 64px; height: 64px; }
.mp-avatar-big .mp-avatar-inner { transform: scale(.85); bottom: 3px; }

/* ---------- Team lobby ---------- */
.mp-me-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 3px solid var(--mp-red);
}
.mp-me-card[data-team="1"] { border-color: var(--mp-blue); }
.mp-me-team { font-family: var(--font-display); font-size: 1.1rem; }
.mp-me-monster { color: var(--text-secondary); font-weight: 800; }
.mp-team-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-team-controls .btn { min-width: 0; padding: 13px 10px; font-size: 1rem; }
.btn.mp-pick-btn { background: linear-gradient(150deg, #36d399, #1f9d6c); }
.btn.mp-switch-btn { background: linear-gradient(150deg, var(--mp-blue), var(--mp-blue-deep)); }
.btn.mp-switch-btn[data-to="0"] { background: linear-gradient(150deg, var(--mp-red), var(--mp-red-deep)); }

.mp-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-roster {
  min-width: 0;
  padding: 10px;
  border-radius: 18px;
  background: var(--surface);
  border-top: 6px solid var(--mp-red);
}
.mp-roster-blue { border-top-color: var(--mp-blue); }
.mp-roster h3 { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; margin-bottom: 8px; }
.mp-roster-red h3 { color: var(--mp-red); }
.mp-roster-blue h3 { color: var(--mp-blue); }
.mp-roster-count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: .9rem;
  text-align: center;
}
.mp-roster-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.mp-roster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-2);
  opacity: .75;
}
.mp-roster-row.ready { opacity: 1; }
.mp-roster-row.me { outline: 2px solid var(--brand); }
.mp-roster-row .mp-avatar { width: 38px; height: 38px; }
.mp-roster-row .mp-avatar-inner { transform: scale(.52); }
.mp-roster-info { min-width: 0; }
.mp-roster-name { font-weight: 900; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-roster-monster { font-size: .74rem; font-weight: 800; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-roster-row.ready .mp-roster-monster { color: var(--good); }
.mp-roster-empty { padding: 10px 4px; color: var(--text-secondary); font-size: .8rem; font-weight: 700; text-align: center; }

.mp-start-area { display: flex; flex-direction: column; gap: 8px; }
.mp-start-hint {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 800;
  text-align: center;
}
.mp-start-hint[data-ready="true"] { color: var(--text-primary); }

/* Picker sheet */
.mp-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(6, 10, 18, .7);
}
.mp-sheet-card {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  animation: mp-rise .25s ease-out;
}
.mp-sheet-card h4 { font-family: var(--font-display); font-size: 1.4rem; text-align: center; }

/* ---------- Battle screens ---------- */
.mp-battle {
  width: 100%;
  max-width: 760px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 58px 12px 14px; /* top room for the help / music buttons */
  overflow-y: auto;
}

.mp-arena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  padding: 12px 10px 8px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(202, 238, 147, .18), transparent 70%),
    linear-gradient(180deg, #2b3f63 0%, #1f2f49 60%, #1a2a24 100%);
  border: 2px solid var(--border);
  overflow: hidden;
}
.mp-fighter { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mp-fighter-card {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(10, 16, 28, .55);
  border: 2px solid var(--mp-me);
}
.mp-fighter-opp .mp-fighter-card { border-color: var(--mp-red); }
.mp-fighter-who {
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mp-me);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-fighter-opp .mp-fighter-who { color: #ff9aa4; }
.mp-fighter-name { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lv { font-family: var(--font-body); font-weight: 800; font-size: .78rem; color: var(--text-secondary); }

.mp-hp {
  height: 14px;
  margin-top: 6px;
  border-radius: 999px;
  background: #0d1420;
  border: 2px solid rgba(255, 255, 255, .15);
  overflow: hidden;
}
.mp-hp-big { height: 20px; }
.mp-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #5ef0a6, #20b56b);
  transition: width .6s ease, background .3s ease;
}
.mp-hp-fill.mp-hp-mid { background: linear-gradient(180deg, #ffd166, #e79b1c); }
.mp-hp-fill.mp-hp-low { background: linear-gradient(180deg, #ff8a8a, #e23b4c); }
.mp-hp-text { display: block; margin-top: 3px; font-size: .78rem; font-weight: 900; color: var(--text-secondary); }

.mp-stage {
  position: relative;
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mp-stage::before {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 110px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, .5), transparent 70%);
}
.mp-sprite { position: relative; z-index: 1; margin-bottom: 12px; transform: scale(1.3); transform-origin: bottom center; }
.mp-sprite-flip { transform: scale(-1.3, 1.3); }
/* Evolution size (scale) grows from the feet so big monsters stay on the ground */
.mp-sprite .monster, .mp-wait-monster .monster, .mp-pick-sprite .monster { transform-origin: bottom center; }
.mp-stage .mp-dmg { left: 50%; top: 0; margin-left: -.8em; font-size: 1.9rem; color: #ff5d6c; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }

.mp-answered-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd166;
  color: #3a2500;
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
  animation: mp-pop .35s ease-out;
}
.mp-answered-me { background: var(--brand); color: var(--brand-ink); }

.mp-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffd166, #ff8a3d);
  color: #3a1d00;
  font-family: var(--font-display);
  font-size: 1rem;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
}

.mp-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  max-width: 90%;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10, 16, 28, .9);
  border: 2px solid #ffd166;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .2s ease, transform .2s ease;
}
.mp-banner.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.mp-controls { display: flex; flex-direction: column; gap: 10px; }

/* Countdown bar */
.mp-timer { display: flex; align-items: center; gap: 10px; }
.mp-timer-track {
  flex: 1;
  height: 16px;
  border-radius: 999px;
  background: #0d1420;
  border: 2px solid var(--border);
  overflow: hidden;
}
.mp-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #36d399, var(--brand));
  transition: width .2s linear, background .3s ease;
}
.mp-timer-text { flex: none; min-width: 64px; font-family: var(--font-display); font-size: 1.15rem; text-align: right; }
.mp-timer-warn .mp-timer-fill { background: linear-gradient(90deg, #ff5d6c, #ffb347); }
.mp-timer-warn .mp-timer-text { color: #ff9aa4; animation: mp-pulse .5s ease-in-out infinite alternate; }
.mp-timer-done .mp-timer-track { display: none; }
.mp-timer-done .mp-timer-text { min-width: 0; flex: 1 1 auto; font-size: 1.05rem; text-align: center; animation: none; color: var(--text-primary); }

.mp-quiz {
  padding: 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
}
.mp-question {
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.mp-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#screen-pvp-battle .quiz-answer,
#screen-team-battle .quiz-answer { width: 100%; cursor: pointer; text-align: left; }
#screen-pvp-battle .quiz-answer.mp-picked,
#screen-team-battle .quiz-answer.mp-picked { opacity: 1; outline: 4px dashed #fff; outline-offset: 2px; }
#screen-pvp-battle .quiz-answer.mp-picked.wrong,
#screen-team-battle .quiz-answer.mp-picked.wrong { outline: none; }

.mp-get-ready {
  padding: 18px;
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #ffd166;
  animation: mp-pulse .8s ease-in-out infinite alternate;
}

/* Round summary */
.mp-round {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  animation: mp-rise .25s ease-out;
}
.mp-round-title { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); }
.mp-round-line { padding: 8px 12px; border-radius: 12px; font-weight: 900; font-size: 1rem; }
.mp-round-good { background: rgba(54, 211, 153, .16); color: #7ff0c0; }
.mp-round-bad { background: rgba(255, 93, 108, .16); color: #ffb0b8; }
.mp-round-slow { background: rgba(255, 209, 102, .16); color: #ffe3a3; }

/* ---------- Team battle ---------- */
.mp-pools { position: relative; display: flex; flex-direction: column; gap: 8px; }
.mp-pool {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 3px solid var(--mp-red);
}
.mp-pool[data-team="1"] { border-color: var(--mp-blue); }
.mp-pool[data-team="0"] { background: linear-gradient(160deg, rgba(255, 93, 108, .18), var(--surface) 60%); }
.mp-pool[data-team="1"] { background: linear-gradient(160deg, rgba(77, 155, 255, .18), var(--surface) 60%); }
.mp-pool-self { box-shadow: 0 0 0 3px rgba(202, 238, 147, .35); }
.mp-pool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mp-pool-label { font-family: var(--font-display); font-size: 1.15rem; }
.mp-pool .mp-hp-text { margin: 0; font-size: .9rem; color: var(--text-primary); }
.mp-pool-hit { animation: mp-hit .45s ease-out; }
.mp-pool .mp-dmg-pool { right: 16px; top: 6px; font-size: 1.8rem; color: #ff5d6c; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.mp-vs-team { position: absolute; left: 50%; top: 50%; z-index: 2; margin: -22px 0 0 -22px; }

.mp-pool-roster { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.mp-roster-slot { position: relative; display: flex; flex-direction: column; align-items: center; width: 56px; }
.mp-roster-slot .mp-avatar { width: 44px; height: 44px; transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease; }
.mp-slot-name { max-width: 56px; font-size: .68rem; font-weight: 900; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-roster-slot.me .mp-slot-name { color: var(--brand); }
.mp-roster-slot.me .mp-avatar { border-color: var(--brand); }
.mp-slot-mark {
  position: absolute;
  top: -4px;
  right: 2px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.mp-roster-slot.answered .mp-slot-mark { display: grid; background: #ffd166; color: #3a2500; }
.mp-roster-slot.answered .mp-slot-mark::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%226.3%22%20y%3D%225.6%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%222.6%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221.5%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%2212.7%22%20y%3D%223.4%22%20width%3D%223%22%20height%3D%2210.6%22%20rx%3D%221.5%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%2215.9%22%20y%3D%225.8%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%223.6%22%20y%3D%2211%22%20width%3D%223%22%20height%3D%227.6%22%20rx%3D%221.5%22%20transform%3D%22rotate(-38%205.1%2014.8)%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.3%2011H18.9V15.6C18.9%2019%2016.6%2021.4%2013.2%2021.4H11.6C8.4%2021.4%206.3%2019%206.3%2016Z%22%20fill%3D%22%231d1433%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%226.3%22%20y%3D%225.6%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%23ffdd00%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%222.6%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221.5%22%20fill%3D%22%23ffdd00%22%2F%3E%3Crect%20x%3D%2212.7%22%20y%3D%223.4%22%20width%3D%223%22%20height%3D%2210.6%22%20rx%3D%221.5%22%20fill%3D%22%23ffdd00%22%2F%3E%3Crect%20x%3D%2215.9%22%20y%3D%225.8%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%20fill%3D%22%23ffdd00%22%2F%3E%3Crect%20x%3D%223.6%22%20y%3D%2211%22%20width%3D%223%22%20height%3D%227.6%22%20rx%3D%221.5%22%20transform%3D%22rotate(-38%205.1%2014.8)%22%20fill%3D%22%23ffdd00%22%2F%3E%3Cpath%20d%3D%22M6.3%2011H18.9V15.6C18.9%2019%2016.6%2021.4%2013.2%2021.4H11.6C8.4%2021.4%206.3%2019%206.3%2016Z%22%20fill%3D%22%23ffdd00%22%2F%3E%3Cpath%20d%3D%22M9.3%209.6V11.6M12.5%209V11.6M15.7%209.6V11.6%22%20stroke%3D%22%231d1433%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%2210.2%22%20y%3D%224%22%20width%3D%221.2%22%20height%3D%224%22%20rx%3D%22.6%22%20fill%3D%22%23f8fafc%22%20opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; font-size: .7rem; }
.mp-roster-slot.right .mp-slot-mark { display: grid; background: var(--good); color: #0e2a1f; }
.mp-roster-slot.wrong .mp-slot-mark { display: grid; background: var(--bad); color: #fff; }
.mp-roster-slot.right .mp-avatar { border-color: var(--good); box-shadow: 0 0 0 3px rgba(54, 211, 153, .35); animation: mp-pop .35s ease-out; }
.mp-roster-slot.wrong .mp-avatar { filter: grayscale(.6) brightness(.8); }
.mp-roster-slot.left { opacity: .35; }
.mp-answer-count { text-align: center; font-weight: 900; color: #ffd166; min-height: 1.2em; }
.mp-answer-count:empty { display: none; }

/* ---------- Result overlay ---------- */
.mp-result {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 18, .72);
  animation: mp-fade .3s ease-out;
}
.mp-result-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px 20px;
  border-radius: 28px;
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 3px solid var(--brand);
  text-align: center;
  overflow: hidden;
  animation: mp-pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
.mp-result[data-tone="lose"] .mp-result-card { border-color: #8aa0c0; }
.mp-result[data-tone="draw"] .mp-result-card { border-color: #ffd166; }
.mp-result-emoji { font-size: 4.2rem; line-height: 1; animation: mp-bounce 1.2s ease-in-out infinite; }
.mp-result-card h2 { font-size: 2.2rem; color: var(--brand); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.mp-result[data-tone="lose"] h2 { color: #cfe0ff; }
.mp-result[data-tone="draw"] h2 { color: #ffd166; }
.mp-result-sub { color: var(--text-secondary); font-weight: 800; }
.mp-gems {
  padding: 8px 18px;
  border-radius: 999px;
  background: #16243a;
  border: 2px solid #5ad1e6;
  color: #bff4ff;
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.mp-result-actions { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.btn.mp-home { min-width: 0; width: 100%; background: var(--surface-2); border: 2px solid var(--border); }

.mp-confetti { position: absolute; inset: 0; pointer-events: none; }
.mp-result:not([data-tone="win"]) .mp-confetti { display: none; }
.mp-confetti i {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: var(--brand);
  animation: mp-confetti 2.6s linear infinite;
}
.mp-confetti i:nth-child(1) { left: 6%; animation-delay: 0s; background: var(--answer-a); }
.mp-confetti i:nth-child(2) { left: 14%; animation-delay: .9s; background: var(--answer-b); }
.mp-confetti i:nth-child(3) { left: 22%; animation-delay: .4s; background: var(--answer-c); }
.mp-confetti i:nth-child(4) { left: 31%; animation-delay: 1.5s; background: var(--answer-d); }
.mp-confetti i:nth-child(5) { left: 40%; animation-delay: .2s; }
.mp-confetti i:nth-child(6) { left: 49%; animation-delay: 1.1s; background: var(--answer-a); }
.mp-confetti i:nth-child(7) { left: 58%; animation-delay: .6s; background: var(--answer-b); }
.mp-confetti i:nth-child(8) { left: 66%; animation-delay: 1.8s; background: var(--answer-c); }
.mp-confetti i:nth-child(9) { left: 74%; animation-delay: .3s; background: var(--answer-d); }
.mp-confetti i:nth-child(10) { left: 82%; animation-delay: 1.3s; }
.mp-confetti i:nth-child(11) { left: 90%; animation-delay: .7s; background: var(--answer-a); }
.mp-confetti i:nth-child(12) { left: 96%; animation-delay: 2s; background: var(--answer-b); }

/* ---------- Animations ---------- */
@keyframes mp-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } }
@keyframes mp-float { 50% { transform: translateY(-8px); } }
@keyframes mp-look { 0%, 100% { translate: 0 0; } 30% { translate: -6px 0; } 70% { translate: 6px 0; } }
@keyframes mp-blink { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
@keyframes mp-pop { 0% { transform: translateX(var(--mp-pop-x, 0)) scale(.6); opacity: 0; } 100% { transform: translateX(var(--mp-pop-x, 0)) scale(1); opacity: 1; } }
.mp-answered-badge { --mp-pop-x: -50%; }
@keyframes mp-rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes mp-fade { from { opacity: 0; } }
@keyframes mp-pulse { from { opacity: 1; } to { opacity: .6; } }
@keyframes mp-bounce { 50% { transform: translateY(-8px) scale(1.05); } }
@keyframes mp-hit { 20% { transform: translateX(-6px); filter: brightness(1.5); } 50% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
@keyframes mp-confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: .2; } }

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  .mp-lobby { max-width: 620px; padding-top: 24px; }
  .mp-pick-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .mp-battle { padding-top: 64px; gap: 14px; }
  .mp-stage { height: 170px; }
  .mp-sprite { transform: scale(1.7); }
  .mp-sprite-flip { transform: scale(-1.7, 1.7); }
  .mp-question { font-size: 1.45rem; }
  #screen-pvp-battle .quiz-answer, #screen-team-battle .quiz-answer { min-height: 76px; }
  .mp-pools { flex-direction: row; }
  .mp-pools .mp-pool { flex: 1; }
}

@media (max-width: 360px) {
  .mp-answers { grid-template-columns: 1fr; }
  .mp-steps li { font-size: .7rem; }
  .mp-team-controls, .mp-rosters { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-empty-egg, .mp-wait-monster, .mp-wait-bubble, .mp-dots::after, .mp-get-ready,
  .mp-timer-warn .mp-timer-text, .mp-result-emoji, .mp-confetti i, .mp-roster-slot.right .mp-avatar,
  .mp-answered-badge, .mp-round, .mp-result, .mp-result-card, .mp-sheet-card, .mp-pool-hit {
    animation: none !important;
  }
  .mp-confetti { display: none; }
  .mp-hp-fill, .mp-timer-fill, .mp-banner, .mp-choice, .mp-pick-card { transition: none !important; }
  #screen-pvp-battle .monster, #screen-team-battle .monster, #screen-pvp .monster, #screen-team-lobby .monster { animation: none !important; }
  #screen-pvp-battle .monster.faint { opacity: .25; }
  .mp-dmg { animation: none; }
}