@font-face {
  font-family: "Helvetica-Condensed";
  src: url("/static/font/Helvetica-Black-Condensed.otf") format("opentype");
}

@font-face {
  font-family: "Kabel-Heavy";
  src: url("/static/font/Kabel-Heavy.ttf") format("truetype");
}

body {
  font-family: Helvetica;
  text-align: center;
  background: url(/static/money-background.jpg);
  margin: 0;
}

/* HEADER START */

.top-bar {
  font-family: "Helvetica-Condensed";
  font-size: 25px;
  width: 80%;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 45px;
  border-radius: 80px;
  position: fixed;
  top: 5;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1000;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(13, 22, 58, 0.95);
  color: white;
  border-bottom: 5px solid #f1c40f;
}

#roll-btn {
  background-color: unset;
  border: 0;

  img {
    width: 40px;
  }
}

#roll-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.buy-button {
  font-family: "Helvetica-Condensed";
  background-color: #f1c40f;
  color: rgba(13, 22, 58, 1);
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 20px;
  cursor: pointer;
}

.buy-button:hover {
  background-color: #f39c12;
}

/* HEADER END */

/* FOOTER START */

.footer {
  font-family: "Helvetica-Condensed";
  font-size: 20px;
  width: 100%;
  margin-top: 25px;
  height: 50px;
  position: fixed;
  bottom: 0%;
  color: rgba(13, 22, 58, 1);
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */

  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  font-size: min(1.75vw, 35px);
  border-top: 5px solid #f1c40f;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

.social a {
  height: 35px !important;
  width: 35px !important;
  background: black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    padding: 5px;
  }
}

.social a:hover {
  background: #f1c40f;
}

/* FOOTER END */

/* BOARD START */

  .piece {
      position: relative;
      width: 20px;
      height: 20px;
      background-color: black;
      border-radius: 50%;
      top: 50%;
      /* Center the piece vertically */
      left: 50%;
      /* Center the piece horizontally */
      transform: translate(-50%, -50%);
          transition: all 0.5s ease;
      /* Offset the centering */
    }

.board {
  width: calc(100vw * 0.8);
  height: calc(100vw * 0.8);
  margin: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 15.37% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 15.37%;
  grid-template-rows: 15.37% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 7.7% 15.37%;
  grid-template-areas:
    "go p1 p2 p3 p4 p5 p6 p7 p8 p9 jail"
    "p36 . . . . . . . . . p10"
    "p35 . chest chest . . . . . . p11"
    "p34 . chest chest . . . . . . p12"
    "p33 . logo logo logo logo logo logo logo . p13"
    "p32 . logo logo logo logo logo logo logo . p14"
    "p31 . logo logo logo logo logo logo logo . p15"
    "p30 . . . . . . chance chance . p16"
    "p29 . . . . . . chance chance . p17"
    "p28 . . . . . . . . . p18"
    "gtj p27 p26 p25 p24 p23 p22 p21 p20 p19 fp";
  /* width: 1200px;
  height: 1200px; */
  background-color: #cde6d0;
  border: 5px solid black;
  font-family: "helvetica";
}

.overlay-button {
  border: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.community-chest {
  grid-area: chest;
  height: 62%;
  padding: 2%;
  text-align: center;
  border: 3px dotted black;

  .overlay-button {
      background: url('/static/community-chest.png') no-repeat center center;
      background-size: contain;
  }

  .overlay-button:hover {
    background: url('/static/community-chest_hover.png') no-repeat center center;
    background-size: contain;
  }
}

.chance {
  grid-area: chance;
  text-align: center;
  height: 62%;
  padding: 2%;
  border: 3px dotted black;

  .overlay-button {
      background: url('/static/chance.png') no-repeat center center;
      background-size: contain;
  }

  .overlay-button:hover {
    background: url('/static/chance-hover.png') no-repeat center center;
    background-size: contain;
  }
}

.corner,
.property {
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
  align-items: center;
  background-color: #cde6d0;
  height: 100%;
}

.property {
  font-size: 1.15vw;
  font-family: "helvetica";
  box-sizing: border-box;
  .top,
  .bottom {
    border-left: 1px solid black;
    border-right: 1px solid black;
  }

  .left,
  .right {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 2px solid black;
  }

  .property-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    .name {
      overflow-wrap: anywhere;
    }

    &.top,
    &.bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;

      .color {
        border-bottom: 2px solid black;
      }

      .image img {
        width: 80%;
        max-width: 80%;
      }

      .price {
        padding-bottom: 5%;
      }

      border-top: 2px solid black;
    }

    &.right {
      writing-mode: vertical-rl;
    }

    &.left {
      writing-mode: vertical-lr;
    }

    &.right,
    &.left {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      width: 100%;
      height: 100%;

      .color {
        height: 100%;
        width: 18%;
        border-left: 2px solid black;
      }

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

      .name.no-color {
        width: 38%;
        height: 100%;
      }

      .price {
        padding-left: 5%;
      }

      display: flex;
      flex-direction: column;

      .image img {
        transform: rotate(90deg);
        width: 80%;
        max-height: 80%;
      }
    }
  }

  div {
    text-align: center;
  }

  .name {
    height: 20%;
    padding: 2%;
    font-size: 0.75em;
  }

  .no-color {
    /* padding-top: 12%; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 38%;
  }

  .color {
    align-self: flex-start;
    width: 100%;
    height: 18%;
    /* background-color: #b3ca2f; */
  }

  .price {
    font-size: 0.6em;
  }
}

