/* MELDO site — shared styles. Tokens echo the game's own palette:
   deep teal-black water, luminous glows, light Avenir type. */
:root {
  --ink: #ecf7f5;
  --ink-dim: rgba(236, 247, 245, 0.82);
  --ink-faint: rgba(236, 247, 245, 0.55);
  --line: rgba(236, 247, 245, 0.12);
  --glass: rgba(8, 24, 28, 0.42);
  --bg0: hsl(187 58% 8%);
  --bg1: hsl(192 62% 3%);
  --g0: hsl(168 55% 26%);
  --g1: hsl(200 65% 22%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Avenir Next", "Avenir", "Futura", -apple-system, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg0), var(--bg1)) fixed;
  background-color: #04161a;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: rgba(236, 247, 245, 0.22); }

/* ---------- silk: slow sheen ribbons + grain, behind everything ---------- */
.silk { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.silk i {
  position: absolute;
  left: -30%; width: 160%; height: 55vmax;
  border-radius: 50%;
  filter: blur(54px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}
.silk i:nth-child(1) {
  top: -18vmax;
  background: linear-gradient(100deg, transparent 20%, var(--g0) 48%, transparent 72%);
  animation: silkA 26s ease-in-out infinite alternate;
}
.silk i:nth-child(2) {
  top: 18vmax;
  background: linear-gradient(80deg, transparent 18%, var(--g1) 52%, transparent 80%);
  animation: silkB 34s ease-in-out infinite alternate;
  opacity: 0.5;
}
.silk i:nth-child(3) {
  top: 46vmax;
  background: linear-gradient(115deg, transparent 25%, var(--g0) 55%, transparent 78%);
  animation: silkC 41s ease-in-out infinite alternate;
  opacity: 0.38;
}
@keyframes silkA { from { transform: translate3d(-6%, 0, 0) rotate(-7deg) scaleY(0.9); } to { transform: translate3d(7%, 6vmax, 0) rotate(5deg) scaleY(1.15); } }
@keyframes silkB { from { transform: translate3d(8%, 2vmax, 0) rotate(6deg) scaleY(1.1); } to { transform: translate3d(-9%, -5vmax, 0) rotate(-6deg) scaleY(0.85); } }
@keyframes silkC { from { transform: translate3d(-4%, 0, 0) rotate(-4deg) scaleY(1); } to { transform: translate3d(6%, -6vmax, 0) rotate(8deg) scaleY(1.2); } }

.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%);
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px max(24px, 4vw);
  background: linear-gradient(180deg, rgba(2, 10, 12, 0.55), transparent);
}
.nav .mark {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  font-weight: 300; letter-spacing: 0.42em; font-size: 15px; padding-left: 0.1em;
}
.nav .mark img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 18px rgba(120, 230, 220, 0.25); }
.nav ul { display: flex; gap: 28px; list-style: none; }
.nav ul a {
  text-decoration: none; font-size: 13px; letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--ink-dim); transition: color 0.5s var(--ease);
}
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); }

/* ---------- footer ---------- */
.foot {
  position: relative; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: center; align-items: center;
  padding: 44px 24px 56px; color: var(--ink-faint); font-size: 13px; letter-spacing: 0.1em;
}
.foot a { text-decoration: none; transition: color 0.5s var(--ease); }
.foot a:hover { color: var(--ink); }

/* ---------- reveal on scroll ---------- */
.js .rv {
  opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js .rv.in { opacity: 1; transform: none; filter: none; }

/* ---------- legal / support pages ---------- */
.doc { position: relative; z-index: 5; max-width: 720px; margin: 0 auto; padding: 150px 24px 40px; }
.doc .eyebrow { font-size: 12px; letter-spacing: 0.34em; color: var(--ink-faint); text-transform: lowercase; }
.doc h1 { font-weight: 200; font-size: clamp(34px, 6vw, 54px); letter-spacing: 0.04em; line-height: 1.15; margin: 14px 0 10px; }
.doc .lede { color: var(--ink-dim); font-size: 18px; font-weight: 300; margin-bottom: 44px; }
.doc h2 { font-weight: 400; font-size: 20px; letter-spacing: 0.04em; margin: 48px 0 12px; }
.doc p, .doc li { color: var(--ink-dim); font-weight: 300; font-size: 16.5px; margin-bottom: 14px; }
.doc ul { padding-left: 1.2em; margin-bottom: 14px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--ink); text-decoration-color: var(--ink-faint); text-underline-offset: 3px; transition: text-decoration-color 0.4s; }
.doc a:hover { text-decoration-color: var(--ink); }
.doc strong { color: var(--ink); font-weight: 500; }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-dim); font-weight: 300; }
.doc th { color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: lowercase; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-size: 17.5px; font-weight: 400; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-dim); border-bottom: 1.5px solid var(--ink-dim);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.5s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding: 0 0 8px; animation: faqIn 0.7s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.card {
  margin-top: 44px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.card p { margin-bottom: 8px; }

@media (max-width: 560px) {
  .nav ul { gap: 18px; }
  .nav .mark span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .silk i { animation: none; }
  .js .rv { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}