:root{
  --bg:#0b1020;
  --bg-card:#11172b;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --border:#243045;
  --primary:#ff80ff;   /* pink-magic */
  --primary-2:#80e9ff; /* aqua-magic */
  --accent:#ffe066;    /* stardust */
  --ok:#34d399;
  --warn:#f59e0b;
  --bad:#ef4444;
}

*{box-sizing:border-box;}
html,body{overflow-x:hidden;margin:0;padding:0;background:var(--bg);color:var(--text);font:18px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:#80e9ff;text-decoration:none}
a:hover{text-decoration:none}

.theme-unicorn{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,128,255,.25), transparent 40%),
    radial-gradient(1000px 500px at 90% 0%, rgba(128,233,255,.22), transparent 45%),
    radial-gradient(900px 500px at 50% 110%, rgba(255,224,102,.10), transparent 50%),
    var(--bg);
  position:relative;
  z-index:0; /* helps keep decorative layers behind content/ads */
}
.theme-unicorn::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.4;
  z-index:0; /* helps keep decorative layers behind content/ads */
  background-image:
    radial-gradient(#fff8 1px, transparent 1px),
    radial-gradient(#fff5 1px, transparent 1px);
  background-size: 40px 40px, 26px 26px;
  background-position: 0 0, 13px 19px;
  /* animation: twinkle 6s linear infinite;  <-- remove this line */
}

.site-header{
  position:sticky;top:0;z-index:50;background:rgba(11,16,32,.6);
  border-bottom:1px solid var(--border);backdrop-filter:saturate(160%) blur(8px)
}
.nav-wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px} /* was 1100 for maxwidth, updated for ads */
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--text);letter-spacing:.3px}
.brand-logo{display:block;filter:drop-shadow(0 2px 6px #0008)}
.header-controls{display:flex;align-items:center;gap:12px;}



/* for hamburger menu */
/* Accessible hide */
/* .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} is duplicated below */

/* Hamburger button */
.hamburger{
  display:flex;            /* shown on desktop AND mobile */
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  width:44px;height:44px;
  background:transparent;
  border:0;
  padding:0;
  border-radius:10px;
  cursor:pointer;
}
.hamburger:focus-visible{outline:2px solid #a78bfa; outline-offset:2px;}

.hamburger span{
  display:block;
  width:24px; height:2px;
  background:#e2e8f0;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Animate to "X" when open */
.hamburger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Desktop nav stays as-is */
.site-nav{display:flex;gap:16px}
.site-nav a{padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:#ffffff12}

/* Mobile layout */
/* Hamburger dropdown menu (all screen sizes) */
.site-nav{
  display:none;
  position:absolute;
  right:16px;
  top:64px;
  flex-direction:column;
  gap:8px;
  padding:10px;
  background:#00030acc; /* translucent */
  backdrop-filter: blur(6px);
  border:1px solid #334155;
  border-radius:12px;
}

.site-nav.is-open{display:flex;}

/* end of hamburger menu css */

.page{max-width:1280px;margin:22px auto;padding:0 16px; position:relative; z-index:1;} /* was 1100, updated to 1000 for ads on desktop, then to 1280 */

/* Optional: desktop content + sidebar layout (use with matching HTML wrappers) */
.layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items:start;
}
.main{min-width:0;}
.sidebar{min-width:0;}
@media (max-width: 1100px){
  .layout{grid-template-columns:1fr;}
}

/* Optional: reserve space for manual in-content ad placeholders to reduce CLS */
.ad-slot{
  display:block;
  margin:16px 0;
  min-height:250px;
  width:100%;
}
@media (min-width: 1100px){
  .ad-slot{min-height:280px;}
}

/* Cards + hero */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 10px 30px #0007}
.card + .card{margin-top:16px}
.center{text-align:center}
.muted{color:var(--muted)}

.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }
.hero .shimmer{
  font-weight:900;font-size:clamp(28px,5vw,40px);letter-spacing:.3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero .sub{color:#c7d2fe}

/* Form */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){ .grid{grid-template-columns:1fr} }
label{font-weight:700;letter-spacing:.2px}
input[type="text"], select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#0e1430;color:#f1f5f9
}
input::placeholder{color:#94a3b8}
button{
  appearance:none;border:0;border-radius:12px;padding:12px 16px;font-weight:900;cursor:pointer;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#0b1020;box-shadow:0 6px 18px #0008;transition:transform .08s ease
}
button:hover{transform:translateY(-1px)}
button:disabled{opacity:.6;cursor:not-allowed}

/* Results */
.results{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:900px){ .results{grid-template-columns:1fr} }
.kpi{
  background:#0e1430;border:1px solid var(--border);border-radius:12px;padding:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px
}
.kpi .big{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;min-height:1em}
.kpi .tag{font-size:12px;color:#93a4c3;text-transform:uppercase;letter-spacing:.08em}

/* Meter */
.meter{width:100%;height:14px;background:#1b2440;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.meter > span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#34d399,#f59e0b,#ef4444);transition:width .9s cubic-bezier(.22,1,.36,1)}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  border:1px solid var(--border);background:#0e1430;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px
}

/* Celebration banner */
.celebrate{
  margin-top:14px;border:1px dashed #ffffff3a;background:#0e1430;padding:14px;border-radius:14px;
  display:none;align-items:center;gap:12px
}
.celebrate.show{display:flex}
.celebrate .emoji{font-size:28px}
.celebrate .title{font-weight:900}
.celebrate .tiny{font-size:12px;color:#93a4c3}

/* Fun toggle */
.fun-toggle{display:inline-flex;align-items:center;gap:8px;user-select:none}
.fun-toggle input{display:none}
.fun-toggle .toggle-ui{
  width:42px;height:24px;background:#18203a;border:1px solid var(--border);border-radius:999px;position:relative;
  box-shadow:inset 0 3px 10px #0007
}
.fun-toggle .toggle-ui::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#fff,#d6e2ff);
  transition:transform .18s ease
}
.fun-toggle input:checked + .toggle-ui{background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.fun-toggle input:checked + .toggle-ui::after{ transform:translateX(18px); }
.fun-toggle .toggle-label{font-size:12px;color:#cfe0ff;font-weight:800}

/* Confetti canvas */
.confetti-canvas{
  position:fixed;inset:0;pointer-events:none;z-index:5; /* was 60 */
  opacity:0;transition:opacity .15s ease;
  display:block; /* add this */
}
.confetti-live{opacity:1}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .theme-unicorn::before{animation:none}
  .meter > span{transition:none}
}

/* ===== Fancy unicorn footer, expanded for more links ===== */
.site-footer{
  position: relative;
  margin-top: 40px;
  padding: 28px 16px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  z-index: 1;
}

.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-2));
  opacity: 0.95;
}

.footer-inner{
  max-width: 1280px;
  margin: 0 auto;
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0 0 18px;
  text-align: left;
}

.footer-col h3{
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.footer-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a{
  font-weight: 800;
  text-decoration: none;
  color: #80e9ff;
  line-height: 1.35;
}

.footer-links a:hover{
  text-decoration: underline;
}

.tagline{
  margin: 8px 0 4px;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-emoji{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.copyright{
  margin: 4px 0 0;
  font-size: 13px;
  color: #93a4c3;
}

@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 640px){
  .site-footer{
    padding: 24px 14px 22px;
  }

  .footer-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .footer-links{
    align-items: center;
  }
}
/* ===== Hero refresh ===== */
.hero { padding: 22px 18px; }
.hero-grid {
  display: grid; gap: 18px; align-items: center;
}
@media (min-width: 900px){
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}

.hero-copy h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin: 4px 0 10px; font-size: clamp(16px, 2.2vw, 18px); }
.hero .hint { margin: 0; color: #93a4c3; font-size: 14px; }

.hero-media {
  position: relative;
  aspect-ratio: 3 / 2;              /* Keeps image tidy at any size */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.hero-image {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


.chip {
  display: inline-block;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 6px 10px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95em;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}
.chip:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* ===== HERO: break out of parent 4-col grid & fill width ===== */
.card.hero{
  grid-column: 1 / -1 !important;   /* span all columns of the parent grid */
  width: 100%;
  max-width: min(1280px, 96vw);
  margin: 18px auto;
  display: block;
}

/* Nuclear option: clear inherited grid placement on hero descendants */
/* UPDATED: keep the idea, but avoid applying to every descendant */
/*
.card.hero, .card.hero *{
  grid-column: auto !important;
  grid-row: auto !important;
}
*/
.card.hero{
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* Use a simple, robust flex layout inside the hero */
.card.hero .hero-grid{
  display: flex !important;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1000px){
  .card.hero .hero-grid{ flex-direction: row; }
  .card.hero .hero-copy,
  .card.hero .hero-media{ flex: 1 1 0; min-width: 0; }
}

/* Let the image grow (no fixed heights) */
.card.hero .hero-media{
  width: 100%;
  max-width: none !important;
  aspect-ratio: 16 / 10;        /* nice wide look on desktop */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.card.hero .hero-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* the code below can be removed if it dosesn't make the text larger, check later */
/* === Bigger, friendlier inputs & button (scoped) === */
/* Applies to forms inside the hero. If your form is elsewhere,
   add class="user-inputs" to its wrapper and this also targets it. */

.card.hero form,
.user-inputs form{
  --ui-font: clamp(16px, 1.8vw, 18px);
  --ui-label: clamp(15px, 1.6vw, 17px);
  --ui-btn: clamp(16px, 2vw, 18px);
}

/* Labels & helper text */
.card.hero form label,
.user-inputs form label{
  font-size: var(--ui-label);
  font-weight: 700;
}
.card.hero .lead,
.card.hero .hint,
.user-inputs .lead,
.user-inputs .hint{
  font-size: clamp(16px, 2vw, 18px);
}

/* Text inputs & country select */
.card.hero form input[type="text"],
.card.hero form input[type="search"],
.card.hero form input[type="email"],
.card.hero form input[type="tel"],
.card.hero form select,
.user-inputs form input[type="text"],
.user-inputs form input[type="search"],
.user-inputs form input[type="email"],
.user-inputs form input[type="tel"],
.user-inputs form select{
  font-size: var(--ui-font);
  padding: 12px 14px;
  height: 48px;              /* nice touch target */
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: rgba(255,255,255,.9);
}

/* Make native selects feel consistent */
.card.hero form select,
.user-inputs form select{
  line-height: 1.2;
}

/* “Reveal My Rarity” button (submit) */
.card.hero form button[type="submit"],
.card.hero .reveal-btn,
.user-inputs form button[type="submit"],
.user-inputs .reveal-btn{
  font-size: var(--ui-btn);
  font-weight: 900;
  padding: 14px 18px;
  height: 52px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(90deg, var(--primary,#a78bfa), var(--accent,#f472b6));
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}
.card.hero form button[type="submit"]:hover,
.user-inputs form button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.card.hero form button[type="submit"]:active,
.user-inputs form button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Tighten spacing between fields a touch */
.card.hero form .row,
.user-inputs form .row{
  gap: 10px;
}
.card.hero form .row > *,
.user-inputs form .row > *{
  min-width: 0;
}

/* === Force dark text on white fields (inputs, selects, textarea) === */
.card.hero form input[type="text"],
.card.hero form input[type="search"],
.card.hero form input[type="email"],
.card.hero form input[type="tel"],
.card.hero form input[type="number"],
.card.hero form select,
.card.hero form textarea,
.user-inputs form input[type="text"],
.user-inputs form input[type="search"],
.user-inputs form input[type="email"],
.user-inputs form input[type="tel"],
.user-inputs form input[type="number"],
.user-inputs form select,
.user-inputs form textarea {
  color: #0f172a !important;     /* dark text */
  background: #ffffff !important;/* white background */
  caret-color: #0f172a;          /* dark caret */
}

/* Placeholder text */
.card.hero form input::placeholder,
.card.hero form textarea::placeholder,
.user-inputs form input::placeholder,
.user-inputs form textarea::placeholder {
  color: #64748b; /* subtle gray */
  opacity: 1;
}

/* Select dropdown text/colors (varies by OS, but this helps) */
.card.hero form select,
.user-inputs form select {
  color: #0f172a !important;
  background-color: #ffffff !important;
}
.card.hero form select option,
.user-inputs form select option {
  color: #0f172a;
  background: #ffffff;
}

/* Chrome/Safari autofill fix (stops white-on-white) */
.card.hero form input:-webkit-autofill,
.user-inputs form input:-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Focus ring for accessibility */
.card.hero form input:focus,
.card.hero form select:focus,
.card.hero form textarea:focus,
.user-inputs form input:focus,
.user-inputs form select:focus,
.user-inputs form textarea:focus {
  outline: 2px solid #a78bfa; /* friendly purple */
  outline-offset: 2px;
}

/* Loading state for submit button */
button.is-loading,
.reveal-btn.is-loading{
  opacity: .85;
  cursor: not-allowed;
  pointer-events: none;
}

/* Cute spinner without changing your HTML */
button.is-loading::before,
.reveal-btn.is-loading::before{
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hrim-spin .75s linear infinite;
  vertical-align: -0.15em;
}

@keyframes hrim-spin { to { transform: rotate(360deg); } }

/* ===== Contact form fixes ===== */

/* Stack label above the field */
#contactForm.grid > div {
  display: flex;
  flex-direction: column;
}

#contactForm label {
  display: block;
  margin: 4px 0 6px;
  font-weight: 700;
  line-height: 1.2;
}

/* Make input & textarea text dark on white */
#contactForm input,
#contactForm textarea,
#contactForm select {
  color: #0f172a !important;
  background: #ffffff !important;
  caret-color: #0f172a;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
}

/* Placeholder color */
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

/* Comfortable sizing */
#contactForm input,
#contactForm textarea {
  font-size: clamp(16px, 1.8vw, 18px);
  padding: 12px 14px;
}

/* Ensure the message box spans full width on desktop */
#contactForm .full { grid-column: 1 / -1; }

@media (min-width: 900px){
  #contactForm.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
}

/* Autofill fix (Chrome/Safari) */
#contactForm input:-webkit-autofill,
#contactForm textarea:-webkit-autofill {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* breadcrumbs for links on top of page under top header */
.breadcrumbs{display:flex;gap:8px;align-items:center;margin:8px 0 0 0;font-size:14px;color:#64748b}
.breadcrumbs a{color:inherit;text-decoration:none;padding:4px 6px;border-radius:8px}
.breadcrumbs a:hover{background:#ffffff12}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--border,#e2e8f0);text-align:left}

/* added sep 29 2025 for updates to hamburger menu */
/* Prevent body scroll (and prevent jump) when drawer is open */
body.no-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden; /* safety; main locking is via fixed+top in JS */
}

/* Fullscreen overlay behind the drawer */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity .18s ease;
}

/* Slide-in drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh; /* handles mobile browser chrome well */
  width: min(92vw, 300px);
  background: #0b1220; /* your site bg */
  color: #fff;
  z-index: 99;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}

/* Drawer parts */
.mobile-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #1f2937;
}
.mobile-drawer__title { font-weight: 700; }
.drawer-close {
  background: transparent; border: 0; color: #e2e8f0; font-size: 20px; cursor: pointer;
}
.mobile-drawer__body {
  padding: 8px 8px 20px;
  overflow-y: auto;           /* <-- drawer scrolls independently */
  -webkit-overflow-scrolling: touch;
}
.drawer-link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}
.drawer-link:hover { background: #ffffff14; }

/* Visible states (toggled by JS) */
.nav-overlay.is-open { opacity: 1; }
.mobile-drawer.is-open { transform: translateX(0); }

/* Show hamburger & hide desktop nav on small screens if needed */
/* @media (max-width: 5080px) {
  .site-nav { display: none; }
  .hamburger { display: inline-flex; }
} already duplicated above */

/* Responsive grid */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

/* Button card */
.menu-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  text-decoration:none;
  border:1px solid #ffffff22;
  box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  will-change: transform;
  background:#111827;        /* fallback */
  color:#fff;
}
.menu-btn:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}
.menu-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  border-color:#ffffff44;
}
.menu-emoji{
  font-size:22px; line-height:1; flex:0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}
.menu-text{
  font-weight:700;
  letter-spacing:.2px;
}

/* Theme swatches (soft gradients that fit your dark theme) */
.theme-pink   { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); }
.theme-sky    { background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%); }
.theme-lime   { background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%); }
.theme-purple { background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%); }
.theme-gold   { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
.theme-teal   { background: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); }
.theme-rose   { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%); }
.theme-amber  { background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%); }
.theme-indigo { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.theme-slate  { background: linear-gradient(135deg, #64748b 0%, #1f2937 100%); }

/* check names for various years, added feb 25 2026 */
.year-btns{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.year-btn{
  border:1px solid #ffffff22;
  background:#ffffff0f;
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}

.year-btn:hover{ background:#ffffff18; }

.year-btn.active{
  background:#16a34a22;
  border-color:#16a34a55;
}

.year-btn .year-sub{
  display:block;
  font-weight:600;
  font-size:11px;
  opacity:.8;
  margin-top:2px;
}

/* Bigger + unicorn-y Year Time Travel UI */
#yearTools{
  border: 1px solid #ffffff22;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, #ffffff0f 0%, #ffffff06 60%, #ffffff10 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}

#yearTools .tiny{
  font-size: 15px;
  line-height: 1.35;
  color: #e2e8f0;
  margin-bottom: 10px;
}

/* The year button row */
.year-btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Big, friendly buttons */
.year-btn{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 88px;
  padding: 12px 14px;
  border-radius: 16px;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid #ffffff2a;
  color: #fff;

  background: linear-gradient(135deg, rgba(168,85,247,.45) 0%, rgba(56,189,248,.35) 55%, rgba(34,197,94,.25) 100%);
  box-shadow: 0 8px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);

  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}

.year-btn:hover{
  transform: translateY(-2px);
  border-color: #ffffff55;
  box-shadow: 0 14px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(1.05);
}

.year-btn:active{
  transform: translateY(0);
}

/* Active year = extra magical */
.year-btn.active{
  border-color: rgba(34,197,94,.65);
  background: linear-gradient(135deg, rgba(34,197,94,.45) 0%, rgba(168,85,247,.40) 55%, rgba(245,158,11,.30) 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,.30), 0 0 0 3px rgba(34,197,94,.18);
}

/* Tiny subtitle under the year */
.year-btn .year-sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  opacity: .92;
  color: #f8fafc;
  text-align: center;
}

/* Add a little unicorn sparkle on active */
.year-btn.active::after{
  content: "🦄";
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Make "Latest" feel special too */
.year-btn:first-child{
  background: linear-gradient(135deg, rgba(245,158,11,.38) 0%, rgba(236,72,153,.32) 60%, rgba(99,102,241,.28) 100%);
}

/* Mobile: even bigger tap targets */
@media (max-width: 520px){
  .year-btn{
    min-width: 46%;
    padding: 14px 14px;
    font-size: 17px;
    border-radius: 18px;
  }
  .year-btns{ gap: 12px; }
}

/* All years: keep it tidy */
#yearButtons.year-btns{
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
}

/* optional: nicer scrollbar */
#yearButtons.year-btns::-webkit-scrollbar{ width: 10px; }
#yearButtons.year-btns::-webkit-scrollbar-thumb{ background:#ffffff22; border-radius: 10px; }

.mini{
  font-size:12px;
  line-height:1.2;
  opacity:.92;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.journey-ad-slot{
  min-height: 1px;
  margin: 10px 0 18px;
}

.card.hero{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.card:not(.hero){
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}


.trust-strip-magic{
  margin-top: 14px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
  color: #4b5563;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trust-strip-magic .trust-item{
  white-space: nowrap;
}

.trust-strip-magic .trust-sep{
  color: #c084fc;
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 640px){
  .trust-strip-magic{
    border-radius: 18px;
    padding: 10px 12px;
    font-size: 0.9rem;
    gap: 6px;
  }

  .trust-strip-magic .trust-item{
    white-space: normal;
  }
}

.table{
  width:100%;
  border-collapse:collapse;
}
.table th,
.table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border,#e2e8f0);
  text-align:left;
}
.table-subhead{
  margin:22px 0 8px;
}
.table-intro{
  margin:0 0 10px;
  color:var(--muted,#cbd5e1);
}
.rare-table + .table-subhead{
  margin-top:26px;
}
.last-updated{
  margin:0 0 12px;
  font-size:14px;
  color:#94a3b8;
}

/* for sidebars and journey ads */

.page{
  max-width: 900px;
  margin: 22px auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.page.page-with-rail{
  max-width: 1280px;
}

.page-with-rail .content-wrap{
  display: grid;
  grid-template-columns: minmax(0, 900px) 320px;
  gap: 24px;
  align-items: start;
  justify-content: center;
}

.page-with-rail .journey-content{
  min-width: 0;
}

.page-with-rail .journey-sidebar{
  width: 320px;
  min-width: 300px;
  min-height: 250px;
}

.card.hero,
.card:not(.hero){
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-with-rail .journey-content > .card,
.page-with-rail .journey-content > .card.hero{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1399px){
  .page.page-with-rail{
    max-width: 900px;
  }

  .page-with-rail .content-wrap{
    grid-template-columns: 1fr;
  }

  .page-with-rail .journey-sidebar{
    display: none;
  }
}

/* results banner */
.sparkle-banner{display:flex;gap:12px;align-items:center;border-radius:14px;padding:12px 14px;border:1px solid var(--border,#e2e8f0)}
.sparkle-banner .emoji{font-size:28px;line-height:1}
.sparkle-banner .title{font-weight:700;font-size:18px;margin-bottom:2px}
.sparkle-banner .tiny{font-size:13px;color:#94a3b8}
.sparkle-banner.neutral{background:#ffffff08}
.sparkle-banner.good{background:#16a34a22;border-color:#16a34a55}
.sparkle-banner.mid{background:#f59e0b22;border-color:#f59e0b55}
.sparkle-banner.bad{background:#ef444422;border-color:#ef444455}

/* celebrity buttons: white text for readability on dark background */
button.celeb-fill{background:transparent;border:1px solid var(--border,#e2e8f0);border-radius:12px;color:#fff}
button.celeb-fill:hover{background:#ffffff12}

/* keep KPI text styles consistent if used later */
.kpi .tag{font-size:12px;color:#64748b;margin-bottom:4px}
.kpi .big{font-size:28px;font-weight:700;margin:4px 0 6px}
.kpi .tiny{font-size:13px;color:#94a3b8}
.title{font-weight:700;font-size:18px;margin-bottom:4px}

.celeb-card{
  background: var(--bg-card);
  border: 1px solid var(--border,#e2e8f0);
  border-radius: 12px;
  color: #fff;
  width: 100%;
}

button.celeb-fill:hover{
  background: #ffffff12;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; border:1px solid var(--border,#e2e8f0);
  padding:8px 12px; border-radius:999px; font-weight:800;
  background: rgba(255,255,255,.9); color:#0f172a;
}
#genForm input[type=range]{ width:100%; }

svg#trendSpark{
  color:#6366f1;
}

/* Contact tweaks (piggybacks on your existing styles) */
.contact-hero .hero-copy h1{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.user-inputs form textarea{
  font-size: clamp(16px, 1.8vw, 18px);
  padding: 12px 14px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: #fff; color:#0f172a;
}
.user-inputs form .full{ grid-column: 1 / -1; }
@media (min-width: 900px){
  .user-inputs form.grid{ grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}

.name-art-inline{
  width: 100%;
  max-width: 920px;
  margin: 28px auto;
}

.name-art-inline img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}