/* Fix syntax error at beginning of file */
/* Adjust wave fill colors to match the gradient - Yes bar */
.sidebar-layout .yes-bar .parallax > use:nth-child(1) { 
  fill: var(--yes-color); 
  fill-opacity: 0.7; /* Restore some transparency */
  filter: drop-shadow(0 0 5px var(--yes-glow)); /* Add glow */
}
.sidebar-layout .yes-bar .parallax > use:nth-child(2) { 
  fill: var(--yes-color); 
  fill-opacity: 0.5; /* More transparent */
  filter: drop-shadow(0 0 4px var(--yes-glow)); /* Add glow */
}

/* Enhanced glow for liquid */
.sidebar-layout .bar::after {
  filter: drop-shadow(0 0 15px var(--potion-glow-color)) !important;
}

.sidebar-layout .yes-bar::after {
  background: var(--yes-gradient);
  opacity: 0.95;
  --potion-glow-color: var(--yes-color);
  filter: drop-shadow(0 0 15px var(--yes-glow)) !important;
}

.sidebar-layout .no-bar::after {
  background: var(--no-gradient);
  opacity: 0.95;
  --potion-glow-color: var(--no-color);
  filter: drop-shadow(0 0 15px var(--no-glow)) !important;
}

/* Fix label positioning at the bottom of tubes */
.sidebar-layout .label-container {
  position: absolute;
  bottom: -85px; /* Moved up by 50px from -60px */
  left: 0;
  width: 100%;
  z-index: 200; /* Well above everything */
  text-align: center;
}

/* Make percentages more prominent */
.sidebar-layout .percentage {
  font-size: 3rem; /* Even larger font size */
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
}

/* Enhance percentage glow effects */
.sidebar-layout .yes-label .percentage {
  text-shadow: 
    0 0 2px rgba(255, 255, 255, 1),
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px var(--yes-color),
    0 0 15px var(--yes-color),
    0 0 20px var(--yes-color);
  color: white;
  animation: percent-glow 2s ease-in-out infinite alternate;
}

.sidebar-layout .no-label .percentage {
  text-shadow: 
    0 0 2px rgba(255, 255, 255, 1),
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px var(--no-color),
    0 0 15px var(--no-color),
    0 0 20px var(--no-color);
  color: white;
  animation: percent-glow 2s ease-in-out infinite alternate;
}

/* Make label text larger too */
.sidebar-layout .label {
  font-size: 2.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

/* Fix the overflow issue on the bar but keep gradients contained */
.sidebar-layout .bar {
  overflow: visible; /* Allow labels to be seen outside the tube */
}

/* Make sure liquid fill effect is contained but still glows outward */
.sidebar-layout .bar::after {
  max-height: 95%; /* Never fill completely to the top */
  overflow: hidden; /* Contain the gradient inside */
}

/* Adjust wave fill colors to match the gradient - No bar */
.sidebar-layout .no-bar .parallax > use:nth-child(1) { 
  fill: var(--no-color); 
  fill-opacity: 0.7; /* Restore some transparency */
}
.sidebar-layout .no-bar .parallax > use:nth-child(2) { 
  fill: var(--no-color); 
  fill-opacity: 0.5; /* More transparent */
}
.sidebar-layout .no-bar .parallax > use:nth-child(3) { 
  fill: var(--no-color); 
  fill-opacity: 0.3; /* Even more transparent */
}
.sidebar-layout .no-bar .parallax > use:nth-child(4) { 
  fill: var(--no-color); 
  fill-opacity: 0.2; /* Most transparent */
}

/* Label Styling and Positioning (Fixed at the bottom) */
.sidebar-layout .label-container {
  position: absolute;
  bottom: -60px; /* Position below the tube */
  left: 0;
  width: 100%;
  z-index: 100; /* Well above everything */
  text-align: center;
  margin-bottom: 0; /* Override previous margin */
  padding-bottom: 0; /* Remove padding */
  transition: none; /* Remove transition */
}

.sidebar-layout .percentage {
  font-size: 2.5rem; /* Larger font size */
  font-weight: 700;
  color: #fff; /* White text for contrast */
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* Default shadow */
}

.sidebar-layout .no-label .percentage {
  text-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 10px var(--no-text-color); /* Glow matching bar color */
}

.sidebar-layout .label {
  font-size: 1.5rem; /* Larger font size */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8); /* Slightly dimmer label */
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Remove winning animations/styles if they don't fit the theme */
.sidebar-layout .bar.winning .floating-bubbles {
  /* display: none; */
}
.sidebar-layout .percentage.winning {
  /* Override or remove specific winning styles */
  animation: none;
  transform: scale(1.05); /* Keep slight scale */
}

/* Adjust bubble appearance for potion */
.sidebar-layout .bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  opacity: 0;
  animation-name: potion-bubble-rise; /* Use a potentially different animation */
}
.sidebar-layout .yes-bar .bubble {
  box-shadow: 0 0 5px var(--yes-glow), inset 0 0 3px rgba(255, 255, 255, 0.9);
}
.sidebar-layout .no-bar .bubble {
  box-shadow: 0 0 5px var(--no-glow), inset 0 0 3px rgba(255, 255, 255, 0.9);
}

