/* Happy Loong X — neon cyber-dragon / arcade-glitch aesthetic */
:root {
  --void: #050017;
  --void-2: #0a0226;
  --neon-cyan: #00ffd5;
  --neon-magenta: #ff2bd2;
  --neon-violet: #8a2be2;
  --neon-acid: #d4ff00;
  --scale: rgba(0, 255, 213, 0.12);
  --ink: #ffffff;
  --ink-soft: rgba(255,255,255,0.72);
  --display: 'Orbitron', system-ui, sans-serif;
  --accent: 'Audiowide', system-ui, sans-serif;
  --body: 'Orbitron', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--void); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body {
  background:
    radial-gradient(circle at 90% 10%, rgba(138,43,226,0.30) 0, transparent 35%),
    radial-gradient(circle at 10% 90%, rgba(0,255,213,0.18) 0, transparent 35%),
    var(--void);
  background-attachment: fixed;
}
a { color: var(--neon-cyan); text-decoration: none; font-weight: 500; }
a:hover { color: var(--neon-magenta); text-shadow: 0 0 12px var(--neon-magenta); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }

/* Top */
header.hl-top { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; border-bottom: 1px solid rgba(0,255,213,0.18); gap: 16px; flex-wrap: wrap; }
.hl-mark { display: flex; align-items: center; gap: 14px; }
.hl-scale {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--accent); font-size: 22px; color: var(--void); font-weight: 700;
}
.hl-brand-name { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.hl-brand-name .x { color: var(--neon-magenta); }
.hl-brand-name .sub { display: block; font-family: var(--display); font-weight: 400; font-size: 10px; letter-spacing: 0.32em; color: var(--ink-soft); margin-top: 4px; }
nav.hl-nav a { margin-left: 28px; font-family: var(--display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
nav.hl-nav a:hover { color: var(--neon-cyan); }

/* Hero — glitched dragon */
section.hl-hero { padding: 96px 0 64px; text-align: center; position: relative; }
.hl-hero .eyebrow { font-family: var(--accent); font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--neon-acid); margin-bottom: 24px; }
.hl-hero h1 {
  font-family: var(--accent);
  font-size: clamp(64px, 11vw, 156px);
  font-weight: 400;
  line-height: 0.92;
  margin: 0 0 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow:
    4px 0 0 var(--neon-magenta),
   -4px 0 0 var(--neon-cyan),
    0 0 40px rgba(255,43,210,0.45);
}
.hl-hero h1 .x { color: var(--neon-acid); text-shadow: 4px 0 0 var(--neon-magenta), -4px 0 0 var(--neon-cyan); }
.hl-hero p.lead { font-size: 18px; max-width: 540px; margin: 0 auto; color: var(--ink-soft); }
.hl-hero .scan { margin-top: 40px; display: inline-flex; gap: 24px; padding: 14px 24px; border: 1px solid var(--neon-violet); background: rgba(138,43,226,0.08); font-family: var(--display); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--neon-cyan); flex-wrap: wrap; justify-content: center; }
.hl-hero .scan b { color: var(--ink); font-weight: 500; margin-left: 6px; }

/* Sections */
section.hl-section { padding: 80px 0; position: relative; }
.hl-eyebrow { font-family: var(--accent); font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--neon-magenta); margin-bottom: 12px; }
section.hl-section h2 { font-family: var(--accent); font-size: clamp(36px, 5.5vw, 64px); font-weight: 400; margin: 0 0 24px; line-height: 1.1; color: var(--ink); text-transform: uppercase; }
section.hl-section h2 em { font-style: normal; color: var(--neon-cyan); }
section.hl-section p.lead { font-size: 17px; color: var(--ink-soft); max-width: 60ch; }

/* Games — scale-card grid */
.scale-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 820px) { .scale-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scale-grid { grid-template-columns: 1fr; } }
.scale {
  background: linear-gradient(135deg, rgba(138,43,226,0.18), rgba(0,255,213,0.06));
  border: 1px solid rgba(0,255,213,0.28);
  padding: 22px 20px;
  position: relative;
  transition: all .15s ease;
}
.scale::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan); }
.scale::after  { content: ""; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-bottom: 2px solid var(--neon-magenta); border-right: 2px solid var(--neon-magenta); }
.scale:hover { transform: translateY(-3px); border-color: var(--neon-magenta); box-shadow: 0 12px 32px rgba(255,43,210,0.18); }
.scale .id { font-family: var(--accent); font-size: 11px; letter-spacing: 0.28em; color: var(--neon-acid); margin-bottom: 8px; }
.scale h3 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 4px; color: var(--ink); text-transform: uppercase; }
.scale .alt { font-family: var(--display); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-soft); text-transform: uppercase; }

/* Manifesto */
.hl-manifesto { border: 1px solid var(--neon-magenta); background: rgba(255,43,210,0.06); padding: 56px; margin: 32px 0; position: relative; }
.hl-manifesto::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(0,255,213,0.18); pointer-events: none; }
.hl-manifesto h2 { color: var(--ink); }
.hl-manifesto h2 em { color: var(--neon-acid); }
.hl-manifesto p { font-size: 18px; color: var(--ink-soft); max-width: 56ch; }

/* Contact */
.hl-contact { text-align: center; padding: 72px 32px; border-top: 1px solid rgba(0,255,213,0.18); border-bottom: 1px solid rgba(255,43,210,0.18); margin-top: 24px; }
.hl-contact .eyebrow { font-family: var(--accent); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--neon-acid); margin-bottom: 12px; }
.hl-contact h3 { font-family: var(--accent); font-size: 40px; margin: 0 0 24px; color: var(--ink); text-transform: uppercase; }
.hl-contact a.mail { font-family: var(--display); font-size: 18px; color: var(--neon-cyan); border-bottom: 1px solid var(--neon-magenta); padding-bottom: 6px; letter-spacing: 0.08em; }

footer.hl-foot { padding: 48px 0; text-align: center; color: var(--ink-soft); font-family: var(--display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; }
footer.hl-foot a { color: var(--neon-cyan); margin: 0 12px; }

/* Legal */
.legal-page { padding: 48px 0 96px; }
.legal-page .legal-eyebrow { font-family: var(--accent); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--neon-magenta); margin-bottom: 12px; }
.legal-page h1 { font-family: var(--accent); font-size: clamp(40px, 7vw, 76px); font-weight: 400; margin: 0 0 12px; line-height: 1; color: var(--ink); text-transform: uppercase; text-shadow: 3px 0 0 var(--neon-magenta), -3px 0 0 var(--neon-cyan); }
.legal-page .back-link { font-family: var(--display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); }
.legal-page .legal-body { font-size: 15px; line-height: 1.78; color: var(--ink-soft); margin-top: 40px; border-top: 1px solid var(--neon-violet); padding-top: 32px; max-width: 70ch; }
.legal-page .legal-body h2, .legal-page .legal-body h3, .legal-page .legal-body h4 { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: 0.04em; margin: 2em 0 0.6em; text-transform: uppercase; }
.legal-page .legal-body h2 { font-size: 20px; color: var(--neon-magenta); }
.legal-page .legal-body h3 { font-size: 17px; color: var(--neon-cyan); }
.legal-page .legal-body h4 { font-size: 14px; color: var(--neon-acid); }
.legal-page .legal-body p { margin: 0 0 1em; }
.legal-page .legal-body strong { color: var(--ink); }
.legal-page .legal-body a { border-bottom: 1px solid var(--neon-magenta); }
.legal-page .legal-body ul, .legal-page .legal-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.legal-page .legal-body li { margin-bottom: 0.4em; }
.legal-page .legal-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 13px; }
.legal-page .legal-body th, .legal-page .legal-body td { border: 1px solid rgba(138,43,226,0.4); padding: 10px 12px; vertical-align: top; text-align: left; }
.legal-page .legal-body th { background: rgba(138,43,226,0.18); font-family: var(--accent); font-weight: 400; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }