:root {
      --pixel: 6px;
      --scale: 2;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      overflow: hidden;
      height: 100vh;
      background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
      font-family: monospace;
      cursor: pointer;
    }

    .scene {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    .sun {
      position: absolute;
      top: 60px;
      left: 80px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #ffd76a;
      opacity: 0.9;
    }

    .ground {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 150px;
      background: #4e9a51;
      border-top: 4px solid #2c5c2f;
    }

    .instruction-wrapper{
      width:90vw;
      /* top: calc(50% - 200px); */
      top:26.66%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      animation:    instructionFadeIn 1.2s ease forwards,    instructionFloat 2s ease-in-out infinite 1.2s;
      opacity: 0;
      text-align:center;
    }

    .instruction {
    font-family: 'Press Start 2P', monospace;
    /*font-size: 64px;
    */font-size: clamp(20.48px, 5.12vw, 64px);
    /*IMPORTANT:;
    pixelfontslookbetterslightlysmaller*/line-height: 1.4;
    letter-spacing: 6px;
    color: #fff4cc;
    text-shadow:      4px 4px 0 #3b2f24;
    /*image-rendering: pixelated;*/
    pointer-events: none;
    /* white-space:nowrap; */
    white-space: normal;
    
}

    
    @keyframes instructionFadeIn {
      from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
      }
      to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
    
    @keyframes instructionFloat {
      0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
      }
      50% {
        transform: translate(-50%, -50%) translateY(-10px);
      }
    }
    
    .wish-text {
      position: absolute;
      /*top: 170px;
      */top: 19.9%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 3;
      /*abovecharacters(2),belowdialogue(30)*/pointer-events: none;
      width:90vw;
      background:#00000080;
      padding:10px;
      border-radius:30px;
      -webkit-border-radius:30px;
      -moz-border-radius:30px;
      -ms-border-radius:30px;
      -o-border-radius:30px;
      opacity:0;
}
    .scene.office-scene .wish-text{
      opacity:1;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
      -moz-transition: opacity 1s ease;
      -ms-transition: opacity 1s ease;
      -o-transition: opacity 1s ease;
}
    .scene.construction-scene .wish-text,
    .scene.cubicle-scene .wish-text,
    .scene.family-scene .wish-text,
    .scene.friends-scene .wish-text,
    .scene.me-scene .wish-text {
      opacity:1;
    }

    .wish-small,
    .wish-main {
      font-family: 'Press Start 2P', monospace;
      color: #fff4cc;
      text-shadow: 4px 4px 0 #3b2f24;
      letter-spacing: 0px; 
      opacity: 0;
      /* white-space:nowrap; */
      white-space:normal;
    }

    .wish-small {
      /* font-size: 32px; */
      font-size:clamp(10.24px, 2.56vw, 32px);
      margin-bottom: 20px;
    }

    .wish-main {
      /* font-size: 50px; */
      font-size: clamp(16px, 4vw, 50px);
    }

    .wish-small.show {
      animation: wishFadeLeft 0.8s ease forwards;
    }

    @keyframes wishFadeLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .wish-main.show {
      animation: wishPop 0.8s ease forwards;
      -webkit-animation: wishPop 0.8s ease forwards;
}

    .wish-main.showN {
      animation: wishPopWOScale 0.8s ease forwards;
      -webkit-animation: wishPopWOScale 0.8s ease forwards;
}

    @keyframes wishPopWOScale {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes wishPop {
      from {
        opacity: 0;
        transform: scale(0.85);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .character {
      position: absolute;
      bottom: calc(50% - 278.5px);
      /* bottom:17.5%; */
      width: calc(16 * var(--pixel) * var(--scale));
      height: calc(24 * var(--pixel) * var(--scale));
      transform-origin: bottom center;
    }

    .boy {
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      /* animation: idleBob 2s ease-in-out infinite; */
    }

    .girl {
      left: calc(100vw + 40px);
      /* left:calc(50% - 70px); */
      z-index: 10;
    }

    .girl .pixel-art {
      position: relative;
    }

    .girl .arm.back {
      z-index: 1;
    }

    .girl .Body,
    .girl .Head,
    .girl .arm {
      position: absolute;
      inset: 0;
    }

    .girl .Body {
      position: absolute;
      inset: 0;
      z-index: 3;
    }

    .girl .Head {
      position: absolute;
      inset: 0;
      z-index: 4;
    }

    .girl .arm.front {
      z-index: 5;
    }

    .girl.arrived {
      left: calc(50% + 90px);
    }

    .girl.walking {
      transition: left 3s linear;
    }

    .pixel-art {
      position: relative;
      width: calc(16 * var(--pixel));
      height: calc(24 * var(--pixel));
      transform: scale(var(--scale));
      transform-origin: bottom left;
      image-rendering: pixelated;
    }

    .pixel {
      position: absolute;
      width: var(--pixel);
      height: var(--pixel);
    }

    .girl .arm,
.girl .leg {
  position: absolute;
  inset: 0;
  transition: transform 1s ease;
  -webkit-transition: transform 1s ease;
  -moz-transition: transform 1s ease;
  -ms-transition: transform 1s ease;
  -o-transition: transform 1s ease;
}

.girl.walking .leg.front {
  animation: girlLegFront 0.4s ease-in-out infinite alternate;
}

.girl.walking .leg.back {
  animation: girlLegBack 0.4s ease-in-out infinite alternate;
}

@keyframes girlLegFront {
  from {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
  to {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
}

@keyframes girlLegBack {
  from {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
  to {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
}
}

.girl.walking .arm.front {
  animation: girlArmFront 0.4s ease-in-out infinite alternate;
}

.girl.walking .arm.back {
  animation: girlArmBack 0.4s ease-in-out infinite alternate;
}

@keyframes girlArmFront {
  from {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
  to {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
}

@keyframes girlArmBack {
  from {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
  to {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
}

.boy.walking .leg.front {
  animation: boyLegFront 0.4s ease-in-out infinite alternate;
}

.boy.walking .leg.back {
  animation: boyLegBack 0.4s ease-in-out infinite alternate;
}

.boy.walking .arm.front {
  animation: boyArmFront 0.4s ease-in-out infinite alternate;
}

.boy.walking .arm.back {
  animation: boyArmBack 0.4s ease-in-out infinite alternate;
}

@keyframes boyLegFront {
  from {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
  to {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
}

@keyframes boyLegBack {
  from {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
  to {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
}
}

@keyframes boyArmFront {
  from {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
  to {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
}

@keyframes boyArmBack {
  from {
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
}
  to {
    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
}
}

.heart {
  position: absolute;
  left: calc(5 * var(--pixel));
  top: calc(15.5 * var(--pixel));
  width: 25px;
  /*adjustsizeimage-rendering: pixelated;
  */opacity: 0;
  transform: scale(1) rotate(90deg);
  transform-origin: center;
  pointer-events: none;
  -webkit-transform: scale(1) rotate(90deg);
  -moz-transform: scale(1) rotate(90deg);
  -ms-transform: scale(1) rotate(90deg);
  -o-transform: scale(1) rotate(90deg);
  z-index: 2;
}

.heart-wrap {
  position: absolute;
  left: calc(5 * var(--pixel));
  top: calc(15.5 * var(--pixel));
  pointer-events: none;
  z-index: 2;
}

.girl.wave .arm.front {
  /*animation: girlWave 0.35s ease-in-out 3 alternate;
  transform-origin: calc(8 * var(--pixel)) calc(12 * var(--pixel));*/
  transform-origin: calc(8.5 * var(--pixel)) calc(13 * var(--pixel));
  
  animation: girlWaveSequence 2s ease-in-out forwards;
  -webkit-animation: girlWaveSequence 2s ease-in-out forwards;
}

@keyframes girlWaveSequence {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(200deg);
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
}

  50% {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
}

  75% {
    transform: rotate(200deg);
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
}

  100% {
    transform: rotate(0deg);
  }
}

.boy.wave .arm.front {
  /*animation: boyWave 0.35s ease-in-out 3 alternate;
  -webkit-animation: boyWave 2s ease-in-out forwards;*/
  transform-origin: calc(9.5 * var(--pixel)) calc(13 * var(--pixel));
  animation: boyWave 2s ease-in-out forwards;
  -webkit-animation: boyWave 2s ease-in-out forwards;
}

@keyframes boyWave {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-200deg);
    -webkit-transform: rotate(-200deg);
    -moz-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    -o-transform: rotate(-200deg);
}

  50% {
    transform: rotate(-150deg);
    -webkit-transform: rotate(-150deg);
    -moz-transform: rotate(-150deg);
    -ms-transform: rotate(-150deg);
    -o-transform: rotate(-150deg);
}

  75% {
    transform: rotate(-200deg);
    -webkit-transform: rotate(-200deg);
    -moz-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    -o-transform: rotate(-200deg);
}

  100% {
    transform: rotate(0deg);
  }
}

.girl.pose-heart .heart-wrap {
  animation: heartMove 5s ease-in-out forwards;
  -webkit-animation: heartMove 5s ease-in-out forwards;
}

.girl.pose-heart .heart {
  opacity: 1;
  animation: heartScale 5s ease-in-out forwards;
  -webkit-animation: heartScale 5s ease-in-out forwards;
}

.girl.pose-heart .arm.front {
  transform: rotate(90deg) translateY(-10px);
  transform-origin: calc(7 * var(--pixel)) calc(12 * var(--pixel));
  -webkit-transform: rotate(90deg) translateY(-10px);
  -moz-transform: rotate(90deg) translateY(-10px);
  -ms-transform: rotate(90deg) translateY(-10px);
  -o-transform: rotate(90deg) translateY(-10px);
}

.girl.pose-heart .arm.back {
  transform:rotate(90deg) translateY(-10px) translateX(-2px);
  transform-origin: calc(7 * var(--pixel)) calc(12 * var(--pixel));
  -webkit-transform:rotate(90deg) translateY(-10px) translateX(-2px);
  -moz-transform:rotate(90deg) translateY(-10px) translateX(-2px);
  -ms-transform:rotate(90deg) translateY(-10px) translateX(-2px);
  -o-transform:rotate(90deg) translateY(-10px) translateX(-2px);
}

@keyframes heartScale {
  0% {
    transform: scale(1) rotate(-90deg);
    -webkit-transform: scale(1) rotate(-90deg);
    -moz-transform: scale(1) rotate(-90deg);
    -ms-transform: scale(1) rotate(-90deg);
    -o-transform: scale(1) rotate(-90deg);
    z-index: 2;
}
15% {
    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    z-index: 2;
}
  22% {
    transform: scale(1.5) rotate(0deg);
    -webkit-transform: scale(1.5) rotate(0deg);
    -moz-transform: scale(1.5) rotate(0deg);
    -ms-transform: scale(1.5) rotate(0deg);
    -o-transform: scale(1.5) rotate(0deg);
    z-index: 2;
}
  45% {
    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    z-index: 2;
}
  67% {
      transform: scale(1.5) rotate(0deg);
      -webkit-transform: scale(1.5) rotate(0deg);
      -moz-transform: scale(1.5) rotate(0deg);
      -ms-transform: scale(1.5) rotate(0deg);
      -o-transform: scale(1.5) rotate(0deg);
      z-index: 2;
}
  90% {
    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    z-index: 2;
}
  95% {
    opacity: 100%;
}

  100% {
    transform: scale(100) rotate(0deg);
    -webkit-transform: scale(100) rotate(0deg);
    -moz-transform: scale(100) rotate(0deg);
    -ms-transform: scale(100) rotate(0deg);
    -o-transform: scale(100) rotate(0deg);
    z-index: 999;
    opacity: 0%;
}
}

@keyframes heartMove {
  0%   { transform: translate(-32px, -95px); z-index: 2; -webkit-transform: translate(-32px, -95px); -moz-transform: translate(-32px, -95px); -ms-transform: translate(-32px, -95px); -o-transform: translate(-32px, -95px); }
  6%   { transform: translate(-50px, -106px); z-index: 2; -webkit-transform: translate(-50px, -106px); -moz-transform: translate(-50px, -106px); -ms-transform: translate(-50px, -106px); -o-transform: translate(-50px, -106px); }
  9%   { transform: translate(-53px, -117px); z-index: 2; -webkit-transform: translate(-53px, -117px); -moz-transform: translate(-53px, -117px); -ms-transform: translate(-53px, -117px); -o-transform: translate(-53px, -117px); }
  20%  { transform: translate(-53px,-129px); z-index: 2; -webkit-transform: translate(-53px,-129px); -moz-transform: translate(-53px,-129px); -ms-transform: translate(-53px,-129px); -o-transform: translate(-53px,-129px); }
  90%  {z-index: 2;}
  100% { z-index: 999; transform: translate(-53px,-129px); -webkit-transform: translate(-53px,-129px); -moz-transform: translate(-53px,-129px); -ms-transform: translate(-53px,-129px); -o-transform: translate(-53px,-129px); }
}

.scene.heart-transition .girl .Body,
.scene.heart-transition .girl .Head,
.scene.heart-transition .girl .arm,
.scene.heart-transition .girl .leg {
  animation: girlHideAt97 5s linear forwards;
  -webkit-animation: girlHideAt97 5s linear forwards;
}

@keyframes girlHideAt97 {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  96% {
    opacity: 0;
  }
  97% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
} 

    .dialogue-box {
      position: absolute;
      left: 50%;
      bottom: 25px;
      transform: translateX(-50%);
      width: min(760px, 92vw);
      min-height: 110px;
      background: #f4ead7;
      border: 4px solid #3b2f24;
      box-shadow: 0 6px 0 #2a2119;
      padding: 14px 16px;
      display: none;
      z-index: 30;
    }

    .dialogue-name {
      font-weight: bold;
      margin-bottom: 8px;
      color: #3b2f24;
    }

    .dialogue-text {
      color: #2e241d;
      line-height: 1.5;
      white-space: pre-wrap;
      min-height: 48px;
    }

    .dialogue-hint {
      margin-top: 10px;
      font-size: 12px;
      color: #6a5645;
      text-align: right;
    }

    .talking .mouth {
      animation: mouthMove 0.22s steps(1) infinite;
    }

    @keyframes mouthMove {
      0%   { transform: scaleY(1); height: calc(var(--pixel) * 1); }
      50%  { transform: scaleY(1.8); height: calc(var(--pixel) * 2); }
      100% { transform: scaleY(1); height: calc(var(--pixel) * 1); }
    }

    @keyframes idleBob {
      0%, 100% {
        transform: translateX(-50%) translateY(0);
      }
      50% {
        transform: translateX(-50%) translateY(-6px);
      }
    }

    /* Second scene */
    .scene.office-scene {
      background: linear-gradient(to top, #d7dbe3 0%, #e8edf5 55%, #f6f8fb 100%);
    }

    .office-bg {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      background:
        linear-gradient(to top, #d7dbe3 0%, #e8edf5 55%, #f6f8fb 100%);
    }

    .office-ground {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      background:
        /* linear-gradient(to top, #b58f72 0 370px, transparent 370px); */
        linear-gradient(to top, #b58f72 0 calc(50% - 58.4px), transparent calc(50% - 58.4px));
    }

    .scene.office-scene .office-bg {
      opacity: 1;
    }

    .scene.office-scene .office-ground {
      opacity: 1;
    }

    /* Hide outdoor look when office appears */
    .scene.office-scene .instruction {
      display: none;
    }

    /* characters */
    .boss {
      display: block;
      opacity: 0;
      left: calc(50% + 7px);
      z-index: 2;
    }

    .scene.heart-transition .office-bg {
      animation: officeReveal 5s linear forwards;
    }

    .scene.heart-transition .office-ground {
      animation: officeReveal 5s linear forwards;
    }

    .scene.heart-transition .boss {
      animation: bossReveal 5s linear forwards;
    }

    /* office furniture */
    .office-couch {
      position: absolute;
      bottom: calc(50% - 108.5px);
      width: 220px;
      height: 95px;
      background: #5c6d8b;
      border: 4px solid #334157;
      border-radius: 12px;
      z-index: 2;
    }

    .office-couch::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 14px;
      height: 28px;
      background: #7384a3;
      border-radius: 8px;
    }

    .office-couch::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: -14px;
      height: 14px;
      background: #2d3748;
      border-radius: 0 0 6px 6px;
    }

    .couch-left {
      left: calc(50% - 253px);
    }

    .couch-right {
      left: calc(50% + 87px);
    }

    .office-table {
      position: absolute;
      /* left: 51.8%; */
      /* transform: translateX(-50%); */
      left: calc(50% - 48.5px);
      /* bottom: 328px; */
      bottom:calc(50% - 100.5px);
      width: 150px;
      height: 34px;
      background: #8b6246;
      border: 4px solid #5d3f2b;
      border-radius: 6px;
      z-index: 4;
    }

    .office-table::before,
    .office-table::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 34px;
      background: #5d3f2b;
      bottom: -30px;
    }

    .office-table::before {
      left: 20px;
    }

    .office-table::after {
      right: 20px;
    }

    /* wall decor */
    .office-wall-frame {
      position: absolute;
      top: 70px;
      width: 110px;
      height: 75px;
      background: #f3f6fb;
      border: 5px solid #7b5b43;
      box-shadow: inset 0 0 0 3px #d9e1ee;
      z-index: 2;
    }

    .frame-1 {
      left: calc(50% - 213px);
    }

    .frame-2 {
      left: calc(50% + 147px);
    }

    .office-clock {
      position: absolute;
      top: 60px;
      /* left: 51.8%; */
      /* transform: translateX(-50%); */
      left:50%;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: #ffffff;
      border: 4px solid #4a5568;
      z-index: 2;
    }

    .office-clock::before {
      content: "";
      position: absolute;
      width: 3px;
      height: 14px;
      background: #4a5568;
      left: 50%;
      top: 11px;
      transform: translateX(-50%) rotate(20deg);
      transform-origin: bottom center;
    }

    .office-clock::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 3px;
      background: #4a5568;
      left: 50%;
      top: 25px;
      transform: translateX(-10%);
    }

    /* plant */
    .office-plant {
      position: absolute;
      right: 70px;
      /* right: calc(50% - 686px); */
      /* bottom: 350px; */
      bottom: calc(50% - 78.5px);
      width: 90px;
      height: 120px;
      z-index: 2;
    }

    .plant-pot {
      position: absolute;
      bottom: 0;
      left: 22px;
      width: 46px;
      height: 32px;
      background: #9d6b4a;
      border: 4px solid #6e4731;
      border-radius: 0 0 8px 8px;
    }

    .plant-leaf {
      position: absolute;
      bottom: 25px;
      width: 24px;
      height: 52px;
      background: #5ea36a;
      border: 3px solid #3f7e4b;
      border-radius: 20px 20px 0 20px;
    }

    .leaf-1 {
      left: 15px;
      transform: rotate(-25deg);
    }

    .leaf-2 {
      left: 34px;
      height: 62px;
    }

    .leaf-3 {
      left: 52px;
      transform: rotate(24deg);
    }

    /* office floor */
    .scene.office-scene::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      /* height: 170px; */
      height:calc(50% - 258.5px);
      background: #b58f72;
      border-top: 4px solid #8b6d58;
      z-index:0;
    }

    @keyframes officeReveal {
      0% {
        opacity: 0;
      }
      96.9% {
        opacity: 0;
      }
      97% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes bossReveal {
      0% {
        opacity: 0;
      }
      96.9% {
        opacity: 0;
      }
      97% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    .boy.handshake .arm.front {
      transform-origin: calc(10 * var(--pixel)) calc(13 * var(--pixel));
      animation:
        boyRaise 0.5s ease-out forwards,
        boyShake 1s ease-in-out infinite alternate 0.5s;
    }

    .boss.handshake .arm.front {
      transform-origin: calc(8 * var(--pixel)) calc(13 * var(--pixel));
      animation: 
        bossRaise 0.5s ease-out forwards,
        bossShake 1s ease-in-out infinite alternate 0.5s;
    }

    .boss.handshake .arm.back {
      transform-origin: calc(8 * var(--pixel)) calc(12 * var(--pixel));
      animation: 
        bossRaiseBack 0.5s ease-out forwards,
        bossRaiseBackShake 1s ease-in-out infinite alternate 0.5s;
    }

    /* Step 1: raise arm once */
    @keyframes boyRaise {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-40deg); }
    }

    @keyframes bossRaise {
      from { transform: rotate(0deg); }
      to   { transform: rotate(40deg); }
    }

    @keyframes bossRaiseBack {
      from { transform: rotate(0deg); }
      to   { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
    }

    @keyframes bossRaiseBackShake {
      from { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); }
      to   { transform:rotate(88deg); -webkit-transform:rotate(88deg); -moz-transform:rotate(88deg); -ms-transform:rotate(88deg); -o-transform:rotate(88deg); }
    }

    /* Step 2: infinite handshake */
    @keyframes boyShake {
      from { transform: rotate(-50deg); -webkit-transform: rotate(-50deg); -moz-transform: rotate(-50deg); -ms-transform: rotate(-50deg); -o-transform: rotate(-50deg); }
      to   { transform: rotate(-55deg); -webkit-transform: rotate(-55deg); -moz-transform: rotate(-55deg); -ms-transform: rotate(-55deg); -o-transform: rotate(-55deg); }
    }

    @keyframes bossShake {
      from { transform: rotate(50deg); -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); }
      to   { transform: rotate(55deg); -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); }
    }
    /* Second scene */

    /* third scene */

    /* =========================
   OFFICE -> CONSTRUCTION
   ========================= */

/* let construction layer sit above office background */
.construction-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.scene.construction-scene .construction-bg {
  opacity: 1;
}

/* outdoor overall background */
.scene.construction-scene {
  background: linear-gradient(to top, #8cc7f3 0%, #b6dcf7 55%, #eaf6ff 100%);
}

/* hide office wish text after moving on */
/* .scene.construction-scene .wish-main {
  animation:fadeOutQuick 0.5s ease forwards;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-animation:fadeOutQuick 0.5s ease forwards;
  -webkit-animation:fadeOutQuick 0.5s ease forwards;
} */

.wish-small.hide {
  animation: fadeOutQuick 0.5s ease forwards;
  -webkit-animation: fadeOutQuick 0.5s ease forwards;
}

.wish-main.hide {
  animation: fadeOutQuick 0.5s ease forwards;
  -webkit-animation: fadeOutQuick 0.5s ease forwards;
}

/* =========
   OFFICE EXIT
   ========= */

/* lower office props slide down */
.scene.office-exit .office-couch,
.scene.office-exit .office-table,
.scene.office-exit .office-plant,
.scene.office-exit .office-ground,
.scene.office-exit::after {
  animation: slideDownOut 0.9s ease forwards;
}

/* upper office props slide up */
.scene.office-exit .office-clock,
.scene.office-exit .office-wall-frame {
  animation: slideUpOut 0.9s ease forwards;
}

/* optional: boss disappears too */
.scene.office-exit .boss {
  animation: slideDownOut 0.9s ease forwards;
  -webkit-animation: slideDownOut 0.9s ease forwards;
}

.scene.office-exit .boy.handshake .arm.front {
  animation:none;
  -webkit-animation:none;
}

/* =========
   CONSTRUCTION ENTRY
   ========= */

/* upper new props slide down */
.scene.construction-scene .construction-sun,
.scene.construction-scene .construction-cloud {
  animation: slideDownIn 0.9s ease forwards;
}

/* lower new props slide up */
.scene.construction-scene .construction-ground,
.scene.construction-scene .construction-house,
.scene.construction-scene .worker {
  animation: slideUpIn 0.9s ease forwards;
}

@keyframes slideDownOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(220px);
    opacity: 0;
  }
}

@keyframes slideUpOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-220px);
    opacity: 0;
  }
}

@keyframes slideDownIn {
  from {
    transform: translateY(-220px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpIn {
  from {
    transform: translateY(220px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOutQuick {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* =========
   CONSTRUCTION PROPS
   ========= */

.construction-sun {
  position: absolute;
  top: 65px;
  left: 90px;
  /* left:calc(50% - 666px); */
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ffd76a;
  box-shadow: 0 0 0 10px rgba(255, 215, 106, 0.15);
  opacity: 0;
}


.construction-cloud {
  position: absolute;
  width: 120px;
  height: 42px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  opacity: 0;
}

.construction-cloud::before,
.construction-cloud::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
}

.construction-cloud::before {
  width: 42px;
  height: 42px;
  left: 16px;
  top: -18px;
}

.construction-cloud::after {
  width: 58px;
  height: 58px;
  left: 48px;
  top: -28px;
}

.cloud-1 {
  top: 90px;
  left: 280px;
}

.cloud-2 {
  top: 140px;
  left: 520px;
  transform: scale(0.85);
}

.construction-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* height: 370px; */
  height: calc(50% - 58.5px);
  background: #44a802;
  border-top: 4px solid #44a802;
  opacity: 0;
}

/* right-side partially visible house */
.construction-house {
  position: absolute;
  right: -170px; /* pushes most of it off screen so only part is visible */
  /* bottom: 305px; */
  bottom:calc(50% - 123.5px);
  width: 360px;
  height: 260px;
  opacity: 0;
}

.house-roof {
  position: absolute;
  left: 70px;
  bottom: 350px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 100000px solid transparent;
  border-bottom: 90px solid #9e5d4d;
}

.house-body {
  position: absolute;
  left: 70px;
  bottom: 0;
  width: 220px;
  height: 350px;
  background: #d9c3a5;
  border: 5px solid #8d7357;
}

.house-window {
  position: absolute;
  width: 42px;
  height: 242px;
  background: #c8ebff;
  border: 4px solid #7c654d;
}

.window-1 {
  left: 105px;
  bottom: 64px;
}

.window-2 {
  left: 168px;
  bottom: 64px;
}

.house-scaffold {
  position: absolute;
  background: #8c6a47;
}

.scaffold-v {
  width: 7px;
  height: 420px;
  bottom: 0;
}

.scaffold-h {
  height: 7px;
  width: 180px;
}

.v1 {
  left: 52px;
}

.v2 {
  left: 220px;
}

.h1 {
  left: 52px;
  bottom: 85px;
}

.h2 {
  left: 52px;
  bottom: 170px;
}

.h3 {
  left: 52px;
  bottom: 255px;
}

.h4 {
  left: 52px;
  bottom: 340px;
}

/* =========
   WORKERS
   ========= */

.worker .arm.front {
  transform-origin: calc(9 * var(--pixel)) calc(13 * var(--pixel));
  animation: workerWork 0.6s ease-in-out infinite alternate;
}

@keyframes workerWork {
  from {
    transform: rotate(200deg);
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
}
  to {
    transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -o-transform: rotate(160deg);
}
}

.worker-2 .arm.front {
  animation-duration: 0.9s;
}

.worker {
  z-index: 3;
}

.worker-1 {
  /* left: 60%; */
  left:calc(50% + 151px);
}

.worker-2 {
  /* left:68%; */
  left:calc(50% + 272px);
}

/* =========
   BOY TABLET ANIMATION
   ========= */

.boy.tablet-scene {
  z-index: 3;
}

/* keep him visible in construction scene */
.scene.construction-scene .boy {
  display: block !important;
}

/* tablet */
.boy .tablet {
  position: absolute;
  width: 28px;
  height: 20px;
  background: #2b3347;
  border: 3px solid #111827;
  border-radius: 3px;
  left: calc(8 * var(--pixel));
  top: calc(17.2 * var(--pixel));
  transform: rotate(0deg) scale(0.7);
  transform-origin: center;
  -webkit-transform: rotate(0deg) scale(0.7);
  -moz-transform: rotate(0deg) scale(0.7);
  -ms-transform: rotate(0deg) scale(0.7);
  -o-transform: rotate(0deg) scale(0.7);
  opacity:0;
}

.boy.tablet-scene .tablet {
  animation:tabletAppear 1s ease forwards,      tabletMove 1s ease forwards 1s,
  tabletHold 1s ease-in-out infinite alternate 2s;
  -webkit-animation:tabletAppear 1s ease forwards,      tabletMove 1s ease forwards 1s,
  tabletHold 1s ease-in-out infinite alternate 2s;
}

.boy.tablet-scene .arm.back {
  transform-origin: calc(9.5 * var(--pixel)) calc(12 * var(--pixel));
  animation: boyTakeTablet 2s ease forwards,
  boyHoldTablet 1s ease-in-out infinite alternate 2s;
  -webkit-animation: boyTakeTablet 2s ease forwards,
  boyHoldTablet 1s ease-in-out infinite alternate 2s;;
}

@keyframes tabletAppear {
  0% {
    opacity: 0;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
}
  60% {
    opacity: 1;
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
}
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
}

@keyframes tabletMove {
  0% {
    transform: translate(0) rotate(0deg);
    -webkit-transform: translate(0) rotate(0deg);
    -moz-transform: translate(0) rotate(0deg);
    -ms-transform: translate(0) rotate(0deg);
    -o-transform: translate(0) rotate(0deg);
}

  100% {
    transform: translate(35px, -40px) rotate(-85deg);
    -webkit-transform: translate(35px, -40px) rotate(-85deg);
    -moz-transform: translate(35px, -40px) rotate(-85deg);
    -ms-transform: translate(35px, -40px) rotate(-85deg);
    -o-transform: translate(35px, -40px) rotate(-85deg);
}
}

@keyframes tabletHold {
  0% {
    transform: translate(35px, -40px) rotate(-85deg);
    -webkit-transform: translate(35px, -40px) rotate(-85deg);
    -moz-transform: translate(35px, -40px) rotate(-85deg);
    -ms-transform: translate(35px, -40px) rotate(-85deg);
    -o-transform: translate(35px, -40px) rotate(-85deg);
}

  100% {
    transform: translate(34.7px, -36.5px) rotate(-80deg);
    -webkit-transform: translate(34.7px, -36.5px) rotate(-80deg);
    -moz-transform: translate(34.7px, -36.5px) rotate(-80deg);
    -ms-transform: translate(34.7px, -36.5px) rotate(-80deg);
    -o-transform: translate(34.7px, -36.5px) rotate(-80deg);
}
}

@keyframes boyTakeTablet {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-85deg) translate(-4px, -2px);
    -webkit-transform: rotate(-85deg) translate(-4px, -2px);
    -moz-transform: rotate(-85deg) translate(-4px, -2px);
    -ms-transform: rotate(-85deg) translate(-4px, -2px);
    -o-transform: rotate(-85deg) translate(-4px, -2px);
}
}

.construction-text {
  position: absolute;
  top: 222px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
}

.construction-main.show {
  animation: wishPop 0.8s ease forwards;
}

.construction-main {
  font-family: 'Press Start 2P', monospace;
  color: #fff4cc;
  text-shadow: 4px 4px 0 #3b2f24;
  letter-spacing: 0px;
  font-size: 50px;
  white-space: nowrap;
  opacity:0;
}

@keyframes boyHoldTablet {
  from {
    transform: rotate(-85deg) translate(-4px, -2px);
    -webkit-transform: rotate(-85deg) translate(-4px, -2px);
    -moz-transform: rotate(-85deg) translate(-4px, -2px);
    -ms-transform: rotate(-85deg) translate(-4px, -2px);
    -o-transform: rotate(-85deg) translate(-4px, -2px);
}
  to {
    transform: rotate(-80deg) translate(-4px, -2px);
    -webkit-transform: rotate(-80deg) translate(-4px, -2px);
    -moz-transform: rotate(-80deg) translate(-4px, -2px);
    -ms-transform: rotate(-80deg) translate(-4px, -2px);
    -o-transform: rotate(-80deg) translate(-4px, -2px);
}
}

/* third scene */
/* =========================
   CONSTRUCTION -> CUBICLE
   ========================= */

.cubicle-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.scene.cubicle-scene .cubicle-bg {
  opacity: 1;
}

.scene.cubicle-scene {
  background: linear-gradient(to top, #d9dde7 0%, #edf1f7 55%, #f8fafc 100%);
}

/* construction exits */
.scene.construction-exit .construction-main {
  animation:fadeOutQuick 0.5s ease forwards;
  opacity: 0;
  /* transition: opacity 0.4s ease; */
  -webkit-animation:fadeOutQuick 0.5s ease forwards;
}

.scene.construction-exit .construction-sun,
.scene.construction-exit .construction-cloud {
  animation: slideUpOut 0.9s ease forwards;
}

.scene.construction-exit .construction-ground,
.scene.construction-exit .construction-house,
.scene.construction-exit .worker {
  animation: slideDownOut 0.9s ease forwards;
}

.scene.construction-exit .boy .arm.back,
.scene.construction-exit .tablet{
  animation: none;
  -webkit-animation: none;
}

/* cubicle enters */
.scene.cubicle-scene .cubicle-top-light {
  animation: slideDownIn 0.9s ease forwards;
}

.scene.cubicle-scene .cubicle-floor,
.scene.cubicle-scene .cubicle-desk,
.scene.cubicle-scene .cubicle-wall-divider,
.scene.cubicle-scene .cubicle-monitor,
.scene.cubicle-scene .coworker {
  animation: slideUpIn 0.9s ease forwards;
}

/* cubicle props */
.cubicle-top-light {
  position: absolute;
  top: 70px;
  width: 160px;
  height: 28px;
  background: #ffffff;
  border: 4px solid #bcc5d1;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(255,255,255,0.45);
  opacity: 0;
  z-index: 2;
}

.light-1 {
  left: calc(50% - 340px);
}

.light-2 {
  left: calc(50% + 180px);
}

.cubicle-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* height: 370px; */
  height:calc(50% - 58.3px);
  background: #7c8b95;
  border-top: 4px solid #62707a;
  opacity: 0;
}

.cubicle-desk {
  position: absolute;
  /* bottom: 390px; */
  bottom:calc(50% - 38.5px);
  width: 240px;
  height: 28px;
  background: #a77958;
  border: 4px solid #6d4c37;
  border-radius: 5px;
  opacity: 0;
  z-index: 3;
}

.cubicle-desk::before,
.cubicle-desk::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 95px;
  bottom: -95px;
  background: #5a4638;
}

.cubicle-desk::before {
  left: 20px;
}

.cubicle-desk::after {
  right: 20px;
}

.add-desk-2 {
  left: calc(50% - 680px);
}

.add-desk-1 {
  left: calc(50% - 310px);
}

.desk-left {
  left: calc(50% + 60px);
}

.desk-right {
  left: calc(50% + 430px);
}

.cubicle-wall-divider {
  position: absolute;
  transform: translateX(-50%);
  /* bottom: 299px; */
  bottom:calc(50% - 129.5px);
  width: 26px;
  height: 190px;
  background: #b8c3cf;
  border: 4px solid #8794a1;
  opacity: 0;
  z-index: 4;
}

.add-divider-2{
  left: calc(50% - 438px);
}

.add-divider-1{
  left: calc(50% - 68px);
}

.divider-main{
  left: calc(50% + 302px);
}

/* slightly shorter than characters */
.cubicle-monitor {
  position: absolute;
  /* bottom: 422px; */
  bottom:calc(50% - 6.7px);
  width: 74px;
  height: 52px;
  background: #2d3748;
  border: 4px solid #161e2b;
  border-radius: 4px;
  opacity: 0;
  z-index: 5;
}

.cubicle-monitor::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  width: 18px;
  height: 18px;
  background: #4f5b6c;
}

.cubicle-monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -24px;
  width: 52px;
  height: 8px;
  background: #68778b;
  border-radius: 4px;
}

.add-monitor-2 {
  left: calc(50% - 530px);
}

.add-monitor-1 {
  left: calc(50% - 160px);
}

.monitor-left {
  left: calc(50% + 210px);
}

.monitor-right {
  left: calc(50% + 580px);
}

/* character placement */
.scene.cubicle-scene .boy {
  display: block !important;
}

/* .boy.cubicle-worker {
  left: calc(50% - 205px);
  bottom: 150px;
  z-index: 6;
} */

.coworker {
  display: block;
  opacity: 0;
  left: calc(50% + 300px);
  z-index: 2;
}

/* paper balls */
.paper-ball {
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;   /* important */
  pointer-events: none;
  opacity: 0;
  z-index: 7;
}

/* make both face inward slightly by arm animation only */
.boy.cubicle-worker .arm.front {
  transform-origin: calc(9.5 * var(--pixel)) calc(13 * var(--pixel));
  position:absolute;
  z-index:8;
  animation: boyPaperThrowInit 1s ease forwards 1s, boyPaperThrow 4s ease-in-out infinite 2s;
  -webkit-animation: boyPaperThrowInit 1s ease forwards 1s, boyPaperThrow 4s ease-in-out infinite 2s;
}

.scene.cubicle-scene .coworker .arm.front {
  transform-origin: calc(8.5 * var(--pixel)) calc(13 * var(--pixel));
  transform: rotate(210deg);
  animation: coworkerPaperThrow 4s ease-in-out infinite 4s;
  -webkit-animation: coworkerPaperThrow 4s ease-in-out infinite 4s;
}

@keyframes boyPaperThrowInit {
  0%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
  100% {
    transform: rotate(-210deg);
    -webkit-transform: rotate(-210deg);
    -moz-transform: rotate(-210deg);
    -ms-transform: rotate(-210deg);
    -o-transform: rotate(-210deg);
}
}

@keyframes boyPaperThrow {
  0% {
    transform: rotate(-210deg);
    -webkit-transform: rotate(-210deg);
    -moz-transform: rotate(-210deg);
    -ms-transform: rotate(-210deg);
    -o-transform: rotate(-210deg);
}
  5% {
    transform: rotate(-150deg);
    -webkit-transform: rotate(-150deg);
    -moz-transform: rotate(-150deg);
    -ms-transform: rotate(-150deg);
    -o-transform: rotate(-150deg);
}
  75% {
    transform: rotate(-150deg);
    -webkit-transform: rotate(-150deg);
    -moz-transform: rotate(-150deg);
    -ms-transform: rotate(-150deg);
    -o-transform: rotate(-150deg);
}
  90% {
    transform: rotate(-210deg);
    -webkit-transform: rotate(-210deg);
    -moz-transform: rotate(-210deg);
    -ms-transform: rotate(-210deg);
    -o-transform: rotate(-210deg);
}
  100% {
    transform: rotate(-210deg);
    -webkit-transform: rotate(-210deg);
    -moz-transform: rotate(-210deg);
    -ms-transform: rotate(-210deg);
    -o-transform: rotate(-210deg);
}
}

@keyframes coworkerPaperThrow {
  0% {
    transform: rotate(210deg);
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
}
  5% {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
}
  75% {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
}
  90% {
    transform: rotate(210deg);
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
}
  100% {
    transform: rotate(210deg);
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    -o-transform: rotate(210deg);
}
}

.scene.cubicle-scene .ball-left-to-right {
  transform-origin: calc(9.5 * var(--pixel)) calc(13 * var(--pixel));
  animation:paperBallAppear 1s ease forwards, 
  paperBallThrowInit 1s ease forwards 1s, throwLeftToRight 4s linear infinite 2s;
  -webkit-animation:paperBallAppear 1s ease forwards, paperBallThrowInit 1s ease forwards 1s, throwLeftToRight 4s linear infinite 2s;
}

@keyframes paperBallAppear {
  0% {
    opacity: 0;
    transform: scale(0.6) translate(47px, 98px);
    -webkit-transform: scale(0.6) translate(47px, 98px);
    -moz-transform: scale(0.6) translate(47px, 98px);
    -ms-transform: scale(0.6) translate(47px, 98px);
    -o-transform: scale(0.6) translate(47px, 98px);
}
  60% {
    opacity: 1;
    transform: scale(1.04) translate(47px, 98px);
    -webkit-transform: scale(1.04) translate(47px, 98px);
    -moz-transform: scale(1.04) translate(47px, 98px);
    -ms-transform: scale(1.04) translate(47px, 98px);
    -o-transform: scale(1.04) translate(47px, 98px);
}
  100% {
    opacity: 1;
    transform: scale(1) translate(47px, 98px);
    -webkit-transform: scale(1) translate(47px, 98px);
    -moz-transform: scale(1) translate(47px, 98px);
    -ms-transform: scale(1) translate(47px, 98px);
    -o-transform: scale(1) translate(47px, 98px);
}
}

@keyframes paperBallThrowInit {
  0%{
    transform: rotate(0deg) translate(47px, 98px);
    -webkit-transform: rotate(0deg) translate(47px, 98px);
    -moz-transform: rotate(0deg) translate(47px, 98px);
    -ms-transform: rotate(0deg) translate(47px, 98px);
    -o-transform: rotate(0deg) translate(47px, 98px);
}
  100% {
    transform: rotate(-210deg) translate(47px, 98px);
    -webkit-transform: rotate(-210deg) translate(47px, 98px);
    -moz-transform: rotate(-210deg) translate(47px, 98px);
    -ms-transform: rotate(-210deg) translate(47px, 98px);
    -o-transform: rotate(-210deg) translate(47px, 98px);
}
}

@keyframes throwLeftToRight {
  0% {
    transform:rotate(-210deg) translate(47px, 98px);
    -webkit-transform:rotate(-210deg) translate(47px, 98px);
    -moz-transform:rotate(-210deg) translate(47px, 98px);
    -ms-transform:rotate(-210deg) translate(47px, 98px);
    -o-transform:rotate(-210deg) translate(47px, 98px);
}
  20% {
    transform: rotate(-180deg) translate(-30px, 150px);
    -webkit-transform: rotate(-180deg) translate(-30px, 150px);
    -moz-transform: rotate(-180deg) translate(-30px, 150px);
    -ms-transform: rotate(-180deg) translate(-30px, 150px);
    -o-transform: rotate(-180deg) translate(-30px, 150px);
}
  50% {
      transform: rotate(-150deg) translate(-120px, 195px);
      -webkit-transform: rotate(-150deg) translate(-120px, 195px);
      -moz-transform: rotate(-150deg) translate(-120px, 195px);
      -ms-transform: rotate(-150deg) translate(-120px, 195px);
      -o-transform: rotate(-150deg) translate(-120px, 195px);
}
  70% {
    transform: rotate(-180deg) translate(-30px, 150px);
    -webkit-transform: rotate(-180deg) translate(-30px, 150px);
    -moz-transform: rotate(-180deg) translate(-30px, 150px);
    -ms-transform: rotate(-180deg) translate(-30px, 150px);
    -o-transform: rotate(-180deg) translate(-30px, 150px);
}
  100% {
    transform: rotate(-210deg) translate(47px, 98px);
    -webkit-transform: rotate(-210deg) translate(47px, 98px);
    -moz-transform: rotate(-210deg) translate(47px, 98px);
    -ms-transform: rotate(-210deg) translate(47px, 98px);
    -o-transform: rotate(-210deg) translate(47px, 98px);
}
}

@keyframes throwRightToLeft {
  0% {
    opacity: 0;
    transform: translate(calc(50vw + 175px), 370px) scale(0.7);
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translate(calc(50vw + 10px), 305px) scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(50vw - 155px), 370px) scale(0.75);
  }
}

.family-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
  transition: opacity 1s ease;
}

.scene.family-scene .family-bg {
  opacity: 1;
}

.scene.family-scene {
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
}

.cubicle-bg,
.construction-bg,
.office-bg,
.office-ground,
.coworker,
.paper-ball,
.dad,
.mom,
.bro,
.sis,
.grandpa,
.ball-left-to-right,
.grandma {
  transition: opacity 1s ease;
}

.scene.family-scene .cubicle-bg,
.scene.family-scene .construction-bg,
.scene.family-scene .office-bg,
.scene.family-scene .office-ground,
.scene.family-scene .paper-ball,
.scene.family-scene .coworker {
  opacity: 0;
  pointer-events: none;
}

.scene.family-scene .boy .arm.front,
.scene.family-scene .ball-left-to-right {
  animation:none;
  -webkit-animation:none;
}

.dad,
.mom,
.bro,
.sis,
.grandpa,
.grandma {
  opacity: 0;
}

.dad{
  z-index:4;
}

.mom{
  z-index:3;
}

.bro{
  z-index:5;
}

.sis{
  z-index:6;
}

.grandma{
  z-index:7;
}

.grandpa{
  z-index:8;
}

.scene.family-scene .dad,
.scene.family-scene .mom,
.scene.family-scene .bro,
.scene.family-scene .sis,
.scene.family-scene .grandpa,
.scene.family-scene .grandma {
  opacity: 1;
}

.dad { left: calc(50% - 180px); }
.mom { left: calc(50% - 150px); }
.bro { left: calc(50% + 5px); }
.sis { left: calc(50% + 55px); }
.grandpa { left: calc(50% - 285px); }
.grandma { left: calc(50% - 255px); }

/* girls */
.girl-1 { left: calc(50% + 5px); }
.girl-2 { left: calc(50% + 55px); }
.girl-3 { left: calc(50% + 125px); }
.girl-4 { left: calc(50% + 205px); }

/* guys */
.guy-1 { left: calc(50% - 180px); }
.guy-2 { left: calc(50% - 230px); }

.friends-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
  transition: opacity 1s ease;
}

.scene.friends-scene .friends-bg {
  opacity: 1;
}

.scene.friends-scene {
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
}

.scene.friends-scene .boy .arm.front,
.scene.friends-scene .ball-left-to-right {
  animation:none;
  -webkit-animation:none;
}

.me-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
  transition: opacity 1s ease;
}

.scene.me-scene .me-bg {
  opacity: 1;
}

.scene.me-scene {
  background: linear-gradient(to top, #1b1f3a 0%, #415b88 60%, #92b8db 100%);
}

.scene.me-scene .girl {
  display: block !important;
  opacity: 0;
  left: calc(50% + 90px);
  z-index: 3;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
}

.scene.me-scene .girl.show {
  opacity: 1;
}

.hug-button {
  position: absolute;
  /* top: 180px; */
  /* top:calc(50% - 248.5px); */
  top:21%;
  left: 50%;
  transform: translateX(-50%) scale(2);
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  /* font-size:clamp(6.4px, 1.6vw, 20px); */
  padding: 16px 22px;
  border: 4px solid #3b2f24;
  background: #fff4cc;
  color: #3b2f24;
  box-shadow: 0 6px 0 #2a2119;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  -webkit-transform: translateX(-50%) scale(2);
  -moz-transform: translateX(-50%) scale(2);
  -ms-transform: translateX(-50%) scale(2);
  -o-transform: translateX(-50%) scale(2);
}

.hug-button.show {
  /* animation: hugButtonIn 0.5s ease forwards; */
  opacity: 1;
  pointer-events: auto;
}

@keyframes hugButtonIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.hug-button.hide {
  opacity: 0;
  pointer-events: none;
}

.hug-hearts {
  position: absolute;
  left: 50%;
  top: calc(50% - 218.5px);
  width: 220px;
  height: 140px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 35;
}

.hug-heart {
  position: absolute;
  bottom: 0;
  width: 26px;
  opacity: 0;
  animation: floatHugHeart 2.2s linear forwards;
}

@keyframes floatHugHeart {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scale(1.1);
  }
}

/* End hug positioning */

.scene.hug-scene .boy {
  z-index: 12;
  animation: panHugBoy 3s ease forwards 1s;
  -webkit-animation: panHugBoy 3s ease forwards 1s;
}

.scene.hug-scene .girl {
  z-index: 11;
  animation: panHugGirl 3s ease forwards 1s;
  -webkit-animation: panHugGirl 3s ease forwards 1s;
}

/* Simple hug arm pose */
.scene.hug-scene .boy .arm.front {
  transform-origin: calc(9.5 * var(--pixel)) calc(13 * var(--pixel));
  animation: boyHugFrontArmInit 1s ease forwards, boyHugFrontArm 2s ease-in-out infinite 1s;
  -webkit-animation: boyHugFrontArmInit 1s ease forwards, boyHugFrontArm 2s ease-in-out infinite 1s;
}

.scene.hug-scene .boy .arm.back {
  transform-origin: calc(9.5 * var(--pixel)) calc(13 * var(--pixel));
  animation: boyHugBackArmInit 1s ease forwards, boyHugBackArm 2s ease-in-out infinite 1s;
  -webkit-animation: boyHugBackArmInit 1s ease forwards, boyHugBackArm 2s ease-in-out infinite 1s;
}

.scene.hug-scene .girl .arm.front {
  transform-origin: calc(8 * var(--pixel)) calc(13 * var(--pixel));
  animation: girlHugFrontArmInit 1s ease forwards, girlHugFrontArm 2s ease-in-out infinite 1s;
  -webkit-animation: girlHugFrontArmInit 1s ease forwards, girlHugFrontArm 2s ease-in-out infinite 1s;
}

.scene.hug-scene .girl .arm.back {
  transform-origin: calc(8 * var(--pixel)) calc(13 * var(--pixel));
  animation: girlHugBackArmInit 1s ease forwards, girlHugBackArm 2s ease-in-out infinite 1s;
  -webkit-animation: girlHugBackArmInit 1s ease forwards, girlHugBackArm 2s ease-in-out infinite 1s;
}

@keyframes panHugBoy{
  0%{
    left: calc(50% + 55px);
}
  100%{
    left: calc(50% - 60px);
}
}

@keyframes panHugGirl{
  0%{
    left: calc(50% + 35px);
}
  100%{
    left: calc(50% - 80px);
}
}

@keyframes boyHugFrontArm{
  0%{
    transform: rotate(-70deg)  ;
    -webkit-transform: rotate(-70deg)  ;
    -moz-transform: rotate(-70deg)  ;
    -ms-transform: rotate(-70deg)  ;
    -o-transform: rotate(-70deg)  ;
}
  50%{
    transform: rotate(-75deg)  ;
    -webkit-transform: rotate(-75deg)  ;
    -moz-transform: rotate(-75deg)  ;
    -ms-transform: rotate(-75deg)  ;
    -o-transform: rotate(-75deg)  ;
}
100%{
    transform: rotate(-70deg)  ;
    -webkit-transform: rotate(-70deg)  ;
    -moz-transform: rotate(-70deg)  ;
    -ms-transform: rotate(-70deg)  ;
    -o-transform: rotate(-70deg)  ;
}
}

