/* ─── Partida ───────────────────────────────────────────────────────────────
   El tablero son botones de verdad en una rejilla CSS. En la Fase 4 se le pondrá
   un canvas por encima para los efectos, con pointer-events: none, de modo que
   todo lo que hay aquí (teclado, foco, lectores de pantalla) siga funcionando. */

/* `relative` para que el confeti del final —un canvas absoluto— se coloque sobre la
   pantalla de partida y no sobre la página entera. */
.game { display: grid; gap: var(--space-4); position: relative; }

/*
 * La barra de turno NO cambia de tamaño.
 *
 * Antes tenía `flex-wrap: wrap`, así que cada recompensa que aparecía —sonar, salva,
 * racha— podía partirla en dos o tres filas. La barra crecía, los tableros bajaban de
 * sitio a mitad de partida y salía scroll en la página justo cuando estabas apuntando.
 *
 * Ahora es una sola fila de altura fija y lo que se adapta es el contenido: el carril
 * de recompensas se desplaza en horizontal si no cabe, y el turno y el botón de
 * abandonar no se encogen nunca.
 */
/*
 * La ranura del juego no puede empujar la página a lo ancho.
 *
 * Es un elemento de rejilla, y los elementos de rejilla salen con `min-width: auto`: se
 * niegan a encogerse por debajo de su contenido. Dentro está la barra de turno, que es un
 * flex sin envoltura a propósito —crecer a lo alto le está prohibido, porque mueve los
 * tableros a mitad de partida—, así que con todas las recompensas abiertas medía 691 px
 * en una pantalla de 360 y se llevaba la página entera con ella. El carril de recompensas
 * ya sabe desplazarse solo; lo único que faltaba era permitirle encogerse.
 *
 * No se veía porque el navegador alejaba la página para que cupiera. Al fijar el zoom
 * —que es lo que hay que hacer en una mesa de cartas— dejó de disimularse.
 */
[data-game-slot] { min-width: 0; }

.game-bar {
    display: flex; align-items: center; gap: var(--space-3);
    flex-wrap: nowrap;
    /* Altura FIJA, no mínima: ni siquiera la barra de desplazamiento del carril de
       recompensas puede moverla. Es la diferencia entre «casi nunca se mueve» y «no
       se mueve». */
    height: 4.75rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-2); padding: var(--space-2) var(--space-3);
}

/* Lo que identifica el turno y la salida: siempre visibles, nunca encogidos. */
.game-bar > .turn-clock,
.game-bar > .game-actions { flex: 0 0 auto; }

/*
 * El turno tiene sitio de sobra pero con tope: un texto largo —«La máquina está
 * pensando…» en un idioma más hablador— no puede comerse el carril de recompensas.
 * Lo que no quepa se corta con puntos suspensivos.
 */
.game-bar > .turn-info { flex: 0 1 auto; min-width: 0; max-width: 16rem; }
.turn-info strong, .turn-info .turn-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * El carril de recompensas se queda con el sitio que sobre y se desplaza si hace
 * falta. `min-width: 0` es imprescindible: sin él un hijo flex se niega a encogerse
 * por debajo de su contenido y vuelve a empujar la barra.
 */
.game-bar-rewards {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex; align-items: center; gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    /* Se reserva el hueco de la barra de desplazamiento siempre, aparezca o no: si
       apareciera de golpe, movería todo lo que hay dentro un par de píxeles. */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}
.game-bar-rewards > * { flex: 0 0 auto; }
/* La racha sí puede estirarse para llenar lo que quede. */
.game-bar-rewards > .streak-bar { flex: 1 1 8rem; min-width: 6rem; }
.turn-info { display: grid; }
.turn-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.turn-info strong { font-size: 1.15rem; }
.turn-info strong[data-mine="true"] { color: var(--accent); }

/* Contador circular: se vacía según se acaba el turno y late al final. */
.turn-clock { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 1.1rem; }
.turn-clock svg { width: 2.6rem; height: 2.6rem; transform: rotate(-90deg); }
.clock-track { fill: none; stroke: var(--line); stroke-width: 3; }
.clock-hand {
    fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
    transition: stroke-dashoffset 250ms linear;
}
.turn-clock[data-urgent="true"] .clock-hand { stroke: var(--danger); }
.turn-clock[data-urgent="true"] { color: var(--danger); animation: beat .6s ease-in-out infinite; }

/* ─── Rejilla ─────────────────────────────────────────────────────────────── */
.board {
    display: grid;
    gap: 3px;
    background: color-mix(in srgb, var(--line) 60%, transparent);
    padding: 2px;
    border-radius: var(--radius-1);
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
}
.board-row { display: grid; grid-template-columns: repeat(var(--board-size), 1fr); gap: 3px; }

.cell {
    aspect-ratio: 1;
    padding: 0;
    /* Un borde tenue en cada casilla: sin él, un tablero lleno de casillas «sin
       explorar» se ve como un rectángulo vacío y no parece un tablero. */
    border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius: 2px;
    background: color-mix(in srgb, var(--surface-2) 85%, transparent);
    position: relative;
    display: grid;
    place-items: center;
    font-size: clamp(.6rem, 2.2vw, .9rem);
    color: var(--text);
    /* Sin transform en hover: en una rejilla de 144 botones eso es un repintado caro. */
    transition: background var(--transition);
}
.cell:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.cell:not(:disabled):hover::after { content: "✛"; opacity: .7; }

/*
 * Los estados NO se distinguen solo por color: cada uno lleva su símbolo. Es lo que
 * hace que la partida se pueda seguir con daltonismo o con la pantalla al sol.
 */
.cell[data-state="unknown"] {
    background: color-mix(in srgb, var(--surface-2) 95%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.cell[data-state="water"]   { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.cell[data-state="miss"]    { background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text-dim); }
.cell[data-state="miss"]::before  { content: "○"; }
.cell[data-state="hit"]     { background: color-mix(in srgb, var(--warn) 45%, transparent); color: #1b1b1f; font-weight: 700; }
.cell[data-state="hit"]::before   { content: "✕"; }
.cell[data-state="sunk"]    { background: color-mix(in srgb, var(--danger) 55%, transparent); color: #fff; font-weight: 700; }
.cell[data-state="sunk"]::before  { content: "✖"; }
.cell[data-state="mine"]    { background: color-mix(in srgb, var(--warn) 70%, transparent); color: #1b1b1f; }
.cell[data-state="mine"]::before  { content: "✻"; }
.cell[data-state="ship"]    { background: color-mix(in srgb, var(--text-dim) 55%, transparent); }
.cell[data-state="ship"]::before  { content: "▮"; opacity: .55; }

.cell[data-mark="preview"]     { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell[data-mark="preview-bad"] { outline: 2px solid var(--danger); outline-offset: -2px; }
.cell[data-mark="vote"]::after {
    content: attr(data-mark-text);
    position: absolute; inset: auto 1px 1px auto;
    background: var(--accent); color: var(--accent-ink);
    font-size: .6rem; font-weight: 700; line-height: 1;
    border-radius: 999px; padding: .1rem .25rem;
}

/* ─── Colocación ──────────────────────────────────────────────────────────── */
.placing { display: grid; gap: var(--space-4); }
@media (min-width: 55rem) { .placing { grid-template-columns: 16rem 1fr; align-items: start; } }

.ship-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.ship-chip {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    background: var(--surface-2); color: var(--text); border: 1px solid transparent;
    border-radius: var(--radius-1); padding: var(--space-2) var(--space-3);
}
.ship-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ship-chip[data-placed="true"] { opacity: .55; }
.ship-chip[data-placed="true"]::before { content: "✓ "; }
.ship-cells { font-family: var(--font-mono); letter-spacing: .1em; color: var(--text-dim); }
.placing-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ─── Combate ─────────────────────────────────────────────────────────────── */
.boards { display: grid; gap: var(--space-4); }
@media (min-width: 60rem) { .boards { grid-template-columns: 1fr 1fr; } }

.board-wrap { margin: 0; display: grid; gap: var(--space-2); }
.board-wrap figcaption {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
    text-align: center;
}

.board-tabs { display: none; }
/* En móvil no caben dos tableros: se cambia con pestañas. */
@media (max-width: 60rem) {
    .board-tabs { display: flex; gap: var(--space-2); justify-content: center; }
    .board-wrap { display: none; }
    .board-wrap.is-active { display: grid; }
}

.votes {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-2); padding: var(--space-3) var(--space-4);
}
.votes h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: var(--space-2); }
.vote-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-1); }
.vote-list li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .9rem; }
.vote-list li[data-voted="false"] { color: var(--text-dim); font-style: italic; }
.vote-list strong { font-family: var(--font-mono); }

/* ─── Final ───────────────────────────────────────────────────────────────── */
.game-over { text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
.game-over h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); color: var(--accent); text-transform: none; letter-spacing: 0; }
.scoreboard { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: min(28rem, 100%); }
.scoreboard li {
    display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--space-1) var(--space-3);
    align-items: baseline;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); text-align: left;
}
.score-name { font-weight: 700; }
.score-data { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); text-align: right; }
@media (max-width: 30rem) {
    .scoreboard li { grid-template-columns: 1fr; }
    .score-data { text-align: left; }
}
.score-note { grid-column: 1 / -1; font-size: .8rem; color: var(--accent-2); }

