/* Multijugador de GRIMBROOD (mp.js): botón de la portada, ventana Multijugador y barra del duelo sobre la arena.
   Mismos tonos que el resto del juego; el cian de la casa (#00f2cf) marca lo que es en línea. */

/* portada */
#title #t-mp { display: grid; place-items: center; gap: 2px; min-height: 46px; padding: 6px 12px; border-color: rgba(0,242,207,.45); background: rgba(0,40,44,.55); }
#title #t-mp:hover { background: rgba(0,70,74,.7); border-color: #00f2cf; }
#title #t-mp small { display: block; font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8ff5e6; opacity: .9; }
@media (max-height: 700px) and (max-width: 420px) { #title #t-mp small { display: none; } #title #t-mp { min-height: 44px; } }
/* pantallas bajas (teléfono acostado): Multijugador comparte fila con Jugar, así la portada no crece */
@media (max-height: 520px) {
  #title .tbtns button.big { grid-column: 1 / 3; }
  #title .tbtns #t-mp { grid-column: 3; min-height: 50px; padding: 4px 6px; }
  #title #t-mp small { display: none; }
  #title:has(#t-new[hidden]) .tbtns button.big { grid-column: 1; }
  #title:has(#t-new[hidden]) .tbtns #t-mp { grid-column: 2; }
}

/* ventana */
.mp-modes { margin: 4px 0 12px; }
.mp-modes .mode input { margin: 2px 0 6px; }
.mp-in { width: 100%; max-width: 320px; min-height: 44px; margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: #0b0e13; color: var(--ink); font: 600 16px/1.2 var(--font); }
.mp-in:focus { outline: 2px solid #00f2cf; outline-offset: 1px; border-color: transparent; }
.mp-codein { max-width: none; text-align: center; font: 700 22px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; }
.mp-codein::placeholder { color: rgba(255,255,255,.22); }
.mp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.mp-cta small { font-size: 12px; opacity: .75; }
.mp-cta button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--accent); color: #0b0e13; cursor: pointer; font: 700 14px/1 var(--font); }
.mp-cta button.alt, .rt button.alt { background: rgba(255,255,255,.12); color: var(--ink); }
.mp-cta button:disabled { opacity: .45; cursor: default; }
.mp-cta button.mp-big { min-height: 54px; padding: 12px 22px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7700f4, #00f2cf); box-shadow: 0 8px 26px rgba(0,242,207,.25); }
.mp-team .chips, .mp-fight .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip.mp-cr em { font-style: normal; opacity: .7; margin-left: 3px; }
.chip.mp-prac { border-style: dashed; opacity: .8; }
.chip.mp-ok { border-color: #5fd6a4; color: #8be8bf; font-weight: 700; }
.chip.mp-bad { border-color: #ff6a4c; color: #ff8a70; font-weight: 700; }
.mp-fight { border-left: 3px solid rgba(255,255,255,.2); }
.mp-fight.win { border-left-color: #5fd6a4; } .mp-fight.lose { border-left-color: #e0607f; } .mp-fight.draw { border-left-color: #e8c05a; }
.mp-fight.win > .tx > b { color: #8be8bf; } .mp-fight.lose > .tx > b { color: #f39ab0; }
.mp-err { border-color: rgba(255,106,76,.55) !important; }
.mp-tabla-wrap { overflow-x: auto; }
.mp-tabla { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mp-tabla th { text-align: left; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.mp-tabla td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mp-tabla td:first-child, .mp-tabla th:first-child { width: 36px; text-align: right; opacity: .8; }
.mp-tabla td:nth-child(3) { font-weight: 800; color: var(--accent); }
.mp-tabla tr.yo td { background: rgba(0,242,207,.08); }
.mp-tabla tr.yo em { font-style: normal; opacity: .7; }
.mp-tabla tr.gap td { text-align: center; opacity: .5; padding: 2px; }
.mp-room { display: grid; justify-items: center; gap: 6px; padding: 14px 10px 8px; margin-bottom: 10px; border: 1px solid rgba(0,242,207,.35); border-radius: 16px; background: rgba(0,242,207,.05); text-align: center; }
.mp-room > small { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.mp-code { font: 700 clamp(34px, 11vw, 54px)/1.05 var(--mono); letter-spacing: .22em; padding-left: .22em; color: #fff; text-shadow: 0 0 24px rgba(0,242,207,.45); user-select: all; }
.mp-room .mp-cta { justify-content: center; }
.mp-wait { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 10px; font-size: 14px; line-height: 1.4; opacity: .9; text-align: left; }
.mp-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,242,207,.25); border-top-color: #00f2cf; animation: mpspin .9s linear infinite; }
@keyframes mpspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-spin { animation-duration: 3s; } }

/* barra del duelo sobre la arena */
#mp-sync { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; max-width: calc(100vw - 16px);
  padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(9,11,15,.72); font: 700 11px/1.3 var(--mono); letter-spacing: .06em; color: #cfe; pointer-events: auto; }
#mp-sync[hidden] { display: none; }
#mp-sync .okc { color: #5fd6a4; } #mp-sync .warn { color: #ffb36b; }
#mp-sync button { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(0,242,207,.5); background: transparent; color: #8ff5e6; font: 700 11px/1 var(--mono); letter-spacing: .06em; cursor: pointer; }
#mp-sync button::after { content: ""; position: absolute; inset: -6px; }
#mp-sync button { position: relative; }
#battle .bt-endcard .mp-hash { display: block; font: 600 11px/1 var(--mono); opacity: .6; letter-spacing: .08em; }