/**
 * Reality Tuner Styles
 * Supports Dog Color Vision (Canine Spectrum & Super Snoot Radar),
 * 1999 GeoCities Retro Time Warp, and Doodle's Interactive Speech Bubble Options.
 *
 * @package StefanBuchholzModern
 */

/* ===================================================================
   1. DOODLE'S SPEECH BUBBLE REALITY OFFER BUTTONS
   =================================================================== */
.doodle-reality-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Dog Vision Offer Button */
.doodle-reality-btn.btn-dog-vision {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #fbbf24 !important;
  color: #111827 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45) !important;
}

.doodle-reality-btn.btn-dog-vision:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.7) !important;
  color: #000000 !important;
}

/* 1999 Web 1.0 Offer Button */
.doodle-reality-btn.btn-geocities {
  background: linear-gradient(135deg, #ec4899, #be185d) !important;
  border-color: #f472b6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.45) !important;
}

.doodle-reality-btn.btn-geocities:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 22px rgba(236, 72, 153, 0.7) !important;
  color: #ffffff !important;
}

/* Reset / Return Button */
.doodle-reality-btn.btn-reset-reality {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
}

.doodle-reality-btn.btn-reset-reality:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.7) !important;
}

/* Micro-animation on action icon */
.doodle-reality-btn i {
  font-size: 0.76rem;
  transition: transform 0.2s ease;
}

.doodle-reality-btn:hover i {
  transform: scale(1.2) rotate(8deg);
}

/* ===================================================================
   2. FLOATING "RETURN TO NORMAL VIEW" BUTTON (MID-WAY UP THE PAGE, 2 LINES)
   =================================================================== */
.sb-reality-active-pill {
  position: fixed;
  top: 50%;
  bottom: auto;
  right: 24px;
  transform: translateY(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(251, 191, 36, 0.65);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(245, 158, 11, 0.35);
  border-radius: 9999px;
  padding: 10px 18px;
  font-family: inherit;
  color: #fef3c7;
  cursor: pointer;
  animation: sbPillSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  outline: none;
  text-decoration: none;
}

.sb-reality-active-pill .sb-reality-pill-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.sb-reality-active-pill .pill-line-1 {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  color: #fef3c7;
  white-space: nowrap;
}

.sb-reality-active-pill .pill-line-2 {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap;
}

.sb-reality-active-pill:hover {
  background: rgba(245, 158, 11, 0.95);
  border-color: #fbbf24;
  color: #0f172a;
  transform: translateY(calc(-50% - 2px)) scale(1.03);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7), 0 0 24px rgba(245, 158, 11, 0.55);
}

.sb-reality-active-pill:hover .pill-line-1,
.sb-reality-active-pill:hover .pill-line-2 {
  color: #0f172a;
}

.sb-reality-active-pill:active {
  transform: translateY(-50%) scale(0.98);
}

.sb-reality-active-pill i {
  color: #fbbf24;
  font-size: 0.95rem;
  transition: color 0.2s ease, transform 0.28s ease;
}

.sb-reality-active-pill:hover i {
  color: #0f172a;
  transform: rotate(-90deg);
}

@keyframes sbPillSlideInRight {
  from { opacity: 0; transform: translate(30px, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}

@media (max-width: 640px) {
  .sb-reality-active-pill {
    top: 50%;
    bottom: auto;
    right: 10px;
    transform: translateY(-50%);
    padding: 8px 13px;
    gap: 8px;
  }
  .sb-reality-active-pill:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.02);
  }
  .sb-reality-active-pill:active {
    transform: translateY(-50%) scale(0.98);
  }
  .sb-reality-active-pill .pill-line-1 {
    font-size: 0.62rem;
  }
  .sb-reality-active-pill .pill-line-2 {
    font-size: 0.78rem;
  }
}

/* ===================================================================
   3. MODE 1: DOG COLOR VISION & SUPER SNOOT RADAR
   =================================================================== */

/* Scientific Dichromacy applied to whole viewport */
body.mode-dog-vision .deck-slider,
body.mode-dog-vision .site-header,
body.mode-dog-vision .photos-timeline-viewport,
body.mode-dog-vision .blog-timeline-viewport,
body.mode-dog-vision .recent-videos-timeline-viewport,
body.mode-dog-vision .single-post-wrapper {
  filter: url(#sb-canine-vision-filter) !important;
}

/* SUPER SNOOT RADAR: Dog & Pack Cards Breakout with High Saturation & Golden Aura */
body.mode-dog-vision .photo-album-card[data-category*="herd"],
body.mode-dog-vision .photo-album-card[data-category*="the-herd"],
body.mode-dog-vision .recent-video-timeline-card[data-category*="the-herd"],
body.mode-dog-vision .recent-video-timeline-card[data-category*="herd"],
body.mode-dog-vision .photo-album-card[data-category*="dog"],
body.mode-dog-vision .nav-hanging-dogs,
body.mode-dog-vision .companion-dog {
  filter: drop-shadow(0 0 16px #f59e0b) drop-shadow(0 0 32px #fbbf24) brightness(1.28) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.9), inset 0 0 16px rgba(245, 158, 11, 0.5) !important;
  border-color: #f59e0b !important;
  position: relative !important;
  z-index: 30 !important;
}

/* Super Snoot Radar Badge */
.dog-vision-snoot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 35;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #111827;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.9);
  letter-spacing: 0.05em;
  pointer-events: none;
  animation: sbSnootRadarPulse 1.8s infinite ease-in-out;
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes sbSnootRadarPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(245, 158, 11, 0.8); }
  50% { transform: scale(1.08); box-shadow: 0 0 24px rgba(245, 158, 11, 1); }
}

/* ===================================================================
   4. MODE 2: 1999 GEOCITIES RETRO TIME WARP
   =================================================================== */

/* Comic Sans everywhere */
body.mode-geocities-1999,
body.mode-geocities-1999 * {
  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Chalkboard', cursive, sans-serif !important;
}

/* Twinkling Space Starfield Background Overlay */
body.mode-geocities-1999::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #03001e;
  background-image: 
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px);
  background-size: 550px 550px, 350px 350px, 250px 250px;
  background-position: 0 0, 40px 60px, 130px 270px;
  opacity: 0.55;
  animation: sbStarfieldTwinkle 12s linear infinite;
}

@keyframes sbStarfieldTwinkle {
  0% { background-position: 0 0, 40px 60px, 130px 270px; }
  100% { background-position: 550px 550px, 390px 410px, 380px 520px; }
}

/* Neon Cyber Titles */
body.mode-geocities-1999 h1,
body.mode-geocities-1999 h2,
body.mode-geocities-1999 h3,
body.mode-geocities-1999 .section-title,
body.mode-geocities-1999 .brand-name-prefix {
  color: #ffff00 !important;
  text-shadow: 3px 3px 0px #ff00ff, -2px -2px 0px #00ffff !important;
  letter-spacing: 0.05em !important;
}

/* Retro Links */
body.mode-geocities-1999 a {
  color: #00ffff !important;
  text-decoration: underline !important;
}

/* Retro Top Marquee Banner */
.sb-geocities-marquee {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10006;
  background: #ffff00;
  border-bottom: 3px solid #ff0000;
  color: #000000;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.sb-geocities-marquee marquee {
  display: block;
}

/* Floating Retro Badges Strip */
.sb-geocities-floating-strip {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 10005;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  user-select: none;
}

.sb-retro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2px outset #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 3px 3px 0px #000000;
}

.retro-hazard {
  background: #000000;
  color: #ffff00;
  border-color: #ffff00;
}

.retro-netscape {
  background: #000080;
  color: #ffffff;
}

.retro-counter {
  background: #000000;
  color: #00ff00;
  border-color: #333333;
}

.counter-digits {
  font-family: monospace !important;
  letter-spacing: 2px;
  font-size: 0.82rem;
  color: #00ff00;
  background: #111111;
  padding: 1px 4px;
  border: 1px inset #555555;
}

.retro-blink {
  animation: sbRetroBlink 1s steps(1) infinite;
}

@keyframes sbRetroBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.sb-retro-escape-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ff0055;
  border: 2px outset #ffffff;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0px #000000;
  transition: transform 0.1s ease;
}

.sb-retro-escape-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #000000;
  border-style: inset;
}

/* ===================================================================
   5. 80s RETRO FASHION FOR DOG COMPANIONS IN 1999 MODE
   =================================================================== */

/* By default, 80s fashion costume is hidden */
.dog-80s-fashion-costume {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

/* Visible ONLY when in 1999 GeoCities mode */
body.mode-geocities-1999 .dog-80s-fashion-costume {
  display: block !important;
  animation: sb80sDogFashionPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sb80sDogFashionPop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* 80s Electric Synthwave Aura on Dogs in 1999 mode */
body.mode-geocities-1999 .enzo-avatar,
body.mode-geocities-1999 .enzo-co-avatar {
  filter: drop-shadow(0 0 14px #ff007f) drop-shadow(0 0 28px #00f0ff) brightness(1.1) !important;
}

/* 80s Sunglasses on Top Nav Hanging Dogs */
body.mode-geocities-1999 .nav-hanging-dogs .nav-dog-item::after {
  content: "🕶️";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px #00f0ff);
  pointer-events: none;
  z-index: 10;
}

/* 1. 80s NEON STRIPED AEROBICS SWEATBAND */
.dog-80s-sweatband {
  position: absolute;
  top: 15%;
  left: 35%;
  width: 72px;
  height: 15px;
  border-radius: 9999px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 14px #ff007f, 0 3px 6px rgba(0, 0, 0, 0.65);
  transform: rotate(-10deg);
  border: 1.5px solid #ffffff;
  z-index: 15;
}

.dog-80s-sweatband .sweatband-stripe {
  flex: 1;
  height: 100%;
}
.dog-80s-sweatband .stripe-pink { background: #ff007f; }
.dog-80s-sweatband .stripe-yellow { background: #ffe600; }
.dog-80s-sweatband .stripe-cyan { background: #00f0ff; }

/* 2. 80s NEON SLOTTED SHUTTER SHADES */
.dog-80s-shutter-shades {
  position: absolute;
  top: 25%;
  left: 33%;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 16;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75));
}

.dog-80s-shutter-shades .shades-lens {
  width: 28px;
  height: 18px;
  background: #0f172a;
  border: 2px solid #00f0ff;
  border-radius: 4px 4px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1px 2px;
  box-shadow: 0 0 10px #00f0ff, inset 0 0 5px #00f0ff;
}

.dog-80s-shutter-shades .slat {
  display: block;
  width: 100%;
  height: 2px;
  background: #00f0ff;
  box-shadow: 0 0 4px #00f0ff;
}

.dog-80s-shutter-shades .shades-bridge {
  width: 6px;
  height: 3px;
  background: #00f0ff;
  box-shadow: 0 0 6px #00f0ff;
}

/* 3. 80s CHUNKY GOLD ROPE CHAIN & MEDALLION */
.dog-80s-chain {
  position: absolute;
  top: 44%;
  left: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 14;
  transform: rotate(-4deg);
}

.dog-80s-chain .gold-link {
  width: 52px;
  height: 10px;
  border: 3.5px solid #ffd700;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 10px #ffd700, 0 3px 6px rgba(0, 0, 0, 0.5);
}

.dog-80s-chain .gold-medallion {
  background: linear-gradient(135deg, #ffe066, #f59e0b);
  border: 2px solid #fff;
  border-radius: 9999px;
  padding: 1px 7px;
  font-family: Impact, 'Comic Sans MS', sans-serif !important;
  font-size: 0.65rem;
  font-weight: 900;
  color: #000;
  letter-spacing: 0.06em;
  box-shadow: 0 0 10px #ffd700, 0 2px 4px rgba(0, 0, 0, 0.6);
  margin-top: -3px;
  white-space: nowrap;
}

/* 4. 80s NEON FLUFFY LEG WARMERS ON PAWS */
.dog-80s-leg-warmers {
  position: absolute;
  bottom: 8%;
  left: 28%;
  width: 68px;
  display: flex;
  justify-content: space-between;
  z-index: 14;
}

.dog-80s-leg-warmers .leg-warmer {
  width: 23px;
  height: 25px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 2px 1px;
  box-shadow: 0 0 12px #ff007f, 0 4px 8px rgba(0, 0, 0, 0.6);
  border: 1.5px solid #fff;
}

.dog-80s-leg-warmers .left-leg {
  background: #ff007f;
  transform: rotate(-8deg);
}

.dog-80s-leg-warmers .right-leg {
  background: #39ff14;
  box-shadow: 0 0 12px #39ff14, 0 4px 8px rgba(0, 0, 0, 0.6);
  transform: rotate(8deg);
}

.dog-80s-leg-warmers .rib {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
}

/* 5. 80s RETRO CASSETTE BOOMBOX */
.dog-80s-boombox {
  position: absolute;
  bottom: 10px;
  right: -24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #00f0ff;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 0 16px #00f0ff, 0 6px 14px rgba(0, 0, 0, 0.7);
  z-index: 16;
  transform: rotate(6deg);
  animation: sb80sBoomboxBeat 0.6s ease-in-out infinite alternate;
}

@keyframes sb80sBoomboxBeat {
  0% { transform: rotate(6deg) scale(1); }
  100% { transform: rotate(8deg) scale(1.08); }
}

.dog-80s-boombox .boombox-icon {
  font-size: 1.45rem;
  line-height: 1;
}

.dog-80s-boombox .boombox-eq {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 11px;
  margin-top: 3px;
}

.dog-80s-boombox .eq-bar {
  width: 3px;
  background: #39ff14;
  border-radius: 1px;
  animation: sb80sEqBounce 0.4s ease infinite alternate;
}

.dog-80s-boombox .bar-1 { height: 40%; animation-delay: 0.1s; background: #00f0ff; }
.dog-80s-boombox .bar-2 { height: 90%; animation-delay: 0.25s; background: #ffe600; }
.dog-80s-boombox .bar-3 { height: 60%; animation-delay: 0.05s; background: #ff007f; }
.dog-80s-boombox .bar-4 { height: 80%; animation-delay: 0.3s; background: #39ff14; }

@keyframes sb80sEqBounce {
  0% { height: 25%; }
  100% { height: 100%; }
}

/* Custom Tailored Coordinates for Each Dog Breed/Pose */
/* Doodle: sits slightly lower and wider */
.enzo-character-wrap[data-dog-id="doodle"] .dog-80s-sweatband,
.enzo-character-wrap.dog--doodle .dog-80s-sweatband {
  top: 18%;
  left: 32%;
  width: 78px;
}
.enzo-character-wrap[data-dog-id="doodle"] .dog-80s-shutter-shades,
.enzo-character-wrap.dog--doodle .dog-80s-shutter-shades {
  top: 28%;
  left: 31%;
}
.enzo-character-wrap[data-dog-id="doodle"] .dog-80s-chain,
.enzo-character-wrap.dog--doodle .dog-80s-chain {
  top: 50%;
  left: 34%;
}

/* Mariah: slender, upright white dog */
.enzo-character-wrap[data-dog-id="mariah"] .dog-80s-sweatband,
.enzo-character-wrap.dog--mariah .dog-80s-sweatband {
  top: 14%;
  left: 34%;
  width: 66px;
}
.enzo-character-wrap[data-dog-id="mariah"] .dog-80s-shutter-shades,
.enzo-character-wrap.dog--mariah .dog-80s-shutter-shades {
  top: 24%;
  left: 32%;
}

/* Stella: energetic, compact puppy */
.enzo-character-wrap[data-dog-id="stella"] .dog-80s-sweatband,
.enzo-character-wrap.dog--stella .dog-80s-sweatband {
  top: 16%;
  left: 33%;
  width: 68px;
}
.enzo-character-wrap[data-dog-id="stella"] .dog-80s-shutter-shades,
.enzo-character-wrap.dog--stella .dog-80s-shutter-shades {
  top: 26%;
  left: 32%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dog-80s-sweatband {
    width: 58px;
    height: 12px;
  }
  .dog-80s-shutter-shades .shades-lens {
    width: 22px;
    height: 14px;
  }
  .dog-80s-leg-warmers {
    width: 54px;
  }
  .dog-80s-boombox {
    right: -12px;
    transform: scale(0.85);
  }
}