@font-face{font-family:'harbour';src:url('lib/Phineas y Ferb.ttf')}

body{
    margin: 0;
    font-family: "harbour";
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    -webkit-user-drag: none;
    user-select: none;
    touch-action: none;
    }
    
    #full-area {
      position: absolute;
      width: 100%;
      height: 100vh;
      user-select: none;
      background-size: cover;
      overflow: hidden;
      background: white;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      touch-action: none;
      }

      #full-area:focus {
        outline: none !important;
      }

      #game-area {
        width: 615px;
        height: 615px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: none;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        background: url('./media/bg.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      #game{
        width: 615px;
        height: 615px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #heartss{
        width: 615px;
        height: 635px;
        position: relative;
        z-index: 1000;
        display: none;
      }


      iframe{
        position: absolute;
        width: 615px;
        height: 615px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;

    }

    #can{
      position: absolute;
      top: 87%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 150px;
      height: auto;
      cursor: grab;
    }

    #pieces {
      position: absolute;
      width: 445px; /* Ensures enough space for two columns of 40px width */
      height: 245px; /* Total height of the container */
      left: 50.3%;
      top: 65.8%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-wrap: wrap; 
      justify-content: center; 
      align-content: center; 
      padding: 0; 
      z-index: 9;
    }
    
    #pieces img {
      cursor: pointer;
    }
   
    .dropZone {
      display: inline-block;
      transform-origin: center center;
      
    }


    .notdropZone{
      width: 38px; /* Fixed width */
      height: 38px; /* Fixed height */
    }


    #drop-places{
      position: absolute;
      width: 331px;
      height: 195px;
      left: 23.1%;
      top: 13.8%;
   
    }

    #Aartboard1{
      position: absolute;
      transform: translate(110.5px,0);
      opacity: 0;
      width: 113.9px;
      height: auto;
      z-index: 2;
    }

    #artboard1{
      width: 113.9px;
      height: auto;
    }

    #Aartboard2{
      position: absolute;
      transform: translate(-3px,-2px);
      opacity: 0;
      width: 116px;
      height: auto;
      z-index: 2;
    }

    #artboard2{
      width: 116px;
      height: auto;
    }

    #Aartboard3{
      position: absolute;
      transform: translate(-0.5px,28px);
      width: 113px;
      height: auto;
      opacity: 0;
      z-index: 3;
    }

    #artboard3{
      width: 113px;
      height: auto;
    }

    #Aartboard4{
      position: absolute;
      transform: translate(-0.5px,111px);
      opacity: 0;
      width: 87px;
      height: auto;
      z-index: 4;
    }

    #artboard4{
      width: 87px;
      height: auto;
    }

    #Aartboard5{
      position: absolute;
      transform: translate(165.4px,53px);
      opacity: 0;
      width: 115px;
      height: auto;
      z-index: 5;
    }

    #artboard5{
      width: 115px;
      height: auto;
    }

    #Aartboard6{
      position: absolute;
      transform: translate(82px,53px);
      opacity: 0;
      width: 86px;
      height: auto;
      z-index: 6;
    }

    #artboard6{
      width: 86px;
      height: auto;
    }
    
    #Aartboard7{
      position: absolute;
      transform: translate(227px,37.5px);
      opacity: 0;
      width: 105px;
      height: auto;
      z-index: 6;
    }

    #artboard7{
      width: 105px;
      height: auto;
    }

    #Aartboard8{
      position: absolute;
      transform: translate(167px,109.5px);
      opacity: 0;
      width: 87px;
      height: auto;
      z-index: 6;
    }

    #artboard8{
      width: 87px;
      height: auto;
    }
    
    #Aartboard9{
      position: absolute;
      transform: translate(167.1px,165.7px);
      opacity: 0;
      width: 29.3px;
      height: auto;
      z-index: 6;
    }

    #artboard9{
      width: 29.3px;
      height: auto;
    }
    
    #Aartboard10{
      position: absolute;
      transform: translate(222px,-3.5px);
      opacity: 0;
      width: 102px;
      height: auto;
      z-index: 6;
    }

    #artboard10{
      width: 102px;
      height: auto;
    }
    
    #Aartboard11{
      position: absolute;
      top: 17.5%;
      left: 76%;
      opacity: 0;
      width: 53px;
      height: auto;
      z-index: 6;
    }

    #artboard11{
      width: 53px;
      height: auto;
    }
    
    
    #drop-places .dropZone {
      transition: transform 0.3s ease;
  }
  
    .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 40px;
      aspect-ratio: 1;
      display: grid;
    }
    .loader::before,
    .loader::after {
      content: "";
      grid-area: 1/1;
      --c:no-repeat linear-gradient(#046D8B 0 0);
      background:
        var(--c) 0 0,
        var(--c) 100% 0,
        var(--c) 100% 100%,
        var(--c) 0 100%;
      animation: 
        l10-1 2s infinite linear,
        l10-2 2s infinite linear;
    }
    .loader::after {
      margin: 25%;
      transform: scale(-1);
    }
    @keyframes l10-1 {
      0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
      12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
      25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
      37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
      45%,
      55%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
      62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
      75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
      87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
      100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
    }

    @keyframes l10-2 {
      0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
      50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
    }

  #artboard1 { position: absolute; left: 0px; top: 2px; }
  #artboard2 { position: absolute; left: 175px; top: 2px; }
  #artboard3 { position: absolute; left: 287px; top: 28px; }
  #artboard8 { position: absolute; left: 111px; top: 36px; }
  #artboard5 { position: absolute; left: 98px; top: 124px; }
  #artboard6 { position: absolute; left: 8px; top: 75px; }
  #artboard7 { position: absolute; left: 142px; top: 82px; }
  #artboard4 { position: absolute; left: 248px; top: 118px; }
  #artboard9 { position: absolute; left: 342px; top: 145px; }
  #artboard10 { position: absolute; left: 335px; top: 176px; }
  #artboard11 { position: absolute; left: 390px; top: 20px; }


      .confetti {
      position: fixed;
      top: 0;
      width: 10px;
      height: 10px;
      opacity: 0.8;
      animation: fall linear infinite;
    }

    .triangle {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid orange; /* Phineas */
    }

    .square {
      width: 10px;
      height: 10px;
      background: #32cd32; /* Ferb */
    }

    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #9370db; /* Candace or Doofenshmirtz */
    }

    @keyframes fall {
      0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }

    @keyframes popIn {
      0% {
        transform: scale(0.2);
        opacity: 0;
      }
      70% {
        transform: scale(1.1);
        opacity: 1;
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes pop {
      0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
      60%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
    }

    #win {
      position: absolute;
      top: 65.7%; left: 50%;
      transform: translate(-50%, -50%);
      display: none;            
      padding: 16px 24px;
      background: rgba(255,255,255,0.85);
      border: 3px solid #4F9D69; 
      border-radius: 12px;
      font-family: 'harbour', sans-serif;
      font-size: 50px;
      color: #6DC136;            
      text-align: center;
      animation: pop 0.4s ease-out;
      z-index: 999;
    }

    #undo {
      position: absolute;
      bottom: 32px;
      right: 106px;
      padding: 5px 12px;
      background: #fff;
      border: 2px solid #4F9D69;
      border-radius: 6px;
      font-family: 'harbour', sans-serif;
      cursor: pointer;
      z-index: 10000;
      font-size: 20px;
    }
    #undo:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }