:root{
    --card-height:105px;
    --radius: 150px;
    --center-stack-width:400px;
    --side-player-offset: 40px;
    --hand-max-width:150vw;
}

body {
  margin: 0;
  background: #005;
  font-family: Arial, sans-serif;
  color: white;
}

.game-board {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom right, #003366, #002244);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.player {
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: white;
}

/* Handcontainer for all sides */
.hand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Top Player */
.player-top {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom Player */
.player-bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.player-left {
  position: absolute;
  top: 50%;
  left: var(--side-player-offset);
  transform: translateY(-50%);
    transform-origin: center;
  white-space: nowrap;
}

.player-right {
   position: absolute;
  top: 50%;
  right: var(--side-player-offset);
  transform: translateY(-50%);
    transform-origin: center;
  white-space: nowrap;
}


.player-left .hand-container,
.player-right .hand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-left .hand {
  flex-direction: column-reverse;
  align-items: flex-end;
  margin-left: 10px;
  flex-wrap: wrap;
  max-height: 80vh;
  justify-content: center;
}

.player-right .hand {
  flex-direction: column;
  align-items: flex-start;
  margin-right: 10px;
  flex-wrap: wrap;
  max-height: 80vh;
  justify-content: center;
}

/* LEFT player: rotate cards clockwise */
.player-left .hand .card {
  transform: rotate(90deg);
  margin: -60px 0 0 0;
}

/* RIGHT player: rotate cards counter-clockwise */
.player-right .hand .card {
  transform: rotate(-90deg);
  margin: -60px 0 0 0;
}








/* Hands */
.hand {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  max-width: var(--hand-max-width);
  gap: 0;
}

/* Cards inside hands */
.card {
  aspect-ratio: 2/ 3;
  height: var(--card-height);
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px #000;
  border: 2px solid black;
  transition: transform 0.2s ease;
}

/* Hand cards should overlap */
.hand .card {
  margin-left: -10px;
  margin-top: -15px;
  z-index: 1;
}

/* Hover raise for bottom player */
.hand .card:hover {
  transform: translateY(-10px);
  z-index: 10;
}

/* Side Cards shouldn't hover */
.player-left .hand .card:hover,
.player-right .hand .card:hover {
  transform: rotate(90deg) !important;
  z-index: 1 !important;
}

.player-right .hand .card:hover {
  transform: rotate(-90deg) !important;
}


/* Card colors */
.card.red {
  background: red;
  color: white;
}
.card.green {
  background: green;
  color: white;
}
.card.blue {
  background: blue;
  color: white;
}
.card.yellow {
  background: yellow;
  color: black;
}
.card.wild {
  background: linear-gradient(45deg, red, yellow, green, blue);
  color: white;
}
.card.black {
  background: black;
  color: white;
}

/* Card back */
.card-back {
  background: repeating-linear-gradient(
    45deg,
    #444,
    #444 5px,
    #222 5px,
    #222 10px
  );
  color: transparent;
  border: 2px solid #000;
}
.card-back:hover {
  transform: none !important;
  z-index: 1 !important;
}

.uno-button {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: black;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 2px black;
  overflow: hidden;
  border: 2px solid white;
}
.uno-text {
  transform: rotate(30deg);
  display: inline-block;
}



#drawButton {
  pointer-events: auto;
  z-index: 1000;
  cursor: pointer;
}

/* Center stack (deck + current card + UNO button) */
.center-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  width:var(--center-stack-width);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Stack items, for text */

.stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stack-label {
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin-bottom: 4px;
}

/* Player Labels */

.label-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--center-stack-width) + 150px);
  height: 35%;
}

.label {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 10;
  white-space: nowrap;
}

/* Top of center */
.label-top {
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom of center */
.label-bottom {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
}

/* Left of center */
.label-left {
  left: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  transform-origin: center;
}

/* Right of center */
.label-right {
  right: 0%;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}


/* Card Count */
.cardcount{
  color: #ffcc00;
  font-weight: bold;
}

.player-label {
  margin-right: 10px; 
}

.shield {
  margin-left: 6px;
  display: none;
}



/* Draw button */
.buttoncss {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: #ffcc00;
  color: black;
  font-weight: bold;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
  transition: background-color 0.2s ease;
}
.buttoncss:hover {
  background-color: #ffdd33;
}

/* Draw card button position */
.draw-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 140px;
  z-index: 1000;
}

/* Dialog modals */
dialog {
  border: none;
  border-radius: 10px;
  padding: 20px;
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align: center;
  z-index: 2000;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Color picker buttons */
#colorSelectModal .color-option {
  margin: 5px;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.color-options button[data-color="Red"] {
  background-color: red;
  color: white;
}
.color-options button[data-color="Green"] {
  background-color: green;
  color: white;
}
.color-options button[data-color="Blue"] {
  background-color: blue;
  color: white;
}
.color-options button[data-color="Yellow"] {
  background-color: yellow;
  color: black;
}
.center-stack .card {
  margin-left: 0;
  transform: none;
  z-index: initial;
}
.center-stack {
  gap: 20px;
}
  .direction-arrows {
      position: absolute;
      width: 120px;
      height: 120px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.5;
    }

    .direction-arrows .arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 35px;
      color: white;
      transform-origin: center;
    }

    /* Arrow positions (static angles) */
    .direction-arrows .arrow:nth-child(1) {
      transform: rotate(0deg) translateY(calc(-1 * var(--radius)));
    }

    .direction-arrows .arrow:nth-child(2) {
      transform: rotate(120deg) translateY(calc(-1 * var(--radius)));
    }

    .direction-arrows .arrow:nth-child(3) {
      transform: rotate(240deg) translateY(calc(-1 * var(--radius)));
    }

    /* Flip arrows based on direction */
    #directionArrows[data-direction="1"] .arrow {
      transform: scaleX(-1) rotate(0deg) translateY(calc(-1 * var(--radius)));
    }
    #directionArrows[data-direction="1"] .arrow:nth-child(2) {
      transform: scaleX(-1) rotate(120deg) translateY(calc(-1 * var(--radius)));
    }
    #directionArrows[data-direction="1"] .arrow:nth-child(3) {
      transform: scaleX(-1) rotate(240deg) translateY(calc(-1 * var(--radius)));
    }