/*#region ========== Fonts ========== */

@font-face {
  font-family: "Abadi";
  src: url("../fonts/Abadi.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Dongle";
  src: url("../fonts/Dongle-Bold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "SNPro";
  src: url("../fonts/SNPro-Bold.ttf") format("truetype");
  font-weight: bold;
}

/*#endregion */

/*#region ========== General ========== */

:root {
  --uiTxtColor: #354a65;
}

body,html {
  width: 100%;
  height: 100dvh;
  margin: 0;

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

  background: #f5f5f7;
  overflow: hidden;
}

.scale-wrapper {
  width: 375px;
  height: 812px;

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

  position: relative;
  will-change: transform;
}
  
.stage {
  position: relative;
  width: 375px;
  height: 812px;
  overflow: hidden;
  background: #000;

  border-radius: 25px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border: 2px solid #333;

  transform: none !important;
}
  
header{ 
  position:absolute;
  top:0;
  left:0;
  right:0;
  color:#000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  font-size:14px;
  z-index:25;
  height:60px;
}

#skyCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.multBadge {
  background:rgba(15,255,15,0.06);
  border:1px solid rgba(15,255,15,0.12);
  padding:4px 8px;
  border-radius:6px;
  font-weight:900
}
  
.multFlash {
  box-shadow:0 0 12px #00ff66;
  transform:scale(1.05);
  transition:transform .18s ease
}
  
.pointPopup {
  position:absolute;
  pointer-events:none;
  color:#000;
  background:rgba(255,255,255,0.92);
  padding:6px 10px;
  border-radius:8px;
  font-weight:900;
  font-size:18px;
  transform:translateY(0);
  opacity:1;
  transition:transform .7s ease-out,opacity .7s ease-out;
  z-index:60
}
  
.pointPopup.mult {
  color:#000;
  background:rgba(255,250,200,0.96);
}
  
#playfield {
  position:absolute;
  top:84px;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:auto;
}

  
/* Matrix-style playfield: black background for numbers mode */
#playfield.matrix-mode {
  background:#000;
}

.drop {
  position:absolute;
  font-weight:bold;
  user-select:none;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
  
/* Matrix-style numbers: neon green on black background for numbers mode */
.drop.matrix-number {
  color:#00ff41;
  text-shadow:0 0 10px #00ff41,0 0 20px #00ff41,0 0 30px #00ff41;
  background:transparent;
  border-radius:4px;
  padding:2px 6px;
}
  
/* Keep original styling for balloons */
.drop.balloon-piece {
  color:#000;
}

.balloon {
  width: 75px;
  height: 97.5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
    
button {
  background:#0f0;
  color:#000;
  border:0;
  border-radius:4px;
  padding:6px 12px;
  font-weight:bold;
  cursor:pointer
}
    
@keyframes explodeGreen {
  0% {
    transform:scale(1);
    opacity:1;
    text-shadow:0 0 8px #00ff88
  } 100% {
    transform:scale(5);
    opacity:0;
    text-shadow:0 0 22px #00ffaa
  }
}
    
@keyframes redX {
  0% {
    transform:scale(0.8);
    opacity:0
  } 20% {
    opacity:1
  } 100% {
    transform:scale(1.4);
    opacity:0
  }
}
  
.redx {
  position:absolute;
  pointer-events:none;
  font-weight:900;
  color:#f33;
  text-shadow:0 0 10px #ff0033;
  font-size:56px;
  animation:redX .5s ease-out forwards;
}
  
.overlay {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);

  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
 
.modal {
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.08);
  color:#000;
  padding:26px 29px;
  border-radius:13px;
  max-width:90%;
  text-align:center;
  font-size:23px
}

.modal h2 {
  margin:0 0 13px 0;
  font-size:29px
}
  
.modal p {
  margin:10px 0;
  font-size:23px
}
  
.modal button {
  margin-top:16px;
  padding:13px 20px;
  font-size:20px
}
  
/* large, subtle turtle slow countdown behind the playfield */
#turtleCountdown {
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:8;
  pointer-events:none;
}
  
/* turtleCountdown uses a canvas sized to the playfield */
/* balloons styling */
.balloon-group {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
}

/*#endregion */

/*#region ===== Road Map Screen ===== */

.journey-screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  background: transparent;
  backdrop-filter: none;
  z-index: 300;
  overflow: hidden;
}

/*
  The visible 375 × 812 phone viewport.
  This element scrolls vertically.
*/
#journeyScrollArea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  background-image: url("../images/UI/journeypage/core/journeypage_background.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;

  box-sizing: border-box;
}

#journeyScrollArea::-webkit-scrollbar {
  display: none;
}

/*
  The full Journey Map.
  JavaScript calculates its height based on the round count.
*/
#journeyWorld {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* ---------- Journey Header ---------- */

#journeyHeader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 135px;

  background-image: url("../images/UI/journeypage/header/journeypage_header_background.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;

  z-index: 20;
  pointer-events: none;
}

#journeyAvatar {
  position: absolute;
  left: 10px;
  top: 13px;
  width: 88px;
  height: 88px;
}

#journeyAvatarImage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);

  object-fit: cover;
  border-radius: 50%;

  z-index: 1;
}

#journeyAvatarFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: contain;

  z-index: 2;
  pointer-events: none;
}

#journeyTotalPoints {
  position: absolute;
  left: 103px;
  top: 14px;
  width: 170px;
  aspect-ratio: 536 / 278;
}

#journeyTotalPointsFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: contain;

  z-index: 1;
  pointer-events: none;
}

#journeyTotalPointsValue {
  position: absolute;
  left: 49%;
  top: 16px;
  transform: translateX(-50%);
  width: 145px;

  text-align: center;
  white-space: nowrap;
  font-family: "SNPro", sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 0 #4c278d, 0 3px 4px rgba(0, 0, 0, 0.25);

  z-index: 2;
  pointer-events: none;
}

#journeyLeaderboardButton {
  all: unset;
  position: absolute;
  right: 10px;
  top: 14px;
  width: 86px;
  height: 86px;

  background-image: url("../images/UI/journeypage/header/journeypage_leaderboard.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}

#journeyLeaderboardButton:active {
  transform: scale(0.96);
}

/* ---------- Rope ---------- */

#journeyRopeLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 1;
  pointer-events: none;
}

.journey-rope-section {
  position: absolute;
  left: 50%;
  height: auto;
  display: block;
  transform: translateX(-50%);

  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.journey-rope-shadow{
  position:absolute;
  z-index:0;
  pointer-events:none;
}

/* ---------- Decorations ---------- */

#journeyDecoLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.journey-deco-item {
  position: absolute;
  height: auto;
  transform-origin: center center;

  pointer-events: none;
  user-select: none;
}

.journey-deco-image {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 2;
}

.journey-deco-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.journey-deco-full-section {
  position: absolute;
}

.journey-deco-full-section
.journey-deco-image,
.journey-deco-full-section
.journey-deco-shadow {
  width: 100%;
  height: auto;
}

/* ---------- Journey End Ball ---------- */

.journey-end-ball {
  position: absolute;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  height: auto;

  pointer-events: none;
  user-select: none;
  z-index: 4;
}

.journey-end-ball-image,
.journey-end-ball-shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.journey-end-ball-image {
  position: relative;
  z-index: 2;
}

.journey-end-ball-shadow {
  transform-origin: top left;
  z-index: 1;
}

/* ---------- Round container ---------- */

#journeyRoundsContainer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  z-index: 3;
}

/* ---------- Individual photo button ---------- */

.journey-round {
  all: unset;
  position: absolute;
  width: 112px;
  height: 138px;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;

  z-index: 3;
}

.journey-round:active {
  scale: 0.96;
}

.journey-round.locked {
  cursor: default;
}

.journey-round.locked:active {
  scale: 1;
}

/*
  Shared image layer settings.
*/
.journey-card-layer {
  position: absolute;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none;
}

.journey-card-shadow{
    left: 1px;
    top: 1px;
    width: 110%;
    height: 110%;

    background-image:url("../images/UI/journeypage/core/journeypage_cart_shadow.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    z-index:0;
}

.journey-card-base {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-image: url("../images/UI/journeypage/core/journeypage_cart.png");

  z-index: 2;
}

.journey-card-content {
  left: 5px;
  top: 8px;
  width: 102px;
  height: 103px;

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 3;
}

/* Glow behind current round */
.journey-card-light {
  left: -21.5px;
  top: -21.5px;
  width: 155px;
  aspect-ratio: 375 / 446;

  background-image: url("../images/UI/journeypage/core/journeypage_cart_light.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  display: none;
  z-index: 1;
}

/*
  Lock displayed on top of the gray card.
*/
.journey-card-lock {
  left: 50%;
  bottom: -42%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);

  background-image: url("../images/UI/journeypage/core/journeypage_cart_lock.png");

  z-index: 3;
}

.journey-card-lock-shadow{
    left: 51%;
    bottom:-43%;
    width: 55%;
    height: 55%;

    transform:
        translate(-50%,-50%)
        translate(5px,6px);

    background-image:url("../images/UI/journeypage/core/journeypage_cart_lock_shadow.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    z-index:2;
}

/*
  Wooden clothespin displayed above the photo.
*/
.journey-card-pin {
  left: 50%;
  top: -42px;
  width: 37px;
  height: 69px;

  transform: translateX(-50%) rotate(-30deg);
  background-image: url("../images/UI/journeypage/core/journeypage_clothespin.png");

  z-index: 5;
}

.journey-card-pin-shadow{
  left:50%;
  top:-42px;
  width:37px;
  height:69px;

  transform:
      translateX(-50%)
      translate(5px,6px)
      rotate(-30deg);

  background-image:url("../images/UI/journeypage/core/journeypage_clothespin_shadow.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  z-index:4;
}

/*
  Temporary round number.
  We keep this so we can confirm all 48 buttons are generated correctly.
*/
.journey-round-number {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 78px;

  text-align: center;
  font-family: "SNPro", sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  color: #6540a5;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);

  pointer-events: none;
  z-index: 4;
}


/*#endregion */

/* #region ========== Start Game Screen ========== */

.stage.active {
  display: block;
}

.start-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  overflow: hidden;
}

.start-panel {
  position: relative;
  width: 275px;
  aspect-ratio: 819 / 1240;

  background-image: url("../images/UI/startscreen/startscreen_window.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 2;
}

.start-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -60px;
  left: 0px;

  background-image: url("../images/UI/startscreen/startscreen_window_light.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;

  pointer-events: none;
  z-index: 3;
}

.start-decor {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 4;
}

.start-decor-1 {
  width: 80%;
  aspect-ratio: 736 / 562;
  left: -28px;
  top: -54px;
  background-image: url("../images/UI/startscreen/startscreen_window_deco1.png");
}

.start-decor-2 {
  width: 50%;
  aspect-ratio: 392 / 338;
  right: -30px;
  top: -25px;
  background-image: url("../images/UI/startscreen/startscreen_window_deco2.png");
}

.start-decor-3 {
  width: 12%;
  aspect-ratio: 100 / 114;
  right: 30px;
  top: 90px;
  background-image: url("../images/UI/startscreen/startscreen_window_deco3.png");
}

.start-decor-4 {
  width: 105%;
  aspect-ratio: 879 / 209;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  background-image: url("../images/UI/startscreen/startscreen_window_deco4.png");
}

#start-level-number {
  position: absolute;
  right: -15px;
  top: 20px;
  width: 90px;
  text-align: center;

  font-family: "SNPro", sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;

  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);

  z-index: 6;
}

#start-level-label {
  position: absolute;
  right: -15px;
  top: 5px;
  width: 90px;

  text-align: center;

  font-family: "SNPro", sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;

  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);

  text-transform: lowercase;

  z-index: 6;
}

.start-title {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  width: 220px;
  text-align: center;
  font-family: "Dongle", sans-serif;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: 0px;
  color: #493f9b;
  z-index: 2;
  pointer-events: none;
}

.start-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 70px;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  background-image: url("../images/UI/menubutton_normal.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 2;
}

.start-btn:active {
  background-image: url("../images/UI/menubutton_pressed.png");
}

