:root {
    --width: 75px;
    --rows : 4;
  }
  
  body {
      font-family: Arial, Helvetica, sans-serif;
      margin: auto;
      width: 100%;
      max-width: 420px;
      height: 400px;
    
    }
    
    canvas {
      box-sizing: border-box;
      cursor: pointer;
      border: 0px solid #ddd;
      margin: 0;
      width: var(--width)!important;
      height: var(--width)!important;
  }
    .wrapper {
      /* position: relative; */
      width: 100%;
      max-width: 420px;
      margin: auto;
    }
    
    .top-panel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      text-align: center;
      background-color: #AA4A44;
      padding: 20px;
      margin-bottom: 2px;
      font-size: 24px;
      font-weight: bold;
    }
    
    .toggle-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 23px;
      cursor: pointer;
    }
    
    .menu-toggle .bar {
      background-color: rgb(243, 242, 242);
      height: 3px;
      width: 100%;
    }
    
    .htp {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      outline: none;
    
      align-items: center;
      justify-content: center;
      text-align: left;
      width: 30px;
    }
    
    .accordion {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      z-index: 1;
      display: none;
      flex-direction: column;
      width: 90%;
      max-width: 420px;
    }
    
    .accordion-item {
      margin: 1em 0;
    }
    
    .accordion-title {
      background: #f0f0f0;
      padding: 1em;
      display: block;
      text-decoration: none;
      color: black;
      cursor: pointer;
    }
    
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    
      padding: 0 1em;
    }
    
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    
      padding: 0 1em;
    }
    
    .accordion-item.active .accordion-content {
      max-height: 500px;
      height: 100%;
      /* adjust this value based on your content */
    }
    
    
    .accordion-button {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      cursor: pointer;
    }
    
    #selectedLevel {
      font-weight: bold;
      color: white;
      border: 0px;
    }
    
    .nbutton {
      cursor: pointer;
      background-color: green;
      border: none;
      color: white;
      height: 30px;
      border-radius: 3px;
      height: 40px;
    }
    
    
    .accordion-button {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      cursor: pointer;
    }
    
    .accordion-button {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      cursor: pointer;
    }
    
    .accordion-item input:checked~.accordion-content {
      max-height: 100px;
      /* adjust this value based on your content */
    }
    
    
    .statistic-container {
      flex: 1;
      flex-direction: row;
      margin-top: 5px;
      margin-bottom: 1px;
      margin-left: 5px;
      margin-right: 5px;
      display: flex;
    }
    
    .statistic {
    
      flex: 1;
      flex-direction: column;
      margin-top: 5px;
      margin-bottom: 1px;
      margin-left: 5px;
      margin-right: 5px;
      display: flex;
    }
    
    .statistic-title {
      font-size: 12px;
      color: #333;
      /*text-transform: uppercase;*/
      font-weight: 300;
      margin-bottom: 5px;
      /*center text*/
      text-align: center;
    }
    
    .statistic-value {
      font-size: 18px;
      color: #333;
      font-weight: 700;
      /*center text*/
      text-align: center;
    }
    
    #backdrop {
      display: none;
      position: fixed;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent black background */
      z-index: 1;
      /* Place the backdrop above other elements */
    }
    
    #timer, #score{
      display:none;
      font-size:20px;
    }
    
    .button_container {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    
    .custom_button {
      width: 100px;
      height: 40px;
      border-radius: 3%;
      border: 0px;
    }
    
    #active_button {
      background-color: green;
      color: white;
      font-weight: bold;
    }
    
    .menu {
      display: flex;
      justify-content: center;
      align-items: left;
      padding-left: 12px;
      width: 100%;
      flex-direction: row;
    }
    
    .statistic-title1 {
      font-size: 18px;
      color: #333;
      /*text-transform: uppercase;*/
      font-weight: 300;
      margin-bottom: 5px;
      /*center text*/
      text-align: center;
    }
    
    .statistic-value1 {
      font-size: 32px;
      color: #333;
      font-weight: 700;
      /*center text*/
      text-align: center;
    }
    
    #chessboard td.highlighted-on-white {
      background-color: #eded3b;
      /* Lighter yellow for originally white cells */
      background-color: #eded3b;
      border: 1px solid grey;
    }
    
    #chessboard td.highlighted-on-black {
      background-color: #e3cf39 !important;
      /* Darker yellow for originally black cells */
      border: 1px solid grey;
    }
    
    .piece {
      font-size: 40px;
      cursor: pointer;
      color: black;
    }
    
    .piece.selected {
      color: lightgreen;
    }
    
    
    #chessboard td.outside-footprint {
      background-color: red !important;
      /* Ensuring override */
      border: none;
    }
    
    #chessboard td {
      width: 40px;
      /* Fixed width */
      height: 40px;
      line-height :1;
      /* Fixed height */
      color: black;
      text-align: center;
      vertical-align: middle;
      font-size: 30px;
      /* Adjust if necessary */
      overflow: hidden;
      /* Prevents content from spilling outside */
      white-space: nowrap;
      /* Prevents text wrapping */
    }
    
    #chessboard tr:nth-child(odd) td:nth-child(even),
    #chessboard tr:nth-child(even) td:nth-child(odd) {
      background-color: gray;
    }
    
    #chessboard {
      border-collapse: collapse;
      width: 100%;
      /* Fixed width */
      height: 400px;
      /* Fixed height */
      border: 1px solid black;
      table-layout: fixed;
      /* Ensures fixed cell sizing */
    }
    
    
    #pieceRack,
    #lives,
    #message {
      margin-top: 10px;
      text-align: center;
    }
    
    #newGame {
      margin-top: 10px;
      display: block;
    }
    
    .star {
      color: green;
      /* Default color for active lives */
      font-size: 30px;
    }
    
    .star.lost {
      color: red;
      /* Color for lost lives */
    }
    
    .win-overlay {
      display: none;
      /* Initially hidden */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent overlay */
      z-index: 100;
      /* Ensure it's above other elements */
      align-items: center;
      justify-content: center;
      display: flex;
    }
    
    .fireworks {
      padding: 20px;
      position:relative;
      background-color: white;
      border-radius: 2px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      text-align: center;
      font-size: 20px;
      /* height:100vh; */
      box-sizing:border-box;
    }
    
    #solved-image-container{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    
    #solved-image-container > div, #solved-image-container > img {
      flex: 0 1 33.333%; /* flex-grow, flex-shrink, flex-basis */
    }
    
    #close_btn {
      position: absolute;
      right: -10px;
      top: -15px;
      cursor: pointer;
    }
    
    #toast {
      visibility: hidden;
      max-width: 50%;
      max-height: 50px;
      height: auto;
      margin: auto;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      z-index: 2;
      transition: visibility 0.5s, opacity 0.5s linear;
      opacity: 0;
    }
    
    #toast.show {
      visibility: visible;
      opacity: 1;
    }
  
    .nbutton {
      background-color: green;
      border: none;
      color: white;
      height: 30px;
      border-radius: 3px;
      height: 40px;
      width: 280px;
    }
    
    #htp {
      font-family: 'Open Sans', sans-serif;
      align-items: center;
      justify-content: center;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 10px;
      width: 100%;
      max-width: 420px;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background-color: #ffffff;
      /* text-align: end; */
    }
    
    #htp::-webkit-scrollbar {
      display: none;
    }
    
    .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      outline: none;
      /* Removes the default focus outline to make it visually more appealing */
    }
    
    .nbutton {
      background-color: green;
      border: none;
      color: white;
      height: 30px;
      border-radius: 3px;
      height: 40px;
      width: 280px;
    }
    
    .description {
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      width: 420px;
    }
    
    .accordion1 {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 10px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      transition: 0.4s;
      font-size: 15px;
      font-weight: bold;
    }
    
    .accordion1:after {
      content: '\002B';
      /* Unicode character for "plus" sign (+) */
      font-size: 13px;
      color: #777;
      float: right;
      margin-left: 5px;
    }
    
    .active1:after {
      content: "\2212";
      /* Unicode character for "minus" sign (-) */
    }
    
    .panel {
      padding-left: 40px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
    
    /* Slideshow container */
    .slideshow-container {
      /* max-width: 1000px; */
      position: relative;
      margin: auto;
    }
    
    /* Hide the images by default */
    .mySlides {
      display: none;
    }
    
    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 190px;
      transform: translateY(-50%);
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: black;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }
    
    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    /* Caption text */
    .text {
      color: black;
      font-size: 15px;
      padding: 8px 12px;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    
    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    
    .slideshow-container {
      /* max-width: 1000px; */
      position: relative;
      margin: auto;
      /* display:none; */
      }
     
      /* Hide the images by default */
      .mySlides {
      display: none;
      }
     
      /* Next & previous buttons */
      .prev,
      .next {
      cursor: pointer;
      position: absolute;
      top: 190px;
      transform: translateY(-50%);
      width: auto;
      margin-top: 65px;
      padding: 16px;
      color: black;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      }
     
      /* Position the "next button" to the right */
      .next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }
     
      .prev {
      left : 0px;
      border-radius: 3px 0 0 3px;
      }
     
    /* .active, .dot:hover {
    background-color: #717171;
    } */
    
    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    .mySlides img {
      width:260px;
      height:260px;
      /* object-fit:cover; */
    }
    
    .custom-btn{
        border-radius: 3px;
        color: white;
        border: none;
        padding: 8px 15px;
        width: 130px;
        height: 40px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        margin: 4px 4px;
        cursor: pointer
    }
    
    .win-overlay {
      display: none;
      /* Initially hidden */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent overlay */
      z-index: 100;
      /* Ensure it's above other elements */
      align-items: center;
      justify-content: center;
      display: flex;
    }
    
    .fireworks {
      padding: 20px;
      background-color: white;
      border-radius: 2px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      text-align: center;
      font-size: 24px;
      display:flex;
      flex-direction:column;
      align-items: center;
      gap:10px;
    }
    
    .fireworks-animation {
      font-size: 100px;
      animation: fireworks-animation 1s infinite alternate;
    }
    
    .button-container{
      display:flex;
      justify-content:center;
    }
    
    .create_btn {
      background-color:rgb(222,222,74);
    }
    
    .play_btn{
      background-color:#AA4A44;
    }
    
   
      #solution{
        display:none;
        padding: 0px 15px;
        margin:auto;
        flex-direction:column;
        align-items:center;
        /* margin-bottom: 20px; */
        gap:15px;
      }
    
      #levelModal{
        position:absolute;
        display:none;
        /* top:60%; */
        left:50%;
        transform:translate(-50%, 0%);
        width:100%;
        max-width: 420px;
        text-align: center;
        padding:0px 30px 30px 30px;
        box-sizing: border-box;
        background-color:#ffffff;
      /* height:100vh; */
      }
    
    #fileInput{
      display:none;
    }
    
    #crop_container{
      width:260px;
      margin : auto;
    }
    .cropped-container{
      width:260px;
      margin:auto;
      text-align:center;
      justify-content :center;
      /* background-color:ghostwhite; */
      /* padding:20px; */
      display:none;
      margin-top:10px;
    }
    
    #btn-crop:disabled{
      pointer-events:none;
    }
    
    #output{
      /* margin:0 5px; */
      width:310px;
      display:block;
      max-width:100%;
    }
    
    #puzzle-container, #puzzle-custom-container {
      position:relative;
      width: 310px;
      height: 310px;
      display: grid;
      grid-template-columns: repeat(var(--rows), var(--width));
      grid-template-rows: repeat(var(--rows), var(--width));
      margin:auto;
      display:none;
      margin-bottom:20px;
    }
    
    #puzzle-backdrop{
      position:absolute;
      display:block;
      width:300px;
      height:300px;
      background-color: rgba(0, 0, 0, 0.5);
      z-index:2;
    }
    
    #puzzle-container div, #puzzle-custom-container div {
      width: var(--width);
      height: var(--width);
      display: flex;
      align-items: center;
      gap:2px;
      justify-content: center;
      border: 1px solid black;
      border-collapse:collapse;
      /* box-sizing:border-box; */
    }
    #puzzle-container div.selected, #puzzle-custom-container div.selected {
      border:3px solid yellow;
      box-sizing:border-box;
    }
    #solved-image {
      width: 310px;
      height: 310px;
      display:none;
      margin:auto;
    }
    
    #solved-custom-image {
      width: 100%;
      height: 100%;
      max-width:150px;
      /* display:none; */
      margin:auto;
    }
    #manual_crop, #crop_container{
      display:none;
    }
    #score{
      display:none;
    }
    
    .gallery {
      display: flex;
      flex-wrap: wrap;
     /* Adjust the gap between images */
      margin:auto;
      max-height:100vh;
      /* overflow-y:auto; */
    }
    
    .gallery ::-webkit-scrollbar{
      width:5px;
    }
    
    .gallery-item {
      flex: 1 1 calc(33.333% - 10px);
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      width: 100%;
      max-width: 140px;
      height: 140px;
      overflow-y: hidden;
       /*box border with 1 white pixel */  
    border: 1px solid white;
    }
    
    .gallery-item img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit:cover;
    }
    
    input[type="text"]{
      width: 100%; /* Make inputs fill out the form-group */
      padding: 8px; /* Add some padding inside the input */
      border: 1px solid #ddd; /* Light grey border */
      border-radius: 4px; /* Slightly rounded corners */
      box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    
    .searchButton{
      color:#ffffff;
      padding:9px 10px;
      font-weight:bold;
      background-color:green;
      border-radius:4px;
      border:0px solid transparent;
      cursor:pointer;
    }
    
    #solnBtn{
      /* width: 100%; */
      width:25px;
      border: 0px;
      /* padding: 10px; */
      border-radius: 0px;
      font-size: 15px;
      cursor:pointer;
      text-transform:uppercase;
      /* background-color: #cbcbcb; */
  }
    
    .headerText{
      text-align:center;
      padding:10px;
      font-size:20px;
      color:grey!important;
    }
    
    #ad_wrapper{
      display:none;
      height:15vh;
      max-height:300px;
      background-color:aliceblue;
      /* border:1px solid black; */
      position:fixed;
      z-index:1;
      bottom:35px;
      width:100%;
      max-width:420px
    }
    
    .ad_div1{
      width:100%;
      height:100%;
      background-color: aliceblue;
    }
    
    #score_wrapper{
      display:none;
      justify-content: space-between;
      padding:10px;
    }
    
    .shimmer {
      height: 200px; /* Adjust based on your preference */
      background: #f6f7f8;
      background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
      background-repeat: no-repeat;
      background-size: 800px 200px; /* Adjust the width to be larger than the container width */
      display: inline-block;
      position: relative;
      overflow: hidden;
    }
    
    .animation {
      animation-duration: 1.5s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-name: shimmerAnimation;
      animation-timing-function: linear;
    }
    
    
    
    @keyframes shimmerAnimation {
      0% {
          background-position: -800px 0;
      }
      100% {
          background-position: 800px 0;
      }
    }
    
    @keyframes fade {
      from {
        opacity: .4
      }
    
      to {
        opacity: 1
      }
    }
    
    @media only screen and (max-width:400px){
      /* #chessboard td{
        height:auto;
      } */
    
      #chessboard{
        height:auto;
      }
    }
    
    @media only screen and (max-width:420px){
      .mySlides img{
        width:80vw;
        height:80vw;
      }
    }