/* Fonts are served from this site (no Google request). Both are SIL Open Font License. Inter is one variable file for every weight. */
@font-face { font-family:Inter; src:url(fonts/inter-latin.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:Bangers; src:url(fonts/bangers-latin.woff2) format('woff2'); font-weight:400; font-display:swap; }
:root { --ink:#f3e9dc; --dim:#b9a99a; --ember:#ff7a1a; --gold:#ffc24a; --coal:#141013; --coal2:#1e171b; --line:#3a2a26; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { background:var(--coal); color:var(--ink); font-family:Inter, system-ui, sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

/* Top bar */
header { position:sticky; top:0; z-index:5; background:rgba(20,16,19,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
header .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; height:68px; }
header img { height:40px; width:auto; display:block; }
nav { display:flex; gap:28px; font-weight:600; font-size:15px; color:var(--dim); }
nav a:hover, nav a:focus-visible { color:var(--gold); }
.menu { display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, #2a1f22, var(--coal2)); box-shadow:inset 0 1px 0 rgba(255,194,74,.15); }
.menu span { display:block; width:20px; height:2px; margin:4px auto; border-radius:2px; background:var(--gold); transition:transform .2s, opacity .2s; }
.menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* Hero. The ember sparks sit only along the edges and the bottom so they never land on the text. */
.hero { position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(to bottom, transparent 70%, var(--coal)), radial-gradient(ellipse at 50% 120%, rgba(255,122,26,.35), transparent 60%), radial-gradient(ellipse at 50% 0%, #2a1a1a, var(--coal) 70%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.8; background:
  radial-gradient(2px 2px at 3% 70%, var(--ember), transparent), radial-gradient(2px 2px at 70% 95%, var(--gold), transparent),
  radial-gradient(1.5px 1.5px at 30% 93%, var(--ember), transparent), radial-gradient(1.5px 1.5px at 97% 60%, var(--ember), transparent),
  radial-gradient(2px 2px at 2% 30%, var(--gold), transparent), radial-gradient(1.5px 1.5px at 96% 22%, var(--ember), transparent); }
.hero .wrap { position:relative; z-index:1; width:100%; text-align:center; padding-top:40px; padding-bottom:48px; }
.hero img { width:min(560px, 86%); filter:drop-shadow(0 10px 40px rgba(255,122,26,.25)); }
.hero p { margin:22px auto 30px; max-width:560px; font-size:19px; color:var(--dim); }
.hero .row { justify-content:center; }

/* Buttons */
.btn { display:inline-block; padding:14px 28px; border-radius:12px; font-weight:800; letter-spacing:.3px; text-align:center;
  background:linear-gradient(180deg, var(--gold), var(--ember)); color:#2a1206; box-shadow:0 6px 0 #9a3e07, 0 10px 30px rgba(255,122,26,.3);
  transition:transform .1s, box-shadow .1s; }
.btn:active { transform:translateY(4px); box-shadow:0 2px 0 #9a3e07, 0 6px 20px rgba(255,122,26,.3); }
.btn.ghost { background:transparent; color:var(--ink); border:2px solid var(--line); box-shadow:none; }
.btn.ghost:hover { border-color:var(--ember); }
.btn.off { cursor:default; color:var(--dim); }
.btn.off:hover { border-color:var(--line); }
.btn.off:active { transform:none; }

section { padding:72px 0; }
section.alt { background:#18121a; }
h2 { font-family:Bangers, Impact, sans-serif; font-weight:400; letter-spacing:1.5px; font-size:42px; color:var(--gold); margin-bottom:28px; text-shadow:0 3px 0 #000; }

/* Game cards */
.games { display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.card { background:var(--coal2); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.card .art { position:relative; aspect-ratio:16/9; background:url(img/dvd-art.webp) center/108% auto; }
.card .art img { position:absolute; left:50%; bottom:-6%; transform:translateX(-50%); width:62%; filter:drop-shadow(0 6px 14px #000); }
.card .body { padding:22px 24px 26px; }
.card h3 { font-size:24px; margin-bottom:6px; }
.card p { color:var(--dim); margin-bottom:18px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tags span { font-size:13px; font-weight:600; padding:4px 10px; border-radius:99px; background:#2a1f22; color:var(--gold); border:1px solid var(--line); }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* On computers the Next game card is as tall as the Dinos card, so its glowing egg grows to fill the space. */
.soon { display:flex; flex-direction:column; }
.soon .art { flex:1; aspect-ratio:auto; min-height:200px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(255,122,26,.35), transparent 60%), #1a1316; }
.soon .art img { position:static; transform:none; width:min(60%, 240px); opacity:.9; filter:drop-shadow(0 0 24px rgba(255,122,26,.5)); }
.soon .body { flex:none; }
.soon .tags { margin-bottom:0; }

/* About and support */
.about { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about p { color:var(--dim); font-size:17px; margin-bottom:14px; }
.panel { background:var(--coal2); border:1px solid var(--line); border-radius:18px; padding:28px; }
.panel h3 { margin-bottom:8px; }
.panel p { color:var(--dim); margin-bottom:12px; }
.panel a.mail { display:inline-block; padding:12px 0; color:var(--gold); font-weight:700; overflow-wrap:anywhere; }
.panel a.mail:hover { text-decoration:underline; }

footer { border-top:1px solid var(--line); padding:32px 0 40px; color:var(--dim); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer nav { gap:20px; font-size:14px; }

/* Touch screens wide enough for the computer layout (tablets, phones on their side): taller links for thumbs */
@media (pointer:coarse) {
  nav.top a { padding:11px 4px; }
  footer nav a { padding:11px 0; }
}
/* Tablets: give the support panel the full width */
@media (max-width: 900px) {
  .about { grid-template-columns:1fr; }
}

/* Phones */
@media (max-width: 760px) {
  .wrap { padding:0 16px; }
  header img { height:32px; }
  .menu { display:block; }
  nav.top { display:none; position:absolute; top:calc(100% + 8px); left:16px; right:16px; flex-direction:column; gap:0; padding:8px;
    background:var(--coal2); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,122,26,.12); }
  nav.top.open { display:flex; }
  nav.top a { padding:14px 16px; font-size:17px; color:var(--ink); }
  nav.top a + a { border-top:1px solid var(--line); }
  nav.top a:active { background:#2a1f22; color:var(--gold); }
  .hero { min-height:440px; }
  .hero p { font-size:17px; }
  .row { flex-direction:column; align-items:stretch; }
  .btn { padding:16px; }
  section { padding:52px 0; }
  h2 { font-size:34px; }
  .games, .about { grid-template-columns:1fr; }
  .soon .art { flex:none; aspect-ratio:16/9; min-height:0; }
  footer .wrap { flex-direction:column; }
  footer nav { flex-direction:column; gap:0; }
  footer nav a { padding:11px 0; font-size:15px; }
}