/* gate — the login screens, same urban-noir look as lampa (fonts and palette from there) */
:root {
  --bg: #111316;
  --amber: #f2b25c;
  --muted: #8a8378;
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-italic: "Instrument Serif", "Newsreader", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hero: url("/static/urban-noir.webp");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: #e3dacb;
  font: 400 1.05rem/1.6 var(--f-display);
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
::selection { background: var(--amber); color: #15120e; }
a { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

body.gate { display: grid; min-height: 100svh; place-items: end center; padding: 16px; }
@media (min-width: 720px) { body.gate { place-items: center start; padding: 0 0 0 8vw; } }
.gate-bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .45) 55%, rgba(10, 11, 13, .2) 100%),
    linear-gradient(0deg, rgba(10, 11, 13, .85) 0%, transparent 55%),
    var(--hero) center 40% / cover no-repeat;
}
.gate-card {
  width: min(460px, 100%); padding: 30px 26px 26px;
  background: rgba(17, 19, 22, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; box-shadow: 0 30px 80px -30px #000;
}
.gate-icon { display: block; border-radius: 50%; margin-bottom: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 28px -6px rgba(242, 178, 92, .7); }
.eyebrow {
  margin: 0 0 12px; font: 600 .72rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); text-shadow: 0 0 14px rgba(242, 178, 92, .45);
}
.gate-title { margin: 0 0 14px; font: 800 clamp(2.2rem, 9vw, 3.3rem)/.98 var(--f-display); letter-spacing: -.045em; color: #f6eee1; }
.gate-title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--amber); text-shadow: 0 0 14px rgba(242, 178, 92, .45); }
.h1-slash { color: var(--muted); font-weight: 300; }
.gate-lead { font: 400 1.08rem/1.55 var(--f-display); color: #d9cfbf; margin: 0 0 22px; }
.gate-err { color: #e5726a; font: 500 .95rem var(--f-display); }
.gate-fine { font: 400 .78rem/1.5 var(--f-mono); color: var(--muted); margin: 16px 0 0; }
.gate-id { display: block; margin: 8px 0 18px; padding: 10px 12px; border-radius: 10px; background: #0c0e11; color: var(--amber); font: 600 .95rem var(--f-mono); user-select: all; overflow-wrap: anywhere; }

.discord-btn, .ghost-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 15px 18px; border-radius: 14px; text-decoration: none;
  font: 700 1.02rem var(--f-display); transition: transform .15s, box-shadow .2s, color .2s, border-color .2s;
}
.discord-btn { background: #5865f2; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 10px 34px -10px rgba(88, 101, 242, .9); }
.discord-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 40px -8px rgba(88, 101, 242, 1); }
.ghost-btn { border: 1px solid rgba(255,255,255,.14); color: #e3dacb; margin-top: 8px; }
.ghost-btn:hover { border-color: var(--amber); color: var(--amber); }

.svc-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.svc-list a, .svc-list span:first-child {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.1); background: rgba(12, 14, 17, .55); color: #e3dacb;
}
.svc-list a:hover { border-color: var(--amber); }
.svc-list .is-locked { opacity: .5; }
.svc-name { font: 700 1.05rem var(--f-display); color: #f6eee1; }
.svc-name em { font-family: var(--f-italic); font-weight: 400; color: var(--amber); }
.svc-desc { font-size: .9rem; color: #b7ae9f; }
.svc-meta { font: 500 .72rem var(--f-mono); color: var(--muted); letter-spacing: .04em; }

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