:root{
    --bg-dark:#0F2A20; --bg-darker:#071611; --bg-rose:#D4A3B3;
    --text-light:#F9F9F6; --text-dark:#1A3026; --accent-neon:#EB7391; --accent-btn:#C0345A;
    --glass-bg:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.16);
    --font-heading:'Playfair Display',serif; --font-body:'Manrope',sans-serif; --font-script:'Caveat',cursive;
  }
  *{box-sizing:border-box;}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-neon); outline-offset: 2px; }
  /* Links inside running text/prose must be distinguishable without relying on color alone (WCAG 1.4.1). */
  p a, span a, label a, li a { text-decoration: underline; text-underline-offset: 2px; }

  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg-dark);color:var(--text-light);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:var(--accent-neon);text-decoration:none;transition:color .2s ease;}
  a:hover{color:#f2879f;}
  ::-webkit-scrollbar{height:0;width:0;}
  input,textarea{font-family:var(--font-body);}
  input::placeholder,textarea::placeholder{color:inherit;opacity:.55;}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes popIn{0%{opacity:0;transform:translateY(24px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

  /* ============================ MOBILE ADAPTATION ============================ */

  /* Safety net: nothing should ever force horizontal scroll. */
  img, iframe { max-width:100%; }

  /* Top banner: shorter wording + smaller type on phones. */
  @media (max-width:640px){
    #top-banner{font-size:11px !important;padding:8px 14px !important;line-height:1.4 !important;}
    .banner-full{display:none !important;}
    .banner-short{display:inline !important;}
  }

  /* Header: collapse the nav into a hamburger dropdown on tablet/phone. */
  @media (max-width:860px){
    .header-actions-desktop{display:none !important;}
    .nav-toggle{display:flex !important;align-items:center;justify-content:center;width:42px;height:42px;
      border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
      color:#fff;font-size:19px;cursor:pointer;flex-shrink:0;}
    #site-nav{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column !important;
      align-items:stretch !important;gap:0 !important;background:rgba(9,24,19,.98);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:6px 5% 18px;
      border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 24px 44px rgba(0,0,0,.45);
      max-height:calc(100vh - 64px);overflow-y:auto;}
    #site-nav[data-open="true"]{display:flex !important;}
    #site-nav a{width:100%;text-align:left;font-size:16px !important;opacity:1 !important;
      padding:14px 4px !important;border-bottom:1px solid rgba(255,255,255,.08);}
    #site-nav .nav-auth-mobile{display:flex !important;flex-direction:column;gap:10px;
      margin-top:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);}
  }
  @media (min-width:861px){
    .nav-toggle{display:none !important;}
    .nav-auth-mobile{display:none !important;}
  }

  /* Uniform, calmer section rhythm on phones (desktop marketing-site padding
     is too generous once stacked vertically on a small screen). Longhand
     overrides only touch top/bottom, so the existing 5% side padding stays. */
  @media (max-width:640px){
    section{padding-top:40px !important;padding-bottom:40px !important;}
    footer{padding:44px 5% 24px !important;}
  }
  @media (max-width:860px){
    #hero{padding-top:36px !important;padding-bottom:26px !important;}
    #games-section{padding-top:30px !important;padding-bottom:50px !important;}
    #about-stats{padding-top:52px !important;padding-bottom:52px !important;}
    #contact-section{padding-top:52px !important;padding-bottom:60px !important;}
    #general-disclaimer{padding-top:44px !important;padding-bottom:44px !important;}
    #team-section{padding-top:52px !important;padding-bottom:56px !important;}
    #reviews-section{padding-top:32px !important;padding-bottom:52px !important;}
    #faq-section{padding-top:36px !important;padding-bottom:52px !important;}
    #how-it-works{padding-top:44px !important;padding-bottom:52px !important;}
  }

  /* NOTE ON THE RULES BELOW: the site is rendered client-side by a small
     React-based runtime. React always re-serializes inline styles it sets
     as "prop: value" (colon + a space) and normalizes spacing inside
     function-like values (e.g. "repeat(12,1fr)" becomes "repeat(12, 1fr)").
     That means `div[style*="grid-template-columns:1fr 1fr"]`-style
     attribute-substring selectors -- written against the raw, no-space
     HTML source text -- never match anything in the actually-rendered DOM.
     Real classes are used instead, added directly in the markup, so the
     rules below always match. */

  /* Two-column / multi-column sections collapse to a single column. */
  @media (max-width:860px){
    /* min-width:0 resets the CSS Grid default automatic minimum track size
       (which otherwise equals a child's min-content width) so a track
       actually shrinks to fit -- without it, a single long unbreakable
       run in any grid child can force the whole row (and the page) wider
       than the viewport instead of just wrapping. */
    .grid-2col, .grid-2col-uneven, .footer-grid, .game-lore-row{min-width:0 !important;}
    .grid-2col > *, .grid-2col-uneven > *, .footer-grid > *, .game-lore-row > *{min-width:0 !important;}
    .grid-2col{grid-template-columns:1fr !important;}
    .grid-2col-uneven{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:1fr !important;gap:36px !important;}
    .game-lore-row{grid-template-columns:1fr !important;}
    .game-lore-row > div:first-child{height:200px !important;}
    .photo-overlap{margin-bottom:0 !important;}
    .sticky-col{position:static !important;}
    .footer-copyright{margin-left:0 !important;flex-basis:100%;margin-top:2px;}
    .photo-420{height:240px !important;}
  }
  @media (max-width:640px){
    .grid-3col{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;}
    .review-card{flex:0 0 260px !important;padding:26px 20px !important;}
    .age-gate-card{padding:30px 22px !important;}
    .disclaimer-box{padding:22px 18px !important;}
  }
  @media (max-width:600px){
    .photo-420 .location-card{left:14px !important;right:14px !important;bottom:14px !important;padding:14px 16px !important;}
  }

  /* Games library grid: 12-column desktop grid becomes a single stacked
     column, and every card (whatever span it was given) takes the full row. */
  @media (max-width:760px){
    .games-grid{grid-template-columns:1fr !important;gap:18px !important;}
    .game-card{grid-column:1 / -1 !important;}
  }

  /* Header logo a touch smaller on very small phones. */
  @media (max-width:400px){
    .site-logo{font-size:18px !important;}
  }

  /* Hero collage (home page): the art-directed absolute layout degrades to a
     simple centered stack on small screens instead of overlapping itself. */
  @media (max-width:860px){
    #hero > div{min-height:auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:16px !important;}
    #hero > div > *{position:static !important;transform:none !important;width:100% !important;max-width:420px !important;margin-left:auto !important;margin-right:auto !important;}
        #hero h1{font-size:clamp(30px,9vw,48px) !important;line-height:1.1 !important;}
    #hero img{height:240px !important;width:auto !important;margin:0 auto !important;display:block !important;}
  }

  /* About/Stats (home page): the absolutely-positioned floating stat badges
     become a simple stacked list on small screens. */
  @media (max-width:860px){
    .stats-badges-wrap{height:auto !important;display:flex !important;flex-direction:column !important;gap:16px !important;}
    .stats-badges-wrap > div{position:static !important;transform:none !important;width:100% !important;}
  }

  /* Game modal: use the full screen on phones so the embedded game gets as
     much room as possible. */
  @media (max-width:700px){
    #game-modal{padding:10px !important;}
    #game-modal > div{max-width:100% !important;height:calc(100vh - 20px) !important;border-radius:14px !important;}
  }

  /* Marquee banner: the decorative full-bleed rotated strip is wider than
     the viewport by design on desktop, but combined with the rotation this
     pushes past the edge enough to make the whole page horizontally
     scrollable at any adapted (tablet-and-below) width, not just very
     small phones, so this uses the same 860px breakpoint as the rest of
     the mobile adaptation, not a narrower one. */
  @media (max-width:860px){
    .marquee-banner{width:100% !important;margin-left:0 !important;transform:none !important;border-radius:12px;}
  }