:root {
        /* control panel appearance */
        --panel-bg: rgba(0,0,0,0.28);
        --panel-blur: 15px;
        --btn-bg: rgba(255,255,255,0.15);
        --btn-hover-bg: rgba(255,255,255,0.25);
        --gradient: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: 'Trebuchet MS', sans-serif;
        background: #000;
        color: #fff;
      }
      #background-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
      }
      #img-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #bg-image, #bg-image2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 2s ease-in-out;
        /* prevent dragging the images so click‐drag effects work properly */
        -webkit-user-drag: none;
        user-drag: none;
      }
      #bg-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 2s ease-in-out;
        pointer-events: none;
      }
      /* overlays */
      #grain-overlay, #ripple-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
      }
      #grain-overlay {
        background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 4px),
                          repeating-radial-gradient(circle at 100% 100%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);
        background-size: 150px 150px, 200px 200px;
      }
      #ripple-overlay {
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 60%, transparent 70%);
        mix-blend-mode: overlay;
        animation: ripple 8s linear infinite;
      }
      @keyframes ripple {
        from { background-size: 0% 0%; }
        to   { background-size: 200% 200%; }
      }
      /* image effects */
      .image-effects #bg-image,
      .image-effects #bg-image2 {
        animation: zoomPan 30s ease-in-out infinite alternate;
        filter: saturate(1.2) brightness(1.1);
      }
      @keyframes zoomPan {
        0% { transform: scale(1) translate(0,0); }
        50% { transform: scale(1.08) translate(-3%, -3%); }
        100% { transform: scale(1.15) translate(-6%, -6%); }
      }
      /* video effects */
      .video-effects #bg-video {
        filter: blur(3px) saturate(1.4) brightness(1.1);
      }
      /* mood lamp for videos */
      .mood-lamp #bg-video {
        animation: hueRotate 20s linear infinite;
      }
      @keyframes hueRotate {
        0% { filter: hue-rotate(0deg); }
        50% { filter: hue-rotate(180deg); }
        100% { filter: hue-rotate(360deg); }
      }
@keyframes petRainbowFlash {
  0% {
    filter: brightness(1.3) saturate(1.6) drop-shadow(0 0 0px #fff);
  }
  20% {
    filter: brightness(1.7) saturate(2) drop-shadow(0 0 12px #fff8) hue-rotate(72deg);
  }
  40% {
    filter: brightness(2.1) saturate(2.7) drop-shadow(0 0 24px #fbf) hue-rotate(144deg);
  }
  60% {
    filter: brightness(2.1) saturate(2.7) drop-shadow(0 0 30px #adf) hue-rotate(222deg);
  }
  80% {
    filter: brightness(1.7) saturate(2) drop-shadow(0 0 12px #fff8) hue-rotate(306deg);
  }
  100% {
    filter: brightness(1.3) saturate(1.3) drop-shadow(0 0 0px #fff) hue-rotate(0deg);
  }
}
.pet-rainbow-flash {
  animation: petRainbowFlash 0.52s cubic-bezier(.53,1.6,.36,.97);
}

#feelbetter-overlay-img {
  animation: fb-img-pop 1.2s cubic-bezier(.25,1.1,.67,1.1) 1;
  filter: drop-shadow(0 0 36px #fff4) drop-shadow(0 0 80px #fbf3);
  will-change: transform, filter;
}

@keyframes fb-img-pop {
  0%   { transform: scale(0.7) rotate(-14deg); filter: drop-shadow(0 0 2px #fff0); opacity: 0; }
  50%  { transform: scale(1.14) rotate(8deg); filter: drop-shadow(0 0 80px #fff9); opacity: 1;}
  70%  { transform: scale(1.06) rotate(-6deg);}
  85%  { transform: scale(1.02) rotate(2deg);}
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes fb-heartburst {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.7);}
  35%  { opacity:1;  transform:translate(-50%,-130%) scale(1.6);}
  65%  { opacity:0.8;transform:translate(-50%,-180%) scale(1.1);}
  100% { opacity:0;  transform:translate(-50%,-300%) scale(0.4);}
}
@keyframes fb-rayburst {
  0%   { opacity:0.0; height:20px;}
  20%  { opacity:0.48; height:140px;}
  60%  { opacity:0.15;}
  100% { opacity:0; height:200px;}
}
@keyframes fb-heartburst-radial {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.65);}
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1.4);}
  65%  { opacity:0.93; }
  100% { opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0.4);}
}



      /* control panel */
      #control-panel {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--panel-bg);
        backdrop-filter: blur(var(--panel-blur));
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 15px;
        padding: 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
        width: min(95%, 650px);
        z-index: 40;
        transition: opacity 0.5s ease-in-out;
      }
      #control-panel.hidden {
        opacity: 0;
        pointer-events: none;
      }
      .ctrl-row {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
      }
      .ctrl-row .label {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-right: 6px;
      }
      .nav-btn,
      .pause-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: var(--btn-bg);
        border: none;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
      }
      .nav-btn:hover,
      .pause-btn:hover {
        background: var(--btn-hover-bg);
      }
      /* pause / off icons: circle when off, pause symbol when on */
      .pause-btn.off {
        border-radius: 50%;
      }
      /* toggle buttons for video and effects */
      .toggle-btn {
        padding: 6px 12px;
        border-radius: 8px;
        background: var(--btn-bg);
        border: none;
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.3s;
      }
      .toggle-btn:hover {
        background: var(--btn-hover-bg);
      }
      /* special mode buttons */
      .mode-btn {
        padding: 6px 12px;
        border-radius: 10px;
        background: var(--gradient);
        background-size: 300% 300%;
        animation: rainbow 15s ease infinite;
        color: #222;
        font-weight: bold;
        border: none;
        cursor: pointer;
      }
      @keyframes rainbow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
.heart-panel-wrap {
  max-width: 430px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: stretch;
}
.heart-panel-card {
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.19);
  border-radius: 14px;
  padding: 17px 15px 15px 15px;
  box-shadow: 0 2px 16px #0001;
  width: 100%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.44;
}
@media (max-width: 520px) {
  .heart-panel-wrap, .heart-panel-card { max-width:98vw; }
}

