/*
 * Little Clash — Static Stylesheet (Supercell-style toy/cartoon)
 * Loaded after Tailwind Play CDN. Defines:
 *   - Type / selection / base
 *   - Toy buttons, ribbons, sticker tape, comic burst, halftone, paper grain
 *   - Floating animations (bobble, wiggle, pulse-glow, sticker-pop)
 */

/* ---------- Tokens ---------- */
:root {
  --c-violet: #7c3aed;
  --c-violet-deep: #5b21b6;
  --c-orange: #f97316;
  --c-orange-deep: #c2410c;
  --c-pink: #ec4899;
  --c-pink-deep: #be185d;
  --c-sky: #0ea5e9;
  --c-sky-deep: #0369a1;
  --c-yellow: #facc15;
  --c-cream: #fff7ed;
  --c-ink: #1e1b4b;
}

/* ---------- Base ---------- */
body {
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: rgb(51 65 85);
  background-color: rgb(255 251 244);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: rgb(254 215 170);
  color: rgb(124 45 18);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* ---------- Stroked display text (cartoon sticker headlines) ---------- */
.text-stroked {
  -webkit-text-stroke: 3px #1e1b4b;
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 #1e1b4b,
    0 8px 0 rgba(30, 27, 75, 0.25);
}
.text-stroked-white {
  color: #fff;
  -webkit-text-stroke: 3px #1e1b4b;
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 #1e1b4b,
    0 9px 18px rgba(30, 27, 75, 0.35);
}
.text-stroked-sm {
  -webkit-text-stroke: 2px #1e1b4b;
  paint-order: stroke fill;
}

/* ---------- Toy 3D button ---------- */
.btn-toy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--c-violet);
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  padding: 0.95rem 2rem;
  box-shadow:
    0 6px 0 0 var(--c-ink),
    0 10px 22px -4px rgba(30, 27, 75, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
  user-select: none;
}
.btn-toy:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--c-ink), 0 14px 28px -4px rgba(30, 27, 75, 0.4); }
.btn-toy:active { transform: translateY(4px); box-shadow: 0 2px 0 0 var(--c-ink), 0 4px 10px -2px rgba(30, 27, 75, 0.4); }

.btn-toy--orange { background: linear-gradient(180deg, #fb923c, #ea580c); }
.btn-toy--violet { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.btn-toy--pink   { background: linear-gradient(180deg, #f472b6, #db2777); }
.btn-toy--sky    { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.btn-toy--yellow { background: linear-gradient(180deg, #facc15, #eab308); color: var(--c-ink); text-shadow: none; }
.btn-toy--white  { background: #ffffff; color: var(--c-ink); text-shadow: none; }
.btn-toy--ghost  { background: rgba(255,255,255,0.85); color: var(--c-ink); text-shadow: none; backdrop-filter: blur(6px); }
.btn-toy--success {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  pointer-events: none;
  cursor: default;
}

/* ---------- Newsletter success message ---------- */
.newsletter-msg {
  display: none;
  margin: 1rem auto 0;
  padding: 0.6rem 1.1rem;
  background: #bbf7d0;
  color: #14532d;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
  box-shadow: 0 4px 0 0 var(--c-ink);
  text-align: center;
  width: fit-content;
  max-width: 100%;
}
.newsletter-msg.show {
  display: block;
  animation: msg-pop 500ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes msg-pop {
  from { transform: scale(0.6) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

/* Backwards compat: keep .btn-casual functional */
.btn-casual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  border-radius: 2rem;
  border: 3px solid var(--c-ink);
  box-shadow: 0 6px 0 0 var(--c-ink), 0 10px 18px -4px rgba(30, 27, 75, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
.btn-casual:hover { transform: translateY(-2px); }
.btn-casual:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 2px 0 0 var(--c-ink), 0 4px 8px -2px rgba(30, 27, 75, 0.35);
}

/* ---------- Toy card (chunky, with hard offset shadow) ---------- */
.card-toy {
  background: #ffffff;
  border: 3px solid var(--c-ink);
  border-radius: 2rem;
  box-shadow: 0 8px 0 0 var(--c-ink), 0 22px 40px -10px rgba(30, 27, 75, 0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-toy:hover { transform: translateY(-4px); box-shadow: 0 12px 0 0 var(--c-ink), 0 28px 50px -10px rgba(30, 27, 75, 0.3); }

.card-toy--violet { background: linear-gradient(180deg, #ede9fe 0%, #ffffff 60%); }
.card-toy--orange { background: linear-gradient(180deg, #ffedd5 0%, #ffffff 60%); }
.card-toy--pink   { background: linear-gradient(180deg, #fce7f3 0%, #ffffff 60%); }
.card-toy--sky    { background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 60%); }
.card-toy--yellow { background: linear-gradient(180deg, #fef9c3 0%, #ffffff 60%); }

/* Soft variant — drops the hard 3D offset for testimonial / refined cards */
.card-toy--soft {
  box-shadow:
    0 18px 40px -12px rgba(30, 27, 75, 0.18),
    0 6px 16px -6px rgba(30, 27, 75, 0.08);
}
.card-toy--soft:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 48px -14px rgba(30, 27, 75, 0.22),
    0 8px 20px -6px rgba(30, 27, 75, 0.1);
}

/* ---------- Sticker (tilted thumbnail with thick border) ---------- */
.sticker {
  border: 6px solid #ffffff;
  border-radius: 1.75rem;
  box-shadow: 0 10px 0 0 var(--c-ink), 0 26px 40px -10px rgba(30, 27, 75, 0.4);
  transform: rotate(-3deg);
  transition: transform 250ms ease;
}
.sticker:hover { transform: rotate(-1deg) scale(1.02); }
.sticker--right { transform: rotate(3deg); }
.sticker--right:hover { transform: rotate(1deg) scale(1.02); }

/* ---------- Ribbon (corner banner for "FEATURED", "NEW") ---------- */
.ribbon {
  position: absolute;
  top: 1.25rem;
  left: -0.5rem;
  background: linear-gradient(180deg, #f97316, #c2410c);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0.45rem 0.95rem 0.45rem 1.1rem;
  border-radius: 0.4rem;
  border: 3px solid var(--c-ink);
  box-shadow: 0 4px 0 0 var(--c-ink);
  z-index: 5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.6rem;
  width: 0.5rem;
  height: 0.6rem;
  background: var(--c-orange-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon--violet { background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.ribbon--violet::before { background: #4c1d95; }
.ribbon--pink { background: linear-gradient(180deg, #f472b6, #be185d); }
.ribbon--pink::before { background: #831843; }
.ribbon--sky { background: linear-gradient(180deg, #38bdf8, #0369a1); }
.ribbon--sky::before { background: #0c4a6e; }

/* ---------- Pill chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--c-ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 0 var(--c-ink);
}
.chip--violet { background: #ede9fe; }
.chip--orange { background: #ffedd5; }
.chip--pink   { background: #fce7f3; }
.chip--sky    { background: #e0f2fe; }
.chip--yellow { background: #fef9c3; }
.chip--green  { background: #dcfce7; }

/* ---------- Active nav indicator (sticker tape under link) ---------- */
.nav-active {
  position: relative;
  color: var(--c-orange-deep) !important;
}
.nav-active::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -10px;
  height: 8px;
  background: var(--c-orange);
  border-radius: 999px;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 0 var(--c-ink);
}

/* ---------- Backgrounds ---------- */
/* Candy gradient skies */
.bg-candy-sky    { background: linear-gradient(180deg, #fde68a 0%, #fbcfe8 50%, #fff7ed 100%); }
.bg-candy-violet { background: linear-gradient(180deg, #ddd6fe 0%, #fbcfe8 50%, #fff7ed 100%); }
.bg-candy-sea    { background: linear-gradient(180deg, #bae6fd 0%, #c7d2fe 60%, #fff7ed 100%); }
.bg-candy-sunset { background: linear-gradient(180deg, #fde68a 0%, #fdba74 50%, #fda4af 100%); }

/* ---------- Section wave divider (use on top of section) ---------- */
.wave-top, .wave-bot {
  display: block;
  width: 100%;
  height: 60px;
}

/* ---------- Floating game icons (replaces old halftone/grain/burst) ---------- */
.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.float-icon {
  position: absolute;
  display: inline-block;
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(30, 27, 75, 0.25));
  opacity: 0.95;
  user-select: none;
  will-change: transform, opacity;
  animation-delay: var(--d, 0s);
  animation-duration: var(--t, 6s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.float-icon.size-xs { font-size: 1.1rem; opacity: 0.55; }
.float-icon.size-sm { font-size: 1.6rem; opacity: 0.75; }
.float-icon.size-lg { font-size: 3.4rem; }
.float-icon.size-xl { font-size: 4.5rem; }
.float-icon.dim     { opacity: 0.45; filter: drop-shadow(0 4px 6px rgba(30, 27, 75, 0.15)); }

/* Faint vector tile (hero hero, very subtle, not "ugly noise") */
.bg-arcade-tiles {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%231e1b4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'><polygon points='30,12 35,24 48,24 38,32 42,44 30,37 18,44 22,32 12,24 25,24'/><circle cx='130' cy='40' r='12'/><line x1='130' y1='28' x2='130' y2='52'/><line x1='118' y1='40' x2='142' y2='40'/><rect x='100' y='110' width='28' height='20' rx='6'/><circle cx='108' cy='120' r='2'/><circle cx='120' cy='120' r='2'/><polygon points='50,140 56,150 50,168 44,150'/><polygon points='160,150 166,142 172,150 166,158'/></g></svg>");
  background-size: 180px 180px;
  background-repeat: repeat;
}

@keyframes f-drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  25%      { transform: translate(10px, -16px) rotate(calc(var(--r, 0deg) + 8deg)); }
  50%      { transform: translate(-8px, -22px) rotate(calc(var(--r, 0deg) - 6deg)); }
  75%      { transform: translate(12px, -10px) rotate(calc(var(--r, 0deg) + 6deg)); }
}
@keyframes f-rise {
  0%   { transform: translateY(40px) rotate(var(--r, 0deg)); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-130%) rotate(calc(var(--r, 0deg) + 360deg)); opacity: 0; }
}
@keyframes f-twinkle {
  0%, 100% { transform: scale(1) rotate(var(--r, 0deg)); opacity: 0.95; filter: drop-shadow(0 6px 8px rgba(30,27,75,0.25)); }
  50%      { transform: scale(1.3) rotate(calc(var(--r, 0deg) + 18deg)); opacity: 1; filter: drop-shadow(0 0 18px rgba(252, 211, 77, 0.85)); }
}
@keyframes f-swing {
  0%, 100% { transform: rotate(calc(var(--r, 0deg) - 14deg)); }
  50%      { transform: rotate(calc(var(--r, 0deg) + 14deg)); }
}
@keyframes f-spin360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes f-bounce {
  0%, 100% { transform: translateY(0)    rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

.f-drift   { animation-name: f-drift;    --t: 5.5s; }
.f-rise    { animation-name: f-rise;     --t: 14s; animation-timing-function: linear; }
.f-twinkle { animation-name: f-twinkle;  --t: 2.6s; }
.f-swing   { animation-name: f-swing;    --t: 3.2s; }
.f-spin    { animation-name: f-spin360;  --t: 14s; animation-timing-function: linear; }
.f-bounce  { animation-name: f-bounce;   --t: 2.8s; }

@media (prefers-reduced-motion: reduce) {
  .float-icon { animation: none !important; }
}

/* ---------- Animations ---------- */
@keyframes bobble {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(var(--r, -8deg)); }
  50%      { transform: rotate(calc(var(--r, -8deg) + 6deg)); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
  50%      { box-shadow: 0 0 0 22px rgba(249, 115, 22, 0); }
}
@keyframes sticker-pop {
  0%   { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(var(--r, 0deg)); opacity: 1; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.anim-bobble  { animation: bobble 3.6s ease-in-out infinite; }
.anim-wiggle  { animation: wiggle 2.4s ease-in-out infinite; }
.anim-glow    { animation: pulse-glow 2.4s ease-out infinite; }
.anim-pop     { animation: sticker-pop 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
.anim-spin    { animation: spin-slow 18s linear infinite; }

/* ---------- Misc ---------- */
.tape {
  position: absolute;
  background: rgba(250, 204, 21, 0.85);
  border: 2px dashed rgba(30, 27, 75, 0.35);
  width: 110px;
  height: 22px;
  transform: rotate(-6deg);
  box-shadow: 0 4px 8px rgba(30, 27, 75, 0.15);
}

/* Make hero images really pop */
.img-frame {
  border: 8px solid #fff;
  border-radius: 2rem;
  box-shadow:
    0 12px 0 0 var(--c-ink),
    0 30px 50px -10px rgba(30, 27, 75, 0.4);
}

/* Reusable "wobble" hover for cards */
.hover-wobble { transition: transform 250ms cubic-bezier(.34, 1.56, .64, 1); }
.hover-wobble:hover { transform: rotate(-1deg) translateY(-3px); }

/* Newsletter input refresh */
.input-toy {
  background: #fff;
  border: 3px solid var(--c-ink);
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  color: var(--c-ink);
  box-shadow: 0 4px 0 0 var(--c-ink);
  outline: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.input-toy::placeholder { color: rgba(30, 27, 75, 0.45); }
.input-toy:focus { box-shadow: 0 4px 0 0 var(--c-ink), 0 0 0 6px rgba(124, 58, 237, 0.25); }

textarea.input-toy { border-radius: 1.25rem; }

/* ---------- Carousel ---------- */
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--c-ink);
  box-shadow: 0 4px 0 0 var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-ink);
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
  user-select: none;
}
.carousel-btn:hover { background: #fef08a; }
.carousel-btn:active { box-shadow: 0 1px 0 0 var(--c-ink); }

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--c-ink);
  cursor: pointer;
  transition: width 200ms ease, background 200ms ease;
  padding: 0;
}
.carousel-dot:hover { background: #fef9c3; }
.carousel-dot.is-active {
  width: 28px;
  background: var(--c-orange);
}

/* ---------- Legal article typography ---------- */
.legal-article h2 {
  font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.legal-article h3 {
  font-family: 'Fredoka', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal-article p {
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(51 65 85);
  margin-bottom: 1rem;
}
.legal-article ul, .legal-article ol {
  margin-left: 1.5rem;
  margin-bottom: 1.25rem;
  padding-left: 0.5rem;
}
.legal-article ul { list-style: disc; }
.legal-article ol { list-style: decimal; }
.legal-article li {
  margin-bottom: 0.5rem;
  color: rgb(51 65 85);
  line-height: 1.7;
}
.legal-article a {
  color: var(--c-violet);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.legal-article a:hover { color: var(--c-orange); }
.legal-article strong { color: var(--c-ink); font-weight: 700; }
.legal-article .lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
  padding: 1rem 1.25rem;
  background: rgba(124, 58, 237, 0.06);
  border-left: 4px solid var(--c-violet);
  border-radius: 0 0.75rem 0.75rem 0;
  margin-bottom: 1.5rem;
}

/* Marquee strip */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 3px solid var(--c-ink);
  border-bottom: 3px solid var(--c-ink);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.marquee__track {
  display: inline-block;
  padding: 0.85rem 0;
  animation: marquee 22s linear infinite;
}
.marquee__track > span { display: inline-block; padding: 0 1.5rem; }
.marquee__track > span::after { content: '★'; padding-left: 1.5rem; color: var(--c-orange); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}