/* ========== Ice Breaker Minigame Styles ========== */
#IGS_app_iceBreaker {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.IGS_title {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 48px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,1);
  pointer-events: none;
}

/* Background - extended and centered by height */
.IGS_background {
  position: absolute;
  pointer-events: none;
  height: 100%;
  z-index: 0;
}
.IGS_background img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Main container for positioned elements */
.IGS_mainCont {
  position: absolute;
  pointer-events: none;
  height: 1080px;
  width: 1920px;
  z-index: 1;
}

/* Tray images - no CSS transitions, controlled by JS */
.IGS_tray_cont {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
.IGS_tray_cont.visible {
  opacity: 1;
}
.IGS_tray_cont.frozen {
  /* Click area handles pointer events */
}
.IGS_tray_cont.flipped {
  pointer-events: none;
}
.IGS_tray_cont.sliding-in {
  animation: traySlideIn 0.4s ease forwards;
}
.IGS_tray_cont.sliding-in-left {
  animation: traySlideInLeft 0.4s ease forwards;
}
.IGS_tray_cont.sliding-out {
  animation: traySlideOut 0.4s ease forwards;
}
.IGS_tray_cont.sliding-out-left {
  animation: traySlideOutLeft 0.4s ease forwards;
}
@keyframes traySlideIn {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes traySlideInLeft {
  from {
    opacity: 1;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes traySlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100%);
  }
}
@keyframes traySlideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(-100%);
  }
}
.IGS_tray_cont_clickArea {
  position: absolute;
  top: 340px;
  left: 50%;
  transform: translateX(-50%);
  width: 1340px;
  height: 530px;

  pointer-events: none;
}
.IGS_tray_cont_clickArea.active {
  pointer-events: all;
  cursor: pointer;
}
.IGS_tray_cont_clickArea:hover ~ .IGS_tray_cont img {
  opacity: 0.2;
}



.IGS_tray_cont img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);

  filter: drop-shadow(-5px -10px 50px black);
}

/* Water slots container */
.IGS_waterSlots_cont {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.IGS_waterSlots_cont.visible {
  opacity: 1;
}
.IGS_waterSlots_cont.no-transition {
  transition: none;
}
.IGS_waterSlots_cont.flipped {
  /* When flipped, slots become visible again for breaking */
  pointer-events: all;
}

/* Individual water slot */
.IGS_waterSlot {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.28s ease;
  opacity: 0;
}
.IGS_waterSlot img {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-drag: none;
}
.IGS_waterSlot.filled {
  opacity: 1;
}
.IGS_waterSlot:hover {
  transform: scale(1.05);
}
.IGS_waterSlot.broken {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
}

/* Hammer cursor overlay */
.IGS_hammer_cont {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  width: 300px;
  transform-origin: top center;
  display: none;
  pointer-events: none;
}
.IGS_hammer_cont img {
  width: 100%;
  display: block;
  transform: translateX(20%) translateY(10%);

  transition: transform 0.05s ease;
}
.IGS_hammer_cont.active {
  display: block;
}
.IGS_hammer_cont.clicking img {
  content: url('../../assets/sprite/minigame_ice/hammer2.webp');
  transform: translateX(-30%) translateY(-10%);
}

/* Hammer icon (top right) */
.IGS_hammer_icon_cont {
  position: absolute;
  top: -200px;
  right: 50px;
  height: 450px;

  z-index: 20;
  pointer-events: all;
  cursor: pointer;
  transform-origin: top center;
  transition: transform 0.2s ease;
}
.IGS_hammer_icon_cont img {
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 8px black);
}
.IGS_hammer_icon_cont:hover {
  transform: scale(1.1);
}
.IGS_hammer_icon_cont:active {
  transform: scale(0.95);
}
.IGS_hammer_icon_cont.active {
  filter: brightness(1.3);
}

.IGS_faucet_clickArea {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 700px;
  height: 250px;
  pointer-events: all;
  cursor: grab;

  /* background-color: rgba(255, 0, 0, 0.2); */
}

/* Tray trigger (protruding from bottom) - actual tray image */
.IGS_tray_trigger {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(80%);
  height: 600px;
  pointer-events: all;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 4;
}
.IGS_tray_trigger img {
  margin-top: -130px;
  height: 100%;
  display: block;
  filter: drop-shadow(-5px -10px 30px rgba(0,0,0,0.8));
}
.IGS_tray_trigger:hover {
  transform: translateX(-50%) translateY(70%);
}
.IGS_tray_trigger.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(100%);
}

