/* Infinity Challenge Visual Effects - Optimized */
.infinity-challenge-filter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(138, 43, 226, 0.15);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  overflow: hidden;
  /* Removed expensive backdrop-filter for better performance */
}

.infinity-challenge-filter.active {
  opacity: 1;
}

/* Simplified floating symbols - reduced from 8 to 4 for better performance */
.infinity-symbol-1, .infinity-symbol-2, .infinity-symbol-3, .infinity-symbol-4 {
  position: absolute;
  color: rgba(138, 43, 226, 0.4);
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0); /* Hardware acceleration */
}

.infinity-challenge-filter.active .infinity-symbol-1 {
  animation: floatUpOptimized1 12s ease-in-out infinite;
}

.infinity-challenge-filter.active .infinity-symbol-2 {
  animation: floatUpOptimized2 14s ease-in-out infinite 2s;
}

.infinity-challenge-filter.active .infinity-symbol-3 {
  animation: floatUpOptimized3 13s ease-in-out infinite 4s;
}

.infinity-challenge-filter.active .infinity-symbol-4 {
  animation: floatUpOptimized4 15s ease-in-out infinite 6s;
}

/* Optimized floating animations - simplified to only vertical movement */
@keyframes floatUpOptimized1 {
  0% { 
    transform: translate3d(20vw, 100vh, 0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translate3d(20vw, -100px, 0);
    opacity: 0;
  }
}

@keyframes floatUpOptimized2 {
  0% { 
    transform: translate3d(60vw, 100vh, 0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translate3d(60vw, -100px, 0);
    opacity: 0;
  }
}

@keyframes floatUpOptimized3 {
  0% { 
    transform: translate3d(40vw, 100vh, 0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translate3d(40vw, -100px, 0);
    opacity: 0;
  }
}

@keyframes floatUpOptimized4 {
  0% { 
    transform: translate3d(80vw, 100vh, 0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { 
    transform: translate3d(80vw, -100px, 0);
    opacity: 0;
  }
}

/* Simplified Infinity Challenge Pulse Animation */
@keyframes infinityChallengeGlow {
  0% { 
    opacity: 0.8;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    opacity: 0.8;
  }
}

.infinity-challenge-filter.active {
  opacity: 1;
  animation: infinityChallengeGlow 3s ease-in-out infinite;
}

/* Halloween Vines - Use a low z-index that's above background but below UI elements */
#pageHalloweenVines,
#terrariumHalloweenVines {
  z-index: 2 !important;
}

/* Floor 2 Navigation Adjustments */
body.floor-2 nav#bottomNav {
  display: none !important;
}

body.floor-2 #subTabNavBar {
  bottom: 0 !important;
}

:root {
  --card-bg: #ddffee;
  --card-border: #66ccaa;
  --text: #111;
  --radius: 16px;
  --nav-bg: #66ccaa;
  --button-bg: #66ccaa;
  --button-hover: #55bb99;
  --shadow-color: rgba(0,0,0,0.1);
  --glow-color: transparent;
  --text-shadow: none;
}
[data-theme="dark"] {
  --card-bg: #003322;
  --card-border: #00aa66;
  --text: #fff;
  --nav-bg: #00aa66;
  --button-bg: #00aa66;
  --button-hover: #009955;
  --shadow-color: rgba(0,0,0,0.3);
  --glow-color: rgba(0,170,102,0.2);
  --text-shadow: none;
  background: #111;
}
[data-colour="green"] {
  --card-bg: #00ff5e;
  --card-border: #009e42;
  --modal-bg: #1c3a26;
  --modal-border: #3cff8a;
  --modal-btn-bg: #00ff5e;
}
[data-colour="blue"] {
  --card-bg: #00d5ff;
  --card-border: #008bb3;
  --modal-bg: #1c2740;
  --modal-border: #4ad1ff;
  --modal-btn-bg: #00d5ff;
}
[data-colour="pink"] {
  --card-bg: #ff8ed1;
  --card-border: #b10089;
  --modal-bg: #4a1a36;
  --modal-border: #ff8ed1;
  --modal-btn-bg: #ff5ecb;
}
[data-style="square"] .card,
[data-style="square"] button,
[data-style="square"] select {
  border-radius: 0 !important;
}
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  color: var(--text);
  text-shadow: var(--text-shadow, none);
  transition: background 0.6s ease,
              --card-bg 0.3s ease,
              --card-border 0.3s ease,
              --text 0.3s ease,
              --nav-bg 0.3s ease,
              --button-bg 0.3s ease,
              --button-hover 0.3s ease,
              --shadow-color 0.3s ease,
              --glow-color 0.2s ease,
              text-shadow 0.3s ease;
}

/* Prism background styles applied to body when prism tab is active */
body.prism-bg-active {
  background: linear-gradient(120deg, #e0e7ff 0%, #fff1eb 30%, #ffe3ec 60%, #c1f0f6 100%) !important;
}

html[data-theme="dusk"] body.prism-bg-active {
  background: linear-gradient(120deg, #ffb347 0%, #ffe4b3 40%, #bfaaff 100%) !important;
}

html[data-theme="night"] body.prism-bg-active {
  background: linear-gradient(120deg, #181c24 0%, #23283a 60%, #3a2566 100%) !important;
}

body.no-transitions {
  transition: none !important;
}
body.no-transitions * {
  transition: none !important;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
}
.card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  width: 400px;
  min-height: 400px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  text-align: center;
  position: relative;
  /* Hardware acceleration for smooth performance */
  backface-visibility: hidden;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.2s ease,
              transform 0.2s ease;
  box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.1)),
              0 0 20px var(--glow-color, transparent);
}
nav#bottomNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--nav-bg, var(--card-border));
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem;
  transition: background 0.3s ease,
              box-shadow 0.3s ease;
  box-shadow: 0 -2px 8px var(--shadow-color, rgba(0,0,0,0.15));
}
.navBtn {
  background: transparent;
  color: white;
  border: none;
  font-size: 1rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s ease,
              color 0.3s ease,
              transform 0.2s ease;
}
.navBtn.active {
  background: rgba(255,255,255,0.2);
}
.navBtn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
button {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem;
  font-size: 1rem;
  background: var(--card-border);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s ease,
              transform 0.2s ease,
              box-shadow 0.3s ease;
  box-shadow: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.2));
}
button:hover {
  background: var(--button-hover, #00704f);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px var(--shadow-color, rgba(0,0,0,0.3));
}
select {
  margin-left: 0.5rem;
  border-radius: 5px;
  padding: 0.2rem;
}
.page {
  display: none;
}
.page.active {
  display: block;
}
.gain-popup {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  pointer-events: none;
  font-weight: bold;
  font-size: 0.9em;
  color: #3cf;
  transition: opacity 0.4s, transform 0.4s;
  z-index: 10;
  margin-top: 4px;
}
.gain-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
}
.column-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.swaria-box {
  position: relative;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swaria-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swaria-container img {
  width: 300px !important;
  height: 300px !important;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.swaria-speech {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 18px;
  min-width: 120px;
  max-width: 260px;
  background: #fffbe8;
  color: #222;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(120,80,180,0.10);
  padding: 0.8em 1.2em;
  font-size: 1.1em;
  font-weight: 500;
  z-index: 10;
  display: none;
  pointer-events: none;
}
.swaria-speech::after {
  content: '';
  position: absolute;
  left: -18px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #fffbe8;
}
.jadeca-container {
  position: relative;
  display: inline-block;
}
.jadeca-speech {
  position: absolute;
  left: 100%;
  top: 60px;
  margin-left: 18px;
  min-width: 150px;
  max-width: 280px;
  background: linear-gradient(135deg, rgba(80,0,100,0.98), rgba(60,0,80,0.98));
  color: #ff6b9d;
  border-radius: 16px;
  border: 2px solid #8b2bea;
  box-shadow: 0 0 20px rgba(139,43,234,0.8), inset 0 0 15px rgba(185,103,255,0.3);
  padding: 0.8em 1.2em;
  font-size: 1em;
  font-weight: 500;
  z-index: 10;
  display: none;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(255,107,157,0.6);
  animation: hexPulse 2s ease-in-out infinite;
}
.jadeca-speech::after {
  content: '';
  position: absolute;
  left: -18px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid rgba(80,0,100,0.98);
  filter: drop-shadow(-2px 0 2px rgba(139,43,234,0.5));
}
@keyframes hexPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139,43,234,0.8), inset 0 0 15px rgba(185,103,255,0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(185,103,255,0.9), inset 0 0 20px rgba(185,103,255,0.5);
  }
}
.jadeca-poke-speech {
  background: linear-gradient(135deg, rgba(139,0,0,0.98), rgba(80,0,0,0.98)) !important;
  color: #ff0000 !important;
  border: 3px solid #ff0000 !important;
  box-shadow: 0 0 30px rgba(255,0,0,0.9), inset 0 0 25px rgba(255,0,0,0.5), 0 0 50px rgba(139,0,0,0.8) !important;
  text-shadow: 0 0 10px rgba(255,0,0,0.9), 0 0 20px rgba(139,0,0,0.7) !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
  animation: demonicPulse 1s ease-in-out infinite !important;
  letter-spacing: 0.5px;
}
.jadeca-poke-speech::after {
  border-right: 18px solid rgba(139,0,0,0.98) !important;
  filter: drop-shadow(-2px 0 3px rgba(255,0,0,0.7)) !important;
}
@keyframes demonicPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255,0,0,0.9), inset 0 0 25px rgba(255,0,0,0.5), 0 0 50px rgba(139,0,0,0.8);
    text-shadow: 0 0 10px rgba(255,0,0,0.9), 0 0 20px rgba(139,0,0,0.7);
  }
  50% {
    box-shadow: 0 0 40px rgba(255,0,0,1), inset 0 0 30px rgba(255,0,0,0.7), 0 0 70px rgba(139,0,0,1);
    text-shadow: 0 0 15px rgba(255,0,0,1), 0 0 30px rgba(139,0,0,0.9);
  }
}
.card.fullwidth {
  width: 100vw;
  max-width: 1800px;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.element-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 1rem 0;
}
.periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, 64px);
  grid-auto-rows: 64px;
  gap: 8px;
  justify-content: center;
  padding: 2rem;
}
.element-tile {
  width: 64px;
  height: 64px;
  background: #111;
  color: #ccc;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 6px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border: 1px solid #444;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.element-tile.bought {
  background: #2ecc71;
  color: white;
  border: 2px solid white;
}

/* Special styling for element 25 (Oblitarium) - more blue */
.element-tile.element-25 {
  background: #2980b9 !important; /* Same blue but dimmed */
  color: white !important;
  border: 2px solid #1f639a !important;
  opacity: 0.5 !important; /* Dimmed when not bought */
}

.element-tile.element-25.bought {
  background: #2980b9 !important; /* Blue when bought */
  color: white !important;
  border: 2px solid #1f639a !important;
  opacity: 1 !important; /* Full brightness when bought */
}
.element-tile.locked {
  opacity: 0.3;
  cursor: not-allowed;
}
.element-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  height: 100%;
  width: 100%;
}
.element-content .symbol {
  font-size: 1.1rem;
  font-weight: bold;
}
.element-content .name {
  font-size: 0.65rem;
  margin-top: 2px;
}
.element-content .number {
  font-size: 0.55rem;
  color: #aaa;
  position: absolute;
  top: 4px;
  left: 6px;
}
.periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, 64px);  
  grid-auto-rows: 64px;
  gap: 8px;
  justify-content: center;   
  margin: 0 auto;
  padding: 2rem;
}
#knowledge .card.fullwidth {
  width: 100vw;
  padding: 2rem 0;
  height: auto;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center; 
}
#kpGainPreview {
  font-style: italic;
  margin-top: 0.8rem;
  color: #333;
}
.tooltip-box {
  margin-top: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 12px;
  border-radius: 6px;
  display: none;
  position: relative;
  z-index: 10;
}
.element.bought {
  background-color: #00cc66 !important;
  color: black;
}
.element-tooltip {
  position: absolute;
  top: 90px; 
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
}
.bought {
  background-color: rgba(255, 255, 255, 0.3); 
  border: 2px solid gold;
}
#optionsPage {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}
.card {
  width: 250px;
  padding: 16px;
  border-radius: 16px;
}
.generator {
  background: #111;
  padding: 1em;
  margin: 1em 0;
  border-radius: 12px;
  color: white;
}
.progress-container {
  background: #333;
  width: 100%;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--card-border);
  transition: width 0.3s;
}
.sub-tab {
  display: none;
}
.sub-tab.active {
  display: block;
}
#subTabNavBar {
  position: fixed;
  bottom: 55px;
  left: 0;
  width: 100%;
  background: var(--card-border);
  display: flex;
  justify-content: center;
  padding: 6px 0;
  z-index: 10;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
#subTabNav {
  display: flex;
  gap: 1rem;
  background: transparent;
}
#subTabNav button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 50%, black);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease,
              transform 0.2s ease,
              box-shadow 0.3s ease;
}
#subTabNav button:hover {
   background: color-mix(in srgb, var(--card-border) 70%, black);
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#subTabNav button.active {
  background: var(--accent-color);
  color: white;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}
.gain-popup {
  display: inline-block;
  color: #000000; 
  font-weight: 600;
  margin-left: 8px;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none;
  position: relative;
}
.gain-popup.show {
  opacity: 1;
  transform: translateY(-6px);
}
@keyframes popupFade {
  0% { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-20px); }
}
.currency-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#gameContainer {
  transform: scale(0.8); 
  transform-origin: top center;
  background: none !important;
}
@media (max-width: 1200px) {
  #gameContainer {
    transform: scale(0.8);
  }
}
@media (max-width: 768px) {
  .card, .generator, .box-tracker-card, .generator-left-col {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .grid {
    gap: 1rem;
    padding: 1rem;
  }
}
.generator {
  background: #222;
  border: 1px solid #444;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}
.progress-container {
  background: #ddd;
  width: 100%;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.progress-bar {
  background: #00cc00;
  height: 100%;
  width: 0%;
  transition: width 0.2s ease;
}
#generatorMainTab {
  position: relative;
  min-height: 100vh;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
}
.generator-flex-row {
  display: flex;
  flex-direction: row;
  gap: 10rem;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1rem 3rem 1rem;
  box-sizing: border-box;
  overflow-x: auto;
}
.generator-left-col {
  min-width: 0;
  max-width: 340px;
  width: 100%;
  flex: 0 0 340px;
  box-sizing: border-box;
}
.generator-right-col {
  flex: 2 1 0;
  min-width: 0;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  box-sizing: border-box;
}
.generator-right-col .box-tracker-card,
.generator-right-col .generator {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
.generator-row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 2rem;
}
.generator {
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  border-radius: 18px;
  background: rgba(24, 28, 40, 0.92);
  padding: 1.2rem 1rem;
}
.box-tracker-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  border-radius: 18px;
  background: rgba(24, 28, 40, 0.92);
  padding: 1.2rem 1rem;
}
.generator-left-col .swaria-box {
  background: rgba(24, 28, 40, 0.92);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  padding: 1.2rem 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1200px) {
  .generator-flex-row {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0.5rem;
    max-width: 98vw;
  }
  .generator-left-col, .generator-right-col {
    max-width: 100vw;
    width: 100vw;
    flex-basis: 100vw;
  }
}
@media (max-width: 768px) {
  .generator-flex-row {
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0.2rem;
    max-width: 100vw;
  }
  .generator-left-col, .generator-right-col {
    min-width: 100vw;
    max-width: 100vw;
    width: 100vw;
    padding: 0.5rem 0.2rem;
    border-radius: 0;
  }
  .generator-row {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
  }
}
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.cost-info {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #ddd;
  text-align: right;
}
.icon {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-right: 6px;
  image-rendering: auto;
}
.currency-icon, .box-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
}
#knowledgeSubTabBar {
  position: fixed;
  bottom: 55px;
  left: 0;
  width: 100%;
  background: var(--card-border);
  display: flex;
  justify-content: center;
  padding: 0.1rem 0.1rem;
  z-index: 10;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
#knowledgeSubTabNav {
  display: flex;
  gap: 0.8rem;
  background: transparent;
}
#knowledgeSubTabNav button {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 50%, black);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease,
              transform 0.2s ease,
              box-shadow 0.3s ease;
}
#knowledgeSubTabNav button:hover {
  background: color-mix(in srgb, var(--card-border) 70%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#knowledgeSubTabNav button.active {
  background: var(--accent-color);
  color: white;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}
.graduation-card {
  max-width: 820px;
  margin: 0 0 1.2rem 0;
  background: linear-gradient(to bottom right, var(--card-border), var(--card-bg));
  color: white;
  border: 3px solid gold;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.graduation-card {
  padding: 1rem 1.2rem; 
}
.grad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.grad-header h2 {
  font-size: 1.6rem;
  margin: 0;
}
.grad-grade {
  background: var(--card-border);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
}
.grad-button-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.grad-button-row button {
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 12px;
  background: var(--card-border);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.grad-button-row button:hover {
  background: var(--card-border);
}
.milestone-card {
  max-width: 820px;
  margin: 20px auto;
  background: linear-gradient(to bottom right, var(--card-border), var(--card-bg));
  color: white;
  border: 3px solid gold;
  padding: 1.2rem 0.7rem 1.2rem 0.7rem; 
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.milestone-table-wrapper {
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding: 0;
}
.milestone-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: visible;
  table-layout: auto;
  box-sizing: border-box;
  margin: 0;
  border-right: 1.5px solid gold;
  border-bottom: 1.5px solid gold;
}
.milestone-table th,
.milestone-table td {
  border: none;
  border-bottom: 1.5px solid rgba(255, 215, 0, 0.35); 
  padding: 7px 10px;
  font-size: 1.05rem;
}
.milestone-table th {
  background: rgba(255, 255, 255, 0.12);
  color: gold;
  font-family: 'Georgia', serif;
  font-size: 1.15rem;
  font-weight: bold;
  text-align: left;
  border-bottom: 2.5px solid gold;
}
.milestone-table td:first-child {
  text-align: left;
  width: 60px;
  font-weight: bold;
}
.milestone-table td:nth-child(2) {
  text-align: center;
}
.milestone-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.04);
}
.milestone-table tr td:last-child,
.milestone-table tr th:last-child {
  border-right: none;
}
.milestone-table td:last-child {
  text-align: center;
  width: 40px;
  font-size: 1.4rem;
  color: hotpink;
}
.milestone-table td:nth-child(2), .milestone-table th:nth-child(2) {
  min-width: 320px;
  width: 50%;
}
button.glow {
  box-shadow: 0 0 12px 4px gold;
  animation: pulseGlow 1.5s infinite;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 8px 3px gold; }
  50% { box-shadow: 0 0 16px 6px gold; }
  100% { box-shadow: 0 0 8px 3px gold; }
}
#prismSubTab {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.prism-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}
.prism-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#lightGrid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 6px;
  justify-content: center;
  padding: 10px 0;
}
.light-tile {
  width: 40px;
  height: 40px;
  background-color: #111;
  border-radius: 8px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 0 4px #000;
  cursor: pointer;
  opacity: 0.2;
}
.active-prism {
  opacity: 1;
  background-color: #0a1a1a;
  box-shadow: 0 0 4px #00ffff;
}
.active-tile {
  background-color: white;
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8);
  animation: pulse 1.5s infinite ease-in-out;
  position: relative;
  overflow: hidden;
  will-change: box-shadow;
}
.active-tile::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
}
@keyframes pulse {
  0% { 
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.6);
    transform: translateZ(0);
  }
  50% { 
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
    transform: translateZ(0);
  }
  100% { 
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.6);
    transform: translateZ(0);
  }
}

/* Vantablack light tile styling for KitoFox mode */
.vantablack-tile {
  background-color: #000000 !important;
  box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.8) !important;
  animation: vantablackPulse 2s infinite ease-in-out !important;
  border: 2px solid #ff0000 !important;
  position: relative !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.vantablack-tile::before {
  
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 16px !important;
  color: #ff0000 !important;
  text-shadow: 0 0 8px #ff0000 !important;
  animation: dangerWarning 1.5s infinite ease-in-out !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.vantablack-tile::after {

  position: absolute !important;
  top: 0 !important;
  left: -60px !important;
  width: 60px !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.3) 70%, rgba(0, 0, 0, 0.8) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.6 !important;
  animation: vantablackRayPulse 3s infinite ease-in-out !important;
}

@keyframes vantablackPulse {
  0% { 
    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.8);
    border-color: #ff0000;
  }
  25% { 
    box-shadow: 0 0 25px 8px rgba(255, 0, 0, 1);
    border-color: #ff3333;
  }
  50% { 
    box-shadow: 0 0 35px 12px rgba(255, 0, 0, 1.2);
    border-color: #ff0000;
  }
  75% { 
    box-shadow: 0 0 25px 8px rgba(255, 0, 0, 1);
    border-color: #ff3333;
  }
  100% { 
    box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.8);
    border-color: #ff0000;
  }
}

@keyframes dangerWarning {
  0% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes vantablackRayPulse {
  0% { 
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  50% { 
    opacity: 0.6;
    transform: scaleX(1.0);
  }
  100% { 
    opacity: 0.3;
    transform: scaleX(0.8);
  }
}
.prism-bottom-row {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.swaria-character-box {
  width: 240px; 
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#prismCharacterContainer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
}
#prismCharacterContainer img {
  width: 280px !important;
  height: 280px !important;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}
#prismSpeech.swaria-speech {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(18px);
  background: #fff !important;
  color: #111 !important;
  opacity: 1 !important;
  border: 2px solid #e0e0e0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0 4px 16px 2px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.2);
  display: none;
  max-width: 260px;
  z-index: 10;
}
#graduationSwariaSpeech {
  margin-top: 0.5rem;
  background: white;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.graduation-layout {
  background: linear-gradient(135deg, #2d1857 0%, #3a2a6a 100%);
  border-radius: 24px;
  padding: 2rem 1rem;
  box-shadow: 0 8px 32px rgba(44, 19, 84, 0.18);
}
.graduation-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.swaria-character-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 180px; 
  padding: 1rem;
  box-sizing: border-box;
}
.swaria-character-box img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
}
.light-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 1rem;
}
.light-row span {
  display: inline-block;
  min-width: 140px;
}
.light-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}
.prism-top-row.triple {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
  max-width: 1600px;
}
.prism-top-row.triple > div > .card,
.prism-top-row.triple > .card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;
}
.generator-card {
  background: rgba(0,0,0,0.06); 
  border-radius: 10px;
  margin-bottom: 0.7rem;
  padding: 0.7rem 0.5rem;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.generator-card:last-child {
  margin-bottom: 0;
}
.generator-card button {
  width: 100%;
  margin-bottom: 0.4rem;
}
.prism-bg-active .prism-top-row .card {
  position: relative;
  overflow: hidden;
}
.prism-bg-active .prism-top-row .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 55%
  );
  opacity: 0.7;
  transform: translate(var(--shine-x, 0px), var(--shine-y, 0px));
  transition: transform 0.08s ease-out;
}
.prism-bg-active #prismCharacterContainer {
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
}
.generator-card.light {
  background: #ffffff;
  border: 1.5px solid #e0e0e0;
}
.generator-card.redlight {
  background: #ffe7ea;
  border: 1.5px solid #f7b0b7;
}
.generator-card.orangelight {
  background: #fff3e7;
  border: 1.5px solid #f7d1b0;
}
.generator-card.yellowlight {
  background: #fffde7;
  border: 1.5px solid #f7f3b0;
}
.generator-card.greenlight {
  background: #e7fff1;
  border: 1.5px solid #b0f7d1;
}
.generator-card.bluelight {
  background: #e7f6ff;
  border: 1.5px solid #b0d6f7;
}
.generator-card.light button {
  background: #f3f3f3;
  color: #444;
}
.generator-card.redlight button {
  background: #f7b0b7;
  color: #7a2e3a;
}
.generator-card.orangelight button {
  background: #f7d1b0;
  color: #7a4a2e;
}
.generator-card.yellowlight button {
  background: #f7f3b0;
  color: #7a7a2e;
}
.generator-card.greenlight button {
  background: #b0f7d1;
  color: #2e7a4a;
}
.generator-card.bluelight button {
  background: #b0d6f7;
  color: #2e4a7a;
}
.grad-header h2, .milestone-card h3 {
  color: gold;
  font-family: 'Georgia', serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(255,215,0,0.15);
}
.grad-grade {
  background: linear-gradient(90deg, gold 60%, #fffbe7 100%);
  color: #2d1857;
  border: 2px solid gold;
  box-shadow: 0 2px 8px rgba(255,215,0,0.12);
}
.grad-button-row button {
  background: linear-gradient(90deg, gold 60%, #fffbe7 100%);
  color: #2d1857;
  border: 2px solid gold;
  font-family: 'Georgia', serif;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(255,215,0,0.12);
  transition: background 0.2s, color 0.2s;
}
.grad-button-row button:hover {
  background: linear-gradient(90deg, #fffbe7 0%, gold 100%);
  color: #3a2a6a;
}
.milestone-table th, .milestone-table td {
  background: rgba(255,255,255,0.07);
  color: #fffbe7;
  border: 1px solid gold;
}
.milestone-table th {
  color: gold;
  font-family: 'Georgia', serif;
}
#graduationSubTab {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.graduation-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  gap: 2.5rem;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.graduation-layout > .swaria-character-box {
  margin-top: 0;
  align-self: flex-start;
}
.graduation-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}
.graduation-card, .milestone-card {
  max-width: 820px;
  margin: 0 0 1.2rem 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .regal-bg {
    padding: 0.5rem;
  }
  .graduation-layout {
    flex-direction: column;
    align-items: center;
    max-width: 100vw;
    padding: 0;
    gap: 1.2rem;
  }
  .graduation-card, .milestone-card {
    max-width: 98vw;
  }
}
.regal-bg, .regal-bg body, .regal-bg html {
  background: linear-gradient(135deg, #2d1857 0%, #3a2a6a 100%) !important;
  min-height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html.regal-bg, body.regal-bg {
  background: linear-gradient(135deg, #2d1857 0%, #3a2a6a 100%) !important;
  min-height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}
.regal-bg .graduation-layout,
.regal-bg .graduation-card,
.regal-bg .milestone-card {
  background: transparent !important;
}
.grade-up-animation {
  z-index: 2147483646 !important;
}
#bottomNav, #subTabNavBar, #knowledgeSubTabBar {
  z-index: 10001 !important;
  background: var(--card-border) !important;
}
#graduationSubTab .swaria-character-box {
  border: none !important;
  box-shadow: 0 0 0 3px gold, 0 4px 24px 0 rgba(44, 19, 84, 0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  transition: box-shadow 0.3s;
}
.milestone-table td .checkmark, .milestone-table td .milestone-complete, .milestone-table td .milestone-status-yes {
  color: #3ecb3e !important;
  font-size: 1.3em;
}
.milestone-table td:last-child {
  color: #3ecb3e;
}
.grade-up-animation {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(44,19,84,0.10) 0%, rgba(44,19,84,0.85) 70%, rgba(20,10,40,0.98) 100%);
}
.grade-up-animation span {
  font-size: 12rem;
  font-weight: bold;
  color: gold;
  text-shadow: 0 4px 32px #2d1857, 0 0 16px #fffbe7;
  position: absolute;
  opacity: 0;
  transition: none;
}
.grade-up-animation .grade-old {
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  top: 50%;
  opacity: 1;
  animation: gradeOldBounceOut 1s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
.grade-up-animation .grade-new {
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  top: 50%;
  opacity: 0;
  animation: gradeNewBounceIn 1s 0.5s cubic-bezier(.68,-0.55,.27,1.55) forwards;
}
@keyframes gradeOldBounceOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -60%) scale(1.2); }
  60% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-150vw, -50%) scale(0.7); }
}
@keyframes gradeNewBounceIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  80% { transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.milestone-status.milestone-check {
  color: #3ecb3e !important;
}
.milestone-status.milestone-cross {
  color: #ff4b8b !important;
}
.milestone-unlocked {
  background: #3a2566 !important;
}
#infinityResearchSubTab {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #1a0d2e 0%, #2d1b4e 25%, #4a2c7a 50%, #6b3db8 75%, #2d1b4e 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Floating stars animation */
#infinityResearchSubTab::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 200px 90px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 240px 50px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 280px 20px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 320px 100px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(2px 2px at 360px 60px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 60px 120px, rgba(181, 101, 216, 0.8), transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(181, 101, 216, 0.6), transparent),
    radial-gradient(1px 1px at 300px 110px, rgba(181, 101, 216, 0.7), transparent),
    radial-gradient(2px 2px at 180px 140px, rgba(255, 204, 0, 0.5), transparent),
    radial-gradient(1px 1px at 340px 25px, rgba(255, 204, 0, 0.6), transparent),
    radial-gradient(1px 1px at 80px 160px, rgba(255, 204, 0, 0.4), transparent);
  background-repeat: repeat;
  background-size: 400px 180px;
  animation: floatingStars 25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Add a second layer of stars moving in opposite direction */
#infinityResearchSubTab::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 50px 60px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 150px 120px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 250px 40px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 350px 150px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 100px 180px, rgba(181, 101, 216, 0.5), transparent),
    radial-gradient(1px 1px at 220px 80px, rgba(181, 101, 216, 0.4), transparent),
    radial-gradient(1px 1px at 380px 120px, rgba(255, 204, 0, 0.3), transparent);
  background-repeat: repeat;
  background-size: 500px 200px;
  animation: floatingStarsReverse 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes floatingStars {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-400px, -180px); }
}

@keyframes floatingStarsReverse {
  0% { transform: translate(0, 0); }
  100% { transform: translate(500px, 200px); }
}

#infinityResearchSubTab > * {
  position: relative;
  z-index: 2;
}
#infinityResearchSubTab.active {
  display: flex !important;
}
#infinityResearchSubTab .card.fullwidth {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: #ffffff;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 800px;
  padding: 2rem;
  box-sizing: border-box;
}
#infinityResearchSubTab h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
}
#infinityResearchSubTab h3 {
  color: #c0c0ff !important;
  font-family: 'Orbitron', monospace;
}
#infinityResearchSubTab p {
  color: #e0e0ff !important;
  line-height: 1.6;
}
#elementsMain #infinityResearchSubTab,
#graduationSubTab #infinityResearchSubTab,
#knowledgeSubTabs > :not(#infinityResearchSubTab) #infinityResearchSubTab {
  display: none !important;
}
#infinityResearchSubTab {
  display: none !important;
}
#infinityResearchSubTab:not(.active) {
  display: none !important;
}
#infinityResearchSubTab.active {
  display: flex !important;
}
.page.active:not(#knowledge) ~ #infinityResearchSubTab,
#home.active ~ #infinityResearchSubTab,
#achievements.active ~ #infinityResearchSubTab,
#settings.active ~ #infinityResearchSubTab,
#statistics.active ~ #infinityResearchSubTab {
  display: none !important;
}
#knowledge.active ~ #infinityResearchSubTab:not(.active) {
  display: none !important;
}

/* === INFINITY RESEARCH SUB-TAB NAVIGATION === */
#infinityResearchSubTabBar {
  position: relative;
  z-index: 100;
  background: rgba(45, 27, 78, 0.95);
  border-bottom: 3px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 1.5rem;
  margin: -2rem -2rem 2rem -2rem;
  will-change: transform;
  box-shadow: 0 4px 15px rgba(107, 61, 184, 0.3);
}

#infinityResearchSubTabNav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 60px;
  max-width: 100%;
  padding: 0.75rem;
  overflow-x: auto;
}

.infinity-sub-tab-btn {
  background: rgba(74, 44, 122, 0.8);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  padding: 0.8rem 1.4rem;
  border-radius: 20px;
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 10px rgba(106, 61, 184, 0.3);
  letter-spacing: 0.3px;
  position: relative;
  will-change: transform, background-color;
  white-space: nowrap;
  flex-shrink: 1;
  flex-grow: 1;
  max-width: none;
  min-width: 140px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  height: 48px;
}

.infinity-sub-tab-btn:hover {
  background: rgba(107, 61, 184, 0.9);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(106, 61, 184, 0.4);
}

.infinity-sub-tab-btn:active {
  transform: translateY(-1px);
  transition: all 0.1s ease;
}

.infinity-sub-tab-btn.active {
  background: rgba(142, 78, 198, 0.95);
  border-color: rgba(255, 255, 255, 0.8);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(181, 101, 216, 0.6);
  transform: translateY(-1px);
}

.infinity-sub-tab-btn.active::after {
  content: '∞';
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 1.1em;
  color: rgba(255, 255, 255, 0.9);
  animation: infinityPulse 3s ease-in-out infinite;
}

@keyframes infinityPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === INFINITY SUB-TAB CONTENT === */
#infinityResearchSubTabs {
  width: 100%;
  max-width: 1200px;
}

.infinity-sub-tab {
  display: none;
  width: 100%;
}

.infinity-sub-tab.active {
  display: block;
}

.infinity-card {
  background: rgba(45, 27, 78, 0.95);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 25px rgba(107, 61, 184, 0.3);
  position: relative;
  will-change: transform;
  transition: transform 0.2s ease;
}

.infinity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(107, 61, 184, 0.4);
}

.infinity-card h2 {
  color: #ffffff !important;
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  letter-spacing: 3px;
  background: linear-gradient(45deg, #ffffff, #b565d8, #ffffff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: infinityTextGlow 4s ease-in-out infinite;
}

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

.infinity-card h3 {
  color: #e0d0ff !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.infinity-card p {
  color: #f0f0ff !important;
  font-size: 1.1rem;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 2rem;
}

/* === INFINITY TREE CURRENCIES === */
.infinity-tree-currencies {
  margin-bottom: 2rem;
}

.tree-currency-compact {
  padding: 1rem;
  background: rgba(20, 15, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}

.currency-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.currency-display:last-of-type {
  margin-bottom: 1rem;
}

.currency-label {
  color: #f0f0ff;
  font-size: 1rem;
  font-weight: bold;
}

.currency-value {
  color: #ffe066;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 224, 102, 0.3);
}

.currency-rate {
  color: #a0a0ff;
  font-size: 0.9rem;
  font-style: italic;
}

.theorem-progress {
  margin-top: 0.5rem;
}

.progress-info {
  color: #d0d0ff;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  text-align: center;
}

.progress-bar-container {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6b3db8, #9b59d8);
  transition: width 0.3s ease;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(107, 61, 184, 0.5);
}

/* === INFINITY UPGRADE TREE === */
.infinity-upgrade-tree {
  position: relative;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(10, 5, 25, 0.3);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.respec-section {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
}

.respec-button {
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
  min-width: auto;
  white-space: nowrap;
}

.respec-button:hover {
  background: linear-gradient(135deg, #ff6666, #ee2222);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
}

.respec-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
}

.respec-warning {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #ffaaaa;
  font-style: italic;
  max-width: 200px;
  line-height: 1.3;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.respec-section:hover .respec-warning {
  opacity: 1;
}

.tree-tier {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 4rem;
  position: relative;
}

.tree-tier[data-tier="1"] {
  justify-content: center;
}

.tree-tier[data-tier="2"] {
  justify-content: space-around;
}

.tree-tier[data-tier="3"] {
  justify-content: space-between;
}

.tree-tier[data-tier="4"] {
  justify-content: space-around;
}

.tree-tier[data-tier="5"] {
  justify-content: space-between;
  gap: 2rem;
}

.tree-tier[data-tier="6"] {
  justify-content: space-around;
  gap: 4rem;
}

.tree-tier[data-tier="7"] {
  justify-content: space-between;
  gap: 1.5rem;
}

.tree-tier[data-tier="8"] {
  justify-content: space-between;
  gap: 1rem;
}

.tree-tier[data-tier="9"] {
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.tree-tier[data-tier="10"] {
  justify-content: center;
}

.tree-node {
  background: linear-gradient(135deg, rgba(30, 20, 50, 0.9), rgba(50, 30, 70, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem;
  width: 140px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 15px rgba(107, 61, 184, 0.2);
  z-index: 10; /* Ensure buttons appear above connection lines */
}

.tree-node:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(107, 61, 184, 0.4);
}

.tree-node.affordable {
  border-color: #ffe066;
  box-shadow: 0 4px 15px rgba(255, 224, 102, 0.3);
}

.tree-node.affordable:hover {
  box-shadow: 0 6px 20px rgba(255, 224, 102, 0.5);
}

.tree-node.maxed {
  background: linear-gradient(135deg, rgba(0, 100, 0, 0.3), rgba(0, 150, 0, 0.2));
  border-color: #4CAF50;
}

.tree-node.locked {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8), rgba(30, 30, 30, 0.9));
  border-color: #666;
  opacity: 0.6;
  cursor: not-allowed;
}

.tree-node.locked:hover {
  transform: none;
  box-shadow: 0 4px 15px rgba(102, 102, 102, 0.3);
}

.tree-node.locked .node-icon {
  color: #888;
  text-shadow: none;
}

.tree-node.locked .node-title {
  color: #999;
}

.tree-node.locked .cost-value {
  color: #ff6b6b;
  font-weight: bold;
}

.node-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #ffe066;
  text-shadow: 0 0 10px rgba(255, 224, 102, 0.3);
}

.node-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.node-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #f0f0ff;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.node-description {
  font-size: 0.75rem;
  color: #c0c0ff;
  font-style: italic;
  margin-bottom: 0.4rem;
  line-height: 1.1;
  opacity: 0.9;
}

.node-cost {
  font-size: 0.8rem;
  color: #a0a0ff;
  margin-bottom: 0.3rem;
}

.cost-value {
  color: #ffe066;
  font-weight: bold;
}

.node-level {
  font-size: 0.7rem;
  color: #d0d0ff;
}

.level-value {
  color: #ffe066;
  font-weight: bold;
}

/* === TIER SEPARATORS === */
.tier-separator {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 0 2rem;
  position: relative;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107, 61, 184, 0.7), transparent);
}

.tier-info {
  margin: 0 2rem;
  text-align: center;
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.tier-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffe066;
  text-shadow: 0 0 10px rgba(255, 224, 102, 0.4);
  margin-bottom: 0.3rem;
  letter-spacing: 0.5px;
}

.tier-requirement {
  font-size: 0.85rem;
  color: #c0c0ff;
  margin-bottom: 0.3rem;
}

.requirement-progress {
  color: #ff6b6b;
  font-weight: bold;
}

.tier-status {
  font-size: 0.75rem;
  font-weight: bold;
  color: #ff6b6b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-separator[data-unlocked="true"] .tier-status {
  color: #4CAF50;
}

.tier-separator[data-unlocked="true"] .requirement-progress {
  color: #4CAF50;
}

/* Upgrade tree structure - clean layout without connection lines */
.tree-tier {
  position: relative;
}

/* Precise center-to-center connection lines */
.infinity-upgrade-tree {
  position: relative;
}

/* === HIGHER TIER UPGRADE STYLING === */

/* Tier 5 - Specialist upgrades with enhanced glow */
.tree-tier[data-tier="5"] .tree-node {
  background: linear-gradient(135deg, rgba(50, 30, 80, 0.9), rgba(80, 40, 120, 0.7));
  border: 2px solid rgba(255, 100, 255, 0.3);
  box-shadow: 0 6px 20px rgba(255, 100, 255, 0.2);
}

.tree-tier[data-tier="5"] .tree-node:hover {
  border-color: rgba(255, 100, 255, 0.6);
  box-shadow: 0 8px 25px rgba(255, 100, 255, 0.4);
  transform: translateY(-3px);
}

.tree-tier[data-tier="5"] .node-icon {
  color: #ff64ff;
  text-shadow: 0 0 15px rgba(255, 100, 255, 0.5);
}

/* Tier 6 - Master upgrades with golden glow */
.tree-tier[data-tier="6"] .tree-node {
  background: linear-gradient(135deg, rgba(80, 60, 30, 0.9), rgba(120, 90, 40, 0.7));
  border: 3px solid rgba(255, 215, 0, 0.4);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
  width: 160px;
  height: 160px;
}

.tree-tier[data-tier="6"] .tree-node:hover {
  border-color: rgba(255, 215, 0, 0.7);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
  transform: translateY(-4px);
}

.tree-tier[data-tier="6"] .node-icon {
  color: #ffd700;
  font-size: 2.5rem;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.tree-tier[data-tier="6"] .node-title {
  font-size: 1rem;
}

/* Tier 7 - Legendary upgrades with rainbow glow */
.tree-tier[data-tier="7"] .tree-node {
  background: linear-gradient(135deg, 
    rgba(100, 20, 100, 0.9), 
    rgba(20, 100, 100, 0.8),
    rgba(100, 100, 20, 0.9));
  background-size: 300% 300%;
  animation: legendaryShimmer 3s ease-in-out infinite;
  border: 4px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4);
  width: 180px;
  height: 180px;
}

.tree-tier[data-tier="7"] .tree-node:hover {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.6);
  transform: translateY(-5px);
}

.tree-tier[data-tier="7"] .node-icon {
  color: #ffffff;
  font-size: 3rem;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
  animation: legendaryIconPulse 2s ease-in-out infinite;
}

.tree-tier[data-tier="7"] .node-title {
  font-size: 1.1rem;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tree-tier[data-tier="7"] .node-cost {
  color: #ffff80;
}

.tree-tier[data-tier="7"] .cost-value {
  color: #ffff40;
  text-shadow: 0 0 8px rgba(255, 255, 64, 0.6);
}

/* Animations for legendary tier */
@keyframes legendaryShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes legendaryIconPulse {
  0% { 
    transform: scale(1);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
  }
  50% { 
    transform: scale(1.1);
    text-shadow: 0 0 35px rgba(255, 255, 255, 1);
  }
  100% { 
    transform: scale(1);
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
  }
}

/* === TIER 8 - PRIMORDIAL UPGRADES === */
.tree-tier[data-tier="8"] .tree-node {
  background: linear-gradient(135deg, 
    rgba(20, 0, 40, 0.95), 
    rgba(60, 0, 120, 0.9),
    rgba(100, 0, 200, 0.85));
  background-size: 400% 400%;
  animation: primordialFlow 4s ease-in-out infinite;
  border: 5px solid rgba(150, 50, 255, 0.7);
  box-shadow: 0 12px 40px rgba(150, 50, 255, 0.5);
  width: 200px;
  height: 200px;
}

.tree-tier[data-tier="8"] .tree-node:hover {
  border-color: rgba(200, 100, 255, 0.9);
  box-shadow: 0 15px 50px rgba(150, 50, 255, 0.8);
  transform: translateY(-6px);
}

.tree-tier[data-tier="8"] .node-icon {
  color: #9f50ff;
  font-size: 3.5rem;
  text-shadow: 0 0 30px rgba(159, 80, 255, 0.9);
}

.tree-tier[data-tier="8"] .node-title {
  font-size: 1.2rem;
  color: #e0c0ff;
  text-shadow: 0 0 15px rgba(224, 192, 255, 0.6);
}

.tree-tier[data-tier="8"] .node-cost {
  color: #c090ff;
}

.tree-tier[data-tier="8"] .cost-value {
  color: #ff90ff;
  text-shadow: 0 0 10px rgba(255, 144, 255, 0.7);
}

/* === TIER 9 - OMNIVERSAL UPGRADES === */
.tree-tier[data-tier="9"] .tree-node {
  background: linear-gradient(135deg, 
    rgba(40, 20, 0, 0.95), 
    rgba(80, 40, 20, 0.9),
    rgba(120, 60, 30, 0.85),
    rgba(160, 80, 40, 0.9));
  border: 6px solid rgba(255, 140, 0, 0.8);
  box-shadow: 0 15px 50px rgba(255, 140, 0, 0.6);
  width: 160px;
  height: 160px;
  position: relative;
}

.tree-tier[data-tier="9"] .tree-node:hover {
  border-color: rgba(255, 180, 50, 1);
  box-shadow: 0 20px 60px rgba(255, 140, 0, 0.9);
  transform: translateY(-8px);
}

.tree-tier[data-tier="9"] .node-icon {
  color: #ffd700;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 0 0 40px rgba(255, 215, 0, 1);
}

.tree-tier[data-tier="9"] .node-title {
  font-size: 1rem;
  color: #fff0a0;
  text-shadow: 0 0 20px rgba(255, 240, 160, 0.8);
  font-weight: bold;
}

.tree-tier[data-tier="9"] .node-cost {
  color: #ffdd60;
}

.tree-tier[data-tier="9"] .cost-value {
  color: #ffaa00;
  text-shadow: 0 0 15px rgba(255, 170, 0, 0.9);
}

/* === TIER 10 - GODHOOD === */
.tree-tier[data-tier="10"] .tree-node {
  background: linear-gradient(135deg, 
    rgba(80, 60, 120, 0.9), 
    rgba(100, 80, 140, 0.8),
    rgba(70, 50, 110, 0.9));
  border: 3px solid rgba(150, 120, 200, 0.6);
  box-shadow: 0 8px 25px rgba(120, 100, 160, 0.4),
              inset 0 0 20px rgba(100, 80, 140, 0.3);
  width: 180px;
  height: 180px;
  position: relative;
  overflow: hidden;
}

.tree-tier[data-tier="10"] .tree-node:hover {
  border-color: rgba(170, 140, 220, 0.8);
  box-shadow: 0 10px 30px rgba(140, 120, 180, 0.5),
              inset 0 0 25px rgba(120, 100, 160, 0.4);
  transform: translateY(-5px) scale(1.02);
}

.tree-tier[data-tier="10"] .node-icon {
  color: #c8a2c8;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(200, 160, 200, 0.5);
}

.tree-tier[data-tier="10"] .node-title {
  font-size: 1.1rem;
  color: #e0c0e0;
  text-shadow: 0 0 8px rgba(220, 180, 220, 0.4);
  font-weight: 700;
  letter-spacing: 1px;
}

.tree-tier[data-tier="10"] .node-cost {
  color: #d0b0d0;
  font-weight: bold;
}

.tree-tier[data-tier="10"] .cost-value {
  color: #c8a2c8;
  text-shadow: 0 0 5px rgba(200, 160, 200, 0.4);
  font-size: 1.1em;
}

/* Animations for new tiers */
@keyframes primordialFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 75%; }
  50% { background-position: 50% 100%; }
  75% { background-position: 25% 25%; }
  100% { background-position: 0% 50%; }
}

@keyframes omniversalChaos {
  0% { background-position: 0% 0%; }
  20% { background-position: 100% 100%; }
  40% { background-position: 0% 100%; }
  60% { background-position: 100% 0%; }
  80% { background-position: 50% 50%; }
  100% { background-position: 0% 0%; }
}

@keyframes omniversalBorder {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 300%; }
}

@keyframes omniversalIconFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(90deg); }
  50% { transform: translateY(0px) rotate(180deg); }
  75% { transform: translateY(-5px) rotate(270deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

/* === INFINITY RESEARCH GRID === */
.infinity-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.infinity-research-item {
  background: rgba(30, 20, 50, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  will-change: transform;
  box-shadow: 0 4px 15px rgba(107, 61, 184, 0.2);
}

.infinity-research-item::before {
  content: '∞';
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Orbitron', monospace;
  transition: color 0.2s ease;
}

.infinity-research-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(107, 61, 184, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(45, 30, 70, 0.95);
}

.infinity-research-item:hover::before {
  color: rgba(181, 101, 216, 0.8);
}

.infinity-research-item.locked {
  opacity: 0.6;
  background: rgba(20, 15, 35, 0.9);
}

.infinity-research-item.locked:hover {
  transform: translateY(-2px);
  opacity: 0.7;
}

.infinity-research-item h3 {
  color: #ffffff !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.infinity-research-item p {
  color: #d0d0ff !important;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  text-align: left;
}

.infinity-cost {
  color: #ffcc00 !important;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.infinity-btn {
  background: #6b3db8;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 0.7rem 1.5rem;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  will-change: transform, background-color;
  box-shadow: 0 3px 10px rgba(107, 61, 184, 0.3);
  position: relative;
}

.infinity-btn:hover:not(:disabled) {
  background: #8e4ec6;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(107, 61, 184, 0.4);
  border-color: rgba(255, 255, 255, 0.6);
}

.infinity-btn:active:not(:disabled) {
  transform: translateY(-1px);
  transition: all 0.1s ease;
}

.infinity-btn:disabled {
  background: #555;
  color: #999;
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

/* === INFINITY CHALLENGE STYLES === */
.infinity-challenge-info {
  text-align: center;
  margin: 2rem 0;
}

.challenge-progress {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.progress-item {
  background: rgba(30, 20, 50, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  padding: 1rem 1.5rem;
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.infinity-symbol {
  color: #ffcc00;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.progress-count {
  color: #b565d8;
  font-weight: bold;
}

.challenge-reward {
  background: rgba(107, 61, 184, 0.4);
  border: 2px solid rgba(255, 204, 0, 0.5);
  border-radius: 15px;
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}

.challenge-reward h4 {
  color: #ffcc00 !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.3rem;
  margin: 0;
  text-shadow: 0 0 15px rgba(255, 204, 0, 0.7);
}

.infinity-challenge-btn {
  background: #ff6600;
  color: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 15px;
  padding: 1rem 3rem;
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 20px rgba(255, 102, 0, 0.4);
  letter-spacing: 1px;
  will-change: transform, background-color;
}

.infinity-challenge-btn:hover {
  background: #ff8533;
  transform: translateY(-2px);
  box-shadow: 0 7px 25px rgba(255, 102, 0, 0.5);
}

.challenge-description {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(255, 102, 0, 0.2);
  border: 2px solid rgba(255, 102, 0, 0.3);
  border-radius: 10px;
}

.challenge-description p {
  color: #ffcc99 !important;
  font-style: italic;
  margin: 0;
}

/* Media query for smaller screens */
@media (max-width: 1200px) {
  #infinityResearchSubTabNav {
    gap: 0.8rem;
  }
  
  .infinity-sub-tab-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    min-width: 130px;
    height: 44px;
  }
}

@media (max-width: 900px) {
  #infinityResearchSubTabNav {
    flex-wrap: nowrap;
    gap: 0.6rem;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  
  .infinity-sub-tab-btn {
    min-width: 120px;
    font-size: 0.8rem;
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    height: 40px;
  }
}

@media (max-width: 600px) {
  #infinityResearchSubTabNav {
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
  }
  
  .infinity-sub-tab-btn {
    min-width: 100px;
    padding: 0.5rem 0.8rem;
    font-size: 0.75rem;
    flex-shrink: 0;
    height: 36px;
    font-size: 0.75rem;
  }
}

/* === INFINITY MAIN LAYOUT === */
.infinity-main-layout {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
}

.infinity-benefits-card,
.infinity-research-card {
  background: rgba(45, 27, 78, 0.95);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 25px rgba(107, 61, 184, 0.3);
  position: relative;
  will-change: transform;
  transition: transform 0.2s ease;
}

.infinity-benefits-card {
  flex: 0.6;
  padding: 1.2rem;
}

.infinity-research-card {
  flex: 1;
}

.infinity-benefits-card:hover,
.infinity-research-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(107, 61, 184, 0.4);
}

/* === INFINITY RESEARCH NAVIGATION === */
.research-nav-buttons {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.research-nav-buttons .infinity-sub-tab-btn {
  flex: 1;
  min-width: auto;
  max-width: none;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* === INFINITY CHALLENGE STYLES === */
.infinity-challenge-container {
  display: flex;
  gap: 20px;
  height: 100%;
}

/* Left panel - Challenge buttons */
.challenge-buttons-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.challenge-warning {
  color: #ffaa44;
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 10px;
  font-style: italic;
}

.challenge-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.infinity-challenge-button {
  width: 80px;
  height: 60px;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  border: 2px solid #8a2be2;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Orbitron', monospace;
}

.infinity-challenge-button:not(.locked):not(.active) {
  background: linear-gradient(135deg, #4a2c2a, #8b4513);
}

.infinity-challenge-button.active {
  background: linear-gradient(135deg, #ff6600, #ff9933);
  border-color: #ffaa44;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.5);
}

.infinity-challenge-button.locked {
  background: linear-gradient(135deg, #333, #555);
  border-color: #666;
  color: #999;
  cursor: not-allowed;
}

.infinity-challenge-button:not(.locked):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
}

/* Challenge Grid Layout */
.challenge-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.challenge-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.challenge-row .challenge-button-container {
  flex: 0 0 auto;
}

/* Visibility transitions for hidden challenges */
.challenge-button-container {
  transition: visibility 0.3s ease, opacity 0.3s ease;
}

.challenge-button-container[style*="visibility: hidden"] {
  opacity: 0;
}

.challenge-completion {
  font-size: 0.9em;
  color: #ccc;
  font-family: 'Orbitron', monospace;
}

/* Right panel - Challenge description */
.challenge-description-panel {
  flex: 2;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.challenge-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.challenge-details h3 {
  color: #ffaa44;
  font-size: 1.4em;
  margin: 0;
  text-align: center;
  font-family: 'Orbitron', monospace;
}

.challenge-details p {
  color: #fff;
  font-size: 1.1em;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

.challenge-requirement {
  background: rgba(138, 43, 226, 0.2);
  border: 1px solid #8a2be2;
  border-radius: 8px;
  padding: 10px;
  color: #ddd;
  text-align: center;
  font-size: 1em;
}

.start-challenge-button {
  background: linear-gradient(135deg, #ff6600, #ff9933);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Orbitron', monospace;
  margin: 10px 0;
}

.start-challenge-button:hover {
  background: linear-gradient(135deg, #ff7700, #ffaa44);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
}

.challenge-reward {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid #ffd700;
  border-radius: 8px;
  padding: 10px;
  color: #ffd700;
  text-align: center;
  font-size: 0.95em;
  margin-top: auto;
}
.infinity-research-content {
  display: none;
}

.infinity-research-content.active {
  display: block;
}

.infinity-currencies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

/* Terrarium single row layout */
.infinity-currencies-grid.terrarium-single-row {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  max-width: 750px;
}

/* Lab 2x3 grid layout */
.infinity-currencies-grid.lab-2x3-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  max-width: 750px;
}

.infinity-currency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(45, 27, 78, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  transition: all 0.2s ease;
  position: relative;
}

.infinity-currency-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(107, 61, 184, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

.discovery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: all;
  z-index: 10;
}

.discovery-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.discovery-text {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}

.infinity-currency-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 0.8rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.nerf-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.nerf-label {
  color: #b565d8;
  font-family: 'Orbitron', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.nerf-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.infinity-count {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(100, 149, 237, 0.8);
  background: linear-gradient(45deg, #6495ed, #8a2be2, #4169e1);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

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

.nerf-value {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.infinity-cap-btn {
  background: rgba(220, 53, 69, 0.8);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-family: 'Orbitron', monospace;
  font-size: 0.7rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
  min-width: 80px;
}

.infinity-cap-btn:hover {
  background: rgba(220, 53, 69, 0.9);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

.infinity-cap-btn.capped {
  background: rgba(40, 167, 69, 0.8);
  box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}

.infinity-cap-btn.capped:hover {
  background: rgba(40, 167, 69, 0.9);
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.empty-slot {
  opacity: 0.3;
  pointer-events: none;
}

.empty-slot-text {
  color: #888;
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

/* === INFINITY BENEFITS CARD === */
.benefits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.benefits-header h3 {
  color: #ffffff !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.5rem;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.total-infinity-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.infinity-total-label {
  color: #b565d8;
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  font-weight: bold;
}

.infinity-total-value {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  background: linear-gradient(45deg, #ffffff, #b565d8, #ffffff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: infinityTextGlow 4s ease-in-out infinite;
}

.benefits-content {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}

/* === VERTICAL PROGRESS BAR === */
.infinity-progress-container {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  height: 320px;
}

.progress-bar-labels {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  height: 100%;
  padding: 10px 0;
}

.progress-milestone {
  display: flex;
  align-items: center;
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}

.progress-milestone::after {
  content: '';
  width: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  margin-left: 0.5rem;
}

.progress-milestone.reached {
  color: #00d4ff;
  font-weight: bold;
}

.progress-milestone.reached::after {
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

.vertical-progress-bar {
  width: 20px;
  height: 100%;
  position: relative;
}

.progress-bar-background {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(45, 27, 78, 0.6) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(0deg, 
    rgba(0, 200, 255, 0.9) 0%, 
    rgba(100, 220, 255, 0.8) 25%, 
    rgba(0, 180, 255, 0.7) 50%, 
    rgba(0, 160, 255, 0.8) 75%, 
    rgba(0, 140, 255, 0.9) 100%);
  border-radius: 8px;
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 0 15px rgba(0, 212, 255, 0.6),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 40%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0.4) 60%, 
    transparent 100%);
  animation: progressShimmer 3s ease-in-out infinite;
  border-radius: 8px;
}

.progress-bar-shimmer {
  display: none;
}

@keyframes progressShimmer {
  0% { transform: translateY(100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* === PERMANENT BUFFS === */
.permanent-buffs {
  flex: 1;
  max-width: 350px;
}

.permanent-buffs h4 {
  color: #ffffff !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.buffs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buff-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(30, 20, 50, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.buff-item::before {
  content: '∞';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Orbitron', monospace;
}

.buff-item.unlocked {
  background: rgba(0, 150, 50, 0.3);
  border-color: rgba(0, 255, 100, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 100, 0.2);
}

.buff-item.unlocked::before {
  color: rgba(0, 255, 100, 0.6);
}

.buff-item.locked {
  opacity: 0.6;
}

.buff-requirement {
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  font-size: 1rem;
  color: #ffcc00;
  min-width: 40px;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

.buff-description {
  flex: 1;
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
}

.buff-item.unlocked .buff-description {
  color: #e0ffe0;
}

.buff-item.locked .buff-description {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.buff-item.locked .buff-description::before {
  content: '???';
  font-style: normal;
}

.buff-item.unlocked .buff-description::before {
  content: none;
}

.buff-status {
  font-size: 1.2rem;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

.buff-item.unlocked .buff-status {
  color: #00ff64;
  text-shadow: 0 0 8px rgba(0, 255, 100, 0.6);
}

.buff-item.locked .buff-status {
  color: #ff6464;
  opacity: 0.7;
}

/* === INFINITY RESET TAB === */
.currencies-with-infinity {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(74, 44, 122, 0.3);
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.currencies-with-infinity h4 {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.infinity-currency-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem;
  margin: 0.4rem 0;
  background: rgba(45, 27, 78, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.infinity-currency-item:hover {
  background: rgba(45, 27, 78, 0.7);
}

.currency-name {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  text-transform: capitalize;
}

.currency-infinity-count {
  color: #b565d8;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(181, 101, 216, 0.5);
}

.no-infinity-message {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 1rem;
  font-family: 'Orbitron', monospace;
}

.reset-stats {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(45, 27, 78, 0.4);
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(74, 44, 122, 0.3);
  border-radius: 8px;
}

.stat-label {
  color: #d0d0ff;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
}

.stat-value {
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.infinity-reset-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(45deg, #4ecdc4, #45b7d1);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
  margin-top: 1rem;
}

.infinity-reset-btn:hover:not(:disabled) {
  background: linear-gradient(45deg, #45b7d1, #4ecdc4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
}

.infinity-reset-btn:active:not(:disabled) {
  transform: translateY(-1px);
}

.infinity-reset-btn:disabled {
  background: linear-gradient(45deg, #666, #555);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

.reset-description {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(45, 27, 78, 0.3);
  border-radius: 12px;
  border-left: 4px solid #b565d8;
}

.reset-description p {
  color: #d0d0ff !important;
  margin: 0.5rem 0;
  line-height: 1.4;
}

.reset-description strong {
  color: #ffffff;
  font-weight: bold;
}

.reset-description ul {
  color: #d0d0ff;
  margin: 0.8rem 0;
  padding-left: 1.5rem;
}

.reset-description li {
  margin: 0.3rem 0;
  line-height: 1.3;
}

/* === INFINITY RESEARCH CARD (RIGHT) === */
.infinity-research-card h3 {
  color: #ffffff !important;
  font-family: 'Orbitron', monospace;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.infinity-research-card p {
  color: #d0d0ff !important;
  text-align: center;
  margin-bottom: 2rem;
}

.research-placeholder {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 15px;
}

.research-placeholder p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic;
  font-size: 1.1rem;
}

/* Responsive design for two-card layout */
@media (max-width: 1200px) {
  .infinity-main-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .benefits-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .infinity-progress-container {
    height: 300px;
    align-self: center;
  }
}
#elementsMain.card.fullwidth,
#elementsMain .card.fullwidth {
  background: linear-gradient(135deg, #3a2566 0%, #4b2e83 100%);
  border: none;
  color: #fffbe7;
  box-shadow: 0 0 20px rgba(44,19,84,0.18);
}
.periodic-grid {
  background: rgba(60, 30, 100, 0.7);
  border-radius: 18px;
  padding: 2rem;
  margin: 0 auto;
}
.element-tile {
  background: #22204a;
  color: #fffbe7;
  border: 2px solid #4b2e83;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}
.element-tile.bought {
  background: #5a3fa6;
  color: #fff;
  border: 2px solid #7c5fd6;
}
.element-tile:hover {
  background: #3a2566;
  color: #fffbe7;
}
#elementsMain button,
#elementsMain .burple-btn {
  background: linear-gradient(90deg, #4b2e83 60%, #5a3fa6 100%);
  color: #fffbe7;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  box-shadow: 0 2px 8px rgba(44,19,84,0.12);
  transition: background 0.2s, color 0.2s;
}
#elementsMain button:hover,
#elementsMain .burple-btn:hover {
  background: linear-gradient(90deg, #5a3fa6 0%, #4b2e83 100%);
  color: #fff;
}
#elementsMain,
#elementsMain * {
  border-color: #4b2e83 !important;
  color: #fffbe7 !important;
}
#elementsMain h2 {
  color: #bfaaff;
  font-family: 'Georgia', serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(44,19,84,0.15);
}
#generatorMainTab .card.fullwidth {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#generatorMainTab::before {
  display: none !important;
}
body.generator-bg, html.generator-bg {
  background: linear-gradient(135deg, #181c24 0%, #23283a 100%) !important;
}
body.generator-bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  opacity: 0.12;
  pointer-events: none;
  background-size: 60px 120px;
}
#generatorContainer .generator {
  width: 320px;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 0 8px 0;
  font-size: 0.95rem;
  margin-left: 0;
  margin-right: 0;
  background: linear-gradient(120deg, #23272b 80%, #232b33 100%);
  border: 1.5px solid #33eaff;
  border-radius: 16px;
  box-shadow: 0 4px 16px #000a, 0 0 0 2px #2228 inset;
  margin-bottom: 28px;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  color: #eaffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#generatorContainer .generator::before, #generatorContainer .generator::after {
  display: none;
}
.ceiling-light {
  display: none !important;
}
body.global-darkness {
  position: relative;
}

/* Exempt prism lab from darkness effect - prism lab has its own light source */
body.global-darkness #prismSubTab {
  position: relative;
  z-index: 1002; /* Above the darkness overlay */
}

body.global-darkness::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 1001;
  background: radial-gradient(
    circle 220px at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 80px,
    rgba(0,0,0,0.85) 180px,
    rgba(0,0,0,0.97) 100%
  );
  transition: background 0.1s, opacity 0.3s;
  opacity: var(--darkness-opacity, 1);
}
[data-theme="dark"] body.global-darkness::before {
  background: radial-gradient(
    circle 750px at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
    rgba(0,0,0,0.25) 400px,
    rgba(0,0,0,0.90) 750px,
    rgba(0,0,0,0.99) 100%
  );
  z-index: 1001;
  opacity: var(--darkness-opacity, 1);
}

/* Exempt prism lab from dark theme darkness effect too */
[data-theme="dark"] body.global-darkness #prismSubTab {
  position: relative;
  z-index: 1002; /* Above the darkness overlay */
}

[data-theme="dark"] body.global-darkness::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(
    circle 40px at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.05) 20px,
    rgba(255,255,255,0) 40px
  );
  transition: background 0.1s;
}
#generatorMainTab.generator-darkness {
  position: relative;
}
#generatorMainTab.generator-darkness::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(
    circle 220px at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 80px,
    rgba(0,0,0,0.85) 180px,
    rgba(0,0,0,0.97) 100%
  );
  transition: background 0.1s;
}
#generatorContainer .generator h3 {
  font-size: 1.1rem;
  margin: 0 0 0.3rem 0;
}
#generatorContainer .generator button,
.upgrade-btn {
  font-size: 0.95rem;
  padding: 0.5rem 0.8rem;
  margin-top: 0.5rem;
}
#generatorContainer .generator .progress-container {
  height: 22px;
  margin: 0.7rem 0;
}
@media (min-width: 900px) {
  #generatorContainer {
    max-width: 900px;
    margin: 0 auto;
  }
  #generatorMainTab .card.fullwidth {
    max-width: 900px;
    padding: 20px 10px 10px 10px;
  }
  #generatorContainer .generator {
    max-width: none;
  }
}
.generator-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.box-tracker-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  max-width: 140px;
  background: #23272b;
  border: 2px solid #33eaff;
  border-radius: 14px;
  color: #eaffff;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px #000a;
  margin: 0;
  padding: 10px 0;
}
.box-tracker-title {
  font-size: 1.05rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #33eaff;
  letter-spacing: 0.5px;
}
.box-tracker-count {
  font-size: 1.4rem;
  font-weight: bold;
  color: #eaffff;
}
@media (max-width: 900px) {
  .generator-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
  }
  .generator, .box-tracker-card {
    min-width: 90vw;
    max-width: 98vw;
    width: 100%;
    margin: 0 auto;
  }
  .generator-right-col {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    padding: 0;
  }
}
.generator-upgrades {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--card-border);
}
.generator-upgrades h3 {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 1.2rem;
}
.generator-upgrades p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text);
}
.upgrade-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.upgrade-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem;
  background: var(--card-border);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 120px;
  transition: background-color 0.2s ease;
}
.upgrade-btn:hover {
  background: #00704f;
}
.upgrade-btn:disabled {
  background: #666;
  cursor: not-allowed;
  opacity: 0.6;
}
.upgrade-btn .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 0.3rem;
}
.upgrade-btn small {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 0.2rem;
}
@media (max-width: 768px) {
  .upgrade-buttons {
    flex-direction: column;
    align-items: center;
  }
  .upgrade-btn {
    width: 100%;
    max-width: 200px;
  }
}
@keyframes shimmer {
  0% { background-position: 0 0; }
  100% { background-position: 5000px 0; }
}
.progress-bar.fast {
  background: linear-gradient(90deg, #00cc00 40%, #eaffcc 60%, #00cc00 100%);
  background-size: 5000px 100%;
  animation: shimmer 60s linear infinite;
}
.generator-flex-row {
  display: flex;
  flex-direction: row;
  gap: 10rem;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1rem 3rem 1rem;
  box-sizing: border-box;
}
.generator-left-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  flex: 0 0 600px;
  max-width: 600px;
  box-sizing: border-box;
}
.generator-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  flex: 1 1 0;
  width: 100%;
}
.generator-right-col .generator,
.generator-right-col .box-tracker-card {
  width: 100%;
  max-width: none;
}
.generator-flex-row::before {
  display: none;
}
.power-generator {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #00d4ff;
  color: #eaffff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
.power-status-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}
.power-status {
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  text-transform: uppercase;
}
.power-status.online {
  background: #00cc00;
  color: white;
}
.power-status.offline {
  background: #cc0000;
  color: white;
}
.power-status.recharging {
  background: #ffaa00;
  color: white;
}
.power-energy {
  font-size: 1rem;
  color: #eaffff;
}
.power-progress-container {
  margin: 1rem 0;
}
.power-progress-bar {
  width: 100%;
  height: 20px;
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #00d4ff;
}
.power-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%);
  transition: width 0.3s ease;
  border-radius: 10px;
}
.power-info {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #aaa;
  text-align: center;
}
.power-minigame-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.power-minigame {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 3px solid #00d4ff;
  border-radius: 20px;
  padding: 2rem;
  color: #eaffff;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}
.power-minigame h2 {
  color: #00d4ff;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.power-minigame p {
  margin-bottom: 1.5rem;
  color: #ccc;
}
.minigame-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 1.5rem 0;
  justify-content: center;
}
.minigame-cell {
  width: 60px;
  height: 60px;
  background: #333;
  border: 2px solid #555;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gentler transition for KitoFox mode flickering */
.minigame-cell.kitofox-flicker {
  transition: background 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.minigame-cell:hover {
  background: #444;
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.minigame-cell.charged {
  background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
  border-color: #fff;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
  animation: pulse 1s infinite;
}
.minigame-progress {
  margin: 1.5rem 0;
}
.minigame-progress .progress-bar {
  width: 100%;
  height: 20px;
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.minigame-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%);
  transition: width 0.3s ease;
  border-radius: 10px;
}
.cancel-btn {
  background: #cc0000;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}
.cancel-btn:hover {
  background: #ff0000;
}
.power-offline-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #cc0000 0%, #ff0000 100%);
  color: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  z-index: 999;
  box-shadow: 0 0 30px rgba(204, 0, 0, 0.8);
  animation: shake 0.5s ease-in-out;
}
.power-online-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #00cc00 0%, #00ff88 100%);
  color: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  z-index: 999;
  box-shadow: 0 0 30px rgba(0, 204, 0, 0.8);
  animation: bounce 0.5s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-52%, -50%); }
  75% { transform: translate(-48%, -50%); }
}
@keyframes bounce {
  0% { transform: translate(-50%, -50%) scale(0.8); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.upgrade-btn {
  background: linear-gradient(135deg, #4b2e83 0%, #5a3fa6 100%);
  color: #eaffff;
  border: 2px solid #7c5fd6;
  border-radius: 12px;
  padding: 0.8rem;
  margin-top: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.upgrade-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a3fa6 0%, #4b2e83 100%);
  box-shadow: 0 0 15px rgba(124, 95, 214, 0.5);
  transform: translateY(-2px);
}
.upgrade-btn:disabled {
  background: #666;
  border-color: #888;
  color: #aaa;
  cursor: not-allowed;
  transform: none;
}
.upgrade-btn .icon {
  width: 24px;
  height: 24px;
  margin: 0;
}
.upgrade-btn small {
  font-size: 0.8rem;
  opacity: 0.9;
}
@media (max-width: 1200px) {
  .generator-flex-row {
    flex-direction: column;
    align-items: center;
  }
  .generator-left-col,
  .generator-right-col {
    min-width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .generator-row {
    flex-direction: column;
    gap: 1rem;
  }
  .box-tracker-card {
    min-width: 100%;
    max-width: 100%;
  }
  .minigame-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .minigame-cell {
    width: 50px;
    height: 50px;
  }
}
body,
html,
#root,
#generatorMainTab * {
  border: none !important;
  outline: none !important;
}
.generator, .box-tracker-card {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.generator-left-col {
  min-width: 0;
  max-width: 340px;
  width: 100%;
  flex: 0 0 340px;
  box-sizing: border-box;
}
.minigame-cell.red {
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
  border-color: #ff4444;
  box-shadow: 0 0 8px #ff444444;
}
.minigame-cell.green {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  border-color: #2ecc71;
  box-shadow: 0 0 8px #2ecc7144;
}
.minigame-cell.cleared {
  background: #444 !important;
  border-color: #888 !important;
  box-shadow: none !important;
  opacity: 0.5;
  pointer-events: none;
}
.minigame-cell.red.cleared {
  background: #444;
  border-color: #888;
  box-shadow: none;
  opacity: 0.5;
  pointer-events: none;
}
#powerEnergyStatus {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 2000;
  background: linear-gradient(135deg, #2e2600 60%, #4e3e00 100%);
  color: #fffbe7;
  border: 2.5px solid #ffe066;
  border-radius: 14px;
  padding: 10px 28px;
  font-size: 1.15rem;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  box-shadow: 0 2px 12px rgba(255,224,102,0.18);
  display: none;
  pointer-events: none;
  user-select: none;
  font-weight: bold;
  letter-spacing: 0.5px;
}
#powerEnergyStatus .energy {
  font-weight: bold;
  color: #ffe066;
  font-size: 1.25em;
  letter-spacing: 0.5px;
}
#blackoutOverlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #000 !important;
  opacity: 1;
  z-index: 2147483647;
  pointer-events: all;
  transition: opacity 0.2s;
  display: none;
}
#blackoutOverlay.active {
  display: block;
}

/* Sleep animation: center digital clock on screen */
.sleep-center {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483648 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

#dimOverlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #000 !important;
  opacity: var(--dim-opacity, 0.5);
  z-index: 2147483646;
  pointer-events: none;
  transition: opacity 0.2s;
  display: none;
}
#dimOverlay.active {
  display: block;
}
#saveSlotModal.active ~ #blackoutOverlay,
#saveSlotModal.active ~ #dimOverlay {
  display: none !important;
}
.regal-bg .swaria-speech {
  background: #fff !important;
  color: #111 !important;
  opacity: 1 !important;
  border: 2px solid #e0e0e0;
  box-shadow: 0 4px 16px 2px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.2);
}
#settings .save-slots-group {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1em 0.5em;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.save-slot-row {
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.5em;
}
.save-slots-label {
  font-weight: bold;
  margin-bottom: 0.7em;
  font-size: 1.1em;
  color: #222;
  text-align: center;
}
.save-slot-card {
  background: rgba(255,255,255,0.03);
  position: relative;
  min-height: 140px;
  padding: 2em 1em 1em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  margin-bottom: 1em;
  border-radius: 18px;
  border: 2px solid transparent;
  transition: box-shadow 0.25s, border 0.25s, background 0.25s, transform 0.18s;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}
.save-slot-card:hover {
  box-shadow: 0 12px 36px rgba(44,19,84,0.16), 0 2px 24px 0 var(--modal-border);
  transform: translateY(-2px) scale(1.02);
}
.save-slot-card.active {
  border: 2.5px solid var(--modal-border);
  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.10), 0 2px 24px 0 var(--modal-border);
  background: rgba(255,255,255,0.08);
  z-index: 2;
  transform: scale(1.025);
}
.save-slot-card.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 24px 4px var(--modal-border);
  opacity: 0.18;
}
.save-slot-card .slot-label {
  position: static;
  transform: none;
  margin-bottom: 0.5em;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: #bfc9e0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: color 0.2s, background 0.2s, font-size 0.2s;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
}
.save-slot-card.active .slot-label {
  font-size: 1.3em;
  color: var(--modal-border);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
}
.save-slot-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 1em;
  margin-bottom: 1em;
  font-size: 0.9em;
  color: #222;
  font-family: inherit;
  font-weight: 500;
  backdrop-filter: blur(7px) saturate(1.2);
  box-shadow: 0 2px 12px rgba(44,19,84,0.07);
  border: 1.5px solid rgba(255,255,255,0.13);
  transition: background 0.2s, box-shadow 0.2s;
  width: 100%;
  text-align: center;
}
.save-slot-card button {
  width: 90%;
  max-width: 200px;
  display: block;
  margin: 0.3em auto;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 700;
  padding: 0.6em 0;
  background: linear-gradient(90deg, var(--modal-btn-bg), calc(var(--modal-btn-bg) + 10%));
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(44,19,84,0.10);
  transition: background 0.18s, box-shadow 0.18s, filter 0.18s, color 0.18s;
  cursor: pointer;
  outline: none;
}
.save-slot-card button:hover {
  filter: brightness(1.18);
  box-shadow: 0 4px 18px rgba(44,19,84,0.18);
}
.save-slot-card .save-slot-delete {
  background: linear-gradient(90deg, #ff3c3c, #ff7b7b 90%);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1em;
  padding: 0.6em 0;
  margin: 0.3em auto 0 auto;
  width: 90%;
  max-width: 200px;
  box-shadow: 0 4px 18px rgba(255,60,60,0.18);
  transition: background 0.18s, box-shadow 0.18s, filter 0.18s, color 0.18s;
  outline: none;
  display: block;
}
.save-slot-card .save-slot-delete:hover {
  filter: brightness(1.12);
  background: linear-gradient(90deg, #ff7b7b, #ff3c3c 90%);
  color: #fffbe6;
  box-shadow: 0 8px 32px rgba(255,60,60,0.22);
}
@media (max-width: 768px) {
  #saveSlotModalCard {
    min-width: 280px;
    padding: 1.5em 1em 1em 1em;
  }
  .save-slot-card {
    max-width: 250px;
    min-height: 120px;
    padding: 1.5em 0.8em 0.8em 0.8em;
  }
  .save-slot-summary {
    font-size: 0.8em;
    padding: 0.8em;
  }
  .save-slot-card button {
    font-size: 0.9em;
    padding: 0.5em 0;
  }
}
#saveSlotModal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 99999999999999999;
  align-items: center;
  justify-content: center;
}
#saveSlotModal.active {
  display: flex;
}
#saveSlotModalCard {
  background: var(--modal-bg);
  border: 2px solid var(--modal-border);
  border-radius: 12px;
  min-width: 340px;
  min-height: 220px;
  max-width: 90vw;
  max-height: 80vh; 
  padding: 2em 2em 1.5em 2em;
  position: relative;
  display: flex;
  flex-direction: column;   
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  overflow-y: auto;         
  gap: 1.5em;               
}
.save-slot-card {
  width: 100%;
  max-width: 350px;
  margin-bottom: 1em;
  position: relative;
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  border: 2px solid transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em 1em 1em 1em;
  min-height: 140px;
}
.save-slot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  gap: 0.5em;
}
.save-slot-buttons {
  display: flex;
  flex-direction: row;
  gap: 1em;
  width: 100%;
  justify-content: center;
  margin-top: 0.5em;
}
.save-slot-buttons button {
  flex: 1 1 0;
  min-width: 90px;
  max-width: 140px;
  margin: 0;
}
.save-slot-buttons button:not(.save-slot-delete) {
  background: var(--modal-border);
  color: #fff;
  opacity: 1;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(44,19,84,0.10);
  border: none;
}
.save-slot-buttons button:not(.save-slot-delete):hover {
  filter: brightness(1.18);
  box-shadow: 0 4px 18px rgba(44,19,84,0.18);
}
.save-slot-content button {
  background: var(--modal-border);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 999px;
  padding: 0.6em 0;
  margin: 0.3em auto 0 auto;
  width: 90%;
  max-width: 200px;
  box-shadow: 0 2px 8px rgba(44,19,84,0.10);
  transition: background 0.18s, box-shadow 0.18s, filter 0.18s, color 0.18s;
  outline: none;
  display: block;
}
.save-slot-content button:hover {
  filter: brightness(1.18);
  box-shadow: 0 4px 18px rgba(44,19,84,0.18);
}
[data-theme="dark"] #prismSubTab, .prism-bg-active[data-theme="dark"] #prismSubTab {
  background: linear-gradient(135deg, #101a2b 60%, #1a233a 100%) !important;
  box-shadow: 0 0 64px 0 #000a, 0 0 0 1px #222b44;
  border-radius: 18px;
  border: 2.5px solid #223355;
  color: #e0f7fa;
}
[data-theme="dark"] #prismSubTab .card, .prism-bg-active[data-theme="dark"] #prismSubTab .card {
  background: rgba(20,30,50,0.92) !important;
  color: #e0f7fa;
  border: 2px solid #223355;
  box-shadow: 0 2px 24px 0 #0008;
}
.prism-bg-active[data-theme="dark"], [data-theme="dark"] .prism-bg-active {
  background: linear-gradient(120deg, #1a2236 0%, #23243a 30%, #2a1a2e 60%, #16323a 100%) !important;
}
.generator-card .particle-label {
  font-weight: bold;
}
#generatorMainTab .card.fullwidth {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}
[data-theme="dark"] .generator-card.light {
  background: linear-gradient(135deg, #23272b 60%, #2e3440 100%) !important;
  border: 1.5px solid #e0e0e0 !important;
  color: #eaffff !important;
}
[data-theme="dark"] .generator-card.redlight {
  background: linear-gradient(135deg, #3a232b 60%, #402e34 100%) !important;
  border: 1.5px solid #f7b0b7 !important;
  color: #ffe0e6 !important;
}
[data-theme="dark"] .generator-card.orangelight {
  background: linear-gradient(135deg, #3a2b23 60%, #40382e 100%) !important;
  border: 1.5px solid #f7d1b0 !important;
  color: #fff3e7 !important;
}
[data-theme="dark"] .generator-card.yellowlight {
  background: linear-gradient(135deg, #3a3a23 60%, #40402e 100%) !important;
  border: 1.5px solid #f7f3b0 !important;
  color: #fffde7 !important;
}
[data-theme="dark"] .generator-card.greenlight {
  background: linear-gradient(135deg, #233a2b 60%, #2e4038 100%) !important;
  border: 1.5px solid #b0f7d1 !important;
  color: #e7fff1 !important;
}
[data-theme="dark"] .generator-card.bluelight {
  background: linear-gradient(135deg, #232b3a 60%, #2e3440 100%) !important;
  border: 1.5px solid #b0d6f7 !important;
  color: #e7f6ff !important;
}
#kpSoftcapModal {
  display: none;
  position: fixed;
  z-index: 999999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  pointer-events: all;
}
#kpSoftcapModal.active {
  display: flex;
}
#kpSoftcapModalContent {
  position: relative;
  background: white;
  border-radius: 32px;
  box-shadow: 0 16px 64px #0008;
  padding: 4em 3em 3em 3em;
  max-width: 700px;
  width: 98vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
}
#kpSoftcapModalCloseBtn {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 2.5em;
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  z-index: 1001;
}
#kpSoftcapModal img {
  width: 200px;
  height: 200px;
  margin-bottom: 2.2em;
}
#kpSoftcapModalContent > div {
  font-size: 1.6em;
  color: #222;
  line-height: 1.7;
  max-width: 600px;
}
#kpSoftcapModal.active ~ * {
  pointer-events: none !important;
  user-select: none !important;
  filter: blur(2px) grayscale(0.2);
}
#kpSoftcapModalContent {
  padding-top: 2.5em !important;
}
#kpSoftcapModalCloseBtn {
  top: 12px !important;
  right: 18px !important;
}
#kpSoftcapModalContent img {
  margin-top: 0.5em;
}
.currency-value-wrapper {
  display: inline-block;
  position: relative;
}
.gain-popup {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: 0;
  margin-top: 4px;
  white-space: nowrap;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s linear;
  will-change: opacity;
  font-weight: bold;
  color: black;
  border-radius: 8px;
  padding: 0.2em 0.8em;
}
.gain-popup:not(.show) {
  opacity: 0;
}
[data-theme="dark"] .gain-popup {
  color: #fff;
}
.charger-stripes {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.charger-stripes .stripe {
  position: absolute;
  width: 140%;
  height: 16px;
  left: -20%;
  background: rgba(255, 230, 102, 0.18);
  transform: skew(-25deg);
  transition: background 0.3s;
}
.charger-stripes .stripe1 { top: 18px; }
.charger-stripes .stripe2 { top: 54px; }
.charger-stripes .stripe3 { top: 90px; }
.charger-stripes .stripe4 { top: 126px; }
.charger-stripes .stripe5 { top: 162px; }
.card.on .charger-stripes .stripe {
  background: linear-gradient(90deg, #ffe066 60%, #fffbe0 100%);
  box-shadow: 0 0 8px 2px #ffe06699;
}
#chargerCard.card.on {
  border-color: #ffe066 !important;
  box-shadow: 0 0 16px 4px #ffe06699, 0 0 0 4px #ffe06644;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#chargerCard, #chargerSubTab .card:not(#chargerCard) {
  background: linear-gradient(120deg, #23272b 80%, #232b33 100%);
  border: 1.5px solid #33eaff;
  border-radius: 16px;
  box-shadow: 0 4px 16px #000a, 0 0 0 2px #2228 inset;
  color: #eaffff;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#chargerSubTab .card h2 {
  color: #33eaff;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(51,234,255,0.15);
}
#chargerSubTab .card {
  min-width: 320px;
  max-width: 480px;
  margin: auto;
}
#chargerSubTab .card.on {
  border-color: #ffe066 !important;
  box-shadow: 0 0 16px 4px #ffe06699, 0 0 0 4px #ffe06644;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#chargerSubTab .card table {
  color: #eaffff;
  background: none;
}
#chargerSubTab .card th, #chargerSubTab .card td {
  background: rgba(24,28,40,0.92);
  color: #eaffff;
  border: 1px solid #33eaff;
}
#chargerSubTab .card th {
  color: #33eaff;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
}
.go-to-charger-btn {
  background: linear-gradient(90deg, #1ecbe1 0%, #ffe066 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 1em 2em;
  font-size: 1.2em;
  font-family: 'Oswald', 'Orbitron', Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 12px #1ecbe155, 0 0 0 2px #ffe06644;
  transition: filter 0.18s, box-shadow 0.18s;
}
.go-to-charger-btn:hover, .go-to-charger-btn:focus {
  filter: brightness(1.08) drop-shadow(0 0 8px #ffe06688);
  box-shadow: 0 4px 18px #ffe06688, 0 0 0 3px #1ecbe144;
}
#chargerSubTab .card:not(#chargerCard) {
  font-size: 1.25em;
  padding: 2.2em 2em 2em 2em;
}
#chargerSubTab .card:not(#chargerCard) h2 {
  font-size: 2.1em;
  margin-bottom: 1.2em;
}
#chargerMilestoneTable table {
  font-size: 1.1em;
}
#chargerMilestoneTable th, #chargerMilestoneTable td {
  padding: 0.7em 1.2em;
  font-size: 1.08em;
}
#chargerMilestoneTable th {
  font-size: 1.13em;
}
.soap-charger-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
  position: relative;
  overflow: visible !important;
}
.soap-charger-speech {
  background: #fff;
  color: #222;
  border-radius: 14px;
  border: 2.5px solid #ffe066;
  box-shadow: 0 2px 8px rgba(44,19,84,0.10);
  font-family: 'Oswald', 'Arial', sans-serif;
  font-size: 1.18em;
  padding: 1em 1.5em;
  max-width: 260px;
  text-align: center;
  display: none;
  position: absolute;
  left: 90%;
  top: 50%;
  transform: translateY(-50%) translateX(18px);
  z-index: 2000;
}
.soap-large {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border-radius: 18px;
  display: block;
  margin: 0 auto;
}
.floor-btn {
  background: linear-gradient(135deg, #e0d4fc 60%, #bfaaff 100%);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(120, 80, 180, 0.10);
  padding: 0.7em 1.5em 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  transition: box-shadow 0.18s, background 0.18s;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  color: #222;
}
.floor-btn:hover {
  box-shadow: 0 4px 24px rgba(120, 80, 180, 0.18);
  background: linear-gradient(135deg, #d1bfff 60%, #a48cff 100%);
}

/* Halloween Event Button Styling */
.halloween-event-btn {
  background: linear-gradient(135deg, #ff6b35 60%, #2d0f00 100%) !important;
  color: #fff !important;
  border: 2px solid #ff9500 !important;
  box-shadow: 0 2px 12px rgba(255, 107, 53, 0.3) !important;
}

.halloween-event-btn:hover {
  background: linear-gradient(135deg, #ff9500 60%, #1a0d00 100%) !important;
  box-shadow: 0 4px 24px rgba(255, 107, 53, 0.5) !important;
  transform: translateY(-1px);
}
.floor2-tab-btn {
  background: var(--card-border);
  color: white;
  border: none;
  font-size: 1.05rem;
  padding: 0.6em 1.5em;
  border-radius: var(--radius);
  cursor: pointer;
  margin: 0 0.2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s;
}
.floor2-tab-btn.active {
  background: #fff;
  color: var(--card-border);
  font-weight: bold;
  border: 2.5px solid var(--card-border);
}
#stairsCard {
  background: linear-gradient(135deg, #e0d4fc 60%, #bfaaff 100%);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(120, 80, 180, 0.10);
  padding: 0.7em 1.5em 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  transition: box-shadow 0.18s, background 0.18s;
}
#stairsCard:hover {
  box-shadow: 0 4px 24px rgba(120, 80, 180, 0.18);
  background: linear-gradient(135deg, #d1bfff 60%, #a48cff 100%);
}
body.terrarium-active #generatorSubTabBtn,
body.terrarium-active #prismSubTabBtn {
  display: none !important;
}
#terrariumTab {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 1000;
  overflow: auto;
}
#terrariumCharacterCard {
  min-width: 320px;
  min-height: 260px;
  max-width: 400px;
  max-height: 340px;
  padding: 2.2em 2em 1.5em 2em;
  font-size: 1.25em;
  box-shadow: 0 4px 24px rgba(120, 80, 180, 0.10);
  border-radius: 22px;
  background: #f7faf7cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -2.5em
}
#terrariumCharacterCard img {
  width: 280px !important;
  height: 280px !important;
  border-radius: 18px;
  margin-top: 1em;
  box-shadow: 0 2px 12px rgba(120,80,180,0.10);
}
@media (max-width: 900px) {
  #terrariumCharacterCard img {
    width: 200px !important;
    height: 200px !important;
  }
}
#terrariumGrassPatchArea {
  min-width: 600px;
  min-height: 350px;
  max-width: 750px;
  max-height: 1200px;
  margin: 0em   1vw 2.5em 19vw;
  background: #012e01;
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(120, 180, 120, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
}
@media (max-width: 900px) {
  #terrariumGrassPatchArea {
    min-width: 90vw;
    max-width: 98vw;
    min-height: 180px;
    max-height: 600px;
    font-size: 1.1em;
    margin: 2.5em auto 2.5em auto;
  }
  #terrariumCharacterCard {
    min-width: 180px;
    max-width: 98vw;
    min-height: 120px;
    max-height: 220px;
    font-size: 1em;
  }
  #terrariumCharacterCard img {
    width: 90px !important;
    height: 90px !important;
  }
}
.terrarium-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1ca3a3;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.7em 1.2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  min-width: 70px;
  min-height: 70px;
  gap: 0.1em;
  margin: 5em;
  margin-bottom: -5em
}
.terrarium-tool-btn:hover {
  background: #159292;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
}
#terrariumPollenCard, #terrariumCharacterCard {
  z-index: 2;
}
#terrariumPollenCard {
  background: #fffbe8;
  border-radius: 22px;
  box-shadow: 0 2px 12px rgba(180,180,80,0.10);
  padding: 1.5em 2.5em 1.2em 2.5em;
  min-width: 320px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;  
  justify-content: center;
  gap: 1.2em;
  margin-bottom: 2.5em;
}
#terrariumPollenCard > div {
  gap: 3em;
}
#terrariumPollenCard img, #terrariumPollenCard span[style*='font-size:2em'] {
  margin-bottom: 0.2em;
}
#terrariumToolButtons {
  gap: 10em !important;
}
body.terrarium-bg {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 100%),
    linear-gradient(135deg, #e8fbe8 60%, #c6e6c6 100%) !important;
}
[data-theme="dark"] body.terrarium-bg {
  background:
    linear-gradient(180deg, rgba(60,60,60,0.18) 0%, rgba(60,60,60,0.0) 100%),
    linear-gradient(135deg, #2e3d2e 60%, #3e5e3e 100%) !important;
}
#terrariumCharacterCard {
  position: relative;
}
.fluzzer-img-wrap {
  display: inline-block;
  position: relative;
}
.terrarium-currency-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: -1em
}
.terrarium-currency-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.terrarium-currency-img {
  width: 64px;
  height: 64px;
  margin: 0 0.7em 0 0;
}
.terrarium-currency-label {
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.terrarium-currency-value {
  margin-left: 0.5em;
  font-weight: normal;
  font-size: 0.95em;
}
.terrarium-feature-btn {
  padding: 0.3em 0.8em;
  font-size: 1em;
  border-radius: 12px;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
  width: 250px;
}
.terrarium-feature-btn:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.terrarium-feature-btn.active {
  background: var(--button-bg);
  color: white;
  border-color: var(--button-bg);
}
.terrarium-feature-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.generator-feature-btn {
  padding: 0.3em 0.8em;
  font-size: 1em;
  border-radius: 12px;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
  width: 250px;
}
.generator-feature-btn:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.generator-feature-btn.active {
  background: var(--button-bg);
  color: white;
  border-color: var(--button-bg);
}
.generator-feature-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.prism-feature-btn {
  padding: 0.3em 0.8em;
  font-size: 1em;
  border-radius: 12px;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
  width: 250px;
}
.prism-feature-btn:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.prism-feature-btn.active {
  background: var(--button-bg);
  color: white;
  border-color: var(--button-bg);
}
.prism-feature-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.prism-subtab {
  width: 100%;
  min-height: 60vh;
}
.generator-subtab {
  width: 100%;
  min-height: 60vh;
}
.terrarium-flower-grid {
  display: grid;
  grid-template-columns: repeat(13, 50px);
  grid-template-rows: repeat(6, 50px);
  gap: 0;
  justify-content: center;
  align-items: center;
  margin: -4em auto 0 auto;
}
.terrarium-flower-cell {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(120,80,180,0.07);
}
.terrarium-flower-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}
body.pollen-wand-mode, body.pollen-wand-mode * {
  cursor: url("assets/icons/pollen wand.png") 16 16, auto !important;
}
.terrarium-currency-value {
  margin-left: 0.5em;
  font-weight: normal;
  font-size: 0.95em;
  position: relative;
}
.terrarium-currency-label {
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
}
.terrarium-gain-popup {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(0);
  opacity: 0;
  pointer-events: none;
  font-weight: bold;
  font-size: 0.9em;
  color: #000000;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  z-index: 100;
  margin-top: 8px;
  white-space: nowrap;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: none;
}
.terrarium-gain-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(8px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.terrarium-gain-popup.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: all 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
[data-theme="dark"] .terrarium-gain-popup {
  background: none;
  color: #ffffff;
  border: none;
  box-shadow: none;
}
body.watering-can-mode, body.watering-can-mode * {
  cursor: url("assets/icons/watering.png") 16 16, auto !important;
}
.fluzzer-ai-btn {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0.8em 1.2em;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.fluzzer-ai-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.fluzzer-ai-btn:active {
  transform: translateY(0);
}
body.pollen-wand-mode {
  cursor: url("assets/icons/pollen wand.png") 16 16, auto !important;
}
body.pollen-wand-mode.pollen-wand-anim {
  cursor: url("assets/icons/pollen wand action.png") 16 16, auto !important;
}
body.watering-can-mode {
  cursor: url("assets/icons/watering.png") 16 16, auto !important;
}
body.watering-can-mode.watering-can-anim {
  cursor: url("assets/icons/watering action.png") 16 16, auto !important;
}
[data-theme="day"] {
  --text: #111;
  --nav-bg: var(--card-border);
  --button-bg: var(--card-border);
  --button-hover: #00704f;
  --shadow-color: rgba(0,0,0,0.1);
  --glow-color: transparent;
  --text-shadow: none;
  background: #f7faf7;
}
[data-theme="dusk"][data-colour="green"] {
  --card-bg: #ffe6b3;   
  --card-border: #c9a86a;
}
[data-theme="dusk"][data-colour="blue"] {
  --card-bg: #ffd6b3;   
  --card-border: #bfa27a;
}
[data-theme="dusk"][data-colour="pink"] {
  --card-bg: #ffcab3;   
  --card-border: #c98a7a;
}
[data-theme="night"][data-colour="green"] {
  --card-bg: #1a3a1a;
  --card-border: #145c2e;
}
[data-theme="night"][data-colour="blue"] {
  --card-bg: #1a2a3a;
  --card-border: #145c5c;
}
[data-theme="night"][data-colour="pink"] {
  --card-bg: #3a1a2a;
  --card-border: #5c145c;
}
[data-theme="transition-day-dusk"][data-colour="green"] {
  --card-bg: color-mix(in srgb, #00ff5e calc(100% - (var(--theme-transition-progress, 0) * 100%)), #c6e6b6 calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #009e42 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #7bbf7b calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-day-dusk"][data-colour="blue"] {
  --card-bg: color-mix(in srgb, #00d5ff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #b3e6ff calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #008bb3 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #5faacc calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-day-dusk"][data-colour="pink"] {
  --card-bg: color-mix(in srgb, #ff8ed1 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffd1f0 calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #b10089 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #b86fa6 calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-dusk-night"][data-colour="green"] {
  --card-bg: color-mix(in srgb, #c6e6b6 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #1a3a1a calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #7bbf7b calc(100% - (var(--theme-transition-progress, 0) * 100%)), #145c2e calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-dusk-night"][data-colour="blue"] {
  --card-bg: color-mix(in srgb, #b3e6ff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #1a2a3a calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #5faacc calc(100% - (var(--theme-transition-progress, 0) * 100%)), #145c5c calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-dusk-night"][data-colour="pink"] {
  --card-bg: color-mix(in srgb, #ffd1f0 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #3a1a2a calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #b86fa6 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #5c145c calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-night-day"][data-colour="green"] {
  --card-bg: color-mix(in srgb, #1a3a1a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #00ff5e calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #145c2e calc(100% - (var(--theme-transition-progress, 0) * 100%)), #009e42 calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-night-day"][data-colour="blue"] {
  --card-bg: color-mix(in srgb, #1a2a3a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #00d5ff calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #145c5c calc(100% - (var(--theme-transition-progress, 0) * 100%)), #008bb3 calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="transition-night-day"][data-colour="pink"] {
  --card-bg: color-mix(in srgb, #3a1a2a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ff8ed1 calc(var(--theme-transition-progress, 0) * 100%));
  --card-border: color-mix(in srgb, #5c145c calc(100% - (var(--theme-transition-progress, 0) * 100%)), #b10089 calc(var(--theme-transition-progress, 0) * 100%));
}
[data-theme="dusk"] {
  --text: #2a1a00;
  --nav-bg: color-mix(in srgb, var(--card-border) 80%, #8b4513);
  --button-bg: color-mix(in srgb, var(--card-border) 70%, #8b4513);
  --button-hover: color-mix(in srgb, var(--card-border) 50%, #654321);
  --shadow-color: rgba(139, 69, 19, 0.2);
  --glow-color: rgba(255, 180, 70, 0.1);
  --text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  background: linear-gradient(180deg, #ffe4b3 0%, #bfaaff 100%);
}
[data-theme="night"], [data-theme="dark"] {
  --text: #e0e0e0;
  --nav-bg: color-mix(in srgb, var(--card-border) 60%, #1a1a1a);
  --button-bg: color-mix(in srgb, var(--card-border) 50%, #2a2a2a);
  --button-hover: color-mix(in srgb, var(--card-border) 40%, #404040);
  --shadow-color: rgba(0,0,0,0.4);
  --glow-color: rgba(100, 120, 255, 0.15);
  --text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  background: #111;
}
[data-theme="transition-day-dusk"] {
  --text: color-mix(in srgb, #111 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #2a1a00 calc(var(--theme-transition-progress, 0) * 100%));
  --nav-bg: color-mix(in srgb, var(--card-border) calc(100% - (var(--theme-transition-progress, 0) * 100%)), color-mix(in srgb, var(--card-border) 80%, #8b4513) calc(var(--theme-transition-progress, 0) * 100%));
  --button-bg: color-mix(in srgb, var(--card-border) calc(100% - (var(--theme-transition-progress, 0) * 100%)), color-mix(in srgb, var(--card-border) 70%, #8b4513) calc(var(--theme-transition-progress, 0) * 100%));
  --button-hover: color-mix(in srgb, #00704f calc(100% - (var(--theme-transition-progress, 0) * 100%)), color-mix(in srgb, var(--card-border) 50%, #654321) calc(var(--theme-transition-progress, 0) * 100%));
  --shadow-color: color-mix(in srgb, rgba(0,0,0,0.1) calc(100% - (var(--theme-transition-progress, 0) * 100%)), rgba(139, 69, 19, 0.2) calc(var(--theme-transition-progress, 0) * 100%));
  --glow-color: color-mix(in srgb, transparent calc(100% - (var(--theme-transition-progress, 0) * 100%)), rgba(255, 180, 70, 0.1) calc(var(--theme-transition-progress, 0) * 100%));
  --text-shadow: color-mix(in srgb, none calc(100% - (var(--theme-transition-progress, 0) * 100%)), 0 1px 2px rgba(255, 255, 255, 0.3) calc(var(--theme-transition-progress, 0) * 100%));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f7faf7 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffe4b3 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #f7faf7 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #bfaaff calc(var(--theme-transition-progress, 0) * 100%)) 100%
  );
}
[data-theme="transition-dusk-night"] {
  background: linear-gradient(180deg, #ffe4b3 0%, #bfaaff 100%);
}
[data-theme="transition-dusk-night"][data-colour="green"] {
  --card-bg: #ffe6b3;
  --card-border: #c9a86a;
}
[data-theme="transition-dusk-night"][data-colour="blue"] {
  --card-bg: #ffd6b3;
  --card-border: #bfa27a;
}
[data-theme="transition-dusk-night"][data-colour="pink"] {
  --card-bg: #ffcab3;
  --card-border: #c98a7a;
}
[data-theme="transition-night-day"] {
  --text: color-mix(in srgb, #e0e0e0 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #111 calc(var(--theme-transition-progress, 0) * 100%));
  --nav-bg: color-mix(in srgb, color-mix(in srgb, var(--card-border) 60%, #1a1a1a) calc(100% - (var(--theme-transition-progress, 0) * 100%)), var(--card-border) calc(var(--theme-transition-progress, 0) * 100%));
  --button-bg: color-mix(in srgb, color-mix(in srgb, var(--card-border) 50%, #2a2a2a) calc(100% - (var(--theme-transition-progress, 0) * 100%)), var(--card-border) calc(var(--theme-transition-progress, 0) * 100%));
  --button-hover: color-mix(in srgb, color-mix(in srgb, var(--card-border) 40%, #404040) calc(100% - (var(--theme-transition-progress, 0) * 100%)), #00704f calc(var(--theme-transition-progress, 0) * 100%));
  --shadow-color: color-mix(in srgb, rgba(0,0,0,0.4) calc(100% - (var(--theme-transition-progress, 0) * 100%)), rgba(0,0,0,0.1) calc(var(--theme-transition-progress, 0) * 100%));
  --glow-color: color-mix(in srgb, rgba(100, 120, 255, 0.15) calc(100% - (var(--theme-transition-progress, 0) * 100%)), transparent calc(var(--theme-transition-progress, 0) * 100%));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #111 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #f7faf7 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #111 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #f7faf7 calc(var(--theme-transition-progress, 0) * 100%)) 100%
  );
}
[data-theme="transition-day-dusk"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #e0e7ff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffe4b3 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #fff1eb calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffb347 calc(var(--theme-transition-progress, 0) * 100%)) 40%,
    color-mix(in srgb, #bfaaff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #bfaaff calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
[data-theme="transition-dusk-night"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ffe4b3 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #181c24 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #ffb347 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #23283a calc(var(--theme-transition-progress, 0) * 100%)) 60%,
    color-mix(in srgb, #bfaaff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #3a2566 calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
[data-theme="transition-night-day"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #181c24 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #e0e7ff calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #23283a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #fff1eb calc(var(--theme-transition-progress, 0) * 100%)) 60%,
    color-mix(in srgb, #3a2566 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #bfaaff calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
[data-theme="dusk"] body.terrarium-bg {
  background: linear-gradient(180deg, #ffe4b3 0%, #ffb347 100%) !important;
}
[data-theme="night"] body.terrarium-bg {
  background: linear-gradient(180deg, #181c24 0%, #23283a 100%) !important;
}
[data-theme="transition-day-dusk"] body.terrarium-bg {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f7faf7 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffe4b3 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #c6e6c6 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffb347 calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
[data-theme="transition-dusk-night"] body.terrarium-bg {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffe4b3 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #181c24 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #ffb347 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #23283a calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
[data-theme="transition-night-day"] body.terrarium-bg {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #181c24 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #f7faf7 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #23283a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #c6e6c6 calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
html[data-theme="transition-day-dusk"] #prismSubTab,
body[data-theme="transition-day-dusk"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #e0e7ff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffe4b3 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #fff1eb calc(100% - (var(--theme-transition-progress, 0) * 100%)), #ffb347 calc(var(--theme-transition-progress, 0) * 100%)) 40%,
    color-mix(in srgb, #bfaaff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #bfaaff calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
html[data-theme="transition-dusk-night"] #prismSubTab,
body[data-theme="transition-dusk-night"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ffe4b3 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #181c24 calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #ffb347 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #23283a calc(var(--theme-transition-progress, 0) * 100%)) 60%,
    color-mix(in srgb, #bfaaff calc(100% - (var(--theme-transition-progress, 0) * 100%)), #3a2566 calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
html[data-theme="transition-night-day"] #prismSubTab,
body[data-theme="transition-night-day"] #prismSubTab {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #181c24 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #e0e7ff calc(var(--theme-transition-progress, 0) * 100%)) 0%,
    color-mix(in srgb, #23283a calc(100% - (var(--theme-transition-progress, 0) * 100%)), #fff1eb calc(var(--theme-transition-progress, 0) * 100%)) 60%,
    color-mix(in srgb, #3a2566 calc(100% - (var(--theme-transition-progress, 0) * 100%)), #bfaaff calc(var(--theme-transition-progress, 0) * 100%)) 100%
  ) !important;
}
html[data-theme="day"] .prism-top-row .card::before,
body[data-theme="day"] .prism-top-row .card::before {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 55%
  );
  opacity: 0.7;
}
html[data-theme="dusk"] .prism-top-row .card::before,
body[data-theme="dusk"] .prism-top-row .card::before {
  background: linear-gradient(
    120deg,
    rgba(255,180,70,0) 45%,
    rgba(255,180,70,0.45) 50%,
    rgba(255,180,70,0) 55%
  );
  opacity: 0.6;
}
html[data-theme="night"] .prism-top-row .card::before,
body[data-theme="night"] .prism-top-row .card::before {
  background: linear-gradient(
    120deg,
    rgba(100,120,255,0) 45%,
    rgba(100,120,255,0.35) 50%,
    rgba(100,120,255,0) 55%
  );
  opacity: 0.5;
}
html[data-theme="night"] .prism-top-row {
  background: linear-gradient(135deg, #181c24 0%, #23283a 60%, #3a2566 100%) !important;
}
[data-theme="dark"][data-colour="green"] {
  --card-bg: #1a3a1a;
  --card-border: #145c2e;
}
[data-theme="dark"][data-colour="blue"] {
  --card-bg: #1a2a3a;
  --card-border: #145c5c;
}
[data-theme="dark"][data-colour="pink"] {
  --card-bg: #3a1a2a;
  --card-border: #5c145c;
}
[data-theme="dark"] .terrarium-currency-value,
[data-theme="dark"] .terrarium-currency-label {
  color: #000 !important;
}
.cafeteriaSubTabBar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card-border);
  border-radius: 0 0 0 0;
  width: 100%;
  padding: 6px 0;
  bottom: 55px; 
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: 10;
}
.cafeteriaSubTabBar {
  position: fixed;
  bottom: 55px;
  left: 0;
  width: 100%;
  background: var(--card-border);
  display: flex;
  justify-content: center;
  padding: 6px 0;
  z-index: 10;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
.cafeteriaSubTabNav {
  display: flex;
  gap: 1rem;
  background: transparent;
  z-index: 10;
}
.cafeteriaSubTabBtn {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 50%, black);
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease,
              transform 0.2s ease,
              box-shadow 0.3s ease;
  z-index: 10;
}
.cafeteriaSubTabBtn:hover {
  background: color-mix(in srgb, var(--card-border) 70%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cafeteriaSubTabBtn.active {
  background: var(--accent-color);
  color: white;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transform: translateY(-1px);
}
.kitchen-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.ingredient-card, .mixing-card, .kitchen-character-card {
  min-width: 220px;
  max-width: 340px;
  flex: 1 1 300px;
  box-sizing: border-box;
}
.kitchen-character-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 900px) {
  .kitchen-row {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }
}
.kitchen-speech-bubble {
  position: absolute;
  left: 260px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: #111;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-size: 1.2rem;
  max-width: 260px;
  z-index: 2000;
  display: none;
}
.kitchen-speech-bubble::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 16px solid white;
}
.settingsSubTabBar {
  display: flex;
  justify-content: center;
  background: var(--card-border);
  border-radius: 0 0 0 0;
  width: 100vw;
  padding: 6px 0;
  bottom: 55px; 
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: 10;
}
.settingsSubTabNav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  z-index: 10;
}
.settingsSubTabBtn {
  padding: 0.5em 2em;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 50%, black);
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s;
  z-index: 10;
}
.settingsSubTabBtn.active {
  background: rgba(255,255,255,0.2);
}
.settingsSubTabBtn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
#inventoryModal {
  transition: opacity 0.2s;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  justify-content: center;
  align-items: flex-end;
  pointer-events: auto;
  z-index: 9999999999999;
}
#inventoryModal[style*='display: none'] {
  opacity: 0;
  pointer-events: none;
}
#inventoryModal[style*='display: flex'] {
  opacity: 1;
  pointer-events: auto;
}
#inventoryModal > div {
  box-shadow: 0 -4px 32px #0006;
  border-radius: 24px 24px 0 0;
  background: rgba(255,255,255,0.97);
  min-height: 64px;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2em 0.5em 0.7em 0.5em;
}
#inventoryTokens {
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.1);
  /* Add margin to ensure scroll indicators are visible */
  margin-bottom: 1em;
}

#inventoryTokens::-webkit-scrollbar {
  height: 8px;
}

#inventoryTokens::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

#inventoryTokens::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}

#inventoryTokens::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

#inventoryTokens img {
  box-shadow: 0 2px 8px #0002;
  border-radius: 12px;
  background: #fff;
}

#inventoryTokens > div {
  transition: transform 0.1s;
  padding: 2px;
  flex-shrink: 0; /* Prevent tokens from shrinking in horizontal scroll */
  min-width: 70px; /* Ensure consistent token width */
}

#inventoryTokens > div:hover {
  transform: scale(1.05);
}
.dragging-token {
  pointer-events: none;
  transform: scale(1.18) rotate(-6deg);
  box-shadow: 0 8px 32px #0006, 0 2px 8px #0004;
  transition: box-shadow 0.15s, transform 0.15s;
}
.no-select {
  user-select: none !important;
}
.terrarium-flower-rustle {
  animation: terrariumFlowerRustle 0.25s infinite alternate;
}
@keyframes terrariumFlowerRustle {
  0% { transform: translateX(0) rotate(-2deg); }
  100% { transform: translateX(2px) rotate(2deg); }
}
.mix-modal-main {
  box-shadow: 0 8px 32px #000a;
  border-radius: 32px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 600px;
  min-width: 320px;
  min-height: 320px;
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
  position: relative;
}
.berry-plate-img {
  width: 140px !important;
  height: 140px !important;
  border-radius: 18px;
  box-shadow: 0 2px 16px #bfaaff33;
  background: #fffbe6;
  object-fit: contain;
}
#mixModalActions button {
  background: linear-gradient(90deg, #aaffaa, #66e0a3);
  color: #222;
  border: none;
  border-radius: 14px;
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.7em 2.5em;
  box-shadow: 0 2px 8px #0002;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin: 0 auto;
  display: block;
}
#mixModalActions button:hover {
  background: linear-gradient(90deg, #bfffbf, #7be87b);
  box-shadow: 0 4px 16px #aaffaa44;
}
.not-enough {
  color: #e74c3c !important;
  filter: drop-shadow(0 0 2px #e74c3c33);
}
#mixModalActions button.not-enough {
  background: linear-gradient(90deg, #ffb3b3, #ff6666) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #e74c3c22;
}
.achievementsSubTabBar {
  display: flex;
  justify-content: center;
  background: var(--card-border);
  border-radius: 0 0 0 0;
  width: 100vw;
  padding: 6px 0;
  bottom: 55px; 
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  z-index: 10;
}
.achievementsSubTabNav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  z-index: 10;
}
.achievementsSubTabBtn {
  padding: 0.5em 2em;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 50%, black);
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s;
  z-index: 10;
}
.achievementsSubTabBtn.active {
  background: rgba(255,255,255,0.2);
}
.achievementsSubTabBtn:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
.achievements-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}
.achievements-progress {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
}
.hide-completed-btn {
  background: var(--button-bg, var(--card-border));
  color: white;
  border: 2px solid var(--card-border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s, border-color 0.2s;
}
.hide-completed-btn:hover {
  background: var(--button-hover, #00704f);
}
.achievements-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.achievement-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  transition: all 0.3s ease;
}
.achievement-row.hidden {
  display: none;
}
.achievement-row.visible {
  display: grid;
}
.achievement-card {
  background: #f9f9f9;
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.achievement-card.unlocked {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4CAF50;
}
.achievement-card.unlocked::before {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 8px;
  background: #4CAF50;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}
.achievement-card.hidden {
  display: none;
}
.achievement-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.achievement-card.unlocked .achievement-icon {
  opacity: 1;
}
.achievement-title {
  font-weight: bold;
  font-size: 1em;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.2;
}
.achievement-card.unlocked .achievement-title {
  color: #4CAF50;
}
.achievement-description {
  font-size: 0.85em;
  color: #666;
  line-height: 1.3;
}
.achievement-progress {
  margin-top: 8px;
  font-size: 0.8em;
  color: #888;
}
.achievement-progress-bar {
  width: 100%;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 5px;
}
.achievement-progress-fill {
  height: 100%;
  background: #666;
  transition: width 0.3s ease;
}
.achievement-card.unlocked .achievement-progress-fill {
  background: #4CAF50;
}
.achievement-card.claimable {
  cursor: pointer;
  background: rgba(255, 215, 0, 0.1);
  border-color: #FFD700;
  animation: pulse 2s infinite;
}
.achievement-card.claimable:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
  background: rgba(255, 215, 0, 0.2);
}
.achievement-card.claimed {
  background: rgba(128, 128, 128, 0.1);
  border-color: #888;
  opacity: 0.8;
}
.achievement-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.achievement-card.claimed .achievement-reward {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.3);
}
.reward-icon {
  width: 20px;
  height: 20px;
}
.reward-text {
  font-size: 0.85em;
  font-weight: bold;
  color: #333;
}
.achievement-card.claimable .reward-text {
  color: #B8860B;
}
.achievement-card.claimed .reward-text {
  color: #666;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

/* Trophy Shelf Styles - 3D Wood Planks on Wall */
.trophy-shelf {
  margin: 30px 0;
  width: 100%;
  perspective: 1000px;
}

.shelf-background {
  background: linear-gradient(180deg, #2C1810 0%, #3D2418 30%, #4A2E1C 100%);
  border-radius: 15px;
  padding: 20px 20px 30px 20px;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.4),
    inset 0 2px 8px rgba(0,0,0,0.3),
    inset 0 -2px 8px rgba(255,255,255,0.1);
  position: relative;
  border: 2px solid #1A0F08;
  display: flex;
  flex-direction: column;
}

.shelf-background::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, #1A0F08 0%, #2C1810 50%, #1A0F08 100%);
  border-radius: 18px;
  z-index: -1;
}

.shelf-surface {
  height: 20px;
  background: linear-gradient(180deg, #D2B48C 0%, #CD853F 25%, #A0522D 50%, #8B4513 75%, #654321 100%);
  border-radius: 10px;
  margin-top: auto;
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.4),
    inset 0 3px 6px rgba(255,255,255,0.3),
    inset 0 -3px 6px rgba(0,0,0,0.2);
  position: relative;
  transform: rotateX(15deg) translateZ(20px);
  transform-style: preserve-3d;
}

.shelf-surface::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(139,69,19,0.3) 20%, 
    rgba(160,82,45,0.3) 40%,
    rgba(205,133,63,0.3) 60%,
    rgba(139,69,19,0.3) 80%,
    transparent 100%);
  border-radius: 10px;
}

.shelf-surface::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(180deg, rgba(107,67,33,0.8) 0%, transparent 100%);
  transform: rotateX(-45deg);
  transform-origin: top;
  border-radius: 0 0 8px 8px;
}

.shelf-slots {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  min-height: 100px;
  padding: 0 15px;
  position: relative;
  flex: 1;
}

.trophy-slot {
  width: 90px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.trophy-slot.empty {
  background: none;
  border: none;
}

.trophy-slot.empty::after {
  content: '';
  width: 60px;
  height: 80px;
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: translateZ(10px);
}

.trophy-slot.empty::before {
  content: '';
  color: transparent;
  font-size: 0;
  position: absolute;
  z-index: 1;
  transform: translateZ(20px);
}

.trophy-slot.empty:hover {
  transform: translateY(-3px) translateZ(15px);
}

.trophy-slot.empty:hover::after {
  border: none;
  background: transparent;
}

/* 3D Trophy Styles for when trophies are added */
.trophy-slot.filled {
  background: none;
  border: none;
}

.trophy-3d {
  width: 75px;
  height: 90px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(25px);
  transition: all 0.3s ease;
  backface-visibility: hidden;
  will-change: transform;
}

.trophy-3d:hover {
  transform: translateZ(35px) rotateY(15deg);
}

.trophy-base {
  width: 40px;
  height: 15px;
  background: linear-gradient(45deg, #2C1810 0%, #654321 50%, #2C1810 100%);
  border-radius: 20px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.trophy-cup {
  width: 35px;
  height: 45px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 
    inset 2px 2px 8px rgba(255,255,255,0.3),
    inset -2px -2px 8px rgba(0,0,0,0.2),
    0 8px 20px rgba(255,215,0,0.4);
}

.trophy-cup::before {
  content: '';
  width: 8px;
  height: 20px;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
  border-radius: 0 8px 8px 0;
  position: absolute;
  right: -6px;
  top: 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

.trophy-cup::after {
  content: '';
  width: 8px;
  height: 20px;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
  border-radius: 8px 0 0 8px;
  position: absolute;
  left: -6px;
  top: 10px;
  box-shadow: -2px 2px 6px rgba(0,0,0,0.3);
}

/* Trophy Animation Effects */
@keyframes trophyShine {
  0% {
    transform: translateZ(25px) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateZ(35px) scale(1.1);
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(255,215,0,0.8));
  }
  100% {
    transform: translateZ(25px) scale(1);
    filter: brightness(1);
  }
}

@keyframes shelfGlow {
  0%, 100% {
    box-shadow: 
      0 15px 35px rgba(0,0,0,0.4),
      inset 0 2px 8px rgba(0,0,0,0.3),
      inset 0 -2px 8px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow: 
      0 15px 35px rgba(0,0,0,0.4),
      inset 0 2px 8px rgba(0,0,0,0.3),
      inset 0 -2px 8px rgba(255,255,255,0.1),
      0 0 30px rgba(139,69,19,0.3);
  }
}

.shelf-background:hover {
  animation: shelfGlow 3s ease-in-out infinite;
}

/* Trophy rarity variants */
.trophy-cup.bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #B87333 50%, #A0522D 100%);
  box-shadow: 
    inset 2px 2px 8px rgba(255,255,255,0.2),
    inset -2px -2px 8px rgba(0,0,0,0.3),
    0 8px 20px rgba(205,127,50,0.4);
}

.trophy-cup.silver {
  background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 50%, #808080 100%);
  box-shadow: 
    inset 2px 2px 8px rgba(255,255,255,0.4),
    inset -2px -2px 8px rgba(0,0,0,0.2),
    0 8px 20px rgba(192,192,192,0.4);
}

.trophy-cup.gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  box-shadow: 
    inset 2px 2px 8px rgba(255,255,255,0.3),
    inset -2px -2px 8px rgba(0,0,0,0.2),
    0 8px 20px rgba(255,215,0,0.4);
}

.trophy-cup.platinum {
  background: linear-gradient(135deg, #E5E4E2 0%, #C9C9C9 50%, #A8A8A8 100%);
  box-shadow: 
    inset 2px 2px 8px rgba(255,255,255,0.5),
    inset -2px -2px 8px rgba(0,0,0,0.1),
    0 8px 20px rgba(229,228,226,0.5);
}

/* PNG Trophy Container */
.trophy-image-container {
  width: 80px;
  height: 85px;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.trophy-png {
  width: 75px;
  height: 75px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: all 0.3s ease;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none;
  visibility: visible !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0);
  min-width: 75px;
  min-height: 75px;
}

.trophy-3d:hover .trophy-png {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)) brightness(1.1);
}

/* Trophy Hover Tooltip */
.trophy-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.trophy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.trophy-3d:hover .trophy-tooltip {
  opacity: 1;
  visibility: visible;
}

.trophy-tooltip-title {
  font-weight: bold;
  color: #f39c12;
  margin-bottom: 4px;
}

.trophy-tooltip-description {
  color: #ccc;
  margin-bottom: 6px;
}

.trophy-tooltip-buff {
  color: #4caf50;
  font-weight: bold;
}
.achievement-popup {
  position: fixed;
  top: 20px;
  right: -350px;
  background: linear-gradient(135deg, var(--button-bg, var(--card-border)), var(--button-hover, #00704f));
  color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 320px;
  max-width: 90vw;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.achievement-popup-icon {
  flex-shrink: 0;
}
.achievement-popup-content {
  flex: 1;
  min-width: 0;
}
.achievement-popup-title {
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-bottom: 4px;
}
.achievement-popup-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.2;
}
.achievement-popup-description {
  font-size: 0.9em;
  opacity: 0.9;
  line-height: 1.3;
}
.achievement-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: background 0.2s ease;
}
.achievement-popup-close:hover {
  background: rgba(255,255,255,0.3);
}
@media (max-width: 768px) {
  .achievement-popup {
    width: calc(100vw - 40px);
    max-width: 320px;
    right: -100vw;
  }
}

/* Recovery Export Buttons */
#settingsRecoveryTab button {
  transition: all 0.3s ease;
}

#settingsRecoveryTab button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  filter: brightness(1.1);
}

#settingsRecoveryTab button:active {
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* Emergency Recovery Button */
#emergencyRecoveryBtn:hover {
  background: linear-gradient(135deg, #b71c1c, #d32f2f) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4) !important;
}

#emergencyRecoveryBtn:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(211, 47, 47, 0.3) !important;
}

.recovery-status-success {
  background: #e8f5e8 !important;
  color: #2e7d32 !important;
  border: 1px solid #4caf50 !important;
}

.recovery-status-error {
  background: #ffebee !important;
  color: #c62828 !important;
  border: 1px solid #f44336 !important;
}

.recovery-status-warning {
  background: #fff8e1 !important;
  color: #f57c00 !important;
  border: 1px solid #ff9800 !important;
}

/* Pulse animation for very angry Lepre warning */
@keyframes pulse {
  0% {
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.8);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.5);
    transform: scale(1);
  }
}

/* Friendship Stats Styles */
.department-stats-btn {
  margin: 0.5em;
  padding: 0.8em 1.5em;
  background: var(--button-bg);
  color: var(--text);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.2s ease;
}

.department-stats-btn:hover {
  background: var(--button-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.friendship-buffs {
  margin-top: 1.2em;
  padding: 1em;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

.friendship-buffs .buff-item {
  margin-bottom: 0.8em;
  padding: 0.7em;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.friendship-buffs .buff-unlocked {
  border-left: 4px solid #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  color: var(--text);
  font-weight: 600;
}

.friendship-buffs .buff-locked {
  border-left: 4px solid #ccc;
  background: rgba(128, 128, 128, 0.1);
  color: #888;
  font-style: italic;
}

[data-theme="dark"] .friendship-buffs .buff-unlocked {
  background: rgba(76, 175, 80, 0.2);
  border-left-color: #66ff66;
}

[data-theme="dark"] .friendship-buffs .buff-locked {
  background: rgba(128, 128, 128, 0.2);
  border-left-color: #666;
  color: #aaa;
}

/* === FRONT DESK STYLES === */
.frontdesk-container {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Available Worker Slots */
.available-worker-slot {
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.available-worker-slot:hover {
  border-color: #4CAF50;
  background: #f0f8f0;
}

.available-worker-slot.occupied {
  border: 2px solid #4CAF50;
  background: #f8fff8;
}

.available-worker-slot .worker-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  box-sizing: border-box;
}

.available-worker-slot .worker-image-area {
  cursor: pointer;
  border-radius: 8px;
  padding: 2px;
  transition: background-color 0.2s ease;
}

.available-worker-slot .worker-image-area:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

.available-worker-slot .worker-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 0.25rem;
  border: 2px solid #ddd;
  display: block;
}

.available-worker-slot .worker-name {
  font-size: 0.8rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 0.25rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  position: relative;
}

.available-worker-slot .worker-name:hover {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
}

.available-worker-slot .worker-name:hover::after {
  content: "✎";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #4CAF50;
  opacity: 0.8;
}

.available-worker-slot .worker-stars {
  font-size: 0.7rem;
  color: #FFD700;
}

.available-worker-slot .time-remaining {
  font-size: 0.7rem;
  color: #666;
  text-align: center;
}

/* New worker stats and speech styles */
.available-worker-slot .worker-stats {
  display: none; /* Hidden since we removed the stats */
}

.available-worker-slot .stat-item {
  display: none; /* Hidden since we removed the stats */
}

.available-worker-slot .worker-speech {
  font-size: 0.6rem;
  font-style: italic;
  color: #666;
  text-align: center;
  margin: 0.2rem;
  line-height: 1.2;
  max-height: 2.4rem;
  overflow: hidden;
}

.worker-stats-small {
  display: none; /* Hidden since we removed the stats */
}

.worker-stats-small span {
  display: none; /* Hidden since we removed the stats */
}

.worker-speech-small {
  font-size: 0.6rem;
  font-style: italic;
  color: #666;
  margin: 0.2rem 0;
  line-height: 1.1;
  max-height: 1.1rem;
  overflow: hidden;
}

/* Worker sleep state styling */
.worker-speech.sleeping,
.worker-speech-small.sleeping {
  color: #999;
  font-style: normal;
  font-weight: bold;
}

.worker-card:has(.worker-speech.sleeping),
.assigned-worker:has(.worker-speech-small.sleeping) {
  opacity: 0.8;
  filter: brightness(0.9);
}

.worker-card:has(.worker-speech.sleeping) .worker-image,
.assigned-worker:has(.worker-speech-small.sleeping) img {
  filter: brightness(0.7) sepia(0.2);
}

/* Worker speech bubbles */
.worker-speech-bubble {
  position: absolute !important;
  top: -60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 100px !important;
  max-width: 200px !important;
  background: #fffbe8 !important;
  color: #222 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(120,80,180,0.15) !important;
  padding: 0.6em 1em !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  z-index: 1000 !important;
  display: none !important;
  pointer-events: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.worker-speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fffbe8;
}

.worker-speech-bubble.show {
  display: block !important;
  animation: fadeInSpeech 0.3s ease-out;
}

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

/* Worker name input styling */
.worker-name-input {
  width: 100% !important;
  background: white !important;
  border: 2px solid #4CAF50 !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: inherit !important;
  font-family: inherit !important;
  text-align: center !important;
  color: #333 !important;
  outline: none !important;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3) !important;
}

.worker-name-input:focus {
  border-color: #2e7d32 !important;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.5) !important;
}

/* Worker Assignment Slots */
.worker-slots-container {
  margin-top: 2rem;
}

.worker-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
  overflow: visible !important;
}

.worker-slot {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  overflow: visible !important;
}

.worker-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.worker-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.worker-slot-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-color);
  margin: 0;
  flex: 1;
}

.worker-slot-title.worker-name-clickable {
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
}

.worker-slot-title.worker-name-clickable:hover {
  color: #4CAF50;
}

.worker-slot-title.worker-name-clickable:hover::after {
  content: " ✏️";
  font-size: 0.8rem;
  opacity: 0.7;
}

.worker-stars-header {
  font-size: 1rem;
  margin-left: 0.5rem;
}

.worker-slot-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.assign-job-btn {
  background: #2d7a2d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.3s ease;
  min-width: 90px;
}

.unassign-job-btn {
  background: #f39c12;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.3s ease;
  min-width: 90px;
}

.unassign-job-btn:hover:not(:disabled) {
  background: #d68910;
}

.unassign-job-btn:disabled {
  background: #7f8c8d;
  cursor: not-allowed;
  opacity: 0.6;
}

.fire-worker-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.fire-worker-btn:hover:not(:disabled) {
  background: #c0392b;
}

.assign-job-btn:disabled,
.fire-worker-btn:disabled {
  background: #7f8c8d;
  cursor: not-allowed;
  opacity: 0.6;
}

.assign-job-btn:hover {
  background: #245024;
}

.assign-job-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.worker-drop-zone {
  min-height: 120px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible !important;
}

.worker-drop-zone.drag-over {
  border-color: #4CAF50;
  background: #f0f8f0;
}

.worker-drop-zone.occupied {
  border: 2px solid #4CAF50;
  background: #f8fff8;
}

.worker-drop-zone .placeholder-text {
  color: #999;
  font-size: 0.9rem;
  text-align: center;
}

.worker-drop-zone .assigned-worker {
  position: relative;
  text-align: center;
  width: 100%;
}

.worker-drop-zone .assigned-worker img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 2px solid #ddd;
}

.worker-drop-zone .assigned-worker-large {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.worker-drop-zone .assigned-worker-large:hover {
  transform: scale(1.02);
}

.worker-drop-zone .assigned-worker-large .worker-image-large {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid #ddd;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s ease;
}

.worker-drop-zone .assigned-worker-large:hover .worker-image-large {
  border-color: #4CAF50;
}

.worker-drop-zone .assigned-worker-large .worker-job-large {
  font-size: 0.9rem;
  color: #666;
  background: rgba(255, 255, 255, 0.8);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}

.worker-drop-zone .assigned-worker .worker-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.25rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  position: relative;
}

.worker-drop-zone .assigned-worker .worker-name:hover {
  background-color: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
}

.worker-drop-zone .assigned-worker .worker-name:hover::after {
  content: "✎";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #4CAF50;
  opacity: 0.8;
}

.worker-drop-zone .assigned-worker .worker-job {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.worker-drop-zone .assigned-worker .worker-stars {
  color: #FFD700;
  font-size: 0.9rem;
}

.worker-progress-bar {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.worker-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #66BB6A);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
}

.worker-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Worker Hunger Bar Styles */
.worker-hunger-bar {
  width: 100%;
  height: 16px;
  background: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
  border: 1px solid #ccc;
}

.worker-hunger-fill {
  height: 100%;
  background: #4CAF50; /* Default green - will be overridden by JavaScript based on hunger level */
  border-radius: 8px;
  transition: width 0.3s ease, background-color 0.3s ease;
  position: relative;
}

.worker-hunger-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* Feeding notification styles */
.feeding-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 10000;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.unlock-slot-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #333;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.unlock-slot-btn:hover {
  background: linear-gradient(135deg, #FFA500, #FF8C00);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);
}

.unlock-slot-btn:disabled {
  background: #666;
  color: #999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Job Assignment Modal */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-content .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.modal-content .close:hover {
  color: #333;
}

.job-option {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 6px;
  padding: 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.job-option:hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));
}

.job-option.locked {
  background: var(--surface-bg);
  border-color: #adb5bd;
  cursor: not-allowed;
  opacity: 0.7;
}

.job-option.locked:hover {
  background: var(--surface-bg);
  border-color: #adb5bd;
}

.job-option.taken {
  background: color-mix(in srgb, #f39c12 8%, var(--card-bg));
  border-color: #f39c12;
  cursor: not-allowed;
  opacity: 0.8;
}

.job-option.taken:hover {
  background: color-mix(in srgb, #f39c12 8%, var(--card-bg));
  border-color: #f39c12;
}

.job-option h4 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
}

.job-option p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

/* Star Rating Display */
.star-rating {
  display: inline-flex;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 1rem;
}

.star.filled {
  color: #FFD700;
}

/* Drag and Drop Styling */
.dragging {
  opacity: 0.7;
  transform: rotate(5deg);
  z-index: 1000;
  pointer-events: none;
}

/* Dark theme adjustments */
[data-theme="dark"] .worker-drop-zone {
  background: #2a2a2a;
  border-color: #555;
}

[data-theme="dark"] .worker-drop-zone.drag-over {
  background: #1a3a1a;
  border-color: #4CAF50;
}

[data-theme="dark"] .worker-drop-zone.occupied {
  background: #1a3a1a;
}

[data-theme="dark"] .worker-drop-zone .placeholder-text {
  color: #888;
}

[data-theme="dark"] .available-worker-slot {
  background: #2a2a2a;
  border-color: #555;
}

[data-theme="dark"] .available-worker-slot:hover {
  background: #1a3a1a;
}

[data-theme="dark"] .available-worker-slot.occupied {
  background: #1a3a1a;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .frontdesk-container > div:first-child {
    flex-direction: column;
    gap: 1rem;
  }
  
  .frontdesk-container > div:first-child > div {
    flex: none;
  }
  
  #availableWorkerSlots {
    flex-direction: column;
    align-items: center;
  }
  
  .worker-slots-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 1rem;
    width: 95%;
  }
}

/* Front Desk Card Overrides */
#ticoCharacterCard.card {
  min-height: unset !important;
  height: 320px !important;
  width: 320px !important;
}

#availableWorkersCard.card {
  min-height: unset !important;
  height: 320px !important;
  width: 320px !important;
}

/* Anomaly detector cursor styles */
body.anomaly-find-mode {
  cursor: url("assets/icons/anomaly resolver cursor.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-analyzing.frame-1 {
  cursor: url("assets/icons/anomaly resolver cursor analyze 1.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-analyzing.frame-2 {
  cursor: url("assets/icons/anomaly resolver cursor analyze 2.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-analyzing.frame-3 {
  cursor: url("assets/icons/anomaly resolver cursor analyze 3.png") 64 64, auto !important;
}

/* Hover-specific cursor styles for anomalies */
body.anomaly-find-mode.anomaly-hover-regular {
  cursor: url("assets/icons/anomaly resolver mild.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-hover-dangerous {
  cursor: url("assets/icons/anomaly resolver severe.png") 64 64, auto !important;
}

/* Override all cursor styles during find mode */
body.anomaly-find-mode *,
body.anomaly-find-mode button,
body.anomaly-find-mode a,
body.anomaly-find-mode input,
body.anomaly-find-mode select,
body.anomaly-find-mode textarea {
  cursor: url("assets/icons/anomaly resolver cursor.png") 64 64, auto !important;
}

/* Override cursor styles for hover states on all elements */
body.anomaly-find-mode.anomaly-hover-regular *,
body.anomaly-find-mode.anomaly-hover-regular button,
body.anomaly-find-mode.anomaly-hover-regular a,
body.anomaly-find-mode.anomaly-hover-regular input,
body.anomaly-find-mode.anomaly-hover-regular select,
body.anomaly-find-mode.anomaly-hover-regular textarea {
  cursor: url("assets/icons/anomaly resolver mild.png") 64 64, auto !important;
}

body.anomaly-find-mode.anomaly-hover-dangerous *,
body.anomaly-find-mode.anomaly-hover-dangerous button,
body.anomaly-find-mode.anomaly-hover-dangerous a,
body.anomaly-find-mode.anomaly-hover-dangerous input,
body.anomaly-find-mode.anomaly-hover-dangerous select,
body.anomaly-find-mode.anomaly-hover-dangerous textarea {
  cursor: url("assets/icons/anomaly resolver severe.png") 64 64, auto !important;
}

/* Override cursor styles during analyzing animation */
body.anomaly-find-mode.anomaly-analyzing.frame-1 *,
body.anomaly-find-mode.anomaly-analyzing.frame-1 button {
  cursor: url("assets/icons/anomaly resolver cursor analyze 1.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-analyzing.frame-2 *,
body.anomaly-find-mode.anomaly-analyzing.frame-2 button {
  cursor: url("assets/icons/anomaly resolver cursor analyze 2.png") 64 64, auto !important;
}
body.anomaly-find-mode.anomaly-analyzing.frame-3 *,
body.anomaly-find-mode.anomaly-analyzing.frame-3 button {
  cursor: url("assets/icons/anomaly resolver cursor analyze 3.png") 64 64, auto !important;
}

/* Soap Generator Anomaly Styles */
.soap-bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.soap-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes soapBubbleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-25%) translateX(-10px) scale(1.1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-50%) translateX(5px) scale(1.05);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-75%) translateX(-5px) scale(0.95);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100%) translateX(10px) scale(0.8);
    opacity: 0;
  }
}

@keyframes soapBubbleScreenFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0.7;
  }
  20% {
    transform: translateY(-20vh) translateX(-15px) scale(1);
    opacity: 0.8;
  }
  40% {
    transform: translateY(-40vh) translateX(20px) scale(1.1);
    opacity: 0.7;
  }
  60% {
    transform: translateY(-60vh) translateX(-10px) scale(1.05);
    opacity: 0.5;
  }
  80% {
    transform: translateY(-80vh) translateX(15px) scale(0.9);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) translateX(-5px) scale(0.7);
    opacity: 0;
  }
}

/* Enhanced soap generator styling when anomaly is active */
.power-generator.soap-theme {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 50%, #a5d6a7 100%) !important;
  border: 2px solid #66bb6a !important;
  box-shadow: 0 0 20px rgba(102, 187, 106, 0.4) !important;
  color: #2e7d32 !important;
}

/* Water Filtration Department Background - Enhanced with Time Variations */
body.water-filtration-bg, html.water-filtration-bg {
  /* Base background - deep industrial blue */
  background: linear-gradient(135deg, #0d1920 0%, #1a2633 30%, #0f2f3b 60%, #1a2633 80%, #0d1920 100%) !important;
}

/* Day time water filtration (6:00-18:00) */
body.water-filtration-bg.day-time, html.water-filtration-bg.day-time {
  background: linear-gradient(135deg, #1a2633 0%, #2d3f4f 30%, #1e3a4a 60%, #2d3f4f 80%, #1a2633 100%) !important;
}

/* Dusk time water filtration (18:00-22:00) */
body.water-filtration-bg.dusk-time, html.water-filtration-bg.dusk-time {
  background: linear-gradient(135deg, #0f1f2b 0%, #1a2633 30%, #0d2535 60%, #1a2633 80%, #0f1f2b 100%) !important;
}

/* Night time water filtration (22:00-6:00) */
body.water-filtration-bg.night-time, html.water-filtration-bg.night-time {
  background: linear-gradient(135deg, #060f15 0%, #0d1920 30%, #0a1a25 60%, #0d1920 80%, #060f15 100%) !important;
}

body.water-filtration-bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  opacity: 0.2;
  pointer-events: none;
  background-image: 
    /* Enhanced horizontal pipes */
    linear-gradient(90deg, transparent 38%, #2196F3 40%, #1976D2 42%, #2196F3 44%, transparent 46%),
    linear-gradient(90deg, transparent 58%, #03A9F4 60%, #0288D1 62%, #03A9F4 64%, transparent 66%),
    linear-gradient(90deg, transparent 78%, #00BCD4 80%, #0097A7 82%, #00BCD4 84%, transparent 86%),
    /* Enhanced vertical pipes */
    linear-gradient(0deg, transparent 28%, #2196F3 30%, #1976D2 32%, #2196F3 34%, transparent 36%),
    linear-gradient(0deg, transparent 68%, #03A9F4 70%, #0288D1 72%, #03A9F4 74%, transparent 76%),
    linear-gradient(0deg, transparent 88%, #00BCD4 90%, #0097A7 92%, #00BCD4 94%, transparent 96%),
    /* Water flow animation patterns */
    linear-gradient(45deg, transparent 48%, rgba(0, 188, 212, 0.3) 49%, rgba(0, 188, 212, 0.5) 50%, rgba(0, 188, 212, 0.3) 51%, transparent 52%),
    linear-gradient(135deg, transparent 48%, rgba(3, 169, 244, 0.3) 49%, rgba(3, 169, 244, 0.5) 50%, rgba(3, 169, 244, 0.3) 51%, transparent 52%),
    /* Enhanced water droplets pattern */
    radial-gradient(circle at 25% 25%, #00BCD4 2px, rgba(0, 188, 212, 0.3) 3px, transparent 4px),
    radial-gradient(circle at 75% 75%, #00E5FF 1.5px, rgba(0, 229, 255, 0.3) 2.5px, transparent 3.5px),
    radial-gradient(circle at 15% 85%, #03A9F4 1.8px, rgba(3, 169, 244, 0.3) 2.8px, transparent 3.8px),
    radial-gradient(circle at 85% 15%, #0091EA 1.2px, rgba(0, 145, 234, 0.3) 2.2px, transparent 3.2px),
    /* Enhanced pipe joints and valves */
    radial-gradient(circle at 50% 50%, #2196F3 3px, #1976D2 4px, transparent 5px),
    radial-gradient(circle at 30% 70%, #03A9F4 2.5px, #0288D1 3.5px, transparent 4.5px);
  background-size: 
    140px 100px, 
    120px 80px, 
    160px 120px,
    100px 140px, 
    80px 120px, 
    120px 160px,
    200px 200px,
    180px 180px,
    50px 50px,
    80px 80px,
    70px 70px,
    90px 90px,
    100px 100px,
    120px 120px;
  background-position: 
    0 0, 
    30px 40px, 
    60px 20px,
    0 0, 
    50px 30px,
    20px 60px,
    0 100px,
    100px 0,
    0 0,
    40px 40px,
    20px 60px,
    60px 20px,
    0 50px,
    80px 10px;
}

/* Time-specific pipe intensity adjustments for water filtration */
body.water-filtration-bg.day-time::before {
  opacity: 0.25; /* Brighter pipes during day */
}

body.water-filtration-bg.dusk-time::before {
  opacity: 0.2; /* Medium pipe visibility during dusk */
}

body.water-filtration-bg.night-time::before {
  opacity: 0.15; /* Dimmer pipes at night */
}

/* Observatory Department Background - Enhanced Mystical with Time Variations */
body.observatory-bg, html.observatory-bg {
  /* Base nighttime observatory background */
  background: linear-gradient(135deg, #0d0a1a 0%, #1a0f2e 20%, #2d1b4e 40%, #3d2666 60%, #2a1850 80%, #1a0f2e 100%) !important;
}

/* Day time observatory (6:00-18:00) */
body.observatory-bg.day-time, html.observatory-bg.day-time {
  background: linear-gradient(135deg, #2a1850 0%, #4a2c6b 20%, #6b4499 40%, #8e5bb8 60%, #b380d9 80%, #9966cc 100%) !important;
}

/* Dusk time observatory (18:00-22:00) */
body.observatory-bg.dusk-time, html.observatory-bg.dusk-time {
  background: linear-gradient(135deg, #1a0f2e 0%, #2d1b4e 20%, #4a2c6b 40%, #6b4499 60%, #4a2c6b 80%, #2d1b4e 100%) !important;
}

/* Night time observatory (22:00-6:00) - most mystical */
body.observatory-bg.night-time, html.observatory-bg.night-time {
  background: linear-gradient(135deg, #000000 0%, #0d0a1a 15%, #1a0f2e 30%, #2d1b4e 50%, #3d2666 70%, #2a1850 85%, #1a0f2e 100%) !important;
}

body.observatory-bg::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
  background-image: 
    /* Enhanced mystical stars with varying sizes */
    radial-gradient(circle at 20% 80%, #ffffff 1.2px, transparent 2.5px),
    radial-gradient(circle at 80% 20%, #e1bee7 1px, transparent 2px),
    radial-gradient(circle at 40% 40%, #bb86fc 0.8px, transparent 1.8px),
    radial-gradient(circle at 90% 70%, #f0e68c 0.6px, transparent 1.2px),
    radial-gradient(circle at 10% 10%, #ce93d8 1.4px, transparent 2.8px),
    radial-gradient(circle at 70% 90%, #f8bbd9 0.9px, transparent 1.8px),
    radial-gradient(circle at 30% 70%, #ffffff 0.7px, transparent 1.4px),
    radial-gradient(circle at 60% 30%, #bb86fc 1.1px, transparent 2.2px),
    radial-gradient(circle at 15% 50%, #dda0dd 0.8px, transparent 1.6px),
    radial-gradient(circle at 85% 85%, #9370db 0.5px, transparent 1px),
    /* Enhanced constellation patterns */
    linear-gradient(47deg, transparent 48%, #bb86fc 49%, #bb86fc 50%, transparent 51%),
    linear-gradient(133deg, transparent 48%, #ce93d8 49%, #ce93d8 50%, transparent 51%),
    linear-gradient(89deg, transparent 48%, #9370db 49%, #9370db 50%, transparent 51%),
    linear-gradient(156deg, transparent 48%, #dda0dd 49%, #dda0dd 50%, transparent 51%),
    /* Mystical energy wisps */
    linear-gradient(45deg, transparent 70%, rgba(187, 134, 252, 0.3) 71%, rgba(187, 134, 252, 0.5) 72%, transparent 73%),
    linear-gradient(135deg, transparent 80%, rgba(206, 147, 216, 0.3) 81%, rgba(206, 147, 216, 0.5) 82%, transparent 83%),
    /* Ancient book spine patterns (enhanced library aesthetic) */
    linear-gradient(90deg, transparent 85%, #4a148c 87%, #6a1b9a 89%, #8e24aa 90%, transparent 92%),
    linear-gradient(90deg, transparent 92%, #7b1fa2 94%, #8e24aa 96%, #9c27b0 97%, transparent 99%);
  background-size: 
    250px 250px,
    200px 200px,
    180px 180px,
    280px 280px,
    160px 160px,
    220px 220px,
    300px 300px,
    190px 190px,
    240px 240px,
    320px 320px,
    400px 400px,
    350px 350px,
    380px 380px,
    420px 420px,
    500px 500px,
    450px 450px,
    50px 800px,
    70px 600px;
  background-position: 
    0 0,
    60px 60px,
    120px 120px,
    180px 40px,
    240px 100px,
    100px 240px,
    140px 50px,
    200px 180px,
    80px 160px,
    260px 80px,
    0 120px,
    220px 60px,
    160px 200px,
    300px 140px,
    40px 80px,
    280px 180px,
    0 0,
    25px 150px;
}

/* Enhanced starry mystical effect for observatory */
body.observatory-bg::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background-image: 
    /* Twinkling stars effect */
    radial-gradient(circle at 25% 15%, #bb86fc 0.5px, transparent 1.2px),
    radial-gradient(circle at 85% 45%, #ffffff 0.4px, transparent 1px),
    radial-gradient(circle at 15% 85%, #ce93d8 0.6px, transparent 1.4px),
    radial-gradient(circle at 75% 25%, #f8bbd9 0.5px, transparent 1.1px),
    radial-gradient(circle at 45% 75%, #bb86fc 0.7px, transparent 1.5px),
    radial-gradient(circle at 65% 55%, #dda0dd 0.4px, transparent 0.9px),
    radial-gradient(circle at 35% 35%, #9370db 0.6px, transparent 1.3px),
    radial-gradient(circle at 95% 15%, #f0e68c 0.3px, transparent 0.8px),
    /* Mystical nebula effect */
    radial-gradient(ellipse 200px 100px at 30% 60%, rgba(187, 134, 252, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 150px 80px at 70% 30%, rgba(206, 147, 216, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 180px 90px at 20% 20%, rgba(147, 112, 219, 0.08) 0%, transparent 70%);
  background-size: 
    500px 500px,
    450px 450px,
    550px 550px,
    480px 480px,
    520px 520px,
    460px 460px,
    540px 540px,
    580px 580px,
    800px 600px,
    700px 500px,
    900px 700px;
  background-position:
    20px 20px,
    300px 150px,
    150px 350px,
    400px 100px,
    100px 400px,
    350px 300px,
    200px 200px,
    450px 250px,
    0 0,
    200px 100px,
    100px 200px;
}

/* Time-specific star intensity adjustments */
body.observatory-bg.day-time::before {
  opacity: 0.3; /* Dimmer stars during day */
}

body.observatory-bg.day-time::after {
  opacity: 0.2; /* Dimmer effects during day */
}

body.observatory-bg.dusk-time::before {
  opacity: 0.6; /* Medium star visibility during dusk */
}

body.observatory-bg.dusk-time::after {
  opacity: 0.35; /* Medium effects during dusk */
}

body.observatory-bg.night-time::before {
  opacity: 0.9; /* Maximum star visibility at night */
}

body.observatory-bg.night-time::after {
  opacity: 0.6; /* Maximum mystical effects at night */
}

/* Stable Light Text Visibility During Nighttime */
body.night-time #lightPercentage,
body.night-time #redlightPercentage,
body.night-time #orangelightPercentage,
body.night-time #yellowlightPercentage,
body.night-time #greenlightPercentage,
body.night-time #bluelightPercentage,
html.night-time #lightPercentage,
html.night-time #redlightPercentage,
html.night-time #orangelightPercentage,
html.night-time #yellowlightPercentage,
html.night-time #greenlightPercentage,
html.night-time #bluelightPercentage {
  color: #fff !important;
  text-shadow: none !important;
}

/* Additional higher specificity selectors for stubborn elements */
body.night-time div#lightPercentage,
body.night-time div#yellowlightPercentage,
body.night-time span#lightPercentage,
body.night-time span#yellowlightPercentage,
html.night-time div#lightPercentage,
html.night-time div#yellowlightPercentage,
html.night-time span#lightPercentage,
html.night-time span#yellowlightPercentage {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Box Generator Mk.2 Rainbow Effect */
.rainbow-effect {
  background: linear-gradient(45deg, 
    #ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00,
    #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff,
    #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040,
    #ff0000);
  background-size: 500% 500%;
  animation: rainbowShift 2s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

/* Enhanced rainbow effect for larger icons */
.rainbow-effect[style*="width: 48px"] {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
  animation: rainbowShift 1.5s ease-in-out infinite, iconPulse 3s ease-in-out infinite;
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 25%; }
  50% { background-position: 200% 50%; }
  75% { background-position: 300% 75%; }
  100% { background-position: 400% 50%; }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Rainbow effect for icons (like Box Generator Mk.2) */
.rainbow-icon {
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
  image-rendering: auto !important;
  animation: hue-shift 4s linear infinite !important;
}

@keyframes hue-shift {
  0% { filter: hue-rotate(0deg) saturate(1.2) brightness(1.1); }
  25% { filter: hue-rotate(90deg) saturate(1.5) brightness(1.2); }
  50% { filter: hue-rotate(180deg) saturate(1.8) brightness(1.3); }
  75% { filter: hue-rotate(270deg) saturate(1.5) brightness(1.2); }
  100% { filter: hue-rotate(360deg) saturate(1.2) brightness(1.1); }
}

/* Box Generator Mk.2 Mega Row Styling */
.mk2-mega-row {
  background: linear-gradient(135deg, 
    rgba(33, 150, 243, 0.1) 0%, 
    rgba(33, 150, 243, 0.05) 50%, 
    rgba(33, 150, 243, 0.1) 100%);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 5px 25px rgba(33, 150, 243, 0.2);
}

/* Mk.2 Generator Buttons */
.mk2-box-generator button {
  transition: all 0.3s ease;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.mk2-box-generator button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mk2-box-generator button:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Enhanced progress bar for Mk.2 */
.mk2-box-generator .progress-bar {
  background: linear-gradient(90deg, #00cc00 0%, #00ff00 50%, #00cc00 100%);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  border-radius: 10px;
}

/* Mk.2 Tracker enhanced styling */
.mk2-tracker {
  background: linear-gradient(135deg, 
    rgba(24, 29, 54, 0.95) 0%, 
    rgba(33, 150, 243, 0.1) 50%, 
    rgba(24, 29, 54, 0.95) 100%) !important;
}

/* Quest System - Character Glow Effect */
.quest-available {
  position: relative;
  cursor: pointer !important;
  animation: questGlow 2s ease-in-out infinite alternate;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.quest-available::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, #ff6b35, #f7931e, #ff6b35, #f7931e);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  animation: questGlowBorder 2s ease-in-out infinite alternate;
}

.quest-available::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(45deg, #ff6b35, #f7931e);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 10;
  animation: questBounce 1s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}

@keyframes questGlow {
  0% {
    box-shadow: 0 0 5px rgba(255, 107, 53, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.8), 0 0 30px rgba(247, 147, 30, 0.6);
  }
}

@keyframes questGlowBorder {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

@keyframes questBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.1);
  }
}

/* Quest System - Character Completion Glow Effect (Green) */
.quest-complete {
  position: relative;
  cursor: pointer !important;
  animation: questCompleteGlow 2s ease-in-out infinite alternate;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.quest-complete::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, #28a745, #20c997, #28a745, #20c997);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  animation: questCompleteGlowBorder 2s ease-in-out infinite alternate;
}

/* Quest completion indicator is now created as a real DOM element */

@keyframes questCompleteGlow {
  0% {
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.8), 0 0 30px rgba(32, 201, 151, 0.6);
  }
}

@keyframes questCompleteGlowBorder {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Quest System - Character Sleeping Glow Effect (Red) */
.quest-sleeping {
  position: relative;
  cursor: pointer !important;
  animation: questSleepingGlow 2s ease-in-out infinite alternate;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.quest-sleeping::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, #dc3545, #c82333, #dc3545, #c82333);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  animation: questSleepingGlowBorder 2s ease-in-out infinite alternate;
}

.quest-sleeping::after {
  content: '😴';
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(45deg, #dc3545, #c82333);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 10;
  animation: questBounce 1s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

@keyframes questSleepingGlow {
  0% {
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.8), 0 0 30px rgba(200, 35, 51, 0.6);
  }
}

@keyframes questSleepingGlowBorder {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Quest dialogue modal styling enhancements */
#questDialogueModal button {
  transition: all 0.2s ease;
}

#questDialogueModal button:hover {
  background: linear-gradient(90deg, #a0522d, #8b4513);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Quest dialogue animations */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Quest dialogue character transitions */
#questDialogueModal img {
  transition: all 0.3s ease;
}

/* Quest dialogue box styling */
#questDialogueModal {
  font-family: 'Orbitron', monospace;
}

/* Quest Speech Bubbles */
.quest-speech-bubble {
  position: absolute;
  background: white;
  color: #111;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
  width: 400px;
  min-width: 400px;
  max-width: 500px;
  z-index: 2000;
  font-weight: bold;
  line-height: 1.4;
  font-family: 'Orbitron', monospace;
  border: 2px solid #d2691e;
  animation: speechBubbleAppear 0.3s ease-out;
  word-wrap: break-word;
  white-space: normal;
}

.quest-speech-left {
  right: 100%;
  top: 10%;
  transform: translateX(-25px) translateY(0);
}

.quest-speech-left::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 40%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 10px solid white;
  filter: drop-shadow(2px 0 0 #d2691e);
}

.quest-speech-right {
  left: 100%;
  top: 10%;
  transform: translateX(25px) translateY(0);
}

.quest-speech-right::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 40%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right: 10px solid white;
  filter: drop-shadow(-2px 0 0 #d2691e);
}

/* Special class for speech bubbles on flipped characters (like Soap) */
.quest-speech-flipped {
  left: 100%;
  top: 10%;
  transform: translateX(25px) translateY(0) scaleX(-1);
}

.quest-speech-flipped::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 40%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 10px solid white;
  filter: drop-shadow(2px 0 0 #d2691e);
}

.quest-speech-flipped {
  animation: speechBubbleAppearFlipped 0.3s ease-out;
}

@keyframes speechBubbleAppearFlipped {
  0% {
    opacity: 0;
    transform: translateX(25px) translateY(0) scaleX(-1) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(25px) translateY(0) scaleX(-1) scale(1);
  }
}

@keyframes speechBubbleAppear {
  0% {
    opacity: 0;
    transform: translateX(-25px) translateY(0) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(-25px) translateY(0) scale(1);
  }
}

.quest-speech-right {
  animation: speechBubbleAppearRight 0.3s ease-out;
}

@keyframes speechBubbleAppearRight {
  0% {
    opacity: 0;
    transform: translateX(25px) translateY(0) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(25px) translateY(0) scale(1);
  }
}

/* Halloween Theme for Cargo Tab */
body.halloween-cargo-active {
  background: linear-gradient(135deg, #1a0d00 0%, #2d0f00 30%, #4a1a00 60%, #1a0d00 100%) !important;
}

body.halloween-cargo-active #home .card {
  background: linear-gradient(135deg, #2d1a0d 0%, #3d2313 100%) !important;
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
  position: relative;
}

/* Spider web decorations for cards */
body.halloween-cargo-active #home .card::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20 M6 6 L34 34 M34 6 L6 34 M20 8 Q12 12 8 20 Q12 28 20 32 Q28 28 32 20 Q28 12 20 8' stroke='%23666' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Alternative spider web in top-left corner for some cards */
body.halloween-cargo-active #home .card:nth-child(even)::before {
  top: -2px;
  left: -2px;
  right: auto;
}

/* Halloween themed text colors */
body.halloween-cargo-active #home .card h2 {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

body.halloween-cargo-active #home .card p {
  color: #ffccaa !important;
}

/* Halloween themed buttons */
body.halloween-cargo-active #home .card button {
  background: linear-gradient(135deg, #ff6b35 0%, #cc3300 100%) !important;
  color: #fff !important;
  border: 1px solid #ff9500 !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

body.halloween-cargo-active #home .card button:hover {
  background: linear-gradient(135deg, #ff9500 0%, #ff3300 100%) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.5) !important;
}

/* Halloween character container */
body.halloween-cargo-active .swaria-box {
  background: linear-gradient(135deg, #2d1a0d 0%, #4a1a00 100%) !important;
  border: 2px solid #ff6b35 !important;
  position: relative;
  overflow: visible;
}



/* Halloween themed delivery card with special effects */
body.halloween-cargo-active #deliveryCard {
  background: linear-gradient(135deg, #2d1a0d 0%, #4a1a00 50%, #2d1a0d 100%) !important;
  border: 3px solid #ff9500 !important;
  box-shadow: 0 0 25px rgba(255, 149, 0, 0.4), inset 0 0 15px rgba(255, 107, 53, 0.2) !important;
}

/* Pulsing Halloween glow effect */
body.halloween-cargo-active #deliveryCard::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 L30 55 M5 30 L55 30 M12 12 L48 48 M48 12 L12 48 M30 15 Q20 20 15 30 Q20 40 30 45 Q40 40 45 30 Q40 20 30 15' stroke='%23ff6b35' stroke-width='1' fill='none' opacity='0.4'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ff9500'/%3E%3C/svg%3E");
  animation: halloweenWebPulse 4s ease-in-out infinite;
}

@keyframes halloweenWebPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Halloween themed stairs/floor button */
body.halloween-cargo-active #stairsCard {
  background: linear-gradient(135deg, #4a1a00 0%, #2d0f00 100%) !important;
  border: 2px solid #ff6b35 !important;
  color: #ff9500 !important;
}

body.halloween-cargo-active #stairsCard:hover {
  background: linear-gradient(135deg, #6b2400 0%, #4a1a00 100%) !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4) !important;
}



/* Halloween themed navigation bar */
body.halloween-cargo-active nav#bottomNav {
  background: linear-gradient(135deg, #2d1a0d 0%, #4a1a00 100%) !important;
  border-top: 2px solid #ff6b35 !important;
  box-shadow: 0 -4px 20px rgba(255, 107, 53, 0.3) !important;
}

body.halloween-cargo-active .navBtn {
  color: #ffccaa !important;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

body.halloween-cargo-active .navBtn:hover {
  background: rgba(255, 107, 53, 0.2) !important;
  border: 1px solid #ff6b35 !important;
  color: #ff9500 !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

body.halloween-cargo-active .navBtn.active {
  background: linear-gradient(135deg, #ff6b35 0%, #cc3300 100%) !important;
  color: #fff !important;
  border: 1px solid #ff9500 !important;
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
}

/* Halloween atmosphere animation */
@keyframes halloweenAtmosphere {
  0%, 100% { 
    opacity: 0.8;
    transform: scale(1);
  }
  33% { 
    opacity: 1;
    transform: scale(1.02);
  }
  66% { 
    opacity: 0.9;
    transform: scale(0.98);
  }
}

/* Halloween Sub-Tab Navigation Styling */
body.halloween-cargo-active #subTabNavBar,
body.halloween-cargo-active .settingsSubTabBar,
body.halloween-cargo-active .achievementsSubTabBar,
body.halloween-cargo-active .cafeteriaSubTabBar,
body.halloween-cargo-active #knowledgeSubTabBar,
body.halloween-event-active #subTabNavBar,
body.halloween-event-active .settingsSubTabBar,
body.halloween-event-active .achievementsSubTabBar,
body.halloween-event-active .cafeteriaSubTabBar,
body.halloween-event-active #knowledgeSubTabBar {
  background: linear-gradient(135deg, #3a2318 0%, #5d2a0f 100%) !important;
  border-top: 2px solid #ff8c42 !important;
  border-bottom: 2px solid #ff8c42 !important;
  box-shadow: 0 -4px 20px rgba(255, 140, 66, 0.4), 0 2px 15px rgba(0, 0, 0, 0.6) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 0 !important;
}

/* Halloween Sub-Tab Buttons */
body.halloween-cargo-active #subTabNavBar button,
body.halloween-cargo-active .settingsSubTabBar button,
body.halloween-cargo-active .achievementsSubTabBar button,
body.halloween-cargo-active .cafeteriaSubTabNav button,
body.halloween-cargo-active .cafeteriaSubTabBtn,
body.halloween-cargo-active #knowledgeSubTabBar button,
body.halloween-cargo-active .generator-feature-btn,
body.halloween-cargo-active .prism-feature-btn,
body.halloween-cargo-active .terrarium-feature-btn,
body.halloween-event-active #subTabNavBar button,
body.halloween-event-active .settingsSubTabBar button,
body.halloween-event-active .achievementsSubTabBar button,
body.halloween-event-active .cafeteriaSubTabNav button,
body.halloween-event-active .cafeteriaSubTabBtn,
body.halloween-event-active #knowledgeSubTabBar button,
body.halloween-event-active .generator-feature-btn,
body.halloween-event-active .prism-feature-btn,
body.halloween-event-active .terrarium-feature-btn {
  background: linear-gradient(135deg, #6b4226 0%, #a0522d 100%) !important;
  color: #fff !important;
  border: 2px solid #daa520 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.3s ease !important;
  padding: 0.6rem 1.2rem !important;
}

/* Halloween Sub-Tab Button Hover */
body.halloween-cargo-active #subTabNavBar button:hover,
body.halloween-cargo-active .settingsSubTabBar button:hover,
body.halloween-cargo-active .achievementsSubTabBar button:hover,
body.halloween-cargo-active .cafeteriaSubTabNav button:hover,
body.halloween-cargo-active .cafeteriaSubTabBtn:hover,
body.halloween-cargo-active #knowledgeSubTabBar button:hover,
body.halloween-cargo-active .generator-feature-btn:hover,
body.halloween-cargo-active .prism-feature-btn:hover,
body.halloween-cargo-active .terrarium-feature-btn:hover,
body.halloween-event-active #subTabNavBar button:hover,
body.halloween-event-active .settingsSubTabBar button:hover,
body.halloween-event-active .achievementsSubTabBar button:hover,
body.halloween-event-active .cafeteriaSubTabNav button:hover,
body.halloween-event-active .cafeteriaSubTabBtn:hover,
body.halloween-event-active #knowledgeSubTabBar button:hover,
body.halloween-event-active .generator-feature-btn:hover,
body.halloween-event-active .prism-feature-btn:hover,
body.halloween-event-active .terrarium-feature-btn:hover {
  background: linear-gradient(135deg, #ff8c42 0%, #d2691e 100%) !important;
  color: #fff !important;
  border: 2px solid #ffa500 !important;
  box-shadow: 0 6px 18px rgba(255, 140, 66, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Halloween Sub-Tab Button Active */
body.halloween-cargo-active #subTabNavBar button.active,
body.halloween-cargo-active .settingsSubTabBar button.active,
body.halloween-cargo-active .achievementsSubTabBar button.active,
body.halloween-cargo-active .cafeteriaSubTabNav button.active,
body.halloween-cargo-active .cafeteriaSubTabBtn.active,
body.halloween-cargo-active #knowledgeSubTabBar button.active,
body.halloween-cargo-active .generator-feature-btn.active,
body.halloween-cargo-active .prism-feature-btn.active,
body.halloween-cargo-active .terrarium-feature-btn.active,
body.halloween-event-active #subTabNavBar button.active,
body.halloween-event-active .settingsSubTabBar button.active,
body.halloween-event-active .achievementsSubTabBar button.active,
body.halloween-event-active .cafeteriaSubTabNav button.active,
body.halloween-event-active .cafeteriaSubTabBtn.active,
body.halloween-event-active #knowledgeSubTabBar button.active,
body.halloween-event-active .generator-feature-btn.active,
body.halloween-event-active .prism-feature-btn.active,
body.halloween-event-active .terrarium-feature-btn.active {
  background: linear-gradient(135deg, #ff9500 0%, #ff6b35 100%) !important;
  color: #fff !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 25px rgba(255, 149, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  font-weight: 700 !important;
  transform: scale(1.05) !important;
}

/* Halloween Sub-Tab Button Active Hover */
body.halloween-cargo-active #subTabNavBar button.active:hover,
body.halloween-cargo-active .settingsSubTabBar button.active:hover,
body.halloween-cargo-active .achievementsSubTabBar button.active:hover,
body.halloween-cargo-active .cafeteriaSubTabNav button.active:hover,
body.halloween-cargo-active .cafeteriaSubTabBtn.active:hover,
body.halloween-cargo-active #knowledgeSubTabBar button.active:hover,
body.halloween-cargo-active #knowledgeSubTabNav button.active:hover,
body.halloween-cargo-active .generator-feature-btn.active:hover,
body.halloween-cargo-active .prism-feature-btn.active:hover,
body.halloween-cargo-active .terrarium-feature-btn.active:hover,
body.halloween-event-active #subTabNavBar button.active:hover,
body.halloween-event-active .settingsSubTabBar button.active:hover,
body.halloween-event-active .achievementsSubTabBar button.active:hover,
body.halloween-event-active .cafeteriaSubTabNav button.active:hover,
body.halloween-event-active .cafeteriaSubTabBtn.active:hover,
body.halloween-event-active #knowledgeSubTabBar button.active:hover,
body.halloween-event-active #knowledgeSubTabNav button.active:hover,
body.halloween-event-active .generator-feature-btn.active:hover,
body.halloween-event-active .prism-feature-btn.active:hover,
body.halloween-event-active .terrarium-feature-btn.active:hover {
  background: linear-gradient(135deg, #ffcc66 0%, #ff9500 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 30px rgba(255, 204, 102, 1.0), inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

/* Additional Halloween Polish for Navigation Containers */
body.halloween-cargo-active .cafeteriaSubTabNav,
body.halloween-event-active .cafeteriaSubTabNav {
  justify-content: center !important;
  padding: 8px 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

body.halloween-cargo-active #knowledgeSubTabNav,
body.halloween-event-active #knowledgeSubTabNav {
  justify-content: center !important;
  padding: 8px 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Halloween Navigation Button Spacing */
body.halloween-cargo-active #subTabNavBar,
body.halloween-cargo-active .settingsSubTabBar,
body.halloween-cargo-active .achievementsSubTabBar,
body.halloween-cargo-active .cafeteriaSubTabNav,
body.halloween-cargo-active #knowledgeSubTabBar,
body.halloween-cargo-active #knowledgeSubTabNav,
body.halloween-event-active #subTabNavBar,
body.halloween-event-active .settingsSubTabBar,
body.halloween-event-active .achievementsSubTabBar,
body.halloween-event-active .cafeteriaSubTabNav,
body.halloween-event-active #knowledgeSubTabBar,
body.halloween-event-active #knowledgeSubTabNav {
  gap: 0.8rem !important;
}

/* Halloween Front Desk Content */
body.halloween-cargo-active #frontdesk,
body.halloween-event-active #frontdesk {
  background: linear-gradient(135deg, #1a0d00 0%, #2d0f00 30%, #4a1a00 60%, #1a0d00 100%) !important;
}

body.halloween-cargo-active #frontdesk .frontdesk-container,
body.halloween-event-active #frontdesk .frontdesk-container {
  color: #ffccaa !important;
}

/* Halloween Front Desk Character Cards */
body.halloween-cargo-active #frontdesk .card,
body.halloween-cargo-active #frontdesk .swaria-character-box,
body.halloween-event-active #frontdesk .card,
body.halloween-event-active #frontdesk .swaria-character-box {
  background: linear-gradient(135deg, #2d1a0d 0%, #3d2313 100%) !important;
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
  position: relative;
}

/* Spider web decorations for front desk cards */
body.halloween-cargo-active #frontdesk .card::before,
body.halloween-cargo-active #frontdesk .swaria-character-box::before,
body.halloween-event-active #frontdesk .card::before,
body.halloween-event-active #frontdesk .swaria-character-box::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20 M6 6 L34 34 M34 6 L6 34 M20 8 Q12 12 8 20 Q12 28 20 32 Q28 28 32 20 Q28 12 20 8' stroke='%23666' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Halloween Front Desk Text Styling */
body.halloween-cargo-active #frontdesk h3,
body.halloween-event-active #frontdesk h3 {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

body.halloween-cargo-active #frontdesk .worker-placeholder,
body.halloween-event-active #frontdesk .worker-placeholder {
  color: #ff8c42 !important;
}

/* Halloween Front Desk Available Worker Slots */
body.halloween-cargo-active #frontdesk .available-worker-slot,
body.halloween-event-active #frontdesk .available-worker-slot {
  border: 2px dashed #ff6b35 !important;
  background: rgba(45, 26, 13, 0.7) !important;
  color: #ffccaa !important;
}

/* Halloween Cafeteria Main Hall Content */
body.halloween-cargo-active #cafeteriaMainSubTab,
body.halloween-event-active #cafeteriaMainSubTab {
  background: transparent !important;
  color: #ffccaa !important;
}

body.halloween-cargo-active #cafeteriaTopCounter,
body.halloween-event-active #cafeteriaTopCounter {
  background: linear-gradient(135deg, #2d1a0d 0%, #3d2313 100%) !important;
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
  position: relative;
}

/* Halloween Cafeteria Counter Spider Web */
body.halloween-cargo-active #cafeteriaTopCounter::before,
body.halloween-event-active #cafeteriaTopCounter::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20 M6 6 L34 34 M34 6 L6 34 M20 8 Q12 12 8 20 Q12 28 20 32 Q28 28 32 20 Q28 12 20 8' stroke='%23666' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

body.halloween-cargo-active #cafeteriaTopCounter h3,
body.halloween-event-active #cafeteriaTopCounter h3 {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

body.halloween-cargo-active #cafeteriaTopCounter div,
body.halloween-event-active #cafeteriaTopCounter div {
  color: #ffccaa !important;
}

/* Remove theme background from Break Times card - keep neutral appearance */
#cafeteriaTopCounter {
  background: #f5f5f5 !important;
  border: 2px solid #ddd !important;
}

/* Halloween Kitchen Content */
body.halloween-cargo-active #kitchenSubTab,
body.halloween-event-active #kitchenSubTab {
  background: transparent !important;
  color: #ffccaa !important;
}

/* Halloween Kitchen Cards */
body.halloween-cargo-active #kitchenSubTab .card,
body.halloween-cargo-active #kitchenSubTab .kitchen-character-card,
body.halloween-cargo-active #kitchenSubTab .mixing-card,
body.halloween-cargo-active #kitchenSubTab .ingredient-card,
body.halloween-event-active #kitchenSubTab .card,
body.halloween-event-active #kitchenSubTab .kitchen-character-card,
body.halloween-event-active #kitchenSubTab .mixing-card,
body.halloween-event-active #kitchenSubTab .ingredient-card {
  background: linear-gradient(135deg, #2d1a0d 0%, #3d2313 100%) !important;
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
  position: relative;
}

/* Spider web decorations for kitchen cards */
body.halloween-cargo-active #kitchenSubTab .card::before,
body.halloween-event-active #kitchenSubTab .card::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20 M6 6 L34 34 M34 6 L6 34 M20 8 Q12 12 8 20 Q12 28 20 32 Q28 28 32 20 Q28 12 20 8' stroke='%23666' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Halloween Kitchen Text Styling */
body.halloween-cargo-active #kitchenSubTab h3,
body.halloween-event-active #kitchenSubTab h3 {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

body.halloween-cargo-active #kitchenSubTab p,
body.halloween-event-active #kitchenSubTab p {
  color: #ffccaa !important;
}

/* Halloween Kitchen Buttons */
body.halloween-cargo-active #kitchenSubTab button,
body.halloween-event-active #kitchenSubTab button {
  background: linear-gradient(135deg, #ff6b35 0%, #cc3300 100%) !important;
  color: #fff !important;
  border: 1px solid #ff9500 !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

body.halloween-cargo-active #kitchenSubTab button:hover,
body.halloween-event-active #kitchenSubTab button:hover {
  background: linear-gradient(135deg, #ff9500 0%, #ff3300 100%) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.5) !important;
}

/* Halloween Settings Cards */
body.halloween-cargo-active #settings .card,
body.halloween-event-active #settings .card {
  background: linear-gradient(135deg, #2d1a0d 0%, #3d2313 100%) !important;
  border: 2px solid #ff6b35 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
  position: relative;
}

/* Spider web decorations for settings cards */
body.halloween-cargo-active #settings .card::before,
body.halloween-event-active #settings .card::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20 M6 6 L34 34 M34 6 L6 34 M20 8 Q12 12 8 20 Q12 28 20 32 Q28 28 32 20 Q28 12 20 8' stroke='%23666' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Halloween Settings Text Styling */
body.halloween-cargo-active #settings h2,
body.halloween-cargo-active #settings h3,
body.halloween-cargo-active #settings h4,
body.halloween-event-active #settings h2,
body.halloween-event-active #settings h3,
body.halloween-event-active #settings h4 {
  color: #ff9500 !important;
  text-shadow: 0 0 8px rgba(255, 149, 0, 0.4) !important;
}

body.halloween-cargo-active #settings p,
body.halloween-cargo-active #settings label,
body.halloween-cargo-active #settings span:not(.close),
body.halloween-event-active #settings p,
body.halloween-event-active #settings label,
body.halloween-event-active #settings span:not(.close) {
  color: #ffccaa !important;
}

/* Halloween Settings Buttons */
body.halloween-cargo-active #settings button,
body.halloween-event-active #settings button {
  background: linear-gradient(135deg, #ff6b35 0%, #cc3300 100%) !important;
  color: #fff !important;
  border: 1px solid #ff9500 !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

body.halloween-cargo-active #settings button:hover,
body.halloween-event-active #settings button:hover {
  background: linear-gradient(135deg, #ff9500 0%, #ff3300 100%) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.5) !important;
}

/* Halloween Settings Form Elements */
body.halloween-cargo-active #settings select,
body.halloween-cargo-active #settings input[type="text"],
body.halloween-cargo-active #settings input[type="range"],
body.halloween-event-active #settings select,
body.halloween-event-active #settings input[type="text"],
body.halloween-event-active #settings input[type="range"] {
  background: rgba(45, 26, 13, 0.8) !important;
  border: 1px solid #ff6b35 !important;
  color: #ffccaa !important;
}

body.halloween-cargo-active #settings input[type="checkbox"],
body.halloween-event-active #settings input[type="checkbox"] {
  accent-color: #ff6b35 !important;
}

/* Halloween Settings Background Areas */
body.halloween-cargo-active #settings,
body.halloween-event-active #settings {
  background: transparent !important;
  color: #ffccaa !important;
}

/* Halloween Redeem Code History */
body.halloween-cargo-active #redeemCodeHistory,
body.halloween-event-active #redeemCodeHistory {
  background: rgba(45, 26, 13, 0.6) !important;
  border: 1px solid #ff6b35 !important;
  color: #ffccaa !important;
}

/* Remove Halloween background from Generator Box Gen Area */
body.halloween-cargo-active #generatorBoxGenArea,
body.halloween-event-active #generatorBoxGenArea {
  background: transparent !important;
}

/* Halloween + Recorder Ghost Dimming Effect */
.halloween-recorder-ghost {
  opacity: 0.1 !important;
  filter: brightness(0.1) !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Tree of Horrors Upgrade System Styles */
#treeCanvasContainer {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#treeCanvasContainer:active {
  cursor: grabbing;
}

/* Disable scrolling when Tree of Horrors is active */
body.tree-horrors-active {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

html.tree-horrors-active {
  overflow: hidden !important;
}

.tree-upgrade-node {
  display: inline-block;
  margin: 10px;
}

.upgrade-button {
  width: 280px;
  min-height: 120px;
  background: linear-gradient(135deg, #ff6600, #cc4400);
  border: 3px solid #ff8800;
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  transition: none;
  box-shadow: none;
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.upgrade-button:hover {
  transform: none;
  box-shadow: none;
  border-color: #ff8800;
}

.upgrade-button.can-afford {
  border-color: #00ff88;
  box-shadow: none;
  animation: none;
}

.upgrade-button.purchased {
  background: linear-gradient(135deg, #444444, #222222);
  border-color: #666666;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  position: relative;
  z-index: 10;
}

.upgrade-button.purchased:hover {
  transform: none;
  box-shadow: none;
}

.upgrade-title {
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

.upgrade-description {
  font-size: 13px;
  color: #ffeecc;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
  text-align: center;
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-cost {
  font-size: 14px;
  font-weight: bold;
  color: #ffdd99;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

.upgrade-effect {
  font-size: 16px;
  font-weight: bold;
  color: #4CAF50;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: 4px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Ensure hexed shard upgrade effects display properly */
.upgrade-button.hexed-shard-upgrade .upgrade-effect {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.upgrade-button.purchased .upgrade-cost {
  color: #aaaaaa;
}

/* Allow hex deposit on purchased upgrades (override not-allowed cursor) */
.upgrade-button.purchased.can-hex {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.upgrade-button.purchased.fully-hexed {
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, #8b2bea, #b967ff) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.6) !important;
}

.upgrade-button.purchased.fully-hexed .upgrade-cost {
  color: #ffffff !important;
}

.upgrade-button.purchased.fully-hexed .hex-effect-description {
  color: #ffffff !important;
}

/* Swandy Shard upgrade button (red/purple theme) */
.upgrade-button.shard-upgrade {
  background: linear-gradient(135deg, #cc0066, #6600cc);
  border: 3px solid #aa0088;
}

.upgrade-button.shard-upgrade:hover {
  border-color: #ff00aa;
}

.upgrade-button.shard-upgrade.can-afford {
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(204, 0, 102, 0.6);
  animation: pulse-shard 2s infinite;
}

.upgrade-button.shard-upgrade.purchased {
  background: linear-gradient(135deg, #553344, #332244);
  border-color: #664466;
}

.upgrade-button.shard-upgrade.purchased .upgrade-cost {
  color: #aa88aa;
}

.upgrade-button.shard-upgrade.locked {
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.3), rgba(102, 0, 204, 0.3));
  border-color: rgba(170, 0, 136, 0.3);
}

.upgrade-button.shard-upgrade.semi-locked {
  background: linear-gradient(135deg, rgba(204, 0, 102, 0.6), rgba(102, 0, 204, 0.6));
  border-color: rgba(170, 0, 136, 0.6);
}

@keyframes pulse-shard {
  0%, 100% {
    box-shadow: 0 0 10px rgba(204, 0, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(204, 0, 102, 0.8);
  }
}

/* Hexed Swandy Shard Upgrade Styles (HSS Branch) */
.upgrade-button.hexed-shard-upgrade {
  background: linear-gradient(135deg, #2d1b3d, #1a0f2e);
  border: 3px solid #ffffff;
}

.upgrade-button.hexed-shard-upgrade:hover {
  border-color: #ccccff;
}

.upgrade-button.hexed-shard-upgrade.can-afford {
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.8);
  animation: pulse-hexed-shard 2s infinite;
}

.upgrade-button.hexed-shard-upgrade.purchased {
  background: linear-gradient(135deg, #1a0f2e, #0d0515);
  border-color: #9999cc;
}

.upgrade-button.hexed-shard-upgrade.purchased .upgrade-cost {
  color: #ccaaff;
}

.upgrade-button.hexed-shard-upgrade.locked {
  background: linear-gradient(135deg, rgba(45, 27, 61, 0.3), rgba(26, 15, 46, 0.3));
  border-color: rgba(255, 255, 255, 0.3);
}

.upgrade-button.hexed-shard-upgrade.semi-locked {
  background: linear-gradient(135deg, rgba(45, 27, 61, 0.6), rgba(26, 15, 46, 0.6));
  border-color: rgba(255, 255, 255, 0.6);
}

@keyframes pulse-hexed-shard {
  0%, 100% {
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.9);
  }
}

/* Locked upgrade button states */
.upgrade-button.locked {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.3), rgba(204, 68, 0, 0.3));
  border-color: rgba(255, 136, 0, 0.3);
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
  visibility: hidden;
}

.tree-upgrade-node.locked {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.tree-upgrade-node.unlocked {
  opacity: 1;
}

/* Semi-locked upgrade button states (visible but not purchasable) */
.upgrade-button.semi-locked {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.6), rgba(204, 68, 0, 0.6));
  border-color: rgba(255, 136, 0, 0.6);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.tree-upgrade-node.semi-locked {
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

/* Connection lines between upgrades */
.upgrade-connection-line {
  z-index: -1;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255, 136, 0, 0.5);
}

.upgrade-connection-line.active {
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(255, 136, 0, 0.8);
}

/* Swandy Crusher Grid Styles */
.swandy-cell {
  width: 60px;
  height: 60px;
  background: rgba(255, 136, 0, 0.15);
  border: 2px solid rgba(255, 136, 0, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.swandy-cell:hover {
  background: rgba(255, 136, 0, 0.25);
  border-color: rgba(255, 136, 0, 0.5);
  transform: scale(1.05);
}

.swandy-cell.selected {
  background: rgba(255, 200, 0, 0.4);
  border-color: #ffdd00;
  box-shadow: 0 0 15px rgba(255, 221, 0, 0.6);
  transform: scale(1.1);
}

.swandy-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.swandy-cell:hover .swandy-icon {
  transform: scale(1.1);
}

.swandy-cell.selected .swandy-icon {
  transform: scale(1.15);
}

/* Animation for shaking before shattering */
@keyframes swandy-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-2px, -2px) rotate(-2deg); }
  20% { transform: translate(2px, 2px) rotate(2deg); }
  30% { transform: translate(-2px, 2px) rotate(-1deg); }
  40% { transform: translate(2px, -2px) rotate(1deg); }
  50% { transform: translate(-2px, -2px) rotate(-2deg); }
  60% { transform: translate(2px, 2px) rotate(2deg); }
  70% { transform: translate(-2px, 2px) rotate(-1deg); }
  80% { transform: translate(2px, -2px) rotate(1deg); }
  90% { transform: translate(-2px, -2px) rotate(-2deg); }
}

.swandy-cell.shaking {
  animation: swandy-shake 0.5s ease-in-out;
}

/* Swap animation */
.swandy-cell.swapping {
  transition: transform 0.3s ease-out;
  z-index: 10;
}

.swandy-cell.swapping .blaster-arrows {
  pointer-events: none;
}

/* Disable blaster pulse animation during swap */
.swandy-cell.swandy-blaster.swapping {
  animation: none !important;
}

/* Disable arrow float animation during swap */
.swandy-cell.swapping .arrow-left,
.swandy-cell.swapping .arrow-right,
.swandy-cell.swapping .arrow-up,
.swandy-cell.swapping .arrow-down {
  animation: none !important;
}

/* Animation for matching Swandies - Shatter effect */
@keyframes swandy-shatter {
  0% { 
    transform: scale(1) rotate(0deg); 
    opacity: 1; 
  }
  30% { 
    transform: scale(1.15) rotate(5deg); 
    opacity: 1; 
  }
  100% { 
    transform: scale(0.3) rotate(180deg); 
    opacity: 0; 
  }
}

.swandy-cell.matching {
  animation: swandy-shatter 0.5s ease-out forwards;
  overflow: visible;
}

.swandy-cell.matching .swandy-icon {
  animation: swandy-icon-shatter 0.5s ease-out forwards;
}

@keyframes swandy-icon-shatter {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  30% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
    filter: brightness(1.5);
  }
  60% {
    transform: scale(0.8) rotate(15deg);
    opacity: 0.7;
    filter: brightness(1.8) blur(1px);
  }
  100% {
    transform: scale(0.2) rotate(180deg);
    opacity: 0;
    filter: brightness(2) blur(3px);
  }
}

.shatter-fragment {
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 10;
}

@keyframes shatter-fragment-1 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(-30px, -30px) rotate(-180deg) scale(0.3); 
    opacity: 0; 
  }
}

@keyframes shatter-fragment-2 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(30px, -35px) rotate(200deg) scale(0.3); 
    opacity: 0; 
  }
}

@keyframes shatter-fragment-3 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(-35px, 25px) rotate(-220deg) scale(0.3); 
    opacity: 0; 
  }
}

@keyframes shatter-fragment-4 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(35px, 30px) rotate(240deg) scale(0.3); 
    opacity: 0; 
  }
}

@keyframes shatter-fragment-5 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(0, -40px) rotate(180deg) scale(0.2); 
    opacity: 0; 
  }
}

@keyframes shatter-fragment-6 {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translate(0, 40px) rotate(-180deg) scale(0.2); 
    opacity: 0; 
  }
}

/* Animation for falling Swandies */
@keyframes swandy-fall {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.swandy-cell.falling {
  animation: swandy-fall 0.3s ease-out;
}

/* Swandy Blaster styles */
.swandy-cell.swandy-blaster {
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  transform-origin: center center;
}

/* Only animate when selected or being hovered */
.swandy-cell.swandy-blaster.selected,
.swandy-cell.swandy-blaster:hover {
  animation: blasterPulse 1.5s ease-in-out infinite;
}

.blaster-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  pointer-events: none;
  font-size: 32px;
  font-weight: bold;
  color: white;
  z-index: 10;
  will-change: auto;
}

.blaster-horizontal .blaster-arrows {
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

.blaster-vertical .blaster-arrows {
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.arrow-left, .arrow-right, .arrow-up, .arrow-down {
  animation: arrowFloat 1s ease-in-out infinite;
  display: inline-block;
}

/* Color-specific text shadows for arrows */
.blaster-color-red .arrow-left,
.blaster-color-red .arrow-right,
.blaster-color-red .arrow-up,
.blaster-color-red .arrow-down {
  text-shadow: 
    -2px -2px 0 #660000,
    2px -2px 0 #660000,
    -2px 2px 0 #660000,
    2px 2px 0 #660000,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-orange .arrow-left,
.blaster-color-orange .arrow-right,
.blaster-color-orange .arrow-up,
.blaster-color-orange .arrow-down {
  text-shadow: 
    -2px -2px 0 #8B4500,
    2px -2px 0 #8B4500,
    -2px 2px 0 #8B4500,
    2px 2px 0 #8B4500,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-yellow .arrow-left,
.blaster-color-yellow .arrow-right,
.blaster-color-yellow .arrow-up,
.blaster-color-yellow .arrow-down {
  text-shadow: 
    -2px -2px 0 #8B8B00,
    2px -2px 0 #8B8B00,
    -2px 2px 0 #8B8B00,
    2px 2px 0 #8B8B00,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-green .arrow-left,
.blaster-color-green .arrow-right,
.blaster-color-green .arrow-up,
.blaster-color-green .arrow-down {
  text-shadow: 
    -2px -2px 0 #004d00,
    2px -2px 0 #004d00,
    -2px 2px 0 #004d00,
    2px 2px 0 #004d00,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-blue .arrow-left,
.blaster-color-blue .arrow-right,
.blaster-color-blue .arrow-up,
.blaster-color-blue .arrow-down {
  text-shadow: 
    -2px -2px 0 #00004d,
    2px -2px 0 #00004d,
    -2px 2px 0 #00004d,
    2px 2px 0 #00004d,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-purple .arrow-left,
.blaster-color-purple .arrow-right,
.blaster-color-purple .arrow-up,
.blaster-color-purple .arrow-down {
  text-shadow: 
    -2px -2px 0 #4d004d,
    2px -2px 0 #4d004d,
    -2px 2px 0 #4d004d,
    2px 2px 0 #4d004d,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.blaster-color-white .arrow-left,
.blaster-color-white .arrow-right,
.blaster-color-white .arrow-up,
.blaster-color-white .arrow-down {
  text-shadow: 
    -2px -2px 0 #666666,
    2px -2px 0 #666666,
    -2px 2px 0 #666666,
    2px 2px 0 #666666,
    0 0 5px rgba(0, 0, 0, 0.8);
}

.arrow-right {
  animation-delay: 0.5s;
}

.arrow-down {
  animation-delay: 0.5s;
}

/* Blaster beam animation */
.blaster-beam {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: beamPulse 0.5s ease-out forwards;
}

.blaster-beam-horizontal {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.blaster-beam-vertical {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

@keyframes beamPulse {
  0% {
    opacity: 0;
    filter: brightness(2);
  }
  50% {
    opacity: 1;
    filter: brightness(3);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

@keyframes blasterPulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

@keyframes arrowFloat {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Blaster activation animations */
.swandy-cell.blaster-wipe-horizontal {
  animation: horizontalWipe 0.4s ease-out forwards;
}

.swandy-cell.blaster-wipe-vertical {
  animation: verticalWipe 0.4s ease-out forwards;
}

.swandy-cell.blaster-wipe-explosion {
  animation: explosionWipe 0.5s ease-out forwards;
}

@keyframes horizontalWipe {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(1.3) scaleY(0.7);
    opacity: 0.8;
    filter: brightness(2);
  }
  100% {
    transform: scaleX(2) scaleY(0.3);
    opacity: 0;
  }
}

@keyframes verticalWipe {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.7) scaleY(1.3);
    opacity: 0.8;
    filter: brightness(2);
  }
  100% {
    transform: scaleX(0.3) scaleY(2);
    opacity: 0;
  }
}

@keyframes explosionWipe {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.5);
    opacity: 1;
    filter: brightness(2) saturate(2);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    filter: brightness(0);
  }
}

.swandy-orb {
  position: relative;
}

.orb-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
}

@keyframes orbPulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1.2);
  }
  50% { 
    transform: scale(1.1);
    filter: brightness(1.5);
  }
}

@keyframes orbGlowPulse {
  0%, 100% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes orbExplosion {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    width: 600px;
    height: 600px;
    opacity: 0.8;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0;
  }
}

.swandy-cell.orb-wipe {
  animation: orbWipeEffect 0.5s ease-out forwards;
}

@keyframes orbWipeEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.4);
    opacity: 1;
    filter: brightness(3) saturate(2);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
    filter: brightness(0);
  }
}

.orb-activating {
  animation: orbActivation 0.5s ease-in-out forwards, orbShake 0.15s linear infinite 0.5s;
  z-index: 200 !important;
}

@keyframes orbActivation {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.3) translateY(-15px);
  }
}

@keyframes orbShake {
  0%, 100% {
    transform: scale(1.3) translateY(-15px) translateX(0);
  }
  10% {
    transform: scale(1.3) translateY(-15px) translateX(-8px) rotate(-3deg);
  }
  20% {
    transform: scale(1.3) translateY(-15px) translateX(8px) rotate(3deg);
  }
  30% {
    transform: scale(1.3) translateY(-15px) translateX(-7px) rotate(-2deg);
  }
  40% {
    transform: scale(1.3) translateY(-15px) translateX(7px) rotate(2deg);
  }
  50% {
    transform: scale(1.3) translateY(-15px) translateX(-6px) rotate(-1deg);
  }
  60% {
    transform: scale(1.3) translateY(-15px) translateX(6px) rotate(1deg);
  }
  70% {
    transform: scale(1.3) translateY(-15px) translateX(-4px) rotate(-1deg);
  }
  80% {
    transform: scale(1.3) translateY(-15px) translateX(4px) rotate(1deg);
  }
  90% {
    transform: scale(1.3) translateY(-15px) translateX(-2px) rotate(0deg);
  }
}

.orb-exploding {
  animation: orbViolentShake 0.5s linear infinite !important;
}

@keyframes orbViolentShake {
  0%, 100% {
    transform: scale(1.3) translateY(-15px) translateX(0) rotate(0deg);
  }
  5% {
    transform: scale(1.3) translateY(-15px) translateX(-12px) rotate(-8deg);
  }
  10% {
    transform: scale(1.3) translateY(-15px) translateX(12px) rotate(8deg);
  }
  15% {
    transform: scale(1.3) translateY(-15px) translateX(-10px) rotate(-6deg);
  }
  20% {
    transform: scale(1.3) translateY(-15px) translateX(10px) rotate(6deg);
  }
  25% {
    transform: scale(1.3) translateY(-15px) translateX(-12px) rotate(-7deg);
  }
  30% {
    transform: scale(1.3) translateY(-15px) translateX(12px) rotate(7deg);
  }
  35% {
    transform: scale(1.3) translateY(-15px) translateX(-10px) rotate(-5deg);
  }
  40% {
    transform: scale(1.3) translateY(-15px) translateX(10px) rotate(5deg);
  }
  45% {
    transform: scale(1.3) translateY(-15px) translateX(-11px) rotate(-6deg);
  }
  50% {
    transform: scale(1.3) translateY(-15px) translateX(11px) rotate(6deg);
  }
  55% {
    transform: scale(1.3) translateY(-15px) translateX(-10px) rotate(-4deg);
  }
  60% {
    transform: scale(1.3) translateY(-15px) translateX(10px) rotate(4deg);
  }
  65% {
    transform: scale(1.3) translateY(-15px) translateX(-9px) rotate(-5deg);
  }
  70% {
    transform: scale(1.3) translateY(-15px) translateX(9px) rotate(5deg);
  }
  75% {
    transform: scale(1.3) translateY(-15px) translateX(-8px) rotate(-3deg);
  }
  80% {
    transform: scale(1.3) translateY(-15px) translateX(8px) rotate(3deg);
  }
  85% {
    transform: scale(1.3) translateY(-15px) translateX(-7px) rotate(-2deg);
  }
  90% {
    transform: scale(1.3) translateY(-15px) translateX(7px) rotate(2deg);
  }
  95% {
    transform: scale(1.3) translateY(-15px) translateX(-5px) rotate(-1deg);
  }
}

.shockwave-hit {
  animation: shockwaveHit 0.4s ease-out;
}

@keyframes shockwaveHit {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  30% {
    filter: brightness(4) saturate(3);
    transform: scale(1.4);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

.orb-laser-hit {
  animation: laserHit 0.3s ease-out;
}

@keyframes laserHit {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(3) saturate(2);
    transform: scale(1.2);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

@keyframes laserPulse {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* Combo notification animation */
@keyframes comboPopup {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}

/* Combo display pulse animation */
@keyframes comboPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

.combo-notification {
  animation: comboPopup 1s ease-out forwards;
}

/* Score popup animation on matched tiles */
@keyframes scorePopup {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1.2); opacity: 0; }
}

.score-popup {
  animation: scorePopup 0.8s ease-out forwards;
}

/* Drop in animation for new grid after shattery reset */
@keyframes dropIn {
  0% { 
    transform: translateY(-600px); 
    opacity: 0; 
  }
  60% { 
    transform: translateY(10px); 
    opacity: 1; 
  }
  80% { 
    transform: translateY(-5px); 
  }
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

/* Combo text pulse animation */
@keyframes comboTextPulse {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  20% { transform: translateX(-50%) scale(1.3); opacity: 1; }
  80% { transform: translateX(-50%) scale(1.3); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 0; }
}

/* Hexed tile styling */
.swandy-cell.hexed {
  background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 0 15px rgba(157, 78, 221, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: hexedPulse 2s ease-in-out infinite;
}

.swandy-cell.hexed:hover {
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.9), inset 0 0 15px rgba(255, 255, 255, 0.4);
}

@keyframes hexedPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(157, 78, 221, 0.9), inset 0 0 15px rgba(255, 255, 255, 0.5);
  }
}

/* Hexagon projectile - outer purple border */
.hexagon-projectile {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #9d4edd;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transform: translate(-50%, -50%);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(157, 78, 221, 1), 0 0 35px rgba(157, 78, 221, 0.6);
}

/* Hexagon projectile - inner white */
.hexagon-projectile-inner {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: rgba(255, 255, 255, 0.3);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon-projectile.spinning {
  animation: hexagonSpin 0.5s linear infinite;
}

@keyframes hexagonSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Hex Staff Styles */
#hexStaffToggleBtn.active {
  background: linear-gradient(135deg, #8b2bea, #b967ff) !important;
  border-color: #b967ff !important;
  box-shadow: 0 0 20px rgba(139, 43, 234, 0.8), inset 0 0 10px rgba(185, 103, 255, 0.4);
  transform: scale(1.05);
}

#hexStaffModeNormal.active {
  background: linear-gradient(135deg, #8b2bea, #b967ff) !important;
  border-color: #b967ff !important;
  box-shadow: 0 0 15px rgba(139, 43, 234, 0.6);
  font-weight: bold;
}

#hexStaffModeBlaster.active {
  background: linear-gradient(135deg, #ff8800, #ffaa44) !important;
  border-color: #ffaa44 !important;
  box-shadow: 0 0 15px rgba(255, 136, 0, 0.6);
  font-weight: bold;
}

#hexStaffModeOrb.active {
  background: linear-gradient(135deg, #44ff44, #88ff88) !important;
  border-color: #88ff88 !important;
  box-shadow: 0 0 15px rgba(68, 255, 68, 0.6);
  font-weight: bold;
}

.swandy-cell.hex-staff-break {
  animation: hexStaffShatter 0.5s ease-out forwards;
}

@keyframes hexStaffShatter {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(15deg);
    opacity: 0.8;
    filter: brightness(2) hue-rotate(270deg);
  }
  100% {
    transform: scale(0) rotate(90deg);
    opacity: 0;
    filter: brightness(0);
  }
}

/* Hex Staff cursor inheritance - ensure cursor shows over all child elements in Halloween event tabs */
#halloweenCrusherContent *,
#halloweenCrusherContent *:hover,
#halloweenHubContent *,
#halloweenHubContent *:hover,
#halloweenTreeContent *,
#halloweenTreeContent *:hover,
#halloweenJadecasHutContent *,
#halloweenJadecasHutContent *:hover {
  cursor: inherit !important;
}