@font-face { font-family: Oswald; src: url(/Oswald.ttf); font-weight: 200 700; }
:root { --bg: #0b0f14; --panel: #121820; --card: #18202a; --line: #263241; --text: #dfe6ee; --dim: #8a98a8;
  --accent: #ff8a1f; --accent2: #ffb35c; --danger: #ff5a4f; --ok: #4fd18b; --discord: #5865f2; --diamond: #5fd3ff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #2a3644 0%, #151c25 45%, #0b0f14 100%) fixed; }
a { color: var(--accent2); }
h1, h2, h3 { font-family: Oswald, sans-serif; font-weight: 600; letter-spacing: .04em; margin: 0; }

/* nav */
.nav { display: flex; align-items: center; gap: 22px; padding: 14px 24px; border-bottom: 1px solid #ffffff10; }
.nav .brand { font: 600 24px Oswald, sans-serif; letter-spacing: .04em; color: var(--text); text-decoration: none; margin-right: auto; }
.nav .brand b, .logo b { color: var(--accent); font-weight: 600; }
.nav a.link { color: var(--dim); text-decoration: none; font: 500 16px Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.nav a.link:hover, .nav a.link.on { color: var(--text); }

/* landing */
.hero { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
.logo { font: 600 clamp(56px, 12vw, 120px)/1 Oswald, sans-serif; letter-spacing: .04em; margin: 0; }
.tag { margin: 10px 0 40px; color: var(--dim); font: 400 clamp(16px, 3vw, 20px) Oswald, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 12px; justify-content: center; padding: 14px 26px; border-radius: 8px; cursor: pointer;
  font: 600 18px Oswald, sans-serif; letter-spacing: .08em; text-decoration: none; color: #fff; border: 1px solid transparent; background: var(--card); transition: transform .12s, filter .12s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn svg { width: 24px; height: 24px; fill: currentColor; }
.hero .btn { min-width: 240px; padding: 16px 28px; font-size: 20px; }
.discord { background: var(--discord); }
.primary { background: linear-gradient(135deg, #ff9a2e, #e8620c); color: #1a0d00; }
.ghost { background: transparent; border-color: var(--line); color: var(--dim); }
.soon { border-color: var(--line); color: var(--dim); cursor: default; }
.soon:hover { transform: none; filter: none; }
.soon small { font: 400 13px system-ui, sans-serif; letter-spacing: 0; }
footer { padding: 24px; text-align: center; color: #5a6878; font-size: 13px; }

/* pages */
.page { max-width: 1000px; margin: 0 auto; padding: 32px 20px 48px; }
.panel { background: #121820e6; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.narrow { max-width: 420px; margin: 40px auto; }
label { display: block; margin: 14px 0 6px; color: var(--dim); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
input:focus { outline: none; border-color: var(--accent); }
.full { width: 100%; margin-top: 20px; }
.msg { min-height: 1.5em; margin-top: 12px; font-size: 14px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
.hint { color: var(--dim); font-size: 14px; }

.head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 24px; }
.head h1 { font-size: 40px; }
.head .uid { color: var(--dim); }
.head .grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font: 500 17px Oswald, sans-serif; letter-spacing: .04em; }
.chip .d { color: var(--diamond); }
.chip .g { color: #ffd34f; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.stat b { display: block; font: 600 28px Oswald, sans-serif; }
.stat span { color: var(--dim); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
h2 { font-size: 24px; margin: 8px 0 14px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.skin { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.skin img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0e141b; }
.skin div { padding: 10px 12px; }
.skin b { display: block; font: 600 17px Oswald, sans-serif; letter-spacing: .03em; }
.skin span { color: var(--dim); font-size: 13px; }
.skin .eq { color: var(--ok); }
.empty { color: var(--dim); padding: 18px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }

/* shop */
.banner { padding: 12px 16px; border-radius: 10px; background: #2a1d0e; border: 1px solid #5a3510; color: var(--accent2); margin-bottom: 22px; font-size: 15px; }
.gift { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 24px; }
.gift > div { flex: 1; min-width: 220px; }
.gift label { margin-top: 0; }
.who { margin-top: 6px; font-size: 14px; min-height: 1.4em; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pack { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.pack .gem { font-size: 40px; line-height: 1; color: var(--diamond); }
.pack b { font: 600 30px Oswald, sans-serif; }
.pack .bonus { color: var(--ok); font-size: 14px; min-height: 1.3em; }
.pack .btn { margin-top: auto; }