/* Global Life Sim — landing page.
   Palette and mono type are lifted straight from the in-game HUD so the site and the
   game read as one product. The signature device is the survey plate: corner ticks
   around the hero, nothing else. It is the one flourish; the rest stays quiet. */

:root{
  --ink:#05070a;          /* page ground, same as the game canvas */
  --slate:#101a26;        /* raised surfaces */
  --line:rgba(232,238,245,.13);
  --haze:#8a97a6;         /* secondary text, same as the HUD credits */
  --paper:#e8eef5;        /* primary text, same as the HUD */
  --signal:#7fd1ff;       /* the HUD accent */
  --amber:#ffc400;        /* the petrol marker colour */
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Archivo",system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);
     font:16px/1.75 var(--mono);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0}
p{margin:0 0 18px}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

.btn{display:inline-block;padding:15px 34px;border-radius:8px;background:var(--signal);
     color:var(--ink);text-decoration:none;font:600 15px var(--mono);
     transition:background .18s ease,transform .18s ease}
.btn:hover{background:#a5deff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn-sm{padding:9px 20px;font-size:13px}

/* --- top bar ---------------------------------------------------------------- */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;
     justify-content:space-between;gap:16px;padding:14px var(--pad);
     background:linear-gradient(180deg,rgba(5,7,10,.85),transparent);
     backdrop-filter:blur(3px)}
.mark{font:700 15px var(--display);letter-spacing:-.01em}

/* --- hero ------------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;
            background:linear-gradient(180deg,rgba(5,7,10,.55) 0%,rgba(5,7,10,.35) 45%,var(--ink) 100%)}

/* the survey plate: corner ticks, nothing else. This is the page's one signature. */
.plate{position:relative;padding:clamp(28px,5vw,54px);margin:0 var(--pad);
       max-width:760px;text-align:center}
.tick{position:absolute;width:22px;height:22px;border:1px solid var(--signal);opacity:.85}
.tl{top:0;left:0;border-right:0;border-bottom:0}
.tr{top:0;right:0;border-left:0;border-bottom:0}
.bl{bottom:0;left:0;border-right:0;border-top:0}
.br{bottom:0;right:0;border-left:0;border-top:0}

.hero h1{font-size:clamp(38px,7vw,78px);line-height:1.02;margin:0 0 22px}
.lede{font-size:clamp(15px,1.6vw,18px);color:var(--paper);max-width:52ch;margin:0 auto 30px}
.fine{margin:16px 0 0;font-size:12px;color:var(--haze)}

/* --- bands ------------------------------------------------------------------ */
.band{padding:clamp(72px,11vw,140px) 0;border-top:1px solid var(--line)}
.band.alt{background:var(--slate)}
.band h2{font-size:clamp(26px,3.6vw,44px);line-height:1.12;margin:0 0 22px}
.place h3,.beats h3{margin-top:0}
.band p{color:var(--haze);max-width:60ch}

.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center;
       grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.shot img{width:100%;border-radius:10px;border:1px solid var(--line)}
.shot figcaption{margin-top:12px;font-size:12px;color:var(--haze)}

/* --- locations -------------------------------------------------------------- */
.places{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:20px;
        grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.place{background:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.band.alt .place{background:rgba(5,7,10,.55)}
.place img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* only the playable one keeps its colour — the filter IS the status, not a badge */
.place.live img{filter:none}
.place-body{padding:22px}
.place h3{font-size:21px;margin:0 0 8px}
.place p{font-size:14px;margin:0 0 18px}
.soon{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--haze);border:1px solid var(--line);border-radius:6px;padding:8px 14px}

/* --- how it plays ------------------------------------------------------------ */
.beats{display:grid;gap:clamp(24px,3vw,40px);margin-top:44px;
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.beats img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
           border:1px solid var(--line);margin-bottom:18px}
.beats h3{font-size:19px;margin:0 0 10px}
.beats p{font-size:14px}

/* --- close + footer ---------------------------------------------------------- */
.close{padding:clamp(80px,12vw,150px) 0;text-align:center;border-top:1px solid var(--line)}
.close h2{font-size:clamp(24px,3.4vw,40px);margin:0 0 30px}
.foot{padding:34px 0;border-top:1px solid var(--line);font-size:12px;color:var(--haze)}
.foot p{margin:0 0 6px}
.credits{color:#5d6874}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media{display:none}          /* poster shows through instead */
  *{transition:none!important}
}

/* --- sign in / create account / upgrade --------------------------------------- */
body.gate{min-height:100svh;display:grid;place-items:center;
          background:radial-gradient(120% 90% at 50% 0%,#101a26 0%,#05070a 70%)}
.gate-card{width:min(420px,90vw);padding:0 24px;text-align:center}
.gate-card h1{font-size:clamp(26px,4.5vw,38px);margin:0 0 14px}
.gate-note{color:var(--haze);font-size:14px;margin:0 0 30px}
.gate-err{background:rgba(255,95,86,.12);border:1px solid rgba(255,95,86,.4);
          border-radius:8px;padding:12px 14px;color:#ff9d97;font-size:14px;margin:0 0 22px}
.gate-form{display:grid;gap:16px;text-align:left;margin:0 0 22px}
.gate-form label{display:grid;gap:7px;font-size:12px;letter-spacing:.12em;
                 text-transform:uppercase;color:var(--haze)}
.gate-form input{padding:13px 14px;border-radius:8px;border:1px solid var(--line);
                 background:rgba(5,7,10,.6);color:var(--paper);
                 font:15px var(--mono);letter-spacing:normal;text-transform:none}
.gate-form input:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
.gate-form .btn{width:100%;margin-top:6px}
.gate-alt{font-size:13px;color:var(--haze);margin:0 0 8px}
.gate-alt a{color:var(--signal);text-decoration:none}
.gate-alt a:hover{text-decoration:underline}
.bar-links{display:flex;align-items:center;gap:18px}
.bar-link{font-size:13px;color:var(--haze);text-decoration:none}
.bar-link:hover{color:var(--paper)}