/* hatchedgame.com — the itch page's look: gold burst, ink outlines, Bangers. */
@font-face{font-family:'Bangers';src:url(../fonts/Bangers-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Patrick Hand';src:url(../fonts/PatrickHand-Regular.ttf) format('truetype');font-display:swap}

:root{
  --ink:#141311; --paper:#F2EAD8; --gold:#FFCA3A; --gold-lt:#FBDD8E; --gold-dk:#F2B428;
  --red:#FF595E; --purple:#6A4C93; --blue:#1982C4; --green:#8AC926;
  --col:min(760px, calc(100vw - 32px));
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; color:var(--ink); background:var(--gold);
  font:20px/1.45 'Patrick Hand',system-ui,sans-serif; overflow-x:hidden;
}
a{color:inherit}

/* ── the burst: two golds, rays from above the logo, a soft vignette ─────────────── */
.burst{position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--gold)}
.burst::before{
  content:''; position:absolute; left:50%; top:30%; width:300vmax; height:300vmax; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, var(--gold) 0deg 7.5deg, var(--gold-lt) 7.5deg 15deg);
  animation:spin 240s linear infinite;
}
.burst::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 35%, rgba(150,90,0,.28) 100%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .burst::before{animation:none} .cre img{animation:none!important} }

/* ── creatures: absolutely placed around the column, re-rolled every visit ───────── */
.cres{position:fixed; inset:0; z-index:-1; pointer-events:none}
.cre{position:absolute; pointer-events:auto; cursor:pointer; filter:drop-shadow(6px 8px 0 rgba(20,19,17,.18))}
.cre img{display:block; width:100%; height:auto; animation:bob 3.6s ease-in-out infinite; transform-origin:50% 100%}
.cre.flip img{scale:-1 1}
.cre.pop img{animation:pop .35s ease-out}
@keyframes bob{0%,100%{translate:0 0; rotate:-1.5deg} 50%{translate:0 -10px; rotate:1.5deg}}
@keyframes pop{0%{transform:scale(.2)} 70%{transform:scale(1.12)} 100%{transform:scale(1)}}

/* ── the column ────────────────────────────────────────────────────────────────── */
main{width:var(--col); margin:0 auto; padding:28px 0 40px; display:flex; flex-direction:column; align-items:center; gap:22px}
.logo{width:min(520px, 88%); height:auto; display:block; margin:8px auto 0; filter:drop-shadow(5px 6px 0 rgba(20,19,17,.25))}
.tag{font:clamp(26px,4.4vw,40px)/1 'Bangers',sans-serif; letter-spacing:.04em; margin:-8px 0 0; color:var(--paper);
  -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; text-align:center}

.frame{position:relative; width:100%; padding:7px; background:var(--ink); border-radius:6px;
  box-shadow:11px 9px 0 rgba(20,19,17,.9); rotate:-.6deg}
.frame::before{content:''; position:absolute; inset:-5px; z-index:-1; border-radius:9px;
  background:linear-gradient(90deg,var(--purple),var(--blue),var(--green),var(--gold),var(--red))}
.frame video{display:block; width:100%; aspect-ratio:16/9; background:#000; border-radius:2px}
.sound{position:absolute; right:18px; bottom:18px; font:22px/1 'Bangers',sans-serif; letter-spacing:.05em;
  padding:9px 14px 7px; color:var(--ink); background:var(--paper); border:4px solid var(--ink); border-radius:12px;
  box-shadow:4px 4px 0 var(--ink); cursor:pointer}
.sound:hover{background:var(--gold)}
.sound[hidden]{display:none}

.plates{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; margin-top:6px}
.plate{display:block; width:min(560px, 96%); transition:transform .12s ease}
.plate img{display:block; width:100%; height:auto}
.plate:hover{transform:scale(1.04) rotate(-1deg)}
.plate:active{transform:scale(.97)}

footer{width:var(--col); margin:0 auto; padding:10px 0 48px; text-align:center}
.socials{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 18px; padding:0; list-style:none}
.socials a,.chip{display:inline-block; font:22px/1 'Bangers',sans-serif; letter-spacing:.05em; text-decoration:none;
  padding:9px 14px 7px; background:var(--paper); border:4px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink)}
.socials a:hover,.chip:hover{background:var(--ink); color:var(--paper)}
.chip.big{font-size:28px; padding:12px 20px 9px; background:var(--red)}
.links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:16px}
.fine{font-size:17px; opacity:.8}

/* ── phones: the column is the page; creatures peek from the top corners ─────────── */
@media (max-width:760px){
  main{padding-top:18px; gap:16px}
  .frame{rotate:0deg; box-shadow:7px 6px 0 rgba(20,19,17,.9)}
  .frame.tall{width:min(100%, calc(58svh * 9 / 16 + 14px))}
  .frame.tall video{aspect-ratio:9/16}
  .plate{width:100%}
  .sound{font-size:19px; right:14px; bottom:14px}
}

/* ── press kit: same page, a paper sheet to read on ────────────────────────────── */
.sheet{width:min(980px, calc(100vw - 32px)); margin:24px auto 48px; padding:clamp(18px,4vw,44px); background:var(--paper);
  border:6px solid var(--ink); border-radius:14px; box-shadow:12px 10px 0 rgba(20,19,17,.9)}
.sheet h1,.sheet h2{font-family:'Bangers',sans-serif; letter-spacing:.04em; line-height:1; margin:0}
.sheet h1{font-size:clamp(40px,7vw,64px)}
.sheet h2{font-size:34px; margin:38px 0 14px; padding-bottom:6px; border-bottom:4px solid var(--ink)}
.sheet h3{font:26px/1.1 'Bangers',sans-serif; letter-spacing:.04em; margin:22px 0 4px}
.sheet p{margin:.4em 0 .8em}
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.top img{width:min(300px,60vw); height:auto}
.facts{display:grid; grid-template-columns:max-content 1fr; gap:6px 22px; margin:0}
.facts dt{font:22px/1.3 'Bangers',sans-serif; letter-spacing:.04em}
.facts dd{margin:0}
@media (max-width:560px){ .facts{grid-template-columns:1fr} .facts dd{margin-bottom:8px} }
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.grid a{display:block; border:4px solid var(--ink); border-radius:8px; overflow:hidden; background:#fff; box-shadow:5px 5px 0 var(--ink)}
.grid a:hover{transform:rotate(-1deg) scale(1.02)}
.grid img{display:block; width:100%; height:auto}
.grid.logos a{background:repeating-conic-gradient(#e7dcc4 0 25%, #f6efe0 0 50%) 0 0/24px 24px; padding:14px}
.cap{font-size:16px; padding:6px 10px; border-top:3px solid var(--ink); background:var(--paper)}
.sheet video{width:100%; border:5px solid var(--ink); border-radius:8px; background:#000}
.draft{background:var(--red); color:#fff; border:4px solid var(--ink); border-radius:10px; padding:10px 14px; font-size:18px}
ul.feat{padding-left:22px}