/* silentaim.vip — ironic leet-hacker aesthetic, honest markup */

:root {
  color-scheme: dark;
  --accent: #00ff9c;
  --bg: #07090d;
  --bg-2: #0b0f16;
  --bg-3: #10161f;
  --line: #1c2430;
  --ink: #e8ecf4;
  --dim: #8b94a7;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --wrap: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 48rem; }
.dim { color: var(--dim); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #000; padding: 10px 16px; z-index: 100;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  background: rgba(7, 9, 13, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font: 700 1.02rem/1 var(--mono); letter-spacing: -.02em;
}
.brand-mark { color: var(--accent); font-size: 1.15rem; }
.brand .dim { color: var(--dim); font-weight: 400; }
.site-nav { display: flex; gap: 20px; }
.site-nav a {
  color: var(--dim); text-decoration: none;
  font: 500 .875rem/1 var(--sans);
}
.site-nav a:hover { color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(56px, 11vw, 104px) 0 clamp(40px, 7vw, 72px);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(48rem 26rem at 50% 12%, #000, transparent 72%);
}

.kicker {
  margin: 0 0 14px;
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 7.2vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance;
}
.tagline {
  margin: 0 auto 30px; max-width: 42rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem); color: var(--dim);
  text-wrap: pretty;
}

.punch { margin: 0 0 26px; }
.punch-text {
  display: inline-block;
  padding: 14px 26px;
  font: 800 clamp(1.7rem, 6.4vw, 3.2rem)/1 var(--mono);
  letter-spacing: -.03em;
  color: var(--accent);
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 44px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: rotate(-1.4deg);
}

.sub {
  margin: 0 auto 30px; max-width: 40rem;
  color: var(--dim); font-size: 1.02rem; text-wrap: pretty;
}
.sub strong { color: var(--ink); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  font: 600 .93rem/1.2 var(--sans); text-decoration: none;
  background: var(--accent); color: #05070a;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -10px var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* ---------- sections ---------- */

.section { padding: clamp(48px, 8vw, 84px) 0; }
.section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3.6vw, 2.05rem);
  letter-spacing: -.028em; font-weight: 750; text-wrap: balance;
}
.tick {
  font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); vertical-align: middle; margin-left: 10px;
  padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; white-space: nowrap;
}
.lede { margin: 0 0 32px; color: var(--dim); max-width: 44rem; text-wrap: pretty; }

/* ---------- keyword chips ---------- */

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  padding: 7px 13px; border-radius: 999px;
  border: 1px dashed var(--line); background: var(--bg-2);
  font: 500 .8rem/1.3 var(--mono); color: var(--dim);
}
.chips li::before { content: "⌕ "; color: var(--accent); }

/* ---------- cards ---------- */

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card {
  position: relative; padding: 24px 22px 22px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.card-no {
  font: 700 .72rem/1 var(--mono); letter-spacing: .1em;
  color: var(--accent); opacity: .75; margin-bottom: 12px;
}
.card h3 { margin: 0 0 9px; font-size: 1.06rem; letter-spacing: -.015em; }
.card p { margin: 0; color: var(--dim); font-size: .935rem; text-wrap: pretty; }

/* ---------- why ---------- */

.why { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.why-item h3 {
  margin: 0 0 8px; font-size: 1.02rem; letter-spacing: -.015em;
  padding-left: 16px; border-left: 3px solid var(--accent);
}
.why-item p { margin: 0; color: var(--dim); font-size: .94rem; padding-left: 19px; text-wrap: pretty; }

/* ---------- faq ---------- */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 18px;
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.faq summary {
  cursor: pointer; padding: 16px 0; list-style: none;
  font-weight: 600; font-size: .98rem;
  display: flex; align-items: flex-start; gap: 11px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--accent); font: 700 1.15rem/1.15 var(--mono); flex: none;
}
.faq details[open] summary::before { content: "−"; }
.faq p { margin: 0 0 17px; padding-left: 24px; color: var(--dim); font-size: .94rem; text-wrap: pretty; }

/* ---------- game grid ---------- */

.game-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.game-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 22px 20px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.game-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -22px var(--accent);
}
.game-genre {
  font: 600 .68rem/1 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: var(--dim);
}
.game-name { font-size: 1.28rem; font-weight: 750; letter-spacing: -.025em; }
.game-cta { margin-top: 5px; font-size: .85rem; color: var(--accent); font-weight: 600; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: clamp(40px, 7vw, 64px) 20px;
  max-width: calc(var(--wrap) + 40px); margin-inline: auto;
}
.site-foot p { margin: 0 0 14px; color: var(--dim); font-size: .875rem; max-width: 46rem; text-wrap: pretty; }
.site-foot .foot-big {
  font: 700 clamp(1.05rem, 3vw, 1.35rem)/1.4 var(--sans);
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 20px;
}
.foot-big .nope { color: var(--accent); }
.site-foot strong { color: var(--ink); }

/* ---------- the gag overlay ---------- */

#boot {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: #05070a;
  padding: 20px;
  font: 13px/1.75 var(--mono);
}
#boot[hidden] { display: none; }
#boot.done { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.boot-win {
  width: 100%; max-width: 38rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: #080b11; overflow: hidden;
  box-shadow: 0 30px 90px -30px #000;
}
.boot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: .76rem; letter-spacing: .06em;
}
.boot-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a3342; flex: none; }
.boot-dot.red { background: #ff5f57; }
.boot-body { padding: 16px 16px 18px; min-height: 13.5rem; white-space: pre-wrap; word-break: break-word; }
.boot-line { color: #93a0b5; }
.boot-line .ok { color: var(--accent); }
.boot-line .warn { color: #ffcc55; }
.boot-line .err { color: #ff5f57; font-weight: 700; }
.boot-line .gud { color: var(--accent); font-weight: 800; font-size: 1.5em; letter-spacing: -.02em; }
.boot-cursor { display: inline-block; width: .6em; height: 1.05em; background: var(--accent); vertical-align: -.18em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.boot-skip {
  display: block; margin: 14px auto 0; background: none; border: 0;
  color: #55607a; font: 500 .74rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
}
.boot-skip:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .card:hover, .game-card:hover { transform: none; }
  .boot-cursor { animation: none; }
}

/* ---------- ad slots ---------- */
/* Space is reserved up front so a slow ad cannot shove the page around. */

.ad {
  display: block;
  margin: clamp(28px, 5vw, 44px) auto;
  padding-inline: 20px;
  max-width: calc(var(--wrap) + 40px);
  text-align: center;
}
.ad-label {
  display: block; margin-bottom: 7px;
  font: 500 .62rem/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: #4d566b;
}
.ad-frame {
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; overflow: hidden;
  width: 100%;
  max-width: var(--ad-mw);
  min-height: var(--ad-mh);
}
.ad-frame > * { max-width: 100%; }

@media (min-width: 720px) {
  .ad-frame { max-width: var(--ad-w); min-height: var(--ad-h); }
}

/* ---------- desktop-only skyscraper rail ---------- */
/* Injected by app.js only above --rail min viewport, so narrow screens
   never fire an impression they cannot display. */

.sa-rail {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 30;                 /* below the gag overlay (90) and header (40) */
  width: var(--rail-w, 160px);
}
.sa-rail-frame {
  width: var(--rail-w, 160px);
  min-height: var(--rail-h, 600px);
  overflow: hidden;
}
.sa-rail-frame > iframe { border: 0; display: block; }

@media (max-width: 1439px) { .sa-rail { display: none; } }

.more-games { margin: 22px 0 0; }
.more-games a {
  font: 600 .9rem/1.4 var(--sans); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.more-games a:hover { border-bottom-color: var(--accent); }