/* starfish.css — STAR FISH game page theme ("zesty space arcade").
   Matches the real game: black space + terracotta planet key art, baby-blue
   in-game panels, chunky lime/yellow arcade type (logo PNGs supplied; Hemi Head
   webfont embedding isn't licensed, so headings approximate it with skewed
   italic Oswald). Layers on css/base.css. */

:root{
  --space:#050608;
  --panel-blue:#7EC3E8;        /* in-game UI panel blue */
  --panel-blue-deep:#4D9BD6;
  --lime:#A8E22A;              /* logo green */
  --lime-deep:#7CB31B;
  --yellow:#F2E33D;            /* in-game heading yellow */
  --sky:#52A8E8;               /* logo outline blue */
  --ink-blue:#13314A;          /* dark text on blue panels */
  --text:#EAF0F6;
  --text-dim:#9FB2C4;
  --line:rgba(82,168,232,.25);
  --focus:var(--lime);
}

body{background:var(--space);color:var(--text)}

/* starfield, like the game's sky */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 22px 34px,rgba(234,240,246,.6) 50%,transparent 51%),
    radial-gradient(1px 1px at 118px 90px,rgba(234,240,246,.35) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 76px 152px,rgba(234,240,246,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 175px 51px,rgba(234,240,246,.3) 50%,transparent 51%),
    radial-gradient(1px 1px at 144px 188px,rgba(234,240,246,.4) 50%,transparent 51%);
  background-size:210px 210px;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* chunky arcade heading — nods to the logo/in-game type */
.arcade{
  font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.05em;color:var(--lime);
  text-shadow:3px 3px 0 rgba(0,0,0,.85),5px 5px 0 var(--sky);
  transform:skew(-6deg);display:inline-block;
}

/* ---- top bar (overlays hero) ---- */
header{position:absolute;inset:0 0 auto 0;z-index:5;padding:22px 0}
.bar{display:flex;align-items:center;justify-content:space-between}
.studio{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#CFE2F0;text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.studio b{color:var(--lime);font-weight:700}
.studio:hover b{color:var(--yellow)}
nav a{color:#CFE2F0;text-decoration:none;font-size:.85rem;margin-left:22px;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
nav a:hover{color:var(--lime)}
@media(max-width:620px){nav{display:none}}

/* ---- hero: real key art ---- */
.hero{
  position:relative;min-height:92svh;display:flex;align-items:flex-end;
  background:var(--space) url(/assets/starfish/bg-planet.png) center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,.5),rgba(5,6,8,.05) 40%,rgba(5,6,8,.88) 92%);
}
.hero>.wrap{position:relative;z-index:2;padding-bottom:64px;padding-top:140px}
.hero .logo-img{width:min(560px,86%);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.7))}
.lede{font-size:clamp(1.05rem,2.4vw,1.3rem);color:#D9E6F2;max-width:44ch;margin:22px 0 6px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.lede b{color:#fff;font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;padding:13px 22px;transform:skew(-6deg);
  border:0;cursor:pointer;transition:transform .15s ease;
}
.btn>*{transform:skew(6deg)}
.btn:hover{transform:skew(-6deg) translateY(-2px)}
.btn--lime{background:var(--lime);color:#15300A;box-shadow:4px 4px 0 var(--sky)}
.btn--blue{background:var(--panel-blue);color:var(--ink-blue);box-shadow:4px 4px 0 var(--lime-deep)}

/* ---- the loop ribbon ---- */
section.loop{padding:54px 0 10px;position:relative;z-index:1}
.loop-row{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  font-family:var(--font-mono);font-size:clamp(.9rem,2vw,1.15rem);letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);
}
.loop-row .arrow{color:var(--sky)}

/* ---- section heads ---- */
.sec-head{margin-bottom:30px;font-size:clamp(1.5rem,3.4vw,2.2rem)}

/* ---- trailer ---- */
section.trailer{padding:56px 0 26px;position:relative;z-index:1}
.yt{
  position:relative;aspect-ratio:16/9;background:#000;border:3px solid var(--panel-blue);
  box-shadow:8px 8px 0 rgba(82,168,232,.35);overflow:hidden;
}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{
  position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:rgba(5,6,8,.25);border:0;cursor:pointer;
}
.yt-play:hover .yt-chip{transform:skew(-6deg) scale(1.06)}
.yt-chip{
  display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:#15300A;
  font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.05em;padding:14px 26px;transform:skew(-6deg);
  box-shadow:4px 4px 0 var(--sky);transition:transform .15s ease;
}
.yt-chip svg{width:20px;height:20px;fill:#15300A;transform:skew(6deg)}
.yt-note{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:12px}

/* ---- catch-of-the-day feature cards ---- */
section.cards-sec{padding:56px 0 30px;position:relative;z-index:1}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,var(--panel-blue),var(--panel-blue-deep));
  border:3px solid var(--lime);box-shadow:7px 7px 0 rgba(0,0,0,.55);
  display:flex;flex-direction:column;
}
.card .head{
  background:var(--yellow);color:#3A3206;
  font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;padding:9px 14px;
}
.card .media{position:relative;aspect-ratio:16/9;background:#0B1B2A;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;display:block}
.card .media .gif-alt{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel-blue);padding:18px;
}
@media(prefers-reduced-motion:reduce){
  .card .media img.gif{display:none}
  .card .media .gif-alt{display:flex}
}
.card .body{padding:14px 16px 18px;color:var(--ink-blue);font-size:.95rem;line-height:1.5}
.card .body b{color:#0C2438;font-weight:600}

/* ---- wide postcard strip ---- */
.postcard{position:relative;z-index:1;margin:46px 0 0}
.postcard img{width:100%;height:auto;display:block;border-top:3px solid var(--panel-blue);border-bottom:3px solid var(--panel-blue)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:46px 0 60px;position:relative;z-index:1;margin-top:50px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.foot .logo-img{width:200px;height:auto}
.foot p{color:var(--text-dim);font-size:.9rem;max-width:34ch;margin-top:12px}
.foot a{color:var(--text-dim);text-decoration:none;font-size:.9rem;display:block;margin:6px 0}
.foot a:hover{color:var(--lime)}
.foot .col h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.legal{margin-top:36px;font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);letter-spacing:.04em}