/* UPBURN website - the game's own look: black, Spectrum colours, its own letters (fonts/upburn-zx.woff, built from the game's font).
   The letters are pixel-sharp at sizes in steps of 8px (8, 16, 24, 32, 40, 48), so only those sizes are used. */
@font-face { font-family:'Upburn ZX'; src:url('/fonts/upburn-zx.woff') format('woff'); font-display:block; }
:root { --red:#FF0000; --dred:#D70000; --yel:#FFFF00; --grn:#00FF00; --cyn:#00FFFF; --mag:#FF00FF; --grey:#AAAAAA; --dgrey:#8A8A8A; --edge:#3A3A3A; }
* { box-sizing:border-box; }
html { background:#000; }
body { margin:0; background:#000; color:#fff; font-family:'Upburn ZX', ui-monospace, monospace; font-size:16px; line-height:24px; letter-spacing:0;
  -webkit-text-size-adjust:100%; text-rendering:optimizeSpeed; }
/* starfield (stars.js): a fixed canvas behind everything; the page sits on top of it */
#stars { position:fixed; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; will-change:transform; }
body > *:not(#stars) { position:relative; z-index:1; }
img { image-rendering:pixelated; display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:hover, a:focus-visible { color:var(--yel); }
a:focus-visible { outline:2px solid var(--yel); outline-offset:4px; }
h1, h2, h3, p { margin:0; font-weight:normal; }
.wrap { max-width:1160px; margin:0 auto; padding:0 40px; }
.stripe { height:12px; background:linear-gradient(to right, #D70000 0 25%, #D7D700 25% 50%, #00D700 50% 75%, #00D7D7 75% 100%); }
.stripe.thin { height:4px; }
.shadow { text-shadow:2px 2px 0 #5A0000; }
.red { color:var(--red); } .yel { color:var(--yel); } .grn { color:var(--grn); } .cyn { color:var(--cyn); } .mag { color:var(--mag); } .grey { color:var(--grey); } .dgrey { color:var(--dgrey); }
.s24 { font-size:24px; line-height:32px; } .s32 { font-size:32px; line-height:40px; } .s40 { font-size:40px; line-height:48px; } .s48 { font-size:48px; line-height:56px; }

nav { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
nav .links { display:flex; gap:32px; }
nav .home img { width:134px; height:54px; }

.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; padding:56px 0 70px; }
.hero .copy > * + * { margin-top:26px; }
.biglogo { width:536px; height:272px; }   /* the title screen's own animated logo (img/logo-anim.png, 134x68, recorded from the game) at 4x */
.badges { display:flex; gap:18px; flex-wrap:wrap; }
.badge { border:4px solid #fff; padding:12px 18px 14px; background:#000; box-shadow:6px 6px 0 var(--dred); display:block; }
.badge small { display:block; font-size:16px; line-height:16px; color:var(--grey); margin-bottom:8px; }
.badge span { display:block; font-size:24px; line-height:24px; }
.badge.soon small { color:var(--yel); }
a.badge:hover { box-shadow:6px 6px 0 var(--yel); }
.phone { justify-self:center; background:#111; border:6px solid var(--edge); border-radius:46px; padding:52px 14px; box-shadow:0 0 0 2px #000, 0 0 80px rgba(215,0,0,.35); position:relative; }
.phone::before { content:''; position:absolute; top:20px; left:50%; width:84px; height:18px; margin-left:-42px; background:#000; border-radius:12px; }
.phone img { width:288px; height:526px; }

section { padding:70px 0; }
.center { display:flex; flex-direction:column; align-items:center; text-align:center; }
.panel { border:4px solid var(--dred); outline:4px solid #000; box-shadow:0 0 0 8px var(--dred); padding:44px 30px; margin:40px auto 0; max-width:640px; width:100%; position:relative; background:#000; }
.panel p + p { margin-top:16px; }
.corner { position:absolute; width:16px; height:16px; border:4px solid #fff; }
.corner.tl { top:-4px; left:-4px; border-right:0; border-bottom:0; } .corner.tr { top:-4px; right:-4px; border-left:0; border-bottom:0; }
.corner.bl { bottom:-4px; left:-4px; border-right:0; border-top:0; } .corner.br { bottom:-4px; right:-4px; border-left:0; border-top:0; }
.feats { display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:44px; width:100%; }
.feat h3 { margin-top:16px; }
.feat p { margin-top:10px; color:var(--grey); }
.shot { border:4px solid var(--edge); background:#000; width:100%; }
.shot img { width:100%; height:auto; aspect-ratio:144/263; }
.bosses { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:44px; width:100%; max-width:640px; }
.strip { display:flex; gap:18px; margin-top:44px; justify-content:center; flex-wrap:wrap; }
.strip img { width:144px; height:263px; border:4px solid var(--edge); box-sizing:content-box; }
.lead { margin-top:16px; color:var(--grey); max-width:720px; }

footer { padding:36px 0 50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
footer .links { display:flex; gap:30px; flex-wrap:wrap; }

/* text pages (privacy, support) */
.doc { max-width:820px; margin:0 auto; padding:56px 0 80px; }
.doc h1 { margin-bottom:12px; }
.doc .date { color:var(--dgrey); margin-bottom:40px; }
.doc h2 { color:var(--yel); margin:44px 0 16px; font-size:24px; line-height:32px; }
.doc p, .doc li { color:#DDDDDD; }
.doc p + p { margin-top:16px; }
.doc ul { margin:16px 0 0; padding-left:0; list-style:none; }
.doc li { padding-left:28px; position:relative; } .doc li + li { margin-top:12px; }
.doc li::before { content:'>'; position:absolute; left:0; color:var(--red); }
.doc a { color:var(--cyn); border-bottom:2px solid currentColor; }
.doc a:hover { color:var(--yel); }
.mailbox { display:inline-block; border:4px solid #fff; box-shadow:6px 6px 0 var(--dred); padding:14px 18px; margin-top:20px; }
.doc .mailbox { border-bottom:4px solid #fff; color:#fff; }

@media (max-width:860px){
  .hero { grid-template-columns:1fr; text-align:center; }
  .hero .copy { display:flex; flex-direction:column; align-items:center; }
  .badges { justify-content:center; }
  .feats { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .wrap { padding:0 16px; }
  nav .links { gap:18px; } nav .links .opt { display:none; }
  .hero { padding:30px 0 40px; gap:40px; }
  .biglogo { width:335px; height:170px; }
  .s48 { font-size:32px; line-height:40px; } .s40 { font-size:32px; line-height:40px; } .s32 { font-size:24px; line-height:32px; } .s24 { font-size:16px; line-height:24px; }
  .phone img { width:216px; height:395px; } .phone { border-radius:38px; padding:42px 10px; }
  .feats { gap:16px; }
  .bosses { gap:14px; }
  .strip { gap:10px; } .strip img { width:108px; height:197px; }
  section { padding:44px 0; }
  .panel { padding:30px 12px; }
  footer { flex-direction:column; } footer .links { gap:18px; justify-content:center; }
  .doc { padding:36px 0 60px; }
}