:root{
  /* ✅ Responsive board width: desktop এ 650px, mobile এ screen অনুযায়ী shrink হবে */
  --board-max-width: 650px;
  --board-margin: 5px;              /* ✅ board এর চারপাশে 5px */
  --board-width: min(var(--board-max-width), calc(100vmin - (var(--board-margin) * 2)));
  --cell-width: calc(var(--board-width) / 15);

  --board-bg: white;
  --red: red;
  --green: #07c107;
  --yellow: rgb(255 209 0);
  --blue: #2311db;
  --cell-border-color: rgb(216, 216, 216);
}

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

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

body{
  background-color:#cecece;
  background:url("../assets/img/bg.jpg") no-repeat center center fixed;
  background-size:cover;
  font-family:'Bangers', cursive;
  color:white;

  /* ✅ Centering system for all device */
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 10px 0;
}

main>h1{
  text-align:center;
  margin-top: 18px;
  margin-bottom: 18px;
  letter-spacing:10px;
  font-size: clamp(1.7rem, 3.5vw, 3rem); /* ✅ responsive title */
}

/* ✅ Board responsive + center + 5px margin */
main .board{
  width:var(--board-width);
  height:var(--board-width);
  margin: var(--board-margin) auto;
  background:var(--board-bg);
  border-radius:10px;
  outline:4px solid white;
  position:relative;
}

/* colors */
main .board .red{background-color:var(--red)}
main .board .green{background-color:var(--green)}
main .board .blue{background-color:var(--blue)}
main .board .yellow{background-color:var(--yellow)}

/* sections */
main .board .section{display:flex; width:100%}

main .board .section .private{
  width:calc(var(--cell-width) * 6);
  height:calc(var(--cell-width) * 6);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

main .board .section .private .cells{
  background:white;
  width:calc(var(--cell-width) * 4);
  height:calc(var(--cell-width) * 4);
  align-items:center;
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
}

main .board .section .private .cells .cell{
  width:calc(var(--cell-width) * 1);
  height:calc(var(--cell-width) * 1);
  border-radius:100px;
  flex-shrink:0;
  flex-grow:0;
  margin-left:10px;
  margin-right:10px;
}

main .board .section .cells{
  display:flex;
  flex-wrap:wrap;
}

main .board .section .cells .cell{
  flex-shrink:0;
  width:var(--cell-width);
  height:var(--cell-width);
  border:1px solid var(--cell-border-color);
  position:relative;
}

main .board .section .cells .cell.star{
  background-image:url("../assets/img/star.png");
  background-size:80%;
  background-repeat:no-repeat;
  background-position:center;
}

/* homes center area */
main .board .section.section-2 .homes{
  width:calc(var(--cell-width) * 3);
  height:calc(var(--cell-width) * 3);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}

main .board .section.section-2 .homes .home{
  position:absolute;
  width:40px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

main .board .section.section-2 .homes .home .cells{
  display:flex;
  flex-direction:column;
}

main .board .section.section-2 .homes .home .cells .cell{
  width:15px;
  height:15px;
  border:none;
}

main .board .section.section-2 .homes .home .cells .cell .pawn{
  transform:scale(1.3);
}

main .board .section.section-2 .homes .home .cells .cell .pawn img{
  width:100%;
}

main .board .section.section-2 .homes .home.red{
  top:50%;
  transform:translateY(-50%);
}

main .board .section.section-2 .homes .home.green{
  height:40px;
  width:70px;
  top:0;
  left:50%;
  transform:translateX(-50%);
}

main .board .section.section-2 .homes .home.blue{
  height:40px;
  width:70px;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}

main .board .section.section-2 .homes .home.yellow{
  right:0;
  bottom:50%;
  transform:translateY(50%);
}

main .board .section.section-2 .homes .home.green .cells,
main .board .section.section-2 .homes .home.blue .cells{
  flex-direction:row;
}

/* pawns */
main .board .pawn{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  border-radius:50px;
  z-index:99;
}

main .board .pawn img{width:90%}

main .board .pawn.highlight{
  box-shadow:0px 0px 10px 2px #ffd500;
  border:4px dashed #000;
  animation:highlightPawn .5s infinite alternate-reverse;
  cursor:pointer;
}

/* ✅ Dashboard responsive: smaller screens এ height/spacing auto adjust */
main .board .dashboard{
  width:100%;
  height: clamp(54px, 8vw, 70px);
  margin-top: clamp(16px, 4vw, 40px);
  border-radius:10px;
  border:4px solid white;
  display:flex;
  justify-content:space-around;
  align-items:center;
  font-size: clamp(16px, 3.5vw, 28px);
  color:white;
  position:relative;
}

main .board .dashboard.blue{background-color:var(--blue)}
main .board .dashboard.blue .dice-section{background-color:var(--blue)}
main .board .dashboard.red{background-color:var(--red)}
main .board .dashboard.red .dice-section{background-color:var(--red)}
main .board .dashboard.green{background-color:var(--green)}
main .board .dashboard.green .dice-section{background-color:var(--green)}
main .board .dashboard.yellow{background-color:var(--yellow)}
main .board .dashboard.yellow .dice-section{background-color:var(--yellow)}

main .board .dashboard .dice-section{
  width: clamp(70px, 14vw, 100px);
  height: clamp(70px, 14vw, 100px);
  border-radius:30px;
  position:absolute;
  top: calc(-1 * clamp(14px, 3vw, 20px));
  left:50%;
  transform:translateX(-50%);
  border:4px solid white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s;
}

main .board .dashboard .dice-section.highlight::before{
  content:'';
  display:block;
  width: clamp(56px, 11vw, 80px);
  height: clamp(56px, 11vw, 80px);
  border:5px dashed #000;
  position:absolute;
  top:0;
  left:0;
  border-radius:100px;
  animation:highlightDice .5s ease-out infinite alternate-reverse;
}

main .board .dashboard .dice-section .dice{
  width:80%;
  height:80%;
  background-image:url("../assets/img/diceValues.png");
  background-size:cover;
}

main .board .dashboard .dice-section .dice.face-1{background-position-x:0%}
main .board .dashboard .dice-section .dice.face-2{background-position-x:20%}
main .board .dashboard .dice-section .dice.face-3{background-position-x:40%}
main .board .dashboard .dice-section .dice.face-4{background-position-x:60%}
main .board .dashboard .dice-section .dice.face-5{background-position-x:80%}
main .board .dashboard .dice-section .dice.face-6{background-position-x:100%}

main .board .dashboard .dice-section .dice.rolling{
  animation:diceRoll 1.2s ease-out;
}

/* animations */
@keyframes diceRoll{
  to{
    background-image:url("../assets/img/diceRoll.png");
    transform:rotateZ(calc(360deg * 4));
    filter:blur(2px);
  }
}

@keyframes diceGlow{
  to{box-shadow:0px 0px 30px 6px #ffd500}
}

@keyframes highlightPawn{
  to{transform:scale(1.2)}
}

@keyframes highlightDice{
  to{transform:scale(1.2);box-shadow:0px 0px 30px 6px #ffd500}
}

/* ✅ Extra safety for very small phones */
@media (max-width: 360px){
  :root{
    --board-margin: 5px;
    --board-width: min(var(--board-max-width), calc(100vmin - (var(--board-margin) * 2)));
  }

  main>h1{
    letter-spacing:6px;
  }

  main{
    padding-top: 6px;
  }
}

/*# sourceMappingURL=style.min.css.map */