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

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  
  /* --- UNIVERSAL BACKGROUND --- */
  background-color: #083951; 
  background-image: url("../images/bg.jpg"); /* Same image for everything */
  
  background-size: cover;    /* Ensures it fits perfectly on all screens */
  background-position: center;
  background-repeat: no-repeat;
  /* --------------------------- */
}

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

h1 { font-size: 180%; }

/* Main Container: Fixed to screen, prevents scrolling */
main {
  display: none; /* JS toggles this */
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
}

main div { box-sizing: border-box; }

/* THE GOLDEN RATIO FOR YOUR LAYOUT 
   width: min(60vw, 80vh)
   This ensures the board is 60% of width (leaving 20% left/right for dice)
   OR 80% of height (leaving 10% top/bottom for dice).
   It will never overflow!
*/
.game-container {
  width: min(70vw, 90vh);
  height: min(70vw, 90vh); /* Keeps it square based on the smaller dimension */
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  max-width: none;
  max-height: none;
}

/* Aspect Ratio Maintainer */
.wrap-box {
  position: relative;
  width: 100%;
  height: 100%;
}

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

.ludo-board {
  display: inline-block;
  width: 100%;
  height: 100%; /* Fills the container */
  background-color: black;
  padding: 0.2%;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.7);
}

.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; }

/* Grid Cells */
.btw-g-r .row, .btw-b-y .row {
   width: 100%; 
   height: 16.666%;
   }

.btw-g-r .row .col, .btw-b-y .row .col { 
  width: 33.333%; 
  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: 33.333%; }
.btw-r-b .row .col, .btw-y-g .row .col { width: 16.666%; 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-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; }

/* Stars & Colors */
#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; }

/* PAWNS */
.r-circle { background-color: #ed2027; position: relative; border-radius: 50%; width: 100%; height: 100%; }
.g-circle { background: #05a24b; border-radius: 50%; position: relative; width: 100%; height: 100%; }
.y-circle { background: #ffde05; border-radius: 50%; position: relative; width: 100%; height: 100%; }
.b-circle { background: #254399; border-radius: 50%; position: relative; width: 100%; height: 100%; }

[class*="r-pawn"], [class*="g-pawn"], [class*="y-pawn"], [class*="b-pawn"] {
    background-image: url("../images/pawns.png");
    background-repeat: no-repeat;
    background-size: 380%;
    width: 100%; height: 100%; position: absolute;
}
[class*="r-pawn"] { background-position-y: 66.66%; }
[class*="g-pawn"] { background-position-y: 33.33%; }
[class*="y-pawn"] { background-position-y: 100%; }
[class*="b-pawn"] { background-position-y: 0%; }

#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 BOXES - FLOATING OUTSIDE */
.diceBox {
  border-radius: 5px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
  position: absolute;
  /* Size of dice relative to the board */
  width: 15%; 
  height: 15%; 
  z-index: 10;
}

/* Position dice using percentages relative to the board */
.redDiceBox { 
    background: #ed2027; left: -18%; top: 1%; 
}

.blueDiceBox { 
    background: #254399; left: -18%; bottom: 1%; 
}

.greenDiceBox { 
    background: #05a24b; right: -18%; top: 1%; 
}

.yellowDiceBox { 
    background: #ffde05; right: -18%; bottom: 1%; 
}

.startDiceRoll { background-image: url(../images/start_dice_roll2.png); background-size: 100%; cursor: pointer; }
.rollDice { background-image: url(../images/dice_roll.png); background-size: 600%; }
.showDice { background-image: url(../images/dice.png); background-size: 200%; }

.glow { animation: example 0.5s infinite alternate; cursor: pointer; }
@keyframes example { from { transform: scale(0.8); } to { transform: scale(1.2); } }

/* SETTINGS (Icons floating to the right) */
.settingsContiner {
  position: absolute;
  top: 40%;
  right: -30%;  
  display: flex;
  flex-direction: column;   
  gap: 15px; 
  z-index: 5000;
}

.setting {
  width: 55px; 
  height: 55px;
  background-size: 60%; 
  background-repeat: no-repeat;
  background-position: center; 
  background-color: white; 
  border-radius: 10px; 
  border: 2px solid #ccc;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.setting {
  /* ... existing styles ... */
  transition: all 0.3s ease; /* This makes the animation smooth */
}

/* THE HOVER EFFECT */
.setting:hover {
  transform: scale(1.1); /* Grows 10% larger */
  box-shadow: 0 8px 15px rgba(0,0,0,0.5); /* Shadow gets deeper/darker */
  border-color: #888; /* Border gets slightly darker */
}

/* THE CLICK EFFECT (Optional: makes it shrink when clicked) */
.setting:active {
  transform: scale(0.9);
}

/* 1. Empty ID (So it doesn't block the classes) */

/* 2. Sound ON Class */
.sound-on {
  background-image: url("../images/sound-on.svg") !important;
}

/* 3. Sound OFF Class */
.sound-off {
  background-image: url("../images/sound-off.svg") !important;
}

/* 4. Restart Button */
#restart {
  background-image: url("../images/restart.svg");
}
.sound-on { background-image: url("../images/sound-on.svg"); }
.sound-off { background-image: url("../images/sound-off.svg"); }

#home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
  z-index: 5000;
  overflow: hidden;
}
#home { 

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 90%;
    max-width: 500px;
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#game-logo img {
  width: 60vmin; 
  height: auto;
  margin-bottom: 2vmin;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}

.noOfPlayer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 15vmin; 
  height: 12vmin;
  padding: 1.5vmin 0; 
  margin: 1vmin;
  border-radius: 3vmin;
  font-family: "Fredoka One", cursive;
  font-size: 5vmin;
  color: rgb(255, 255, 255);
  text-shadow: 0 0.5vmin 0 rgba(0,0,0,0.3);
  border-width: 0.6vmin;
  border-style: solid;
  box-shadow:
    inset 0 0.8vmin 0 rgba(255,255,255,0.35),
    inset 0 -0.8vmin 0 rgba(0,0,0,0.25),
    0 1.5vmin 2vmin rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.2s ease;
}

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


