: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{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:#80e9ff;text-decoration:none}
a:hover{text-decoration:underline}

.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;
}
.theme-unicorn::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.4;
  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:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.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}

/* Hamburger button */
.hamburger{
  display:none;            /* shown on mobile via media query */
  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 */
@media (max-width: 5080px){
  .hamburger{display:flex}
  .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:1100px;margin:22px auto;padding:0 16px}

/* 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: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, centered unicorn footer ===== */
.site-footer{
  position: relative;
  margin-top: 40px;
  padding: 24px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  color: var(--text);
  text-align: center;              /* centered text */
}

.site-footer::before{
  /* a thin magical glow bar at the very top of the footer */
  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: 1100px; margin: 0 auto; }

.footer-nav{
  display: inline-flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.footer-nav a{
  font-weight: 800;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 8px;
  color: #80e9ff;                  /* matches theme accent */
}

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

.footer-nav .dot{ color: #93a4c3; }

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

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

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

/* ===== 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 */
.card.hero, .card.hero *{
  grid-column: auto !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}