/* ==========================================================================
   /parkday/puzzle/
   ========================================================================== */
.main-content {
       float: none;
       margin: auto;
     }

.game-container {
   /* font-family: sans-serif; */
   text-align: center;
   margin: 0;
   padding: 10px;
   position: relative;
}

.mod-button {
   margin-top: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%); 
}

.mod-button a {
   background-color: #FFF;
}

#game {
   margin-bottom: 30px;
}

#game-board {
   width: 480px;
   height: 420px;
   aspect-ratio: 8 / 7;
   position: relative;
   margin: 20px auto 0;
   background-color: #eee;
   border: 2px solid #000;
   max-width: 100%;
   background-image: url('/parkday/puzzle/images/background_road.png');
   background-size: cover;
   background-position: center;
   overflow: hidden;
   box-sizing: border-box;
}

.block {
   position: absolute;
   border: 1px solid #333;
   user-select: none;
   touch-action: none;
   background-size: cover;
   background-position: center;
   box-sizing: border-box;
}

.main {
         background-color: rgba(255, 50, 50, 0.15);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center center;
         border: 6px solid rgba(255, 80, 80, 0.4);
         border-radius: 8px;
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         box-shadow: 0 4px 15px rgba(255, 50, 50, 0.25);
         position: absolute;
}

.block:not(.main):not(.wall-block):not(.barrier-block) {
   background-color: transparent;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.wall-block {
   background-color: transparent;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   cursor: not-allowed;
}

.barrier-block {
   background-color: transparent;
   cursor: not-allowed;
   border: none;
}

#wall1 {
   background-image: url('/parkday/puzzle/images/left_parking.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#wall2 {
   background-image: url('/parkday/puzzle/images/right_parking.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car1 {
   background-image: url('/parkday/puzzle/images/left_car1x1a.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car2 {
   background-image: url('/parkday/puzzle/images/left_car1x1b.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car3 {
   background-image: url('/parkday/puzzle/images/right_car1x1a.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car4 {
   background-image: url('/parkday/puzzle/images/right_car1x1b.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car5 {
   background-image: url('/parkday/puzzle/images/left_car2x2a.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car6 {
   background-image: url('/parkday/puzzle/images/right_car2x2a.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car7 {
   background-image: url('/parkday/puzzle/images/left_car2x2b.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car8 {
   background-image: url('/parkday/puzzle/images/right_car2x2b.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

#car9 {
   background-image: url('/parkday/puzzle/images/right_car2x2c.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   backdrop-filter: blur(8px);
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
   position: absolute;
}

.level2-image {
   max-width: 80%;
   margin: 10px auto;
   border-radius: 5px;
}

.p-teikiMonthly_teiki_ttlBox {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
}

.p-teikiMonthly_teiki_ttlBox_inner {
   width: 50%;
   position: relative;
}

.p-teikiMonthly_teiki_ttl {
   width: 70%;
   margin: 0 auto;
   background: #73b758;
   padding: 0;
   text-align: center;
   font-size: 15px;
   font-weight: bold;
   color: #fff;
   border: 6px solid #fff;
   position: relative;
   z-index: 2;
   bottom: -20px;
}

.p-teikiMonthly_teiki_ttl--genti {
   background: #568ebd;
}

.p-teikiMonthly_teiki_service {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin-bottom: 30px;
   position: relative;
}

.p-teikiMonthly_teiki_service:before {
   content: "";
   display: block;
   background: #e8e8e8;
   width: 2px;
   height: 80%;
   position: absolute;
   right: 0;
   left: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}

.p-teikiMonthly_teiki_service_wrap--keiyaku {
   border-left: 4px solid #73b758;
}

.p-teikiMonthly_teiki_service_wrap {
   width: 50%;
   border-top: 4px solid #73b758;
   border-bottom: 4px solid #73b758;
   padding: 20px 30px;
   position: relative;
}

.p-teikiMonthly_teiki_service_wrap--keiyaku:before {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12px 10px 0 10px;
   border-color: #73b758 transparent transparent transparent;
   position: absolute;
   right: -10px;
   top: -4px;
   z-index: 1;
}

.p-teikiMonthly_teiki_service_wrap--keiyaku:after {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 12px 10px 0 10px;
   border-color: #fff transparent transparent transparent;
   position: absolute;
   right: -10px;
   top: -10px;
   z-index: 1;
}

.p-teikiMonthly_teiki_service_wrap--genti {
   border-right: 4px solid #568ebd;
   border-top: 4px solid #568ebd;
   border-bottom: 4px solid #568ebd;
}

.p-teikiMonthly_teiki_service_wrap--genti:before {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 10px 12px 10px;
   border-color: transparent transparent #568ebd transparent;
   position: absolute;
   left: -10px;
   bottom: -4px;
   z-index: 1;
}

.p-teikiMonthly_teiki_service_wrap--genti:after {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 10px 12px 10px;
   border-color: transparent transparent #fff transparent;
   position: absolute;
   left: -10px;
   bottom: -10px;
   z-index: 1;
}

#timer,
#moves {
   text-align: center;
   font-size: 18px;
   font-weight: bold;
}

#message {
   margin-top: 10px;
}

#controls {
   margin-top: 15px;
}

button {
   padding: 5px 10px;
   margin: 0 5px;
   font-size: 16px;
}

/* #start-button, */
#reset-button,
#give-up {
   position: relative;
   width: 218px;
   border: none;
   padding: 0;
   text-align: center;
   border-radius: 6px;
   cursor: pointer;
   font-weight: bold;
}

/* #start-button {
   height: 70px;
   line-height: 70px;
   transition: background-color 0.2s;
   background-color: #ffcd36;
   background-image: url(/parkday/puzzle/images/ico_arrow_right_bk01.svg);
   background-position: right 10px center;
   background-repeat: no-repeat;
   background-size: 15px 18px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.15);
   color: black;
   font-size: 20px;
} */

#reset-button {
   height: 40px;
   line-height: 40px;
   transition: background-color 0.2s;
   background-color: #e3e3e3;
   color: black;
   font-size: 18px;
}

#give-up {
   height: 40px;
   line-height: 40px;
   transition: opacity 0.2s;
   background-color: #4469a6;
   color: white;
   font-size: 18px;
}

#give-up {
   display: none;
   /* margin-top: 10px; */
}

#game-board,
#game-info,
#controls {
   display: none;
}

#overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1001;
   justify-content: center;
   align-items: center;
}

#modal {
   background-color: white;
   padding: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   max-width: 90%;
   width: 600px;
   max-height: 90%;
   overflow-y: auto;
   text-align: center;
   animation: modalFadeIn 0.3s ease-out;
}

#modal-message {
   margin-bottom: 20px;
   font-size: 18px;
   line-height: 1.5;
}

