/* Ajagbudi Games — landing page.
   One stylesheet, no JavaScript. Each card sets its own --tint, which drives
   the icon colour, the hover glow and the focus ring, so adding a game means
   adding one <li> and picking a colour. */

:root{
  --bg:#132039;
  --bg-2:#0D1628;
  --card:#1C2B47;
  --card-hover:#233457;
  --line:#2C3E63;
  --ink:#F2F6FF;
  --ink-soft:#A9B8D4;
  --accent:#FFC247;
  --radius:20px;
  color-scheme: dark;
}

/* The page is deliberately dark in both schemes — it reads as an arcade, and
   keeps the game artwork colours popping. Light mode only lifts the contrast. */
@media (prefers-color-scheme: light){
  :root{
    --bg:#1B2A4A;
    --bg-2:#122039;
    --card:#23355A;
    --card-hover:#2B4068;
    --line:#38507E;
    --ink-soft:#B9C7E2;
  }
}

*{ box-sizing:border-box; }

/* The body gradient is fixed, so it only paints the viewport. Giving <html>
   the same base colour keeps overscroll (and any area the gradient doesn't
   reach on a long page) dark navy instead of flashing black. */
html{ background:var(--bg-2); }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #23406E 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Nunito", -apple-system, "Segoe UI", sans-serif;
  padding:clamp(20px, 5vw, 48px) clamp(16px, 4vw, 40px) 40px;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Faint star specks, drawn with repeating radial gradients rather than markup
   or script so they cost nothing to render. */
.sky{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 78% 12%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 63% 31%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 28% 44%, rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 89% 52%, rgba(255,255,255,.28) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 8%,  rgba(255,255,255,.35) 50%, transparent 51%);
}

/* ---------- Masthead ---------- */
.masthead{
  position:relative; z-index:1;
  max-width:1080px; margin:0 auto clamp(26px, 5vw, 44px);
  text-align:center;
}
.logo{ display:flex; align-items:center; justify-content:center; gap:14px; }
.logo-mark{ width:clamp(40px, 7vw, 54px); height:clamp(40px, 7vw, 54px); flex:none; }
h1{
  font-family:"Fredoka", "Nunito", sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem, 6vw, 3rem);
  letter-spacing:-0.01em;
  margin:0;
  line-height:1.05;
}
.tagline{
  color:var(--ink-soft);
  font-size:clamp(.95rem, 2.4vw, 1.08rem);
  line-height:1.55;
  max-width:46ch;
  margin:14px auto 0;
  text-wrap:balance;
}

/* ---------- Game grid ---------- */
main{ position:relative; z-index:1; }
.grid{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:1080px;
  display:grid;
  gap:clamp(12px, 2.2vw, 18px);
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}

.card{
  display:flex;
  align-items:center;
  gap:16px;
  height:100%;
  padding:18px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.card:hover, .card:focus-visible{
  background:var(--card-hover);
  border-color:color-mix(in srgb, var(--tint) 60%, transparent);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent);
}
.card:focus-visible{ outline:3px solid var(--tint); outline-offset:3px; }
.card:active{ transform:translateY(-1px); }

.badge{
  flex:none;
  width:64px; height:64px;
  border-radius:18px;
  display:grid; place-items:center;
  color:var(--tint);
  background:color-mix(in srgb, var(--tint) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--tint) 34%, transparent);
}
.badge svg{ width:38px; height:38px; }

.body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.body strong{
  font-family:"Fredoka", "Nunito", sans-serif;
  font-weight:600;
  font-size:1.12rem;
  line-height:1.2;
}
.body em{
  font-style:normal;
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.45;
}

footer{
  position:relative; z-index:1;
  max-width:1080px;
  margin:clamp(30px, 6vw, 52px) auto 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  text-align:center;
}
footer p{ margin:0; color:var(--ink-soft); font-size:.84rem; }

@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover, .card:focus-visible{ transform:none; }
}

/* On the narrowest phones the icon and text stop fitting side by side. */
@media (max-width:360px){
  .card{ flex-direction:column; align-items:flex-start; }
}