:root {
  --ink: #16202f;
  --muted: #667085;
  --panel: #f8fafc;
  --board: #1657c8;
  --board-dark: #0f3f93;
  --slot: #e7edf5;
  --red: #e63946;
  --yellow: #ffd166;
  --green: #0f8b8d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 0;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(15, 139, 141, 0.14), transparent 34%),
    linear-gradient(315deg, rgba(255, 209, 102, 0.24), transparent 36%),
    #f4f7fb;
  font-family: Arial, Helvetica, sans-serif;
}

.game {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px;
}

header,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

header > div {
  width: 100%;
  min-width: 0;
}

footer {
  flex-wrap: wrap;
}

body.room-panel-collapsed .game {
  grid-template-rows: auto auto 0;
  gap: 8px;
  padding-bottom: 10px;
}

body.room-panel-collapsed footer {
  height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
}

#contextLabel {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hidden {
  display: none !important;
}

button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  color: white;
  background: var(--green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  background: #a3aab5;
  cursor: not-allowed;
}

.header-actions button {
  min-width: 68px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 13px;
}

#makeTurnsButton {
  background: #6738e8;
}

.play-area {
  align-self: start;
  justify-self: center;
  display: grid;
  gap: 8px;
  width: min(92vmin, 720px);
}

.column-controls {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(5px, 1.2vmin, 10px);
  padding: 0 clamp(8px, 1.8vmin, 16px);
}

.drop-button {
  position: relative;
  min-height: clamp(28px, 5vmin, 42px);
  padding: 0;
  border: 2px solid rgba(22, 87, 200, 0.16);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
}

.drop-button::before {
  content: "";
  position: absolute;
  inset: 8px 50% auto auto;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateX(50%) rotate(45deg);
}

.drop-button:hover:not(:disabled),
.drop-button:focus-visible {
  outline: 0;
  border-color: var(--green);
  background: white;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(5px, 1.2vmin, 10px);
  aspect-ratio: 7 / 6;
  padding: clamp(8px, 1.8vmin, 16px);
  border: 3px solid var(--board-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 28%),
    var(--board);
  box-shadow: 0 18px 40px rgba(22, 32, 47, 0.2);
}

.cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 30%, transparent 31%),
    var(--slot);
  box-shadow:
    inset 0 5px 12px rgba(22, 32, 47, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.2);
}

.cell.red {
  background:
    radial-gradient(circle at 34% 28%, #ff8a8f, var(--red) 58%, #9f1f2c 100%);
}

.cell.yellow {
  background:
    radial-gradient(circle at 34% 28%, #fff4b8, var(--yellow) 58%, #c78313 100%);
}

.cell.last-move::after,
.cell.winning::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(22, 32, 47, 0.15);
  pointer-events: none;
}

.cell.winning::after {
  inset: 10%;
  border-color: #24e0a4;
  box-shadow: 0 0 16px rgba(36, 224, 164, 0.85);
}

.player-color {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #d0d8e4;
  border-radius: 8px;
  color: #314055;
  background: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.player-color::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50%;
  background: #d0d8e4;
}

.player-color[data-color="red"]::before {
  background: var(--red);
}

.player-color[data-color="yellow"]::before {
  background: var(--yellow);
}

.turns-panel {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px;
  order: 3;
}

.turn-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d0d8e4;
  border-radius: 999px;
  color: #314055;
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.turn-chip.red {
  border-color: rgba(230, 57, 70, 0.3);
}

.turn-chip.yellow {
  border-color: rgba(199, 131, 19, 0.34);
}

.turn-chip.active {
  color: #fff;
  background: var(--green);
  box-shadow: 0 8px 18px rgba(15, 139, 141, 0.18);
}

.result-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: grid;
  min-width: min(78vw, 340px);
  padding: 26px 32px;
  border: 2px solid #24e0a4;
  border-radius: 8px;
  color: #111827;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: 0 24px 60px rgba(22, 32, 47, 0.3);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.result-overlay.hidden,
.result-burst.hidden {
  display: none;
}

.result-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #24e0a4;
  box-shadow:
    0 -82px 0 #e63946,
    58px -58px 0 #ffd166,
    82px 0 0 #1657c8,
    58px 58px 0 #0f8b8d,
    0 82px 0 #e63946,
    -58px 58px 0 #ffd166,
    -82px 0 0 #1657c8,
    -58px -58px 0 #0f8b8d;
  transform: translate(-50%, -50%) scale(0.2);
  animation: burst-pop 1.1s ease-out infinite;
}

.result-overlay[data-result="lose"],
.result-overlay[data-result="draw"] {
  border-color: #94a3b8;
}

.result-message {
  position: relative;
  z-index: 1;
  color: #0f766e;
  font-size: clamp(48px, 11vmin, 92px);
  font-weight: 900;
  line-height: 1;
}

.result-overlay[data-result="lose"] .result-message,
.result-overlay[data-result="draw"] .result-message {
  color: #475569;
}

@keyframes burst-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  68% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1) rotate(20deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18) rotate(32deg);
  }
}

@media (max-width: 620px) {
  .game {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  header {
    align-items: stretch;
  }

  .header-actions {
    flex: 0 0 auto;
  }

  .header-actions button {
    min-width: 72px;
    padding-inline: 10px;
  }

  h1 {
    font-size: 26px;
  }
}