/* Ocean Explorer Theme */
.theme-ocean {
  --bg-primary: #003366;
  --bg-secondary: #005b96;
  --text-primary: #e0f7fa;
  --accent-color: #00bcd4;
  --btn-bg: rgba(0, 91, 150, 0.5);
  --btn-border: rgba(0, 188, 212, 0.5);
  --review-btn: #ff6f00;
  background: linear-gradient(170deg, #0288d1 0%, #005b96 30%, #003366 60%, #001a33 100%);
}

.theme-ocean .screen.active::before {
  content: '🐠🌊🐚🪸🦀';
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 1.5rem;
  opacity: 0.3;
  pointer-events: none;
  letter-spacing: 4px;
}

.theme-ocean .screen.active::after {
  content: '🐬🐙🦈🐢🏝️';
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 1.5rem;
  opacity: 0.3;
  pointer-events: none;
  letter-spacing: 4px;
}

/* Bubble effect using box shadows */
.theme-ocean::after {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image:
    radial-gradient(4px 4px at 20% 80%, rgba(255,255,255,0.15), transparent),
    radial-gradient(3px 3px at 40% 70%, rgba(255,255,255,0.1), transparent),
    radial-gradient(5px 5px at 60% 90%, rgba(255,255,255,0.12), transparent),
    radial-gradient(3px 3px at 80% 75%, rgba(255,255,255,0.1), transparent),
    radial-gradient(4px 4px at 10% 60%, rgba(255,255,255,0.08), transparent),
    radial-gradient(6px 6px at 50% 85%, rgba(255,255,255,0.1), transparent);
}