/* ============================================================
   Connect 4 Solver – Main Stylesheet
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --red:       #e63946;
  --yellow:    #f4d03f;
  --blue-dark: #1a1a2e;
  --blue-mid:  #16213e;
  --blue-board:#0f3460;
  --blue-cell: #0a2744;
  --white:     #f0f0f0;
  --gray:      #8899aa;
  --green:     #2ecc71;
  --orange:    #e67e22;
  --shadow:    0 4px 24px rgba(0,0,0,0.5);
  --radius:    10px;
  --cell-size: 72px;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--blue-dark);
  color: var(--white);
}

a { color: #7ec8e3; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ─────────────────────────────────────────────── */
#site-header {
  background: var(--blue-mid);
  border-bottom: 2px solid var(--blue-board);
  padding: 0 24px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 28px;
  color: var(--red);
  line-height: 1;
}

.logo-area h1 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}

.header-nav {
  display: flex;
  gap: 8px;
}

.nav-link {
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray);
  transition: background 0.2s, color 0.2s;
}

.nav-link:hover, .nav-link.active {
  background: var(--blue-board);
  color: var(--white);
  text-decoration: none;
}

/* ── Main layout ─────────────────────────────────────────── */
#main-content {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 16px;
}

.game-wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
}

/* ── Side panels ─────────────────────────────────────────── */
.side-panel {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Info box ────────────────────────────────────────────── */
.info-box {
  background: var(--blue-mid);
  border: 2px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.status-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--red);
  transition: color 0.3s;
}

.status-icon.yellow { color: var(--yellow); }
.status-icon.green  { color: var(--green); }
.status-icon.gray   { color: var(--gray); }

.status-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}

/* ── Score info ──────────────────────────────────────────── */
.score-info {
  background: var(--blue-mid);
  border: 2px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: center;
}

.score-label {
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 4px;
}

.score-value {
  font-size: 1.4rem;
  font-weight: 700;
}

.score-value.win  { color: var(--green); }
.score-value.draw { color: var(--yellow); }
.score-value.loss { color: var(--red); }

/* ── Move counter & position ─────────────────────────────── */
.move-counter, .position-display {
  background: var(--blue-mid);
  border: 1px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--gray);
}

.move-counter span:nth-child(2) {
  color: var(--white);
  font-weight: 700;
}

.position-display label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pos-seq {
  color: var(--white);
  font-family: monospace;
  font-size: 1rem;
  word-break: break-all;
  min-height: 20px;
}

/* ── Board area ──────────────────────────────────────────── */
.board-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Score bar ───────────────────────────────────────────── */
.score-bar {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  gap: 4px;
  margin-bottom: 4px;
  height: 36px;
}

.score-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  background: transparent;
  transition: background 0.3s, color 0.3s;
  cursor: default;
}

.score-cell.win  { background: rgba(46,204,113,0.25); color: var(--green); }
.score-cell.draw { background: rgba(244,208,63,0.25); color: var(--yellow); }
.score-cell.loss { background: rgba(230,57,70,0.25);  color: var(--red); }
.score-cell.invalid { background: transparent; color: var(--gray); opacity: 0.4; }

/* ── Drop arrows ─────────────────────────────────────────── */
.drop-arrows {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  gap: 4px;
  margin-bottom: 4px;
}

.drop-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 1.2rem;
  color: var(--gray);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s, transform 0.15s;
  user-select: none;
}

.drop-arrow:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
  transform: translateY(2px);
}