.pet-speech-bubble {
  background: #ffd3e8ee;
  color: #732347;
  border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 2px 12px #0002;
  font-size: 16px;
  position: absolute;
  pointer-events: none;
  z-index: 999;
  min-width: 90px;
  max-width: 200px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.pet-speech-bubble.show {
  opacity: 1;
}
.pet-speech-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid #ffd3e8ee; /* match the bg exactly */
}
.pet-speech-bubble::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff4;
  z-index: 998;
}
.heart-particle {
  position: fixed;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
  font-family: system-ui, sans-serif;
  transition: none;
  text-shadow:
    0 0 9px #fff8,
    0 0 12px #fff,
    1px 1px 0 #fff7,
    -1px -1px 2px #fff,
    0 1px 2px #fff5,
    1px 0 1px #fff3,
    0 0 0 #000;
  filter:
    drop-shadow(0 1px 3px #fff8)
    drop-shadow(0 0 7px #fffad1)
    drop-shadow(0 0 20px #fffa)
    brightness(1.1)
    saturate(1.5);
  animation: sparkleHeart 1s linear;
}

@keyframes sparkleHeart {
  0% { filter: brightness(2) saturate(2); }
  30% { filter: brightness(1.6) saturate(1.8); }
  65% { filter: brightness(1.25) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}
.shelter-pulse {
  animation: shelterPulse 0.36s cubic-bezier(.63,1.6,.36,.97);
}
@keyframes shelterPulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.13); }
  68%  { transform: scale(1.21); }
  100% { transform: scale(1); }
}
@keyframes petSadPulse {
  0%   { transform: scale(1);}
  36%  { transform: scale(1.13);}
  65%  { transform: scale(0.94);}
  100% { transform: scale(1);}
}
.pet-sad-pulse {
  animation: petSadPulse 0.83s cubic-bezier(.18,.83,.33,1.07);
}
@keyframes petKOPulse {
  0%   { transform: scale(1);}
  40%  { transform: scale(1.07);}
  60%  { transform: scale(0.94);}
  100% { transform: scale(1);}
}
.pet-ko-pulse {
  animation: petKOPulse 1.12s cubic-bezier(.22,.72,.38,1.17);
  filter: grayscale(0.72) brightness(0.93);
}
@keyframes petShake {
  0% { transform: translate(0,0) rotate(0deg); }
  10% { transform: translate(-9px, 2px) rotate(-4deg);}
  20% { transform: translate(8px, -4px) rotate(4deg);}
  30% { transform: translate(-10px, 5px) rotate(-5deg);}
  40% { transform: translate(8px, -2px) rotate(4deg);}
  50% { transform: translate(-9px, 4px) rotate(-4deg);}
  60% { transform: translate(8px, -6px) rotate(4deg);}
  70% { transform: translate(-10px, 2px) rotate(-5deg);}
  80% { transform: translate(8px, -4px) rotate(4deg);}
  90% { transform: translate(-8px, 3px) rotate(-3deg);}
  100% { transform: translate(0,0) rotate(0deg); }
}
.pet-shake {
  animation: petShake 1s cubic-bezier(.28,1.7,.28,.95);
}

/* happy pulse effect */
@keyframes petHappyPulse {
  0%   { transform: scale(1);}
  28%  { transform: scale(1.10);}
  62%  { transform: scale(1.03);}
  100% { transform: scale(1);}
}
.pet-happy-pulse {
  animation: petHappyPulse 1.12s cubic-bezier(.18,.83,.33,1.07) infinite;
  filter: drop-shadow(0 0 10px #fff685) brightness(1.18);
}

/* miserable pulse effect */
@keyframes petMiserablePulse {
  0%   { transform: scale(1);}
  32%  { transform: scale(1.08);}
  58%  { transform: scale(0.94);}
  100% { transform: scale(1);}
}
.pet-miserable-pulse {
  animation: petMiserablePulse 1.18s cubic-bezier(.15,.77,.33,1.05) infinite;
  filter: grayscale(0.66) sepia(0.23) brightness(0.8);
}

/* hungry pulse effect */
@keyframes petHungryPulse {
  0%   { transform: scale(1);}
  26%  { transform: scale(1.11);}
  68%  { transform: scale(0.95);}
  100% { transform: scale(1);}
}
.pet-hungry-pulse {
  animation: petHungryPulse 1.08s cubic-bezier(.22,.77,.33,1.03) infinite;
  filter: sepia(0.21) hue-rotate(27deg) brightness(1.04);
}

/* sick pulse effect */
@keyframes petSickPulse {
  0%   { transform: scale(1);}
  34%  { transform: scale(1.07);}
  61%  { transform: scale(0.97);}
  100% { transform: scale(1);}
}
.pet-sick-pulse {
  animation: petSickPulse 1.24s cubic-bezier(.19,.71,.33,1.09) infinite;
  filter: grayscale(0.77) hue-rotate(90deg) brightness(0.7);
}



#shop-container {
  max-height: 88vh;
  overflow-y: auto;
  padding-bottom: 32px; /* so last row isn't hidden under edge */
}

#points-shop, #token-shop {
  max-height: 78vh;
  overflow-y: auto;
  padding-bottom: 28px;
}


