/* El estilo comun de la web del juego y del lobby online (docs/modo_online.md §17 y §18): anime de futbol. Cielo con
   nubes, vinetas de manga (papel, borde de tinta y sombra dura), titulos inclinados con letra de comic (Bangers),
   lineas de velocidad y las imagenes de la presentacion del juego en pixel art (img/). Lo propio de cada pagina:
   lobby.css (servidor_online/lobby) y el <style> de web/shell.html (el juego). Make web copia este archivo y img/
   a web_build. */
:root {
  --tinta: #13151c;
  --papel: #fffaf0;
  --papel-2: #f3ecdc;
  --cielo-1: #1f8ff0;
  --cielo-2: #7fd0ff;
  --cesped: #1fa24a;
  --cesped-2: #168a3c;
  --rojo: #e8333f;
  --azul: #1f5fd6;
  --amarillo: #ffd21f;
  --verde: #22b356;
  --gris: #6b7280;
  --sombra: 5px 5px 0 var(--tinta);
  --letra-comic: "Bangers", Impact, "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--tinta); font: 600 15px/1.45 "Nunito", system-ui, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) 1.2px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--cielo-1) 0%, var(--cielo-2) 62%, #b8e6ff 78%, var(--cesped) 78.2%, var(--cesped-2) 100%) fixed;
  min-height: 100vh;
}
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.oculta, [hidden] { display: none !important; }
h1, h2 { margin: 0; }
kbd { background: var(--papel-2); border: 2px solid var(--tinta); border-radius: 4px; padding: 0 5px; font-size: 12px; }

/* el cielo con nubes que pasan */
.cielo { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.nube { position: absolute; width: 180px; height: 56px; background: #fff; border-radius: 40px; opacity: .85;
  box-shadow: 40px -18px 0 6px #fff, 90px -6px 0 0 #fff; animation: nube 70s linear infinite; }
.n1 { top: 16%; left: -220px; }
.n2 { top: 34%; left: -220px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
.n3 { top: 8%; left: -220px; animation-duration: 120s; animation-delay: -85s; transform: scale(1.2); }
@keyframes nube { to { left: 110%; } }

/* la barra de arriba */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 10px 22px; background: var(--papel); border-bottom: 4px solid var(--tinta);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); }
.logo { height: 38px; width: auto; display: block; filter: drop-shadow(2px 2px 0 var(--tinta)); }
.vol { font: 13px/1 var(--letra-comic); letter-spacing: 1.5px; color: var(--rojo); margin-top: 3px; }
.barra-der { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perfil { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--tinta); border-radius: 10px;
  padding: 3px 12px 3px 3px; cursor: pointer; font: inherit; box-shadow: 3px 3px 0 var(--tinta); transition: transform .1s; }
.perfil:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }
.perfil img { width: 64px; height: 32px; object-fit: cover; border-radius: 6px; border: 2px solid var(--tinta); background: var(--cielo-2); }
.perfil span { display: grid; text-align: left; line-height: 1.1; }
.perfil small { font-size: 11px; color: var(--gris); }
.perfil b { font-size: 15px; font-weight: 900; }
.selector { display: inline-flex; border: 3px solid var(--tinta); border-radius: 10px; overflow: hidden; box-shadow: 3px 3px 0 var(--tinta); }
.selector button { border: 0; background: #fff; color: var(--tinta); font: 15px var(--letra-comic); letter-spacing: 1px;
  padding: 7px 14px; cursor: pointer; }
.selector button + button { border-left: 3px solid var(--tinta); }
.selector button[aria-checked="true"] { background: var(--amarillo); }
.selector button:disabled { color: #aaa; cursor: not-allowed; }
.conexion { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.conexion i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--amarillo); }
.conexion.ok i { background: var(--verde); }
.conexion.mal i { background: var(--rojo); }