@keyframes boyHugFrontArmInit{
  0%{
    transform: rotate(0deg)  ;
    -webkit-transform: rotate(0deg)  ;
    -moz-transform: rotate(0deg)  ;
    -ms-transform: rotate(0deg)  ;
    -o-transform: rotate(0deg)  ;
}
  100%{
    transform: rotate(-70deg)  ;
    -webkit-transform: rotate(-70deg)  ;
    -moz-transform: rotate(-70deg)  ;
    -ms-transform: rotate(-70deg)  ;
    -o-transform: rotate(-70deg)  ;
}
}

@keyframes boyHugBackArm{
  0%{
    transform: rotate(-25deg)  ;
    -webkit-transform: rotate(-25deg)  ;
    -moz-transform: rotate(-25deg)  ;
    -ms-transform: rotate(-25deg)  ;
    -o-transform: rotate(-25deg)  ;
}
  50%{
    transform: rotate(-27deg)  ;
    -webkit-transform: rotate(-27deg)  ;
    -moz-transform: rotate(-27deg)  ;
    -ms-transform: rotate(-27deg)  ;
    -o-transform: rotate(-27deg)  ;
}
100%{
    transform: rotate(-25deg)  ;
    -webkit-transform: rotate(-25deg)  ;
    -moz-transform: rotate(-25deg)  ;
    -ms-transform: rotate(-25deg)  ;
    -o-transform: rotate(-25deg)  ;
}
}

