/* Batalla de Tres — Identidad visual v1 (Arte Batalla de Tres) */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=Nunito:wght@600;800&display=swap');

:root{
  /* Fondo y superficies */
  --bg-1:#1E1B4B; --bg-2:#3B2A8C;            /* degradado noche-violeta */
  --bg: radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg-1));
  --surface:#FFFFFF; --surface-2:#F1EEFF;     /* tarjetas, modales */
  --text:#1E1B4B; --text-on-dark:#FFFFFF; --text-soft:#C7C2F0;

  /* Tablero 6x6 */
  --board:#F6EFE3; --cell:#EADFCC; --cell-line:#D9CBB3;
  --board-frame:#7A4E2D;                      /* marco tipo madera */
  --board-radius:18px; --cell-radius:8px; --cell-gap:4px;

  /* Bloqueadores (metal) */
  --blocker:#5B6478; --blocker-hi:#9AA3B8; --blocker-lo:#323848;
  --blocker-fill: linear-gradient(145deg,var(--blocker-hi),var(--blocker) 55%,var(--blocker-lo));

  /* 9 piezas: tono + luminosidad muy separados; cada pieza lleva además su símbolo (ver notas) */
  --p1:#E63946; /* rojo      ● */
  --p2:#FF8C1A; /* naranja   ▲ */
  --p3:#FFD23F; /* amarillo  ★ */
  --p4:#7BC950; /* verde     ◆ */
  --p5:#0B7A5C; /* verde oscuro ■ */
  --p6:#22C3E6; /* cian      ✚ */
  --p7:#3654FF; /* azul      ⬟ */
  --p8:#8E44EC; /* morado    ♥ */
  --p9:#FF5FA2; /* rosa      ✿ */

  /* Acciones y estados */
  --primary:#FFC531; --primary-dark:#C98A00;  /* botón principal amarillo */
  --success:#2ECC71; --danger:#FF4D5E; --info:#22C3E6;

  /* Tipografía */
  --font-title:'Baloo 2', system-ui, sans-serif;  /* logo, títulos, cuenta atrás */
  --font-ui:'Nunito', system-ui, sans-serif;      /* todo lo demás */
  --fs-xl:clamp(2.2rem,9vw,3rem); --fs-l:1.5rem; --fs-m:1.125rem; --fs-s:.95rem;

  /* Táctil */
  --tap-min:48px; --btn-h:56px; --btn-radius:16px;

  /* Sombras */
  --shadow-soft:0 6px 18px rgba(20,10,60,.35);
  --piece-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 4px 0 rgba(0,0,0,.25);

  /* Movimiento */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --t-fast:120ms; --t-med:260ms; --t-slow:600ms;
}

body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text-on-dark);font-family:var(--font-ui);font-weight:600}

/* Tablero */
.board{background:var(--board);border:6px solid var(--board-frame);border-radius:var(--board-radius);
  padding:var(--cell-gap);display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cell-gap);
  box-shadow:var(--shadow-soft), inset 0 2px 6px rgba(0,0,0,.12);width:min(92vw,420px);aspect-ratio:1}
.cell{background:var(--cell);border-radius:var(--cell-radius);box-shadow:inset 0 2px 3px var(--cell-line)}
.cell.blocker{background:var(--blocker-fill);border-radius:50%;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--blocker-lo)}

/* Piezas: cada celda de pieza es un "caramelo" con relieve */
.piece-cell{border-radius:var(--cell-radius);box-shadow:var(--piece-shadow);position:relative}
.piece-cell::after{content:attr(data-sym);position:absolute;inset:0;display:grid;place-items:center;
  font-size:.9em;color:rgba(0,0,0,.28)}            /* símbolo para daltónicos */
.piece.dragging{transform:scale(1.08);filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));transition:transform var(--t-fast)}
.piece.invalid{animation:shake 300ms}
.piece.placed{animation:snap var(--t-med) var(--ease-pop)}

/* Botones */
.btn{min-height:var(--btn-h);min-width:var(--tap-min);padding:0 24px;border:0;border-radius:var(--btn-radius);
  font:800 var(--fs-m) var(--font-ui);background:var(--primary);color:var(--text);
  box-shadow:0 5px 0 var(--primary-dark);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--primary-dark)}
.btn.secondary{background:var(--surface);box-shadow:0 5px 0 #B9B2E6}
:focus-visible{outline:4px solid var(--info);outline-offset:3px}

/* Cuenta atrás 3-2-1-¡YA! */
.countdown{font:800 clamp(5rem,30vw,9rem)/1 var(--font-title);color:var(--primary);
  text-shadow:0 6px 0 var(--primary-dark),0 12px 24px rgba(0,0,0,.4);animation:count 900ms var(--ease-pop) both}

/* Keyframes */
@keyframes snap{0%{transform:scale(1.15)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes count{0%{transform:scale(2.2);opacity:0}40%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:0}}
@keyframes board-win{0%,100%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 0 8px var(--primary),var(--shadow-soft)}}
.board.complete{animation:board-win 700ms var(--ease-pop) 2}

/* reduced-motion: la regla global de 1ms se ha sustituido por las reglas concretas de animaciones.css (y app.css) */