/* ==========================================================================
   Westgate Capital — playful brand system
   Serious business, told with a wink. Built around the kit's own W mark,
   re-inked into a bouncier, comic-strip register.
   ========================================================================== */

:root{
  --paper:     #FFF6E6;
  --paper-2:   #FFEFD1;
  --ink:       #1B1B1F;
  --ink-soft:  #57545E;
  --indigo:    #262A60;
  --indigo-2:  #3A3F8C;
  --accent:    #9184D9;
  --yellow:    #FFC845;
  --coral:     #FF6F59;
  --sky:       #6FC6DA;

  --font-display: 'Fredoka', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Nunito', 'Helvetica Neue', Arial, sans-serif;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --edge: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.mark{ width:1em; height:1em; fill:none; stroke:currentColor; display:block; }

/* ==========================================================================
   Badges — the mark, worn as a chunky sticker
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  flex-shrink:0;
  transition:transform .2s var(--spring), box-shadow .2s var(--spring);
}
.badge--paper{ background:var(--paper); color:var(--ink); }
.badge--yellow{ background:var(--yellow); color:var(--ink); }
.badge--coral{ background:var(--coral); color:var(--ink); }
.badge--indigo{ background:var(--accent); color:var(--ink); }

.badge--sm{ width:34px; height:34px; }
.badge--sm .mark{ width:18px; height:18px; }
.badge--md{ width:60px; height:60px; margin-bottom:24px; }
.badge--md .mark{ width:32px; height:32px; }
.badge--lg{ width:clamp(96px, 14vw, 160px); height:clamp(96px, 14vw, 160px); border-width:4px; box-shadow:7px 7px 0 var(--ink); }
.badge--lg .mark{ width:58%; height:58%; }

@keyframes wobble{
  0%, 100%{ transform:rotate(-3deg) translateY(0); }
  50%{ transform:rotate(3deg) translateY(-4px); }
}
#heroBadge{ animation:wobble 3.4s ease-in-out infinite; }
#heroBadge.jump{ animation:none; transform:scale(1.18) rotate(-8deg); box-shadow:10px 10px 0 var(--ink); }

.version-switch{
  display:block; width:100%;
  text-align:center;
  font-family:var(--font-display); font-size:12px; font-weight:600;
  color:var(--ink); background:var(--yellow);
  border-bottom:3px solid var(--ink);
  padding:9px 12px;
  transition:background .15s ease;
}
.version-switch:hover{ background:var(--paper); }

.scroll-rail{
  position:fixed; top:0; left:0; width:100%; height:4px; z-index:60;
  background:transparent;
}
.scroll-rail span{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg, var(--ink) 0 10px, var(--yellow) 10px 20px);
  transition:width .08s linear;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{
  position:sticky; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--edge);
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}

.head-mark{ display:flex; align-items:center; gap:12px; }
.head-word{
  font-family:var(--font-display); font-weight:600; font-size:19px;
  letter-spacing:.01em; color:var(--ink);
}

.nav-toggle{
  display:none;
  width:38px; height:38px;
  background:none; border:0; cursor:pointer;
  position:relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:''; position:absolute; left:7px; right:7px; height:3px; border-radius:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-9px) rotate(-45deg); }

.site-nav{ display:flex; gap:14px; }
.site-nav a{
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase;
  padding:9px 16px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--spring), box-shadow .15s var(--spring), background .15s ease;
}
.site-nav a:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--yellow); }
.site-nav a:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:92svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px var(--edge) 60px;
  text-align:center;
  overflow:hidden;
}

.hero-doodles{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.doodle{
  position:absolute;
  font-family:var(--font-display); font-weight:700;
  color:var(--ink); opacity:.14;
  -webkit-text-stroke:0;
}
.doodle--1{ top:14%; left:8%; font-size:clamp(22px,3vw,36px); transform:rotate(-14deg); }
.doodle--2{ top:22%; right:9%; font-size:clamp(20px,2.8vw,32px); transform:rotate(10deg); }
.doodle--3{ top:60%; left:5%; font-size:38px; color:var(--coral); opacity:.5; }
.doodle--4{ bottom:16%; right:12%; font-size:30px; color:var(--sky); opacity:.55; }
.doodle--5{ bottom:10%; left:14%; font-size:clamp(18px,2.4vw,28px); transform:rotate(8deg); }
.doodle--6{ top:10%; right:26%; font-size:24px; color:var(--yellow); opacity:.7; }

.doodle--critter{ opacity:1; height:auto; transform-origin:50% 85%; }
.doodle--squirrel{ width:clamp(56px,7vw,84px); bottom:26%; right:6%; animation:tail-twitch 2.6s ease-in-out infinite; }
.doodle--dog{ width:clamp(50px,6.4vw,76px); top:40%; left:4%; animation:tail-wag 1.7s ease-in-out infinite; }
@keyframes tail-twitch{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
@keyframes tail-wag{
  0%,100%{ transform:rotate(3deg); }
  50%{ transform:rotate(-4deg); }
}

.hero-kicker{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:13px; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:500;
  margin:0 0 22px;
}

.hero-title{
  position:relative; z-index:1;
  margin:0; display:flex; flex-direction:column; align-items:center; gap:.05em;
}
.comic-word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem, 11vw, 7.5rem);
  line-height:.98; letter-spacing:-.01em;
  -webkit-text-stroke:clamp(2px,.5vw,5px) var(--ink);
  paint-order:stroke fill;
  text-shadow:clamp(3px,.8vw,7px) clamp(3px,.8vw,7px) 0 var(--ink);
}
.comic-word--yellow{ color:var(--yellow); }
.comic-word--coral{ color:var(--coral); transform:rotate(-1.5deg); }

.hero-badge-row{ position:relative; z-index:1; margin:34px 0 26px; }

.hero-tagline{
  position:relative; z-index:1;
  max-width:38ch;
  margin:0 auto;
  color:var(--ink);
  font-size:clamp(16px,2vw,19px); line-height:1.55; font-weight:700;
}
.hero-tagline em{ font-style:normal; color:var(--coral); }

.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:bob 1.8s ease-in-out infinite;
}
.scroll-cue .mark{ width:16px; height:16px; transform:rotate(90deg); }
@keyframes bob{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,8px); }
}

/* ==========================================================================
   Reveal-on-scroll — a little pop, not just a fade
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(24px) scale(.94);
  transition:opacity .55s var(--spring), transform .55s var(--spring);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   The Rules
   ========================================================================== */
.rules{ padding:120px var(--edge); }
.rules-head{ max-width:760px; margin:0 auto 70px; text-align:center; }
.eyebrow{
  display:inline-block;
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  background:var(--yellow);
  border:2.5px solid var(--ink); border-radius:999px;
  padding:5px 14px;
  margin:0 0 20px;
}
.eyebrow--light{ background:var(--paper); }
.rules-head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem, 4.2vw, 2.9rem);
  line-height:1.15; letter-spacing:-.01em; margin:0 0 22px;
}
.lede{ color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:60ch; margin:0 auto; font-weight:700; }