.IGS_tray_trigger_label {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,1);
  pointer-events: none;
}

/* Frozen tray trigger (protruding from left) - actual frozen tray image */
.IGS_frozenTray_trigger {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 55%;
  transform: translateY(-50%) translateX(-88%);
  height: 400px;
  pointer-events: all;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 4;
  /* opacity: 0; */
  pointer-events: none;
}
.IGS_frozenTray_trigger img {
  margin-top: -15%;
  margin-right: -130px;
  height: 160%;
  display: block;
  filter: drop-shadow(-5px -10px 30px rgba(0,0,0,0.8));
}
.IGS_frozenTray_trigger.visible {
  opacity: 1;
  pointer-events: all;
}
.IGS_frozenTray_trigger:hover {
  transform: translateY(-50%) translateX(-82%);
}
.IGS_frozenTray_trigger_label {
  position: absolute;
  top: 50%;
  right: 7%;
  transform: translateY(-40%) rotate(0deg);
  color: white;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,1);
  pointer-events: none;
}

/* Store in Freezer button */
.IGS_btn_storeInFreezer {
  position: absolute;
  right: 0;
  top: 56%;
  transform: translateY(-50%);
  width: 200px;
  height: 80px;
  /* background: linear-gradient(to left, rgba(100, 200, 150, 0.9), rgba(60, 150, 100, 0.9)); */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
  /* border-radius: 10px 0 0 10px; */
  pointer-events: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 10;
  /* border: 2px solid rgba(255, 255, 255, 0.3); */
  border-right: none;
}
.IGS_btn_storeInFreezer.visible {
  display: flex;
  pointer-events: all;
}
.IGS_btn_storeInFreezer:hover {
  transform: translateY(-50%) translateX(5%);
}
.IGS_btn_storeInFreezer span {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Faucet system */
.IGS_faucet_cont {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;

  filter: drop-shadow(-2px -5px 30px black);
  z-index: 5;
}
.IGS_faucet_base {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Faucet IK arm system */
.IGS_faucet_ikSystem {
  position: absolute;
  pointer-events: none;
  height: 1080px;
  width: 1920px;
  left: 50%;
  transform: translateX(-50%);

  --arm1-rot: 95deg; /* 95: max clockwise, -90: max counterclockwise */
  --arm2-rot: -152deg; /* -180: max counterclockwise, 0: max clockwise */
  --arm3-rot: -15deg; /* 0: closed, -15: open */
}

.IGS_faucet_arm1 {
  position: absolute;
  top: 54px; /* if changed, change ikOrigin.y in js */
  left: 328px;
  --arm1-1: -48px;
  --arm1-2: -47px;
  height: calc((1509px/2) + var(--arm1-1) + var(--arm1-2)); /* 659.5px */
  /* width: 30px;
  background-color: lime; */

  transform-origin: top left;
  transform: rotate(var(--arm1-rot));
  pointer-events: none;
}
.IGS_faucet_arm1 > img {
  position: relative;
  display: block;

  height: calc(100% - var(--arm1-1) - var(--arm1-2));

  margin-top: var(--arm1-1);
  margin-bottom: var(--arm1-2);

  transform: translateX(-50%);
}

.IGS_faucet_arm2 {
  position: absolute;
  bottom: 0;
  left: 0;
  --arm2-1: -48px;
  --arm2-2: -47px;

  height: calc((1972px/2) + var(--arm2-1) + var(--arm2-2)); /* 891px */
  /* width: 20px;
  background-color: aqua; */

  transform-origin: top left;
  transform: translateY(100%) rotate(var(--arm2-rot));
  pointer-events: none;
}
.IGS_faucet_arm2 > img {
  position: relative;
  display: block;

  height: calc(100% - var(--arm2-1) - var(--arm2-2));

  margin-top: var(--arm2-1);
  margin-bottom: var(--arm2-2);

  transform: translateX(-50%);
}

.IGS_faucet_handle {
  position: absolute;
  left: 0;
  bottom: 0;

  height: calc(450px/2);
  /* width: 15px;
  background-color: yellow */;

  top: 100%;
  transform-origin: top left;

  transform: rotate(calc(var(--arm3-rot) + 180deg));
}
.IGS_faucet_handle > img {
  display: block;
  height: 100%;
  margin-top: -45px;



  transform: translateX(-50%);
}

/* UI Elements */
.IGS_ui_cont {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 20;
  pointer-events: all;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: flex-end;
}

.IGS_ui_info {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 15px 25px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
}

/* Mode indicator */