:root{
  --ink:#111;
  --bg:#0b0b0f;
  --card:#ffffff;
  --glass:rgba(255,255,255,.5);
  --shadow:0 12px 30px rgba(0,0,0,.22);
  --radius:18px;
  --pad:clamp(12px,2.5vw,28px);
  --rainbow:conic-gradient(from 180deg at 50% 50%,
    #ff3e3e, #ff7a00, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0, #ff3e3e);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; color:var(--ink); background: var(--bg); font: 500 17px/1.4 ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji";
  overflow-x:hidden;
}

/* Layering: rainbow (-3) < pattern (-2) < runes (-1) < content */
.bg-rainbow{
  position:fixed; inset:-20vmax; z-index:-3;
  background: var(--rainbow);
  filter: blur(60px) saturate(140%);
  animation: swirl 30s linear infinite;
  opacity:.65;
}
@keyframes swirl{ to{ transform: rotate(1turn); } }

.bg-pattern{
  position:fixed; inset:-10vmax; z-index:-2; pointer-events:none;
  background-repeat: repeat;
  background-size: auto;
  background-image:url('../assets/bg/Repeat-BG.svg');
  background-size: auto;
  opacity:.35;
  mix-blend-mode: soft-light;
  filter: blur(2px) saturate(120%);
}

#runes{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px var(--pad);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
  border-bottom: 2px solid rgba(255,255,255,.6);
}
.logo{ height:48px; display:block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.wordmark{ color:#fff; letter-spacing:.08em; font-weight:900; text-shadow: 0 3px 8px rgba(0,0,0,.35); }

/* Jelly Orb Navigation */
.jelly-nav{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.orb{
  --size:58px;
  --shine: radial-gradient(100% 100% at 30% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 48%);
  position:relative;
  width:var(--size); height:var(--size); border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:
    var(--shine),
    conic-gradient(from 180deg, #ff3e3e, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0, #ff3e3e);
  box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 -10px 24px rgba(0,0,0,.18);
  border:3px solid #000;
  transform: translateZ(0);
  transition: transform .15s ease, filter .15s ease;
  overflow:hidden;
}
.orb span{
  position:absolute; bottom:-2.2rem; left:50%; transform:translateX(-50%);
  background:#fff; border:2px solid #000; border-radius:999px; padding:6px 10px; font-weight:900; font-size:13px;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  white-space:nowrap; color:#111;
}
.orb::after{
  content:''; position:absolute; inset:-20%; background: repeating-conic-gradient(from 0turn, rgba(255,255,255,.15) 0 6deg, transparent 6deg 12deg);
  mix-blend-mode: overlay; animation: spin 10s linear infinite;
}
@keyframes spin{ to{ transform: rotate(1turn);} }
.orb:hover{ transform: translateY(-3px) scale(1.06); filter: saturate(130%); }
.orb:active{ transform: translateY(0px) scale(0.98); }
@media (max-width:640px){ .orb{ --size:52px } .orb span{ bottom:-2rem; } }

.hero{ position:relative; padding: clamp(28px,6vw,56px) var(--pad); color:#fff; text-align:center; }
.hero h1{ font-size: clamp(28px, 5vw, 56px); line-height:1.05; text-shadow: 0 6px 20px rgba(0,0,0,.35); }
.tagline{ opacity:.9; margin:.5rem auto 1.25rem auto; max-width: 60ch; }

.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-big{
  display:inline-block; padding:16px 22px; border-radius:16px; font-weight:900; text-decoration:none; color:#111;
  background: linear-gradient(180deg, #fff, #f2f2f2);
  border:3px solid #000; box-shadow: var(--shadow);
}
.cta-ghost{
  display:inline-block; padding:16px 22px; border-radius:16px; font-weight:900; text-decoration:none; color:#111;
  background: rgba(255,255,255,.6); border:3px dashed #000; box-shadow: var(--shadow);
}

.floating-stickers{ position:relative; height: clamp(260px, 38vw, 460px); pointer-events:none; }
/*
.floating-stickers img{
  position:absolute; width: clamp(90px, 14vw, 200px);
  animation: bob 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.3));
}
*/

@keyframes bob{ to{ transform: translateY(-18px) rotate(5deg)} }

/* 13 floater placements */
.floating-stickers img:nth-child(1){ left:3%;  top:18%; animation-duration: 2.2s; transform: rotate(-4deg); }
.floating-stickers img:nth-child(2){ left:11%; top:43%; animation-duration: 3.3s; transform: rotate(3deg); }
.floating-stickers img:nth-child(3){ left:23%; top:28%; animation-duration: 4.3s; transform: rotate(8deg); }
.floating-stickers img:nth-child(4){ left:27%; top:62%; animation-duration: 6.6s; transform: rotate(-8deg); }
.floating-stickers img:nth-child(5){ left:40%; top:20%; animation-duration: 5.8s; transform: rotate(4deg); }
.floating-stickers img:nth-child(6){ left:50%; top:55%; animation-duration: 6.3s; transform: rotate(-3deg); }
.floating-stickers img:nth-child(7){ left:58%; top:26%; animation-duration: 3.2s; transform: rotate(2deg); }
.floating-stickers img:nth-child(8){ left:66%; top:60%; animation-duration: 6.2s; transform: rotate(13deg); }
.floating-stickers img:nth-child(9){ left:73%; top:22%; animation-duration: 2.4s; transform: rotate(-13deg); }
.floating-stickers img:nth-child(10){ left:79%; top:58%; animation-duration: 3.6s; transform: rotate(-2deg); }
.floating-stickers img:nth-child(11){ left:85%; top:18%; animation-duration: 2.7s; transform: rotate(5deg); }
.floating-stickers img:nth-child(12){ left:38%; top:59%; animation-duration: 4.0s; transform: rotate(-5deg); }
.floating-stickers img:nth-child(13){ left:2%; top:63%; animation-duration: 3.2s; transform: rotate(7deg); }
/* Force consistent floater size no matter what JS does */
.floating-stickers img{
  position: absolute;
  width: clamp(90px, 14vw, 200px);
  height: auto;
  max-width: 200px;      /* safety cap */
  max-height: 200px;     /* safety cap */
  will-change: transform;
}

.section{ padding: clamp(28px,6vw,64px) var(--pad); background: rgba(255,255,255,.75); }
.section.alt{ background: rgba(255,255,255,.55); }
.section h2{ margin:0 0 12px 0; font-size: clamp(24px, 3.2vw, 40px); }

.reel{
  display:grid; grid-auto-flow:column; grid-auto-columns: clamp(180px,22vw,260px);
  gap: 16px; overflow-x:auto; padding: 8px; scroll-snap-type:x mandatory;
}
.char-card{
  background:#fff; border-radius: 22px; padding:12px; box-shadow: var(--shadow);
  scroll-snap-align: start; position:relative;
  transition: transform .15s ease;
}
.char-card:hover{ transform: rotate(-1.5deg) translateY(-4px); }
.char-card img{ width:100%; height: clamp(160px, 18vw, 220px); object-fit: contain; display:block; }
.char-card h3{ margin:.4rem 0 .6rem; font-size: 18px; }

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:10px 14px; border-radius:999px; border:2px solid #000; background:#fff; font-weight:800; text-decoration:none; color:#000;
  box-shadow: var(--shadow);
}
.pill.more{ background: #ffe382; cursor:pointer; }
.pill.secret{ background: #c9fff0; cursor:pointer; }
.pill.to-top{ background: #ffd0f8; cursor:pointer; }

.game-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.game-card{ background:#fff; border-radius:22px; padding:16px; box-shadow: var(--shadow); position:relative; overflow:hidden; }
.game-card .sparkle{
  position:absolute; inset:-40% -10%; background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,0) 65%);
  animation: sweep 8s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes sweep{ to{ transform: translateX(120%) rotate(20deg);} }

.shop-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
.shop-item{ background:#fff; border-radius:22px; padding:12px; box-shadow: var(--shadow); text-align:center; }
.shop-item img{ width:100%; height:180px; object-fit:contain; }

.site-footer{ padding: 30px var(--pad); color:#fff; text-align:center; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.6)); }

/* Sparkle bursts (in JS) */
.spark-burst{
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  background: white; box-shadow: 0 0 12px rgba(255,255,255,.9);
  transform: translate(-50%,-50%);
  animation: pop .7s ease forwards;
  pointer-events:none;
}
@keyframes pop{
  to{
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity:0;
  }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .bg-rainbow{ animation: none !important; }
  .floating-stickers img{ animation: none !important; }
  .game-card .sparkle{ display:none; }
}


/* Thread Tabs Navigation: bold, labeled, animated, unmistakably nav */
.thread-nav{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}
.thread-nav .tab{
  --h:44px;
  --pad-x:16px;
  --border:3px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 var(--pad-x);
  border-radius: calc(var(--h)/2);
  text-decoration:none; color:#111; font-weight:900;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35)) padding-box,
    conic-gradient(from 180deg, #ff3e3e, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0, #ff3e3e) border-box;
  border: var(--border) solid transparent;
  box-shadow: 0 10px 20px rgba(0,0,0,.18), inset 0 8px 16px rgba(255,255,255,.25), inset 0 -8px 18px rgba(0,0,0,.08);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
}
.thread-nav .tab .label{ position:relative; z-index:1; }

/* Animated "thread" underline */
.thread-nav .tab::after{
  content:''; position:absolute; left:10px; right:10px; bottom:6px; height:6px; border-radius:999px;
  background: linear-gradient(90deg, #ff3e3e, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0);
  transform: scaleX(.2);
  transform-origin:left center;
  filter: saturate(140%);
  transition: transform .18s ease;
}
.thread-nav .tab:hover{ transform: translateY(-2px) scale(1.02); filter: saturate(120%); }
.thread-nav .tab:hover::after{ transform: scaleX(1); }

/* Active tab state (hash matches in JS if desired); for now style on :focus-visible */
.thread-nav .tab:focus-visible{ outline: none; box-shadow: 0 0 0 4px #000, 0 0 0 8px rgba(255,255,255,.8); }
.thread-nav .tab:active{ transform: translateY(0) scale(.98); }

/* Reduced motion: keep bold without the wiggle */
@media (prefers-reduced-motion: reduce){
  .thread-nav .tab{ transition: none; }
  .thread-nav .tab::after{ transition: none; }
}


/* Thread Tabs v2 — ultra-bold, unmistakable buttons */
.thread-nav{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}
.thread-nav .tab{
  --h:52px;
  --pad-x:20px;
  --bw:4px; /* border width */
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  height:var(--h); padding:0 var(--pad-x);
  border-radius: calc(var(--h)/2);
  text-decoration:none; font-weight:1000; letter-spacing:.02em; font-size:16px;
  color:#111;
  background: #fff; /* solid base so it reads even without gradients */
  border: var(--bw) solid #000;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 10px 18px rgba(255,255,255,.5), inset 0 -10px 22px rgba(0,0,0,.08);
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
  overflow:hidden;
}
/* animated rainbow border ring */
.thread-nav .tab::before{
  content:''; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background: conic-gradient(from var(--rot,180deg), #ff3e3e, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0, #ff3e3e);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ringspin 8s linear infinite;
}
@keyframes ringspin{ to{ --rot:540deg; } }
/* glossy highlight */
.thread-nav .tab::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 40%);
  pointer-events:none;
  mix-blend-mode: screen;
}
.thread-nav .tab:hover{ transform: translateY(-2px) scale(1.03); filter: saturate(120%); }
.thread-nav .tab:active{ transform: translateY(0) scale(.98); }
.thread-nav .tab .label{ position:relative; z-index:1; }

/* Underline thread that grows on hover (extra cue) */
.thread-nav .tab .label::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:6px; border-radius:999px;
  background: linear-gradient(90deg, #ff3e3e, #ffd400, #49ff00, #00ffd1, #0080ff, #7a00ff, #ff00d0);
  transform: scaleX(.15);
  transform-origin:left center;
  transition: transform .18s ease;
}
.thread-nav .tab:hover .label::after{ transform: scaleX(1); }

/* A11y focus */
.thread-nav .tab:focus-visible{ outline: none; box-shadow: 0 0 0 4px #000, 0 0 0 8px rgba(255,255,255,.9); }

@media (prefers-reduced-motion: reduce){
  .thread-nav .tab{ transition:none }
  .thread-nav .tab::before{ animation: none }
}
/* Per-tab color themes (keeps pill, ring + gloss) */
.thread-nav .tab[data-thread="home"]  { background:#ffffff; color:#111;    border-color:#000;    }
.thread-nav .tab[data-thread="books"] { background:#FFE8A3; color:#3B2A00; border-color:#FFB300; }
.thread-nav .tab[data-thread="characters"] { background:#CFF2FF; color:#003844; border-color:#00B7D8; }
.thread-nav .tab[data-thread="merch"] { background:#FFD4F4; color:#3E0030; border-color:#FF4FC7; }
.thread-nav .tab[data-thread="games"] { background:#D9FFD1; color:#113800; border-color:#43C000; }
.thread-nav .tab[data-thread="about"] { background:#E2D9FF; color:#1C0E4A; border-color:#7A54FF; }
.thread-nav .tab:hover {
  filter: saturate(130%) brightness(1.02);
}


/* Floaters: size by HEIGHT, position by center, keep inside */
.floating-stickers { position: relative; }
.floating-stickers img{
  position: absolute;
  height: clamp(110px, 18vw, 190px); /* size by height */
  width: auto;                       /* preserve aspect ratio */
  max-height: 190px;
  transform: translate(-50%, -50%);  /* center-based placement */
  transform-origin: 50% 50%;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.30));
  will-change: transform, left, top;
}

/* Make sure any old width-based sizing or CSS bob isn't fighting us */
.floating-stickers img { animation: none !important; }
/* ===== Character Carousel ===== */
.hero-carousel{
  position: relative;
  margin: clamp(18px, 3vw, 28px) auto 0;
  max-width: 1200px;
  padding: 0 clamp(8px, 2vw, 16px);
}

.hc-viewport{
  overflow: hidden;
  border-radius: 22px;
}

.hc-track{
  display: flex;
  gap: clamp(12px, 1.6vw, 16px);
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  padding: clamp(10px, 2vw, 14px);
}

/* show 5 per view on wide, 3 on tablets, 1–2 on phones */
.hc-track > li{
  list-style: none;
  flex: 0 0 calc((100% - 4 * clamp(12px,1.6vw,16px)) / 5);
  position: relative;
}
@media (max-width: 1024px){
  .hc-track > li{ flex-basis: calc((100% - 2 * clamp(12px,1.6vw,16px)) / 3); }
}
@media (max-width: 640px){
  .hc-track > li{ flex-basis: 80%; }
}

/* Card */
.hc-card{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 4px solid #000;
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 10px 18px rgba(255,255,255,.5);
  padding: clamp(14px, 2.2vw, 18px);
  overflow: visible; /* allow image to pop out */
  min-height: clamp(180px, 26vw, 260px);
  transform: translateZ(0);
}

/* Gloss sweep */
.hc-card::after{
  content:'';
  position:absolute; inset:-40% -10%;
  background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 65%);
  mix-blend-mode: screen;
  animation: hc-sweep 10s linear infinite;
  pointer-events: none;
}
@keyframes hc-sweep{ to{ transform: translateX(120%) rotate(12deg); } }

/* Character image: “pops” outside the block */
.hc-art{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - clamp(90px, 14vw, 180px)); /* lifts the head out */
  height: clamp(120px, 18vw, 220px);
  width: auto;                   /* preserve aspect ratio */
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Label stack */
.hc-name{
  margin: calc(clamp(90px, 14vw, 180px) - 20px) 0 .35rem;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}
.hc-sub{ font-size: 13px; opacity: .75; }

/* Fun per-card color (can tune per character in JS) */
.hc-card[data-tint="red"]   { background: linear-gradient(180deg,#ffe3e3,#ffd1d1); }
.hc-card[data-tint="blue"]  { background: linear-gradient(180deg,#e4f1ff,#d7e8ff); }
.hc-card[data-tint="green"] { background: linear-gradient(180deg,#e6ffe8,#d9ffdc); }
.hc-card[data-tint="pink"]  { background: linear-gradient(180deg,#ffe6fb,#ffd6f7); }
.hc-card[data-tint="gold"]  { background: linear-gradient(180deg,#fff3cf,#ffe9a8); }
.hc-card[data-tint="aqua"]  { background: linear-gradient(180deg,#e8fffd,#d2fffa); }
.hc-card[data-tint="purple"]{ background: linear-gradient(180deg,#efe5ff,#e6d8ff); }

/* Hover lift */
.hc-card:hover{ transform: translateY(-4px) rotate(-.5deg); }

/* Prev/Next */
.hc-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:3px solid #000; background:#fff; cursor:pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
  display:grid; place-items:center; font-size:22px; font-weight:900;
  z-index: 2;
}
.hc-nav.prev{ left: 8px; }
.hc-nav.next{ right: 8px; }
.hc-nav:active{ transform: translateY(-50%) scale(.96); }

/* Hide old floating cloud and old reel (if still present) */
.floating-stickers{ display:none !important; }
#characters .reel{ display:none !important; }
/* Remove rainbow stripes on nav pills */
.thread-nav .tab::before{
  display: none !important;     /* kills the rainbow ring */
  animation: none !important;
  background: none !important;
}
.thread-nav .tab .label::after{
  display: none !important;     /* kills the rainbow underline */
}
/* Remove the glossy reflection overlay on character cards */
.hc-card::after{ display:none !important; }

/* Base card look (colors will be set inline by JS) */
.hc-card{
  background: #fff;              /* JS will override per character */
  border: 4px solid #000;        /* JS will set complementary color */
}

/* Special background for rainbow characters (Unie) */
.hc-card[data-rainbow="true"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)) padding-box,
    conic-gradient(#ff3e3e,#ff7a00,#ffd400,#49ff00,#00ffd1,#0080ff,#7a00ff,#ff00d0,#ff3e3e) border-box;
  border: 4px solid transparent; /* border uses the conic gradient; no JS needed */
}

/* Ensure the character art pops and isn’t clipped */
.hc-card{ overflow: visible; }
.hc-art{ pointer-events: none; 
}