/* ════════════════════════════════════════════════
       LAYER ORDER
       ════════════════════════════════════════════════ */
@layer reset, tokens, base, layout, components, animations, utilities;

/* ── TOKENS ─────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Palette */
    --color-bg: #fff9f0;
    --color-surface: #ffffff;
    --color-games-bg: #fff0fa;
    --color-ink: #2d2d2d;
    --color-muted: #666666;
    --color-footer-bg: #2d2d2d;

    --color-yellow: #ffd93d;
    --color-coral: #ff6b6b;
    --color-mint: #6bcb77;
    --color-blue: #4d96ff;
    --color-purple: #c77dff;
    --color-orange: #ff9a3c;
    --color-pink: #ff6fd8;

    /* Per-card accent tokens */
    --card-balloon-from: #ff6b6b;
    --card-balloon-to: #ff4081;
    --card-balloon-tag-bg: #ffe0e0;
    --card-balloon-tag-fg: #cc2222;

    --card-rainbow-from: #4d96ff;
    --card-rainbow-to: #6bcb77;
    --card-rainbow-tag-bg: #e0edff;
    --card-rainbow-tag-fg: #1a55cc;

    --card-star-from: #ffd93d;
    --card-star-to: #ff9a3c;
    --card-star-tag-bg: #fff8d0;
    --card-star-tag-fg: #b87800;

    --card-music-from: #c77dff;
    --card-music-to: #ff6fd8;
    --card-music-tag-bg: #f3e0ff;
    --card-music-tag-fg: #8800dd;

    --card-shape-from: #6bcb77;
    --card-shape-to: #4d96ff;
    --card-shape-tag-bg: #e0ffe6;
    --card-shape-tag-fg: #1a8830;

    --card-paint-from: #ff9a3c;
    --card-paint-to: #ff6b6b;
    --card-paint-tag-bg: #ffe8d0;
    --card-paint-tag-fg: #cc5500;

    /* Typography */
    --font-display: "Fredoka One", cursive;
    --font-body: "Nunito", sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-hero: clamp(3rem, 10vw, 6.5rem);
    --text-section: clamp(2rem, 6vw, 3.2rem);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;

    /* Borders */
    --border-width: 3px;
    --border-card: 3.5px;
    --border-color: var(--color-ink);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 50px;

    /* Neobrutalist shadows */
    --shadow-sm: 3px 3px 0 var(--color-ink);
    --shadow-md: 4px 4px 0 var(--color-ink);
    --shadow-lg: 6px 6px 0 var(--color-ink);
    --shadow-xl: 10px 10px 0 var(--color-ink);

    /* Motion */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.18s;

    /* Z-index */
    --z-bg: 0;
    --z-content: 1;
    --z-ribbon: 20;
    --z-skip: 9999;
  }
}

/* ── RESET ──────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }
}

/* ── BASE ───────────────────────────────────────────────── */
@layer base {
  body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-ink);
    overflow-x: hidden;
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23FFD93D' stroke='%232D2D2D' stroke-width='2.5'/%3E%3C/svg%3E")
        16 16,
      auto;
  }

  /* Vivid, consistent keyboard focus ring */
  :focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* Skip-to-content for keyboard/screen-reader users */
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-skip);
    background-color: var(--color-yellow);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: top var(--duration-fast);
  }

  .skip-link:focus {
    top: var(--space-4);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    line-height: 1.1;
  }
}

/* ── LAYOUT ─────────────────────────────────────────────── */
@layer layout {
  .bg-shapes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-bg);
    overflow: hidden;
  }

  .hero {
    position: relative;
    z-index: var(--z-content);
    text-align: center;
    padding: var(--space-20) var(--space-6) var(--space-16);
  }

  .pillars {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: var(--space-6) var(--space-16);
  }

  .wave {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: -2px;
  }

  .wave svg {
    width: 100%;
  }

  .games-section {
    position: relative;
    z-index: var(--z-content);
    background-color: var(--color-games-bg);
    padding: var(--space-16) var(--space-6) var(--space-20);
  }

  .game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .footer {
    position: relative;
    z-index: var(--z-content);
    background-color: var(--color-footer-bg);
    color: var(--color-surface);
    text-align: center;
    padding: var(--space-14) var(--space-6) var(--space-10);
  }

  .footer-pills {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
  }

  @media (max-width: 500px) {
    .hero {
      padding: var(--space-16) var(--space-4) var(--space-10);
    }
    .game-grid {
      grid-template-columns: 1fr;
    }
    .pillars {
      gap: var(--space-3);
    }
  }
}

