/* ==========================================================================
   Elixa site — design system (plain HTML/CSS, no build step)
   Alchemy/apothecary premium: Cinzel display + Inter body, gold + violet,
   the 7 element colours as accents, dark layered depth.
   ========================================================================== */
:root {
  /* palette */
  --gold: #f2d06b;
  --gold-dim: #b8934a;
  --violet: #9d7bd8;
  --pale: #ece7f5;
  --ink: rgba(236,231,245,.80);
  --mut: #9a95a8;
  --bg0: #0b0914;   /* deep violet-black */
  --bg1: #12101f;   /* lifted panel bg */
  --line: rgba(242,208,107,.14);  /* faint gold hairline */
  --link: #c9a6ef;
  /* 7 elements */
  --fire:#E6194B; --water:#1E50FF; --earth:#A0703C; --light:#FFE119;
  --darkness:#6A1B9A; --air:#42D4F4; --spirit:#FF4FC3;
  /* spacing scale (8px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.7;
  color: var(--ink);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--gold); }
strong { color: #fff; }

/* keyboard focus — visible gold ring (13:1 on bg0) */
a:focus-visible, .btn-gold:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px;
}
/* skip-to-content */
.skip { position:absolute; left:-9999px; }
.skip:focus { position:fixed; left:12px; top:12px; z-index:100;
  background:var(--gold); color:#1a1206; padding:10px 16px; border-radius:10px;
  font-family:Cinzel,serif; font-weight:600; }

/* ---- layout ---- */
.section { position: relative; padding: clamp(72px,10vw,128px) 0; }
.inner { max-width: 1200px; margin: 0 auto; padding-inline: clamp(24px,5vw,64px); }
.prose { max-width: 680px; }
.center { text-align: center; }
.hairline { height:1px; border:0; margin:0;
  background: linear-gradient(90deg, transparent, rgba(242,208,107,.35), transparent); }

/* ---- type ---- */
.eyebrow { font: 600 13px/1 Inter, sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color: var(--violet); margin: 0 0 var(--s4); }
h2.title { font-family: Cinzel, serif; font-weight: 600; letter-spacing:.04em;
  color: var(--gold); font-size: clamp(30px,4vw,46px); margin: 0 0 var(--s5); line-height:1.15; }
h3 { font-family: Cinzel, serif; font-weight: 600; color: var(--pale);
  font-size: 21px; margin: 0 0 var(--s3); letter-spacing:.02em; }
.lead { font-size: clamp(18px,2.2vw,21px); color: var(--pale); line-height:1.6; }
.mut { color: var(--mut); }

/* ---- sticky header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(11,9,20,.72);
  border-bottom: 1px solid var(--line);
}
.site-header .inner { display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--s3); padding-bottom: var(--s3); }
.wordmark { display:flex; align-items:center; gap: var(--s3); font-family:Cinzel,serif;
  font-weight:700; letter-spacing:.10em; color:var(--gold); font-size:20px; }
.wordmark img { width:34px; height:34px; border-radius:26%; border:1px solid rgba(242,208,107,.4); }
.site-nav { display:flex; gap: var(--s4); align-items:center; font-size:14px; flex-wrap:wrap; justify-content:flex-end; }
.site-nav a { color: var(--ink); letter-spacing:.03em; display:inline-flex; align-items:center;
  min-height:44px; padding:0 6px; }
.site-nav a:hover { color: var(--gold); }
.btn-gold {
  font-family:Cinzel,serif; letter-spacing:.04em; font-weight:600;
  display:inline-block; padding:11px 22px; border-radius:12px;
  color:#1a1206; background: linear-gradient(180deg,#f6dd8a,#e0b552);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 22px -8px rgba(242,208,107,.6), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.btn-gold:hover { color:#1a1206; transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(242,208,107,.7), inset 0 1px 0 rgba(255,255,255,.5); }
/* mobile: keep all nav links reachable (wrap + shrink), never hide-with-no-alternative */
@media (max-width:640px){
  .site-header .inner { flex-wrap:wrap; gap:var(--s2); justify-content:center; }
  .site-nav { gap:var(--s2); font-size:13px; width:100%; }
}

/* ---- hero (full-bleed) ---- */
.hero { position: relative; min-height: clamp(560px,86vh,780px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; padding: var(--s9) var(--s5); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg::after { content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 88% at 50% 44%, transparent 14%, rgba(11,9,20,.74)),
    linear-gradient(180deg, rgba(11,9,20,.5) 0%, rgba(11,9,20,.22) 24%, rgba(11,9,20,.74) 80%, var(--bg0) 100%); }
.hero-content { position:relative; z-index:1; max-width:820px; padding: clamp(16px,4vw,40px);
  background: radial-gradient(120% 120% at 50% 46%, rgba(8,6,16,.55), transparent 72%); }
.hero .brandmark { font-family:Cinzel,serif; font-weight:700; color:var(--gold);
  font-size: clamp(56px,10vw,132px); letter-spacing:.12em; margin:0; line-height:1;
  text-shadow: 0 0 44px rgba(242,208,107,.35), 0 4px 30px rgba(0,0,0,.6); }
.hero .kicker { font-family:Cinzel,serif; font-weight:400; color:var(--violet);
  letter-spacing:.36em; text-transform:uppercase; font-size:clamp(13px,2vw,19px);
  margin: var(--s4) 0 0; display:flex; align-items:center; gap:var(--s4); justify-content:center; }
.hero .kicker::before, .hero .kicker::after { content:""; height:1px; width:clamp(24px,8vw,90px);
  background: linear-gradient(90deg, transparent, var(--gold)); }
.hero .kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero .tagline { margin: var(--s6) auto 0; max-width:600px; color:var(--pale);
  font-size: clamp(17px,2.4vw,22px); text-shadow:0 2px 14px rgba(0,0,0,.8); }
.hero .cta-row { margin-top: var(--s7); }

/* ---- store / coming-soon buttons ---- */
.store-row { display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center; }
.store-btn { display:flex; align-items:center; gap:var(--s3); text-align:left;
  padding:12px 20px; border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--pale); transition:.2s ease-out; min-width:210px; }
.store-btn:hover { color:var(--pale); border-color:rgba(242,208,107,.5); transform:translateY(-3px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.8); }
.store-btn .ico { font-size:26px; line-height:1; }
.store-btn .l1 { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.store-btn .l2 { font-family:Cinzel,serif; font-weight:600; font-size:17px; color:var(--pale); }
/* inert "coming soon" pills — honest: not tappable, not a live badge */
.store-btn.soon { opacity:.62; cursor:default; }
.store-btn.soon:hover { transform:none; border-color:var(--line); box-shadow:none; }
.store-btn.soon .ico { filter:grayscale(1); opacity:.7; }
.store-btn.soon .l1 { color:var(--gold); font-weight:600; }
.store-btn.soon .l2 { font-size:14px; color:var(--mut); font-family:Inter,sans-serif; font-weight:500; }

/* ---- feature grid ---- */
.grid { display:grid; gap:var(--s5); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:16px; padding:var(--s6);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px -20px rgba(0,0,0,.6);
  transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.card:hover { transform: translateY(-4px); border-color: rgba(242,208,107,.35); }
.card .ico { font-size:30px; margin-bottom:var(--s3); }

/* ---- elements showcase (centred flex so the 7th never orphans left) ---- */
.elements { display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; }
.el { flex:0 1 148px; }
.el {
  --c: var(--gold);
  text-align:center; padding:var(--s5) var(--s3); border-radius:16px;
  background: var(--bg1); border:1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.el:hover { transform: translateY(-4px);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--c) 60%, transparent);
  border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.el img { width:72px; height:72px; object-fit:contain; margin:0 auto var(--s3);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c) 45%, transparent)); }
.el .name { font-family:Cinzel,serif; font-weight:600; color:var(--pale); font-size:16px; letter-spacing:.04em; }

/* ---- gameplay gallery (device frames) ---- */
.gallery { display:flex; gap:var(--s6); flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.phone { width:260px; max-width:70vw; border-radius:34px; padding:10px;
  background: linear-gradient(160deg,#2a2438,#14121c);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.phone img { border-radius:24px; width:100%; }
.phone .cap { text-align:center; color:var(--mut); font-size:13px; padding:var(--s3) 0 var(--s1); }

/* ---- value / promise band ---- */
.band { background:
    radial-gradient(80% 120% at 50% 0%, rgba(157,123,216,.12), transparent 60%),
    linear-gradient(135deg,#1a1330,#0b0914); }
.promise-list { list-style:none; padding:0; margin:var(--s6) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; }
.promise-list li { flex:0 1 240px; position:relative; text-align:left;
  padding:var(--s3) var(--s3) var(--s3) var(--s6);
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; }
.promise-list li::before { content:"\2726"; position:absolute; left:var(--s3); top:14px; color:var(--gold); }

/* ---- footer ---- */
.site-footer { border-top:1px solid var(--line); padding:var(--s8) 0 var(--s7); background:var(--bg0); }
.site-footer .inner { display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; align-items:center; }
.site-footer .fnav { display:flex; gap:var(--s5); flex-wrap:wrap; font-size:14px; }
.site-footer a { color:var(--mut); } .site-footer a:hover { color:var(--gold); }
.site-footer .fnav a { display:inline-flex; align-items:center; min-height:44px; }
.site-footer .copy { color:var(--mut); font-size:13px; }

/* ---- inner (legal) pages ---- */
.doc { max-width:760px; margin:0 auto; padding: var(--s8) clamp(24px,5vw,40px) var(--s9); }
.doc h1 { font-family:Cinzel,serif; font-weight:700; color:var(--gold); font-size:34px; margin:0 0 4px; }
.doc h2 { font-family:Cinzel,serif; font-weight:600; color:var(--gold); font-size:22px; margin:var(--s7) 0 var(--s3); }
.doc h3 { color:var(--pale); font-size:17px; margin:var(--s5) 0 var(--s2); }
.doc .updated { color:var(--mut); font-size:14px; margin:0 0 var(--s5); }
.doc .card { padding:var(--s5) var(--s6); margin:var(--s5) 0; }
.doc ul { padding-left:20px; } .doc li { margin:6px 0; }
.doc .check { padding-left:0; }
.doc .check li { list-style:none; position:relative; padding-left:28px; }
.doc .check li::before { content:"\2726"; color:var(--gold); position:absolute; left:0; }
.doc .back { display:inline-block; margin-bottom:var(--s4); font-size:14px; color:var(--mut); }
.doc .back:hover { color:var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
  .card:hover, .el:hover, .store-btn:hover, .btn-gold:hover { transform:none; }
}

/* language switcher */
.lang-switch { display:flex; gap:2px; align-items:center; font-size:13px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lang-switch a { padding:6px 10px; color:var(--mut); min-height:auto !important; }
.lang-switch a[aria-current="page"] { background:rgba(242,208,107,.14); color:var(--gold); }
.lang-switch a:hover { color:var(--gold); }