/* WD Games — arcade-cabinet look: indigo night, coin-slot yellow, and a teal for the second accent.
   Layout: one centred column; a featured game up top, then a grid of game cards. */
:root {
  --bg: #15122b;
  --bg-2: #1c1838;
  --panel: #221e42;
  --line: #342f5c;
  --ink: #f5f1e8;
  --muted: #aaa4c9;
  --coin: #ffc93c;
  --teal: #3ee0c5;
  --f-display: "Bungee", "Arial Black", Impact, sans-serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

/* header */
.top { padding-block: 22px 8px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 44px; height: 44px; flex: none; }
.logo-word { font: 400 26px/1 var(--f-display); letter-spacing: .02em; }
.logo-word span { color: var(--coin); }
.nav { display: flex; gap: 22px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }

/* featured game */
.feature { padding-block: 28px 44px; }
.feature-card {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center;
}
.shot {
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 3px var(--line), 0 30px 60px -30px rgba(0,0,0,.8);
  background: var(--panel);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .sticker { position: absolute; left: 14px; top: 14px; }
.eyebrow { font: 600 13px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; }
.feature h1 { font: 400 clamp(38px, 6vw, 64px)/1 var(--f-display); margin: 0 0 16px; text-wrap: balance; }
.feature p.blurb { color: var(--muted); font-size: 18px; margin: 0 0 22px; max-width: 46ch; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.controls li { display: inline-flex; align-items: center; gap: 7px; }
kbd {
  font: 600 12px/1 var(--f-body); color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 5px 8px;
}
.play {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 400 20px/1 var(--f-display); letter-spacing: .02em;
  background: var(--coin); color: #221a00; padding: 16px 26px; border-radius: 12px;
  box-shadow: 0 5px 0 #b8871a; transition: transform .08s, box-shadow .08s;
}
.play:hover { transform: translateY(-1px); box-shadow: 0 6px 0 #b8871a; }
.play:active { transform: translateY(4px); box-shadow: 0 1px 0 #b8871a; }
.play svg { width: 16px; height: 16px; }

/* game grid */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h2 { font: 400 26px/1.1 var(--f-display); margin: 0; }
.section-head span { color: var(--muted); font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 56px; }
.card {
  background: var(--panel); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: transform .15s, box-shadow .15s;
  min-width: 0;
}
a.card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--coin), 0 18px 30px -18px rgba(0,0,0,.8); }
.card .thumb { aspect-ratio: 3 / 2; position: relative; background: var(--bg-2); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.card h3 { font: 400 20px/1.15 var(--f-display); margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.sticker {
  font: 400 12px/1 var(--f-display); letter-spacing: .04em; padding: 7px 10px; border-radius: 8px;
  position: absolute; right: 10px; top: 10px; transform: rotate(-3deg);
}
.sticker.play-now { background: var(--coin); color: #221a00; }
.sticker.soon { background: var(--teal); color: #06231e; }
.card.is-soon { opacity: .92; }
/* drawn placeholder for games without a picture yet */
.placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--hue, #3a2f7a), var(--bg-2));
}
.placeholder span { font: 400 clamp(28px, 4vw, 44px)/1 var(--f-display); color: rgba(255,255,255,.2); text-align: center; padding: 0 12px; }

/* about + footer */
.about { border-top: 1px solid var(--line); padding-block: 40px; }
.about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; }
.about h2 { font: 400 22px/1.2 var(--f-display); margin: 0 0 8px; }
.about p { margin: 0; color: var(--muted); max-width: 60ch; }
.foot { margin-top: auto; border-top: 1px solid var(--line); padding-block: 20px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* simple pages (coming soon, 404) */
.page { flex: 1; display: grid; place-items: center; padding-block: 40px 60px; text-align: center; }
.page h1 { font: 400 clamp(34px, 7vw, 60px)/1.05 var(--f-display); margin: 0 0 14px; text-wrap: balance; }
.page p { color: var(--muted); font-size: 18px; margin: 0 auto 26px; max-width: 44ch; }

@media (max-width: 860px) {
  .feature-card { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 16px; }
  .logo-word { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }