.game-shell[data-theme="connect4"] {
  --game-accent: #ff7b54;
  --game-accent-2: #ffe063;
  --game-accent-soft: rgba(255, 123, 84, 0.22);
  --game-accent-deep: rgba(255, 224, 99, 0.12);
}

.connect4-stage {
  display: grid;
  gap: 14px;
}

.connect4-banner {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 123, 84, 0.2);
  background: rgba(255, 123, 84, 0.08);
  color: #ffe6dc;
  line-height: 1.6;
}

.connect4-banner.is-attack {
  border-color: rgba(132, 255, 191, 0.24);
  background: rgba(132, 255, 191, 0.1);
  color: #e8fff2;
}

.connect4-banner.is-block {
  border-color: rgba(255, 224, 99, 0.24);
  background: rgba(255, 224, 99, 0.1);
  color: #fff7d8;
}

.connect4-drop-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(48px, 1fr));
  gap: 10px;
}

.connect4-drop {
  min-height: 50px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(7, 14, 28, 0.82);
  color: #fff5d0;
}

.connect4-drop.is-suggested {
  border-color: rgba(255, 224, 99, 0.28);
  box-shadow: 0 16px 26px rgba(255, 224, 99, 0.12);
}

.connect4-drop.is-winning-move {
  border-color: rgba(132, 255, 191, 0.34);
  box-shadow: 0 18px 28px rgba(132, 255, 191, 0.14);
}

.connect4-drop.is-blocking {
  border-color: rgba(255, 123, 84, 0.34);
  box-shadow: 0 18px 28px rgba(255, 123, 84, 0.14);
}

.connect4-drop span {
  font-family: var(--font-title);
  font-size: 1rem;
}

.connect4-drop small {
  color: rgba(255, 255, 255, 0.46);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
}

.connect4-rim {
  padding: 18px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(61, 81, 166, 0.96), rgba(22, 34, 70, 0.98)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 40%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22);
}

.connect4-board {
  grid-template-columns: repeat(7, minmax(44px, 76px));
  gap: 10px;
}

.connect4-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.18), rgba(3, 8, 24, 0.96) 68%);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.26);
}

.connect4-cell.is-p1 {
  background: radial-gradient(circle at 30% 30%, #ffd6c7, #ff7b54 48%, #991d11 100%);
  box-shadow: 0 10px 22px rgba(255, 123, 84, 0.26);
}

.connect4-cell.is-p2 {
  background: radial-gradient(circle at 30% 30%, #fff6c2, #ffe063 42%, #9d6b02 100%);
  box-shadow: 0 10px 22px rgba(255, 224, 99, 0.22);
}

.connect4-cell.is-last {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 12px 22px rgba(0, 0, 0, 0.24);
}

.connect4-cell.is-winning {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.28),
    0 18px 32px rgba(255, 224, 99, 0.2);
}

@media (max-width: 560px) {
  .connect4-drop-row,
  .connect4-board {
    gap: 6px;
  }

  .connect4-rim {
    padding: 12px;
    border-radius: 24px;
  }
}