/* Top and bottom properties */

/* Align text for top properties */
.top {
  transform: rotate(180deg);
}

.right {
  transform-origin: center;
  /* transform: rotate(-90deg); */
  transform: rotate(180deg);
}

/* GRID AREAS */
.go {
    width: 100%;
  grid-area: go;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
  gap: 10%;

    .arrow {
            position: relative;
            width: 60%;
            /* Length of the shaft */
            /* height: 8px; */
            height: 3%;
            /* Thickness of the shaft */
            background-color: black;
            /* Color of the arrow shaft */
        }
    
        .arrow::after {
            content: "";
            position: absolute;
            right: -5%;
            /* Adjust this to move the triangle beyond the edge of the shaft if needed */
            top: 50%;
            border-style: solid;
            /* border-width: 15px 20px 15px 0; */
            border-width: 0.75vw 1.25vw 0.75vw 0;
            /* Adjusted to point the triangle to the right */
            border-color: transparent black transparent transparent;
            transform: translateY(-50%) rotate(180deg);
        }

  .go-text {
    /* margin-bottom: -12%; */
    margin-right: -10%;
    display: flex;
    flex-direction: column;
    transform: rotate(135deg);
    align-items: center;
    justify-content: flex-start;

    .collect {
        width: 70%;
        text-align: center;
        font-size: 0.75vw;
    }

    .main-go-text {
        font-size: 5vw;
        font-family: "Kabel-Heavy";
        font-weight: bolder;
    }
  }
}

.jail {
  grid-area: jail;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .visiting {
    flex: 3;
    align-self: flex-start;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    transform: rotate(180deg);
  }
  .just {
    justify-self: flex-end;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    transform-origin: center;
    width: 100%;
    flex: 3;
  }

  .prison {
    flex: 7;
    height: 100%;
    background-color: #f7941d;
    border-top: 2px solid black;
    border-right: 2px solid black;
    align-self: flex-end;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .prison-container {
    transform: rotate(-135deg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cage {
    width: 68%;
    height: 68%;
    background-color: white;
    border: 2px solid black;
    display: flex;
    flex-direction: row;
    position: relative;

    img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        /* Make the image width same as the container */
        height: 100%;
        /* Optional: Adjust height to match the content div if needed */
        object-fit: cover;
        /* Ensures the image covers the area without distortion */
        z-index: 2;
        /* Ensures the image is above the content */
      }
  }

  .bars {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    z-index: 10;
  }
}

.free-parking {
  grid-area: fp;
  border: 0;
  flex-direction: column;
  transform: rotate(-45deg);
  background-color: transparent;
    gap: 5%;
    /* font-weight: bold; */
    font-family: "helvetica";

  img {
    height: 50%;
  
  }
}

.go-to-jail {
  flex-direction: column;
  gap: 5%;
  /* font-weight: bold; */
  font-family: "helvetica";
  grid-area: gtj;
  border-right: 1px solid black;
  border-top: 1px solid black;
  background-color: transparent;
  border: 0;
  transform: rotate(45deg);
  img {
    height: 60%;
  }
}

.logo {
  grid-area: logo;
  text-align: center;
  img {
    max-width: 100%;
  
  }
}

.brown {
  background-color: #5E3C0F;
}

.light-blue {
  background-color: #85a6d9;
}

.pink {
  background-color: #d93a96;
}

.orange {
  background-color: #f7941d;
}

.red {
  background-color: #d92d2b;
}

.yellow {
  background-color: #ffe12d;
}

.green {
  background-color: #1fb25a;
}

.blue {
  background-color: #0077b6;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
}

.p3 {
  grid-area: p3;
}

.p4 {
  grid-area: p4;
}

.p5 {
  grid-area: p5;
}

.p6 {
  grid-area: p6;
}

.p7 {
  grid-area: p7;
}

.p8 {
  grid-area: p8;
}

.p9 {
  grid-area: p9;
}

.p10 {
  grid-area: p10;
}

.p11 {
  grid-area: p11;
}

.p12 {
  grid-area: p12;
}

.p13 {
  grid-area: p13;
}

.p14 {
  grid-area: p14;
}

.p15 {
  grid-area: p15;
}

.p16 {
  grid-area: p16;
}

.p17 {
  grid-area: p17;
}

.p18 {
  grid-area: p18;
}

.p19 {
  grid-area: p19;
}

.p20 {
  grid-area: p20;
}

.p21 {
  grid-area: p21;
}

.p22 {
  grid-area: p22;
}

.p23 {
  grid-area: p23;
}

.p24 {
  grid-area: p24;
}

.p25 {
  grid-area: p25;
}

.p26 {
  grid-area: p26;
}

.p27 {
  grid-area: p27;
}

.p28 {
  grid-area: p28;
}

.p29 {
  grid-area: p29;
}

.p30 {
  grid-area: p30;
}

.p31 {
  grid-area: p31;
}

.p32 {
  grid-area: p32;
}

.p33 {
  grid-area: p33;
}

.p34 {
  grid-area: p34;
}

.p35 {
  grid-area: p35;
}

.p36 {
  grid-area: p36;
}

/* BOARD END */