/* Main theme */
:root {
  --field-green-dark: #036d27;
  --field-green-light: #0cb44b;
  --white-line: #ffffff;
  --blue-team: #3b82f6;
  --red-team: #ef4444;
  --npc-blue: #60a5fa;
  --npc-red: #f87171;
  --ball-color: #fff;
  --ball-shadow: rgba(0, 0, 0, 0.3);
  --powerup-gold: rgb(255, 215, 0);
  --font: "Poppins", sans-serif;
}

/* global shit */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at top, #022b13, #011b0b);
  color: #fff;
  font-family: var(--font);
  text-align: center;
  user-select: none;
  overflow-x: hidden;
}

/* === Start Menu Popup === */
#startMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 14, 95, 0.705); /* dark transparent overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* === Inner Box of the Menu === */
#BeginScherm {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 26, 255, 0.3);
}

 #startMenu img {
    width: 450px;
    height: 250px;
}

#BeginScherm h1 {
    color: white;
    text-align: center;
    margin-top: 75px;
    font-size: 105px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#BeginScherm .button-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#startBtn, #settingsBtn {
    display: block;
    margin: 10px auto;
    width: 350px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 10px 100px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
}

.overlay-content a {
  padding: 8px;
  text-decoration: none;
  font-size: 2em;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay-content a:hover {
  color: #ff9800;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 3em;
  color: #fff;
}

#countrySelectContent {
  padding: 40px;
  border-radius: 20px;
  text-align: center;
}

.selection-container {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-bottom: 1em;
}

.player-select {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

#countrySelectContent h2{
  color: white;
    text-align: center;
    margin-top: 5px;
    font-size: 50px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#countrySelectContent p{
  color: white;
    text-align: center;
    margin-top: 5px;
    font-size: 25px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#p1-buttons button, #p2-buttons button {
  display: block;
    margin: 5px auto;
    width: 175px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#p1-buttons button.selected, #p2-buttons button.selected  {
  background-color: rgb(144, 127, 255);
  border: solid 4px rgb(46, 14, 255);
  color: rgb(0, 0, 0);
}

#randomize, #countryStartBtn {
  display: block;
    margin: 5px auto;
    width: 175px;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

/* veld */
#veld {
  width: 1450px;
  height: 700px;
  margin: 40px auto;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--field-green-dark) 0%, var(--field-green-light) 100%);
  border: 4px solid var(--white-line);
  z-index: 708px;
  box-shadow: 0 0 40px rgba(0, 255, 100, 0.3);
}

/* veld lines */
[id^="line"] {
  height: 100%;
  position: absolute;
  top: 0;
}

#middleLine {
  height: 100%;
  width: 4px;
  background-color: var(--white-line);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

#middlecircle {
  height: 200px;
  width: 200px;
  border: 4px solid var(--white-line);
  border-radius: 50%;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

.powerup{
  background: var(--powerup-gold);
  border: 2px solid #ffed86;
  box-shadow: 0 0 20px rgba(255, 238, 0, 0.623);
  font-size: 29px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  height: 35px;
  width: 35px;
  display: none;
  position: absolute;
  border-radius: 8px;
  transition: transform 0.05s ease;
  z-index: 999;
}

/* goals */
#goal1 {
  position: absolute;
  width: 10px;
  height: 500px;
  background-color: var(--white-line);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  top: 100px;
  left: 0;
}

#goal2 {
  position: absolute;
  width: 10px;
  height: 500px;
  background-color: var(--white-line);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  top: 100px;
  right: 8px; 
}

#player1, #player2{
  height: 50px;
  width: 50px;
  position: absolute;
  border-radius: 8px;
  transition: transform 0.05s ease;
  z-index: 999;
}

/* Players */
#npc1_1, #npc1_2,
#npc2_1, #npc2_2{
  height: 50px;
  width: 50px;
  position: absolute;
  border-radius: 8px;
  transition: transform 0.05s ease;
  z-index: 999;
}

/* Player 1 - blue team */
#player1 {
  left: 20px;
  top: 350px;
  background: var(--blue-team);
  border: 2px solid #93c5fd;
  box-shadow: 0 0 15px rgba(59,130,246,0.6);
}

#player1 img, #player2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* Player 2 — red team */
#player2 {
  left: 1380px;
  top: 350px;
  background: var(--red-team);
  border: 2px solid #fca5a5;
  box-shadow: 0 0 15px rgba(239,68,68,0.6);
}

/* NPCs — blue team */
#npc1_1 {
  left: 150px;   
  top: 200px;
  background: var(--npc-blue);
  border: 2px solid #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.4);
}

#npc1_2 {
  left: 300px; 
  top: 500px;
  background: var(--npc-blue);
  border: 2px solid #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.4);
}

/* NPCs — red team */
#npc2_1 {
  left: 1000px; 
  top: 200px;
  background: var(--npc-red);
  border: 2px solid #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.4);
}

#npc2_2 {
  left: 1000px; 
  top: 500px;
  background: var(--npc-red);
  border: 2px solid #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.4);
}


/* ball */
#ball {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--ball-color), #ccc);
  border: 2px solid var(--white-line);
  box-shadow: 0 0 20px var(--ball-shadow);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease;
}


/* score and timer */
h1#score, h1#timer {
  font-size: 2rem;
  margin-top: 10px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.6);
}

h2 {
  color: #ddd;
  margin-top: 5px;
  font-weight: 400;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 14, 95, 0.705); 
  display: none; 
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#popup-content {
  padding: 40px;
  border-radius: 20px;
  text-align: center;
}

@keyframes popupIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#popup-content h2 {
  color: white;
  text-align: center;
  margin-top: 25px;
  font-size: 75px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#popup-content p {
  color: white;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 50px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#popup-content button {
  display: block;
  margin: 10px auto;
  width: 350px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding: 10px 100px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  cursor: pointer;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

 img {
  width: 225px;
  height: 125px;
}