.shop-item-img {
  display: block;
  width: 20%;      /* scales 600px images to 120px */
  min-width: 54px; /* always visible on small screens */
  max-width: 120px;
  margin: 6px auto 2px auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 9px #000a);
  border-radius: 13px;
}
.shop-item {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0 7px 11px 7px;
}

.fly-to-pet {
  transition: none;
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 9px #000a);
  border-radius: 12px;
}

#dodge-center-circle {
  transition: box-shadow 0.3s;
}



#heart-toolbar {
  position: fixed !important;
  left: 0; right: 0; bottom: 32px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 5000;
  padding: 0;
  pointer-events: auto; /* restore */
}


.heart-toolbar-btn {
  pointer-events: auto;
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 9px;
  border: none;
  background: #e2e4e8;
  color: #333b48;
  font-weight: 500;
  box-shadow: 0 2px 12px #8beff533, 0 1px 1px #fff8 inset;
  cursor: pointer;
  margin: 0 5px;
  outline: none;
  filter: drop-shadow(0 1px 4px #6beff3a4);
  transition: 
    background 0.17s cubic-bezier(.61,1.33,.37,1.01),
    color 0.14s,
    filter 0.13s;
}
.heart-toolbar-btn.selected {
  background: #aad9ff;
  color: #114a6e;
  box-shadow: 0 2px 10px #6beff344;
  filter: brightness(1.06);
}
.heart-toolbar-btn:not(.selected):hover,
.heart-toolbar-btn:focus-visible {
  background: #e5f6ff;
  color: #205870;
  filter: brightness(1.08);
}


@media (max-width: 600px) {
  #heart-toolbar {
    gap: 7px;
    bottom: 13px;
  }
  .heart-toolbar-btn {
    font-size: 15.5px;
    padding: 9px 16px;
    border-radius: 16px;
    margin: 0 2vw;
  }
}


      /* UI sound checkbox */
      #ui-sfx {
        width: 18px;
        height: 18px;
        accent-color: #66ccff;
        cursor: pointer;
      }
      /* exit dream/game buttons */
      #exit-dream, #exit-game {
        position: fixed;
        /* exit-dream is bottom right, exit-game will be top right by default; override below */
        bottom: 20px;
        right: 20px;
        z-index: 30;
        background: var(--gradient);
        background-size: 300% 300%;
        animation: rainbow 15s ease infinite;
        color: #222;
        font-weight: bold;
        border: none;
        padding: 10px 16px;
        border-radius: 12px;
        display: none;
        cursor: pointer;
      }
      /* position exit-game separately */
      #exit-game {
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        right: 22px; left: auto; transform: none;
      }
      #hint {
        position: fixed;
        bottom: 8px;
        left: 8px;
        font-size: 10px;
        color: rgba(255,255,255,0.6);
        z-index: 30;
      }
      /* game container & toolbar */
      #game-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 20;
      }
