/* ========== DESIGN TOKENS ========== */
    :root {
      --m-cream: #fef4e8;
      --m-cream-2: #fde9d2;
      --m-ink: #1a0d2e;
      --m-ink-soft: #3d2a5c;
      --m-purple: #7b3ff2;
      --m-purple-dark: #5b21b6;
      --m-yellow: #ffc107;
      --m-pink: #ec4899;
      --m-mint: #10b981;
      --m-coral: #f97316;
      --m-sky: #38bdf8;

      --m-border: 2.5px solid var(--m-ink);
      --m-shadow: 0 4px 0 var(--m-ink);
      --m-shadow-lg: 0 6px 0 var(--m-ink);
      --m-shadow-soft: 0 12px 32px -8px rgba(26,13,46,0.18);

      --m-radius-sm: 12px;
      --m-radius: 20px;
      --m-radius-lg: 28px;
      --m-radius-xl: 36px;
      --m-radius-pill: 999px;

      --m-font-sans: "Nunito", "Quicksand", system-ui, sans-serif;
      --m-font-mono: "JetBrains Mono", ui-monospace, monospace;
    }

    /* ========== RESET & BASE ========== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--m-font-sans);
      color: var(--m-ink);
      background: var(--m-cream);
      font-weight: 600;
      line-height: 1.4;
      -webkit-font-smoothing: antialiased;
    }

    .m-page {
      max-width: 1440px;
      margin: 0 auto;
      padding: 28px 36px 60px;
    }

    /* ========== WORDMARK ========== */
    .m-wordmark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--m-font-sans);
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--m-ink);
      text-decoration: none;
      flex-shrink: 0;
    }
    .m-badge {
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--m-ink);
      color: var(--m-cream);
      font-weight: 900;
      font-family: var(--m-font-sans);
      line-height: 1;
      box-shadow: inset 0 -3px 0 rgba(255,255,255,0.08);
    }
    .m-tld { color: var(--m-purple); }

    /* ========== PILL BUTTON ========== */
    .m-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--m-radius-pill);
      background: white;
      border: var(--m-border);
      font-family: var(--m-font-sans);
      font-weight: 800;
      font-size: 14px;
      color: var(--m-ink);
      box-shadow: var(--m-shadow);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      white-space: nowrap;
      text-decoration: none;
    }
    .m-pill:hover { transform: translate(0, 2px); box-shadow: 0 2px 0 var(--m-ink); }
    .m-pill.is-yellow { background: var(--m-yellow); }
    .m-pill.is-purple { background: var(--m-purple); color: white; }
    .m-pill.is-pink { background: var(--m-pink); color: white; }
    .m-pill.is-mint { background: var(--m-mint); color: white; }
    .m-pill .pill-icon { font-size: 1.1em; }

    /* ========== STICKER EMOJI ========== */
    .m-sticker {
      display: inline-grid;
      place-items: center;
      border: 2.5px solid var(--m-ink);
      box-shadow: 0 3px 0 var(--m-ink);
    }

    /* ========== CARD ========== */
    .m-card {
      background: white;
      border-radius: var(--m-radius-lg);
      border: var(--m-border);
      box-shadow: var(--m-shadow-lg);
      overflow: hidden;
    }

    /* ========== DOT GRID ========== */
    .m-dotgrid {
      background-image: radial-gradient(rgba(26,13,46,.15) 1.5px, transparent 1.5px);
      background-size: 22px 22px;
    }

    /* ========== EYEBROW ========== */
    .m-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--m-font-mono);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--m-ink);
      font-weight: 800;
    }
    .m-eyebrow::before {
      content: "";
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--m-purple);
      flex-shrink: 0;
    }

    /* ========== HEADLINE ========== */
    .m-headline {
      font-family: var(--m-font-sans);
      font-weight: 900;
      letter-spacing: -0.035em;
      line-height: .95;
      color: var(--m-ink);
    }
    .accent-purple { color: var(--m-purple); }
    .accent-pink { color: var(--m-pink); }
    .accent-yellow {
      background: var(--m-yellow);
      padding: 0 .15em;
      border-radius: 8px;
      display: inline-block;
      transform: rotate(-2deg);
    }

    /* ========== SITE BAR (mobile) ========== */
    .site-bar {
      display: none;
      background: var(--m-ink);
      color: var(--m-cream);
      font-family: var(--m-font-mono);
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 5px 16px;
      justify-content: space-between;
      align-items: center;
      border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
      border: var(--m-border);
      border-bottom: none;
    }
    .site-bar .dots { display: flex; align-items: center; gap: 5px; }
    .site-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m-cream); opacity: 0.35; }
    .site-bar .dot.live { background: var(--m-mint); opacity: 1; }

    /* ========== TOP NAV ========== */
    .top-nav {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 36px;
      background: var(--m-cream);
      border-radius: var(--m-radius-lg);
      border: var(--m-border);
      box-shadow: var(--m-shadow-lg);
    }
    .nav-search {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: white;
      border: var(--m-border);
      border-radius: var(--m-radius-pill);
      box-shadow: inset 0 2px 0 rgba(26,13,46,.05);
      color: var(--m-ink-soft);
      font-weight: 700;
      margin-left: 18px;
      font-family: var(--m-font-sans);
      font-size: 14px;
    }
    .nav-search .shortcut {
      margin-left: auto;
      font-family: var(--m-font-mono);
      font-size: 12px;
      color: var(--m-ink-soft);
    }
    .nav-links {
      display: flex;
      gap: 6px;
      list-style: none;
    }
    .nav-links a {
      padding: 10px 14px;
      border-radius: var(--m-radius-pill);
      font-weight: 800;
      font-size: 14px;
      color: var(--m-ink);
      text-decoration: none;
      transition: background .15s;
    }
    .nav-links a:hover { background: rgba(26,13,46,.06); }
    .nav-links a.active {
      color: white;
      background: var(--m-ink);
    }
    .lang-btn {
      margin-left: 4px;
    }

    /* ========== HERO ========== */
    .hero {
      position: relative;
      text-align: center;
      padding: 90px 40px 60px;
    }
    .hero .m-sticker {
      position: absolute;
    }
    .hero-headline {
      font-size: 120px;
      margin-top: 24px;
      margin-bottom: 28px;
    }
    .hero-sub {
      font-size: 22px;
      max-width: 720px;
      margin: 0 auto 38px;
      color: var(--m-ink-soft);
      font-weight: 600;
      line-height: 1.5;
    }
    .hero-ctas {
      display: inline-flex;
      gap: 14px;
    }

    /* ========== PRODUCT LINES ========== */
    .product-lines {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      padding: 20px 0 80px;
    }
    .pl-card { padding: 28px; position: relative; }
    .pl-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 22px;
    }
    .pl-tag {
      display: inline-block;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 900;
      font-family: var(--m-font-mono);
      color: white;
      border-radius: var(--m-radius-pill);
      border: var(--m-border);
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .pl-title {
      font-size: 32px;
      font-weight: 900;
      margin: 10px 0;
      letter-spacing: -0.02em;
    }
    .pl-body {
      font-size: 15px;
      color: var(--m-ink-soft);
      margin: 0 0 22px;
    }
    .pl-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 18px;
      border-top: 2px dashed rgba(26,13,46,.15);
    }
    .pl-count {
      font-family: var(--m-font-mono);
      font-size: 12px;
      color: var(--m-ink-soft);
    }
    .pl-link {
      font-weight: 800;
      font-size: 14px;
      color: var(--m-ink);
      text-decoration: none;
    }

    /* ========== FEATURED GAMES ========== */
    .featured { margin-bottom: 80px; }
    .featured-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 28px;
    }
    .featured-title {
      font-size: 56px;
      margin-top: 12px;
    }
    .featured-wave {
      display: inline-block;
      margin-left: 12px;
      transform: rotate(8deg);
    }
    .featured-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 18px;
    }
    .feat-hero {
      grid-row: span 2;
      padding: 0;
    }
    .feat-hero-img {
      height: 380px;
      border-radius: 0;
      border: none;
      border-bottom: var(--m-border);
      overflow: hidden;
      position: relative;
    }
    .feat-hero-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feat-hero-body { padding: 24px; }
    .feat-badges { display: flex; gap: 8px; margin-bottom: 12px; }
    .badge-pick {
      background: var(--m-yellow);
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      font-family: var(--m-font-mono);
    }
    .badge-genre {
      background: var(--m-ink);
      color: white;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
    }
    .feat-hero-title {
      font-size: 36px;
      margin: 8px 0;
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .feat-hero-desc {
      color: var(--m-ink-soft);
      margin: 0 0 18px;
      font-size: 15px;
    }
    .feat-hero-footer {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .feat-hero-stats {
      font-size: 13px;
      font-weight: 700;
      color: var(--m-ink-soft);
    }

    /* small featured tiles */
    .feat-small { padding: 0; }
    .feat-small a {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .feat-small-img {
      height: 132px;
      border-radius: 0;
      border: none;
      border-bottom: var(--m-border);
      overflow: hidden;
      position: relative;
    }
    .feat-small-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feat-small-body { padding: 16px; }
    .feat-small-tag {
      display: inline-block;
      background: var(--m-ink);
      color: white;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      font-family: var(--m-font-mono);
    }
    .feat-small-title {
      font-size: 18px;
      margin: 10px 0 4px;
      font-weight: 900;
    }
    .feat-small-desc {
      font-size: 12px;
      color: var(--m-ink-soft);
      margin: 0;
    }

    /* ========== OVER MEBBOLS (DARK) ========== */
    .about-section {
      padding: 48px;
      background: var(--m-ink);
      color: var(--m-cream);
      position: relative;
      overflow: hidden;
    }
    .about-section .m-dotgrid {
      position: absolute;
      inset: 0;
      opacity: .15;
    }
    .about-inner {
      position: relative;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 60px;
      align-items: center;
    }
    .about-eyebrow {
      color: var(--m-yellow);
      margin-bottom: 12px;
      display: inline-flex;
    }
    .about-eyebrow::before { background: var(--m-yellow); }
    .about-title {
      font-size: 64px;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: .95;
      margin: 16px 0 22px;
    }
    .about-title .hl-yellow { color: var(--m-yellow); }
    .about-title .hl-wavy {
      text-decoration: underline wavy var(--m-pink);
      text-underline-offset: 8px;
      text-decoration-thickness: 3px;
    }
    .about-body {
      font-size: 17px;
      opacity: .85;
      line-height: 1.6;
      margin-bottom: 28px;
      max-width: 540px;
    }
    .about-ctas { display: flex; gap: 12px; }
    .pill-ghost {
      background: transparent;
      color: var(--m-cream);
      border-color: var(--m-cream);
      box-shadow: 0 4px 0 var(--m-cream);
    }
    .pill-ghost:hover { box-shadow: 0 2px 0 var(--m-cream); }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .stat-card {
      background: rgba(255,255,255,.06);
      border: 2px solid rgba(254,244,232,.2);
      border-radius: 20px;
      padding: 20px 18px;
    }
    .stat-number {
      font-size: 44px;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--m-yellow);
      line-height: 1;
    }
    .stat-label {
      font-size: 12px;
      font-family: var(--m-font-mono);
      text-transform: uppercase;
      margin-top: 6px;
      opacity: .8;
      letter-spacing: .08em;
    }

    /* ========== SITE FOOTER ========== */
    .site-footer {
      margin-top: 40px;
      padding: 0;
      background: var(--m-ink);
      color: var(--m-cream);
      position: relative;
      overflow: hidden;
      border-radius: var(--m-radius-lg);
      border: var(--m-border);
      box-shadow: var(--m-shadow-lg);
    }
    .site-footer .m-dotgrid {
      position: absolute;
      inset: 0;
      opacity: .15;
      pointer-events: none;
    }
    .footer-top {
      position: relative;
      padding: 48px 48px 36px;
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 60px;
      align-items: center;
      border-bottom: 2px dashed rgba(254,244,232,.18);
    }
    .footer-logo-lockup {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }
    .footer-logo-m {
      width: 64px; height: 64px; border-radius: 18px;
      background: var(--m-yellow); color: var(--m-ink);
      display: grid; place-items: center;
      font-weight: 900; font-size: 42px; line-height: 1;
      border: 2.5px solid var(--m-cream);
      box-shadow: 0 4px 0 var(--m-cream);
    }
    .footer-logo-text {
      font-weight: 900; font-size: 44px; letter-spacing: -0.02em; line-height: 1;
    }
    .footer-logo-text .tld { color: var(--m-yellow); }
    .footer-tagline {
      font-size: 18px; line-height: 1.5; font-weight: 600;
      margin: 0 0 4px; max-width: 480px; opacity: .85;
    }
    .footer-newsletter-eyebrow {
      font-family: var(--m-font-mono); font-size: 12px; font-weight: 800;
      letter-spacing: .12em; color: var(--m-yellow);
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    }
    .footer-newsletter-eyebrow .dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--m-yellow);
    }
    .footer-newsletter h3 {
      font-size: 28px; font-weight: 900; letter-spacing: -0.025em;
      line-height: 1.1; margin: 6px 0 18px;
    }
    .footer-newsletter form {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .footer-newsletter input {
      flex: 1 1 220px;
      padding: 14px 18px; border-radius: 999px;
      border: 2.5px solid rgba(254,244,232,.3);
      background: rgba(255,255,255,.06); color: var(--m-cream);
      font-size: 15px; font-family: inherit; font-weight: 700; outline: none;
      min-width: 0;
    }
    .footer-newsletter input::placeholder { color: rgba(254,244,232,.5); }
    .footer-newsletter .sub-note {
      font-size: 12px; opacity: .55; font-weight: 600; margin-top: 8px; display: block;
    }
    .footer-mid {
      position: relative; padding: 40px 48px;
      display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 40px;
    }
    .footer-col-title {
      font-family: var(--m-font-mono); font-size: 11px; font-weight: 800;
      letter-spacing: .14em; color: var(--m-yellow);
      margin-bottom: 16px; text-transform: uppercase;
    }
    .footer-col ul {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .footer-col a {
      color: var(--m-cream); text-decoration: none;
      font-weight: 700; font-size: 15px;
      display: inline-flex; align-items: baseline; gap: 8px;
      transition: text-decoration .15s;
    }
    .footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
    .footer-col .count {
      font-family: var(--m-font-mono); font-size: 10px; font-weight: 800; opacity: .55;
    }
    .footer-socials {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .footer-social-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 999px;
      border: 2.5px solid var(--m-cream);
      box-shadow: 0 3px 0 var(--m-cream);
      font-weight: 800; font-size: 13px; text-decoration: none;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .footer-social-pill:hover { transform: translate(0, 2px); box-shadow: 0 1px 0 var(--m-cream); }
    .footer-social-pill .s-icon { font-size: 15px; }
    .footer-bowie {
      margin-top: 22px; display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; background: rgba(255,255,255,.06);
      border: 2px solid rgba(254,244,232,.2); border-radius: 16px;
      font-size: 13px; font-weight: 700;
    }
    .footer-bowie .woef { font-style: normal; color: var(--m-yellow); }
    .footer-bottom {
      position: relative;
      padding: 20px 48px 22px;
      background: rgba(0,0,0,.18);
      border-top: 2.5px solid rgba(254,244,232,.18);
      display: flex; justify-content: space-between; align-items: center;
      gap: 18px; flex-wrap: wrap;
    }
    .footer-copyright {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--m-font-mono); font-size: 12px;
      font-weight: 700; color: rgba(254,244,232,.7); letter-spacing: .04em;
    }
    .footer-copyright .sep { opacity: .4; }
    .footer-legal {
      display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    }
    .footer-legal a {
      padding: 6px 12px; border-radius: 999px;
      font-family: var(--m-font-mono); font-size: 11px; font-weight: 800;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--m-cream); text-decoration: none;
      border: 2px solid rgba(254,244,232,.2);
      transition: background .15s;
    }
    .footer-legal a:hover { background: rgba(254,244,232,.08); }
    .footer-locale {
      padding: 6px 12px; border-radius: 999px;
      background: var(--m-yellow); color: var(--m-ink);
      font-family: var(--m-font-mono); font-size: 11px; font-weight: 900;
      letter-spacing: .06em; border: 2px solid var(--m-cream);
    }
    .footer-easter {
      position: relative; text-align: center; padding: 12px;
      font-family: var(--m-font-mono); font-size: 11px; font-weight: 700;
      letter-spacing: .15em; color: rgba(254,244,232,.45);
      border-top: 1px solid rgba(254,244,232,.1);
    }

    /* ========== RESPONSIVE: TABLET ========== */
    @media (max-width: 1200px) {
      .hero-headline { font-size: 80px; }
      .product-lines { grid-template-columns: 1fr 1fr; }
      .product-lines .m-card:last-child { grid-column: span 2; }
      .featured-grid { grid-template-columns: 1fr 1fr; }
      .feat-hero { grid-column: span 2; }
      .feat-hero-img { height: 280px; }
      .about-inner { grid-template-columns: 1fr; gap: 32px; }
      .about-title { font-size: 48px; }
    }

    /* ========== RESPONSIVE: MOBILE ========== */
    @media (max-width: 768px) {
      .m-page { padding: 8px 6px 40px; }

      /* Show site-bar like games.html */
      .site-bar { display: flex; }

      /* Nav becomes games.html-style compact header */
      .top-nav {
        border-radius: 0;
        border-top: none;
        padding: 12px 14px;
        gap: 10px;
        box-shadow: none;
        flex-wrap: wrap;
      }
      .nav-search {
        margin-left: 0;
        order: 10;
        flex-basis: 100%;
        padding: 8px 14px;
      }
      .nav-search .shortcut { display: none; }
      .nav-links { display: none; }
      .lang-btn { margin-left: auto; font-size: 12px; padding: 6px 12px; }

      /* Mobile site wrapper */
      .mobile-site-wrap {
        border: var(--m-border);
        border-radius: var(--m-radius-lg);
        overflow: hidden;
        box-shadow: var(--m-shadow-lg);
        background: var(--m-cream);
      }

      .hero { padding: 48px 16px 32px; }
      .hero .m-sticker { display: none; }
      .hero-headline { font-size: 48px; }
      .hero-sub { font-size: 17px; }
      .hero-ctas { flex-direction: column; gap: 10px; }

      .product-lines {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0 48px;
      }
      .product-lines .m-card:last-child { grid-column: auto; }

      .featured-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .featured-title { font-size: 36px; }
      .featured-grid { grid-template-columns: 1fr; }
      .feat-hero { grid-column: auto; grid-row: auto; }
      .feat-hero-img { height: 200px; }
      .feat-hero-title { font-size: 28px; }

      .about-section { padding: 28px 20px; }
      .about-title { font-size: 36px; }
      .about-body { font-size: 15px; }
      .stats-grid { gap: 10px; }
      .stat-number { font-size: 32px; }

      .footer-top { grid-template-columns: 1fr; gap: 30px; padding: 32px; }
      .footer-mid { grid-template-columns: 1fr 1fr; padding: 32px; gap: 28px; }
      .footer-bottom { padding: 16px 32px; }
      .footer-logo-text { font-size: 32px; }
      .footer-logo-m { width: 48px; height: 48px; font-size: 32px; border-radius: 14px; }
    }

    @media (max-width: 480px) {
      .m-wordmark span { display: none; }
      .hero-headline { font-size: 36px; }
      .hero-sub { font-size: 15px; }
      .pl-title { font-size: 26px; }
      .featured-title { font-size: 28px; }
      .about-title { font-size: 28px; }
      .stat-number { font-size: 28px; }
    }

/* ========== EXTRA: breadcrumb ========== */
.breadcrumb {
  font-family: var(--m-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--m-ink-soft);
  padding: 16px 4px 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.breadcrumb a { color: var(--m-ink); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ========== EXTRA: buttons (generic .btn, used on game pages) ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--m-radius-pill);
  border: var(--m-border);
  font-family: var(--m-font-sans);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  color: var(--m-ink);
  background: white;
  box-shadow: var(--m-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(0,2px); box-shadow: 0 2px 0 var(--m-ink); }
.btn--play { background: var(--m-purple); color: white; font-size: 17px; padding: 16px 28px; }
.btn--outline { background: transparent; }
.btn--disabled {
  background: var(--m-cream-2);
  color: var(--m-ink-soft);
  cursor: default;
  box-shadow: none;
  border-style: dashed;
}
.btn--disabled:hover { transform: none; }

/* ========== EXTRA: game grid / cards (category pages, related games) ========== */
.game-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}
.game-grid li { margin: 0; }
.game-grid a {
  display: block;
  background: white;
  border: var(--m-border);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--m-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.game-grid a:hover { transform: translate(0,2px); box-shadow: 0 2px 0 var(--m-ink); }
.game-grid img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  display: block;
  border-bottom: var(--m-border);
}
.game-grid span {
  display: block;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 15px;
}

/* ========== EXTRA: game hero / play frame ========== */
.game-page { padding: 8px 0 40px; }
.game-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: start;
  margin: 12px 0 40px;
}
.play-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--m-radius-lg);
  border: var(--m-border);
  box-shadow: var(--m-shadow-lg);
  overflow: hidden;
  background: var(--m-ink);
}
.play-poster { position: relative; width: 100%; height: 100%; }
.play-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-poster .btn--play, .play-poster .status-pill {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.game-iframe { width: 100%; height: 100%; border: 0; display: block; }
.play-info h1 { font-family: var(--m-font-sans); font-weight: 900; font-size: 34px; letter-spacing: -0.02em; margin-bottom: 10px; }
.game-intro { font-size: 16px; color: var(--m-ink-soft); font-weight: 600; margin-bottom: 18px; }
.play-tools { display: flex; gap: 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--m-radius-pill);
  background: var(--m-cream); border: var(--m-border);
  font-weight: 800; font-size: 14px; color: var(--m-ink);
  box-shadow: var(--m-shadow);
}

/* ========== EXTRA: game body prose ========== */
.game-body, .legal-page, .about-page-body {
  font-size: 16px; line-height: 1.7; color: var(--m-ink-soft); font-weight: 600;
  max-width: 760px;
}
.game-body p, .legal-page p { margin-bottom: 14px; }
.game-body h2 { font-size: 22px; font-weight: 900; color: var(--m-ink); margin: 28px 0 10px; }
.game-body h2:first-child { margin-top: 0; }
.game-body h3 { font-size: 17px; font-weight: 800; color: var(--m-ink); margin: 20px 0 6px; }
.related-games { margin-top: 48px; }
.related-games h2 { font-size: 26px; font-weight: 900; margin-bottom: 18px; }

/* ========== EXTRA: app store CTAs ========== */
.store-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--m-radius);
  border: var(--m-border); background: var(--m-ink); color: white;
  font-weight: 800; text-decoration: none; box-shadow: var(--m-shadow);
}
.app-screenshot { max-width: 320px; width: 100%; border-radius: var(--m-radius-lg); border: var(--m-border); box-shadow: var(--m-shadow-lg); margin-top: 12px; }
.game-hero--app { grid-template-columns: 1fr; text-align: left; }

/* ========== EXTRA: category page ========== */
.category-page { padding: 8px 0 60px; }

