body {
  font-family: "Bitcount Prop Single", system-ui;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
  background-color: rgb(147, 50, 24);
  background-image: url("../wooden-bckg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-width: auto; /* Change from 750px to auto */
  width: 100%;
  margin: 0;
  overflow-x: hidden; /* Prevents accidental side-scrolling */
  height: auto; /* Changed from 100vh to allow scrolling on long mobile layouts */
  min-height: 100vh;
  color: rgb(255, 212, 59);
}

.start-page {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

.player-names-input {
  margin-bottom: 15px;  
}

.player-names-input h2 {
  color: #f68a2c;
  font-size: 18px;
}

.name-input {
  margin-bottom: 10px;  
}

input {
  height: 22px;
  padding: 6px;
  color: black;
  font-weight: 200;
}

.winner {
  font-size: 50px;
  margin-top: 10%;
  animation: blink-winner 0.5s 3;
  color: #E1D9BC;
}

@keyframes blink-winner {
  0%, 50% {
    color: rgb(255, 245, 158);
  }
}

.play-again {
  margin-top: 10%;  
}

.outer-box {
  border-width: 5px;
  border-color: black;
  height: 420px;
  width: 420px;
  border-style: solid;
  box-sizing: border-box;
  position: absolute;
}

.middle-box {
  border-width: 5px;
  border-color: black;
  border-style: solid;
  width: 66%;
  height: 66%;
  position: relative;
  margin: auto;
  top: 17%;
  box-sizing: border-box;
}

.inner-box {
  border-width: 5px;
  border-color: black;
  border-style: solid;
  width: 50%;
  height: 50%;
  position: relative;
  margin: auto;
  margin-top: 25%;
  box-sizing: border-box;
  background-color: #8b3209;
  background-image: url(../l-g-4-img.png);
  background-size: 74% auto;
  background-repeat: no-repeat;
  background-position: center;
}

.quarter-box-top-left {
  border-right-width: 5px;
  border-right-color: black;
  border-right-style: solid;
  width: 50%;
  height: 50%;
  position: relative;
  float: left;
  box-sizing: border-box;
  margin-left: 2.5px;
  margin-top: 2.5px;
}

.quarter-box-bottom-left {
  border-right-width: 5px;
  border-right-color: black;
  border-right-style: solid;
  width: 50%;
  height: 48.9%;
  position: relative;
  float: left;
  box-sizing: border-box;
  margin-left: 2.5px;
}

.quarter-box-right {
  border-top-width: 5px;
  border-top-color: black;
  border-top-style: solid;
  width: 40%;
  height: 50%;
  position: relative;
  float: right;
  box-sizing: border-box;
  bottom: 5px;
}

.bottom-border {
  border-bottom-width: 5px;
  border-bottom-color: black;
  border-bottom-style: solid;
}

.game-container {
  height: 420px;
  width: 420px;
  margin: 50px auto; 
  position: relative;
  overflow: visible;
  /* Ensure the container doesn't exceed screen width */
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.game-container::before {
content: "";
position: absolute;
width: 470px;
height: 470px;
top: -25px;
left: -25px;
background-image: url(../game-podloga.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 16px;
}

.controls {
  clear: both;
  padding-top: 20px;
}

.node {
  position: absolute;
  border-radius: 50%;
  border-color: black;
  border-width: 5px;
  border-style: solid;
  height: 38px;
  width: 38px;
  box-sizing: border-box;
  background: #CC561E;
}

.node:hover {
  cursor: pointer;
}

.player-1 {
  background-color: #30364F;
}

.player-2 {
  background-color: #E1D9BC;
}

.selected {
  animation: blink-node 1s infinite;
}

.selected-mill {
  animation: blink-node 1s 3;
}

.title {
  color: rgb(126, 126, 126);
}

.ttwo h1 {
  font-size: 46px;
  margin-top: 28px;
  margin-bottom: 2px;
}

.blink-title {
  animation: blink-title 0.5s 3;
}

@keyframes blink-title {
  0%, 50% {
    color: rgb(248, 205, 64);
  }
}

.blink-messages {
  animation: blink-messages 1s 3;
}

@keyframes blink-messages {
  0%, 50% {
    background-color: #320b37;
  }
}

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 1.0s steps(40, end)
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-node {
  0%, 50% {
    background-color: #799b66;
  }
}

#node-1, #node-4, #node-7 {
  top: -19px;
  left: -19px;
}

#node-2 {
  left: 46%;
  top: -19px;
}

#node-5 {
  left: 44%;
  top: -19px;
}

#node-3, #node-6 {
  left: 96%;
  top: -19px;
}

