/* ============================================================
   Lig 4 — tema sunset.
   ============================================================ */

.sj-game-host:has(.l4) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
  --l4-board:          #4338ca;     /* azul-violeta vibrante */
  --l4-board-dark:     #312e81;
  --l4-disc-p1:        #fbbf24;     /* amarelo do jogador */
  --l4-disc-p1-dark:   #b45309;
  --l4-disc-p2:        #ef4444;     /* vermelho da CPU */
  --l4-disc-p2-dark:   #7f1d1d;
}
.sj-game-host:has(.l4),
body:has(.sj-game-stage) .sj-game-host:has(.l4) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.l4) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.l4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Board ============ */
.l4-board-wrap {
  /* --cell setado pelo JS conforme stage */
  display: grid;
}
.l4-board {
  display: grid;
  grid-template-columns: repeat(7, var(--cell, 60px));
  grid-template-rows:    repeat(6, var(--cell, 60px));
  gap: 6px;
  padding: 8px;
  background: linear-gradient(160deg, var(--l4-board) 0%, var(--l4-board-dark) 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(45, 36, 56, 0.30);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.l4-board.is-locked,
.l4-board.is-cpu-turn { cursor: default; }

/* Cada "slot" (buraco do tabuleiro) — fundo escuro pra simular vazio */
.l4-slot {
  width: var(--cell, 60px);
  height: var(--cell, 60px);
  background: radial-gradient(circle at 35% 35%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 70%);
  border-radius: 50%;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.l4-slot.is-hint { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35); }

/* Disco que cai dentro do slot — translate animado via classe */
.l4-disc {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--c, #fbbf24) 0%, var(--cd, #b45309) 80%);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.35),
    inset 0 3px 6px rgba(255,255,255,0.25),
    0 1px 3px rgba(0,0,0,0.4);
}
.l4-disc.p1 { --c: var(--l4-disc-p1); --cd: var(--l4-disc-p1-dark); }
.l4-disc.p2 { --c: var(--l4-disc-p2); --cd: var(--l4-disc-p2-dark); }

/* Animação de queda — translateY de fora pra dentro do slot. Distância setada
   inline via --drop (sempre começa acima do tabuleiro). Curva ease-in pra dar
   aceleração de gravidade, com bouncezinho no impacto. */
@keyframes l4-drop {
  0%   { transform: translateY(var(--drop, -400px)); animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
  68%  { transform: translateY(0);                   animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  80%  { transform: translateY(-10px);               animation-timing-function: cubic-bezier(.55, .055, .675, .19); }
  92%  { transform: translateY(0);                   animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  97%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.l4-disc.is-falling {
  animation: l4-drop .38s linear;
}

/* Disco vencedor */
.l4-disc.is-win {
  animation: l4-win-pulse .55s ease-out 3;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.35),
    inset 0 3px 6px rgba(255,255,255,0.25),
    0 0 0 3px var(--sj-gold), 0 0 16px rgba(255, 217, 61, 0.65);
}
@keyframes l4-win-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.10); }
}

/* Preview/hover na coluna */
.l4-col-preview {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c, #fbbf24) 0%, var(--cd, #b45309) 80%);
  opacity: 0.22;
  pointer-events: none;
}
/* Realce sutil do "trilho" da coluna sob o mouse — JS marca slots com
   .is-hover-col. */
.l4-slot.is-hover-col {
  background:
    radial-gradient(circle at 35% 35%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.68) 70%),
    rgba(255, 255, 255, 0.06);
}

/* Indicador "vez do…" via overlay tabuleiro */
.l4-board.is-cpu-turn { filter: saturate(0.85); }

/* ============ Mobile ============ */
@media (max-width: 600px) {
  .l4 { gap: 10px; padding: 12px; }
  .l4-board { gap: 4px; padding: 6px; }
}