/* CompleteChaos.AI studio site — generated by completechaos-src/build.py.
   Matches the games' retro arcade look: deep-space ground, a static starfield,
   neon magenta + arcade yellow for display type, cyan only for small labels. */
:root {
  --space:   #07061a;
  --space-2: #110e2b;
  --panel:   #161236;
  --line:    #2b2563;
  --text:    #f1edfb;
  --muted:   #a6a1c9;
  --magenta: #ff3d8b;
  --yellow:  #ffd23f;
  --cyan:    #5ef0ff;
  --maxw:    1040px;
}
* { box-sizing: border-box; }
html { background: var(--space); }
body {
  margin: 0; color: var(--text); background: var(--space);
  font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 72%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 33%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 86%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 54%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 28%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 80%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 92%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 6%, #fff6 50%, transparent 51%),
    radial-gradient(120% 70% at 50% 0%, #1c1550 0%, transparent 60%),
    var(--space);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px, 300px 300px,
                   520px 520px, 360px 360px, 440px 440px, 400px 400px, 480px 480px, 100% 100%, auto;
}
img { max-width: 100%; display: block; }
a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }

h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; letter-spacing: 0.01em; }
.display {
  font-weight: 900; text-transform: uppercase; color: var(--yellow);
  text-shadow: 3px 3px 0 var(--magenta), 0 0 22px #ff3d8b55;
}
h1.display { font-size: clamp(1.5rem, 7vw, 4.2rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.35rem, 3.6vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 800; }
.label {
  font: 600 0.74rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 0.8rem;
}
.lede { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: #d6d1ee; max-width: 58ch; }
p { max-width: 68ch; }

header.site { border-bottom: 1px solid var(--line); background: #07061acc; backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.brand { font-weight: 900; letter-spacing: 0.03em; color: var(--text); white-space: nowrap; }
.brand b { color: var(--magenta); }
.brand:hover { text-decoration: none; color: var(--yellow); }
nav.site { display: flex; gap: 18px; font-size: 0.92rem; white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 0.92rem; } nav.site { gap: 12px; font-size: 0.82rem; } }
nav.site a { color: var(--muted); }
nav.site a:hover { color: var(--text); text-decoration: none; }

.hero { padding-block: clamp(40px, 10vw, 96px) clamp(28px, 6vw, 56px); }
.hero .lede { margin-top: 18px; }
section { padding: clamp(32px, 6vw, 56px) 0; border-top: 1px solid var(--line); }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .18s, transform .18s; color: var(--text); }
.card:hover { border-color: var(--magenta); transform: translateY(-2px); text-decoration: none; }
.card img { aspect-ratio: 1024 / 500; object-fit: cover; width: 100%; }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.card .genre { color: var(--muted); font-size: 0.86rem; }
.card .status { color: var(--cyan); font: 600 0.72rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }

.game-head { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.game-head img { width: 96px; height: 96px; border-radius: 22px; }
@media (min-width: 640px) { .game-head { grid-template-columns: 128px 1fr; } .game-head img { width: 128px; height: 128px; border-radius: 28px; } }
.feature { margin-top: 28px; border-radius: 12px; border: 1px solid var(--line); }
.cta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 22px; padding: 12px 20px;
  background: var(--yellow); color: #120f2e; font-weight: 800; border-radius: 10px;
  box-shadow: 4px 4px 0 var(--magenta); }
.cta:hover { text-decoration: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--magenta); }
.cta small { font-weight: 600; opacity: .75; flex-basis: 100%; }
ul.features { padding-left: 1.2rem; max-width: 68ch; color: #d6d1ee; }
ul.features li { margin-bottom: 8px; }
.shots { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.shots img { width: 200px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line); scroll-snap-align: start; }
@media (min-width: 640px) { .shots img { width: 230px; } }

.legal { padding-block: clamp(32px, 7vw, 64px) 56px; }
.legal h1 { margin-bottom: 14px; }
.legal h2 { margin: 30px 0 10px; font-size: 1.3rem; color: var(--yellow); }
.legal ul { padding-left: 1.2rem; max-width: 68ch; color: #d6d1ee; }
.legal li { margin-bottom: 6px; }

footer.site { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 0.9rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
footer.site nav { display: flex; gap: 18px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }