/* Center the whole search block on this page only */
#search-wrapper{
  display:flex;
  justify-content:center;
  padding: 10px 0;
}

/* Keep it narrow and centered like your content column */
#search-wrapper .explanation-columns{
  max-width: 840px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Theme Google CSE to Narcy pink */
.gsc-control-cse, .gsc-control-cse .gsc-table-result{
  background: transparent !important;
  border: none !important;
  color: #e9eaec; /* light text for dark theme */
  font-family: 'Comic Neue', cursive;
}

/* Input field container */
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus{
  border: 1px solid #e49ac2 !important;
  background: rgba(228,154,194,0.10) !important; /* soft Narcy pink */
  box-shadow: none !important;
}

/* Actual text input */
input.gsc-input{
  color: #fff !important;
  background: transparent !important;
}

/* Placeholder color (varies by engine) */
input.gsc-input::placeholder{
  color: #e49ac2;
}

/* Search button */
.gsc-search-button-v2{
  border: 1px solid #e49ac2 !important;
  background: rgba(228,154,194,0.15) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}
.gsc-search-button-v2:hover{
  background: #e49ac2 !important; 
  color: #111 !important; /* readable on solid pink */
}

/* Results links */
.gs-result .gs-title, 
.gs-result .gs-title *{
  color: #e49ac2 !important;           /* Narcy pink links */
  text-decoration: none !important;
}
.gs-result .gs-title:hover,
.gs-result .gs-title:hover *{
  text-decoration: underline !important;
}

/* Snippets */
.gs-snippet{
  color: #ddd !important;
}

/* Pagination */
.gsc-cursor-page{
  color: #e49ac2 !important;
}
.gsc-cursor-page.gsc-cursor-current-page{
  background: #e49ac2 !important;
  color: #111 !important;
  border-radius: 4px;
  padding: 2px 6px;
}

/* Mobile: keep it comfy */
@media (max-width: 600px){
  #search-wrapper .explanation-columns{
    padding: 0 12px;
  }
}



  .comic-panel {
  margin: 25px auto; /* large top/bottom padding */
  background-color: #181818; /* dark container */
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(228, 154, 194, 0.1); /* Narcy pink glow */
  max-width: 600px;
  text-align: center;
}

.comic-panel input.gsc-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: #181818 !important;
  color: #fff !important;
}

.comic-panel .gsc-search-button {
  background-color: transparent !important;
  border: none !important;
}

.comic-panel table,
.comic-panel td {
  background: transparent !important;
  border: none !important;
}
/* Make search panel wider & keep it centered */
.gsc-control-cse .gsc-search-box {
  max-width: 820px !important; /* was 720px, now +100px */
  margin: 0 auto !important;
}

/* Input box styling */
.gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
  border: 1px solid #E49AC2 !important;
  background: rgba(228, 154, 194, 0.10) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 50px !important;
  padding: 0 !important;
}

/* Actual text input — vertically centered */
input.gsc-input {
  color: #fff !important;
  background: transparent !important;
  height: 50px !important;
  line-height: 48px !important; /* match box height minus 2px border */
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

input.gsc-input::placeholder {
  color: #E49AC2 !important;
}

/* Magnifying glass icon on button */
.gsc-search-button-v2 {
  height: 50px !important;
  min-width: 50px !important;
  margin-left: 8px !important;
  border: 1px solid #E49AC2 !important;
  border-radius: 8px !important;
  background: rgba(228, 154, 194, 0.25) !important;
}
.gsc-search-button-v2 svg {
  fill: #E49AC2 !important;
  width: 20px !important;
  height: 20px !important;
}
.gsc-search-button-v2:hover {
  background: #E49AC2 !important;
}
.gsc-search-button-v2:hover svg {
  fill: #111 !important;
}

/* Reset/clear “X” icon */
.gsib_b {
  display: block !important;
  opacity: 1 !important;
}
.gsib_b svg {
  fill: #E49AC2 !important;
  width: 16px !important;
  height: 16px !important;
}
.gsib_b:hover svg {
  fill: #fff !important;
}
/* Make the input container a flex row so contents center vertically */
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus{
  height: 50px !important;
  padding: 0 !important;
}

.gsib_a{
  display: flex !important;
  align-items: center !important;   /* <-- centers the text vertically */
  height: 100% !important;
  padding: 0 12px !important;
}

.gsib_b{
  display: flex !important;         /* clear “X” wrapper */
  align-items: center !important;
}

/* Actual input: no extra vertical metrics; flex does the centering */
input.gsc-input{
  background: transparent !important;
  color: #fff !important;
  height: auto !important;          /* let it size naturally */
  line-height: normal !important;   /* avoid baseline weirdness */
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
}

/* If the text still looks low on Win7/old Chrome, nudge with 1px */
@media screen {
  input.gsc-input{ transform: translateY(0); }
}
/* === FINAL ALIGNMENT FIX (put at BOTTOM) === */

/* Make the 50px input row a true flex row */
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus{
  height: 50px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;   /* centers contents vertically */
}

/* Inner wrappers: text area expands, clear “X” stays snug */
.gsib_a{
  flex: 1 1 auto !important;
  padding: 0 12px !important;
}
.gsib_b{
  flex: 0 0 auto !important;
  align-items: center !important;
  display: flex !important;
  margin-right: 0 !important;       /* adjust if you want more gap */
}

/* The actual input: fill width; stable vertical metrics */
input.gsc-input{
  width: 90% !important;
  height: 32px !important;          /* stable cross-browser */
  line-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  outline: none !important;
}

/* Keep the button aligned to the 50px row */
.gsc-search-button-v2{
  height: 50px !important;
  min-width: 50px !important;
}
/* === NARCY FINAL-FORM SEARCH FIX — put at very bottom === */

/* Wider input row */
.gsc-control-cse .gsc-search-box{
  max-width: 900px !important;   /* bump width */
  margin: 0 auto !important;
}

/* Make the input box a true 50px flex container */
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus{
  display:flex !important;
  align-items:center !important;
  height:50px !important;
  padding:0 !important;
  border:1px solid #E49AC2 !important;
  background: rgba(228,154,194,.10) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  overflow:hidden !important;          /* <- kill inner rounded pill edges */
}

/* Kill inner backgrounds that cause the “pill in a pill” look */
.gsib_a, .gsib_b{
  background: transparent !important;
}

/* Inner text wrapper: fills, centered */
.gsib_a{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  height:100% !important;
  padding:0 12px !important;
}

/* Clear (X) wrapper: keeps its size and centers icon */
.gsib_b{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  padding-right:6px !important;      /* tiny breathing room */
}

/* The actual input */
input.gsc-input{
  width:100% !important;
  height:36px !important;            /* stable cross-browser height */
  line-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#fff !important;
  border:0 !important;
  box-sizing:border-box !important;
  -webkit-appearance:none !important;
  outline:none !important;
}

/* Search button stays level with the 50px row */
.gsc-search-button-v2{
  height:50px !important;
  min-width:50px !important;
  margin-left:8px !important;
  border:1px solid #E49AC2 !important;
  border-radius:8px !important;
  background: rgba(228,154,194,.25) !important;
}
.gsc-search-button-v2 svg{
  width:20px !important;
  height:20px !important;
  fill:#E49AC2 !important;
}
.gsc-search-button-v2:hover{ background:#E49AC2 !important; }
.gsc-search-button-v2:hover svg{ fill:#111 !important; }

/* If Win7 Chrome still nudges text low/high, tweak by 1px here */
html body input.gsc-input{ transform: translateY(0); }   /* try -1px or +1px if needed */
/* Target Google's search box container */
.gsc-search-box,
.gsc-search-box-tools,
.gsc-input {
  display: flex !important;
  justify-content: center !important;
}

/* Style the actual input field */
input.gsc-input {
  width: 100px !important; /* wider field */
  max-width: 90% !important;
  text-align: left;
  border: 1px solid #ff9fdb; /* pink border */
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  color: #fff;
  background-color: #222;
}

/* Magnifying glass styling */
input.gsc-search-button {
  background-color: #ff9fdb !important;
  border-radius: 6px !important;
}

/* Ensure entire box is centered on page */
.gsc-control-cse {
  display: flex !important;
  justify-content: center !important;
}


/* Center and widen the entire search box container */
.gsc-control-cse {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 1px 0 !important; /* top & bottom padding */
}

/* Inner search box layout */
.gsc-search-box {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 800px !important; /* stretches horizontally */
}

/* Search input field */
input.gsc-input {
  width: 200px !important;
  max-width: 600px !important;
  border: 1px solid #e49ac2 !important;
  border-radius: 6px !important;
  background-color: #191919 !important;
  color: #fff !important;
  font-size: 16px !important;
  padding: 10px !important;
}

/* Magnifying glass button */
input.gsc-search-button {
  background-color: #e49ac2 !important;
  border: none !important;
  border-radius: 6px !important;
  margin-left: 8px !important;
}

/* Placeholder text */
input.gsc-input::placeholder {
  color: #e49ac2;
}


/* === Cosmic starfield behind everything === */
.starfield{
  position:fixed; inset:0;
  background:#000;
  overflow:hidden;
  z-index:-1; /* stay behind page */
}

/* one "stars" element renders many stars via box-shadow */
.stars{
  position:absolute; top:0; left:0; width:2px; height:2px; background:#fff;
  opacity:.9; filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
}
/* Generate lots of stars: tweak these sets for density */
.stars.layer-left{
  box-shadow:
    80vw 10vh #fff, 70vw 18vh #fff, 60vw 25vh #fff, 85vw 32vh #fff,
    75vw 40vh #fff, 65vw 55vh #fff, 82vw 60vh #fff, 68vw 72vh #fff,
    58vw 80vh #fff, 78vw 88vh #fff, 62vw 15vh #fff, 66vw 47vh #fff;
  animation: drift-left 60s linear infinite;
}
.stars.layer-right{
  box-shadow:
    20vw 12vh #fff, 30vw 22vh #fff, 40vw 35vh #fff, 15vw 45vh #fff,
    28vw 58vh #fff, 38vw 66vh #fff, 22vw 74vh #fff, 34vw 83vh #fff,
    12vw 18vh #fff, 26vw 51vh #fff, 36vw 90vh #fff, 18vw 68vh #fff;
  animation: drift-right 70s linear infinite;
  opacity:.85;
}
/* slower parallax layer */
.stars.slow{
  transform:scale(1.2);
  opacity:.6;
  animation-duration: 120s;
}

/* Left/right drift (feels like stars flowing from the sides) */
@keyframes drift-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-10vw); }
}
@keyframes drift-right{
  from{ transform: translateX(0); }
  to  { transform: translateX(10vw); }
}

/* Keep the panel floating above the stars */
.comic-panel{
  position:relative;
  background-color:#181818;
  padding:40px;
  border-radius:10px;
  box-shadow:0 0 15px rgba(228,154,194,.1);
  max-width:900px; margin:180px auto; text-align:center;
  z-index:1;
}

/* (Optional) soften edges with a subtle glow ring */
.comic-panel::before{
  content:""; position:absolute; inset:-20px;
  background: radial-gradient(ellipse at center, rgba(228,154,194,.08), transparent 60%);
  z-index:-1; border-radius:16px; filter: blur(10px);
}

/* Make the search row wider/centered (works with your existing search CSS) */
.gsc-control-cse .gsc-search-box{ max-width:900px !important; margin:0 auto !important; }
/* Fullscreen cosmic background with no wobble */
#narcy-warp{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;           /* behind content */
  background:#000;      /* deep space */
  pointer-events:none;  /* ignore touches */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #narcy-warp{ display:none; } /* falls back to solid black */
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}