.start-btn-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);
  font-family: "Dongle", sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(92, 60, 160, 0.45);
  pointer-events: none;
}

#start-startGameBtn {
  bottom: 180px;
}

#start-howToPlayBtn {
  bottom: 110px;
}

#start-exitBtn {
  all: unset;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;

  background-image: url("../images/UI/exitbutton_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  z-index: 4;
}

#start-exitBtn:active {
  background-image: url("../images/UI/exitbutton_pressed.png");
}

/* #endregion */

/* #region ========== Powerup ========== */

.lightning-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Lightning.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
  z-index: 3;
}

.clock-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Clock.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
  z-index: 3;
}

.turtle-icon {
  width: 40px;
  height: 40px;
  background-image: url("../images/ClipArt/BonusRound/Turtle.png"); /* <-- your icon path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
  z-index: 3;
}

/* #endregion */

/* #region ========== Game ========== */

/* ------ Top Bar ------ */
.header-front {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 123%;

  z-index: 5;
  pointer-events: none;
}

.header-back {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 123%;

  z-index: 2;
  pointer-events: none;
}

#gemContainer {
  position: absolute;
  left: 18px;
  top: 101px;
  width: 108px;
  height: 20px;
  z-index: 5;
}

#gem-bar {
  position: absolute;
  left: -5px;
  top: 55%;
  transform: translateY(-50%);
  height: 16px;
  width: 0%;

  background: linear-gradient(
    to right,
    #6CFF6C,
    #2ECC71
  );

  border-radius: 15px;
  transition: width 0.25s ease-out;
  z-index: 3;
}

.gem-slot {
  width: 24px;
  height: 21px;
  position: absolute;

  background-image: url("../images/UI/gamescreen/gamescreen_gem_slot.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 5;
}

#gem1-slot {
  left: 80%;
  transform: translateX(-50%);
}

#gem2-slot {
  left: 90%;
  transform: translateX(-50%);
}

#gem3-slot {
  left: 100%;
  transform: translateX(-50%);
}

.gem-icon {
  width: 24px;
  height: 21px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background-image: url("../images/UI/gamescreen/gamescreen_gem.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 6;
  display: block;
  opacity: 0;
}

.gem-unlock-anim {
  animation: gemUnlockPop 0.35s ease-out forwards;
}

@keyframes gemUnlockPop {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  60% {
    transform: translate(-50%, -50%) scale(1.4);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* ------ Target Word UI ------ */
#targetWordText {
  position: absolute;
  top: 144px;
  left: 65%;
  transform: translateX(-50%);

  width: 170px;

  white-space: nowrap;
  overflow: hidden;

  font-size: clamp(14px, 5vw, 22px);

  font-weight: bold;
  color: black;
  text-align: center;

  z-index: 5;
}

#targetWordImage {
  position: absolute;
  top: 24px;
  right: 16px;
  width: 76px;
  height: 76px;

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

  z-index: 4;
}

#targetWordImage img {
  width: 130%;
  height: 130%;
  object-fit: contain;
}

#targetWordShutter {
  position: absolute;
  top: 20px;
  right: 17px;
  width: 74px;
  height: 68px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 7;
  pointer-events: none;
}

/* ---------- Timer ---------- */

#timerDots{
  position: absolute;
  top: 19.8px;
  right: 97.8px;
  display: flex;
  flex-direction: column;
  gap: 2.6px;
  z-index: 6;
}

.timerDot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  opacity: 1;
  transition: opacity .15s ease;
}

.timerDot.off{
  opacity: 0;
}

.timerDot.flash{
  opacity:0.2;
}

/*#endregion */

/*#region ========== Pause Menu ========== */

#gamePauseBtn {
  position: absolute;
  display: block !important;
  top: 98px;
  right: 45px;
  width: 50px;
  height: 50px;
  background-image: url("../images/UI/gamescreen/gamescreen_pausebutton_normal.png"); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  z-index: 5;
}

#gamePauseBtn:active {
  background-image: url("../images/UI/gamescreen/gamescreen_pausebutton_pressed.png"); 
}