#node-8 {
  left: 38%;
  top: -19px;
}

#node-9 {
  left: 90%;
  top: -19px;
}

#node-10 {
  left: -19px;
  top: 46%;
}

#node-11 {
  left: -19px;
  top: 44%;
}

#node-12 {
  left: -21px;
  top: 37%;
}

#node-13 {
  left: 90%;
  top: 37%;
}

#node-14 {
  left: 96%;
  top: 44%;
}

#node-15 {
  left: 96%;
  top: 46%;
}

#node-16 {
  left: -19px;
  top: 90%;
}

#node-17 {
  left: 38%;
  top: 90%;
}

#node-18 {
  left: 88%;
  top: 90%;
}

#node-22 {
  left: -19px;
  top: 96%;
}

#node-19 {
  left: -19px;
  top: 94%;
}

#node-23 {
  top: 96%;
  left: 46%;
}

#node-20 {
  top: 94%;
  left: 44%;
}

#node-21 {
  top: 94%;
  left: 96%;
}

#node-24 {
  top: 96%;
  left: 96%;
}

.messages {
  border-width: 3px;
  border-radius: 20px;
  border-style: solid;
  margin-bottom: 20px;
  font-size: 17px;
}

.player-stats-1 .player-name {
  color: #1eed41;
  font-size: 22px;
}

.player-stats-2 .player-name {
  color: #1eed41;
  font-size: 22px;
}

.player-1-piece {
  border-radius: 50%;
  background-color: #30364F;
  border-width: 4px;
  border-color: #d29700;
  border-style: solid;
  width: 38px;
  height: 38px;
  margin: auto;
  margin-bottom: 3px;
}

.player-2-piece {
  border-radius: 50%;
  background-color: #E1D9BC;
  border-width: 4px;
  border-color: #d29700;
  border-style: solid;
  width: 38px;
  height: 38px;
  margin: auto;
  margin-bottom: 3px;
}

.buttons {
  margin-top: 50px;
}

.btn {
  color: rgb(94, 7, 7);
  font-size: 16px;
  margin-top: -50px;
}

.btn-start {
  /*margin-left: 40px;*/
  font-size: 13px;
  margin-top: 10px;
}

.play-again {
  margin-top: 20px;
}

.text-center {
  margin: auto;
  left: 0;
  margin-left: 0;
  right: 0;
  margin-right: 0;
  width: 100%;
}

#wrong-start {
  display: none;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 270px;
}

.captured-pieces {
  border: 2px dotted white;
  border-radius: 10px;
  padding: 6px;
}

/* Ensure images and inputs don't break layout */
img, input {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  /* 1. The Container */
  .game-container {
    display: block;
    margin: 64px auto; 
    width: 420px; /* Must match original width */
    position: relative;
    transform: scale(0.65);
    transform-origin: center top;
    left: 0;
  }

  /* 2. The Board (The Fix) */
  .outer-box {
    /* If it's absolute, it needs to be pushed to the center 
       of the .game-container */
    left: 50% !important;
    transform: translateX(-50%);
    position: absolute;
  }

  /* 3. The Background Image Fix */
  .game-container::before {
    left: 50% !important;
    transform: translateX(-50%);
  }

  .pieces {
    transform: scale(0.65); 
  }

  .btn {
    margin-top: -190px;
  }

  .btn-start {
    margin-top: 10px;
  }

  .play-again {
    margin-top: 20px;
  }

}

.score1div .dv {
  max-width: 106px;      
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score2div .dv {
  max-width: 106px;      
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv {
  font-family: Press Start 2P, system-ui; 
  font-size: 16px; 
  color: white; 
  position: inherit;
  bottom: 180px;
}

.ds {
  font-family: Press Start 2P, system-ui; 
  font-size: 31px; 
  color: white; 
  position: inherit;
  bottom: 80px;
}