/* Hoodlums: outlaw-poster look. Dark forest black, lime ink, robin orange. Chunky borders + hard offset shadows.
   Performance rules: animate only transform and opacity; textures static; loops pause off screen (.offscreen). */
@font-face { font-family: 'Alfa Slab One'; src: url(/fonts/alfa.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/fonts/grotesk.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(/fonts/mono.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --bg: #070a06; --bg2: #0c110a; --card: #111809; --ink: #030502; --line: rgba(233, 242, 223, .13);
  --text: #f1f6e7; --mute: #a3ad98; --accent: #d4ff3a; --accent-ink: #0a0f02; --robin: #ff6a2b; --ok: #7ee05a; --warn: #ffb547; --stamp: #ff5a3c;
  --r: 14px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --f-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-display: 'Alfa Slab One', Georgia, serif; --f-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--f-body); overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--f-mono); }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 80% 0%, rgba(212, 255, 58, .10), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(255, 106, 43, .07), transparent 70%), var(--bg); }

.nav { position: sticky; top: 0; z-index: 20; background: rgba(7, 10, 6, .92); border-bottom: 2px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 21px/1 var(--f-display); letter-spacing: .02em; }
.brand img { border-radius: 50%; width: 38px; height: 38px; }
.nav-r { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 2px solid var(--line); border-radius: 8px; font: 700 12px/1 var(--f-mono); color: var(--mute); white-space: nowrap; }
.chip b { color: var(--text); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--line); border-radius: 8px; text-decoration: none; font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 3px solid var(--ink); border-radius: 10px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 15px/1 var(--f-mono); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; text-align: center;
  box-shadow: 4px 4px 0 var(--ink), 4px 4px 0 2px rgba(212, 255, 58, .35); transition: transform .15s var(--ease), opacity .2s; }
.btn:hover { transform: translate(-1px, -1px); }
.btn:active { transform: translate(3px, 3px); }
.btn:disabled, .btn.wait { opacity: .55; pointer-events: none; }
.btn.ghost { background: var(--bg2); color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.robin { background: var(--robin); color: #1a0700; box-shadow: 4px 4px 0 var(--ink), 4px 4px 0 2px rgba(255, 106, 43, .35); }
.btn.small { padding: 9px 13px; font-size: 12.5px; box-shadow: 3px 3px 0 var(--ink); }
.btn.big { width: 100%; padding: 18px 20px; font-size: 16px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.offscreen *, .offscreen { animation-play-state: paused !important; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 11px; border: 2px solid var(--accent); border-radius: 8px; font: 700 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: .01em; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 34px 0 44px; margin-top: 60px; border-top: 2px solid var(--line); color: var(--mute); font: 700 13px/1.4 var(--f-mono); }
.foot a { text-decoration: none; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } }

/* rank colours */
.r-pickpocket { --rk: #aab3a6; } .r-bandit { --rk: #7ee05a; } .r-archer { --rk: #4cc9f0; } .r-merry { --rk: #c98bff; } .r-legend { --rk: #ffd24a; }
.rank { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--rk, var(--mute)); color: #070a06; font: 700 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }