* {
  box-sizing: border-box;
}

body {
  background: #fafafa;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.instructions {
  font-size: 1rem;
  color: #ff1900;
  font-weight: 500;
  margin-top: 0.5rem;
}
.instructions {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.95rem;
}

.white-border {
  background-color: white;
  padding: 0.35rem;
}

.yellow-wood {
  background-color: #E0B75B;
  padding: 1rem;
}

.ludo-board {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  grid-template-rows: 1fr 0.5fr 1fr;
  width: 90vmin; 
  max-width: 90vw;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  box-sizing: border-box;
}

.rules {
  width: 100%;
  text-align: center;
}

.rules-first {
  order: 3;
}

.rules-game{
  order: -1;
}

.rules-title {
  margin: 0;
  text-align: center;
}

.keeping-tabs-on-what-is-happening {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row;
  gap: 1rem;
  width: 80%;
  margin: 0 auto;
  min-height: 100px;
}

.player-playing,
.next-player-playing, 
.player-news,
.playing-status {
  display: flex;
  justify-content: center;
  gap: 0.48rem;
}
.playing-status {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;

}

.current-player-title,
.next-player-title {
  font-weight: bold;
}

.playing-status,
.player-activity-container {
  flex: 1 1 45%; 
  min-width: 250px; 
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}
.home {
  padding: .3rem;
  border: 1px solid #1C1F26;
  transition: background-color 0.4s ease, transform 0.3s ease;
}

.home.player--active {
  filter: brightness(1.2) ;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}
.yellow-home.player--active { 
  box-shadow: 0 0 25px rgba(241, 196, 15, 0.8); 
}
.blue-home.player--active   { 
  box-shadow: 0 0 25px rgba(52, 152, 219, 0.9); 
}
.red-home.player--active    { 
  box-shadow: 0 0 25px rgba(231, 76, 60, 0.9); 
}
.green-home.player--active  { 
  box-shadow: 0 0 25px rgba(46, 204, 113, 0.9); 
}

.green-home {
  grid-area: 1 / 1 / 2 / 2;
  background-color: #2ecc71;
}

.red-home {
  grid-area: 1 / 3 / 2 / 4;
  background-color: #e74c3c;
}

.yellow-home {
  grid-area: 3 / 1 / 4 / 2;
  background-color: #f1c40f;
}

.blue-home {
  grid-area: 3 / 3 / 4 / 4;
  background-color: #3498db;
}

.green-home .img,
.red-home .img,
.yellow-home .img,
.blue-home .img {
  
  background-size: cover;
  height: 32vmin;
  display: flex;
}

.green-home .img {
  background: url('./images/van-vicker.jpg') center center no-repeat;
  justify-content: flex-start;
  align-items: flex-start;
}
.red-home .img {
  background: url('./images/nadia.jpg') center center no-repeat;
  justify-content: flex-end;
}
.yellow-home .img {
  background: url('./images/j.jpg') center center no-repeat;
  align-items: flex-end;
}
.blue-home .img {
  background: url('./images/MAJID.jpg') center center no-repeat;
  justify-content: flex-end;
  align-items: flex-end;
}

.home .img .image-caption {
  width: 100%;
}

.home .img .image-caption h2{
  font-size: 8px;
  padding-left: 5px;
  color: #1C1F26;
}

.blue-caption {
  color: white !important;
}

/* player path */
.path {
  display: grid;
  background: #1C1F26;
  gap: 1px;
}

.red-path {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  border-top: 1px solid #1C1F26;
}

.green-path {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-left: 1px solid #1C1F26;
}

.yellow-path {
  grid-area: 3 / 2 / 4 / 3;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  border-bottom: 1px solid #1C1F26;
}

.blue-path {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-right: 1px solid #1C1F26;
}

.cell {
  position: relative;
  background: #fff;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}


.center {
  background: #1C1F26;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
}

.center img {
  width: 100%;
}

/* Home path */
.green-path .cell:nth-child(2),
.green-path .cell:nth-child(n+8):nth-child(-n+12) {
  background: #2ecc71;
}

.blue-path .cell:nth-child(17),
.blue-path .cell:nth-child(n+7):nth-child(-n+11) {
  background: #3498db;
}

.yellow-path .cell:nth-child(2),
.yellow-path .cell:nth-child(5),
.yellow-path .cell:nth-child(8),
.yellow-path .cell:nth-child(11),
.yellow-path .cell:nth-child(13),
.yellow-path .cell:nth-child(14) {
  background: #f1c40f;
}

.red-path .cell:nth-child(5),
.red-path .cell:nth-child(6),
.red-path .cell:nth-child(8),
.red-path .cell:nth-child(11),
.red-path .cell:nth-child(14),
.red-path .cell:nth-child(17) {
  background: #e74c3c;
}

/* Tokens */
.tokens {
  display: grid;
  grid-template-columns: repeat(2, 5vmin);
  grid-template-rows: repeat(2, 5vmin);
  gap: .5vmin;
  padding: 5px;
  border-radius: 10px;
}

.token {
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
}

.token.selectable {
  outline: 3px solid gold;
  box-shadow: 0 0 10px gold;
  transform: scale(1.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.token.selectable:hover {
  transform: scale(1.15);
  box-shadow: 0 0 15px yellow;
}


.red-tokens .token { 
  background: #e74c3c; 
}
.green-tokens .token { 
  background: #2ecc71; 
}
.yellow-tokens .token { 
  background: #e7c84d; 
}
.blue-tokens .token { 
  background: #3498db; 
}

.token.retired {
  background: transparent !important;
  opacity: 0.4;
  transform: scale(0.8);
  pointer-events: none;
  filter: grayscale(100%);
  color: transparent;
}

.token.stack-1 { 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 1; 
}
.token.stack-2 { 
  position: absolute; 
  top: 1px; 
  left: 3px; 
  z-index: 2; 
}
.token.stack-3 { 
  position: absolute; 
  top: 2px; 
  left: 5.5px; 
  z-index: 3; 
}
.token.stack-4 { 
  position: absolute; 
  top: 3px; 
  left: 9px; 
  z-index: 4; 
}

.active-token {
  border: 1px solid white;
}

.active-bg {
  background: #e7c84d;
}

/* Dice */
.dice {
  position: absolute;
  background-color: #1C1F26;
  border-radius: 100%;
  cursor: grabbing;
}

.dice i {
  font-size: clamp(3rem, 7vmin, 3.5rem);
  color: white;
}

.die {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.5);
}

.roll-animate {
  animation: roll 0.5s infinite;
}

@keyframes roll {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

/* Winner overlay */
.winner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  z-index: 9999;
}
/* Todo Styles */

#todo-list {
  padding-inline-start: 14px;
}
#todo-list li {
  cursor: pointer;
  padding: 4px 0;
}
.done {
  text-decoration: line-through;
  opacity: 0.6;
}

footer {
  text-align: center;
}
/* small screen and landscape */
@media screen and (max-height: 600px) and (orientation: landscape) {
  
  .ludo-board {
    width: 172vmin;
  }
  .dice {
    top: 0;
  }
}

/* Tablet and small desktop */
@media (min-width: 768px) {
  
  .white-border {
    padding: 1rem;
  }
  .rules {
    
    text-align: left;
  }

  .mobile-none {
    display: block;
  }
  .home {
    padding: .5rem;
  }
  .yellow-wood {
    padding: 2rem;
  }

  .ludo-board {
    max-width: 700px;
  }

  .tokens {
    grid-template-columns: repeat(2, 7vmin);
    grid-template-rows: repeat(2, 7vmin);
  }

  .token {
    width: 5vmin;
    height: 5vmin;
  }

  .green-home .img,
  .red-home .img,
  .yellow-home .img,
  .blue-home .img {
    margin: .5rem;
    padding: .5rem;
  }

  .home .img .image-caption h2{
    font-size: 10px;
  }
  .dice {
    top: 1rem;
    background-color: transparent;

  }

  .center img {
    width: 80%;
  }
}

@media (min-width: 992px) {
  
}

/* Large desktops */
@media (min-width: 1200px) {
  .container {
    align-items: flex-start;
    flex-direction: row;
    gap: 3rem;

  }

  .ludo-board {
    max-width: 900px;
  }

  .rules-first {
    order: -1;
  }

  .rules-game{
    order: 3;
  }

  .tokens {
    grid-template-columns: repeat(2, 6vmin);
    grid-template-rows: repeat(2, 6vmin);
  }
 
}