@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

/* ---------- Theme variables ---------- */
:root {
  --bg: #f5f2e9;
  --text: #2c2c2c;
  --board-wood: #8b5e3c;
  --board-wood-dark: #5c3b24;
  --slot: #0b1021;
  --red: #b91c1c;
  --yellow: #2563eb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --board-wood-postolje: #8b5e3c;
  --board-wood-dark-postolje: #270209;
}

/* ---------- Base layout ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background-color: #000;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background-image: url(connect-4-bckg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow-x: hidden;
}

#naslov {
  font-family: "Macondo", cursive;
  font-weight: 400;
  color: white;
  position: fixed;
  left: 65%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 10;
  margin: 0;
}

.cf-app {
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1rem;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Board ---------- */
.cf-board {
  height: 82vh;
  aspect-ratio: 7 / 6;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(45deg, var(--board-wood), #d2a679);
  border: 18px solid var(--board-wood-dark);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.2),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    0 14px 28px rgba(0, 0, 0, 0.6);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.cf-board::before,
.cf-board::after {
  content: "";
  position: absolute;
  bottom: -50px;
  width: 24px;
  height: 70px;
  background: linear-gradient(180deg, var(--board-wood-postolje), var(--board-wood-dark-postolje));
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.cf-board::before { left: 15%; }
.cf-board::after { right: 15%; }

.cf-cell {
  background: radial-gradient(120% 120% at 50% 45%, #222 0%, var(--slot) 60%, #000 100%);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* ---------- Animations & Disc Effects ---------- */
@keyframes dropBounce {
  0% { transform: translateY(-500px); opacity: 0.4; }
  70% { transform: translateY(0); opacity: 0.7; }
  85% { transform: translateY(-20px); opacity: 0.9; }
  100% { transform: translateY(0); opacity: 1; }
}

.cf-slot__disc {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease;
  position: relative; 
}

.cf-slot__disc.animate {
  animation: dropBounce 0.5s ease-out;
}

.cf-slot__disc.red {
  background: radial-gradient(120% 120% at 30% 30%, #dc2626 0%, var(--red) 40%, #7f1d1d 100%);
  box-shadow: 0 6px 0 #7f1d1d inset, 0 10px 18px rgba(0, 0, 0, 0.35);
}

.cf-slot__disc.yellow {
  background: radial-gradient(120% 120% at 30% 30%, #3b82f6 0%, var(--yellow) 45%, #1e3a8a 100%);
  box-shadow: 0 6px 0 #1e3a8a inset, 0 10px 18px rgba(0, 0, 0, 0.35);
}

.cf-cell:hover .cf-slot__disc { transform: translateY(-2px) scale(1.05); }

/* ---------- Winning Highlight (Scale & Dot) ---------- */
.cf-slot__disc.winning-highlight {
  transform: scale(1.18);
  box-shadow: 0 6px 0 #090307 inset, 0 10px 18px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cf-slot__disc.winning-highlight::after {
  content: "";
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* ---------- Controls ---------- */
.cf-controls {
  position: fixed;
  top: 2.3rem;
  right: 5rem;
  z-index: 100;
}

.cf-btn {
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: #fff;
  background: linear-gradient(180deg, #8b5e3c 0%, #5c3b24 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: scale(1.06);
  font-family: "Bree Serif", serif;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.1s;
}
.cf-btn:active { transform: scale(1); }

/* ---------- Score ---------- */
.cf-score {
  display: flex;
  width: 240px;
  height: 110px;
  border-radius: 10px;
  position: fixed;
  bottom: 150px;
  left: 20px;
  font-family: "Bree Serif", serif;
  color: white;
  text-align: center;
  font-size: 2.4rem;
  z-index: 5;
}

#pl-one, #pl-two {
  width: 120px;
  height: 110px;
  border: 4px solid white;
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 20px;
}
#pl-one { background: rgb(8, 8, 186); }
#pl-two { background: rgb(221, 2, 2); }

/* ---------- Piles ---------- */
.cf-piles {
  position: fixed;
  bottom: 70px;
  right: 80px;
  z-index: 5;
}

.pile {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  height: 75vh;
  width: 70px;
  border: 2px solid var(--board-wood-dark);
  border-radius: 6px;
  padding: 4px;
  background: linear-gradient(180deg, #d2a679, #8b5e3c);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease;
}

.red-pile { right: 0; }
.yellow-pile { right: 100px; }

.pile .disc {
  width: 50px;
  height: calc(75vh / 21);
  min-height: 8px;
  border-radius: 50% / 20%;
  flex-shrink: 0;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pile .disc.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

.red-pile .disc { background: linear-gradient(to bottom, #dc2626 0%, var(--red) 20%, var(--red) 80%, #7f1d1d 100%); }
.yellow-pile .disc { background: linear-gradient(to bottom, #3b82f6 0%, var(--yellow) 20%, var(--yellow) 80%, #1e3a8a 100%); }

.pile.active { box-shadow: 0 0 12px 4px rgba(0, 255, 0, 0.8); border-color: #00ff00; }
.pile.inactive { opacity: 0.6; }
.pile.draw {
  box-shadow: 0 0 12px 8px rgba(210, 232, 210, 0.8);
  border-color: #fcfcfc;
  border-width: 3px;
  transition: all 0.3s ease;    
}

.drawbckg {
  background: rgba(236, 243, 245, 0.933);
}

/* ---------- Winner Display ---------- */
.cf-winner-display {
  position: fixed;
  left: 42px;
  top: 20%;
  z-index: 1000;
  transition: all 0.3s ease;
}

.cf-winner-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cf-winner-disc.red { background: radial-gradient(120% 120% at 30% 30%, #dc2626 0%, var(--red) 40%, #7f1d1d 100%); box-shadow: 0 6px 0 #7f1d1d inset, 0 10px 30px rgba(0,0,0,0.5); }
.cf-winner-disc.yellow { background: radial-gradient(120% 120% at 30% 30%, #3b82f6 0%, var(--yellow) 45%, #1e3a8a 100%); box-shadow: 0 6px 0 #1e3a8a inset, 0 10px 30px rgba(0,0,0,0.5); }
.cf-winner-text { font-size: 2.5rem; font-weight: 700; color: white; text-align: center; }

/* ---------- Responsiveness ---------- */
@media (max-width: 1220px) {
  body { overflow-y: auto; }
  .cf-app { flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 50px; height: auto; }
  #naslov { position: relative; left: auto; transform: none; margin-bottom: 15px; }

  /* Winner image placed horizontally centered at the upper part of the board */
  .cf-winner-display { 
    position: absolute; 
    top: 50px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1100;
    pointer-events: none;
  }
  .cf-winner-disc { width: 200px; height: 200px; }

  .cf-score { position: relative; bottom: auto; left: auto; margin: 0 auto 20px auto; width: 240px; height: 110px; font-size: 2.4rem; order: 2; }
  .cf-board { height: 55vh; margin: 0 auto; order: 3; z-index: 2; }
  .cf-piles { position: relative; bottom: auto; right: auto; display: flex; flex-direction: column; align-items: center; gap: 0px; margin-top: 60px; margin-bottom: 80px; width: 100%; order: 4; }
  .pile { position: relative; right: auto; transform: rotate(-90deg); height: 400px; width: 65px; margin: -160px 0; scale: 1; }
  .pile .disc { width: 45px; height: 15px; margin-bottom: 2px; }
  .red-pile, .yellow-pile { right: auto; }
}

@media (max-width: 600px) {
  .cf-board { height: 45vh; }
  .cf-winner-display { top: 30px; } /* Slightly higher for small screens */
  .cf-winner-disc { width: 200px; height: 200px; }

  .pile { height: 320px; width: 55px; margin: -130px 0; scale: 0.9; }
  .pile .disc { width: 38px; height: 12px; }
  .cf-score { width: 200px; height: 80px; font-size: 1.8rem; }
  #pl-one, #pl-two { height: 80px; width: 100px; padding-top: 15px; }
  .cf-winner-text { font-size: 1.8rem; }
}