/* Los puntos mandan en el marcador: van a la derecha, grandes y en cifra fija para
   que no bailen mientras cuentan hacia arriba. */
.scoreboard li { grid-template-columns: minmax(7rem, auto) 1fr auto; }
.score-points {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    justify-self: end;
}
.scoreboard li[data-won="false"] .score-points { color: var(--text-dim); }
.scoreboard li[data-mvp="true"] { border-color: color-mix(in srgb, #ffd166 55%, transparent); }
@media (max-width: 30rem) {
    .scoreboard li { grid-template-columns: 1fr auto; }
    .score-data { text-align: left; }
}

/* ─── MVP ─────────────────────────────────────────────────────────────────── */
.mvp-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    background: linear-gradient(135deg,
        color-mix(in srgb, #ffd166 14%, transparent),
        color-mix(in srgb, var(--accent) 10%, transparent));
    border: 1px solid color-mix(in srgb, #ffd166 45%, transparent);
}
.mvp-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.mvp-face { border-radius: 50%; object-fit: cover; }
.mvp-card strong { font-size: 1.15rem; }
.mvp-points { font-family: var(--font-mono); color: #ffd166; }

/* ─── Medallas ────────────────────────────────────────────────────────────── */
.medals { width: min(34rem, 100%); text-align: left; }
.medals h3 { font-size: .78rem; color: var(--text-dim); margin: 0 0 var(--space-2); }
.medal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.medal {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface); border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius-1); padding: var(--space-2) var(--space-3);
    animation: medal-in .5s cubic-bezier(.2, 1.4, .4, 1) backwards;
    animation-delay: var(--delay, 0ms);
}
/* Las irónicas se distinguen de un vistazo: no es lo mismo un Kraken que unas
   Manazas de Oro, y confundirlos le quita la gracia al reparto. */
.medal[data-ironic="true"]  { border-left-color: #ff9f45; }
.medal[data-ironic="false"] { border-left-color: var(--accent); }
.medal-icon { font-size: 1.5rem; line-height: 1; }
.medal-text { display: grid; gap: 1px; min-width: 0; }
.medal-text strong { font-size: .92rem; }
.medal-who { font-size: .82rem; color: var(--accent-2); }
.medal-text small { font-size: .76rem; color: var(--text-dim); }

@keyframes medal-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
    .medal { animation: none; }
}