* {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 16px;
        font-family: Arial, sans-serif;
        color: #243044;
        background: #f0f3f8;
      }
      #screen-chinos {
        max-width: 950px;
        margin: auto;
      }
      h1 {
        text-align: center;
        margin-bottom: 8px;
      }
      .intro {
        text-align: center;
        color: #5c6678;
      }
      .panel {
        background: white;
        padding: 18px;
        margin: 16px 0;
        border-radius: 16px;
        box-shadow: 0 3px 12px #0000000d;
        text-align: center;
      }
      .grupo {
        margin: 12px 0 18px;
      }
      .etiqueta {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .opciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 9px;
      }
      button {
        font: inherit;
        cursor: pointer;
        padding: 11px 16px;
        border: 1px solid #cbd3df;
        border-radius: 10px;
        background: #fff;
        color: #243044;
      }
      button:hover:not(:disabled) {
        background: #eef4ff;
      }
      button.active,
      button.seleccionado {
        border-color: #3569c8;
        background: #e5eeff;
        box-shadow: 0 0 0 2px #3569c833;
        font-weight: bold;
      }

       #modo-aprendizaje.active,
       #modo-aprendizaje.seleccionado {
       border-color: #e88990;
       background: #f4a3a8;
       box-shadow: 0 0 0 2px #f4a3a833;
}
      button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        text-decoration: line-through;
      }
      .verde {
        background: #18794e;
        border-color: #18794e;
        color: white;
        font-weight: bold;
      }
      .verde:hover:not(:disabled) {
        background: #12633f;
        color: white;
      }
      .marcador {
        text-align: center;
        padding: 14px;
        background: #e5ebf5;
        border-radius: 12px;
        font-weight: bold;
        line-height: 1.8;
      }
      .mesa {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: ". arriba ." "izquierda . derecha" ". abajo .";
        gap: 12px;
        align-items: stretch;
        margin: 20px 0;
        position: relative;
      }
      .jugador {
        background: white;
        border: 2px solid #d5dce7;
        border-radius: 16px;
        padding: 14px 8px;
        text-align: center;
        min-width: 0;
      }
      .jugador.arriba {
        grid-area: arriba;
      }
      .jugador.izquierda {
        grid-area: izquierda;
      }
      .jugador.derecha {
        grid-area: derecha;
      }
      .jugador.abajo {
        grid-area: abajo;
      }
      .jugador.humano {
        border-color: #3569c8;
        background: #f4f8ff;
      }
      .jugador.ganador {
        border-color: #16834b;
        background: #effbf3;
      }

.check-ganador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-left: 5px;
  border-radius: 50%;
  background: #16834b;
  color: white;
  font-size: 19px;
  font-weight: bold;
  vertical-align: middle;
}

      .nombre {
        font-weight: bold;
        margin-bottom: 10px;
      }
      .mano {
        font-size: clamp(40px, 8vw, 65px);
        line-height: 1.3;
        min-height: 75px;
      }
      .monedas {
        min-height: 30px;
        font-size: 23px;
        overflow-wrap: anywhere;
      }
      .prediccion {
        font-weight: bold;
        margin-top: 8px;
        min-height: 22px;
        padding: 5px 2px;
        border-radius: 8px;
        transition: color 0.2s ease;
      }
      .estado {
        margin-top: 6px;
        font-size: 13px;
        color: #606b7a;
      }
      .fase {
        font-weight: bold;
        margin-bottom: 15px;
      }
      .resultado {
        font-weight: bold;
        line-height: 1.7;
      }
      .historial {
        overflow-x: auto;
      }
      .historial table {
        width: 100%;
        border-collapse: collapse;
      }
      .historial th,
      .historial td {
        padding: 9px 5px;
        border-bottom: 1px solid #dbe1e9;
        text-align: center;
      }
      [hidden] {
        display: none !important;
      }

.popup-fondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #17203399;
}

.popup-fondo[hidden] {
  display: none !important;
}

.popup-caja {
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 12px 40px #00000030;
  text-align: center;
}

.popup-caja h2 {
  margin-top: 0;
  color: #18794e;
}

