/* ==================================================================
   Pantallas fuera de la partida: portada, acceso, selección de
   escenario y resumen de fin de nivel.
   ================================================================== */

/* -------- Portada -------- */
#landing{background:
  radial-gradient(1200px 600px at 15% 0%,rgba(124,194,67,.16),transparent 60%),
  radial-gradient(1000px 700px at 90% 100%,rgba(90,140,216,.22),transparent 55%),
  linear-gradient(160deg,#0e1b33 0%,#0b1220 55%,#0a1a2b 100%);}
.marca{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.logo{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:28px;
  color:#14213e;background:linear-gradient(140deg,var(--amarillo),var(--naranja));
  box-shadow:0 10px 30px rgba(255,159,104,.35);}
#landing h1{font-size:46px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(90deg,#fff,#cfe4ff);-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.tagline{font-size:19px;color:#c6d5f0;max-width:620px;margin:10px 0 4px;line-height:1.55;}
.subnota{font-size:14px;color:#8ea6cc;font-style:italic;max-width:560px;margin-bottom:26px;}
.habilidades{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
.niveles-preview{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:34px;}
.nivel-card{width:190px;border-radius:16px;overflow:hidden;border:1px solid var(--borde);
  background:rgba(255,255,255,.04);text-align:left;}
.nivel-card .thumb{height:96px;display:grid;place-items:center;font-size:34px;color:rgba(20,30,50,.72);}
.nivel-card .cuerpo{padding:12px 14px;}
.nivel-card h4{font-size:15px;margin-bottom:3px;}
.nivel-card p{font-size:12px;color:#a9bcda;line-height:1.4;}
.t-oeste{background:linear-gradient(150deg,#e0a86a,#b5673a);}
.t-bosque{background:linear-gradient(150deg,#6fbf73,#2f7d55);}
.t-oficina{background:linear-gradient(150deg,#bcd3e8,#8aa9c9);}
.t-islas{background:linear-gradient(150deg,#e59aac,#7fb3dc);}
.t-polo{background:linear-gradient(150deg,#eaf4fc,#8fb8dc);}
footer.landing-foot{margin-top:32px;font-size:12px;color:#6f86ab;
  display:flex;align-items:center;gap:8px;}

/* -------- Modal de acceso -------- */
#authModal{position:absolute;inset:0;z-index:40;display:none;align-items:center;
  justify-content:center;background:rgba(6,10,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:20px;
  /* El formulario de registro mide mas de 800 px y en una pantalla de portatil
     no cabe: sin esto, el boton de crear la cuenta quedaba fuera y no habia
     forma de llegar a el. */
  overflow-y:auto;}
#authModal.visible{display:flex;}
.auth-card{width:100%;max-width:400px;background:linear-gradient(160deg,#182642,#101a30);
  border:1px solid var(--borde);border-radius:20px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative;
  /* El hueco de arriba es para la X: con el padding parejo de antes caia justo
     encima de la pestaña "Crear cuenta" y la tapaba. Son 56 y no menos porque la
     X ocupa 36 px empezando en el 12: hasta el 48 no queda libre. */
  padding:56px 30px 28px;
  /* Se centra si cabe y se ancla arriba si no, para poder desplazarse. */
  margin:auto;}
/* Al registrarse hay campos en dos columnas y 400 px se quedan estrechos. */
.auth-card.registro{max-width:480px;}
.auth-card .cerrar-modal{top:12px;right:14px;}
.auth-card h3{font-size:22px;margin-bottom:4px;}
.auth-card .sub{font-size:13px;color:#9db2d6;margin-bottom:20px;}
.tabs{display:flex;background:rgba(0,0,0,.25);border-radius:12px;padding:4px;margin-bottom:20px;}
.tabs button{flex:1;border:none;background:none;color:#9db2d6;padding:9px;border-radius:9px;
  cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;}
.tabs button.activo{background:linear-gradient(90deg,var(--amarillo),var(--naranja));color:#14213e;}
.campo{text-align:left;margin-bottom:14px;}
.campo label{display:block;font-size:12px;color:#a9bcda;margin-bottom:5px;}
.campo input,.campo select{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--borde);
  background:rgba(0,0,0,.25);color:#fff;font-size:15px;outline:none;}
.campo select option{background:#182642;}
.campo input:focus,.campo select:focus{border-color:var(--amarillo);}
.fila-campos{display:flex;gap:10px;flex-wrap:wrap;}
/* `min-width` ademas de `flex:1`: sin el, un select con nombres largos ("Emiratos
   Árabes Unidos") estira su columna y aplasta la de al lado. */
.fila-campos .campo{flex:1 1 150px;min-width:0;}

/* Las flechas de subir y bajar del campo numerico sobran: la edad se escribe, y
   ademas invitaban a bajar por debajo de cero. El limite real lo pone el JS. */
.campo input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Flecha propia para los desplegables: la del sistema se ve blanca sobre blanco
   en algunos navegadores. */
.campo select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9bcda' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;}
.campo input::placeholder{color:#6d82a6;}
.auth-nota{display:flex;align-items:flex-start;gap:9px;text-align:left;
  font-size:12px;color:#8ea6cc;line-height:1.45;margin:2px 0 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--borde);
  border-radius:10px;padding:9px 12px;}
.auth-nota i{color:var(--amarillo);margin-top:2px;}
#camposRegistro .campo{margin-bottom:12px;}
.auth-msg{min-height:18px;font-size:13px;color:#ff9e9e;margin-bottom:12px;}
.auth-msg.ok{color:#8ff0b0;}
.cerrar-modal{position:absolute;top:18px;right:20px;font-size:18px;color:#8ea6cc;cursor:pointer;
  background:none;border:none;padding:6px;border-radius:8px;transition:color .15s;}
.cerrar-modal:hover{color:#fff;}

/* -------- Selección de escenario -------- */
#levelSelect{background:linear-gradient(160deg,#0e1b33,#0a1524);display:none;}
#levelSelect.visible{display:flex;}
.barra-usuario{position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:12px;
  font-size:14px;background:var(--panel);padding:8px 14px;border-radius:12px;border:1px solid var(--borde);}
.barra-usuario .quien{display:inline-flex;align-items:center;gap:8px;}
#btnAdmin{display:none;align-items:center;gap:7px;text-decoration:none;color:#14213e;
  background:linear-gradient(90deg,var(--amarillo),var(--naranja));padding:6px 13px;
  border-radius:9px;font-weight:700;font-size:13px;}
#levelSelect h2{font-size:34px;margin-bottom:6px;}
#levelSelect .sub{color:#b9cae6;margin-bottom:18px;font-size:15px;}
.config-juego{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 auto 18px;
  max-width:760px;color:#c6d5f0;font-size:13px;}
.config-juego label{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--borde);border-radius:10px;padding:8px 11px;}
.config-juego i{color:var(--amarillo);}
.config-juego input[type="range"]{width:110px;accent-color:var(--amarillo);}

/* Barra de progreso del jugador registrado */
#progresoJugador{width:100%;max-width:560px;margin:0 auto 26px;display:none;}
.prog-cabecera{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:#b9cae6;margin-bottom:7px;}
.prog-cabecera b{color:#fff;font-size:14px;}
.prog-cabecera i{color:var(--amarillo);}
#progPct{color:var(--exito);font-weight:700;font-size:14px;}
.prog-barra{height:13px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid var(--borde);overflow:hidden;}
.prog-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--amarillo),var(--verde));transition:width .9s ease;}
.badge-completado{position:absolute;bottom:8px;right:10px;font-size:11px;font-weight:700;
  background:rgba(30,120,60,.88);color:#dfffe8;padding:3px 9px;border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,.35);}
.grid-niveles{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;max-width:760px;}
.nivel-jugable{width:220px;border-radius:18px;overflow:hidden;border:1px solid var(--borde);
  background:rgba(255,255,255,.04);cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;}
.nivel-jugable:hover{transform:translateY(-4px);border-color:var(--amarillo);
  box-shadow:0 16px 40px rgba(0,0,0,.4);}
.nivel-jugable .thumb{height:120px;display:grid;place-items:center;font-size:44px;position:relative;
  color:rgba(18,28,48,.72);}
.nivel-jugable .num{position:absolute;top:10px;left:12px;font-size:13px;font-weight:700;
  background:rgba(0,0,0,.35);color:#fff;padding:3px 10px;border-radius:8px;}
.nivel-jugable .cuerpo{padding:16px;text-align:left;}
.nivel-jugable h4{font-size:17px;margin-bottom:5px;}
.nivel-jugable p{font-size:13px;color:#a9bcda;line-height:1.45;}

/* -------- Resumen de fin de nivel -------- */
#pantallaFin{background:linear-gradient(160deg,#0d2818 0%,#14452f 100%);display:none;
  justify-content:flex-start;padding:34px 30px 46px;}
#pantallaFin.visible{display:flex;}
#pantallaFin h1{font-size:34px;color:var(--amarillo);margin-bottom:4px;
  display:flex;align-items:center;gap:14px;}
#finNivel{font-size:14px;color:#bfe8cf;margin-bottom:22px;
  display:inline-flex;align-items:center;gap:8px;}
.fin-seccion{width:100%;max-width:900px;margin-bottom:20px;text-align:left;}
.fin-seccion > h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:#9fd8b8;
  margin-bottom:10px;display:flex;align-items:center;gap:9px;}
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.fin-dato{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:13px;}
.fin-dato > i{font-size:18px;color:var(--amarillo);width:22px;text-align:center;flex:0 0 22px;}
.fin-dato .lbl{display:block;font-size:11.5px;color:#a8ccb8;text-transform:uppercase;
  letter-spacing:.3px;margin-bottom:2px;}
.fin-dato b{font-size:20px;color:var(--exito);font-variant-numeric:tabular-nums;}
.fin-dato small{display:block;font-size:11px;color:#8fb5a0;margin-top:2px;}

/* Cronología de hallazgos: cuánto costó cada objeto */
.fin-timeline{list-style:none;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);
  border-radius:13px;padding:8px 14px;max-height:230px;overflow-y:auto;}
.fin-timeline li{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:13.5px;
  border-bottom:1px solid rgba(255,255,255,.05);}
.fin-timeline li:last-child{border-bottom:none;}
.tl-ic{flex:0 0 24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11px;
  color:var(--amarillo);background:rgba(255,209,102,.13);}
.tl-nombre{flex:0 0 165px;color:#dcf0e4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-barra{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.tl-barra span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--verde),var(--amarillo));}
.tl-dt{flex:0 0 56px;text-align:right;color:var(--amarillo);font-variant-numeric:tabular-nums;}
.tl-t{flex:0 0 56px;text-align:right;color:#8fb5a0;font-variant-numeric:tabular-nums;}
.fin-vacio{color:#8fb5a0;font-style:italic;padding:12px;}

#interpretacion{max-width:820px;font-style:italic;color:#bfe8cf;margin:6px 0 18px;line-height:1.55;}
.fin-botones{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

@media(max-width:640px){
  #landing h1{font-size:34px;}
  .nivel-card{width:150px;}
  #panelLista ul{columns:1;}
  .tl-nombre{flex:0 0 110px;}
}

/* -------- Clasificación pública -------- */
.barra-usuario .btn-barra{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:#dce8fb;background:rgba(255,255,255,.08);border:1px solid var(--borde);
  padding:6px 13px;border-radius:9px;font-weight:600;font-size:13px;
  transition:border-color .15s,color .15s;}
.barra-usuario .btn-barra:hover{border-color:var(--amarillo);color:var(--amarillo);}

#ranking{background:rgba(6,10,20,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;z-index:38;}
#ranking.visible{display:flex;}
.rank-card{position:relative;width:100%;max-width:680px;text-align:left;
  background:linear-gradient(160deg,#182642,#101a30);
  border:1px solid var(--borde);border-radius:18px;padding:26px;
  box-shadow:0 26px 70px rgba(0,0,0,.48);}
.rank-card h2{font-size:26px;color:var(--amarillo);display:flex;align-items:center;gap:12px;}
.rank-sub{color:#a9bcda;font-size:14px;margin:6px 0 16px;}

/* Pestañas: general + un escenario cada una. Se desplazan en horizontal en vez
   de apilarse, para que la tabla no se vaya fuera de la pantalla. */
.rank-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--borde);}
.rank-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--borde);border-radius:10px;
  color:#c6d5f0;font-size:13px;padding:8px 13px;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;}
.rank-tab:hover{border-color:rgba(255,209,102,.5);color:var(--amarillo);}
.rank-tab.activa{background:linear-gradient(90deg,var(--amarillo),var(--naranja));
  color:#14213e;border-color:transparent;font-weight:700;}

.rank-tabla{width:100%;border-collapse:collapse;font-size:14px;}
.rank-tabla th{color:#8ea6cc;font-size:12px;font-weight:600;text-align:left;
  text-transform:uppercase;letter-spacing:.5px;padding:0 10px 8px;}
.rank-tabla td{padding:9px 10px;border-top:1px solid rgba(255,255,255,.07);}
.rank-tabla th:last-child,.rank-tabla td:last-child,
.rank-tabla th:nth-child(4),.rank-tabla td:nth-child(4){text-align:right;}
.rank-puesto{width:34px;text-align:center;}
.rank-num{color:#8ea6cc;font-size:13px;}
.rank-quien{font-weight:600;}
.rank-detalle{color:#a9bcda;}
/* Cifras en columna: sin ancho fijo por dígito los tiempos y puntos bailan. */
.rank-tiempo,.rank-score{font-variant-numeric:tabular-nums;}
.rank-score{font-weight:700;color:var(--exito);}
.rank-tuyo td{background:rgba(255,209,102,.1);}
.rank-tag{font-size:11px;font-weight:700;color:#14213e;background:var(--amarillo);
  padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:middle;}
.rank-solo-tuyo td{border-top:none;}
.rank-corte{color:#5f74a0;text-align:center;letter-spacing:4px;margin:2px 0;}
.rank-vacio{color:#a9bcda;font-size:14px;display:flex;align-items:center;gap:10px;
  padding:18px 4px;}
.rank-vacio i{color:var(--amarillo);}
.rank-pie{color:#7d92b8;font-size:12px;text-align:right;margin-top:12px;}

/* ==================================================================
   Diseño compacto

   Se activa con `body.compacto`, que pone el JavaScript (ver `esCompacto` en
   entorno.js). No son `@media` porque la condición mezcla tamaño Y aparato: una
   tableta táctil de 768 px de ancho no entra por ninguna medida de "pantalla
   pequeña" y necesita esto igual. Repetir esa mezcla en cada regla es justo como
   se coló el caso que faltaba.
   ================================================================== */
body.compacto .overlay{padding:14px;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));}

/* Se ancla arriba y se desplaza: centrado, el título se salía por arriba. */
body.compacto #levelSelect{justify-content:flex-start;}
body.compacto #levelSelect h2{font-size:22px;margin-bottom:4px;}
body.compacto #levelSelect .sub{font-size:12px;margin-bottom:10px;}

/* La barra de usuario deja de flotar sobre el título y pasa a ser una fila. */
body.compacto .barra-usuario{position:static;width:100%;justify-content:space-between;
  margin-bottom:10px;flex-wrap:wrap;gap:8px;font-size:13px;padding:6px 10px;}

/* -------- Opciones plegables --------
   En un ordenador se ven siempre y no estorban; en una pantalla pequeña ocupaban
   77 px de alto, un tercio de lo que se ve en un móvil apaisado. */
.opciones-plegar{display:none;align-items:center;gap:9px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--borde);border-radius:11px;
  color:#c6d5f0;font-size:13px;font-weight:600;padding:9px 15px;margin-bottom:10px;
  transition:border-color .15s,color .15s;}
.opciones-plegar i:first-child{color:var(--amarillo);}
.opciones-plegar .flecha{font-size:11px;transition:transform .18s;}
.opciones-plegar.abierto .flecha{transform:rotate(180deg);}
body.compacto .opciones-plegar{display:inline-flex;}
body.compacto .config-juego{display:none;}
body.compacto .config-juego.abierta{display:flex;}
body.compacto .config-juego{gap:6px;font-size:12px;margin-bottom:10px;}
body.compacto .config-juego label{padding:6px 9px;}
body.compacto #progresoJugador{margin:0 auto 12px;}
body.compacto .prog-cabecera{font-size:12px;}

/* -------- Tarjetas de escenario compactas --------
   El dibujo a la izquierda y el texto a la derecha ocupa la mitad de alto que
   apilados. */
body.compacto .grid-niveles{display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;
  width:100%;max-width:560px;}
body.compacto .nivel-jugable{display:flex;width:100%;border-radius:14px;}
body.compacto .nivel-jugable .thumb{flex:0 0 78px;height:auto;min-height:72px;font-size:26px;}
body.compacto .nivel-jugable .num{top:6px;left:6px;font-size:10px;padding:2px 6px;}
body.compacto .nivel-jugable .cuerpo{padding:10px 12px;flex:1;min-width:0;}
body.compacto .nivel-jugable h4{font-size:15px;margin-bottom:2px;}
body.compacto .nivel-jugable p{font-size:12px;line-height:1.35;}
body.compacto .badge-completado{bottom:4px;right:4px;font-size:10px;padding:2px 6px;}

/* -------- Formulario, clasificación, resumen e instrucciones -------- */
body.compacto .auth-card,body.compacto .auth-card.registro{max-width:100%;padding:52px 18px 20px;}
body.compacto .rank-card{padding:18px 14px;}
body.compacto .rank-card h2{font-size:20px;}
body.compacto .rank-sub{font-size:12px;margin-bottom:12px;}
body.compacto .rank-tabla{font-size:13px;}
body.compacto .rank-tabla td,body.compacto .rank-tabla th{padding:7px 6px;}
body.compacto #pantallaFin{padding:18px 14px 26px;}
body.compacto #pantallaFin h1{font-size:24px;}
body.compacto #instruccionesNivel .inst-card{padding:18px;}
body.compacto #instruccionesNivel h2{font-size:20px;}
body.compacto #instruccionesNivel p{font-size:13px;margin-bottom:8px;}
body.compacto #instruccionesNivel li{font-size:13px;padding:4px 0 4px 26px;}
body.compacto #instruccionesNivel ul{margin-bottom:12px;}

/* -------- Estrecho: nada cabe en dos columnas -------- */
@media (max-width:600px){
  /* Al apilar hay que soltar el `flex-basis` de la fila: 150 px que en
     horizontal eran el ANCHO mínimo pasan a ser el ALTO, y dejaban un agujero
     de medio dedo entre "Sexo" y "Edad". */
  .fila-campos{flex-direction:column;gap:0;}
  .fila-campos .campo{flex:0 0 auto;}
  .fin-grid{grid-template-columns:1fr 1fr;}
  .fin-botones .btn,.inst-botones .btn{flex:1 1 100%;}
  /* La columna de detalle de la clasificación es la prescindible sin sitio. */
  .rank-tabla th:nth-child(3),.rank-tabla td:nth-child(3){display:none;}
}

/* -------- Ancho pero bajo: móvil en horizontal -------- */
@media (min-width:601px) and (max-height:560px){
  body.compacto .grid-niveles{display:grid;grid-template-columns:1fr 1fr;max-width:100%;}
  .fin-grid{grid-template-columns:repeat(4,1fr);}
  /* Las pantallas con mucho contenido se desplazan en vez de encogerse hasta
     ser ilegibles. */
  #pantallaFin,#instruccionesNivel,#ranking,#authModal{align-items:flex-start;}
}

/* Lo que se pulsa tiene que medir 44 px como mínimo: es el tamaño con el que se
   acierta con el dedo sin apuntar. */
body.tactil .btn{min-height:48px;}
body.tactil .cerrar-modal{width:44px;height:44px;display:grid;place-items:center;padding:0;}
body.tactil .rank-tab{min-height:44px;}
body.tactil .tabs button{min-height:44px;}
body.tactil .opciones-plegar{min-height:44px;}
body.tactil .campo input,body.tactil .campo select{min-height:48px;font-size:16px;}
/* 16 px en los campos no es capricho: por debajo de eso, Safari en iPhone hace
   zoom automático al enfocar y descoloca toda la pantalla. */
/* Sin ratón no hay "pasar por encima": sin esto las tarjetas se quedan
   levantadas y con el borde amarillo después de tocarlas. */
@media (hover:none){
  .nivel-jugable:hover{transform:none;border-color:var(--borde);box-shadow:none;}
  .btn:hover{transform:none;}
}

/* -------- El grupo, en la barra de usuario --------
   Estuvo en un cuadro bajo las tarjetas de escenario y quedaba por debajo del
   pliegue: estaba, funcionaba, y nadie lo encontraba. Aquí se ve siempre y no
   empuja los escenarios hacia abajo. */
#chipGrupo{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#chipGrupo i{color:var(--amarillo);}
/* Sin grupo es una invitación, no un estado: se marca para que se note. */
#chipGrupo.sin-grupo{border-style:dashed;border-color:rgba(255,209,102,.45);color:#ffe4a3;}
#chipGrupo.sin-grupo:hover{border-style:solid;}

/* Acciones cuando ya estás en un grupo. */
/* Las acciones van antes del boton de cerrar: primero lo que se puede hacer. */
.mg-acciones{display:none;flex-direction:column;gap:9px;margin-top:12px;
  padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--borde);}
.mg-acciones .btn{width:100%;font-size:14px;padding:11px 16px;}
.mg-salir{color:#ffb3b3;}

/* Ámbito de la clasificación: todo el mundo o solo mi clase. */
.rank-ambito{display:flex;gap:6px;background:rgba(0,0,0,.25);border-radius:11px;
  padding:4px;margin-bottom:12px;width:fit-content;}
.rank-ambito button{border:none;background:none;color:#9db2d6;cursor:pointer;
  font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s;}
.rank-ambito button:hover{color:var(--txt);}
.rank-ambito button.activa{background:linear-gradient(90deg,var(--amarillo),var(--naranja));color:#14213e;}
body.tactil .rank-ambito button{min-height:44px;}

/* -------- Modal de grupo (cambiar / salir) --------
   Propio en vez de `confirm()`: el del navegador rompe el aspecto del juego, no
   cabe una explicación decente y no admite un campo de texto. */
#modalGrupo{position:absolute;inset:0;z-index:42;display:none;align-items:center;
  justify-content:center;padding:20px;overflow-y:auto;
  background:rgba(6,10,20,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
#modalGrupo.visible{display:flex;}
.mg-card{position:relative;width:100%;max-width:420px;margin:auto;text-align:left;
  background:linear-gradient(160deg,#182642,#101a30);border:1px solid var(--borde);
  border-radius:18px;padding:26px 24px 22px;box-shadow:0 26px 70px rgba(0,0,0,.5);}
.mg-card h3{font-size:20px;color:var(--amarillo);margin-bottom:8px;padding-right:36px;}
.mg-texto{color:#c6d5f0;font-size:14px;line-height:1.55;margin-bottom:16px;}
.mg-card .campo input{text-transform:uppercase;letter-spacing:2px;
  font-family:ui-monospace,Consolas,monospace;}
.mg-card .campo input::placeholder{letter-spacing:0;text-transform:none;}
.mg-msg{min-height:18px;font-size:13px;color:#ff9e9e;margin:8px 0 4px;}
.mg-botones{display:flex;gap:10px;margin-top:12px;}
.mg-botones .btn{flex:1;font-size:15px;padding:12px 18px;}
.mg-card .cerrar-modal{top:14px;right:14px;}