@keyframes boyHugBackArmInit{
  0%{
    transform: rotate(0deg)  ;
    -webkit-transform: rotate(0deg)  ;
    -moz-transform: rotate(0deg)  ;
    -ms-transform: rotate(0deg)  ;
    -o-transform: rotate(0deg)  ;
}
  100%{
    transform: rotate(-25deg)  ;
    -webkit-transform: rotate(-25deg)  ;
    -moz-transform: rotate(-25deg)  ;
    -ms-transform: rotate(-25deg)  ;
    -o-transform: rotate(-25deg)  ;
}
}

@keyframes girlHugBackArm{
  0%{
    transform: rotate(65deg)  ;
    -webkit-transform: rotate(65deg)  ;
    -moz-transform: rotate(65deg)  ;
    -ms-transform: rotate(65deg)  ;
    -o-transform: rotate(65deg)  ;
}
  50%{
    transform: rotate(70deg)  ;
    -webkit-transform: rotate(70deg)  ;
    -moz-transform: rotate(70deg)  ;
    -ms-transform: rotate(70deg)  ;
    -o-transform: rotate(70deg)  ;
}
100%{
    transform: rotate(65deg)  ;
    -webkit-transform: rotate(65deg)  ;
    -moz-transform: rotate(65deg)  ;
    -ms-transform: rotate(65deg)  ;
    -o-transform: rotate(65deg)  ;
}
}

@keyframes girlHugBackArmInit{
  0%{
    transform: rotate(0deg)  ;
    -webkit-transform: rotate(0deg)  ;
    -moz-transform: rotate(0deg)  ;
    -ms-transform: rotate(0deg)  ;
    -o-transform: rotate(0deg)  ;
}
  100%{
    transform: rotate(65deg)  ;
    -webkit-transform: rotate(65deg)  ;
    -moz-transform: rotate(65deg)  ;
    -ms-transform: rotate(65deg)  ;
    -o-transform: rotate(65deg)  ;
}
}

@keyframes girlHugFrontArm{
  0%{
    transform: rotate(25deg)  ;
    -webkit-transform: rotate(25deg)  ;
    -moz-transform: rotate(25deg)  ;
    -ms-transform: rotate(25deg)  ;
    -o-transform: rotate(25deg)  ;
}
  50%{
    transform: rotate(27deg)  ;
    -webkit-transform: rotate(27deg)  ;
    -moz-transform: rotate(27deg)  ;
    -ms-transform: rotate(27deg)  ;
    -o-transform: rotate(27deg)  ;
}
100%{
    transform: rotate(25deg)  ;
    -webkit-transform: rotate(25deg)  ;
    -moz-transform: rotate(25deg)  ;
    -ms-transform: rotate(25deg)  ;
    -o-transform: rotate(25deg)  ;
}
}

@keyframes girlHugFrontArmInit{
  0%{
    transform: rotate(0deg)  ;
    -webkit-transform: rotate(0deg)  ;
    -moz-transform: rotate(0deg)  ;
    -ms-transform: rotate(0deg)  ;
    -o-transform: rotate(0deg)  ;
}
  100%{
    transform: rotate(25deg)  ;
    -webkit-transform: rotate(25deg)  ;
    -moz-transform: rotate(25deg)  ;
    -ms-transform: rotate(25deg)  ;
    -o-transform: rotate(25deg)  ;
}
}

.final-message-wrapper{
  position: absolute;
  /* top: 170px; */
  top:19.81%;
  left: 50%;
  z-index: 25;
  opacity: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width:90vw;
  text-align:center;
}

.box-tester{
  top: 125.2px;
  left: 50%;
  width:100px;
  height:100px;
  position:fixed;
  /* background:red; */
  opacity:0.5;
  z-index:9999;
}

.final-message {
  font-family: 'Press Start 2P', monospace;
  /* font-size: 64px; */
  font-size: clamp(20.48px, 5.12vw, 64px);
  line-height: 1.4;
  color: #fff4cc;
  text-shadow: 4px 4px 0 #3b2f24;
  /* white-space: nowrap; */
  white-space:normal;
  pointer-events: none;
}

.final-message-wrapper.show {
  animation:
    instructionFadeIn 1.2s ease forwards, instructionFloat 2s ease-in-out infinite 1.2s;
}

/* ===== MOBILE WARNING OVERLAY ===== */

.mobile-warning {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  pointer-events: none;
}

/* fade in */
.mobile-warning.show {
  animation: fadeInOverlay 0.8s ease forwards;
  pointer-events: auto;
}

/* text styling */
.mobile-warning-text {
  color: #ffffff;
  font-family: 'Press Start 2P', monospace;
  text-align: center;
  max-width: 90vw;
  line-height: 1.6;
  font-size: clamp(12px, 3vw, 20px);
}

.tap-hint {
  margin-top: 20px;
  font-size: 10px;
  opacity: 0.7;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== RESPONSIVE TEXT ===== */

/* Large screens (desktop) */
@media (min-width: 1200px) {
  .hug-button {
    font-size: 20px;
  }
}

/* Laptop / small desktop */
@media (max-width: 1199px) {
  .hug-button {
    font-size: 20px;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .hug-button {
    font-size: 15px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hug-button {
    font-size: 10px;
  }

  /* .mobile-warning {
    display: flex;
  } */
}

@media (min-width: 600px) and (min-height: 376px) and (max-height: 450px) {
  .hug-button {
    font-size: 15px;
    top: 8%;
    padding: 10px 16px;
  }
}

@media (min-width: 600px) and (max-height: 375px) {
  .hug-button {
    font-size: 15px;
    top: 8%;
    padding: 8px 14px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .hug-button {
    font-size: 6.4px;
  }
  /* .mobile-warning {
    display: flex;
  } */
}