.popup-caja p {
  line-height: 1.6;
}

      .centro-resultado {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        text-align: center;
        pointer-events: none;
      }
      .resultado-centro {
        text-align: center;
        padding: 8px 14px;
        background: #e3edff;
        border: 2px solid #729ce8;
        border-radius: 12px;
      }
      .numero-total {
        font-size: 34px;
        font-weight: bold;
        line-height: 1.1;
      }
      .no-gana-humano .numero-total {
        color: #c62828;
      }
      .gana-humano .numero-total {
        color: #218838;
      }
      .texto-ganaste {
        color: #218838;
        font-size: 14px;
        font-weight: bold;
        margin-top: 5px;
      }
      .jugador.prediccion-reciente .prediccion {
  animation: destello-prediccion 0.8s ease-out;
  color: inherit;
  font-size: 1.2em;
  font-weight: 800;
}
      @keyframes destello-prediccion {
        0% {
          background: #a8f0bf;
          transform: scale(1.08);
          box-shadow: 0 0 0 5px #a8f0bf88;
        }
        60% {
          background: #d9f8e2;
          transform: scale(1.04);
          box-shadow: 0 0 0 2px #a8f0bf44;
        }
        100% {
          background: transparent;
          transform: scale(1);
          box-shadow: none;
        }
      }

      @media (max-width: 560px) {
        body {
          padding: 6px;
        }
        .mesa {
          gap: 5px;
          margin: 12px 0;
        }
        .jugador {
          padding: 6px 3px;
          border-radius: 12px;
        }
        .nombre {
          font-size: 12px;
          margin-bottom: 5px;
        }
        .mano {
          font-size: 34px;
          min-height: 43px;
          line-height: 1.2;
        }
        .monedas {
          font-size: 16px;
          min-height: 23px;
        }
        .prediccion {
          font-size: 12px;
          margin-top: 4px;
          padding: 3px 1px;
          min-height: 18px;
        }
        .estado {
          font-size: 11px;
          margin-top: 3px;
        }
        button {
          padding: 10px 12px;
        }
        .panel {
          padding: 12px 8px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .jugador.prediccion-reciente .prediccion {
          animation: none;
          background: #d9f8e2;
        }
      }
      @media (max-width: 600px) {
        .jugador {
          padding: 8px;
        }

        .jugador .prediccion {
          font-size: 0.9em;
        }
      }

      /* Móvil: controles táctiles primero */
      @media (max-width: 600px) {
        #controles {
          display: flex;
          flex-direction: column;
        }

        #controles-monedas,
        #controles-prediccion {
          display: flex;
          flex-direction: column;
        }

        /* Elegir monedas: números y cerrar mano arriba */
        #opciones-monedas {
          order: -2;
        }

        #controles-monedas > p {
          order: -1;
          margin: 8px 0;
        }

        #controles-monedas > .etiqueta {
          order: 1;
          margin-top: 8px;
          margin-bottom: 4px;
        }

        /* Elegir predicción: números y confirmar arriba */
        #opciones-prediccion {
          order: -2;
        }

        #controles-prediccion > p:has(#confirmar) {
          order: -1;
          margin: 8px 0;
        }

        #controles-prediccion > .etiqueta,
        #controles-prediccion > #ayuda-prediccion {
          order: 1;
          margin-top: 6px;
          margin-bottom: 4px;
        }

        #controles .fase {
          order: 2;
          margin-top: 8px;
          margin-bottom: 0;
        }
      }

      /* Aviso visual cuando te toca predecir */
      .jugador.turno-humano {
        animation: resaltar-turno 1.2s ease-in-out infinite;
        border-color: #16834b;
        background: #effbf3;
      }

      .aviso-turno {
        display: inline-block;
        margin: 0 0 8px;
        padding: 6px 10px;
        border-radius: 8px;
        background: #18794e;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }

      @keyframes resaltar-turno {
        0%,
        100% {
          box-shadow: 0 0 0 0 #16834b22;
        }
        50% {
          box-shadow: 0 0 0 5px #16834b55;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .jugador.turno-humano {
          animation: none;
          box-shadow: 0 0 0 4px #a8f0bf;
        }
      }

      /* Aviso azul para cada jugador que acierta */
      .aviso-acierto {
        position: absolute;
        z-index: 6;
        transform: translate(-50%, -50%);
        padding: 7px 10px;
        border-radius: 10px;
        background: #e3edff;
        border: 2px solid #729ce8;
        color: #243044;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 2px 8px #00000018;
        pointer-events: none;
      }