:root {
      --primary-color: #ffffff;
      --accent-color: #fe5005;
      --safe-color: rgba(46, 204, 113, 0.85);
      --test-color: rgba(241, 196, 15, 0.85);
      --dark-square: rgba(0, 0, 0, 0.6);
      --light-square: rgba(255, 255, 255, 0.6);
      --board-max-size: 480px;
      --board-radius: 1rem;
      --glass-bg: rgba(255,255,255,0.2);
      --glass-blur: 10px;
    }
    * { box-sizing: border-box; }
    body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--primary-color);
  /* allow scrolling by default; mobile-specific JS already sets overflow when needed */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

    /* Full-screen background video */
    #bg-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
    }
    header {
    	color: white;
      text-align: center;
      padding: 1rem;
      font-size: 2rem;
      font-weight: 700;
      text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
	.controls {
	  display: flex;
	  gap: 1rem;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  max-width: 800px;
	  margin: 1rem auto;
	  padding: 1rem 2rem;
	  color: white;
	  border-radius: var(--board-radius);
	  backdrop-filter: blur(var(--glass-blur));
	  background: var(--glass-bg);
	}

    .controls input,
    .controls button {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
    }
    input[type="number"] {
      width: 60px;
      padding: 0.5rem;
      border: none;
      border-radius: 0.5rem;
      text-align: center;
      background: rgba(255,255,255,0.3);
      color: #000;
      outline: none;
    }
    button {
      padding: 0.5rem 1rem;
      background: var(--accent-color);
      border: none;
      border-radius: var(--board-radius);
      color: #fff;
      cursor: pointer;
      transition: transform 0.2s;
    }
    button:hover {
      transform: scale(1.05);
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 1rem;
      margin: 1rem;
    }
    #chessboard {
      display: grid;
      width: var(--board-max-size);
      height: var(--board-max-size);
      border: 4px solid var(--primary-color);
      border-radius: var(--board-radius);
      overflow: hidden;
      backdrop-filter: blur(var(--glass-blur));
      background: var(--glass-bg);
    }
    .square {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s, transform 0.2s;
    }
    .square:hover {
      transform: scale(1.1);
      z-index: 1;
    }
    .white { background-color: var(--light-square); }
    .black { background-color: var(--dark-square); }
    .safe-queen { }
    .queen { font-size: 1.5rem; text-shadow: 0 0 5px #000; }
    #Iterations {
      width: 300px;
      max-height: var(--board-max-size);
      overflow-y: auto;
      backdrop-filter: blur(var(--glass-blur));
      background: var(--glass-bg);
      padding: 1rem;
      border-radius: var(--board-radius);
      border: 1px solid rgba(255,255,255,0.4);
    }
    .alert {
      background: rgba(0,0,0,0.4);
      color: #fff;
      border: none;
      margin-bottom: 0.5rem;
      border-radius: 0.5rem;
    }
    
    
    .profile-img {
  height: 100px;
  border-radius: var(--board-radius);
  margin-bottom: 0.5rem;
  align-self: flex-end;
}

.name {
  margin: 0.5rem 0;
  font-size: 1.5rem;
}

.linkedin-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #0a66c2;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
  align-content: center;
}

.linkedin-button:hover {
  background-color: #004182;
}

.icon {
  height: 20px;
  width: 20px;
  filter: invert(100%); /* white icon */
}


/* Make chessboard responsive to viewport and ensure it never exceeds available width */
#chessboard {
  width: min(var(--board-max-size), calc(100vw - 2rem));
  height: auto; /* JS will set exact height in pixels based on cell*size */
  max-width: var(--board-max-size);
  margin: 0;
}
#chessboardWrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile layout: stack board and iteration panel, allow scrolling */
@media (max-width: 600px) {
  body { overflow: auto !important; -webkit-overflow-scrolling: touch; }
	/* wrapper styling to allow scroll/pinch and keep layout sane on phones */	
	#chessboardWrap {
	  box-sizing: border-box;
	  display: flex;
	  align-items: flex-start;
	  justify-content: center;
	  overflow: auto; /* allow scroll if board taller than available height */
	  -webkit-overflow-scrolling: touch;
	  max-width: 100%;
	}
	
	/* Reduce base cell size on smaller screens */
	#chessboard {
	  --cell-size: 32px; /* Each square will be 32×32 px */
	  grid-template-columns: repeat(var(--board-size, 8), var(--cell-size));
	  grid-template-rows: repeat(var(--board-size, 8), var(--cell-size));
	  width: calc(var(--cell-size) * var(--board-size, 8));
	  height: calc(var(--cell-size) * var(--board-size, 8));
	}

	
  /* iteration panel should scroll instead of forcing the board to be tiny */
  #Iterations {
    max-height: 40vh;
    overflow-y: auto;
  }

  .container {
    flex-direction: column; /* stack board above/below iterations */
    align-items: center;
  }

  #Iterations {
    width: calc(100vw - 2rem);
    max-width: 420px;
    margin-top: 1rem;
  }

  /* disable hover scale on touch devices so layout doesn't shift */
  .square:hover {
    transform: none;
  }

  /* slightly reduce padding / margins on small screens if needed */
  .controls {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
}