.drop-arrow.red-turn    { color: var(--red); }
.drop-arrow.yellow-turn { color: var(--yellow); }
.drop-arrow.disabled    { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

/* ── Board ───────────────────────────────────────────────── */
.board {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  grid-template-rows: repeat(6, var(--cell-size));
  gap: 4px;
  background: var(--blue-board);
  padding: 8px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: var(--blue-cell);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  overflow: hidden;
}

.cell:hover {
  background: #0d3055;
}

.disc {
  width: calc(var(--cell-size) - 10px);
  height: calc(var(--cell-size) - 10px);
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s, transform 0.2s;
  transform: scale(0);
}

.disc.red {
  background: radial-gradient(circle at 35% 35%, #ff6b6b, var(--red));
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(230,57,70,0.6);
}

.disc.yellow {
  background: radial-gradient(circle at 35% 35%, #ffe066, var(--yellow));
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(244,208,63,0.6);
}

.disc.winning {
  animation: pulse-win 0.8s ease-in-out infinite alternate;
}

@keyframes pulse-win {
  from { box-shadow: 0 0 8px 2px rgba(255,255,255,0.4); }
  to   { box-shadow: 0 0 20px 6px rgba(255,255,255,0.9); }
}

/* Drop animation */
@keyframes drop-in {
  from { transform: scale(1) translateY(-300px); }
  to   { transform: scale(1) translateY(0); }
}

.disc.drop-anim {
  animation: drop-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Column numbers ──────────────────────────────────────── */
.col-numbers {
  display: grid;
  grid-template-columns: repeat(7, var(--cell-size));
  gap: 4px;
  margin-top: 6px;
}

.col-num {
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray);
  font-weight: 600;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
  width: 100%;
}

.btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--blue-board); color: var(--white); }
.btn-secondary { background: #2c3e50; color: var(--white); }
.btn-danger    { background: #7f1d1d; color: #fca5a5; }

/* Auto-play button */
.btn-autoplay {
  background: linear-gradient(135deg, #1a472a, #2d6a4f);
  color: #52b788;
  border: 1px solid #52b788;
  position: relative;
  overflow: hidden;
}
.btn-autoplay:hover { opacity: 0.9; }
.btn-autoplay.active {
  background: linear-gradient(135deg, #52b788, #40916c);
  color: #fff;
  border-color: #74c69d;
  animation: autoplay-pulse 1.5s ease-in-out infinite;
}
@keyframes autoplay-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.5); }
  50%       { box-shadow: 0 0 12px 4px rgba(82, 183, 136, 0.4); }
}

.btn-icon { font-size: 1rem; }

/* ── Mode selector ───────────────────────────────────────── */
.mode-group {
  background: var(--blue-mid);
  border: 1px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.mode-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  margin-bottom: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 0;
  color: var(--white);
}

.radio-label input { accent-color: var(--blue-board); cursor: pointer; }

/* ── Solution panel ──────────────────────────────────────── */
.solution-panel {
  background: var(--blue-mid);
  border: 1px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 14px;
}

.solution-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  margin-bottom: 10px;
}

.solution-scores {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.sol-score {
  text-align: center;
  padding: 6px 2px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}

.sol-score.win  { background: rgba(46,204,113,0.2); color: var(--green); }
.sol-score.draw { background: rgba(244,208,63,0.2); color: var(--yellow); }
.sol-score.loss { background: rgba(230,57,70,0.2);  color: var(--red); }
.sol-score.invalid { background: transparent; color: var(--gray); opacity: 0.4; }

.solution-legend {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  margin-bottom: 8px;
}

.leg {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.leg.win  { background: rgba(46,204,113,0.2); color: var(--green); }
.leg.draw { background: rgba(244,208,63,0.2); color: var(--yellow); }
.leg.loss { background: rgba(230,57,70,0.2);  color: var(--red); }

.solution-note {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.4;
}

/* ── History panel ───────────────────────────────────────── */
.history-panel {
  background: var(--blue-mid);
  border: 1px solid var(--blue-board);
  border-radius: var(--radius);
  padding: 12px 14px;
  max-height: 200px;
  overflow-y: auto;
}

.history-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray);
  margin-bottom: 8px;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.history-move {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.history-move.red    { background: var(--red);    color: white; }
.history-move.yellow { background: var(--yellow); color: #333; }

/* ── Loading overlay ─────────────────────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  gap: 16px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255,255,255,0.15);
  border-top-color: var(--blue-board);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1rem;
  color: var(--gray);
}

/* ── Toast notification ──────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--blue-board);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
  z-index: 500;
  pointer-events: none;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ── Footer ──────────────────────────────────────────────── */
#site-footer {
  text-align: center;
  padding: 24px 16px;
  color: var(--gray);
  font-size: 0.82rem;
  border-top: 1px solid var(--blue-board);
  margin-top: 40px;
}

#site-footer p { margin: 4px 0; }

/* ── About page ──────────────────────────────────────────── */
.about-page #main-content,
.about-wrapper {
  max-width: 720px;
  margin: 0 auto;
}

.about-wrapper h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  color: var(--white);
}

.about-wrapper h3 {
  font-size: 1.1rem;
  margin: 24px 0 10px;
  color: #7ec8e3;
}

.about-wrapper p {
  line-height: 1.7;
  color: #ccd6e0;
  margin-bottom: 12px;
}

.about-wrapper ul, .about-wrapper ol {
  padding-left: 24px;
  color: #ccd6e0;
  line-height: 1.9;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.9rem;
}

.score-table th, .score-table td {
  padding: 10px 14px;
  border: 1px solid var(--blue-board);
  text-align: left;
}

.score-table th {
  background: var(--blue-board);
  color: var(--white);
}

.score-table td { color: #ccd6e0; }
.score-pos  { color: var(--green)  !important; font-weight: 700; }
.score-zero { color: var(--yellow) !important; font-weight: 700; }
.score-neg  { color: var(--red)    !important; font-weight: 700; }

.back-link { margin-top: 32px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --cell-size: 52px; }

  .game-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .side-panel {
    width: 100%;
    max-width: 520px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .side-panel > * { flex: 1 1 160px; }
}

@media (max-width: 520px) {
  :root { --cell-size: 42px; }
  .logo-area h1 { font-size: 1rem; }
}