#game-toolbar {
  position: fixed;
  left: 50%;
  bottom: 24px; /* or 12px, as you like */
  transform: translateX(-50%);
  display: none;
  gap: 16px;
  z-index: 45;
  background: rgba(0,0,0,0.16);
  padding: 12px 18px 10px 18px;
  border-radius: 18px;
  box-shadow: 0 -3px 24px 0 #0006;
  border: 1.5px solid #fff2;
  backdrop-filter: blur(7px);
}

      }
      #game-toolbar button {
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--btn-bg);
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.3s;
      }
      #game-toolbar button:hover {
        background: var(--btn-hover-bg);
      }
      #game-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      /* scoreboard always visible */
      #scoreboard {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 6px 12px;
        background: var(--panel-bg);
        backdrop-filter: blur(var(--panel-blur));
        border-radius: 10px;
        font-size: 14px;
        z-index: 40;
        text-align: right;
        display: block;
      }
      /* memory cards */
@keyframes memoryCardBorderFlash {
  0% {
    box-shadow: 0 0 0 0 #fff176, 0 0 10px 2px #90caf9;
    border: 3px solid #fff176;
  }
  40% {
    box-shadow: 0 0 0 4px #fff176, 0 0 18px 6px #90caf9;
    border: 3px solid #90caf9;
  }
  80% {
    box-shadow: 0 0 0 8px #fff176, 0 0 24px 12px #fffde4;
    border: 3px solid #fffde4;
  }
  100% {
    box-shadow: 0 0 0 0 #fff176, 0 0 10px 2px #90caf9;
    border: 3px solid #fff176;
  }
}
.memory-card {
  position: absolute;
  width: 80px;
  height: 100px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s, background 0.3s;
  border: 3px solid #fff176;
  box-shadow: 0 0 0 0 #fff176, 0 0 10px 2px #90caf9;
  animation: memoryCardBorderFlash 2.3s infinite linear;
}

      .memory-card.revealed {
        background: rgba(255,255,255,0.4);
        transform: scale(1.1);
      }
      .memory-card.matched {
        background: rgba(255,255,255,0.6);
        transform: scale(1.2);
      }
      .memory-card.celebrate {
        animation: celebrate 2s ease-in-out infinite;
      }
      @keyframes celebrate {
        0%,100% { transform: scale(1.2) rotate(0deg); }
        50% { transform: scale(1.4) rotate(5deg); }
      }
	  @keyframes hintPulse {
  0%   { box-shadow: 0 0 6px #4ea3ff, 0 0 12px #4ea3ff; }
  50%  { box-shadow: 0 0 16px #4ea3ff, 0 0 28px #4ea3ff; }
  100% { box-shadow: 0 0 6px #4ea3ff, 0 0 12px #4ea3ff; }
}

.memory-card.hint-glow {
  border: 3px solid #4ea3ff !important;
  border-radius: 10px !important;
  animation: hintPulse 1.5s infinite ease-in-out;
}

      /* click game emojis */
      .click-emoji {
        position: absolute;
        font-size: 64px;
        cursor: pointer;
        user-select: none;
        transform: scale(0);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
      }
      .click-emoji.appear {
        transform: scale(1);
        opacity: 1;
      }
      .click-emoji.disappear {
        transform: scale(0);
        opacity: 0;
      }
      /* moving emoji for click game progression */
      .move-slow {
        animation: moveSlow 6s ease-in-out infinite alternate;
      }
      @keyframes moveSlow {
        0% { transform: translate(0,0) scale(1); }
        25% { transform: translate(10px, -10px) scale(1); }
        50% { transform: translate(-10px, 10px) scale(1); }
        75% { transform: translate(8px, 6px) scale(1); }
        100% { transform: translate(-6px, -8px) scale(1); }
      }
@keyframes flash-x {
  0% { color: #ff3333; text-shadow: 0 0 6px #fff4; }
  50% { color: #fff; text-shadow: 0 0 20px #ff3333aa; }
  100% { color: #ff3333; text-shadow: 0 0 6px #fff4; }
}

.dodge-x {
  animation: flash-x 0.6s infinite;
}

      /* mouse trailing */
      #trail-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 50;
        overflow: hidden;
      }
      .trail {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      /* particle explosion */
      .particle {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 1;
        transform: translate(0,0) scale(1);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      /* idle incremental container */
      #idle-container {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 80px 20px 20px;
        color: #fff;
      }
      .building {
        margin: 10px auto;
        padding: 10px;
        max-width: 400px;
        width: 95%;
        background: rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      }
      .building h3 {
        margin: 0 0 8px 0;
        font-size: 16px;
        text-transform: capitalize;
      }
      .building button {
        margin-right: 6px;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--btn-bg);
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.3s;
      }
      .building button:hover {
        background: var(--btn-hover-bg);
      }
.hidden {
  display: none !important;
}

.rare-gold-flash {
  animation: goldFlash 3s infinite alternate ease-in-out;
  color: #ffd700;
  text-shadow:
    0 0 8px #fffacd,
    0 0 14px #ffd700,
    0 0 18px #ffec8b,
    0 0 28px #fff700;
  will-change: filter, text-shadow;
}


@keyframes goldFlash {
  from { opacity: 0.8; }
  to { opacity: 1; }
}



.dodge-x {
  user-select: none;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(60,0,0,0.11);
  transition: opacity 0.16s, background 0.16s;
  will-change: left, top;
}
.dodge-bonus {
  user-select: none;
  pointer-events: none;
  border-radius: 50%;
  background: transparent; /* REMOVE the yellow circle entirely */
  animation: pulse-bonus 1.1s infinite alternate;
  transition: opacity 0.22s, filter 0.15s, background 0.14s, transform 0.15s;
}

@keyframes pulse-bonus {
  from { filter: drop-shadow(0 0 8px #fff47c); }
  to   { filter: drop-shadow(0 0 22px #fff6e8); }
}

.score-popup {
  position: fixed;
  min-width: 36px;
  min-height: 30px;
  padding: 0 6px;
  border-radius: 12px;
  text-align: center;
  pointer-events: none;
  background: rgba(20,20,35,0.28);
  box-shadow: 0 2px 10px #0008;
  opacity: 0.93;
  user-select: none;
  transition: transform .9s cubic-bezier(.62,0,.68,1), opacity .95s;
  will-change: transform, opacity;
}
.score-popup-small {
  font-size: 15px !important;
  min-width: 24px;
  min-height: 20px;
  padding: 0 3px;
  border-radius: 7px;
  opacity: 0.8;
}
/* splash loading row (centered at bottom) */
#splash .loading-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 28px;              /* nudge this up/down to taste */
  display: inline-flex;
  align-items: center;        /* vertical center across sizes */
  gap: 18px;                  /* space between spinner and text */
  pointer-events: none;       /* clicks pass through to splash */
}
@keyframes pastelRainbow {
  0%   { color: #f8b4b4; } /* soft pink */
  20%  { color: #f9d29d; } /* peach */
  40%  { color: #f6f3a7; } /* pale yellow */
  60%  { color: #b8e3c0; } /* mint */
  80%  { color: #b5d1f8; } /* baby blue */
  100% { color: #e1b5f8; } /* lavender */
}

.rainbow-name {
  cursor: pointer;
  animation: pastelRainbow 8s linear infinite;
  transition: filter 0.2s;
}

.rainbow-name:hover {
  filter: brightness(1.2);
}

/* big readable status text */
#splash .loading-hint {
  font: 900 48px system-ui;
  letter-spacing: .5px;
  color: #fff;
  opacity: .92;
  text-shadow: 0 2px 14px #000c, 0 0 30px #0008;
  white-space: nowrap;
}

/* twin spinners */
#splash .ikk-spinner {
  width: 28px; height: 28px;
  border: 3px solid #ffffff33;   /* faint ring */
  border-top-color: #fff;         /* bright wedge */
  border-radius: 50%;
  animation: ikkspin .9s linear infinite;
  filter: drop-shadow(0 0 8px #0008);
}

/* hide spinners after ready */
#splash .loading-wrap.ready .ikk-spinner { display: none; }

@keyframes ikkspin { to { transform: rotate(360deg); } }


#heart-container {
  position: fixed !important;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 2500;
  color: #fff;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  padding: 60px 0 30px 0;
  background: rgba(30,40,55,0.82);
  /* Add stacking context to anchor absolute children */
}

/* subtle reminder shine for the heart mode button */
@keyframes softShine {
  0%   { filter: none; box-shadow: none; }
  2%   { filter: brightness(1.18) saturate(1.1); box-shadow: 0 0 18px 4px rgba(255, 160, 200, 0.28); }
  6%   { filter: brightness(1.10) saturate(1.05); box-shadow: 0 0 10px 2px rgba(140, 220, 255, 0.22); }
  10%  { filter: none; box-shadow: none; }
  100% { filter: none; box-shadow: none; }
}
/* this class gets toggled by js only when recording is active */
.heartmode-remind {
  /* idle state: no constant animation */
}
/* this class is applied briefly to play one shine */
.heartmode-remind.flash-once {
  animation: softShine 1.2s ease-out 1;
}


/* — rpg micro-animations — */
@keyframes rpg-float-up {
  0% { transform: translate(-50%, 0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-50%, -40px) scale(1); opacity: 0; }
}
@keyframes rpg-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
}
@keyframes rpg-ui-flash {
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 24px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}
.rpg-shake-quick { animation: rpg-shake 180ms ease-out; }
.rpg-ui-flash { animation: rpg-ui-flash 180ms ease-out; }

/* enemy-hit numbers (over viewfinder) */
.rpg-float {
  position: absolute;
  left: 50%;
  bottom: 18%;
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.4);
  pointer-events: none;
  animation: rpg-float-up 620ms ease-out forwards;
  z-index: 5;
}

/* player-hit numbers (lower, over the bottom card zone) */
.rpg-float-player {
  position: absolute;
  left: 50%;
  bottom: 6%; /* lower than enemy floaters so it reads as "you got hit" */
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.4);
  pointer-events: none;
  animation: rpg-float-up 620ms ease-out forwards;
  z-index: 6;
}

/* crit badge sits above the big number, not on top of it */
.rpg-crit {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: calc(100% + 22px); /* pushes badge higher above number */
  font-size: clamp(22px, 6vw, 38px);
  font-weight: 900;
  color: #ffd966;
  text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 0 14px rgba(255,217,102,.35);
  pointer-events: none;
  white-space: nowrap;
}

/* auto-hide ui while dream mode is active */
body.dream-on #control-panel { opacity: 0 !important; pointer-events: none !important; }
body.dream-on #scoreboard,
body.dream-on #hint,
body.dream-on #game-toolbar,
body.dream-on #exit-dream { display: none !important; }
.label {
  cursor: pointer;
  transition: color 0.13s, text-shadow 0.14s;
}
.label:hover {
  color: #ffe28c;
  text-shadow: 0 0 4px #ffeaad, 0 0 10px #fff2c4;
}
@keyframes rainbow-glow {
  0% { text-shadow: 0 0 8px #ff007b, 0 0 20px #ffdc00, 0 0 35px #07ffe7; }
  20% { text-shadow: 0 0 8px #ffdc00, 0 0 20px #0af, 0 0 35px #9f0; }
  40% { text-shadow: 0 0 8px #07ffe7, 0 0 20px #a0f, 0 0 35px #ff007b; }
  60% { text-shadow: 0 0 8px #0af, 0 0 20px #ffdc00, 0 0 35px #ff007b; }
  80% { text-shadow: 0 0 8px #a0f, 0 0 20px #9f0, 0 0 35px #07ffe7; }
  100% { text-shadow: 0 0 8px #ff007b, 0 0 20px #ffdc00, 0 0 35px #07ffe7; }
}
.label:hover {
  color: #fff;
  animation: rainbow-glow 1.2s linear infinite;
}
/* slots: subtle rainbow pop on win */
@keyframes slotWinPulse {
  0%   { transform: scale(1);   filter: hue-rotate(0deg) brightness(1) saturate(1); }
  35%  { transform: scale(1.15); filter: hue-rotate(120deg) brightness(1.2) saturate(1.25) drop-shadow(0 0 10px #fff6); }
  70%  { transform: scale(1.08); filter: hue-rotate(240deg) brightness(1.1) saturate(1.15) drop-shadow(0 0 14px #fff4); }
  100% { transform: scale(1);   filter: hue-rotate(360deg) brightness(1) saturate(1); }
}
.slot-rainbow-win {
  animation: slotWinPulse 900ms ease-out 1;
}


.affection-rainbow-heart {
  animation: affectionRainbow 1.2s linear infinite;
  background: linear-gradient(90deg, #ff7eb3, #ff65a3, #f9f871, #63ffd3, #6e78ff, #b967ff, #ff7eb3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  filter: drop-shadow(0 0 10px #fff6) brightness(1.15) saturate(1.3);
}
/* — fix: neutralize any "remind" flash wherever it lands — */
.heartmode-remind,
.heartmode-remind.flash-once {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* optional: if your new top-bar heart has an id, re-enable a tiny wiggle ONLY there */
#topbar-heart.heartmode-remind {
  animation: heartNudge 950ms ease 1 !important;
}
@keyframes heartNudge {
  0%   { transform: translate(0,0) rotate(0); }
  14%  { transform: translate(-1px,0) rotate(-6deg); }
  28%  { transform: translate(2px,0) rotate(6deg); }
  42%  { transform: translate(-2px,0) rotate(-5deg); }
  56%  { transform: translate(2px,0) rotate(5deg); }
  70%  { transform: translate(-1px,0) rotate(-3deg); }
  100% { transform: translate(0,0) rotate(0); }
}
/* tiny toast at bottom center */
#ikk-toast-host {
  position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999; pointer-events: none;
}
.ikk-toast {
  display: inline-block; pointer-events: none;
  background: rgba(20,25,35,0.86); color: #fff;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 2px 12px #0008;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.ikk-toast.show { opacity: 1; transform: translateY(0); }
/* — neutralize any heart reminder animation globally — */
.heartmode-remind,
.heartmode-remind.flash-once {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* — allow a tiny wiggle ONLY on the injected quick heart icon — */
#heart-quick-btn.heartmode-remind {
  animation: heartNudge 900ms ease 1 !important;
}
@keyframes heartNudge {
  0%   { transform: translate(0,0) rotate(0deg); }
  14%  { transform: translate(-1px,0) rotate(-6deg); }
  28%  { transform: translate(2px,0)  rotate(6deg); }
  42%  { transform: translate(-2px,0) rotate(-5deg); }
  56%  { transform: translate(2px,0)  rotate(5deg); }
  70%  { transform: translate(-1px,0) rotate(-3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
/* kill animations on any node we mark */
[data-no-anim], [data-no-anim] * {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

/* private wiggle only for the quick heart next to the cog */
#heart-quick-btn.ikk-wiggle {
  animation: heartNudge 900ms ease 1 !important;
}
@keyframes heartNudge {
  0%   { transform: translate(0,0) rotate(0deg); }
  14%  { transform: translate(-1px,0) rotate(-6deg); }
  28%  { transform: translate(2px,0)  rotate(6deg); }
  42%  { transform: translate(-2px,0) rotate(-5deg); }
  56%  { transform: translate(2px,0)  rotate(5deg); }
  70%  { transform: translate(-1px,0) rotate(-3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
/* big toast for alarm dismissal */
.ikk-toast.big{
  font-size: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(18,22,32,0.92);
  box-shadow: 0 6px 30px #000c, 0 0 1px #000a;
  letter-spacing: 0.2px;
}
/* force true center for detached big toast */
.ikk-toast.big.center.detach{
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: min(92vw, 680px);
  width: max-content;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999999; /* above everything */
}

@keyframes affectionRainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}