/* Shared by nethryl.com (landing) and play.nethryl.com (holding). Keep both copies in sync. */
@font-face { font-family: "Spectral"; src: url("/fonts/Spectral-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #110f18;
  --ink: #f6ead2;
  --dim: #d6c8c0;
  --violet: #a77ae6;
  --violet-hi: #d9c2ff;
  --copper: #c99a63;
  --glass: rgb(26 20 38 / .62);
  --line: rgb(217 194 255 / .18);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-weight: 300;
  background: var(--night);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 60% 55% at 76% 32%, rgb(86 54 134 / .42), transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 88%, rgb(120 70 40 / .28), transparent 70%),
    var(--night);
}
main { flex: 1; width: min(100%, 76rem); margin-inline: auto; padding-inline: clamp(1.25rem, 6vw, 5rem); }

/* Hero */
.hero {
  min-height: min(88svh, 48rem);
  padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 6vh, 4rem);
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.sigil { display: block; width: 62px; height: 62px; filter: drop-shadow(0 0 18px rgb(201 154 99 / .35)); }
.eyebrow {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--violet-hi);
}
h1 {
  margin: .15em 0 .2em;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: .95;
  font-weight: 300;
  letter-spacing: -.01em;
  text-shadow: 0 0 42px rgb(167 122 230 / .28);
}
p { margin: 0; }
.lede { max-width: 30ch; color: var(--dim); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; text-wrap: pretty; }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .7rem 1.7rem;
  border: 1px solid var(--violet-hi);
  border-radius: 999px;
  background: linear-gradient(180deg, #6a43a3, #4c2f78);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .2), 0 8px 28px rgb(124 77 196 / .35);
  color: #fff6ea;
  text-decoration: none;
  font-size: 1.1rem;
  letter-spacing: .02em;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.button:hover { background: linear-gradient(180deg, #7c52bb, #5b3990); box-shadow: 0 0 0 1px rgb(0 0 0 / .2), 0 10px 34px rgb(124 77 196 / .5); }
.button:active { transform: translateY(1px); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.status { display: inline-flex; align-items: center; gap: .55rem; font-size: 1rem; color: var(--dim); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 .25rem rgb(201 154 99 / .18); }

/* Booster packs */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); perspective: 1200px; }
.pack { margin: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pack:first-child { transform: rotate(-3deg) translateY(.6rem); }
.pack:last-child { transform: rotate(3deg) translateY(-.6rem); }
.pack:hover { transform: rotate(0) translateY(-.6rem); }
.pack img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .7rem;
  border: 1px solid rgb(255 236 210 / .12);
  box-shadow: 0 24px 60px rgb(5 3 10 / .7), 0 0 60px rgb(167 122 230 / .14);
}
.pack figcaption {
  padding-top: .9rem;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e5d5bc;
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.features article {
  padding: 1.6rem 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.features svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--violet-hi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.features h2 { margin: .7rem 0 .45rem; font-weight: 300; font-size: 1.6rem; }
.features p { color: var(--dim); font-size: 1.08rem; line-height: 1.55; text-wrap: pretty; }

/* Footer */
footer {
  width: min(calc(100% - 2 * clamp(1.25rem, 6vw, 5rem)), 66rem);
  margin-inline: auto;
  padding: 1.5rem 0 2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 1rem;
}
footer span { flex: 1; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; }
footer a { color: var(--violet-hi); text-underline-offset: .25em; }
footer a:hover { color: var(--ink); }

/* Holding page (play.nethryl.com) */
.holding { flex: 1; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: 2rem 1.25rem; }
.holding h1 { font-size: clamp(3rem, 8vw, 5.5rem); }
.holding p:not(.eyebrow) { max-width: 30ch; margin: 0 auto 1.25rem; color: var(--dim); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .packs { max-width: 30rem; }
  .pack figcaption { letter-spacing: .14em; }
  .features { grid-template-columns: 1fr; max-width: 36rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pack, .button { transition: none; }
  .pack:first-child, .pack:last-child, .pack:hover { transform: none; }
}