.modal-buttons {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   width: 100%;
}

#modal-btn {
   background-color: #254CA4;
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.2s;
   margin: 10px auto 0;
   display: block;
   width: 218px;
}

#modal-tweet-btn {
   color: white;
   border: none;
   width: 218px;
   height: 40px;
   background-color: #0f1419;
   background-image: url(/parkday/puzzle/images/x.svg);
   background-position: 13px center;
   background-repeat: no-repeat;
   background-size: 20px 20px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   transition: opacity 0.2s;
   display: none;
   margin: 20px auto 0;
   padding-left: 14px;
   padding-top: 4px;
}

#modal-restart-btn {
   width: 218px;
   background-color: #e3e3e3;
   color: black;
   border: none;
   padding: 8px 16px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.2s;
   display: none;
   margin-top: 10px;
}

/* #start-button {
   display: inline-block;
   margin: 0 auto;
} */

.start-image {
   max-width: 100%;
   margin: 20px auto;
   display: block;
   opacity: 0.4;
}

.campaign-text {
   color: red;
   font-weight: bold;
   margin-bottom: 5px;
   font-size: 18px;
   text-align: center;
}

.scroll-hint {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 16px 24px;
   border-radius: 8px;
   font-size: 18px;
   z-index: 1000;
   animation: fadeInOut 2s ease-in-out forwards;
   text-align: center;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.scroll-hint br {
   display: none;
}

@keyframes fadeInOut {
   0% {
         opacity: 0;
   }

   20% {
         opacity: 1;
   }

   80% {
         opacity: 1;
   }

   100% {
         opacity: 0;
   }
}

@keyframes modalFadeIn {
   from {
         opacity: 0;
         transform: translateY(-20px);
   }

   to {
         opacity: 1;
         transform: translateY(0);
   }
}

@media screen and (min-width: 769px) {
   /* #start-button:hover {
         background-color: #ffea93;
   } */

   #reset-button:hover {
         background-color: #e7e7e7c7;
   }

   #give-up:hover {
         opacity: 0.8;
   }

   #modal-btn:hover {
         opacity: 0.7;
   }

   #modal-tweet-btn:hover {
         opacity: 0.7;
   }

   #modal-restart-btn:hover {
         background-color: #e7e7e7c7;
   }
}

@media screen and (max-width: 768px) {

   /* #start-button, */
   #reset-button,
   #give-up,
   #modal-btn,
   #modal-tweet-btn,
   #modal-restart-btn {
         width: 227px;
   }

   #give-up {
         margin-top: 20px;
   }

   .title-speech-bubble {
         font-size: 14px;
         padding: 6px 16px;
   }

   .main-title {
         font-size: 18px;
   }

   h1 {
         font-size: 20px;
   }

   p {
         font-size: 14px;
   }

   #game-board {
         width: 100%;
         height: auto;
         aspect-ratio: 8/7;
   }

   .block {
         width: calc((100% / 8) * var(--w) - 2px) !important;
         height: calc((100% / 7) * var(--h) - 2px) !important;
         left: calc((100% / 8) * var(--x)) !important;
         top: calc((100% / 7) * var(--y)) !important;
   }

   button {
         font-size: 14px;
         padding: 4px 8px;
         margin: 4px;
   }

   #modal {
         padding: 15px;
   }

   #modal-message {
         font-size: 16px;
   }

   .scroll-hint br {
         display: block;
   }

   .level2-image {
         max-width: 95%;
   }

   .campaign-text {
         font-size: 16px;
   }
}