/* ==========================================================================
   Woohoo9 - "Cobalt & Citron"
   Layout personality: an editorial scoreboard. A dark cobalt broadsheet where
   every band hangs off one lit horizontal rail, and acid citron is the only
   bright thing on screen - used once per block, never twice.
   Ornament: the hex seam (hairline + filled hexagon), echoing the brand mark.
   ========================================================================== */

:root{
  --brand:#0D4FA3;      --brand-dark:#072F63;   --brand-light:#227BED;
  --accent:#E9F425;     --accent-warm:#C9DC00;  --accent-soft:rgba(233,244,37,.13);

  --bg:#060B14;         --bg-card:#0C1524;      --bg-elevated:#121E31;  --bg-panel:#091223;
  --text:#EAF0FA;       --text-muted:#A3B4CB;   --text-dim:#72849C;     --text-on-dark:#EAF0FA;
  --border:#1C2B42;     --border-strong:#2C3F5E; --border-soft:#132134;

  --font-body:"Reddit Sans",system-ui,sans-serif;
  --font-heading:"Noto Serif Display",Georgia,serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --card-radius:18px;

  --shadow-soft:0 2px 10px rgba(2,6,14,.5);
  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 18px 44px -18px rgba(2,6,14,.9);
  --shadow-card-hover:0 1px 0 rgba(233,244,37,.12),0 28px 60px -20px rgba(2,6,14,.95);
  --shadow-cta:0 12px 30px -12px rgba(233,244,37,.5);

  --container:1200px; --container-wide:1320px;
  --header-top-h:2.25rem; --header-main-h:4.5rem;
  --header-h:calc(var(--header-top-h) + var(--header-main-h));

  --hex:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 1rem/1.72 var(--font-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-light);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.16;margin:0 0 .6em;letter-spacing:-.012em}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.22rem,2vw,1.6rem)}
h4{font-size:1.02rem}
p{margin:0 0 1.15rem}
ul,ol{margin:0 0 1.2rem;padding-left:1.3rem}
li{margin:0 0 .55rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* --- D1 THE WIDTH LAW -----------------------------------------------------
   .wrap is the ONLY max-width on the page. Nothing inside a section declares
   its own narrower cap - not cards, not lists, not FAQ rows, not section
   heads. One pair of guide lines runs the full height of every page.        */
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}

/* --- ornament: the hex seam ---------------------------------------------- */
.seam{display:flex;align-items:center;gap:.6rem}
.seam::before{content:"";width:1.6rem;height:1px;background:var(--accent);flex:0 0 auto}
.seam::after{content:"";width:9px;height:10px;background:var(--accent);clip-path:var(--hex);flex:0 0 auto}
.kicker{
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1rem;display:flex;align-items:center;gap:.6rem;
}
.kicker::before{content:"";width:9px;height:10px;background:var(--accent);clip-path:var(--hex);flex:0 0 auto}

/* --- skip link ------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:1rem;top:1rem;padding:.7rem 1.1rem;background:var(--accent);color:#0A1020;border-radius:var(--r-sm);font-weight:700}

/* ==========================================================================
   HEADER - sticky, two rows, never floating
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--border)}
.site-header.is-scrolled{box-shadow:0 14px 34px -22px rgba(0,0,0,.95);border-bottom-color:var(--border-strong)}

.header-top{background:#040810;border-bottom:1px solid var(--border-soft);font-size:.74rem}
.header-top .wrap{min-height:var(--header-top-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.trust-note{display:flex;align-items:center;gap:.55rem;color:var(--text-muted);letter-spacing:.055em}
.trust-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .trust-dot{animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(233,244,37,.5)}50%{opacity:.62;box-shadow:0 0 0 6px rgba(233,244,37,0)}}
}
.util-nav{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0}
.util-nav a{color:var(--text-dim);letter-spacing:.055em}
.util-nav a:hover{color:var(--accent)}

.header-main .wrap{min-height:var(--header-main-h);display:flex;align-items:center;gap:1.6rem}
.brand-logo{display:flex;align-items:center;flex:0 0 auto}
.brand-logo img{height:42px;width:auto;object-fit:contain}

.main-nav{margin-left:auto;position:relative}
.main-nav ul{display:flex;gap:1.85rem;list-style:none;margin:0;padding:0}
.main-nav a{
  color:var(--text-muted);font-size:.9rem;font-weight:500;letter-spacing:.02em;
  padding:.45rem 0;display:block;transition:color .25s ease;
}
.main-nav a:hover,.main-nav a.active{color:var(--text)}
.nav-indicator{
  position:absolute;bottom:-2px;height:2px;background:var(--accent);
  width:0;left:0;opacity:0;transition:transform .34s cubic-bezier(.16,1,.3,1),width .34s cubic-bezier(.16,1,.3,1),opacity .2s;
  pointer-events:none;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.9rem;letter-spacing:.015em;
  padding:.78rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#0A1020;box-shadow:var(--shadow-cta)}
.btn-primary:hover{background:#F2FC55;color:#0A1020;box-shadow:0 16px 38px -12px rgba(233,244,37,.62)}
.btn-outline{background:transparent;border-color:var(--brand-light);color:#9CC7FF}
.btn-outline:hover{background:rgba(34,123,237,.15);color:#CFE3FF}
.btn-ink{background:var(--bg-elevated);border-color:var(--border-strong);color:var(--text)}
.btn-ink:hover{border-color:var(--accent);color:var(--accent)}
.header-cta{flex:0 0 auto}

.nav-toggle{display:none;width:44px;height:44px;background:none;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;padding:0;position:relative;flex:0 0 auto}
.nav-toggle span{position:absolute;left:12px;width:20px;height:2px;background:var(--text);transition:transform .3s ease,opacity .2s ease}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   HERO - archetype "the gantry"
   One lit rail runs the full container width across the top of the hero.
   The copy hangs below it on the left; the art plate is suspended from it on
   the right by two visible hanger struts and straddles the rail.
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--bg-panel);isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:-2}
.hero-art img{width:100%;height:100%;object-fit:cover;opacity:.2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(104deg,rgba(6,11,20,.98) 0%,rgba(6,11,20,.94) 44%,rgba(6,11,20,.72) 74%,rgba(6,11,20,.9) 100%),
    radial-gradient(90% 70% at 12% 8%,rgba(13,79,163,.4),transparent 62%);
}
.hero .wrap{position:relative;padding-top:3.2rem;padding-bottom:4.6rem}

.gantry{
  position:relative;display:grid;grid-template-columns:1.18fr .82fr;
  column-gap:2.6rem;row-gap:0;align-items:start;
}
.gantry .kicker{grid-column:1/-1;margin-bottom:.9rem}
/* the rail itself - a real grid row, so nothing can strike through the copy */
.gantry-rail{
  grid-column:1/-1;height:2px;margin:0 0 2.4rem;
  background:linear-gradient(90deg,var(--accent) 0%,var(--brand-light) 46%,rgba(34,123,237,.08) 100%);
  box-shadow:0 0 22px rgba(233,244,37,.28);
}
.gantry-copy{position:relative;z-index:2}
.hero h1{margin-bottom:1.1rem;font-size:clamp(2.1rem,4.1vw,3.3rem)}
.hero h1 .highlight{
  font-style:italic;color:var(--accent);position:relative;
  line-height:1.1;padding-bottom:.1em;display:inline-block;
}
.hero h1 .highlight::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.26em;
  background:var(--accent-soft);z-index:-1;border-radius:2px;
}
.hero-sub{font-size:1.07rem;color:var(--text-muted);margin-bottom:1.7rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem}

/* the suspended art - straddles the rail, hung on two visible struts */
.gantry-art{position:relative;z-index:2;grid-column:2;margin-top:-5.4rem;padding-top:1.6rem}
.gantry-plate{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-card);
  aspect-ratio:4/3;background:var(--bg-card);
}
.gantry-plate img{width:100%;height:100%;object-fit:cover}
.gantry-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(6,11,20,.72) 100%)}
/* hanger struts, dropping from the rail to the plate's top edge */
.gantry-art::before,.gantry-art::after{
  content:"";position:absolute;top:0;width:1px;height:1.6rem;background:var(--border-strong);
}
.gantry-art::before{left:22%}
.gantry-art::after{right:22%}

/* foreground object: the suspended hex cluster.
   Pure CSS - the brand's own hexagon repeated at three scales, hung on
   hairline struts. No game art here: every tile in the games folder carries a
   baked-in title that a hexagon crop would slice through. */
