:root {
  --ink: #080714;
  --muted: #665f72;
  --brand: #5f19bb;
  --lime: #00d118;
  --paper: #f8f5fb;
  --line: #ded2ea;
}

body {
  color: #f5f2fa;
  background-color: #080714;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='45' viewBox='0 0 52 45'%3E%3Cpath d='M13 1h26l12 21.5L39 44H13L1 22.5Z' fill='none' stroke='%23b8b8c2' stroke-opacity='.065' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#0d0b1a,#080714 65%);
  background-size: 52px 45px, auto;
}

.card,
.game-search,
.profile-shell,
.banner-library,
.pricing-panel { color: var(--ink); }

footer { color: #a99fb7; }

header {
  background: #080714;
}

.brand span {
  color: #00d118;
}

.btn,
button {
  background: #5f19bb;
  box-shadow: 0 4px 0 #3b0e78;
}

.btn:hover,
button:hover {
  box-shadow: 0 5px 0 #3b0e78;
}

.btn:active,
button:active {
  box-shadow: 0 1px 0 #3b0e78;
}

.btn.alt {
  background: #00d118;
  color: #080714;
  box-shadow: 0 4px 0 #008b10;
}

.btn.secondary {
  color: #5f19bb;
}

.tag {
  background: #eee3f8;
  color: #5f19bb;
}

.avatar {
  background: #eadcf6;
  color: #5f19bb;
}

.step:before {
  background: #00d118;
  color: #080714;
}

.guide-banner {
  background-color: #5f19bb;
  background-image:
    linear-gradient(135deg, rgba(0,209,24,.5), transparent 48%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(164,114,215,.3) 14px 16px);
}

.guide-banner.banner-u3 {
  background-color: #080714;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(0,209,24,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 76% 68%, rgba(164,114,215,.85) 0 7px, transparent 8px),
    linear-gradient(120deg, transparent 0 35%, rgba(95,25,187,.72) 35% 60%, transparent 60%);
}

/* Shared compact container standard: text begins close to the box edge. */
.card { padding: 16px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card.step { padding-top: 62px; }