/* ============================================================
   KullGames — Base layer
   Reset + base elements + the brand's signature utility classes.
   Everything references the design tokens. Ships to consumers
   so a plain HTML page can use .btn / .pill / .eyebrow / .kg-media
   without React.
   ============================================================ */

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface-page);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); letter-spacing: var(--ls-head); font-weight: var(--fw-bold); }

/* ---------- Type helpers ---------- */
.pixel { font-family: var(--font-pixel); letter-spacing: var(--ls-pixel); line-height: 1; }
.mono  { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel-label); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
}
.eyebrow--light { color: var(--kg-gold); }
.muted { color: var(--text-muted); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-9) 0; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: var(--sp-7); }
.section-head h2 { font-size: var(--fs-display); }
.section-head p { margin: 0; color: var(--text-muted); font-size: 17px; }

/* ============================================================
   PIXEL BUTTON — chunky, voxel, hard amber bottom edge
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: var(--ls-pixel);
  text-transform: uppercase;
  padding: 14px 20px; border: none; cursor: pointer;
  border-radius: var(--r-sm);
  background: var(--kg-gold); color: var(--kg-ink);
  box-shadow: var(--edge-gold);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kg-amber-deep); }
.btn--ghost { background: transparent; color: var(--kg-ink); box-shadow: inset 0 0 0 2px var(--kg-ink); }
.btn--ghost:active { transform: translateY(2px); }
.btn--ghost.btn--on-dark { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn--discord { background: var(--kg-discord); color: #fff; box-shadow: 0 4px 0 #3c46c4; }
.btn--lg { padding: 18px 26px; font-size: 13px; }

/* ============================================================
   STATUS PILL / CHIP
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--surface-sunken); border: 1px solid var(--border-strong); color: var(--kg-ink);
}
.pill--gold { background: var(--kg-gold); border-color: var(--kg-amber); color: var(--kg-ink); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-online); flex: none; }
.pill .dot--off { background: var(--status-offline); }
.dot--pulse { animation: kg-pulse 2s infinite; }
@keyframes kg-pulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-online) 25%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-online) 8%, transparent); }
}

/* a square voxel chip (overlaid on media) */
.kg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff;
  background: color-mix(in srgb, var(--kg-ink) 82%, transparent);
  padding: 6px 11px; border-radius: var(--r-sm); backdrop-filter: blur(4px);
}
.kg-chip--gold { background: var(--kg-gold); color: var(--kg-ink); font-family: var(--font-pixel); font-size: 9px; letter-spacing: .06em; }

/* ============================================================
   CARD — raised paper, soft + hard shadow, hover lift
   ============================================================ */
.card {
  background: var(--surface-card); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ============================================================
   IMAGE SYSTEM  —  <figure class="kg-media kg-16x9"> + <img>
   Frame sets the crop; modifiers add scrim / wash / frame / focus.
   ============================================================ */
.kg-media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--kg-ink); isolation: isolate;
}
.kg-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* aspect ratios */
.kg-21x9 { aspect-ratio: 21/9; }
.kg-16x9 { aspect-ratio: 16/9; }
.kg-3x2  { aspect-ratio: 3/2; }
.kg-4x3  { aspect-ratio: 4/3; }
.kg-1x1  { aspect-ratio: 1/1; }
.kg-3x4  { aspect-ratio: 3/4; }
.kg-9x16 { aspect-ratio: 9/16; }

/* focus: anchor the crop (these landscapes read best at the horizon) */
.kg-focus-horizon { object-position: center 62%; }
.kg-focus-skyline { object-position: 62% 58%; }
.kg-focus-sky     { object-position: center 22%; }
.kg-focus-field   { object-position: center 80%; }

/* scrim: indigo gradient so light/pixel text survives the bright sky */
.kg-scrim::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kg-scrim--bottom::after { background: linear-gradient(180deg, rgba(32,18,51,0) 38%, rgba(32,18,51,.78) 100%); }
.kg-scrim--left::after   { background: linear-gradient(90deg, rgba(32,18,51,.80) 0%, rgba(32,18,51,.30) 45%, rgba(32,18,51,0) 75%); }
.kg-scrim--full::after   { background: linear-gradient(180deg, rgba(32,18,51,.30), rgba(32,18,51,.55)); }

/* brand wash: tint gold→indigo (heroes / dividers only, use sparingly) */
.kg-wash::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(180deg, var(--kg-gold) 0%, var(--kg-ink) 100%); opacity: .55;
}
.kg-wash--gold::before { background: var(--kg-gold); mix-blend-mode: overlay; opacity: .42; }

/* pixel frame: chunky indigo border + hard amber drop */
.kg-frame { border: var(--bw-thick) solid var(--kg-ink); box-shadow: 6px 6px 0 var(--kg-amber-deep); border-radius: var(--r-sm); }
.kg-frame.kg-media { border-radius: var(--r-sm); }

/* caption sitting over a scrim */
.kg-cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.kg-cap__kicker { font-family: var(--font-pixel); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--kg-gold); }
.kg-cap__title { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.1; }

/* ---------- Scrollbars (subtle, on-brand) ---------- */
.scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }