/* =============================================================================
   HULA HUNT - STYLES
   You normally won't need to touch this file. Content lives in js/games.js.
   ============================================================================= */

:root{
  --ink:        #1c0e2b;   /* the dark brand colour you requested */
  --ink-2:      #150a20;
  --ink-3:      #0e0616;
  --paper:      #f6eefe;
  --muted:      #b9a7d0;
  --line:       rgba(255,255,255,.09);

  --accent:     #ff8a1e;   /* overwritten per-game by JavaScript */
  --accent-2:   #ffcf4d;

  --maxw:       1120px;
  --radius:     22px;
  --dissolve:   820ms;

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--paper);
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(255,138,30,.10), transparent 60%),
    radial-gradient(1000px 800px at -10% 110%, rgba(177,77,255,.12), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink-3) 100%);
  background-attachment:fixed;
  overflow:hidden;                 /* each game is its own scrolling screen */
  -webkit-font-smoothing:antialiased;
  transition:background .8s ease;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- FIXED HEADER (overlays the capsule) ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:16px clamp(14px,4vw,40px);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(14,6,22,.82) 0%, rgba(14,6,22,0) 100%);
}
.site-header a{ pointer-events:auto; }
.brand{ justify-self:start; }
.header-link{ justify-self:end; }
.brand img{ height:clamp(38px,6vw,54px); width:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.header-link{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:.02em; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px); transition:.2s;
}
.header-link:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }

/* ---------- STAGE + GAME PANELS (the dissolve happens here) ---------- */
.stage{ position:fixed; inset:0; z-index:1; }

.game{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  will-change:opacity, transform, filter;
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.game::-webkit-scrollbar{ width:10px; }
.game::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:20px;
  border:3px solid transparent; background-clip:content-box; }
.game.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.game.is-entering{ animation:gameIn var(--dissolve) cubic-bezier(.22,.61,.36,1) both; }
.game.is-leaving{
  visibility:visible; opacity:1;
  animation:gameOut var(--dissolve) cubic-bezier(.4,0,.7,.2) both;
}
@keyframes gameIn{
  0%{ opacity:0; transform:scale(.985) translateY(14px); filter:blur(16px) saturate(.6); }
  100%{ opacity:1; transform:none; filter:blur(0) saturate(1); }
}
@keyframes gameOut{
  0%{ opacity:1; transform:none; filter:blur(0); }
  100%{ opacity:0; transform:scale(1.05); filter:blur(18px) brightness(1.35); }
}

/* Accent veil that flashes during a dissolve */
.veil{
  position:fixed; inset:0; z-index:35; pointer-events:none; opacity:0;
  background:radial-gradient(120% 120% at 50% 40%, var(--accent) 0%, transparent 60%);
  mix-blend-mode:screen;
}
.veil.is-firing{ animation:veilFlash var(--dissolve) ease-out both; }
@keyframes veilFlash{
  0%{ opacity:0; } 35%{ opacity:.35; } 100%{ opacity:0; }
}

/* ---------- CONTENT LAYOUT ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.panel-inner{ padding-top:clamp(40px,6vh,72px); padding-bottom:40px; }

/* Full-screen capsule hero: the image scales to fill the whole screen and
   reaches every edge. On any screen size it stays covered and centred. */
.capsule-hero{
  position:relative; width:100%; height:100svh; min-height:520px; overflow:hidden;
  background:var(--ink-3);
}
.capsule-hero img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.capsule-hero::before{ /* top shade so the header + nav stay legible */
  content:""; position:absolute; inset:0 0 auto 0; height:220px; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,6,22,.6), transparent);
}
.capsule-hero::after{ /* bottom shade so it melts into the content below */
  content:""; position:absolute; inset:auto 0 0 0; height:200px; pointer-events:none;
  background:linear-gradient(0deg, var(--ink-2), transparent);
}
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2;
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 2px 8px rgba(0,0,0,.7); pointer-events:none;
  animation:cueBob 1.8s ease-in-out infinite;
}
.scroll-cue svg{ width:22px; height:22px; }
@keyframes cueBob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} }

/* Section rhythm */
.section{ margin-top:clamp(26px,4vw,44px); }
.section-eyebrow{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; color:var(--accent);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.section-eyebrow::after{ content:""; height:1px; flex:1; background:var(--line); }

/* ---------- SCREENSHOTS (3rd peeks → scroll for more) ---------- */
.shots-frame{ position:relative; }
.shots{
  display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.shots::-webkit-scrollbar{ height:8px; }
.shots::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:20px; }
.shot{
  flex:0 0 calc((100% - 32px) / 2.5); aspect-ratio:16/9; scroll-snap-align:start;
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  cursor:zoom-in; background:var(--ink-3);
  box-shadow:0 16px 30px -20px rgba(0,0,0,.9);
  transition:transform .25s ease, box-shadow .25s ease;
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -20px var(--accent); }
/* right-edge fade hinting more content */
.shots-frame::after{
  content:""; position:absolute; top:0; right:0; bottom:8px; width:70px;
  pointer-events:none; border-radius:0 14px 14px 0;
  background:linear-gradient(90deg, transparent, var(--ink-2));
}
.scroll-hint{
  position:absolute; right:14px; bottom:50%; transform:translateY(50%);
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  color:var(--paper); display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; background:rgba(14,6,22,.7);
  border:1px solid var(--line); pointer-events:none;
  animation:nudge 1.6s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translate(0,50%);} 50%{ transform:translate(6px,50%);} }

/* ---------- TEXT PANEL with animated particle background ---------- */
.about{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); margin-top:clamp(26px,4vw,44px);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
}
.about canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.about-content{ position:relative; z-index:1; padding:clamp(26px,5vw,54px); }

.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
  color:var(--ink); background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 20px -6px var(--accent);
}
.status .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink);
  opacity:.6; }

.game-title{ margin:0 0 6px;
  font-family:var(--font-display); font-weight:700; line-height:.95;
  font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:-.01em; }
.game-title-logo{ max-height:clamp(66px,12vw,118px); width:auto; margin:0 0 8px;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }

.game-desc{ max-width:60ch; font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.7; color:#e9def7; }

/* CTA buttons */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  padding:14px 24px; border-radius:14px; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{ width:20px; height:20px; }
.btn-steam{
  color:var(--ink); background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 34px -12px var(--accent);
}
.btn-steam:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px var(--accent); }
.btn-ghost{ color:var(--paper); border-color:var(--line); background:rgba(255,255,255,.05); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------- FOOTER (social) ---------- */
.site-footer{
  margin-top:clamp(34px,6vw,60px); padding:30px 0 130px;
  border-top:1px solid var(--line); text-align:center;
}
.socials{ display:flex; justify-content:center; gap:14px; margin-bottom:16px; }
.social{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.social svg{ width:24px; height:24px; fill:var(--paper); transition:fill .2s; }
.social:hover{ transform:translateY(-3px); background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 26px -10px var(--accent); }
.social:hover svg{ fill:var(--ink); }
.footer-note{ color:var(--muted); font-size:.86rem; }
.footer-note a{ color:var(--paper); border-bottom:1px solid var(--line); }

/* ---------- GAME NAVIGATOR (top centre, inside the header) ---------- */
.game-nav{
  justify-self:center; pointer-events:auto;
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(14,6,22,.6); backdrop-filter:blur(12px);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.9);
}
.nav-btn{
  position:relative; width:48px; height:48px; border-radius:50%; cursor:pointer;
  border:none; background:transparent; padding:0; display:grid; place-items:center;
}
/* icon fills the whole circle (square art cropped to a circle, no empty sides) */
.nav-btn img{
  width:38px; height:38px; border-radius:50%; object-fit:cover; display:block;
  opacity:.5; filter:grayscale(.3); transition:opacity .2s, transform .2s, filter .2s;
}
.nav-btn:hover img{ opacity:.85; filter:none; transform:scale(1.05); }
.nav-btn.is-active img{ opacity:1; filter:none;
  box-shadow:0 0 0 2px var(--ink-2), 0 0 0 4px var(--accent); }
/* countdown progress ring around the active game */
.nav-btn .ring{ position:absolute; inset:1px; border-radius:50%; }
.nav-btn.is-active .ring{
  background:conic-gradient(var(--accent) var(--p,0%), rgba(255,255,255,.16) 0%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
          mask:radial-gradient(circle, transparent 62%, #000 63%);
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:60; display:none; place-items:center;
  background:rgba(6,3,10,.92); padding:4vw; cursor:zoom-out;
}
.lightbox.is-open{ display:grid; animation:fadeIn .25s ease; }
.lightbox img{ max-width:100%; max-height:92vh; border-radius:12px;
  box-shadow:0 30px 80px -20px #000; }
.lightbox-close{ position:absolute; top:20px; right:24px; font-size:2rem;
  color:var(--paper); background:none; border:none; cursor:pointer; line-height:1; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ---------- CONTACT PAGE ---------- */
.contact-main{ position:fixed; inset:0; overflow-y:auto; }
.contact-card{
  max-width:640px; margin:clamp(110px,16vh,160px) auto 60px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,5vw,52px); box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.contact-card h1{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,5vw,3rem); margin:0 0 10px; }
.contact-card p{ color:#e9def7; line-height:1.7; }
.email-big{
  display:inline-flex; align-items:center; gap:12px; margin:20px 0;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,3vw,1.5rem);
  padding:16px 22px; border-radius:14px;
  background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--ink);
  box-shadow:0 14px 34px -12px var(--accent);
}
.field{ display:block; margin:14px 0; }
.field span{ display:block; margin-bottom:6px; font-weight:700; font-size:.9rem; }
.field input, .field textarea{
  width:100%; padding:13px 15px; border-radius:12px; color:var(--paper);
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  font-family:var(--font-body); font-size:1rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent); border-color:transparent; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .shot{ flex:0 0 62%; }                 /* 1 full + a clear peek of the next */
  .game-desc{ font-size:1.02rem; }
  .header-link{ padding:8px 12px; font-size:.85rem; }
  .nav-btn{ width:42px; height:42px; }
  .nav-btn img{ width:34px; height:34px; }
  .game-nav{ gap:6px; padding:6px 7px; }
}
@media (max-width:480px){
  .shot{ flex:0 0 72%; }
  .brand img{ height:34px; }
  .nav-btn{ width:38px; height:38px; }
  .nav-btn img{ width:31px; height:31px; }
}

/* ---------- ACCESSIBILITY: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .game.is-entering,.game.is-leaving{ animation:none; }
  .game{ transition:opacity .3s ease; }
  .veil,.scroll-hint{ display:none; }
}
.btn:focus-visible,.social:focus-visible,.nav-btn:focus-visible,
.header-link:focus-visible,.shot:focus-visible{
  outline:3px solid var(--accent-2); outline-offset:3px;
}