.legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.legend b.r { color: #e10600; }
.legend b.y { color: #facc15; }

.l4-frame {
  width: min(560px, 100%);
  margin: 8px auto 24px;
  background: #0a0a0a;
  border: 1px solid var(--line);
  padding: 14px 14px 18px;
}
.l4-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.l4-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.l4-board .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 4px;
}
.l4-board .column:hover { background: rgba(255, 255, 255, 0.04); }
.l4-board .column.full { cursor: not-allowed; opacity: 0.55; }
.l4-board .cell {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  background: #111;
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.l4-board .cell.red,
.l4-board .cell.yellow {
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35);
}
.l4-board .cell.red {
  background: radial-gradient(circle at 32% 28%, #ff4d4d, #e10600 46%, #8b0000);
}
.l4-board .cell.yellow {
  background: radial-gradient(circle at 32% 28%, #fff3a0, #facc15 48%, #ca8a04);
}
.l4-board .cell.ghost-red {
  background: radial-gradient(circle at 32% 28%, rgba(225, 6, 0, 0.35), rgba(225, 6, 0, 0.12));
}
.l4-board .cell.ghost-yellow {
  background: radial-gradient(circle at 32% 28%, rgba(250, 204, 21, 0.4), rgba(250, 204, 21, 0.12));
}
.l4-board .cell.drop { animation: l4drop 0.38s ease-out; }
.l4-board .cell.win {
  animation: l4win 0.7s ease-in-out infinite;
  box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, 0.7);
}

@keyframes l4drop {
  0% { transform: translateY(-180%); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes l4win {
  0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, 0.35); }
  50% { transform: scale(1.12); filter: brightness(1.35); box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255, 255, 255, 0.95); }
}

@media (max-width: 520px) {
  .l4-board, .l4-cols { gap: 6px; }
}