.hex-cluster{
  position:absolute;left:-2.6rem;bottom:-3.1rem;z-index:3;
  display:flex;align-items:flex-end;gap:.55rem;
}
.hex-cell{clip-path:var(--hex);border:0;position:relative}
.hex-cell::before{
  content:"";position:absolute;left:50%;bottom:100%;width:1px;height:1.1rem;
  background:var(--border-strong);
}
.hex-cell--lg{
  width:88px;height:98px;
  background:linear-gradient(150deg,var(--brand-light),var(--brand) 62%,var(--brand-dark));
  box-shadow:0 18px 34px -14px rgba(13,79,163,.9);
}
.hex-cell--md{
  width:66px;height:74px;transform:translateY(-16px);
  background:var(--bg-elevated);
  box-shadow:inset 0 0 0 1px var(--border-strong),0 14px 28px -14px rgba(0,0,0,.9);
}
.hex-cell--sm{
  width:46px;height:52px;transform:translateY(8px);
  background:var(--accent);
  box-shadow:0 14px 30px -12px rgba(233,244,37,.65);
}
@media (prefers-reduced-motion:no-preference){
  .hex-cell--lg{--sy:0px;animation:sway 7s ease-in-out infinite}
  .hex-cell--md{--sy:-16px;animation:sway 7s ease-in-out infinite .9s}
  .hex-cell--sm{--sy:8px;animation:sway 7s ease-in-out infinite 1.7s}
  @keyframes sway{
    0%,100%{transform:translateY(var(--sy)) rotate(0)}
    50%    {transform:translateY(calc(var(--sy) - 5px)) rotate(1.6deg)}
  }
}

/* --- hero-bridge stat strip: normal flow, never absolute ------------------ */
.stat-strip{position:relative;z-index:5;margin-top:-3.25rem}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;
  box-shadow:var(--shadow-card);
}
.stat-cell{background:var(--bg-card);padding:1.5rem 1.4rem}
.stat-num{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;color:var(--accent);line-height:1.1;margin:0 0 .3rem}
.stat-label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0}

/* ==========================================================================
   SHARED SECTION MECHANICS
   ========================================================================== */
.section{padding:4.6rem 0}
.section--tight{padding:3.2rem 0}
.section-head{margin-bottom:2.4rem}   /* NO max-width - D1 */
.section-head h2{margin-bottom:.7rem}
.section-head p{color:var(--text-muted);margin:0}

.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);
  padding:2rem;position:relative;overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--accent),var(--brand-light) 68%,transparent);
  opacity:.85;
}
.card::after{
  content:attr(data-mark);position:absolute;right:.8rem;bottom:-.9rem;
  font-family:var(--font-heading);font-style:italic;font-weight:700;font-size:5.2rem;
  color:rgba(234,240,250,.035);pointer-events:none;transition:color .35s ease;line-height:1;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}
.card:hover::after{color:rgba(233,244,37,.09)}
.card>*:last-child{margin-bottom:0}

.intro-block{
  background:var(--bg-panel);border-left:3px solid var(--brand-light);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.5rem 1.8rem;margin:0 0 2rem;
}
.intro-block p:last-child{margin-bottom:0}

.plain-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);padding:2.2rem;box-shadow:var(--shadow-card)}
.plain-card>*:last-child{margin-bottom:0}

/* R3 - column count follows item count */
.floor-grid{display:grid;gap:1.35rem;align-items:stretch}
.floor-grid--cols-1{grid-template-columns:minmax(0,1fr)}
.floor-grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.floor-grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.floor-grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.floor-grid>.card{height:100%}

/* R4b - rich tiles */
.floor-grid--rich{grid-template-columns:minmax(0,1fr);gap:1.6rem}
.floor-grid--rich>.card{padding:2.4rem}
.floor-grid--rich h3{margin-bottom:.9rem}
.rich-kicker{
  font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  border-top:2px solid var(--brand);padding-top:.9rem;margin:1.6rem 0 1rem;
}
.rich-list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.7rem}
.rich-list li{
  position:relative;background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:1rem 1.15rem 1rem 1.45rem;margin:0;overflow:hidden;
}
.rich-list li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--brand-light));
}

/* split layout */
.split-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:center}
.split-media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card);aspect-ratio:16/10}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-body>*:last-child{margin-bottom:0}

/* feature check-list */
.feature-check-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.feature-check-list li{
  position:relative;padding:1.05rem 1.3rem 1.05rem 3.3rem;margin:0;
  background:linear-gradient(100deg,rgba(233,244,37,.07),rgba(233,244,37,.015));
  border:1px solid var(--border-soft);border-left:3px solid var(--accent);
  border-radius:var(--r-md);
}
.feature-check-list li::before{
  content:"";position:absolute;left:1.15rem;top:1.28rem;width:18px;height:18px;border-radius:50%;
  background:var(--accent);
}
.feature-check-list li::after{
  content:"";position:absolute;left:1.52rem;top:1.56rem;width:5px;height:9px;
  border:solid #0A1020;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.feature-check-list--plain{margin-top:1.4rem}

/* R5b - image divider: a contained figure, never a full-bleed strip.
   No sequence number in the aside (R13). */
.image-divider{display:grid;grid-template-columns:1.25fr .75fr;gap:1.6rem;margin:3rem 0;align-items:stretch}
.image-divider figure{margin:0;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card);aspect-ratio:4/3}
.image-divider figure img{width:100%;height:100%;object-fit:cover}
.divider-aside{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:2rem;display:flex;flex-direction:column;justify-content:center;gap:.7rem;
}
.divider-aside .seam{margin-bottom:.2rem}
.divider-aside .d-kicker{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.divider-aside h3{margin:0;font-size:1.3rem}

/* content tables (verbatim DOCX tables) */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--card-radius);box-shadow:var(--shadow-card);margin:0 0 1.6rem}
.content-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.content-table th,.content-table td{padding:.95rem 1.15rem;text-align:left;border-bottom:1px solid var(--border-soft)}
.content-table thead th{background:var(--bg-elevated);color:var(--accent);font-family:var(--font-body);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.content-table tbody tr:last-child td{border-bottom:0}
.content-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}

/* page meta */
.page-meta{font-size:.82rem;color:var(--text-dim);margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.page-meta-author{color:var(--text-muted);font-weight:600}

/* ==========================================================================
   HOMEPAGE BESPOKE SECTIONS
   ========================================================================== */
.home-intro{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.home-intro .intro-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.6rem;align-items:start}
.home-intro .intro-cols p{margin-bottom:1rem;color:var(--text-muted)}
.home-intro .intro-cols p:last-child{margin-bottom:0}

/* bento floor */
.bento-floor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.bento-floor .card:nth-child(1){grid-column:span 2}
.bento-floor .card:nth-child(4){grid-column:span 2}
.bento-floor h3{font-size:1.24rem}
.bento-floor p{color:var(--text-muted);margin-bottom:0}

/* art-deco security grid */
.security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.security-cell{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);
  padding:1.8rem 1.5rem;position:relative;
}
.security-cell::before{
  content:"";position:absolute;top:1.5rem;right:1.5rem;width:14px;height:16px;
  background:var(--brand-light);clip-path:var(--hex);opacity:.75;
}
.security-cell h3{font-size:1.08rem;margin-bottom:.55rem;padding-right:2rem}
.security-cell p{color:var(--text-muted);font-size:.93rem;margin:0}

/* rewards bento: welcome card top-left, VIP strip spanning the bottom */
.rewards-bento{display:grid;grid-template-columns:1.15fr .85fr;gap:1.35rem}
.rewards-bento .reward-vip{grid-column:1/-1}
.reward-welcome{background:linear-gradient(145deg,var(--bg-elevated),var(--bg-card))}
.reward-welcome .reward-figure{font-family:var(--font-heading);font-size:2.9rem;font-weight:700;color:var(--accent);line-height:1;margin:0 0 .4rem}
.reward-vip .vip-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;list-style:none;margin:1.3rem 0 0;padding:0}
.reward-vip .vip-list li{
  margin:0;padding:.9rem 1.1rem;background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-md);font-size:.93rem;color:var(--text-muted);
}

/* support card with oversized italic watermark */
.support-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);
  padding:3rem;position:relative;overflow:hidden;box-shadow:var(--shadow-card);
}
.support-card::after{
  content:"Woohoo9";position:absolute;right:-1.5rem;bottom:-2.6rem;
  font-family:var(--font-heading);font-style:italic;font-weight:700;
  font-size:clamp(5rem,13vw,10rem);color:rgba(34,123,237,.07);line-height:1;pointer-events:none;
}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;position:relative;z-index:1;margin-top:1.6rem}
.support-grid h3{font-size:1.1rem;margin-bottom:.45rem}
.support-grid p{color:var(--text-muted);margin:0;font-size:.95rem}

/* ==========================================================================
   GAME SECTION - "staggered masonry" (D6)
   Every tile traces to the locked `square` games folder. Uniform square art,
   three tile scales flowing through CSS columns, so the columns genuinely
   stagger. Flush top edge, ragged foot closed by the seam rule.
   ========================================================================== */
.game-masonry{columns:5;column-gap:1.15rem}
.game-tile{
  break-inside:avoid;margin:0 0 1.15rem;display:block;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--card-radius);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.game-tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-card-hover)}
.game-tile--lg{width:100%}
.game-tile--md{width:84%;margin-left:auto;margin-right:auto}
.game-tile--sm{width:66%;margin-left:auto;margin-right:auto}
.game-tile img{width:100%;aspect-ratio:1/1;object-fit:cover}
.game-name{
  display:block;padding:.7rem .85rem;font-size:.82rem;font-weight:600;color:var(--text-muted);
  border-top:1px solid var(--border-soft);line-height:1.35;
}
.game-tile:hover .game-name{color:var(--accent)}
.game-foot{margin-top:.6rem;padding-top:1.3rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.game-foot p{margin:0;color:var(--text-dim);font-size:.9rem}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:grid;gap:.8rem}
.faq-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.faq-item[open]{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.25rem 3.4rem 1.25rem 1.5rem;position:relative;
  font-family:var(--font-heading);font-weight:700;font-size:1.04rem;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:1.5rem;top:50%;width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;
  transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:rotate(135deg)}
.faq-answer{padding:0 1.5rem 1.4rem;color:var(--text-muted)}
.faq-answer p:last-child{margin-bottom:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:#040810;border-top:1px solid var(--border);margin-top:4rem;padding-bottom:1.6rem}
.footer-cta{
  background:linear-gradient(135deg,var(--accent),var(--accent-warm));
  color:#0A1020;border-radius:var(--r-xl);padding:2.6rem 2.8rem;
  margin-top:-3rem;position:relative;overflow:hidden;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;justify-content:space-between;
  box-shadow:0 26px 60px -26px rgba(233,244,37,.4);
}
.footer-cta::after{
  content:"Woohoo9";position:absolute;right:-1rem;bottom:-2.4rem;
  font-family:var(--font-heading);font-style:italic;font-weight:700;font-size:clamp(4.5rem,11vw,8.5rem);
  color:rgba(10,16,32,.1);line-height:1;pointer-events:none;
}
.footer-cta h2{margin:0 0 .35rem;color:#0A1020;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.footer-cta p{margin:0;color:rgba(10,16,32,.76);font-weight:500}
.footer-cta-body{position:relative;z-index:1}
.footer-cta .btn{position:relative;z-index:1;background:#0A1020;color:var(--accent);box-shadow:none}
.footer-cta .btn:hover{background:#060B14;color:#F2FC55}

.footer-map{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:2.4rem;padding:3.2rem 0 2.4rem}
.footer-brand img{height:40px;width:auto;object-fit:contain;margin-bottom:1rem}
.footer-brand p{color:var(--text-dim);font-size:.9rem}
.pay-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.pay-pills span{
  font-size:.72rem;letter-spacing:.07em;color:var(--text-muted);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:.34rem .8rem;
}
.footer-col h3{font-family:var(--font-heading);font-style:italic;font-size:1.02rem;margin:0 0 1rem;position:relative;padding-bottom:.65rem}
.footer-col h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--accent)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 .6rem}
.footer-col a{color:var(--text-dim);font-size:.9rem}
.footer-col a:hover{color:var(--accent)}

.trust-pills{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.5rem 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.trust-pills span{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;letter-spacing:.06em;
  color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.42rem .95rem;
}
.trust-pills span::before{content:"";width:8px;height:9px;background:var(--accent);clip-path:var(--hex);flex:0 0 auto}
.copyright{padding-top:1.5rem;font-size:.8rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between}
.copyright p{margin:0}

/* ==========================================================================
   404
   ========================================================================== */
.page-404{padding:6rem 0 4rem;text-align:left}
.code-404{
  font-family:var(--font-heading);font-style:italic;font-weight:700;font-size:clamp(8rem,22vw,18rem);
  line-height:.86;margin:0 0 1rem;
  background:linear-gradient(135deg,var(--accent),var(--brand-light) 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .reveal.is-visible{opacity:1;transform:none}
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width:1100px){
  .game-masonry{columns:4}
  .floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main-nav ul{gap:1.3rem}
}

@media (max-width:900px){
  .nav-toggle{display:block;order:3}
  .header-cta{order:2}
  .nav-indicator{display:none}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 0;margin:0;width:100%;max-width:100vw;
    background:rgba(6,11,20,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    padding:2.2rem 1.5rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;z-index:80;
  }
  body.nav-open .main-nav{transform:none}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav li{border-bottom:1px solid var(--border-soft)}
  .main-nav a{padding:1.1rem 0;font-size:1.06rem}

  .gantry{grid-template-columns:minmax(0,1fr);row-gap:1.8rem}
  .gantry-rail{margin-bottom:0}
  .gantry-art{grid-column:1;margin-top:0;padding-top:0}
  .gantry-art::before,.gantry-art::after{display:none}
  .hex-cluster{left:.4rem;bottom:-1.8rem}

  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-layout,.image-divider,.home-intro .intro-cols,.rewards-bento,.support-grid{grid-template-columns:minmax(0,1fr)}
  .bento-floor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-floor .card:nth-child(1),.bento-floor .card:nth-child(4){grid-column:span 2}
  .game-masonry{columns:3}
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .reward-vip .vip-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  /* the masthead row is the one place that can exceed 375px: a 5.2:1
     wordmark, a CTA pill and a burger do not fit side by side at full size */
  .header-main .wrap{gap:.8rem}
  .brand-logo img{height:34px}
  .header-cta .btn{padding:.62rem 1rem;font-size:.82rem}
  .util-nav{gap:.9rem}
  .section{padding:3.4rem 0}
  .support-card{padding:2rem}
  .footer-cta{padding:2rem}
  .game-masonry{columns:2}
}

@media (max-width:560px){
  .wrap{padding:0 1rem}
  .header-main .wrap{gap:.55rem}
  .brand-logo img{height:28px}
  .header-cta .btn{padding:.52rem .85rem;font-size:.75rem}
  .nav-toggle{width:40px;height:40px}
  .nav-toggle span{left:10px;width:20px}
  .nav-toggle span:nth-child(1){top:13px}
  .nav-toggle span:nth-child(2){top:19px}
  .nav-toggle span:nth-child(3){top:25px}
  .header-top .wrap{flex-direction:column;align-items:flex-start;gap:.25rem;padding-top:.3rem;padding-bottom:.3rem}
  :root{--header-top-h:3.4rem}
  .floor-grid--cols-2,.floor-grid--cols-3,.floor-grid--cols-4{grid-template-columns:minmax(0,1fr)}
  .bento-floor{grid-template-columns:minmax(0,1fr)}
  .bento-floor .card:nth-child(1),.bento-floor .card:nth-child(4){grid-column:span 1}
  .security-grid,.footer-map{grid-template-columns:minmax(0,1fr)}
  .stat-grid{grid-template-columns:minmax(0,1fr)}
  .reward-vip .vip-list{grid-template-columns:minmax(0,1fr)}
  .game-tile--md,.game-tile--sm{width:100%}
  .plain-card,.card,.floor-grid--rich>.card{padding:1.5rem}
  .hex-cluster{display:none}
}

@media (max-width:480px){
  .game-masonry{columns:1}
  .hero .wrap{padding-top:3rem;padding-bottom:3.4rem}
  .btn{width:100%}
  .header-cta .btn{width:auto}
  .footer-cta .btn{width:auto}
}

/* a split whose media frame has not been generated collapses to one column */
.split-layout:has(> :only-child){grid-template-columns:minmax(0,1fr)}

/* 4-up cell whose source list item must stay one verbatim run: the label is
   emphasised in place and reads as the cell's heading */
.cell-lead{margin:0;color:var(--text-muted);font-size:.93rem}
.cell-lead strong{
  display:block;font-family:var(--font-heading);font-weight:700;
  font-size:1.08rem;color:var(--text);margin-bottom:.5rem;padding-right:2rem;
}