.rules-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  max-width:1180px; margin:0 auto;
}
.rule-card{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:26px;
  box-shadow:7px 7px 0 var(--ink);
  padding:36px 30px;
  position:relative;
  transition:transform .2s var(--spring), box-shadow .2s var(--spring);
}
.rule-card:hover{ transform:translate(-3px,-5px) rotate(-1deg); box-shadow:10px 12px 0 var(--ink); }
.rule-card--a{ background:var(--paper); }
.rule-card--b{ background:var(--paper-2); }
.rule-card--c{ background:var(--paper); }

.rule-card .badge{ margin-bottom:22px; }
.mark--stroke1{ clip-path:inset(0 66% 0 0); }
.mark--stroke2{ clip-path:inset(0 33% 0 33%); }
.mark--stroke3{ clip-path:inset(0 0 0 66%); }

.rule-num{
  position:absolute; top:32px; right:28px;
  font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink-soft);
}
.rule-card h3{
  font-family:var(--font-display); font-weight:600; font-size:23px; margin:0 0 12px;
}
.rule-card p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; font-weight:700; }

/* ==========================================================================
   Approach / the bit
   ========================================================================== */
.approach{
  padding:130px var(--edge);
  background:var(--indigo);
  color:#F3F0FF;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.approach-inner{ max-width:820px; margin:0 auto; text-align:center; }

.speech-bubble{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow:8px 8px 0 var(--ink);
  padding:38px 40px;
  margin:0 auto 56px;
  text-align:left;
}
.speech-bubble p{
  margin:0; font-size:clamp(1.15rem, 2.6vw, 1.6rem); line-height:1.5;
  font-family:var(--font-display); font-weight:500; letter-spacing:-.005em;
}
.speech-bubble-tail{
  position:absolute; left:64px; bottom:-22px;
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:22px solid var(--ink);
}
.speech-bubble-tail::before{
  content:''; position:absolute; left:-13px; top:-25px;
  width:0; height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-top:19px solid var(--paper);
}

.approach-quiet{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; line-height:1.75; color:#D6D2F5;
  max-width:60ch; margin:0 auto;
}

/* ==========================================================================
   Interactive field
   ========================================================================== */
.field-section{ padding:120px var(--edge) 0; text-align:center; }
.field-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem, 3.8vw, 2.6rem);
  letter-spacing:-.01em; margin:0 0 14px;
}
.field-sub{
  max-width:52ch; margin:0 auto; color:var(--ink-soft);
  font-size:15px; line-height:1.6; font-weight:700;
}

/* ---- game controls ---- */
.game-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px; margin:30px 0 0;
}
.btn-start{
  font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:.01em;
  color:var(--ink); background:var(--yellow);
  border:3px solid var(--ink); border-radius:999px;
  padding:12px 26px; cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s var(--spring), box-shadow .15s var(--spring), background .15s ease;
}
.btn-start:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn-start:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-start:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:5px 5px 0 var(--ink); background:var(--paper-2); }

.game-stat{
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:999px;
  padding:8px 18px;
  box-shadow:3px 3px 0 var(--ink);
}
.game-stat-label{
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
.game-stat-value{ font-family:var(--font-display); font-size:16px; font-weight:600; }

/* ---- the board ---- */
.field-canvas-wrap{ position:relative; margin-top:28px; }
.field-canvas{
  position:relative;
  height:min(64vw, 460px);
  background:var(--sky);
  border:3px solid var(--ink);
  border-radius:28px;
  overflow:hidden;
}
.field-canvas.is-active .node{ cursor:pointer; }
.field-canvas .node{
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px;
  color:var(--ink);
  transition:color .2s ease, opacity .2s ease;
  will-change:transform;
}
.field-canvas .node.is-near{ color:var(--coral); }
.field-canvas .node--critter{ width:32px; height:32px; margin:-16px 0 0 -16px; }
.field-canvas .node--revealed{ opacity:.4; }
.field-canvas .node--puppy-found{ opacity:1 !important; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:2; }

.field-overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  background:rgba(111,198,218,.88);
  border-radius:26px;
  font-family:var(--font-display); font-weight:600; font-size:16px;
  transition:opacity .3s ease;
}
.field-overlay p{ margin:0; max-width:32ch; }
.field-overlay[hidden]{ display:none; }

@keyframes puppy-found{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(2.1) rotate(-14deg); }
  60%{ transform:scale(1.6) rotate(10deg); }
  100%{ transform:scale(1.9) rotate(0deg); }
}
.field-canvas .node--puppy-found{ animation:puppy-found .7s var(--spring) forwards; }

.game-result{
  max-width:520px; margin:28px auto 0;
  background:var(--yellow);
  border:3px solid var(--ink); border-radius:24px;
  box-shadow:7px 7px 0 var(--ink);
  padding:22px 28px;
}
.game-result-title{
  margin:0 0 6px; font-family:var(--font-display); font-weight:600; font-size:20px;
}
.game-result-score{ margin:0 0 4px; font-size:15px; font-weight:700; }
.game-result-note{ margin:0; font-size:12px; font-weight:700; color:var(--ink-soft); }

