/* SnapHunt Web Style System — v1.1 */
:root {
  --sh-yellow:#FDE505; --sh-yellow-bright:#FEF20E;
  --sh-purple:#22042C; --sh-purple-deep:#17021F; --sh-navy:#061221;
  --sh-white:#FFF; --sh-text:#F7F5F8; --sh-text-muted:#AAA4B1;
  --sh-surface:rgba(255,255,255,.055); --sh-surface-strong:rgba(255,255,255,.085);
  --sh-border:rgba(255,255,255,.14); --sh-green:#64F58D; --sh-danger:#FF6B78;
  --sh-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --sh-weight-body:500; --sh-weight-strong:750; --sh-weight-display:900;
  --sh-radius-sm:14px; --sh-radius-md:22px; --sh-radius-lg:30px;
  --sh-shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box} html{color-scheme:dark;background:var(--sh-navy);scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:var(--sh-font);font-weight:var(--sh-weight-body);color:var(--sh-text);background:var(--sh-navy);-webkit-font-smoothing:antialiased} a{color:inherit}
.sh-section{position:relative;padding:88px 0}.sh-wrap{width:min(100% - 40px,760px);margin:0 auto}.sh-wrap-wide{width:min(100% - 40px,1120px)}
.sh-brand{text-align:center}.sh-brand-icon{display:block;width:112px;height:112px;margin:0 auto 14px;border-radius:24px;object-fit:cover;box-shadow:0 0 34px rgba(253,229,5,.14),var(--sh-shadow)}
.sh-studio,.sh-label{color:var(--sh-text-muted);font-size:12px;font-weight:var(--sh-weight-strong);letter-spacing:.18em;text-transform:uppercase}.sh-accent{color:var(--sh-yellow)}
.sh-wordmark{margin:24px 0 0;font-size:clamp(68px,14vw,124px);line-height:.84;letter-spacing:-.07em;font-weight:var(--sh-weight-display)}.sh-wordmark-accent{color:var(--sh-yellow)}
.sh-status{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid rgba(100,245,141,.22);border-radius:999px;background:rgba(100,245,141,.09);color:#C9FBD6;font-size:13px}.sh-status:before{width:8px;height:8px;border-radius:50%;background:var(--sh-green);box-shadow:0 0 12px rgba(100,245,141,.75);content:""}
.home-hero{min-height:92svh;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 24%,rgba(88,34,145,.45),transparent 34rem),radial-gradient(circle at 78% 75%,rgba(253,229,5,.06),transparent 24rem),linear-gradient(180deg,var(--sh-purple-deep),var(--sh-navy))}.home-hero:after{content:"";position:absolute;inset:auto -15% -150px;height:280px;background:radial-gradient(ellipse,rgba(253,229,5,.055),transparent 65%);pointer-events:none}.hero-wrap{position:relative;z-index:1}.hero-kicker{margin:34px 0 0;color:#fff;font-size:clamp(21px,4vw,30px);font-weight:850;letter-spacing:-.025em}.hero-copy{max-width:650px;margin:18px auto 0;color:var(--sh-text-muted);font-size:18px;line-height:1.65}.hero-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:34px auto;color:#dcd7e2;font-size:12px;font-weight:800;letter-spacing:.08em}.hero-flow span{padding:9px 14px;border:1px solid var(--sh-border);border-radius:999px;background:var(--sh-surface)}.hero-flow i{color:var(--sh-yellow);font-style:normal}.hero-wrap .sh-status{margin-top:14px}
.world-section{background:linear-gradient(180deg,#061221,#0c1020 55%,#100a1c)}.section-heading{text-align:center;max-width:760px;margin:0 auto 42px}.section-heading h2,.final-wrap h2{margin:12px 0 0;color:#fff;font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-.045em}.section-heading>p:last-child{max-width:650px;margin:18px auto 0;color:var(--sh-text-muted);font-size:17px;line-height:1.6}.compact-heading{margin-bottom:34px}
.hunt-showcase{max-width:980px;margin:0 auto;padding:20px;border:1px solid var(--sh-border);border-radius:32px;background:rgba(255,255,255,.045);box-shadow:0 30px 90px rgba(0,0,0,.3)}.hunt-prompt{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px 20px;color:#fff;font-size:clamp(17px,3vw,23px);font-weight:900;letter-spacing:.025em}.hunt-star{color:var(--sh-yellow)}.versus-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}.snap-card{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:23px;background:#0a0b10}.snap-image{aspect-ratio:4/3;overflow:hidden}.snap-image img{width:100%;height:100%;display:block;object-fit:cover}.snap-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px}.snap-card figcaption strong{font-size:12px;letter-spacing:.12em}.snap-card figcaption span{color:var(--sh-text-muted);font-size:12px}.versus-badge{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border:4px solid #0d0d14;border-radius:50%;background:var(--sh-yellow);color:#130b15;font-size:16px;font-weight:950;box-shadow:0 10px 35px rgba(0,0,0,.45)}.judge-strip{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(90deg,rgba(253,229,5,.09),rgba(128,67,202,.12));text-align:left}.target-mini{color:var(--sh-yellow);font-size:32px}.judge-strip div{display:flex;flex-direction:column;gap:3px}.judge-strip small{color:var(--sh-yellow);font-size:10px;font-weight:900;letter-spacing:.16em}.judge-strip strong{font-size:14px}
.examples-section{background:#100a1c}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.example-card{overflow:hidden;border:1px solid var(--sh-border);border-radius:26px;background:var(--sh-surface)}.example-prompt{padding:17px 18px;color:var(--sh-yellow);font-size:13px;font-weight:900;letter-spacing:.08em}.example-images{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#19131f}.example-images img{display:block;width:100%;height:260px;object-fit:cover}.example-card p{margin:0;padding:18px;color:var(--sh-text-muted);font-size:14px;line-height:1.5}
.how-section{background:linear-gradient(180deg,#100a1c,#061221)}.how-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.how-step{min-height:220px;padding:20px 17px;border:1px solid var(--sh-border);border-radius:22px;background:var(--sh-surface);display:flex;flex-direction:column}.how-step b{color:var(--sh-yellow);font-size:13px}.how-step strong{margin-top:auto;font-size:14px;letter-spacing:.04em}.how-step span{margin-top:9px;color:var(--sh-text-muted);font-size:13px;line-height:1.45}
.final-section{text-align:center;background:radial-gradient(circle at 50% 55%,rgba(86,31,140,.35),transparent 28rem),#061221}.final-wrap{max-width:720px}.final-icon{width:82px;height:82px;border-radius:20px;box-shadow:0 0 30px rgba(253,229,5,.13);margin-bottom:24px}.final-wrap p:last-child{color:var(--sh-text-muted);font-size:16px}.sh-footer{padding:0 20px 34px;background:#061221;color:#77717e;font-size:12px;text-align:center}
/* Shared buttons/cards used by join.php */
.sh-card{border:1px solid var(--sh-border);border-radius:28px;background:var(--sh-surface);box-shadow:var(--sh-shadow)}.sh-title{margin:0;color:#fff;font-size:clamp(30px,8vw,44px);line-height:1;letter-spacing:-.035em}.sh-copy{color:var(--sh-text-muted);font-size:16px;line-height:1.55}.sh-btn{appearance:none;display:flex;width:100%;min-height:56px;align-items:center;justify-content:center;padding:14px 18px;border:0;border-radius:17px;font:inherit;font-size:16px;font-weight:850;text-decoration:none;cursor:pointer}.sh-btn-primary{background:var(--sh-yellow);color:#171000}.sh-btn-secondary{border:1px solid var(--sh-border);background:var(--sh-surface);color:#fff}
.join-shell{width:min(100% - 36px,470px);min-height:100svh;margin:0 auto;padding:max(30px,env(safe-area-inset-top)) 0 max(30px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}.join-brand{margin-bottom:24px}.join-brand .sh-brand-icon{width:82px;height:82px;border-radius:19px}.join-brand-name{margin-top:12px;text-align:center;font-size:17px;font-weight:850;letter-spacing:.14em}.join-card{padding:30px 22px 24px;text-align:center}.join-eyebrow{margin:0 0 9px}.join-intro{margin:15px auto 24px}.join-code-label{margin-top:4px}.join-code{margin:8px 0 20px;color:var(--sh-yellow);font-size:clamp(42px,12vw,64px);font-weight:950;letter-spacing:.12em;line-height:1}.join-actions{display:grid;gap:11px}.join-helper{max-width:340px;margin:21px auto 0;color:var(--sh-text-muted);font-size:14px;line-height:1.45}.join-toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,15px);padding:10px 15px;border-radius:999px;background:#fff;color:#17111f;font-size:14px;font-weight:800;opacity:0;pointer-events:none;transition:.18s ease}.join-toast.is-visible{opacity:1;transform:translate(-50%,0)}
body:has(.join-shell){background:radial-gradient(circle at 50% 0%,rgba(111,65,220,.3),transparent 36rem),linear-gradient(180deg,var(--sh-purple-deep),#0d0918 78%)}
@media(max-width:800px){.sh-section{padding:68px 0}.example-grid{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr 1fr}.how-step{min-height:170px}.example-images img{height:220px}}
@media(max-width:600px){.home-hero{min-height:auto;padding:54px 0 72px}.sh-brand-icon{width:92px;height:92px;border-radius:21px}.sh-wordmark{font-size:clamp(64px,23vw,94px)}.hero-copy{font-size:16px}.versus-grid{gap:8px}.hunt-showcase{padding:10px;border-radius:24px}.snap-card{border-radius:17px}.snap-image{aspect-ratio:3/4}.snap-card figcaption{padding:11px 10px;display:block}.snap-card figcaption span{display:block;margin-top:3px}.versus-badge{width:44px;height:44px;border-width:3px}.judge-strip{margin-top:10px}.example-images img{height:180px}.how-grid{grid-template-columns:1fr}.how-step{min-height:140px}.how-step strong{margin-top:32px}}

/* =========================================================
   SnapHunt navigation
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body.menu-open {
  overflow: hidden;
}

.site-nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 42px);
  pointer-events: none;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sh-white);
  font-size: 12px;
  font-weight: var(--sh-weight-display);
  letter-spacing: .12em;
  text-decoration: none;
  opacity: 0;
  pointer-events: auto;
  transition: opacity .2s ease;
}

.site-nav-brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.menu-toggle {
  position: relative;
  z-index: 1100;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 1px solid var(--sh-border);
  border-radius: 16px;

  background: rgba(15, 7, 25, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  cursor: pointer;
  pointer-events: auto;
}

.menu-toggle span {
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: var(--sh-yellow);
  transition:
    transform .25s ease,
    opacity .2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* Dark overlay */

.menu-backdrop {
  position: fixed;
  z-index: 1040;
  inset: 0;

  background: rgba(2, 5, 14, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}


/* Slide-out panel */

.site-menu {
  position: fixed;
  z-index: 1050;
  top: 0;
  right: 0;

  width: min(430px, 90vw);
  height: 100svh;

  padding:
    max(110px, env(safe-area-inset-top))
    38px
    max(36px, env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(95, 34, 150, .30),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      var(--sh-purple-deep),
      var(--sh-navy)
    );

  border-left: 1px solid var(--sh-border);

  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.8,.32,1);
}

.site-menu.is-open {
  transform: translateX(0);
}

.site-menu-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.site-menu-label {
  margin-bottom: 28px;

  color: var(--sh-yellow);

  font-size: 11px;
  font-weight: var(--sh-weight-display);
  letter-spacing: .18em;
}

.site-menu a {
  display: block;
  padding: 14px 0;

  border-bottom: 1px solid rgba(255,255,255,.08);

  color: var(--sh-white);

  font-size: clamp(22px, 5vw, 30px);
  font-weight: var(--sh-weight-display);
  letter-spacing: -.025em;
  line-height: 1.15;

  text-decoration: none;

  transition:
    color .15s ease,
    transform .15s ease;
}

.site-menu a:hover {
  color: var(--sh-yellow);
  transform: translateX(4px);
}

.site-menu-footer {
  margin-top: auto;
  padding-top: 32px;

  color: var(--sh-text-muted);

  font-size: 11px;
  font-weight: var(--sh-weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* Mobile */

@media (max-width: 600px) {

  .site-nav {
    padding: 15px 16px;
  }

  .menu-toggle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .site-menu {
    width: 100%;
    padding-left: 26px;
    padding-right: 26px;
  }

}