/* las pestanas de la web: Jugar solo / Online */
.pestanas { display: flex; border: 3px solid var(--tinta); border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 var(--tinta); }
.pestana { display: flex; align-items: center; gap: 8px; font: 20px/1 var(--letra-comic); letter-spacing: 1.5px; padding: 9px 18px 7px;
  text-decoration: none; color: var(--tinta); background: #fff; white-space: nowrap; }
.pestana + .pestana { border-left: 3px solid var(--tinta); }
.pestana:hover { background: var(--amarillo); }
.pestana.activa { background: var(--rojo); color: #fff; }
.pestana.apagada { color: #a1a1aa; background: #f4f4f5; cursor: not-allowed; }
.pestana .icono { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; position: relative; }
.pestana .icono::after { content: ""; position: absolute; inset: 4px; background: currentColor; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.pestana .icono.dos { border-radius: 4px; }
.pestana .icono.dos::after { inset: 2px; clip-path: none; background: linear-gradient(90deg, currentColor 0 40%, transparent 40% 60%, currentColor 60%); }


/* la portada: una escena del juego con lineas de velocidad */
.portada { position: relative; max-width: 1160px; margin: 22px auto 0; height: 230px; border: 4px solid var(--tinta);
  border-radius: 10px; overflow: hidden; box-shadow: 8px 8px 0 var(--tinta); background: var(--cielo-2);
  width: calc(100% - 40px); }
.portada-escena { position: absolute; inset: 0; background: url(img/escena_carrera.png) right center / auto 100% no-repeat; }
.velocidad { position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 80% 50%, rgba(255, 255, 255, .0) 0deg 4deg, rgba(255, 255, 255, .35) 4deg 5deg);
  mask-image: radial-gradient(circle at 80% 50%, transparent 20%, #000 70%);
  -webkit-mask-image: radial-gradient(circle at 80% 50%, transparent 20%, #000 70%); animation: vibra .25s steps(2) infinite; }
@keyframes vibra { 50% { transform: translate(1px, -1px); } }
.portada-texto { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; padding: 22px 28px; display: flex; flex-direction: column;
  justify-content: center; gap: 8px; background: linear-gradient(90deg, var(--papel) 70%, rgba(255, 250, 240, 0));
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.sello { align-self: flex-start; background: var(--rojo); color: #fff; font: 20px var(--letra-comic); letter-spacing: 2px;
  padding: 2px 14px; border: 3px solid var(--tinta); transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--tinta); }
.portada h1 { font: 54px/0.95 var(--letra-comic); letter-spacing: 2px; color: var(--amarillo);
  -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--tinta); transform: skew(-6deg); }
.portada p { margin: 0; max-width: 470px; font-weight: 700; }
.copa { position: absolute; right: 18px; bottom: 10px; height: 120px; filter: drop-shadow(3px 3px 0 var(--tinta)); animation: brilla 3s ease-in-out infinite; }
@keyframes brilla { 50% { transform: translateY(-6px); } }

/* las vinetas */
.vista { max-width: 1160px; margin: 26px auto 40px; padding: 0 20px; display: grid; gap: 24px;
  grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.vista > *, .lateral, .lateral > * { min-width: 0; }
.lateral { display: grid; gap: 24px; }
.vineta { position: relative; background: var(--papel); border: 4px solid var(--tinta); border-radius: 8px; padding: 18px;
  box-shadow: 8px 8px 0 var(--tinta); }
.titulo { display: flex; align-items: center; gap: 10px; margin: -32px 0 14px -6px; }
.titulo span { display: inline-block; background: var(--tinta); color: #fff; font: 22px/1 var(--letra-comic); letter-spacing: 1.5px;
  padding: 7px 16px 5px; transform: skew(-10deg); box-shadow: 4px 4px 0 var(--rojo); }
.contador { background: var(--amarillo); border: 3px solid var(--tinta); border-radius: 999px; min-width: 34px; text-align: center;
  font: 18px/1 var(--letra-comic); padding: 5px 8px 3px; }

input, select { font: inherit; font-weight: 700; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-radius: 8px;
  padding: 9px 12px; outline: none; min-width: 0; }
input:focus, select:focus { box-shadow: 0 0 0 3px var(--amarillo); }
.boton { font: 18px/1 var(--letra-comic); letter-spacing: 1.5px; color: var(--tinta); background: #fff; border: 3px solid var(--tinta);
  border-radius: 8px; padding: 10px 18px 8px; cursor: pointer; box-shadow: 4px 4px 0 var(--tinta); transition: transform .08s, box-shadow .08s; }
.boton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--tinta); }
.boton.rojo { background: var(--rojo); color: #fff; }
.boton.azul { background: var(--azul); color: #fff; }
.boton.verde { background: var(--verde); color: #fff; }
.boton.amarillo { background: var(--amarillo); }
.boton.grande { width: 100%; font-size: 24px; padding: 13px 18px 10px; }
.boton.pequeno { font-size: 15px; padding: 6px 12px 4px; box-shadow: 3px 3px 0 var(--tinta); }


.chip { display: inline-flex; align-items: center; border: 2px solid var(--tinta); border-radius: 999px; padding: 0 8px; font-size: 12px;
  font-weight: 800; background: var(--papel-2); }
.chip.idioma { background: #dbeafe; }
.chip.mod { background: var(--amarillo); }
.chip.esperando { background: #dcfce7; }
.chip.completa { background: #fee2e2; }

.formulario { display: grid; gap: 12px; }
.formulario label, .campo { display: grid; gap: 5px; font-size: 13px; font-weight: 800; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor label { display: flex !important; align-items: center; gap: 10px; font-size: 15px !important; cursor: pointer; }
.interruptor small { font-weight: 600; color: var(--gris); }
.pista { width: 46px; height: 26px; border-radius: 999px; background: #d4d4d8; border: 3px solid var(--tinta); position: relative; flex: none; }
.pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--tinta); transition: left .15s; }
.interruptor input:checked + label .pista { background: var(--verde); }
.interruptor input:checked + label .pista::after { left: 22px; }

/* capas y avisos */
.capa { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(19, 21, 28, .6); }
.dialogo { width: 100%; max-width: 520px; display: grid; gap: 14px; margin-top: 18px; }

.avisos { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 40; }
.aviso { background: var(--papel); border: 3px solid var(--tinta); border-radius: 8px; padding: 10px 14px; max-width: 360px; font-weight: 800;
  box-shadow: 4px 4px 0 var(--tinta); animation: entra .25s cubic-bezier(.2, 1.4, .5, 1); border-left: 10px solid var(--azul); }
.aviso.error { border-left-color: var(--rojo); }

/* Discord (docs/modo_online.md §23): el boton de la barra y la tarjeta «Comunidad», con la invitacion permanente al
   servidor del juego. El logo es una mascara (toma el color del texto); el color, el de la marca de Discord */
.icono-discord { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.boton-discord { display: inline-flex; align-items: center; gap: 8px; font: 17px/1 var(--letra-comic); letter-spacing: 1.2px;
  color: #fff; background: #5865f2; border: 3px solid var(--tinta); border-radius: 10px; padding: 7px 12px 5px;
  text-decoration: none; box-shadow: 3px 3px 0 var(--tinta); transition: transform .1s, box-shadow .1s; }
.boton-discord:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }
.boton-discord:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.boton-discord.grande { width: 100%; justify-content: center; font-size: 22px; padding: 12px 16px 9px; box-shadow: 4px 4px 0 var(--tinta); }
.boton-discord.grande .icono-discord { width: 28px; height: 28px; }
.comunidad .titulo span { box-shadow: 4px 4px 0 #5865f2; }
.comunidad-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.comunidad-logo { width: 58px; height: 58px; flex: none; display: grid; place-items: center; color: #fff; background: #5865f2;
  border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 3px 3px 0 var(--tinta); transform: rotate(-4deg); }
.comunidad-logo .icono-discord { width: 36px; height: 36px; }
.comunidad-cabeza p { margin: 0; font-size: 14px; line-height: 1.35; }
.comunidad-canales { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.comunidad-canales li { font-size: 12px; font-weight: 800; background: #e0e3ff; border: 2px solid var(--tinta); border-radius: 999px; padding: 1px 9px; }

@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes late { 50% { transform: scale(1.08) rotate(-4deg); } }
@keyframes sello { from { transform: rotate(30deg) scale(2); opacity: 0; } }
@keyframes zoom { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }

@media (max-width: 900px) {
  .vista { grid-template-columns: 1fr; }
  .portada { height: 200px; }
  .portada-texto { width: 72%; }
  .portada h1 { font-size: 40px; }
}
@media (max-width: 560px) {
  .barra { padding: 8px 14px; position: static; }   /* en el movil ocupa varias filas: que no se quede fija arriba */
  .pestana { font-size: 17px; padding: 8px 12px 6px; }
  .portada { width: calc(100% - 24px); height: auto; min-height: 210px; }
  .portada-escena { opacity: .35; }
  .portada-texto { position: relative; width: 100%; clip-path: none; background: rgba(255, 250, 240, .85); }
  .copa { display: none; }
  .vista { padding: 0 12px; }
  .boton-discord .txt { display: none; }          /* en el movil, la barra solo con el logo */
  .boton-discord { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}