:root {
  --bg-color: brown;
  --bg-image: url("../images/wood-Board.jpg");
  --overlay-color: rgba(255, 255, 255, 0);
  --text-color: #000;
  --panel-bg: #fff;
  --panel-border: #e2e8f0;
}

.dark {
  --bg-color: #0f172a;
  --bg-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url("../images/wood-Board.jpg");
  --text-color: #f8fafc;
  --panel-bg: #1e293b;
  --panel-border: #334155;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* sprites images READ ABOUT IT */

header {
  max-width: 800px;
  margin: auto;
  text-align: center;
  position: relative;
}

h1 {
  font-size: 180%;
}

main {
  display: none;
  max-width: 800px;
  height: 100%;
  position: relative;
  margin: auto;
}
main div {
  box-sizing: border-box;
}

.game-container {
  position: relative;
  max-width: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrap-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 125%;
}

.game-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.ludo-board {
  display: inline-block;
  width: 100%;
  height: 80%;
  background-color: black;
  padding: 0.2%;
}

.row {
  font-size: 0;
}

.row .col {
  display: inline-block;
  vertical-align: middle;
}

.row1,
.row3 {
  width: 100%;
  height: 40%;
}

.row2 {
  width: 100%;
  height: 20%;
}

#wrap-in-area {
  width: 40%;
  height: 100%;
  background-color: black;
  padding: 0.2%;
  display: inline-block;
  vertical-align: middle;
}

.in-area {
  position: relative;
  padding: 12%;
  width: 100%;
  height: 100%;
}

.in-area .badge-box {
  position: absolute;
  width: 76%;
  height: 76%;
  background-color: white;
  top: 12%;
  left: 12%;
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}

.row1 .out-area,
.row3 .out-area {
  width: 20%;
  height: 100%;
  background-color: black;
  padding: 0;
}

.row2 .out-area {
  width: 40%;
  height: 100%;
  background-color: black;
}

.win-area {
  width: 20%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.red-zone {
  background-color: #ed2027;
}

.green-zone {
  background-color: #05a24b;
}

.blue-zone {
  background-color: #254399;
}

.yellow-zone {
  background-color: #ffde05;
}

.btw-g-r .row,
.btw-b-y .row {
  width: 100%;
  height: calc(100% / 6);
}

.btw-g-r .row .col,
.btw-b-y .row .col {
  width: calc(100% / 3);
  height: 100%;
  padding: 1%;
  background-color: black;
  font-size: 0;
}

.btw-g-r .row .col div,
.btw-b-y .row .col div {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
  border-radius: 5%;
  display: inline-block;
}
.btw-g-r .row .col div div,
.btw-b-y .row .col div div {
  background-color: transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
}

.btw-r-b .row,
.btw-y-g .row {
  width: 100%;
  height: calc(100% / 3);
}

.btw-r-b .row .col,
.btw-y-g .row .col {
  width: calc(100% / 6);
  height: 100%;
  background-color: black;
  padding: 0.5%;
  font-size: 0;
}

.btw-r-b .row .col div,
.btw-y-g .row .col div {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
  border-radius: 5%;
  display: inline-block;
}
.btw-r-b .row .col div div,
.btw-y-g .row .col div div {
  background-color: transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
}

.pawn-box div {
  background-color: transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
}

.win-area .win-box {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: bottom right;
  padding: 0.5%;
}
.win-box .win-pawn-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.win-box .win-pawn-box div {
  width: 20%;
  height: 20%;
  position: absolute;
  background-color: transparent;
}
#win-box1 {
  transform: translate(-50%, -50%) rotate(45deg);
}
#g-win-pawn-box {
  background-color: #05a24b;
}
#win-box2 {
  transform: translate(-50%, -50%) rotate(135deg);
}
#y-win-pawn-box {
  background-color: #ffde05;
}
#win-box3 {
  transform: translate(-50%, -50%) rotate(225deg);
}
#b-win-pawn-box {
  background-color: #254399;
}
#win-box4 {
  transform: translate(-50%, -50%) rotate(315deg);
}
#r-win-pawn-box {
  background-color: #ed2027;
}

#out14,
#g-out-1,
#g-out-2,
#g-out-3,
#g-out-4,
#g-out-5 {
  background-color: #05a24b;
}

#out1,
#r-out-1,
#r-out-2,
#r-out-3,
#r-out-4,
#r-out-5 {
  background-color: #ed2027;
}

#out40,
#b-out-1,
#b-out-2,
#b-out-3,
#b-out-4,
#b-out-5 {
  background-color: #254399;
}

#out27,
#y-out-1,
#y-out-2,
#y-out-3,
#y-out-4,
#y-out-5 {
  background-color: #ffde05;
}

.in-area .row {
  width: 100%;
  height: 50%;
  background-color: white;
}

.in-area .row .col {
  width: 50%;
  height: 100%;
  padding: 10%;
  background-color: white;
}

/* Red Section */

.r-circle {
  background-color: #ed2027;
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.r-pawn1,
.r-pawn2,
.r-pawn3,
.r-pawn4 {
  background-image: url("../images/pawns.png");
  background-repeat: no-repeat;
  background-size: 380%;
  background-position-x: 0%;
  background-position-y: 66.66%;
}

/* Green Section */

.g-circle {
  background: #05a24b;
  border-radius: 50%;
  position: relative;
  width: 100%;
  height: 100%;
}

.g-pawn1,
.g-pawn2,
.g-pawn3,
.g-pawn4 {
  background-image: url("../images/pawns.png");
  background-repeat: no-repeat;
  background-size: 380%;
  background-position-x: 0%;
  background-position-y: 33.33%;
}

/* Yellow Section */

.y-circle {
  background: #ffde05;
  border-radius: 50%;
  position: relative;
  width: 100%;
  height: 100%;
}

.y-pawn1,
.y-pawn2,
.y-pawn3,
.y-pawn4 {
  background-image: url("../images/pawns.png");
  background-repeat: no-repeat;
  background-size: 380%;
  background-position-x: 0%;
  background-position-y: 100%;
}

/* Blue Section */

.b-circle {
  background: #254399;
  border-radius: 50%;
  position: relative;
  width: 100%;
  height: 100%;
}

.b-pawn1,
.b-pawn2,
.b-pawn3,
.b-pawn4 {
  background-image: url("../images/pawns.png");
  background-repeat: no-repeat;
  background-size: 380%;
  background-position-x: 0%;
  background-position-y: 0%;
}

/* Star */

#out1,
#out48,
#out9,
#out22,
#out35,
#out14,
#out27,
#out40 {
  background-image: url("../images/star2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

.dice-container {
  display: inline-block;
  width: 100%;
  height: 10%;
  background: transparent;
}

.dice-container-top {
  transform: translateY(-10px);
}
.dice-container-bottom {
  transform: translateY(10px);
}

.dice-container .col1,
.dice-container .col3 {
  width: 12.5%;
  height: 100%;
}

.dice-container .col2 {
  width: 75%;
  height: 100%;
}

.diceBox {
  width: 100%;
  height: 100%;
}

.greenDiceBox {
  background: #05a24b;
}

.redDiceBox {
  background: #ed2027;
}

.blueDiceBox {
  background: #254399;
}

.yellowDiceBox {
  background: #ffde05;
}
.startDiceRoll {
  background-image: url(../images/start_dice_roll2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.rollDice {
  background-image: url(../images/dice_roll.png);
  background-repeat: no-repeat;
  background-size: 600%;
  background-position-x: 0%;
  background-position-y: 0%;
}
.showDice {
  background-image: url(../images/dice.png);
  background-repeat: no-repeat;
  background-size: 200%;
  background-position-x: 0%;
  background-position-y: 0%;
}

/* Animation Section */
.glow {
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  cursor: pointer;
}

@keyframes example {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1.2);
  }
}

div#preload {
  display: none;
}

.settingsContiner {
  width: 100%;
  height: 100%;
  background-color: transparent;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.setting {
  width: 40px;
  height: 40px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.setting:hover {
  transform: scale(1.1);
}

.setting:focus {
  outline: none;
}

#sound {
  background-image: url(../images/sound-on.svg);
}
#restart {
  background-image: url(../images/restart.svg);
}
#fullscreen {
  background-image: url(../images/fullscreen.svg);
}
#exitfullscreen {
  background-image: url(../images/exit-fullscreen.svg);
  display: none;
}

#alertBox {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #32e0c4;
  padding: 10px 20px;
  background-color: white;
  text-align: center;
  border-radius: 10px;
}

#alertHeading {
  font-size: 25px;
  font-family: "Fredoka One", cursive;
  color: red;
}
.alertBtn {
  font-size: 20px;
  background-color: yellow;
}
.alertBtn:hover {
  background-color: greenyellow;
}
.alertBtn:focus {
  outline: none;
}

@media all and (display-mode: fullscreen) {
  #fullscreen {
    display: none;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  main {
    max-width: 1000px;
  }
  .game-container {
    max-width: 700px;
  }
  .alertBtn {
    font-size: 40px;
  }
  #alertHeading {
    font-size: 45px;
  }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  main {
    max-width: 1000px;
  }
  .game-container {
    max-width: 980px;
  }
  .alertBtn {
    font-size: 50px;
  }
  #alertHeading {
    font-size: 55px;
  }
}