.selected {
  transform: scale(1.1);
  border-color: white !important;
  filter: brightness(1.1);
  cursor: default;
}

#twoPlayer {
  background: linear-gradient(to bottom, #ff7a6a, #e5483f);
  border-color: #8f1d1d;
}

#threePlayer {
  background: linear-gradient(to bottom, #6aff7a, #3fe548);
  border-color: #1d8f2b;
}

#fourPlayer {
  background: linear-gradient(to bottom, #ffe56a, #e5c33f);
  border-color: #8f781d;
}

#noOfplayerBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; 
  gap: 5px; 
  margin: 20px 0;
}


#startGame {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 55vmin;
  padding: 2vmin 4vmin;
  margin-top: 3vmin;
  border-radius: 2vmin;
  font-family: "Fredoka One", cursive;
  font-size: 6vmin; 
  color: rgb(255, 255, 255);
  text-shadow: 0 0.5vmin 0 rgba(0,0,0,0.3);
  background: linear-gradient(to bottom, #6aafff, #3f85e5);
  border-color: #1d4b8f;
  border-width: 0.6vmin;
  border-style: solid;
  box-shadow:
    inset 0 0.8vmin 0 rgba(255,255,255,0.35),
    inset 0 -0.8vmin 0 rgba(0,0,0,0.25),
    0 1.5vmin 2vmin rgba(0,0,0,0.6);
    
  cursor: pointer;
  transition: transform 0.2s ease;
}

#startGame:hover { transform: scale(1.1); }
.selected {
  transform: scale(1.1); 
  border-color: white !important; 
  filter: brightness(1.1); 
  cursor: default;
}


#alertBox { 
  display: none; 
  position: fixed; /* Fixed ensures it stays on screen even if you scroll */
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  
  /* Responsive Size */
  width: clamp(280px, 80vw, 400px);
  padding: 30px 20px;
  
  background-color: white; 
  text-align: center; 
  
  /* 3D Tile Look */
  border: 6px solid #32e0c4;
  border-radius: 25px; 
  
  /* --- THE DARK BACKGROUND TRICK --- */
  box-shadow: 
      0 10px 25px rgba(0,0,0,0.5),     /* 1. Normal Drop Shadow */
      0 0 0 100vmax rgba(0,0,0,0.8);   /* 2. HUGE Shadow that darkens the whole screen */
  /* -------------------------------- */

  z-index: 10000; /* Ensures it sits on top of everything */
}

/* --- ALERT TEXT --- */
#alertHeading { 
  font-family: "Fredoka One", cursive;
  font-size: 30px; 
  color: #ed2027; /* Red Text */
  margin-top: 0;
  margin-bottom: 20px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.1);
}

/* --- ALERT BUTTONS --- */
.alertBtn { 
  display: inline-block;
  font-family: "Fredoka One", cursive;
  font-size: 20px; 
  
  padding: 10px 25px;
  margin: 10px;
  
  background-color: white; 
  color: black;
  
  /* 3D Button Look */
  border: 3px solid black;
  border-radius: 15px;
  box-shadow: 0 5px 0 rgba(0,0,0,0.2);
  
  cursor: pointer;
  transition: transform 0.1s ease;
}

/* Specific Colors for Yes/No feeling */
#ok {
  background-color: #32e0c4; /* Teal/Green for OK */
  color: white;
  border-color: #209c88;
}

#cancel {
  background-color: #ff4757; /* Red for Cancel */
  color: white;
  border-color: #b33939;
}

/* Hover Effect */
.alertBtn:hover {
  transform: scale(1.05);
}

/* Active (Click) Effect */
.alertBtn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}



/* --- MOBILE FIXES --- */
@media (max-width: 768px) {
    .setting {
        width: 35px;  /* Slightly bigger for touch */
        height: 35px;
    }
    .settingsContiner {
        top: 135px;
        right: -60px;  /* Keeps it in the safe zone */
        gap: 8px;
    }
}