@keyframes poke-pop{
  0%{ transform:scale(1) rotate(0deg); }
  25%{ transform:scale(.55) rotate(-12deg); }
  55%{ transform:scale(1.7) rotate(30deg); }
  78%{ transform:scale(.85) rotate(-8deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.field-canvas .node.poked{
  color:var(--coral);
  animation:poke-pop .55s var(--spring);
}

.burst-particle{
  position:absolute; width:9px; height:9px; border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:burst-fly .5s ease-out forwards;
}
@keyframes burst-fly{
  0%{ transform:translate(-50%,-50%) translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.25); opacity:0; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding:130px var(--edge) 100px; text-align:center; }
.contact-sub{
  margin:0 0 6px; color:var(--ink-soft); font-size:14px; font-weight:700;
}
.contact-email{
  display:inline-block;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem, 5.6vw, 3.4rem);
  letter-spacing:-.01em;
  margin:14px 0 60px;
  color:var(--ink);
  background:var(--yellow);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:7px 7px 0 var(--ink);
  padding:14px 30px;
  word-break:break-word;
  transition:transform .18s var(--spring), box-shadow .18s var(--spring);
}
.contact-email:hover{ transform:translate(-3px,-4px) rotate(-1deg); box-shadow:10px 11px 0 var(--ink); }
.contact-email:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }

.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:880px; margin:0 auto;
  text-align:left;
}
.contact-grid > div{
  background:var(--paper); border:3px solid var(--ink); border-radius:22px;
  box-shadow:6px 6px 0 var(--ink);
  padding:26px;
}
.contact-label{
  display:inline-block;
  font-family:var(--font-display); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:var(--sky);
  border:2px solid var(--ink); border-radius:999px;
  padding:3px 10px;
  margin-bottom:12px;
}
.contact-grid a{ font-size:16px; font-weight:800; }
.contact-grid a:hover{ color:var(--coral); }
address{ font-style:normal; font-size:15px; line-height:1.6; color:var(--ink-soft); font-weight:700; }
.contact-grid p{ margin:0; font-size:15px; color:var(--ink-soft); font-weight:700; }

/* ==========================================================================
   Links & Resources page
   ========================================================================== */
.resources-hero{
  padding:150px var(--edge) 50px;
  max-width:760px; margin:0 auto;
  text-align:center;
}
.resources-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:-.01em; margin:0 0 18px;
}
.resources-lede{ color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:56ch; margin:0 auto; font-weight:700; }

.resources{
  max-width:960px; margin:0 auto;
  padding:0 var(--edge) 120px;
  display:grid; gap:24px;
}
.resource-group{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow:6px 6px 0 var(--ink);
  padding:30px 34px;
}
.resource-group h2{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:18px;
  color:var(--ink); margin:0 0 16px;
}
.resource-num{
  font-family:var(--font-display); font-size:12px; font-weight:600;
  color:var(--ink); background:var(--yellow);
  border:2px solid var(--ink); border-radius:999px;
  padding:2px 9px;
}
.resource-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.resource-list li{ border-top:2px dashed var(--ink); }
.resource-list li:first-child{ border-top:0; }
.resource-list a{
  display:flex; align-items:center; gap:8px;
  padding:12px 2px;
  font-size:15px; font-weight:700; color:var(--ink);
  transition:color .15s ease;
}
.resource-list a:hover{ color:var(--coral); }
.resource-list a svg{ width:15px; height:15px; flex-shrink:0; color:var(--ink-soft); transition:color .15s ease; }
.resource-list a:hover svg{ color:var(--coral); }
.resource-pending{
  display:block; padding:12px 2px;
  font-size:15px; font-weight:700; color:var(--ink-soft);
}
.resource-pending em{ font-style:normal; font-size:13px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
  padding:28px var(--edge) 36px;
  border-top:3px solid var(--ink);
  color:var(--ink-soft);
}
.foot-text{ flex:1 1 auto; }
.foot-text p{ margin:0 0 4px; font-size:13px; font-weight:700; }
.foot-fine{ font-size:12px; font-weight:600; color:#8a8794; }

.social-links{ display:flex; gap:10px; margin-left:auto; }
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  color:var(--ink); background:var(--paper);
  border:2.5px solid var(--ink); border-radius:50%;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--spring), box-shadow .15s var(--spring), background .15s ease, color .15s ease;
}
.social-links svg{ width:19px; height:19px; }
.social-links a:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--yellow); }
.social-links a:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:820px){
  .rules-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:16px; text-align:center; }
  .site-foot{ flex-direction:column; text-align:center; }
  .social-links{ margin-left:0; justify-content:center; }
  .speech-bubble{ text-align:center; }
  .speech-bubble-tail{ left:50%; margin-left:-16px; }
  .speech-bubble-tail::before{ left:-13px; }
}

@media (max-width:680px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw, 300px);
    background:var(--paper);
    flex-direction:column; justify-content:center; align-items:stretch;
    gap:16px; padding:0 28px;
    transform:translateX(100%);
    transition:transform .3s var(--spring);
    border-left:3px solid var(--ink);
  }
  .site-nav a{ text-align:center; }
  .site-nav.is-open{ transform:translateX(0); }

  .doodle--1, .doodle--2, .doodle--5, .doodle--dog{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  #heroBadge, .scroll-cue{ animation:none; }
}