/* ========== EXTRA: legal / static content pages ========== */
.content-page { padding: 8px 0 60px; max-width: 820px; }
.content-page h1 { font-size: 42px; margin: 10px 0 24px; }
.content-page h2 { font-size: 24px; margin: 32px 0 12px; }
.content-page ul, .content-page ol { margin: 0 0 16px 20px; }
.content-page table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.content-page th, .content-page td { border: 1.5px solid rgba(26,13,46,.15); padding: 8px 10px; text-align: left; }
.company-block {
  background: var(--m-cream-2); border: var(--m-border); border-radius: var(--m-radius);
  padding: 18px 22px; font-size: 14px; font-weight: 700; margin: 24px 0;
}

/* ========== EXTRA: contact cards ========== */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin: 24px 0; }
.contact-card { background: white; border: var(--m-border); border-radius: var(--m-radius); padding: 20px; box-shadow: var(--m-shadow); }
.contact-card h3 { font-size: 17px; margin-bottom: 6px; }

@media (max-width: 768px) {
  .game-hero { grid-template-columns: 1fr; }
}

/* ========== EXTRA: over-ons page sections ========== */
/* Note: named .about-page-section (not .about-section) to avoid clashing
   with the existing dark homepage "OVER MEBBOLS" .about-section block above. */
.about-page-section { margin-bottom: 40px; }
.section-eyebrow { margin-bottom: 10px; }
.section-title {
  font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: 14px;
}
.section-body { font-size: 16px; line-height: 1.7; color: var(--m-ink-soft); font-weight: 600; }
.section-body p { margin-bottom: 14px; }
.section-body p:last-child { margin-bottom: 0; }

/* "Wat we maken" cards */
.wat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 24px;
}
.wat-card { padding: 26px 22px; text-align: center; }
.wat-card-emoji { font-size: 44px; margin-bottom: 12px; display: block; }
.wat-card-title { font-size: 19px; font-weight: 900; margin-bottom: 8px; letter-spacing: -0.02em; }
.wat-card-desc { font-size: 14px; color: var(--m-ink-soft); line-height: 1.5; }

/* "Onze waarden" cards */
.waarden-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 24px;
}
.waarde-card { padding: 26px 22px; position: relative; overflow: hidden; }
.waarde-card-stripe { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.waarde-card-emoji { font-size: 32px; margin-bottom: 10px; display: block; }
.waarde-card-title { font-size: 17px; font-weight: 900; margin-bottom: 8px; letter-spacing: -0.02em; }
.waarde-card-desc { font-size: 14px; color: var(--m-ink-soft); line-height: 1.6; }

/* Origin story card */
.origin-card { padding: 36px; position: relative; overflow: hidden; }
.origin-card .m-dotgrid { position: absolute; inset: 0; opacity: .06; pointer-events: none; }
.origin-content { position: relative; }

/* Team card + Bowie */
.team-card { padding: 36px; }
.team-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.bowie-card {
  padding: 20px 22px; border-radius: var(--m-radius); border: var(--m-border);
  background: var(--m-yellow); box-shadow: var(--m-shadow); text-align: center;
  transform: rotate(2deg); max-width: 180px;
}
.bowie-emoji { font-size: 52px; margin-bottom: 6px; display: block; }
.bowie-name { font-weight: 900; font-size: 17px; }
.bowie-role { font-size: 12px; color: var(--m-ink-soft); font-weight: 700; }

/* Contact CTA banner (reused on over-ons page) */
.cta-section {
  text-align: center; padding: 52px 32px;
  background: var(--m-ink); color: var(--m-cream);
  border-radius: var(--m-radius-lg); border: var(--m-border);
  box-shadow: var(--m-shadow-lg); margin: 32px 0;
  position: relative; overflow: hidden;
}
.cta-section .m-dotgrid { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.cta-content { position: relative; }
.cta-title { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; }
.cta-sub {
  font-size: 16px; font-weight: 600; opacity: .85; margin-bottom: 24px;
  max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.5;
}
.pill-light {
  background: var(--m-yellow); color: var(--m-ink);
  border-color: var(--m-cream); box-shadow: 0 4px 0 var(--m-cream);
}
.pill-light:hover { box-shadow: 0 2px 0 var(--m-cream); }

@media (max-width: 768px) {
  .wat-grid, .waarden-grid { grid-template-columns: 1fr; }
  .team-inner { grid-template-columns: 1fr; text-align: center; }
  .bowie-card { margin: 20px auto 0; transform: rotate(0deg); }
  .origin-card, .team-card { padding: 24px 20px; }
  .cta-section { padding: 36px 20px; }
  .cta-title { font-size: 24px; }
}

/* ========== EXTRA: homepage values grid (replaces old fabricated stats-grid) ========== */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.value-card {
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(254,244,232,.2);
  border-radius: 20px;
  padding: 20px 18px;
  text-align: center;
}
.value-emoji { font-size: 32px; margin-bottom: 8px; }
.value-label {
  font-family: var(--m-font-mono);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--m-yellow);
}
@media (max-width: 768px) {
  .values-grid { gap: 10px; }
  .value-emoji { font-size: 26px; }
}