/* NetDagger Arcade portal. Follows ../style-guide.md (palette, fonts, 8px grid, glow on UI only). No JS, no CDNs. */
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-display: swap; }

:root {
  --c-void: #0B0B1A; --c-night: #141432; --c-panel: #1E1E46; --c-panel-hi: #2C2C5E; --c-line: #4A4A88;
  --c-muted: #8C8CB8; --c-text: #E8E8F8; --c-cyan: #2DE2E6; --c-magenta: #FF3EA5; --c-yellow: #FFD23F; --c-violet: #9D5CFF;
  --font-head: "Press Start 2P", "Courier New", ui-monospace, monospace;
  --font-body: "VT323", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --u: 8px;
  --glow: 0 0 4px currentColor, 0 0 12px color-mix(in srgb, currentColor 40%, transparent);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-void); color-scheme: dark; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  font: 22px/1.3 var(--font-body); color: var(--c-text);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--c-violet) 22%, transparent), transparent 70%),
    linear-gradient(var(--c-void), var(--c-void));
  background-attachment: fixed;
}
a { color: var(--c-cyan); }
:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; }

.skip { position: absolute; left: var(--u); top: -100px; z-index: 10; padding: var(--u) calc(var(--u)*2);
  background: var(--c-yellow); color: var(--c-void); font: 12px var(--font-head); text-decoration: none; }
.skip:focus { top: var(--u); }

/* ---------- ad slots: fixed reserved boxes so the layout never jumps ---------- */
.ad-slot {
  flex: none; width: 728px; height: 90px; max-width: 100%;
  margin: calc(var(--u)*2) auto; display: grid; place-items: center; overflow: hidden; contain: strict;
  background: repeating-linear-gradient(135deg, var(--c-night) 0 10px, #17173A 10px 20px);
  outline: 1px dashed var(--c-line); outline-offset: -1px;
}
.ad-label { font: 10px var(--font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); }
.ad-size-m { display: none; }
@media (max-width: 767px) {
  .ad-slot { width: 320px; height: 50px; margin: var(--u) auto; }
  .ad-size-d { display: none; } .ad-size-m { display: inline; }
}

/* ---------- header ---------- */
.site-header { width: min(1200px, 100% - 4*var(--u)); text-align: center; padding: calc(var(--u)*2) 0 calc(var(--u)*3); }
.brand { margin: 0; font: 32px/1.2 var(--font-head); color: var(--c-yellow); text-shadow: var(--glow); letter-spacing: 1px; }
.brand span:not(.brand-mark) { color: var(--c-magenta); }
.brand-mark { display: inline-block; width: 28px; height: 32px; margin-right: 16px; vertical-align: -4px;
  background: linear-gradient(135deg, #8FF4F6 0 30%, var(--c-cyan) 30% 70%, #1BA5B0 70%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 6px var(--c-cyan)); }
.tagline { margin: calc(var(--u)*2) 0 0; color: var(--c-muted); font-size: 24px; }

/* ---------- card grid (auto-fills; works for 2 or 50 games) ---------- */
.games { width: min(1200px, 100% - 4*var(--u)); flex: 1; }
.section-title { font: 16px var(--font-head); color: var(--c-cyan); margin: 0 0 calc(var(--u)*2);
  padding-bottom: var(--u); border-bottom: 1px solid var(--c-line); }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u)*3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.card { position: relative; display: flex; flex-direction: column; background: var(--c-panel);
  border: 2px solid var(--c-line); box-shadow: inset 0 2px 0 var(--c-panel-hi), 0 4px 0 #0E0E26;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated;
  border-bottom: 2px solid var(--c-line); background: var(--c-night); }
.card-body { display: flex; flex-direction: column; gap: var(--u); padding: calc(var(--u)*2); flex: 1; }
.card-title { margin: 0; font: 14px/1.4 var(--font-head); color: var(--c-text); }
.card-blurb { margin: 0 0 var(--u); color: var(--c-muted); flex: 1; }
.card:hover, .card:focus-within { border-color: var(--c-cyan); transform: translateY(-2px);
  box-shadow: inset 0 2px 0 var(--c-panel-hi), 0 0 0 1px var(--c-cyan), 0 0 24px color-mix(in srgb, var(--c-cyan) 35%, transparent); }
/* whole card clickable via the Play link; the link itself keeps the focus ring */
.card .btn::after { content: ""; position: absolute; inset: 0; }

.btn { align-self: flex-start; display: inline-block; min-height: 40px; padding: 12px 20px;
  font: 12px/16px var(--font-head); text-transform: uppercase; text-decoration: none; letter-spacing: 1px;
  color: var(--c-void); background: var(--c-cyan); border: 2px solid var(--c-cyan);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c-cyan) 55%, #000), 0 0 10px color-mix(in srgb, var(--c-cyan) 45%, transparent); }
.btn:hover, .btn:focus-visible { background: var(--c-yellow); border-color: var(--c-yellow);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c-yellow) 55%, #000), 0 0 14px color-mix(in srgb, var(--c-yellow) 60%, transparent); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgb(0 0 0 / .35); }
.btn-disabled { color: var(--c-muted); background: transparent; border-color: var(--c-line); box-shadow: none; cursor: default; }
.card-soon { border-style: dashed; }
.card-soon:hover { transform: none; border-color: var(--c-line); box-shadow: inset 0 2px 0 var(--c-panel-hi); }

/* ---------- footer ---------- */
.site-footer { width: min(1200px, 100% - 4*var(--u)); padding: calc(var(--u)*2) 0 calc(var(--u)*4); text-align: center;
  color: var(--c-muted); font-size: 18px; border-top: 1px solid var(--c-panel-hi); }
.site-footer nav { display: flex; justify-content: center; gap: calc(var(--u)*3); margin-bottom: var(--u); }
.site-footer nav a { font: 10px var(--font-head); text-decoration: none; padding: var(--u); }
.site-footer nav a:hover { color: var(--c-yellow); }
.site-footer p { margin: 0; }

@media (max-width: 767px) {
  body { font-size: 20px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 18px; height: 20px; margin-right: 8px; vertical-align: -2px; }
  .tagline { font-size: 20px; }
  .card-grid { gap: calc(var(--u)*2); }
}
@media (prefers-reduced-motion: reduce) { .card, .btn { transition: none; } .card:hover, .card:focus-within { transform: none; } }