#pause-panel {
  display: none;
  position: fixed;
  inset: 0;

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

  z-index: 50;
}

#pause-frame {
  position: absolute;
  width: 280px;
  height: 470px;

  background-image: url("../images/UI/pausescreen/pausescreen_window.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 2;
}

#pause-deco {
  position: absolute;
  width: 305px;
  aspect-ratio: 851 / 1165;
  top: 28px;
  left: 53%;
  transform: translateX(-50%);

  background-image: url("../images/UI/pausescreen/pausescreen_window_deco.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none;
  z-index: 3;
}

#pause-title {
  position: absolute;
  top: 260px;
  left: 50%;
  transform: translateX(-50%);

  font-family: "Dongle", sans-serif;
  font-size: 60px;
  color: #493f9b;

  z-index: 4;
}

.pause-btns {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 70px;

  background-image: url("../images/UI/menubutton_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  font-family: "Dongle", sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(92, 60, 160, 0.45);
  text-align: center;

  cursor: pointer;
  z-index: 4;
}

.pause-btns:active {
  background-image: url("../images/UI/menubutton_pressed.png");
}

#pause-resumeBtn {
  top: 340px;
}

#pause-instructionsBtn {
  top: 420px;
}

#pause-exitBtn,
#pause-retryBtn {
  all: unset;
  position: absolute;
  width: 60px;
  height: 60px;
  bottom: 228px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  z-index: 4;
}

#pause-exitBtn {
  left: calc(50% - 110px);
  background-image: url("../images/UI/exitbutton_normal.png");
}

#pause-exitBtn:active {
  background-image: url("../images/UI/exitbutton_pressed.png");
}

#pause-retryBtn {
  right: calc(50% - 110px);
  background-image: url("../images/UI/retrybutton_normal.png");
}

#pause-retryBtn:active {
  background-image: url("../images/UI/retrybutton_pressed.png");
}

/*#endregion */

/*#region ========== Instructions Menu ========== */

#instructions-panel {
  position: relative;
  width: 320px;
  height: 640px;

  background-image: url("../images/UI/instructions/instructions_window.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#instructions-deco {
  position: absolute;
  width: 110%;
  height: 110%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);

  background-image: url("../images/UI/instructions/instructions_deco.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: none;
}

#instructions-title {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  text-align: center;

  font-family: "Dongle";
  font-size: 52px;
  line-height: 1;
  color: #493f9b;

  z-index: 2;
}

#instructions-video {
  width: 240px;
  height: 390px;

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

  margin: 0 auto;

  overflow: hidden;
  border-radius: 16px;
}

#instructions-demo-video {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}

#instructions-textWrapper {
  position: absolute;
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 245px;
  height: 180px;

  overflow-y: auto;
  z-index: 2;
}

#instructions-content {
  font-family: "Abadi";
  font-size: 16px;
  line-height: 1.5;
  color: #4d4d7a;
}

#instructions-backToGameBtn {
  all: unset;
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 70px;

  background-image: url("../images/UI/menubutton_normal.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  z-index: 2;
}

#instructions-backToGameBtn:active {
  background-image: url("../images/UI/menubutton_pressed.png");
}

.instructions-btn-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-2px);

  font-family: "Dongle", sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(92, 60, 160, 0.45);

  pointer-events: none;
}

#instructions-scrollContent {
  position: absolute;
  top: 125px;
  left: 49%;
  transform: translateX(-50%);
  width: 255px;
  height: 400px;

  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#instructions-scrollContent::-webkit-scrollbar {
  display: none;
}

#instructions-scrollbar {
  display: none;
}

#instructions-scrollbar-track {
  position: absolute;
  inset: 0;

  background-image: url("../images/UI/instructions/instructions_scrollbar_track.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#instructions-scrollbar-thumb {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 80px;

  background-image: url("../images/UI/instructions/instructions_scrollbar_thumb.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  pointer-events: auto;
  cursor: grab;

  touch-action: none;
  user-select: none;

  z-index: 3;
}

#instructions-scrollbar-thumb:active {
  cursor: grabbing;
}

#instructions-scrollbar-fill {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 8px;
  height: 0;

  background-image: url("../images/UI/instructions/instructions_scrollbar_track_filled.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  pointer-events: none;
  z-index: 1;
}

/*endregion */

/*#region ========== Win/Lose Game Menu ========== */

#end-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 420px;
}

#end-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 2;
}

#end-gems {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 3;
  pointer-events: none;
}

#end-glow,
#end-decor {
  position:absolute;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

#end-panel.won #end-frame {
  background-image:url("../images/UI/endscreen/endscreen_won.png");
}

#end-panel.lost #end-frame {
  background-image:url("../images/UI/endscreen/endscreen_lost.png");
}

/* glow */
#end-panel.won #end-glow {
  left: 50%;
  top: -10%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -45%);

  background-image: url("../images/UI/endscreen/endscreen_won_light.png");

  z-index: 1;
}

#end-panel.lost #end-glow {
  display: none;
}

/* decor */
#end-panel.won #end-decor {
  left: 50%;
  top: 2%;
  width: 90%;
  height: 90%;
  transform:translate(-50%, -50%);

  background-image:url("../images/UI/endscreen/endscreen_won_deco.png");

  z-index:3;
}

#end-panel.lost #end-decor {
  width: 30%;
  height: 30%;
  top: 5px;
  right: -10px;

  background-image:url("../images/UI/endscreen/endscreen_lost_deco.png");

  z-index:3;
}

#end-title {
  position: absolute;
  left: 50%;
  transform:translate(-50%);
  width: 250px;
  text-align: center;
  font-family: "Dongle", sans-serif;
  font-size: 52px;
  color: #493f9b;
  pointer-events: none;
  z-index: 3;
}

#end-title.won {
  top: 10px;
}

#end-title.lost {
  top: 40px;
}

.end-section {
  position: absolute;
  top: 106px;
  width: 250px;
  text-align: center;
  font-family: "Dongle", sans-serif;
  font-size: 0px;
  color: #9883b7;
  pointer-events: none;
  z-index: 3;
}

#end-score,
#end-accuracy {
  all: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Dongle", sans-serif;
  font-size: 0px;
  z-index: 3;
}

#end-score { 
  top: 168px; 
  color: #634e8e;
}

#end-panel.lost #end-accuracy { 
  top: 246px;
  color: red;
}

#end-panel.won #end-accuracy { 
  top: 246px;
  color: green;
}

/* ------ Buttons ------ */
#end-btns {
  position: absolute;
  inset: 0;
}

#end-nextBtn,
#end-retryBtn,
#end-exitBtn {
  all: unset;
  position: absolute;

  width: 60px;
  height: 60px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
  z-index: 4;
}

#end-nextBtn {
  background-image: url('../images/UI/nextbutton_normal.png');
}

#end-nextBtn:active {
  background-image: url('../images/UI/nextbutton_pressed.png');
}

#end-retryBtn {
  background-image: url("../images/UI/retrybutton_normal.png");
}

#end-retryBtn:active {
  background-image: url("../images/UI/retrybutton_pressed.png");
}

#end-exitBtn {
  background-image: url("../images/UI/exitbutton_normal.png");
}

#end-exitBtn:active {
  background-image: url("../images/UI/exitbutton_pressed.png");
}

#end-panel.lost #end-exitBtn {
  left: 32px;
  bottom: 70px;
}

#end-panel.lost #end-retryBtn {
  right: 32px;
  bottom: 70px;
}

#end-panel.lost #end-nextBtn {
  display: none;
}

#end-panel.won #end-exitBtn {
  left: 32px;
  bottom: 10px;
}

#end-panel.won #end-retryBtn {
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}

#end-panel.won #end-nextBtn {
  right: 32px;
  bottom: 10px;
}

/* Single-chapter win layout (two-button layout like lost screen) */

#end-panel.won.single-chapter #end-nextBtn {
  display: none;
}

#end-panel.won.single-chapter #end-exitBtn {
  left: 32px;
  bottom: 10px;
}

#end-panel.won.single-chapter #end-retryBtn {
  left: auto;
  right: 32px;
  bottom: 10px;
  transform: none;
}

/*#endregion */