/* CSS Chaos button visual baseline already in base.css */
/* Chaos Theme 1: Spinning Vortex */
body.chaos-spinning { overflow: hidden !important; }
body.chaos-spinning main { animation: counter-spin 10s linear infinite !important; }
body.chaos-spinning .logo {
  animation: wobble-spin 3s ease-in-out infinite !important;
  font-size: 80px !important;
  text-shadow: 5px 5px 20px rgba(255, 0, 255, 0.8) !important;
}
body.chaos-spinning .search-dropdown {
  transform: rotate(5deg) scale(1.1) !important;
  box-shadow: 0 10px 50px rgba(0, 255, 255, 0.5) !important;
  margin-top: -3px !important; transform-origin: center top !important;
  border-top: 1px solid var(--search-border-color) !important; padding-top: 2px !important; margin-left: -4px !important;
}
body.chaos-spinning .search-bar-container {
  transform: rotate(5deg) scale(1.1) !important;
  box-shadow: 0 10px 50px rgba(0, 255, 255, 0.5) !important;
  transform-origin: center top !important;
}
@keyframes counter-spin { 0%,100%{transform:rotate(0)} 50%{transform:rotate(5deg)} }
@keyframes wobble-spin { 0%,100%{transform:rotate(-10deg) scale(1)} 50%{transform:rotate(10deg) scale(1.1)} }

/* Chaos Theme 2: Glitch Matrix */
body.chaos-glitch {
  background: repeating-linear-gradient(0deg,#000 0px,#000 2px,#00ff00 2px,#00ff00 4px) !important;
  animation: glitch-bg 0.5s steps(5) infinite !important;
}
body.chaos-glitch .logo {
  font-family: 'Courier New', monospace !important; color:#00ff00 !important;
  animation: glitch-text 1s infinite !important;
  text-shadow: 2px 0 red, -2px 0 cyan !important;
}
body.chaos-glitch .theme-toggle-button,
body.chaos-glitch .random-theme-button,
body.chaos-glitch .css-chaos-button {
  background: #000 !important;
  border: 2px solid #00ff00 !important;
  color: #00ff00 !important;
}

body.chaos-glitch .theme-toggle-button:hover,
body.chaos-glitch .random-theme-button:hover,
body.chaos-glitch .css-chaos-button:hover {
  background: #00ff00 !important;
  color: #000 !important;
  border-color: #00ff00 !important;
}
body.chaos-glitch .search-bar-container,
body.chaos-glitch .search-dropdown { animation: glitch-shake 0.3s infinite !important; border:3px solid #00ff00 !important; }
body.chaos-glitch .search-dropdown { border-top:none !important; margin-top:-5px !important; padding-top:2px !important; }
body.chaos-glitch header { filter:none !important; }
body.chaos-glitch header a { color:#fff !important; font-weight:700 !important; text-shadow:2px 0 #ff0000,-2px 0 #00ffff !important; }
body.chaos-glitch .search-button {
  background:#000 !important; color:#00ff00 !important; border:2px solid #00ff00 !important; font-weight:700 !important;
  text-shadow:1px 0 #ff0000,-1px 0 #00ffff !important;
}
body.chaos-glitch .search-button:hover { background:#00ff00 !important; color:#000 !important; }
@keyframes glitch-bg { 0%,100%{background-position:0 0} 33%{background-position:5px 0} 66%{background-position:-5px 0} }
@keyframes glitch-text { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px) skew(5deg)} 40%{transform:translateX(5px) skew(-5deg)} 60%{transform:translateX(-5px) skew(5deg)} 80%{transform:translateX(5px) skew(-5deg)} }
@keyframes glitch-shake { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-2px)} 75%{transform:translateY(2px)} }

/* Chaos Theme 3: Rainbow Explosion */
body.chaos-rainbow {
  background-color: transparent !important;  /* let the layer show through */
  isolation: isolate;                        /* create a stacking context */
}
body.chaos-rainbow::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;                               /* behind all page content */

  background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: rainbow-move 6s linear infinite;
}
/* If Firefox ever clips the fixed layer, give it a tiny translateZ nudge */
@supports (-moz-appearance: none) {
  body.chaos-rainbow::before { transform: translateZ(0); }
}
body.chaos-rainbow main {
  backdrop-filter: blur(5px) !important; background: rgba(255,255,255,0.2) !important;
  border-radius: 50px !important; padding: 40px 80px !important; margin: 20px auto !important; max-width: calc(100% - 100px) !important;
}
body.chaos-rainbow .logo {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
  animation: rainbow-pulse 2s ease-in-out infinite !important; font-size: 90px !important;
}
body.chaos-rainbow .search-bar-container {
  border: 5px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) border-box !important;
  border-radius: 50px !important; animation: rainbow-border 3s linear infinite !important;
}
body.chaos-rainbow .search-dropdown {
  border: 5px solid transparent !important;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) border-box !important;
  border-top: 5px solid white !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
  border-bottom-left-radius: 50px !important; border-bottom-right-radius: 50px !important;
  animation: rainbow-border 3s linear infinite !important; margin-top: -11px !important; padding-top: 6px !important;
  width: calc(100% - 6px) !important; margin-left: 3px !important;
}
@keyframes rainbow-move {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes rainbow-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1)} }
@keyframes rainbow-border { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }
body.chaos-rainbow header a { color:#fff !important; font-weight:700 !important; text-shadow:2px 2px 4px rgba(0,0,0,0.8),0 0 10px rgba(255,255,255,0.5) !important; }

/* Chaos Theme 4: Upside Down World */
body.chaos-upside main { transform: rotate(180deg) !important; }
body.chaos-upside header { transform: rotate(180deg) !important; }
body.chaos-upside .search-bar-container { transform: perspective(1000px) rotateX(20deg) !important; }
@keyframes flip-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }

/* Chaos Theme 5: Extreme Perspective */
body.chaos-perspective {
  perspective: 500px !important;
  overflow: hidden !important;
}
body.chaos-perspective main { transform: rotateY(25deg) rotateX(10deg) !important; transform-style: preserve-3d !important; }
body.chaos-perspective .logo {
  transform: translateZ(100px) !important; animation: float-3d 4s ease-in-out infinite !important; font-size: 100px !important;
  text-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(255,255,255,0.3) !important;
}
body.chaos-perspective .search-bar-container { transform: translateZ(50px) rotateX(-10deg) !important; }
body.chaos-perspective header { transform: none !important; }
@keyframes float-3d { 0%,100%{transform:translateZ(100px) translateY(0)} 50%{transform:translateZ(150px) translateY(-20px)} }

/* Chaos Theme 6: Newspaper Print */
body.chaos-newspaper { background:#f5f5dc !important; filter: grayscale(100%) contrast(120%) !important; }
body.chaos-newspaper main { columns: 3 !important; column-gap: 40px !important; text-align: justify !important; }
body.chaos-newspaper .logo {
  font-family:'Times New Roman', serif !important; font-size: 120px !important;
  border-top:5px double black !important; border-bottom:5px double black !important; padding:20px 0 !important;
  column-span: all !important; text-transform: uppercase !important; letter-spacing: 15px !important;
}
body.chaos-newspaper .search-bar-container { column-span: all !important; border:2px solid black !important; border-radius:0 !important; }
body.chaos-newspaper .search-dropdown { border:2px solid black !important; border-top:none !important; border-radius:0 !important; background:#fff !important; }
body.chaos-newspaper .dropdown-item:hover { background:#e0e0e0 !important; }

/* Chaos Theme 7: Neon Cyberpunk City */
body.chaos-neon {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
              repeating-linear-gradient(90deg,#ff00ff 0px,#ff00ff 2px,transparent 2px,transparent 10px) !important;
  animation: neon-flicker 0.15s steps(2) infinite !important;
}
body.chaos-neon .logo {
  color:#00ffff !important; animation: neon-glow 1.5s ease-in-out infinite !important;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #ff00ff, 0 0 80px #ff00ff !important;
  font-size: 70px !important; letter-spacing: 10px !important;
}
body.chaos-neon .search-bar-container { border:3px solid #ff00ff !important;
  box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff, inset 0 0 20px rgba(255,0,255,0.2) !important; }
body.chaos-neon header a { color:#00ffff !important; text-shadow:0 0 10px #00ffff, 0 0 20px #00ffff !important; font-weight:600 !important; }
body.chaos-neon header a:nth-child(1){ animation: neon-flicker-out 3.7s infinite !important; }
body.chaos-neon header a:nth-child(2){ animation: neon-flicker-out-2 4.3s infinite !important; }
body.chaos-neon header a:nth-child(3){ animation: neon-flicker-out-3 5.1s infinite !important; }
body.chaos-neon .search-dropdown { width: calc(100% - 2px) !important; margin-left: 1px !important; }
body.chaos-neon .search-button { border-color:#fff !important; color:#fff !important; }
body.chaos-neon .search-dropdown .search-button { border-color:#ff00ff !important; color:#ff00ff !important; background: var(--dropdown-item-hover-bg) !important; }
body.chaos-neon .search-dropdown .search-button:hover { background:#ff00ff !important; color:#000 !important; }
@keyframes neon-flicker { 0%,100%{opacity:1} 50%{opacity:0.95} }
@keyframes neon-glow {
  0%,100% { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #ff00ff, 0 0 80px #ff00ff; }
  50% { text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 80px #ff00ff, 0 0 160px #ff00ff; }
}
@keyframes neon-flicker-out {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; text-shadow:0 0 10px #00ffff,0 0 20px #00ffff; }
  20%,24%,55% { opacity:0.3; text-shadow:none; }
  22% { opacity:0.6; text-shadow:0 0 5px #00ffff; }
}
@keyframes neon-flicker-out-2 {
  0%,10%,12%,20%,23%,40%,42%,60%,100% { opacity:1; text-shadow:0 0 10px #00ffff,0 0 20px #00ffff; }
  11%,22%,41% { opacity:0.2; text-shadow:none; }
  21% { opacity:0.5; text-shadow:0 0 5px #00ffff; }
}
@keyframes neon-flicker-out-3 {
  0%,30%,33%,35%,60%,63%,80%,100% { opacity:1; text-shadow:0 0 10px #00ffff,0 0 20px #00ffff; }
  32%,62%,81% { opacity:0.25; text-shadow:none; }
  34% { opacity:0.7; text-shadow:0 0 5px #00ffff; }
}

/* Chaos Theme 8: Minimalist Brutalism */
body.chaos-brutal { background:#ff0000 !important; overflow:hidden !important; }
body.chaos-brutal main { background:#ffff00 !important; border:15px solid #000 !important; transform:rotate(-2deg) !important; box-shadow:20px 20px 0 #0000ff !important; }
body.chaos-brutal header { position:relative !important; z-index:10 !important; background:#ff0000 !important; padding:12px 20px !important; }
body.chaos-brutal .logo {
  background:#000 !important; color:#fff !important; padding:30px !important; margin:-20px -20px 40px -20px !important;
  font-family:'Arial Black', sans-serif !important; font-size:90px !important; letter-spacing:-5px !important; transform: rotate(1deg) !important;
}
body.chaos-brutal .search-bar-container { border:8px solid #000 !important; border-radius:0 !important; background:#0000ff !important; transform: rotate(3deg) !important; }
body.chaos-brutal input { color:#ffff00 !important; font-weight:bold !important; }
body.chaos-brutal header a { color:#fff !important; font-weight:900 !important; text-shadow:none !important; }
body.chaos-brutal .search-dropdown { transform: rotate(3deg) !important; border:8px solid #000 !important; border-top:none !important; background:#fff !important; margin-top:-8px !important; padding-top:8px !important; }
body.chaos-brutal .dropdown-item { color:#000 !important; font-weight:bold !important; }
body.chaos-brutal .button-container .search-button { background:#0000ff !important; color:#ffff00 !important; border:5px solid #000 !important; font-weight:900 !important; }
body.chaos-brutal .button-container .search-button:hover { background:#ffff00 !important; color:#0000ff !important; }

/* Chaos Theme 9: CRT Monitor */
body.chaos-crt { background:#000 !important; overflow:hidden !important; }
body.chaos-crt::before {
  content:"" !important; position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important;
  background: repeating-linear-gradient(0deg, rgba(0,255,0,0.03), rgba(0,255,0,0.03) 1px, transparent 1px, transparent 2px) !important;
  pointer-events:none !important; z-index:1000 !important; animation: scanline 6s linear infinite !important;
}
body.chaos-crt::after {
  content:"" !important; position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.5) 100%) !important;
  pointer-events:none !important; z-index:999 !important;
}
body.chaos-crt main {
  background:#001a00 !important; color:#00ff00 !important; font-family:'Courier New', monospace !important;
  text-shadow:0 0 5px #00ff00, 0 0 10px #00ff00 !important; border:3px solid #003300 !important;
  box-shadow: inset 0 0 50px rgba(0,255,0,0.1), 0 0 30px rgba(0,255,0,0.3) !important;
}
body.chaos-crt .logo {
  color:#00ff00 !important; font-family:'Courier New', monospace !important;
  text-shadow:0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 2px 2px 0px #003300 !important;
  animation: crt-flicker 0.15s infinite !important;
}
body.chaos-crt .search-bar-container { background:#001a00 !important; border:2px solid #00ff00 !important;
  box-shadow: 0 0 10px rgba(0,255,0,0.5), inset 0 0 20px rgba(0,255,0,0.1) !important; }
body.chaos-crt input { color:#00ff00 !important; font-family:'Courier New', monospace !important; text-shadow:0 0 3px #00ff00 !important; }
body.chaos-crt input::placeholder { color:#006600 !important; text-shadow:0 0 3px #006600 !important; }
body.chaos-crt header a { color:#00ff00 !important; font-family:'Courier New', monospace !important; text-shadow:0 0 5px #00ff00 !important; font-weight:700 !important; }
body.chaos-crt .search-button { background:#003300 !important; color:#00ff00 !important; border:2px solid #00ff00 !important;
  font-family:'Courier New', monospace !important; text-shadow:0 0 5px #00ff00 !important; box-shadow:0 0 10px rgba(0,255,0,0.3) !important; }
body.chaos-crt .search-button:hover { background:#00ff00 !important; color:#000 !important; text-shadow:none !important; }
body.chaos-crt .search-dropdown { background:#001a00 !important; border:2px solid #00ff00 !important; border-top:none !important; box-shadow:0 0 10px rgba(0,255,0,0.5) !important; }
body.chaos-crt .dropdown-item { color:#00ff00 !important; font-family:'Courier New', monospace !important; text-shadow:0 0 3px #00ff00 !important; }
body.chaos-crt .dropdown-item:hover { background:#003300 !important; text-shadow:0 0 8px #00ff00 !important; }
body.chaos-crt footer { background:#001a00 !important; color:#00ff00 !important; font-family:'Courier New', monospace !important; text-shadow:0 0 1px #00ff00 !important; border-top:2px solid #003300 !important; }
@keyframes scanline { 0%{transform:translateY(0)} 100%{transform:translateY(100%)} }
@keyframes crt-flicker { 0%,100%{opacity:1} 50%{opacity:0.97} }

/* --- Chaos CRT: Search Result Specifics --- */

/* 1. The "Top Left" Title: Dim Green (Placeholder Color) */
body.chaos-crt .search-result-title {
    color: #006600 !important;
    /* Minimal glow to prevent blur on this dark color */
    text-shadow: 0 0 1px #006600 !important;
    font-weight: bold !important;
}

/* 2. The "Top Right" Category Badge: Keep it bright (optional)
   If you want this to be bright neon so it pops against the dim title */
body.chaos-crt .search-result-category {
    color: #00ff00 !important;
    text-shadow: 0 0 2px #00ff00 !important;
    border: 1px solid #00ff00 !important; /* tech border for the badge */
}

/* 3. The "Bottom Row" Snippet: Keep standard bright green for readability */
body.chaos-crt .search-result-snippet {
    color: #00ff00 !important;
    text-shadow: 0 0 1px #00ff00 !important; /* Sharp glow */
    opacity: 0.8 !important;
}

/* --- HOVER STATE: The "Inverted Cursor" Effect --- */
/* When hovering the row, turn EVERYTHING Black on Green Background */

body.chaos-crt .dropdown-item:hover {
    background: #00ff00 !important;
    cursor: pointer !important;
}

body.chaos-crt .dropdown-item:hover .search-result-title,
body.chaos-crt .dropdown-item:hover .search-result-snippet,
body.chaos-crt .dropdown-item:hover .search-result-category {
    color: #000000 !important;
    text-shadow: none !important;
    border-color: #000000 !important;
}

/* --- Chaos CRT: Safari & Chrome Scrollbar Fix --- */

/* 1. Target the specific scrolling containers explicitly */
body.chaos-crt #dropdown-scroll-content,
body.chaos-crt .search-dropdown,
body.chaos-crt main {
  /* Force the engine to recognize these as scrollable for styling */
  overflow-y: auto !important;
  scrollbar-color: #00ff00 #001a00 !important; /* Firefox */
}

/* 2. Webkit (Safari/Chrome) - Apply styles directly to the IDs/Classes */
body.chaos-crt #dropdown-scroll-content::-webkit-scrollbar,
body.chaos-crt .search-dropdown::-webkit-scrollbar,
body.chaos-crt main::-webkit-scrollbar {
  width: 12px !important;
  background-color: #001a00 !important;
}

body.chaos-crt #dropdown-scroll-content::-webkit-scrollbar-track,
body.chaos-crt .search-dropdown::-webkit-scrollbar-track,
body.chaos-crt main::-webkit-scrollbar-track {
  background: #001a00 !important;
  border-left: 1px solid #003300 !important;
}

body.chaos-crt #dropdown-scroll-content::-webkit-scrollbar-thumb,
body.chaos-crt .search-dropdown::-webkit-scrollbar-thumb,
body.chaos-crt main::-webkit-scrollbar-thumb {
  background-color: #006600 !important;
  border: 2px solid #001a00 !important;
  box-shadow: inset 0 0 4px #00ff00 !important;
  border-radius: 0 !important; /* Force square edges on Safari */
}

body.chaos-crt #dropdown-scroll-content::-webkit-scrollbar-thumb:hover,
body.chaos-crt .search-dropdown::-webkit-scrollbar-thumb:hover,
body.chaos-crt main::-webkit-scrollbar-thumb:hover {
  background-color: #00ff00 !important;
  box-shadow: 0 0 10px #00ff00 !important;
}

/* 3. Corner fix (where horizontal meets vertical) */
body.chaos-crt #dropdown-scroll-content::-webkit-scrollbar-corner,
body.chaos-crt .search-dropdown::-webkit-scrollbar-corner {
  background-color: #001a00 !important;
}

/* --- Neon Cyberpunk: prevent logo from overflowing on phones --- */
@media (max-width: 600px) {
  body.chaos-neon .logo {
    /* Scale with viewport width instead of fixed px */
    font-size: 12vw !important;
    letter-spacing: 1.2vw !important;

    /* Keep it on one line and inside the viewport */
    white-space: nowrap !important;
    max-width: 92vw !important;

    /* Breathing room for the glow + notches */
    padding-inline: 4vw !important;
    text-align: center !important;
    display: inline-block !important;
  }

  body.chaos-neon main {
    padding-inline: 4vw !important;      /* avoid edge clipping from glow */
  }
}

/* extra-small phones */
@media (max-width: 380px) {
  body.chaos-neon .logo {
    font-size: 13vw !important;          /* tiny bump for readability */
    letter-spacing: 1vw !important;
  }
}

/* --- Chaos Theme 1 (Spinning Vortex): mobile width fixes --- */
@media (max-width: 600px) {
  /* Remove the extra scale and heavy tilt on small screens */
  body.chaos-spinning .logo,
  body.chaos-spinning .search-bar-container,
  body.chaos-spinning .search-dropdown {
    transform: rotate(2deg) scale(1) !important;
    transform-origin: center top !important;
  }

  /* Keep the logo inside the viewport even with the wobble */
  body.chaos-spinning .logo {
    font-size: clamp(34px, 10.5vw, 56px) !important;
    letter-spacing: clamp(1px, 1.4vw, 6px) !important;
    display: inline-block !important;
    max-width: 92vw !important;
    padding-inline: 4vw !important;  /* breathing room for glow */
    text-align: center !important;
  }

  /* Prevent the whole page from scrolling when chaos-spinning is active on mobile */
  @media (max-width: 600px) {
    html:has(body.chaos-spinning) {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none; /* stops the rubber-band bounce */
    }
  }

  /* Make the search bar & dropdown respect the viewport */
  body.chaos-spinning .search-wrapper {
    width: 92vw !important;
    max-width: 92vw !important;
  }
  body.chaos-spinning .search-bar-container {
    width: 100% !important;
  }
  body.chaos-spinning .search-dropdown {
    width: 100% !important;
    margin-left: 0 !important;     /* override theme’s negative offset */
    border-top: 1px solid var(--search-border-color) !important;
  }

  /* Prevent edge clipping from drop shadows while tilted */
  body.chaos-spinning main {
    padding-inline: 4vw !important;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  body.chaos-spinning .logo {
    font-size: 11.5vw !important;
    letter-spacing: 1.1vw !important;
  }
}

/* --- Chaos Theme: NEWSPAPER – Mobile logo fix --- */
@media (max-width: 600px) {

  body.chaos-newspaper .logo {
    /* Scale by viewport instead of fixed px */
    font-size: clamp(30px, 10vw, 52px) !important;
    letter-spacing: clamp(0.5px, 1.2vw, 4px) !important;

    max-width: 92vw !important;
    white-space: nowrap !important;
    text-align: center !important;

    display: inline-block !important;
    padding-inline: 4vw !important;   /* breathing room for stroke */
    box-sizing: border-box !important;

    /* In case the theme applies transforms or skew */
    transform: none !important;
  }

  /* prevent clipping from heavy outline text */
  body.chaos-newspaper main {
    padding-inline: 4vw !important;
  }
}

/* VERY small devices */
@media (max-width: 380px) {
  body.chaos-newspaper .logo {
    font-size: 11vw !important;
    letter-spacing: 1vw !important;
  }
}

/* --- Chaos Theme: RAINBOW – sane sizing + layout --- */

/* Fluid logo at all widths (prevents overflow on narrow desktops too) */
body.chaos-rainbow .logo {
  font-size: clamp(36px, 9vw, 90px) !important;   /* was fixed 90px */
  letter-spacing: clamp(1px, 1.1vw, 8px) !important;
  display: inline-block !important;
  max-width: 96vw !important;
  text-align: center !important;
  padding-inline: 2vw !important;                 /* room for the animated glow */
}

/* Phone layout: logo shrinks a bit more, search fills viewport */
@media (max-width: 600px) {
  /* Logo: smaller again for small phones */
  body.chaos-rainbow .logo {
    font-size: 12vw !important;
    letter-spacing: 1.2vw !important;
    max-width: 92vw !important;
    padding-inline: 4vw !important;
  }

  /* Search wrapper spans the screen */
  body.chaos-rainbow .search-wrapper {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* Bar fills its wrapper */
  body.chaos-rainbow .search-bar-container {
    width: 100% !important;
  }

  /* Dropdown matches the bar width and alignment */
  body.chaos-rainbow .search-dropdown {
    /* shrink width by ~4px and center it */
    width: calc(100% - 6px) !important;
    border-top: 5px solid white !important; /* keep the rainbow frame clean */
  }

  /* Prevent edge clipping from the chunky rainbow frame */
  body.chaos-rainbow main {
    padding-inline: 4vw !important;
  }
}

/* Rainbow Explosion: remove frosted glass on mobile */
@media (max-width: 600px) {
  body.chaos-rainbow main {
    /* turn off the blur layer */
    -webkit-backdrop-filter: none !important; /* iOS Safari */
    backdrop-filter: none !important;

    /* make it fully transparent + simplify layout */
    background: transparent !important;
    border-radius: 0 !important;
    padding: 20px 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}

/* --- Chaos Theme: BRUTAL – mobile logo fix --- */
@media (max-width: 600px) {
  body.chaos-brutal .logo {
    /* scale with viewport so it never overflows */
    font-size: clamp(32px, 11vw, 56px) !important;
    letter-spacing: -2px !important;

    /* pull back the aggressive padding/margins */
    padding: 18px 16px !important;
    margin: -10px -10px 28px -10px !important;

    /* keep it inside the screen */
    max-width: 92vw !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: inline-block !important;
  }

  /* give main a little breathing room at the edges */
  body.chaos-brutal main {
    padding-inline: 4vw !important;
  }
}

/* Firefox-only patch for chaos-perspective search bar hover/glow */
@supports (-moz-appearance: none) {

  /* Keep the 3D pose, but make the element paint in its own flat plane */
  body.chaos-perspective .search-bar-container {
    transform-style: flat !important;
    backface-visibility: hidden !important;
    contain: paint !important;          /* isolate its effects */
    will-change: transform, filter !important;
  }

  /* Replace box-shadow with drop-shadow to avoid the distortion */
  body.chaos-perspective .search-bar-container {
    box-shadow: none !important;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)) !important;
  }

  body.chaos-perspective .search-bar-container:hover,
  body.chaos-perspective .search-bar-container.is-dropdown-open {
    /* keep shadows consistent on hover/open */
    filter: drop-shadow(0 14px 32px rgba(0,0,0,.30)) !important;
    box-shadow: none !important;
  }

  /* keep the nicer shadow… */
  body.chaos-perspective .search-bar-container:not(.is-dropdown-open):hover {
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)) !important;
    box-shadow: none !important;
  }

  /* …but remove it as soon as the dropdown opens */
  body.chaos-perspective .search-bar-container.is-dropdown-open,
  body.chaos-perspective .search-bar-container.is-dropdown-open:hover {
    filter: none !important;
    box-shadow: none !important; /* already your default when open */
  }
}

/* Chaos Theme 1: Spinning Vortex – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. CRITICAL: Stop 'main' from spinning.
     If main is transforming, position:fixed children will stick to main, not the viewport. */
  body.chaos-spinning main {
    animation: none !important;
    transform: none !important;
    padding-top: 80px !important; /* Ensure space for the fixed header */
    justify-content: flex-start !important;
  }

  /* 2. Pin Logo to top, shrink it, stop wobble */
  body.chaos-spinning .logo {
    animation: none !important;              /* Kill wobble-spin */
    font-size: 32px !important;              /* Match base.css size */

    position: fixed !important;
    top: 8px !important;
    left: 50% !important;

    /* Use translate just for centering, no rotation */
    transform: translateX(-50%) !important;
    margin-bottom: 0 !important;
    z-index: 60 !important;

    /* Reduce the heavy shadow for better readability at small size */
    text-shadow: 2px 2px 5px rgba(255, 0, 255, 0.5) !important;
  }
}

/* Chaos Theme 2: Glitch Matrix – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* Straighten & center the logo cleanly */
  body.chaos-glitch .logo {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Keep it clean in this tight layout */
    animation: none !important;        /* disable glitch-text wobble */
    font-size: 32px !important;        /* match main-page landscape size */
    margin-bottom: 12px !important;

    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 92vw !important;        /* safe bounds */
    text-align: center !important;
  }
}

/* Chaos Theme 3: Rainbow Explosion – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. Remove the frosted glass container logic to reclaim screen space */
  body.chaos-rainbow main {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Match base.css landscape padding: space for header/logo */
    padding: 80px 20px 20px 20px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. Shrink Logo & Fix Position (Mimic Base Layout) */
  body.chaos-rainbow .logo {
    /* Size match base.css */
    font-size: 32px !important;
    letter-spacing: 0 !important;

    /* Fix position to top center */
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    margin-bottom: 0 !important;
    z-index: 60 !important;

    /* Important: Overwrite the 'rainbow-pulse' animation transform */
    transform: translateX(-50%) !important;
    animation: none !important; /* Stop the pulsing/scaling */

    /* Keep the visual rainbow style */
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    padding-inline: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  /* 3. Constrain Search Width to match Base Layout */
  body.chaos-rainbow .search-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  body.chaos-rainbow .search-bar-container {
    width: 100% !important;
    /* Keep the rainbow border, but ensure sizing behaves */
    box-sizing: border-box !important;
  }

  body.chaos-rainbow .search-dropdown {
    width: calc(100% - 6px) !important; /* Account for the 3px borders */
    max-width: 594px !important; /* 600px - 6px border allowance */
    margin: -11px auto 0 auto !important; /* Center it relative to wrapper */
    left: 0 !important;
    right: 0 !important;
  }
}

/* Chaos Theme 6: Newspaper Print – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. Kill the columns layout */
  body.chaos-newspaper main {
    columns: auto !important;
    column-gap: 0 !important;
    display: flex !important; /* Use flex to stack items vertically */
    flex-direction: column !important;
    align-items: center !important; /* Center everything horizontally */
    padding-top: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 2. Logo: Fixed top */
  body.chaos-newspaper .logo {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
    font-size: 32px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    border-top: 3px double black !important;
    border-bottom: 3px double black !important;
    padding: 2px 10px !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* 3. Search Wrapper: Centered */
  body.chaos-newspaper .search-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  body.chaos-newspaper .search-bar-container {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.chaos-newspaper .search-dropdown {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. Fix the Buttons */
  body.chaos-newspaper .button-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 20px auto 0 auto !important; /* Center the block + add spacing */
    column-span: none !important; /* Reset newspaper span */
  }
}

/* Chaos Theme 7: Neon Cyberpunk City – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. Center layout and ensure spacing from top */
  body.chaos-neon main {
    padding-top: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important; /* Prevent edge clipping */
    padding-right: 20px !important;
  }

  /* 2. Logo: Fixed top, shrink size, tame the glow */
  body.chaos-neon .logo {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
    margin: 0 !important;

    font-size: 32px !important;

    /* Drastically reduce spacing from the theme's default 10px */
    letter-spacing: 3px !important;
    white-space: nowrap !important;

    /* Disable the pulsing animation */
    animation: none !important;

    /* Tame the massive text-shadow so it doesn't look like a blur at 32px */
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #ff00ff !important;
  }

  /* 3. Search Wrapper: Full width, centered */
  body.chaos-neon .search-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  body.chaos-neon .search-bar-container {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Dropdown: Align with bar */
  body.chaos-neon .search-dropdown {
    width: calc(100% - 2px) !important; /* Account for neon borders */
    margin-left: 1px !important;
    box-sizing: border-box !important;
  }
}

/* Chaos Theme 8: Minimalist Brutalism – extra-short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {

  /* 1. Straighten the main container and tame the borders */
  body.chaos-brutal main {
    transform: none !important;       /* Remove the -2deg tilt */
    border: 5px solid #000 !important; /* Reduce 15px border to 5px */
    box-shadow: 10px 10px 0 #0000ff !important; /* Shrink the hard shadow */

    padding-top: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important; /* Remove negative margins */
    box-sizing: border-box !important;
  }

  /* 2. Logo: Fixed top, flat, and compact */
  body.chaos-brutal .logo {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;

    /* Center horizontally, remove the 1deg rotation */
    transform: translateX(-50%) !important;
    z-index: 60 !important;

    font-size: 32px !important;
    letter-spacing: -1px !important;

    /* Keep the "black box" look but make it header-sized */
    padding: 4px 12px !important;
    margin: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  /* 3. Search Wrapper: Centered */
  body.chaos-brutal .search-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  /* 4. Search Elements: Straighten them out */
  body.chaos-brutal .search-bar-container {
    transform: none !important; /* Remove 3deg rotation */
    width: 100% !important;
    border-width: 4px !important; /* Scale border down slightly */
    box-sizing: border-box !important;
  }

  body.chaos-brutal .search-dropdown {
    transform: none !important; /* Remove rotation */
    border-width: 4px !important;
    margin-top: -4px !important; /* Align with new border width */
    width: 100% !important;
    box-sizing: border-box !important;
  }
}