@keyframes potion-bubble-rise {
  0% { transform: scale(0.5) translateY(0); opacity: 0; bottom: 5px; }
  20% { transform: scale(1) translateY(-10%); opacity: 0.8; }
  80% { transform: scale(0.8) translateY(-80%); opacity: 0.3; }
  100% { transform: scale(0.3) translateY(-100%); opacity: 0; bottom: 95%; }
}

/* Ensure test controls are visible if needed */
.sidebar-layout .test-controls {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: auto; /* Adjust width */
  max-width: 90%;
}

/* Responsive adjustments for sidebar layout */
@media (max-width: 768px) {
  .sidebar-layout .container {
    padding: 0 2%; /* Less padding on mobile */
  }
  .sidebar-layout .bar-column {
    width: 37.5%; /* Increased from 25% to 37.5% (150% of original) */
    height: 80vh;
    margin-bottom: 3vh;
  }
  .sidebar-layout .percentage {
    font-size: 1.5rem;
  }
  .sidebar-layout .label {
    font-size: 1rem;
  }
  .sidebar-layout .bar {
    border-radius: 25px 25px 3px 3px;
  }
}

/* Fix the overflow issue on the bar that was hiding elements */
.sidebar-layout .bar {
  overflow: visible; /* Allow labels to be seen outside the tube */
}

/* Make sure liquid fill has a max height */
.sidebar-layout .bar::after {
  max-height: 95%; /* Never fill completely to the top */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

:root {
  --yes-color: #2ecc71; /* Default green */
  --no-color: #e74c3c; /* Default red */
  --yes-gradient-1: var(--yes-color);
  --yes-gradient-2: #a1f0c0; /* Lighter green */
  --yes-gradient-3: #d8f9e8; /* Very light green */
  --no-gradient-1: var(--no-color);
  --no-gradient-2: #f5b3ab; /* Lighter red */
  --no-gradient-3: #fde6e4; /* Very light red */
  --yes-gradient: linear-gradient(225deg, var(--yes-gradient-1) 0%, var(--yes-gradient-2) 50%, var(--yes-gradient-3) 100%);
  --no-gradient: linear-gradient(225deg, var(--no-gradient-1) 0%, var(--no-gradient-2) 50%, var(--no-gradient-3) 100%);
  --yes-glow: rgba(46, 204, 113, 0.7); /* Semi-transparent green */
  --no-glow: rgba(231, 76, 60, 0.7); /* Semi-transparent red */
  --yes-text-color: var(--yes-color);
  --no-text-color: var(--no-color);
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  color: white;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
  position: relative; /* For test controls positioning */
}

.bar-container {
  display: flex;
  gap: 2rem;
  height: 600px; /* Increased from 400px (150% taller) */
  align-items: flex-end;
}

.bar-column {
  position: relative; /* Change from absolute */
  bottom: auto; /* Reset positioning */
  left: auto;
  right: auto;
  width: 22.5%; /* Increased from 15% to 22.5% (150% of original) */
  max-width: 225px; /* Increased from 150px to 225px (150% of original) */
  height: 75vh; /* Slightly shorter */
  margin-bottom: 10vh; /* More space at bottom */
  flex: 0 0 auto; /* Prevent flex grow/shrink */
}

.bar {
  width: 100%;
  height: 0%; /* Start at 0% for animation */
  position: relative;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  will-change: height; /* Optimize for animations */
  transition: box-shadow 0.3s ease, height 0.8s ease-in-out;
  background-color: transparent; /* Transparent background */
}

/* Liquid gradients */
.bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Full height */
  border-radius: 0 0 12px 12px;
  z-index: 1;
  animation: pulse 4s ease-in-out infinite alternate;
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    filter: brightness(0.95);
  }
  50% {
    opacity: 0.9;
    filter: brightness(1.05);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.yes-bar::after {
  background: var(--yes-gradient);
  box-shadow: 
    0 5px 15px var(--yes-color),
    inset 0 -10px 20px rgba(0, 0, 0, 0.2);
}

.no-bar::after {
  background: var(--no-gradient);
  box-shadow: 
    0 5px 15px var(--no-color),
    inset 0 -10px 20px rgba(0, 0, 0, 0.2);
}

/* Glass container edges */
.bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(
      90deg, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.05) 20%, 
      rgba(255, 255, 255, 0) 60%
    );
  z-index: 4;
  pointer-events: none;
}

/* Position the waves correctly at the bottom of the fill */
.sidebar-layout .wave-container {
  position: absolute;
  bottom: 0; /* JS will update this based on fill % */
  left: 0;
  width: 100%;
  height: 35px; /* Fixed height for waves */
  transition: bottom 0.8s ease-in-out; /* Match the fill transition */
  will-change: bottom, transform; /* Only bottom changes */
  z-index: 3; /* Above liquid (::after), below bubbles/labels */
  overflow: hidden; /* Hide parts of SVG outside the container */
  transform: rotate(0deg) !important; /* Override base style to keep waves upright */
  top: auto !important; /* Ensure bottom positioning takes precedence */
  filter: drop-shadow(0 0 8px var(--yes-glow));
}

/* No bar wave container */
.sidebar-layout .no-bar .wave-container {
  filter: drop-shadow(0 0 8px var(--no-glow));
}

/* Apply wave styles for Yes bar */
.sidebar-layout .yes-bar .parallax > use {
  filter: drop-shadow(0 0 5px var(--yes-glow));
}

.sidebar-layout .yes-bar .parallax > use:nth-child(1) { 
  fill: var(--yes-color); 
  fill-opacity: 0.7;
}
.sidebar-layout .yes-bar .parallax > use:nth-child(2) { 
  fill: var(--yes-color); 
  fill-opacity: 0.5;
}
.sidebar-layout .yes-bar .parallax > use:nth-child(3) { 
  fill: var(--yes-color); 
  fill-opacity: 0.3;
}
.sidebar-layout .yes-bar .parallax > use:nth-child(4) { 
  fill: var(--yes-color); 
  fill-opacity: 0.2;
}

/* Apply wave styles for No bar */
.sidebar-layout .no-bar .parallax > use {
  filter: drop-shadow(0 0 5px var(--no-glow));
}

.sidebar-layout .no-bar .parallax > use:nth-child(1) { 
  fill: var(--no-color); 
  fill-opacity: 0.7;
}
.sidebar-layout .no-bar .parallax > use:nth-child(2) { 
  fill: var(--no-color); 
  fill-opacity: 0.5;
}
.sidebar-layout .no-bar .parallax > use:nth-child(3) { 
  fill: var(--no-color); 
  fill-opacity: 0.3;
}
.sidebar-layout .no-bar .parallax > use:nth-child(4) { 
  fill: var(--no-color); 
  fill-opacity: 0.2;
}

/* Label container - now positioned above the bar */
.label-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px; /* Space between labels and bar */
  pointer-events: none;
  z-index: 10;
}

.yes-label .percentage {
  color: var(--yes-text-color);
  text-shadow: 
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 3px var(--yes-color);
}

.no-label .percentage {
  color: var(--no-text-color);
  text-shadow: 
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 3px var(--no-color);
}

.percentage {
  font-size: 3rem; /* Make percentage larger */
  font-weight: 800; /* Bolder font weight */
  transition: all 0.3s ease;
  transform-origin: center;
  will-change: transform, filter, text-shadow;
  line-height: 1;
  margin-bottom: 5px;
  text-shadow: 
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.8);
}

.yes-bar .percentage {
  color: var(--yes-text-color);
  text-shadow: 
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 3px var(--yes-color);
}

.no-bar .percentage {
  color: var(--no-text-color);
  text-shadow: 
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 3px var(--no-color);
}

.label {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

/* Cool percentage animation */
.percentage-animated {
  animation: text-flicker 3s infinite alternate;
}

@keyframes text-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    filter: blur(0);
  }
  20%, 24%, 55% {
    filter: blur(1px);
  }
}

.bar.active .percentage {
  animation: glow-pulse 2s ease-in-out infinite alternate;
  filter: brightness(1.2);
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 4px var(--yes-color),
    0 0 6px var(--yes-color);
  transform: scale(1.05);
}

@keyframes glow-pulse {
  0% {
    text-shadow: 
      0 0 1px white,
      0 0 2px white,
      0 0 4px var(--yes-color),
      0 0 6px var(--yes-color);
  }
  100% {
    text-shadow: 
      0 0 1px white,
      0 0 2px white,
      0 0 4px var(--yes-color),
      0 0 6px var(--yes-color);
  }
}

.yes-bar.active .percentage, .yes-label .percentage.winning {
  color: white;
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 4px var(--yes-text-color),
    0 0 6px var(--yes-text-color);
  animation: glow-pulse 2s ease-in-out infinite alternate;
  filter: brightness(1.2);
  transform: scale(1.05);
}

.no-bar.active .percentage, .no-label .percentage.winning {
  color: white;
  text-shadow: 
    0 0 1px white,
    0 0 2px white,
    0 0 4px var(--no-text-color),
    0 0 6px var(--no-text-color);
  animation: glow-pulse 2s ease-in-out infinite alternate;
  filter: brightness(1.2);
  transform: scale(1.05);
}

/* Enhanced glow effect based on values */
.yes-bar {
  position: absolute;
  left: 20%; /* Move 10% towards center (was 10%) */
  transform: translateX(-50%);
  filter: drop-shadow(0 0 8px var(--yes-glow-color));
  overflow: hidden;
  background: transparent;
}

.no-bar {
  position: absolute;
  right: 20%; /* Move 10% towards center (was 10%) */
  transform: translateX(50%);
  filter: drop-shadow(0 0 8px var(--no-glow-color));
  overflow: hidden;
  background: transparent;
}

/* Enhanced highlight animations */
@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.bar.active {
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.3);
}

.yes-bar.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--yes-shimmer);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  z-index: 5;
  pointer-events: none;
}

.no-bar.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--no-shimmer);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  z-index: 5;
  pointer-events: none;
}

/* Enhanced active state for waves */
.bar.active .waves use {
  animation-duration: 12s !important; /* Speed up wave animations when active */
}

.bar.active .label {
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bar-container {
    height: 450px; /* Adjusted for mobile but still taller than original */
    gap: 1rem;
  }

  .label-container {
    top: -70px;
  }

  .percentage {
    font-size: 2.5rem; /* Slightly smaller for mobile */
  }

  .bar.active .percentage {
    font-size: 2.7rem;
  }

  .label {
    font-size: 1.5rem;
  }
}

/* Test mode styles */
.test-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: white;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
}

/* Bubble animation for the winning bar */
.floating-bubbles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  display: none;
  overflow: hidden;
}

.bar.winning .floating-bubbles {
  display: block;
}

.bubble {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  opacity: 0;
  animation-name: bubble-rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.yes-bar .bubble {
  box-shadow: 0 0 3px rgba(255, 60, 172, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.8);
}

.no-bar .bubble {
  box-shadow: 0 0 3px rgba(0, 147, 233, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Position and size the bubbles randomly */
.bubble:nth-child(1) { left: 10%; width: 8px; height: 8px; animation-duration: 4s; animation-delay: 0s; }
.bubble:nth-child(2) { left: 20%; width: 12px; height: 12px; animation-duration: 6s; animation-delay: 0.5s; }
.bubble:nth-child(3) { left: 35%; width: 6px; height: 6px; animation-duration: 5s; animation-delay: 1.2s; }
.bubble:nth-child(4) { left: 50%; width: 10px; height: 10px; animation-duration: 7s; animation-delay: 0.8s; }
.bubble:nth-child(5) { left: 65%; width: 7px; height: 7px; animation-duration: 5s; animation-delay: 1.5s; }
.bubble:nth-child(6) { left: 80%; width: 9px; height: 9px; animation-duration: 6s; animation-delay: 0.2s; }
.bubble:nth-child(7) { left: 25%; width: 5px; height: 5px; animation-duration: 4s; animation-delay: 1.7s; }
.bubble:nth-child(8) { left: 45%; width: 11px; height: 11px; animation-duration: 7s; animation-delay: 0.9s; }
.bubble:nth-child(9) { left: 75%; width: 8px; height: 8px; animation-duration: 5s; animation-delay: 1.3s; }
.bubble:nth-child(10) { left: 90%; width: 6px; height: 6px; animation-duration: 4s; animation-delay: 0.7s; }
.bubble:nth-child(11) { left: 15%; width: 9px; height: 9px; animation-duration: 6s; animation-delay: 1.1s; }
.bubble:nth-child(12) { left: 60%; width: 7px; height: 7px; animation-duration: 5s; animation-delay: 0.3s; }
.bubble:nth-child(13) { left: 30%; width: 6px; height: 6px; animation-duration: 4s; animation-delay: 1.8s; }
.bubble:nth-child(14) { left: 70%; width: 5px; height: 5px; animation-duration: 6s; animation-delay: 0.6s; }
.bubble:nth-child(15) { left: 40%; width: 10px; height: 10px; animation-duration: 7s; animation-delay: 1.0s; }

@keyframes bubble-rise {
  0% {
    transform: scale(0.3);
    opacity: 0;
    bottom: 5px;
  }
  20% {
    transform: scale(1);
    opacity: 0.7;
    bottom: 20%;
  }
  50% {
    opacity: 0.5;
    transform: translateX(10px);
    bottom: 50%;
  }
  80% {
    opacity: 0.2;
    transform: translateX(-5px);
    bottom: 80%;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
    bottom: 100%;
  }
}

/* Add animation that repeats the bubble formation */
.yes-bar.winning .floating-bubbles, 
.no-bar.winning .floating-bubbles {
  animation: generate-bubbles 5s infinite;
}

@keyframes generate-bubbles {
  0%, 100% {
    /* This animation doesn't visibly do anything but serves to 
       restart the bubble animations periodically */
  }
}

/* Enhanced glow effect for the winning bar */
.yes-bar.winning {
  box-shadow: 0 0 20px rgba(255, 60, 172, 0.5), inset 0 0 30px rgba(255, 60, 172, 0.3);
}

.no-bar.winning {
  box-shadow: 0 0 20px rgba(0, 147, 233, 0.5), inset 0 0 30px rgba(0, 147, 233, 0.3);
}

/* Special effect for the percentage when winning */
.yes-label .percentage.winning {
  animation: pulse-grow 1.5s infinite alternate;
}

.no-label .percentage.winning {
  animation: pulse-grow 1.5s infinite alternate;
}

@keyframes pulse-grow {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}

/* Add a subtle shimmer effect to the winning bar */
.bar.winning::after {
  animation: pulse 3s ease-in-out infinite alternate, shimmer 8s linear infinite;
}

@keyframes shimmer {
  0% {
    background-blend-mode: normal;
    filter: brightness(1);
  }
  50% {
    background-blend-mode: overlay;
    filter: brightness(1.05);
  }
  100% {
    background-blend-mode: normal;
    filter: brightness(1);
  }
}

/* ===================================== */
/* == Sidebar Layout Specific Styles == */
/* ===================================== */

.sidebar-layout body {
  /* Optional: Add a background fitting the theme */
  /* background: url('path/to/fantasy-background.jpg') center/cover no-repeat; */
}

.sidebar-layout .container {
  display: flex;
  justify-content: center;
  padding: 0 10%;
  height: 100vh;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* Specific positioning for sidebar layout bars */
.sidebar-layout .yes-bar {
  position: absolute;
  left: 30%; /* Moved 10% inward from 20% */
  transform: translateX(-50%);
}

.sidebar-layout .no-bar {
  position: absolute;
  right: 30%; /* Moved 10% inward from 20% */
  transform: translateX(50%);
}

/* Remove centered bar container styles */
.sidebar-layout .bar-container {
  display: none; 
}

.sidebar-layout .bar-column {
  position: relative; /* Change from absolute */
  bottom: auto; /* Reset positioning */
  left: auto;
  right: auto;
  width: 22.5%; /* Increased from 15% to 22.5% (150% of original) */
  max-width: 225px; /* Increased from 150px to 225px (150% of original) */
  height: 75vh; /* Slightly shorter */
  margin-bottom: 10vh; /* More space at bottom */
  flex: 0 0 auto; /* Prevent flex grow/shrink */
}

/* Glass Tube Styling */
.sidebar-layout .bar {
  height: 100%; /* Fill the column height */
  border-radius: 40px 40px 5px 5px; /* Rounded top, slightly rounded bottom */
  border: 2px solid rgba(255, 255, 255, 0.15); /* Thinner, subtler border */
  border-top-color: rgba(255, 255, 255, 0.3); /* Slightly brighter top border */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Darker bottom edge */
  box-shadow: 
    inset 0 2px 5px rgba(255, 255, 255, 0.1), /* Inner top highlight */
    inset 0 -2px 5px rgba(0, 0, 0, 0.15), /* Inner bottom shadow */
    inset 2px 0 4px rgba(255, 255, 255, 0.08), /* Inner side highlights */
    inset -2px 0 4px rgba(255, 255, 255, 0.08),
    0 5px 15px rgba(0, 0, 0, 0.3); /* Outer shadow */
  background: rgba(0, 0, 0, 0.05); /* Very subtle dark tint for glass */
  backdrop-filter: blur(3px); /* Reduced blur */
  overflow: hidden; /* Ensure gradients are contained */
  position: relative; /* For pseudo-elements */
  transition: box-shadow 0.3s ease; 
  will-change: box-shadow;
}

/* Adjust top highlight/reflection */
.sidebar-layout .bar::before {
  content: '';
  position: absolute;
  top: 3px; /* Closer to edge */
  left: 15%; /* Adjust position */
  right: 15%;
  height: 10px; /* Thinner highlight */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  border-radius: 50% / 8px; /* Adjust ellipse */
  z-index: 5;
  opacity: 0.7;
}

/* Glowing Potion Styling (::after element) */
.sidebar-layout .bar::after {
  content: ''; /* Ensure content is present */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Height is controlled by JS via --yes/no-fill-percent variable */
  height: var(--yes-fill-percent, 0%); 
  background: var(--yes-gradient); /* Use the gradient for fill */
  border-radius: 0 0 3px 3px; 
  z-index: 1; 
  animation: potion-pulse 3s ease-in-out infinite alternate; 
  --potion-glow-color: var(--yes-color); 
  transition: height 0.8s ease-in-out; /* Animate height change */
  will-change: height, filter; /* Optimize */
  /* REMOVE top: 2%; Limit max height in JS instead */
  /* top: 2%; */ 
}

.sidebar-layout .no-bar::after {
  height: var(--no-fill-percent, 0%); /* Use the correct variable */
  background: var(--no-gradient);
  --potion-glow-color: var(--no-color); 
  /* REMOVE top: 2%; Limit max height in JS instead */
  /* top: 2%; */ 
}

/* Single Keyframes definition using the CSS variable */
@keyframes potion-pulse {
  from { 
    filter: brightness(1.05) drop-shadow(0 0 12px var(--potion-glow-color)); 
    opacity: 0.9;
  }
  to   { 
    filter: brightness(1.15) drop-shadow(0 0 18px var(--potion-glow-color)); 
    opacity: 1;
  }
}

/* Position Waves correctly inside the tube */
.sidebar-layout .wave-container {
  position: absolute;
  bottom: 0; /* JS will update this based on fill % */
  left: 0;
  width: 100%;
  height: 35px; /* Fixed height for waves */
  transition: bottom 0.8s ease-in-out; /* Match the fill transition */
  will-change: bottom, transform; /* Only bottom changes */
  z-index: 3; /* Above liquid (::after), below bubbles/labels */
  overflow: hidden; /* Hide parts of SVG outside the container */
  transform: rotate(0deg) !important; /* Override base style to keep waves upright */
  top: auto !important; /* Ensure bottom positioning takes precedence */
  filter: drop-shadow(0 0 8px var(--yes-glow));
}

/* Position waves SVG element within its container */
.sidebar-layout .waves {
  position: absolute; /* Position relative to wave-container */
  bottom: 0; /* Align SVG bottom to container bottom */
  left: 0;
  width: 100%;
  height: 35px;
}

/* Fix for waves animation */
.sidebar-layout .parallax > use {
  animation: move-forever 15s cubic-bezier(.55,.5,.45,.5) infinite; /* Slower */
}

/* Adjust wave fill colors to match the gradient - Yes bar */
.sidebar-layout .yes-bar .parallax > use:nth-child(1) { 
  fill: var(--yes-color); 
  fill-opacity: 0.7; /* Restore some transparency */
  filter: drop-shadow(0 0 5px var(--yes-glow)); /* Add glow */
}
.sidebar-layout .yes-bar .parallax > use:nth-child(2) { 
  fill: var(--yes-color); 
  fill-opacity: 0.5; /* More transparent */
  filter: drop-shadow(0 0 4px var(--yes-glow)); /* Add glow */
}
.sidebar-layout .yes-bar .parallax > use:nth-child(3) { 
  fill: var(--yes-color); 
  fill-opacity: 0.3; /* Even more transparent */
  filter: drop-shadow(0 0 3px var(--yes-glow)); /* Add glow */
}
.sidebar-layout .yes-bar .parallax > use:nth-child(4) { 
  fill: var(--yes-color); 
  fill-opacity: 0.2; /* Most transparent */
  filter: drop-shadow(0 0 2px var(--yes-glow)); /* Add glow */
}

/* Adjust wave fill colors to match the gradient - No bar */
.sidebar-layout .no-bar .parallax > use:nth-child(1) { 
  fill: var(--no-color); 
  fill-opacity: 0.7; /* Restore some transparency */
  filter: drop-shadow(0 0 5px var(--no-glow)); /* Add glow */
}
.sidebar-layout .no-bar .parallax > use:nth-child(2) { 
  fill: var(--no-color); 
  fill-opacity: 0.5; /* More transparent */
  filter: drop-shadow(0 0 4px var(--no-glow)); /* Add glow */
}
.sidebar-layout .no-bar .parallax > use:nth-child(3) { 
  fill: var(--no-color); 
  fill-opacity: 0.3; /* Even more transparent */
  filter: drop-shadow(0 0 3px var(--no-glow)); /* Add glow */
}
.sidebar-layout .no-bar .parallax > use:nth-child(4) { 
  fill: var(--no-color); 
  fill-opacity: 0.2; /* Most transparent */
  filter: drop-shadow(0 0 2px var(--no-glow)); /* Add glow */
}

/* Make sure liquid has the correct color and opacity */
.sidebar-layout .yes-bar::after {
  background: var(--yes-gradient);
  opacity: 0.95;
}

.sidebar-layout .no-bar::after {
  background: var(--no-gradient);
  opacity: 0.95;
}

/* Label Styling and Positioning (Fixed at the bottom) */
.sidebar-layout .label-container {
  position: absolute;
  bottom: 15px; /* Moved up by 50px from -60px */
  left: 0;
  width: 100%;
  z-index: 100; /* Well above everything */
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
  transition: none;
}

.sidebar-layout .percentage {
  font-size: 2.5rem; /* Larger font size */
  font-weight: 700;
  color: #fff; /* White text for contrast */
  text-shadow: 0 0 5px rgba(0,0,0,0.7); /* Default shadow */
}

/* Apply specific glow colors */
.sidebar-layout .yes-label .percentage {
   text-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 10px var(--yes-text-color); 
}

.sidebar-layout .no-label .percentage {
  text-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 10px var(--no-text-color); /* Ensure this uses --no-text-color */
}

.sidebar-layout .label {
  font-size: 1.5rem; /* Larger font size */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8); /* Slightly dimmer label */
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Remove winning animations/styles if they don't fit the theme */
.sidebar-layout .bar.winning .floating-bubbles {
  /* display: none; */ 
  /* display: none; */ /* Optionally disable bubbles */
}
.sidebar-layout .percentage.winning {
  /* Override or remove specific winning styles */
  animation: none;
  transform: scale(1.05); /* Keep slight scale */
}

/* Adjust bubble appearance for potion */
.sidebar-layout .bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  opacity: 0;
  animation-name: potion-bubble-rise; /* Use a potentially different animation */
}
.sidebar-layout .yes-bar .bubble {
  box-shadow: 0 0 5px var(--yes-glow), inset 0 0 3px rgba(255, 255, 255, 0.9);
}
.sidebar-layout .no-bar .bubble {
  box-shadow: 0 0 5px var(--no-glow), inset 0 0 3px rgba(255, 255, 255, 0.9);
}

@keyframes potion-bubble-rise {
  0% { transform: scale(0.5) translateY(0); opacity: 0; bottom: 5px; }
  20% { transform: scale(1) translateY(-10%); opacity: 0.8; }
  80% { transform: scale(0.8) translateY(-80%); opacity: 0.3; }
  100% { transform: scale(0.3) translateY(-100%); opacity: 0; bottom: 95%; }
}

/* Ensure test controls are visible if needed */
.sidebar-layout .test-controls {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: auto; /* Adjust width */
  max-width: 90%;
}

/* Responsive adjustments for sidebar layout */
@media (max-width: 768px) {
  .sidebar-layout .container {
    padding: 0 2%; /* Less padding on mobile */
  }
  .sidebar-layout .bar-column {
    width: 37.5%; /* Increased from 25% to 37.5% (150% of original) */
    height: 80vh;
    margin-bottom: 3vh;
  }
  .sidebar-layout .percentage {
    font-size: 1.5rem;
  }
  .sidebar-layout .label {
    font-size: 1rem;
  }
  .sidebar-layout .bar {
    border-radius: 25px 25px 3px 3px;
  }
}

/* Add a specific animation for the percentage glow effect */
@keyframes percent-glow {
  from {
    filter: brightness(0.9);
    text-shadow: 
      0 0 2px rgba(255, 255, 255, 1),
      0 0 5px rgba(255, 255, 255, 0.8),
      0 0 10px currentColor,
      0 0 15px currentColor;
  }
  to {
    filter: brightness(1.1);
    text-shadow: 
      0 0 3px rgba(255, 255, 255, 1),
      0 0 7px rgba(255, 255, 255, 0.9),
      0 0 12px currentColor,
      0 0 18px currentColor,
      0 0 22px currentColor;
  }
}

/* Different glow for No bar waves */
.sidebar-layout .no-bar .wave-container {
  filter: drop-shadow(0 0 8px var(--no-glow));
}

/* Restore the wave animation */
.waves {
  position: absolute; /* Position relative to wave-container */
  bottom: 0; /* Align SVG bottom to container bottom */
  left: 0;
  width: 100%;
  height: 35px;
}

/* Set up the wave animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* Set animation timing for wave layers */
.sidebar-layout .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.sidebar-layout .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.sidebar-layout .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.sidebar-layout .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

.sidebar-layout .bar-column.yes-column {
  position: absolute;
  left: 30%; /* Moved 10% inward from 20% */
  transform: translateX(-50%);
  bottom: 0;
}

.sidebar-layout .bar-column.no-column {
  position: absolute;
  right: 30%; /* Moved 10% inward from 20% */
  transform: translateX(50%);
  bottom: 0;
}