/* ── COMPONENTS ─────────────────────────────────────────── */
@layer components {
  /* Background deco */
  .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    animation: drift linear infinite;
  }

  .star {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0.18;
    animation: twinkle ease-in-out infinite alternate;
    pointer-events: none;
    user-select: none;
  }

  /* Hero */
  .hero-badge {
    display: inline-block;
    background-color: var(--color-yellow);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-base);
    padding: var(--space-2) 18px;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    letter-spacing: 0.5px;
    animation: popIn 0.5s var(--ease-bounce) both;
  }

  .hero-title {
    font-size: var(--text-hero);
    color: var(--color-ink);
    margin-bottom: var(--space-3);
    animation: popIn 0.5s 0.1s var(--ease-bounce) both;
  }

  .hero-title .word-tiny1 {
    color: var(--color-coral);
  }
  .hero-title .word-games {
    color: var(--color-blue);
  }
  .hero-title .word-tiny2 {
    color: var(--color-mint);
  }
  .hero-title .word-humans {
    color: var(--color-purple);
  }

  .hero-sub {
    font-size: clamp(var(--text-base), 3vw, var(--text-xl));
    font-weight: 700;
    color: var(--color-muted);
    max-width: 520px;
    margin: 18px auto 0;
    line-height: 1.6;
    animation: popIn 0.5s 0.2s var(--ease-bounce) both;
  }

  .emoji-row {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-8) 0 0;
    font-size: 2.2rem;
    animation: popIn 0.5s 0.3s var(--ease-bounce) both;
  }

  .emoji-row span {
    display: inline-block;
    animation: bounce ease-in-out infinite alternate;
  }
  .emoji-row span:nth-child(1) {
    animation-duration: 0.9s;
    animation-delay: 0s;
  }
  .emoji-row span:nth-child(2) {
    animation-duration: 1.1s;
    animation-delay: 0.15s;
  }
  .emoji-row span:nth-child(3) {
    animation-duration: 0.8s;
    animation-delay: 0.3s;
  }
  .emoji-row span:nth-child(4) {
    animation-duration: 1s;
    animation-delay: 0.1s;
  }
  .emoji-row span:nth-child(5) {
    animation-duration: 0.95s;
    animation-delay: 0.25s;
  }

  /* Pillars */
  .pillar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-weight: 800;
    font-size: var(--text-base);
    box-shadow: var(--shadow-md);
    transition:
      transform var(--duration-fast) ease,
      box-shadow var(--duration-fast) ease;
  }

  .pillar:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lg);
  }

  .pillar .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
  }

  /* Ticker */
  .ticker-wrap {
    position: relative;
    z-index: var(--z-content);
    overflow: hidden;
    background-color: var(--color-yellow);
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: var(--space-3) 0;
    white-space: nowrap;
  }

  .ticker-track {
    display: inline-block;
    animation: ticker 22s linear infinite;
  }

  .ticker-item {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-ink);
    margin: 0 var(--space-6);
  }

  /* Section heading */
  .section-title {
    font-size: var(--text-section);
    text-align: center;
    margin-bottom: var(--space-12);
    color: var(--color-ink);
  }

  .section-title span {
    color: var(--color-coral);
  }

  /* Game card */
  .game-card {
    background-color: var(--color-surface);
    border: var(--border-card) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: block;
    position: relative;
    animation: popIn 0.5s var(--ease-bounce) both;
    transition:
      transform var(--duration-base) var(--ease-bounce),
      box-shadow var(--duration-base) ease;
  }

  /* Only live link-cards are interactive */
  a.game-card {
    cursor: pointer;
  }

  div.game-card {
    cursor: default;
  }

  a.game-card:hover,
  a.game-card:focus-visible {
    transform: translate(-4px, -4px) rotate(-1deg);
    box-shadow: var(--shadow-xl);
  }

  a.game-card:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-sm);
  }

  .game-card:nth-child(1) {
    animation-delay: 0.05s;
  }
  .game-card:nth-child(2) {
    animation-delay: 0.12s;
  }
  .game-card:nth-child(3) {
    animation-delay: 0.19s;
  }
  .game-card:nth-child(4) {
    animation-delay: 0.26s;
  }
  .game-card:nth-child(5) {
    animation-delay: 0.33s;
  }
  .game-card:nth-child(6) {
    animation-delay: 0.4s;
  }

  .card-thumb {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    position: relative;
    overflow: hidden;
  }

  /* Polka dot overlay */
  .card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.22) 2px,
      transparent 2px
    );
    background-size: 20px 20px;
  }

  .thumb-emoji {
    position: relative;
    z-index: 1;
    animation: thumbBounce 1.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
  }

  .card-body {
    padding: var(--space-5) 22px 22px;
    border-top: var(--border-width) solid var(--border-color);
  }

  .card-tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 2px solid var(--border-color);
    margin-bottom: var(--space-3);
  }

  .card-name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    margin-bottom: var(--space-2);
  }

  .card-desc {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: var(--space-4);
  }

  .card-meta {
    display: flex;
    align-items: center;
  }

  /* Play label — not a real button, decorative only (parent <a> handles interaction) */
  .play-label {
    margin-left: auto;
    background-color: var(--color-ink);
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--text-base);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5);
    letter-spacing: 0.5px;
    transition: background-color var(--duration-fast);
    pointer-events: none;
    user-select: none;
  }

  a.game-card:hover .play-label,
  a.game-card:focus-visible .play-label {
    background-color: var(--color-coral);
  }

  /* Coming-soon state */
  .card-coming .card-thumb,
  .card-coming .card-body {
    opacity: 0.6;
  }

  .coming-ribbon {
    position: absolute;
    top: var(--space-4);
    right: 0;
    background-color: var(--color-orange);
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    padding: var(--space-1) 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-ribbon);
    letter-spacing: 0.5px;
  }

  /* Footer */
  .footer-logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: var(--space-3);
  }
  .footer-logo .t1 {
    color: var(--color-yellow);
  }
  .footer-logo .t2 {
    color: var(--color-mint);
  }

  .footer-tagline {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #aaa;
    margin-bottom: 28px;
  }

  .footer-pill {
    background-color: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    color: #ccc;
  }

  .footer-copy {
    font-size: var(--text-xs);
    color: #555;
    font-weight: 600;
    margin-top: var(--space-8);
  }

  .footer-link {
    color: var(--color-yellow);
    font-weight: 800;
    transition: color var(--duration-fast);
  }
}

/* ── ANIMATIONS ─────────────────────────────────────────── */
@layer animations {
  @keyframes popIn {
    from {
      opacity: 0;
      transform: scale(0.7) translateY(20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes bounce {
    from {
      transform: translateY(0) rotate(-5deg);
    }
    to {
      transform: translateY(-14px) rotate(5deg);
    }
  }

  @keyframes drift {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
    }
    100% {
      transform: translateY(0) rotate(360deg);
    }
  }

  @keyframes twinkle {
    from {
      transform: scale(0.8) rotate(-10deg);
      opacity: 0.12;
    }
    to {
      transform: scale(1.2) rotate(10deg);
      opacity: 0.28;
    }
  }

  @keyframes thumbBounce {
    from {
      transform: scale(1) rotate(-6deg);
    }
    to {
      transform: scale(1.12) rotate(6deg);
    }
  }

  @keyframes ticker {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ── UTILITIES ──────────────────────────────────────────── */
@layer utilities {
  .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;
  }

  .wave-bottom {
    background-color: var(--color-games-bg);
  }
}