/* Red local: menú de conexión, lista de salas, lobby y aviso de espera (ver js/net/netplay.js). */
.show-online .screen, .show-connecting .screen, .show-rooms .screen, .show-lobby .screen { background: radial-gradient(ellipse at 20% 0, #182436 0, transparent 55%), #090e19f8; }
.show-netresult .screen { background: radial-gradient(ellipse at center, #08101ad6, #070c17f5); backdrop-filter: blur(6px); align-items: center; justify-content: center; text-align: center; }
.screen.online, .screen.rooms, .screen.lobby { overflow-y: auto; touch-action: pan-y; }
.net-card { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid #2c3b50; border-radius: 14px; background: linear-gradient(145deg, #152033, #0c1422); }
.net-card.center { align-items: center; text-align: center; }
.net-help { margin: 0; color: #a8b7cc; font-size: 13px; line-height: 1.6; }
.net-help b, .net-help code { color: var(--cyan); font-family: inherit; font-weight: 800; }
.net-field { display: flex; flex-direction: column; gap: 6px; }
.net-field span { font: 800 11px var(--font); letter-spacing: .12em; color: #7d8fa8; }
.net-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; border: 1px solid #365851; background: #0a121c; color: #eaf6ff; font: 700 clamp(14px, 2.6vh, 18px) var(--font); letter-spacing: .06em; outline: none; touch-action: manipulation; }
.net-field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px #00f0ff33; }
.net-err { margin: 0; padding: 10px 12px; border-radius: 8px; background: #3a1522; border: 1px solid #7a2a45; color: #ffb4c6; font-size: 12px; line-height: 1.5; }
.btn.room { gap: 12px; }
.btn.room small { color: #7d8fa8; font-size: 11px; letter-spacing: .14em; margin-left: 8px; }
.net-ping { font: 800 11px var(--font); letter-spacing: .1em; color: #7d8fa8; }
.net-ping b { color: var(--cyan); }
.lobby .picks { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 50px); }
.pick.waiting { min-width: clamp(120px, 20vw, 190px); min-height: 160px; justify-content: center; text-align: center; opacity: .8; border-style: dashed; }
.wait-dots { font: 800 14px var(--font); letter-spacing: .14em; color: var(--cyan); animation: net-blink 1.2s ease-in-out infinite; }
.net-hint { margin: 0; align-self: center; color: var(--dim); font: 800 clamp(10px, 2vh, 13px) var(--font); letter-spacing: .08em; text-align: center; }
.stage-pick { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.stage-pick span { display: flex; flex-direction: column; align-items: center; min-width: 190px; }
.stage-pick small { font: 800 10px var(--font); letter-spacing: .16em; color: #7d8fa8; }
.stage-pick b { font: 800 clamp(13px, 2.6vh, 18px) var(--font); letter-spacing: .06em; color: #fff; }
@keyframes net-blink { 50% { opacity: .35; } }

/* mientras se espera al rival en plena partida */
body.net-wait::after { content: "ESPERANDO AL RIVAL…"; position: fixed; z-index: 45; left: 50%; top: 22%; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; background: #05030fcc; border: 2px solid var(--cyan); color: #fff; font: 800 clamp(12px, 2.6vh, 18px) var(--font); letter-spacing: .12em; box-shadow: 0 0 18px var(--cyan); pointer-events: none; animation: net-blink 1s ease-in-out infinite; }

.lobby .pick canvas.prev { height: clamp(84px, 28vh, 160px); width: auto; aspect-ratio: 3 / 4; }
.lobby .hint { margin-top: 6px; }

@media (max-height: 460px) {
  .lobby .bar { margin-bottom: 1vh; }
  .lobby .pick { padding: 6px 12px; }
  .lobby .hint { display: none; }
  .lobby .menu.inline { margin-top: 1vh; }
  .stage-pick span { min-width: 150px; }
  .net-card { padding: 10px 14px; gap: 8px; }
  .net-help { font-size: 11px; line-height: 1.45; }
  .net-field input { padding: 8px 10px; }
  .stage-pick { margin-top: 4px; }
  .pick.waiting { min-height: 120px; }
}

/* SER HOST / SER INVITADO */
.role-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-card.btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: clamp(96px, 26vh, 150px); padding: 14px 12px; text-align: center; border-radius: 14px; }
.role-card .role-ico { font: 400 clamp(26px, 6vh, 44px) system-ui; line-height: 1; }
.role-card b { font: 900 clamp(15px, 3.4vh, 24px) var(--font); letter-spacing: .06em; font-style: italic; }
.role-card small { font: 700 clamp(10px, 1.9vh, 13px) var(--font); letter-spacing: .02em; color: #a8b7cc; line-height: 1.35; }
.role-card.host { border-color: #ffe14d99; background: linear-gradient(145deg, #2a2410, #12100a); }
.role-card.host .role-ico, .role-card.host b { color: #ffe14d; }
.role-card.guest { border-color: #00f0ff88; background: linear-gradient(145deg, #0c2430, #0a121c); }
.role-card.guest .role-ico, .role-card.guest b { color: var(--cyan); }
.net-adv.text-link { align-self: center; font-size: 11px; letter-spacing: .08em; opacity: .85; }
.net-searching { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 0; font: 800 clamp(11px, 2.4vh, 15px) var(--font); letter-spacing: .12em; color: var(--cyan); }
.net-searching.small { padding: 8px 0 0; font-size: 10px; opacity: .8; }
.net-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: net-ping 1.1s ease-out infinite; }
@keyframes net-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.pick.waiting small em { font-style: normal; color: #7d8fa8; letter-spacing: .06em; }
.show-search .screen { background: radial-gradient(ellipse at 20% 0, #182436 0, transparent 55%), #090e19f8; }
.screen.search { overflow-y: auto; touch-action: pan-y; }
@media (max-height: 460px) {
  .role-card.btn { min-height: 84px; padding: 8px; gap: 3px; }
  .role-card small { display: none; }
}

/* ONLINE con código + MISMA WIFI en la misma pantalla */
.net-card.wide { max-width: 860px; }
.net-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.net-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid #2c3b50; border-radius: 12px; background: #0a121c99; min-width: 0; }
.net-box.web { border-color: #00f0ff55; }
.net-box .net-sub { margin: 0; }
.net-box .role-card.btn { min-height: clamp(72px, 18vh, 120px); padding: 8px 6px; }
.net-box .role-card b { font-size: clamp(12px, 2.6vh, 17px); }
.net-box .role-row { gap: 8px; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.code-row input { width: 100%; box-sizing: border-box; min-width: 0; padding: 10px; border-radius: 8px; border: 1px solid #365851; background: #0a121c; color: #eaf6ff; font: 900 clamp(16px, 3.4vh, 22px) var(--font); letter-spacing: .38em; text-align: center; text-transform: uppercase; outline: none; touch-action: manipulation; }
.code-row .btn { padding: 0 16px; font-size: clamp(12px, 2.4vh, 15px); min-height: 0; }
.code-row input::placeholder { font-size: .6em; letter-spacing: .16em; color: #5d6e87; }
.code-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px #00f0ff33; }
.pick .room-code { font: 900 clamp(26px, 7vh, 44px) var(--font); font-style: normal; letter-spacing: .3em; margin-right: -.3em; color: #ffe14d; text-shadow: 0 0 14px #ffe14d77; user-select: all; }
.net-warn { margin: 4px auto 0; max-width: 560px; padding: 6px 12px; border-radius: 8px; background: #3a2a10; border: 1px solid #8a6a22; color: #ffd98a; font: 700 11px/1.4 var(--font); text-align: center; }
.net-warn[hidden] { display: none; }
@media (max-width: 640px) {
  .net-two { grid-template-columns: 1fr; }
}
@media (max-height: 460px) {
  .net-box { padding: 8px 10px; gap: 6px; }
  .net-box .net-help { font-size: 10px; line-height: 1.35; }
  .net-box .role-card .role-ico { display: none; }
  .code-row input { padding: 7px; }
  .pick .room-code { font-size: 30px; }
}

/* frases rápidas */
.saybar { position:relative; margin:6px 0; display:grid; justify-items:center; gap:4px; }
.saybar > div { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.saybar .btn.sm { padding:5px 8px; font-size:10px; min-height:30px; }
.bubble { padding:5px 12px; border-radius:14px; font:800 13px/1.2 var(--font); animation:bubbleIn .22s ease-out; }
.bubble.peer { background:#ff2bd6; color:#fff; box-shadow:0 0 14px #ff2bd688; }
.bubble.me { background:#00f0ff; color:#05122a; box-shadow:0 0 14px #00f0ff88; }
@keyframes bubbleIn { from { transform:translateY(8px) scale(.85); opacity:0; } to { transform:none; opacity:1; } }

/* conexión caída (la mía o la del rival) y espectadores */
body.net-away::after { content: "EL RIVAL HA PERDIDO LA CONEXIÓN · ESPERANDO…"; position: fixed; z-index: 46; left: 50%; top: 22%; transform: translateX(-50%); max-width: 90vw; text-align: center; padding: 10px 22px; border-radius: 999px; background: #05030fe6; border: 2px solid #ffe14d; color: #fff; font: 800 clamp(11px, 2.4vh, 17px) var(--font); letter-spacing: .1em; box-shadow: 0 0 18px #ffe14d; pointer-events: none; animation: net-blink 1s ease-in-out infinite; }
body.net-lost::after { content: "SIN CONEXIÓN · RECONECTANDO…"; position: fixed; z-index: 47; left: 50%; top: 22%; transform: translateX(-50%); max-width: 90vw; text-align: center; padding: 10px 22px; border-radius: 999px; background: #05030fe6; border: 2px solid #ff536f; color: #fff; font: 800 clamp(11px, 2.4vh, 17px) var(--font); letter-spacing: .1em; box-shadow: 0 0 18px #ff536f; pointer-events: none; animation: net-blink .8s ease-in-out infinite; }
body.net-spec::before { content: "👁 ESPECTANDO · ⏸ DOS VECES PARA SALIR"; position: fixed; z-index: 44; left: 50%; bottom: 3vh; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: #05030fb0; border: 1px solid #ffffff55; color: #fff; font: 800 clamp(10px, 2vh, 14px) var(--font); letter-spacing: .1em; pointer-events: none; }
.net-sub { margin: 10px 0 4px; font: 800 12px var(--font); letter-spacing: .16em; color: var(--yellow, #ffe14d); }
.btn.row.room.watch b { color: #ffe14d; }