/* ==========================================================================
   Myst Hollows website
   The same look as the in-game Myst UIs: near-black with grain, thin antique
   gold hairlines, square edges, Cinzel small caps + Cormorant serif, flat
   muted colour. No gloss, no bright gradients, no glow halos.
   Layout follows a streamer-hub pattern: live pills, featured, live grid.
   ========================================================================== */

:root {
  --bg-0: #09080a;
  --bg-1: #110f12;
  --bg-2: #18151a;
  --line: rgba(190, 164, 112, .20);
  --line-2: rgba(190, 164, 112, .38);
  --line-3: rgba(190, 164, 112, .10);
  --gold: #b49a64;
  --gold-hi: #dccb9c;
  --gold-lo: #6a5733;
  --cream: #f1e6c8;
  --text: #d6cdb9;
  --muted: #8d8475;
  --dim: #6d6559;
  --ok: #8fb487;
  --bad: #c25a50;
  --blood: #9a3a33;
  --ink: #140f08;

  --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --card-bg: var(--grain), linear-gradient(180deg, #141215 0%, #0c0b0d 100%);

  --nav-h: 68px;
  color-scheme: dark; /* a deliberately dark site: native scrollbars and inputs match */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--grain), var(--bg-0);
  color: var(--text);
  font: 500 19px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; }

h1, h2, h3, .lede, .sec-sub, .empty-title { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: var(--gold-lo); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--cream); text-decoration-color: var(--gold); }

:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.ic-xs { width: .75em; height: .75em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 200; padding: 10px 16px; background: var(--gold); color: var(--ink); font: 600 12px/1 var(--caps); letter-spacing: .14em; text-decoration: none; }
.skip:focus { left: 16px; }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 40px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  font: 600 12.5px/1 var(--caps); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25));
  border: 1px solid var(--line-2); border-radius: 2px;
  transition: border-color .2s, background-color .2s, color .2s;
  cursor: pointer;
}
.btn:hover { color: var(--cream); border-color: var(--gold); background: linear-gradient(180deg, rgba(190, 164, 112, .10), rgba(0, 0, 0, .2)); }
.btn-gold, .btn-gold:hover { color: var(--ink); }
.btn-gold { background: var(--gold); border-color: var(--gold); }
.btn-gold:hover { background: #c6ad79; border-color: #c6ad79; }
.btn-sm { padding: 11px 18px; font-size: 11.5px; }

/* ---------- nav ---------- */
/* paints the phone's status-bar band so nothing scrolls into view above the sticky nav */
body::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg-0); }
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(9, 8, 10, .78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-3);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gold-hi); font: 600 15px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; }
.brand:hover { color: var(--cream); }
.brand img { width: 40px; height: 40px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0;
  color: var(--muted); text-decoration: none;
  font: 600 12px/1 var(--caps); letter-spacing: .16em; text-transform: uppercase;
}
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--cream); }
.nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold); }

.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle .bar { display: block; width: 22px; height: 1px; background: var(--gold-hi); transition: transform .25s, opacity .25s; }
.nav.open .nav-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 22px;
    background: var(--grain), #0d0b0e;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .6);
    display: none;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line-3); font-size: 13px; }
  .nav-links a.active::after { display: none; }
  .nav-links .btn { margin-top: 18px; padding: 15px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: min(94vh, 900px);
  margin-top: calc(-1 * var(--nav-h) - 1px);
  padding: calc(var(--nav-h) + 64px) 0 120px;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg-0); }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.8s ease;
  will-change: opacity, transform;
}
.hero-slide.on { opacity: 1; }
/* zoom stays on the outgoing slide while it fades, so it never snaps back mid-fade */
.hero-slide.zoom { animation: drift 16s linear forwards; }
@keyframes drift { from { transform: scale(1.09); } to { transform: scale(1.0); } }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* grain on top so the fade into the page below matches the body exactly */
  background:
    var(--grain),
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(9, 8, 10, .45) 0%, rgba(9, 8, 10, .82) 100%),
    linear-gradient(180deg, rgba(9, 8, 10, .7) 0%, rgba(9, 8, 10, .25) 30%, rgba(9, 8, 10, .45) 70%, var(--bg-0) 100%);
}
.hero-in { display: flex; flex-direction: column; align-items: center; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 36px; margin-bottom: 34px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px;
  background: rgba(9, 8, 10, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 2px;
  font: 600 12px/1 var(--caps); letter-spacing: .1em; color: var(--text); text-decoration: none;
}
.pill b { color: var(--cream); font-weight: 700; }
.pill .ic { color: var(--muted); }
.pill-dim { color: var(--muted); }
a.pill:hover { color: var(--cream); }
.pill-live { border-color: rgba(194, 90, 80, .5); }
.pill-live:hover { border-color: var(--bad); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-ok { background: var(--ok); }
.dot-live { background: #d4574b; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.hero-crest { width: clamp(124px, 14vw, 172px); height: auto; margin-bottom: 24px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .7)); }

.eyebrow { margin: 0 0 16px; font: 600 12px/1.3 var(--caps); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }

h1 {
  margin: 0 0 22px;
  font: 700 clamp(46px, 8.4vw, 104px)/.95 var(--caps); letter-spacing: .06em;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .65);
}
.lede { margin: 0 0 8px; font: italic 500 clamp(22px, 2.6vw, 30px)/1.3 var(--serif); color: var(--cream); }
.sub { margin: 0 0 38px; font-size: 19px; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.wl-note { max-width: 520px; margin: 22px 0 0; text-wrap: balance; font-size: 17.5px; font-style: italic; color: var(--text); opacity: .85; }

.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 1px; height: 52px; transform: translateX(-50%); overflow: hidden; background: linear-gradient(180deg, transparent, var(--line-2)); }
.scroll-cue span { position: absolute; left: 0; top: 0; width: 1px; height: 18px; background: var(--gold-hi); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(-20px); } 70%, 100% { transform: translateY(54px); } }

/* ---------- sections ---------- */
.section { padding: 112px 0; }
.section-alt { background: var(--grain), linear-gradient(180deg, #0d0b0e, #110e13 50%, #0d0b0e); border-block: 1px solid var(--line-3); }

.sec-head { text-align: center; margin-bottom: 52px; }
.title { margin: 0; font: 600 clamp(26px, 3.4vw, 40px)/1.15 var(--caps); letter-spacing: .1em; color: var(--gold-hi); }
.title-sm { font-size: clamp(21px, 2.5vw, 28px); }
.title-left { text-align: left; }
.orn {
  position: relative; width: 150px; height: 9px; margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-lo) 28%, var(--gold) 50%, var(--gold-lo) 72%, transparent) center / 100% 1px no-repeat;
}
.orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.sec-sub { max-width: 560px; margin: 18px auto 0; font-size: 20px; font-style: italic; color: var(--muted); }

/* ---------- streams ---------- */
#featured-block { margin-bottom: 96px; }
.grid-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 30px; }
.grid-featured.single { grid-template-columns: minmax(0, 640px); justify-content: center; }
.grid-streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; }

.scard {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .25s, transform .25s;
}
a.scard:hover { color: inherit; border-color: var(--line-2); transform: translateY(-3px); }
.scard.feat { border-color: var(--line-2); outline: 1px solid var(--line-3); outline-offset: 5px; }
a.scard.feat:hover { border-color: var(--gold); }

.thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0b0e url("../img/crest.png") center / 64px no-repeat; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.thumb img.ok { opacity: 1; }
a.scard:hover .thumb img { transform: scale(1.04); }
.thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 28%, transparent 62%, rgba(0, 0, 0, .6)); }

.tag, .chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; border-radius: 2px; }
.tag { top: 12px; padding: 6px 9px; font: 700 10.5px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; }
.tag-live { left: 12px; background: var(--blood); color: #f6e9e4; }
.tag-live i { width: 6px; height: 6px; border-radius: 50%; background: #f6e9e4; animation: pulse 1.8s ease-in-out infinite; }
.tag-plat { right: 12px; background: rgba(9, 8, 10, .74); border: 1px solid; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tag-twitch { color: #c4adff; border-color: rgba(145, 70, 255, .55); }
.tag-kick { color: #a3e086; border-color: rgba(83, 252, 24, .4); }
.chip { bottom: 12px; padding: 6px 9px; background: rgba(9, 8, 10, .76); font: 600 11px/1 var(--caps); letter-spacing: .06em; color: var(--text); }
.chip .ic { color: var(--muted); }
.chip-time { left: 12px; }
.chip-game { right: 12px; max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.sbody { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.feat-seal { margin: 0 0 -4px; font: 600 10.5px/1 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.stitle {
  margin: 0; min-height: 2.7em;
  font: 600 18px/1.35 var(--serif); color: var(--cream);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.feat .stitle { font-size: 21px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.sname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--caps); letter-spacing: .06em; color: var(--gold-hi); }
.feat .sname { font-size: 15.5px; }
.sview { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; font: 600 12px/1 var(--caps); color: var(--cream); }
.sview .ic { color: #d4574b; }

.skeleton { pointer-events: none; animation: breathe 1.6s ease-in-out infinite; }
.skeleton .thumb { background: #131114; }
.skeleton .thumb::after { display: none; }
.skeleton .sbody span { display: block; height: 14px; border-radius: 2px; background: #1a171c; }
.skeleton .sbody span:first-child { width: 80%; }
.skeleton .sbody span:last-child { width: 40%; margin-top: 10px; }
@keyframes breathe { 50% { opacity: .5; } }

.empty { padding: 56px 24px; text-align: center; background: var(--card-bg); border: 1px solid var(--line-3); border-radius: 3px; }
.empty-moon { width: 42px; height: 42px; margin-bottom: 14px; color: var(--gold); }
.empty-title { margin: 0 0 8px; font: 600 17px/1.4 var(--caps); letter-spacing: .06em; color: var(--cream); }
.empty-sub { margin: 0; font-style: italic; color: var(--muted); }

.offair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 34px; }
.offair-label { margin: 0; font: 600 11px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.offair-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.offair-list a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-3); border-radius: 2px; color: var(--muted); text-decoration: none; font: 600 12px/1 var(--caps); letter-spacing: .06em; }
.offair-list a:hover { color: var(--cream); border-color: var(--line); }

.band { padding: 64px 0; text-align: center; background: var(--grain), linear-gradient(180deg, #151217, #121014); border-block: 1px solid var(--line-3); }
.band p { max-width: 720px; margin: 14px auto 0; }
.band .title + p { margin-top: 20px; }
.band strong { color: var(--cream); font-weight: 700; }

/* ---------- bloodlines ---------- */
.races { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.race {
  --accent: var(--gold);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  transition: border-color .25s;
}
.race::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px; background: var(--accent); opacity: .65; }
.race:hover { border-color: var(--line-2); }
.race-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0d0b0e; }
.race-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.race:hover .race-img img { transform: scale(1.05); }
.race-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(12, 11, 13, .92)); }
.race-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; margin-top: -20px; padding: 0 16px 18px; }
.sigil {
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0 0 14px 4px;
  background: #0c0b0d; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  color: var(--accent); font-size: 16px; line-height: 1;
  transform: rotate(45deg);
}
.sigil span { transform: rotate(-45deg); }
.race h3 { margin: 0 0 8px; font: 600 16.5px/1.2 var(--caps); letter-spacing: .1em; color: var(--cream); }
.race .desc { margin: 0 0 14px; font-size: 16.5px; line-height: 1.45; }
.race dl { display: grid; gap: 9px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line-3); }
.race dt { margin-bottom: 3px; font: 600 10px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; }
.race .gift dt { color: var(--ok); }
.race .price dt { color: var(--bad); }
.race dd { margin: 0; font-size: 15.5px; line-height: 1.35; }

/* five across: give every description the same height so Gift / Price line up along the row */
@media (min-width: 1181px) {
  .race .desc { min-height: calc(1.45em * 4); }
  .race dl { margin-top: 0; }
}

@media (max-width: 1180px) {
  .races { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race { flex-direction: row; }
  .race-img { flex: none; width: 40%; aspect-ratio: auto; }
  .race-img::after { background: linear-gradient(90deg, transparent 55%, rgba(12, 11, 13, .9)); }
  .race-body { margin-top: 0; padding: 18px 18px 18px 14px; }
}
@media (max-width: 760px) {
  .races { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .race { flex-direction: column; }
  .race-img { width: 100%; aspect-ratio: 3 / 2; }
  .race-img::after { background: linear-gradient(180deg, transparent 45%, rgba(12, 11, 13, .92)); }
  .race-body { margin-top: -20px; padding: 0 16px 18px; }
}

/* ---------- houses ---------- */
.houses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.house {
  --accent: var(--gold);
  position: relative; overflow: hidden; text-align: center;
  padding: 34px 22px 30px;
  background: radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--card-bg);
  border: 1px solid var(--line); border-radius: 3px;
}
.house img { display: block; width: 150px; height: 150px; margin: 0 auto 18px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.house h3 { margin: 0; font: 600 18px/1.2 var(--caps); letter-spacing: .12em; color: var(--cream); }
.house h3::after { content: ''; display: block; width: 36px; height: 1px; margin: 14px auto 0; background: var(--accent); }
.house p { margin: 14px 0 0; font-size: 17.5px; line-height: 1.45; }
@media (max-width: 960px) { .houses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .houses { grid-template-columns: minmax(0, 1fr); } }

/* ---------- rules: home-page invitation ---------- */
.laws-teaser { text-align: center; }
.laws-teaser .sec-head { margin-bottom: 34px; }

/* ---------- rules page: the laws written on a parchment page set into the dark site ---------- */
.page-laws {
  --parch: #e4d9c1;
  --parch-edge: #d3c4a2;
  --ink: #2a2017;
  --ink-soft: #57472f;
  --red-ink: #7d2b22;
  --sepia: rgba(92, 68, 38, .28);
}
.page-head { padding: 72px 0 40px; text-align: center; }
.page-crest { display: block; width: 92px; height: auto; margin: 0 auto 22px; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .7)); }
.page-title { margin: 0; font: 700 clamp(34px, 5.6vw, 64px)/1.05 var(--caps); letter-spacing: .06em; color: var(--cream); text-shadow: none; }
.laws-updated { margin: 14px 0 0; font: 600 11px/1.4 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

.laws { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; padding-bottom: 110px; }
.laws.single { grid-template-columns: minmax(0, 900px); justify-content: center; }

.laws-toc { position: sticky; top: calc(var(--nav-h) + 24px); padding-top: 68px; }
.laws-toc summary { display: flex; align-items: center; gap: 8px; padding: 0 0 12px 14px; cursor: pointer; list-style: none; font: 600 11px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.laws-toc summary::-webkit-details-marker { display: none; }
.laws-toc summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.laws-toc details:not([open]) summary::after { transform: rotate(-45deg); }
.laws-toc summary span { color: var(--dim); letter-spacing: .1em; }
.laws-toc-list { position: relative; max-height: calc(100vh - var(--nav-h) - 140px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.laws-toc-list a { display: flex; gap: 10px; padding: 7px 8px 7px 14px; border-left: 1px solid var(--line-3); color: var(--muted); text-decoration: none; font: 600 10.5px/1.4 var(--caps); letter-spacing: .1em; text-transform: uppercase; }
.laws-toc-list a span { flex: none; width: 20px; color: var(--gold-lo); }
.laws-toc-list a:hover, .laws-toc-list a.active { color: var(--cream); border-left-color: var(--gold); }
.laws-toc-list a.active span { color: var(--gold); }
.laws-toc-list a.dim { opacity: .3; }

.laws-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.laws-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--grain), linear-gradient(180deg, #0f0e10, #151316); border: 1px solid var(--line); border-radius: 2px; color: var(--muted); }
.laws-search:focus-within { border-color: var(--gold); color: var(--gold-hi); }
.laws-search input { flex: 1; min-width: 0; height: 46px; padding: 0; background: none; border: 0; outline: 0; color: var(--cream); font: 500 18px/1 var(--serif); }
.laws-search input::placeholder { color: var(--dim); font-style: italic; }
.laws-count { margin: 0; font: 600 11px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }

.codex {
  position: relative;
  padding: clamp(30px, 6vw, 72px) clamp(22px, 6vw, 76px);
  background:
    var(--grain),
    radial-gradient(ellipse 85% 75% at 50% 40%, var(--parch) 55%, var(--parch-edge) 100%);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .65), inset 0 0 90px rgba(120, 90, 50, .22);
}
/* a printed frame line just inside the page edge */
.codex::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--sepia); pointer-events: none; }

/* one section per law; a small fleuron sits between them */
.codex-sec { scroll-margin-top: calc(var(--nav-h) + 20px); }
.codex-sec:not([hidden]) ~ .codex-sec:not([hidden])::before { content: '❦'; display: block; margin: 46px 0 34px; text-align: center; font-size: 18px; line-height: 1; color: var(--red-ink); opacity: .55; }
.codex-h { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 24px; text-align: center; font: 600 clamp(18px, 2.1vw, 23px)/1.3 var(--caps); letter-spacing: .12em; color: var(--ink); }
.codex-h::after { content: ''; width: 120px; height: 1px; margin-top: 8px; background: linear-gradient(90deg, transparent, var(--ink-soft), transparent); opacity: .55; }
.codex-hn { font-size: 13px; letter-spacing: .28em; color: var(--red-ink); text-decoration: none; }
.codex-hn:hover { color: var(--red-ink); text-decoration: underline; text-decoration-color: rgba(125, 43, 34, .45); }
.codex-hn.copied::after { content: ' · link copied'; letter-spacing: .14em; font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.codex-sec:target .codex-ht { color: var(--red-ink); }

.codex-body { font: 500 19.5px/1.6 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.cx-p { margin: 12px 0; }
.cx-sub { margin: 28px 0 10px; font: 600 14px/1.35 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cx-sub:first-child { margin-top: 0; }
.cx-hr { height: 1px; margin: 24px 12%; border: 0; background: linear-gradient(90deg, transparent, var(--sepia), transparent); }
.cx-list { margin: 10px 0; padding: 0; list-style: none; }
.cx-li { position: relative; margin: 8px 0; }
.cx-li::before { content: attr(data-g); position: absolute; top: .18em; color: var(--red-ink); font-size: .78em; line-height: 1.6; }
.cx-li.l1 { padding-left: 30px; }
.cx-li.l1::before { left: 4px; }
.cx-li.l2 { padding-left: 62px; }
.cx-li.l2::before { left: 36px; }
.cx-li.l3 { padding-left: 92px; }
.cx-li.l3::before { left: 68px; }
.codex-body strong { font-weight: 700; color: #1b130b; }
.codex-body a { color: var(--red-ink); text-decoration-color: rgba(125, 43, 34, .45); }
.codex-body a:hover { color: #5c1d16; }
.codex mark { background: rgba(196, 154, 82, .5); color: inherit; border-radius: 1px; padding: 0 1px; }
.codex-empty { margin: 0; text-align: center; font-style: italic; color: var(--ink-soft); }

.laws-foot { margin: 24px 0 0; text-align: center; font-size: 17px; font-style: italic; color: var(--muted); }

@media (max-width: 1100px) {
  .laws { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .laws-toc { position: static; padding: 0 0 18px; }
  .laws-toc details { border: 1px solid var(--line); border-radius: 2px; background: var(--grain), #0f0d10; }
  .laws-toc summary { padding: 15px 16px; }
  .laws-toc-list { max-height: 55vh; padding: 0 8px 10px; }
}
@media (max-width: 600px) {
  .page-head { padding: 52px 0 30px; }
  .laws { padding-bottom: 80px; }
  .laws-tools { flex-direction: column; align-items: stretch; }
  .laws-search { max-width: none; }
  .laws-count { text-align: center; }
  .codex-body { font-size: 18.5px; }
  .cx-li.l1 { padding-left: 24px; }
  .cx-li.l1::before { left: 2px; }
  .cx-li.l2 { padding-left: 44px; }
  .cx-li.l2::before { left: 22px; }
  .cx-li.l3 { padding-left: 64px; }
  .cx-li.l3::before { left: 42px; }
}

/* ---------- creators page: the deck of creator cards ---------- */
.deck-sec { padding: 24px 0 64px; }
.deck-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; max-width: 1084px; margin: 0 auto 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line-3); }
.deck-count { margin: 0; font: 600 12px/1.3 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
#roster-count { color: var(--dim); }
.deck-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; }
.deck-reseal { padding: 0; border: 0; background: none; cursor: pointer; font: italic 500 16px/1.3 var(--serif); color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.deck-reseal:hover { color: var(--cream); text-decoration-color: var(--gold); }
/* three cards a row; a short last row (or a single card) sits in the middle */
.deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; max-width: 1084px; margin: 0 auto; }
.deck > .tcard { flex: none; width: calc((100% - 64px) / 3); }
.deck-empty { padding: 40px 0 80px; text-align: center; font-style: italic; color: var(--muted); }
.band-cta { margin-top: 28px; }

/* "next creator reveal" countdown */
.reveal-clock { padding: 8px 0 56px; }
.clock-box { max-width: 1084px; margin: 0 auto; padding: 44px 20px 48px; text-align: center; background: var(--grain), radial-gradient(80% 90% at 50% 0%, rgba(120, 70, 190, .16), transparent 70%), linear-gradient(180deg, #120d18, #0b090d); border: 1px solid var(--line); border-radius: 3px; }
.clock-box .sec-sub { margin-top: 12px; }
.clock { display: flex; justify-content: center; gap: clamp(10px, 3vw, 32px); margin-top: 28px; }
.clock-unit { display: flex; flex-direction: column; width: clamp(66px, 13vw, 150px); }
.clock-num { display: grid; place-items: center; aspect-ratio: 1; background: #0c0a0e; border: 1px solid var(--line-2); font: 700 clamp(28px, 6vw, 64px)/1 var(--caps); font-variant-numeric: tabular-nums; color: var(--cream); }
.clock-label { padding: 9px 0; background: var(--gold); font: 600 clamp(9px, 1.2vw, 12px)/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }

/* a card in the grid: a sealed pack, or the card face (a button that opens the viewer) */
.tcard { position: relative; aspect-ratio: 5 / 7; max-width: 100%; }
.tcard-inner { position: relative; width: 100%; height: 100%; perspective: 1000px; }
.tcard-face { position: absolute; inset: 0; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
/* the card leans toward the pointer (app.js sets --rx/--ry from the mouse); it eases back when it leaves */
.tcard-front { z-index: 1; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s ease, box-shadow .25s ease; }
.tcard-front.hovering { transition: transform .15s ease-out, box-shadow .25s ease; box-shadow: 0 26px 50px rgba(0, 0, 0, .62); }
.tcard-front:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }
.tcard-front::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 180, .26) 50%, transparent 65%); transform: translateX(-120%); }

/* the card face, sized from its own width so it reads the same in the grid and in the viewer */
.cf { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; container-type: inline-size; }
.cf img { -webkit-user-drag: none; user-select: none; }
.cf-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-art .cf-plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 26cqw 8cqw 8cqw; background: linear-gradient(180deg, transparent, rgba(8, 6, 12, .9) 72%); }
/* No cqw on .cf itself: on the container's own box they'd measure the window, not the card.
   Percent padding follows the card's width instead. */
.cf-plain { align-items: center; padding: 8% 8% 7%; background: var(--grain), radial-gradient(120% 80% at 50% 0%, #2a1d36 0%, #140e18 60%, #0b090d 100%); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 6px #0b090d, inset 0 0 0 7px rgba(190, 164, 112, .35); }
.cf-crest { width: 17cqw; } .cf-crest img { display: block; width: 100%; height: auto; }
.cf-stage { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.cf-window { position: relative; display: grid; place-items: center; width: 74cqw; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #1a1220; box-shadow: 0 0 0 1px var(--gold), 0 0 0 1.4cqw rgba(11, 9, 13, .9), 0 0 0 calc(1.4cqw + 1px) rgba(190, 164, 112, .35); }
.cf-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.cf-window.loaded img { opacity: 1; }
.cf-initial { font: 600 24cqw/1 var(--caps); color: var(--gold); }
.cf-plate { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; text-align: center; }
.cf-art .cf-plate { position: absolute; }
.cf-rarity { font: 700 3.3cqw/1 var(--caps); letter-spacing: .34em; text-transform: uppercase; color: var(--t-label); text-shadow: 0 0 10px var(--t-glow); }
.cf-rarity::before, .cf-rarity::after { content: '✦'; margin: 0 1.6cqw; font-size: .8em; color: var(--t-line); }

/* shine: a soft light under the pointer plus a bright band that slides with it (every card) */
.cf-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255, 248, 230, .55) 0%, rgba(255, 248, 230, .14) 28%, transparent 58%),
    linear-gradient(115deg, transparent calc(var(--mx, 50%) - 30%), rgba(255, 255, 255, .22) var(--mx, 50%), transparent calc(var(--mx, 50%) + 30%));
  mix-blend-mode: overlay; opacity: 0; transition: opacity .3s ease;
}
.tcard-front.hovering .cf-glare, .viewer-card.hovering .cf-glare { opacity: 1; }

/* ---------- card rarities: Common < Rare < Epic < Legendary < Ultimate ----------
   Each tier is a set of colours; the shared rules below (edge, glow, foil, pack, sparks, burst) use them.
   t-line edge · t-hi bright edge · t-glow / t-glow-hi outer light · t-label label text · t-h1..3 foil streaks ·
   t-holo foil strength · t-glit glitter · t-pack-a..c pack foil · t-crimp-a..b pack ends · t-spark sparks */
[data-rarity="common"] {
  --t-line: #a9a59d; --t-hi: #dcd7cc; --t-glow: transparent; --t-glow-hi: transparent; --t-label: #c9c3b6;
  --t-pack-a: #3b3d43; --t-pack-b: #25272c; --t-pack-c: #121316; --t-crimp-a: #55585f; --t-crimp-b: #2a2c31;
  --t-spark: #ebe6da; --t-spark-glow: rgba(225, 220, 210, .55);
}
[data-rarity="rare"] {
  --t-line: #8fb8ff; --t-hi: #d6e7ff; --t-glow: rgba(110, 160, 255, .32); --t-glow-hi: rgba(130, 180, 255, .5); --t-label: #b0ceff;
  --t-h1: rgba(225, 238, 255, .5); --t-h2: rgba(150, 195, 255, .45); --t-h3: rgba(255, 255, 255, .45); --t-holo: .35; --t-glit: 0;
  --t-pack-a: #1f3d73; --t-pack-b: #13254a; --t-pack-c: #08101f; --t-crimp-a: #3a5f9e; --t-crimp-b: #172a4c;
  --t-spark: #dbe9ff; --t-spark-glow: rgba(140, 185, 255, .75);
}
[data-rarity="epic"] {
  --t-line: #c48cff; --t-hi: #ecd9ff; --t-glow: rgba(170, 100, 255, .35); --t-glow-hi: rgba(190, 120, 255, .6); --t-label: #d6adff;
  --t-h1: rgba(215, 160, 255, .55); --t-h2: rgba(255, 140, 220, .45); --t-h3: rgba(160, 140, 255, .5); --t-holo: .45; --t-glit: .35;
  --t-pack-a: #4b2275; --t-pack-b: #2c1248; --t-pack-c: #12071f; --t-crimp-a: #6d3fa3; --t-crimp-b: #321650;
  --t-spark: #ead4ff; --t-spark-glow: rgba(185, 125, 255, .8);
}
[data-rarity="legendary"] {
  --t-line: #e8bf63; --t-hi: #fff0c8; --t-glow: rgba(240, 190, 90, .32); --t-glow-hi: rgba(240, 190, 90, .6); --t-label: #f3d48a;
  --t-h1: rgba(255, 214, 120, .55); --t-h2: rgba(255, 150, 205, .45); --t-h3: rgba(130, 215, 255, .5); --t-holo: .55; --t-glit: .55;
  --t-pack-a: #5a4216; --t-pack-b: #33240a; --t-pack-c: #170f04; --t-crimp-a: #7a5d22; --t-crimp-b: #3a2a0c;
  --t-spark: #ffe6a8; --t-spark-glow: rgba(255, 214, 140, .75);
}
[data-rarity="ultimate"] {
  --t-line: #ffffff; --t-hi: #ffffff; --t-glow: rgba(220, 180, 255, .4); --t-glow-hi: rgba(255, 200, 240, .65); --t-label: #ffffff;
  --t-h1: rgba(255, 140, 216, .6); --t-h2: rgba(255, 220, 120, .55); --t-h3: rgba(120, 230, 255, .6); --t-holo: .65; --t-glit: .85;
  --t-pack-a: #1d1826; --t-pack-b: #0f0c15; --t-pack-c: #050407; --t-crimp-a: #322b3d; --t-crimp-b: #110e16;
  --t-spark: #ffffff; --t-spark-glow: rgba(255, 220, 255, .85);
}

/* the card edge, and the light around it (Epic and up breathe; Ultimate cycles through the colours) */
.cf[data-rarity] { box-shadow: inset 0 0 0 1px var(--t-line), inset 0 0 0 5px rgba(10, 8, 12, .55), inset 0 0 0 6px color-mix(in srgb, var(--t-line) 45%, transparent); }
.tcard-front[data-rarity] { box-shadow: 0 0 0 1px var(--t-line), 0 0 18px var(--t-glow), 0 18px 40px rgba(0, 0, 0, .55); }
.tcard-front[data-rarity="epic"], .tcard-front[data-rarity="legendary"] { animation: tier-glow 3.4s ease-in-out infinite; }
.tcard-front[data-rarity="ultimate"] { animation: ult-glow 4s linear infinite; }
@keyframes tier-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--t-line), 0 0 18px var(--t-glow), 0 18px 40px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 0 0 1px var(--t-hi), 0 0 36px var(--t-glow-hi), 0 18px 40px rgba(0, 0, 0, .55); }
}
@keyframes ult-glow {
  0%, 100% { box-shadow: 0 0 0 1px #fff, 0 0 34px rgba(255, 130, 215, .6), 0 18px 40px rgba(0, 0, 0, .55); }
  25% { box-shadow: 0 0 0 1px #fff, 0 0 34px rgba(255, 210, 110, .6), 0 18px 40px rgba(0, 0, 0, .55); }
  50% { box-shadow: 0 0 0 1px #fff, 0 0 34px rgba(110, 235, 200, .6), 0 18px 40px rgba(0, 0, 0, .55); }
  75% { box-shadow: 0 0 0 1px #fff, 0 0 34px rgba(140, 185, 255, .6), 0 18px 40px rgba(0, 0, 0, .55); }
}
.viewer-card[data-rarity] .viewer-front { box-shadow: 0 0 0 1px var(--t-line), 0 0 50px var(--t-glow-hi), 0 30px 80px rgba(0, 0, 0, .7); }
.viewer-card[data-rarity="ultimate"] .viewer-front { animation: ult-glow 4s linear infinite; }

/* Ultimate: a rainbow border that keeps turning around the card (and its pack), and a rainbow label */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cf[data-rarity="ultimate"]::after, .pack[data-rarity="ultimate"] .pk-ring {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--ang), #ff8ad8, #ffd36e, #7cf5c4, #8fc8ff, #c58bff, #ff8ad8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ang-spin 4s linear infinite;
}
@keyframes ang-spin { to { --ang: 360deg; } }
.cf[data-rarity="ultimate"] .cf-rarity { color: transparent; background: linear-gradient(90deg, #ff8ad8, #ffd36e, #7cf5c4, #8fc8ff, #c58bff, #ff8ad8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 210, 250, .6)); animation: prism-text 4s linear infinite; }
@keyframes prism-text { to { background-position: 200% 0; } }

/* the foil: thin streaks with wide clear gaps that move as the card tilts, plus glitter (Rare and up) */
.cf-holo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, var(--t-glit, 0)) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 236, 170, var(--t-glit, 0)) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, transparent 0%, var(--t-h1) 2.5%, var(--t-h2) 5%, var(--t-h3) 7.5%, transparent 10%, transparent 24%);
  background-size: 37px 41px, 59px 53px, 220% 220%;
  background-position: 3px 7px, 21px 13px, var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: overlay; opacity: var(--t-holo, .5);
  animation: holo-drift 9s linear infinite alternate;
  transition: opacity .3s ease;
}
.cf[data-rarity="ultimate"] .cf-holo {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 220, 255, .75) 0 1px, transparent 1.6px),
    repeating-linear-gradient(115deg, transparent 0%, rgba(255, 140, 216, .6) 2.5%, rgba(255, 220, 120, .55) 5%, rgba(120, 240, 200, .55) 7.5%, rgba(130, 190, 255, .6) 10%, rgba(200, 150, 255, .55) 12.5%, transparent 15%, transparent 22%);
}
.tcard-front.hovering .cf-holo, .viewer-card.hovering .cf-holo { animation: none; opacity: 1; }
@keyframes holo-drift { from { background-position: 3px 7px, 21px 13px, 0% 0%; } to { background-position: 3px 7px, 21px 13px, 100% 100%; } }
.cf-name { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; font: 600 7.4cqw/1.15 var(--caps); letter-spacing: .06em; color: var(--cream); }
.cf-title { font: italic 500 6.6cqw/1.2 var(--serif); color: var(--muted); }

/* the back every card shares, seen when a card is flipped in the viewer */
.cb {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; container-type: inline-size;
  background:
    var(--grain),
    repeating-linear-gradient(45deg, rgba(190, 164, 112, .05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(190, 164, 112, .05) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 50% 46%, #2b1a42 0%, #170d24 55%, #0b0710 100%);
  box-shadow: inset 0 0 0 1px var(--gold-lo);
}
.cb-frame { position: absolute; inset: 3cqw; border: 1px solid rgba(190, 164, 112, .35); border-radius: 2cqw; }
.cb-frame::before { content: ''; position: absolute; inset: 1.4cqw; border: 1px solid rgba(190, 164, 112, .14); border-radius: 1.2cqw; }
.cb-seal { display: grid; place-items: center; width: 48cqw; aspect-ratio: 1; border-radius: 47% 53% 50% 48% / 52% 46% 54% 49%; background: radial-gradient(circle at 38% 34%, #b04035 0%, #8a2a22 45%, #5a1611 100%); box-shadow: inset 0 0 0 3px rgba(60, 10, 8, .5), inset 0 -6px 14px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .5); }
.cb-seal img { width: 70%; height: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)) saturate(.85); }
.cb-name { position: absolute; left: 0; right: 0; bottom: 9cqw; text-align: center; font: 600 3.4cqw/1 var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }

/* A sealed creator pack: dark foil, crimped ends, the crest. app.js cuts two copies of the same art
   along one jagged tear line, so ripping pulls the top strip away from the rest of the wrapper. */
.pack { z-index: 2; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); transition: transform .25s ease; }
.pack:hover { transform: translateY(-4px); }
.pack:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }
.pk-piece { position: absolute; inset: 0; transition: transform .3s ease; }
.pk-top { z-index: 1; transform-origin: 3% 17%; }
.pack:hover .pk-top { transform: rotate(-1.8deg); }
.pk-art {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6px; container-type: inline-size;
  background:
    linear-gradient(115deg, transparent 30%, rgba(220, 200, 255, .06) 42%, rgba(255, 240, 210, .11) 48%, transparent 58%),
    var(--grain),
    repeating-linear-gradient(60deg, rgba(190, 164, 112, .045) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, #2e1d44 0%, #1d1230 45%, #120b1d 100%);
  box-shadow: inset 0 0 0 1px var(--gold-lo), inset 0 0 0 6px rgba(9, 6, 14, .55), inset 0 0 0 7px rgba(190, 164, 112, .22);
}
.pk-crimp { position: absolute; left: 0; right: 0; height: 5.5%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 2px, rgba(0, 0, 0, .35) 2px 4px), linear-gradient(180deg, #3a2a50, #1b1128); }
.pk-crimp-top { top: 0; border-bottom: 1px solid rgba(190, 164, 112, .35); }
.pk-crimp-bottom { bottom: 0; border-top: 1px solid rgba(190, 164, 112, .35); }
.pk-name, .pk-kind, .pk-hint { position: absolute; left: 0; right: 0; text-align: center; }
.pk-name { top: 8.5%; font: 600 3.4cqw/1 var(--caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.pk-tear { position: absolute; left: 7%; right: 7%; top: calc(17% - 4.6cqw); height: 4.6cqw; border-bottom: 1px dashed rgba(190, 164, 112, .45); text-align: right; font: 600 2.4cqw/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lo); }
.pk-crest { position: absolute; left: 50%; top: 46%; width: 52%; transform: translate(-50%, -50%); }
.pk-crest img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.pk-kind { top: 74%; font: 600 4.4cqw/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.pk-hint { top: 83%; font: italic 500 5cqw/1 var(--serif); color: var(--muted); }
.pk-glow { position: absolute; left: 0; right: 0; top: calc(17% - 3px); z-index: 3; height: 6px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 226, 160, .95) 18%, #fff6dc 50%, rgba(255, 226, 160, .95) 82%, transparent); filter: blur(2px); opacity: 0; transform: scaleX(0); transform-origin: right center; }
.pk-sparks { position: absolute; left: 0; right: 0; top: 17%; z-index: 4; height: 0; pointer-events: none; }
.pk-sparks i { position: absolute; top: -2px; width: 3px; height: 3px; border-radius: 50%; background: #ffe6a8; box-shadow: 0 0 6px 2px rgba(255, 214, 140, .7); opacity: 0; animation: spark .7s ease-out forwards; }

/* ripping: the tear runs across the top from right to left with sparks, the strip peels away,
   the pack fades and leaves the card in its place */
.tcard.ripping .pack { animation: pack-shake .14s ease-in-out; }
.tcard.ripping .pk-glow { animation: tear-glow .62s .06s ease-out forwards; }
.tcard.ripping .pk-top { animation: rip-top .78s .12s cubic-bezier(.3, .6, .4, 1) forwards; }
.tcard.ripping .pk-body { animation: pack-fade .5s .64s ease-in forwards; }
.tcard.ripping .tcard-front { animation: card-in .55s .68s ease-out backwards; }
.tcard.ripping .tcard-front::after { animation: sheen 1s 1.08s ease-out forwards; }
@keyframes pack-shake { 30% { transform: rotate(-1.2deg); } 70% { transform: rotate(1.2deg); } }
@keyframes tear-glow { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes rip-top { 40% { transform: rotate(-10deg); } 100% { transform: translate(-28%, -115%) rotate(-36deg); opacity: 0; } }
@keyframes pack-fade { to { opacity: 0; transform: scale(1.03); } }
@keyframes card-in { from { opacity: 0; transform: scale(.97); } }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes sheen { to { transform: translateX(120%); } }

/* rarity packs: the tier's foil colours, a gleam that keeps sweeping across (Rare and up),
   tier-coloured sparks and tear, and a burst of the tier's light when it's ripped (Epic and up) */
.pack[data-rarity] .pk-art {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, .14) 48%, transparent 58%),
    var(--grain),
    repeating-linear-gradient(60deg, color-mix(in srgb, var(--t-line) 7%, transparent) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, var(--t-pack-a) 0%, var(--t-pack-b) 45%, var(--t-pack-c) 100%);
  box-shadow: inset 0 0 0 1px var(--t-line), inset 0 0 0 6px rgba(10, 8, 12, .6), inset 0 0 0 7px color-mix(in srgb, var(--t-line) 40%, transparent);
}
.pack[data-rarity] .pk-crimp { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, rgba(0, 0, 0, .35) 2px 4px), linear-gradient(180deg, var(--t-crimp-a), var(--t-crimp-b)); }
.pack[data-rarity] .pk-name, .pack[data-rarity] .pk-kind { color: var(--t-label); }
.pack[data-rarity] .pk-kind { text-shadow: 0 0 10px var(--t-glow-hi); }
.pack[data-rarity] { filter: drop-shadow(0 0 16px var(--t-glow)) drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.pack[data-rarity] .pk-glow { background: linear-gradient(90deg, transparent, var(--t-line) 18%, #fff 50%, var(--t-line) 82%, transparent); }
.pack[data-rarity] .pk-sparks i { background: var(--t-spark); box-shadow: 0 0 6px 2px var(--t-spark-glow); }
.pack[data-rarity="ultimate"] .pk-sparks i:nth-child(5n + 1) { background: #ff8ad8; box-shadow: 0 0 7px 2px rgba(255, 138, 216, .8); }
.pack[data-rarity="ultimate"] .pk-sparks i:nth-child(5n + 2) { background: #ffd36e; box-shadow: 0 0 7px 2px rgba(255, 211, 110, .8); }
.pack[data-rarity="ultimate"] .pk-sparks i:nth-child(5n + 3) { background: #7cf5c4; box-shadow: 0 0 7px 2px rgba(124, 245, 196, .8); }
.pack[data-rarity="ultimate"] .pk-sparks i:nth-child(5n + 4) { background: #8fc8ff; box-shadow: 0 0 7px 2px rgba(143, 200, 255, .8); }
.pack[data-rarity="ultimate"] .pk-kind { color: transparent; background: linear-gradient(90deg, #ff8ad8, #ffd36e, #7cf5c4, #8fc8ff, #c58bff, #ff8ad8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; animation: prism-text 4s linear infinite; }
.pk-ring { display: none; }
.pack[data-rarity="ultimate"] .pk-ring { display: block; border-radius: 6px; }
.tcard.ripping .pack[data-rarity="ultimate"] .pk-ring { animation: ang-spin 4s linear infinite, pack-fade .4s .3s ease-in forwards; }
.pk-gleam { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--t-hi) 30%, transparent) 50%, transparent 62%); transform: translateX(-120%); animation: gleam 3.6s ease-in-out infinite; }
@keyframes gleam { 0%, 45% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.lg-burst { position: absolute; left: 50%; top: 50%; z-index: 5; width: 160%; aspect-ratio: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--t-hi) 75%, transparent) 0%, color-mix(in srgb, var(--t-line) 35%, transparent) 30%, transparent 65%); transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: lg-burst 1.1s .55s ease-out forwards; }
.lg-burst[data-rarity="ultimate"] {
  width: 230%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 170, 230, .45) 20%, rgba(140, 200, 255, .25) 38%, transparent 60%),
    repeating-conic-gradient(rgba(255, 255, 255, .4) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: ult-burst 1.5s .5s ease-out forwards;
}
@keyframes lg-burst { 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes ult-burst { 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(40deg); } }

/* the full-screen card viewer: tilts toward the pointer, flips on click */
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; background: rgba(6, 4, 9, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s ease; }
.viewer.open { opacity: 1; }
.viewer-stage { display: grid; place-items: center; perspective: 1000px; }
.viewer-card { display: block; width: min(86vw, calc(70vh * 5 / 7), 940px); aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; transform: scale(.92); transition: transform .3s cubic-bezier(.2, .9, .3, 1); touch-action: manipulation; }
.viewer.open .viewer-card { transform: none; }
.viewer-card:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 8px; }
.viewer-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .9, .3, 1); }
.viewer-inner.tilting { transition: transform .15s ease-out; }
.viewer-face { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.viewer-back { transform: rotateY(180deg); }
.viewer-hint { margin: 0; font: 600 12px/1.3 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.viewer-close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(9, 8, 10, .6); color: var(--cream); font-size: 20px; cursor: pointer; }
.viewer-close:hover { border-color: var(--gold); }

@media (max-width: 760px) {
  .deck { gap: 16px; }
  .deck > .tcard { width: calc((100% - 16px) / 2); }
  .pk-tear { font-size: 0; } /* just the dashed line: the label would run into the name on a narrow pack */
}

/* ---------- council ---------- */
.council { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 28px; }
.member { text-align: center; }
.portrait { width: 148px; height: 148px; margin: 0 auto 18px; padding: 6px; background: #0c0b0d; border: 1px solid var(--line-2); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.initial { display: grid; place-items: center; width: 100%; height: 100%; background: var(--grain), radial-gradient(circle at 50% 35%, #241a35, #110b1a); font: 600 54px/1 var(--caps); color: var(--gold); }
.member h3 { margin: 0 0 7px; font: 600 18px/1.2 var(--caps); letter-spacing: .1em; color: var(--cream); }
.member p { margin: 0; font: 600 10.5px/1.3 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 760px) { .council { grid-template-columns: repeat(2, minmax(0, 220px)); gap: 36px 20px; } .portrait { width: 132px; height: 132px; } }

/* ---------- final call ---------- */
.final {
  padding: 124px 0; text-align: center;
  background:
    var(--grain),
    radial-gradient(70% 70% at 50% 100%, rgba(120, 70, 190, .16), transparent 70%),
    linear-gradient(180deg, var(--bg-0), #150d22);
}
.final-title { margin: 0 0 36px; font: 700 clamp(34px, 5.4vw, 64px)/1.05 var(--caps); letter-spacing: .06em; color: var(--cream); }
.final-note { margin: 28px 0 0; font-size: 17px; font-style: italic; color: var(--muted); }

/* ---------- footer ---------- */
.foot { padding-top: 56px; background: #070608; border-top: 1px solid var(--line-3); }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand img { width: 56px; height: 56px; }
.foot-name { margin: 0; font: 600 16px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-h { margin: 0 0 4px; font: 600 11px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.foot-col a { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--cream); }
.foot-legal { padding: 22px 0 30px; border-top: 1px solid var(--line-3); }
.foot-legal p { margin: 0; font-size: 15px; color: var(--dim); }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .wrap, .narrow { width: calc(100% - 32px); }
  .section { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
  .hero { min-height: 0; padding: calc(var(--nav-h) + 40px) 0 96px; }
  .pills { margin-bottom: 26px; }
  .cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .final .cta { margin-inline: auto; }
  .band { padding: 52px 0; }
  .brand span { font-size: 13px; letter-spacing: .16em; }
}

/* ---------- reveal on scroll ---------- */
/* cards are always visible; they only settle up a little as they scroll in */
.js .reveal { transform: translateY(12px); transition: transform .8s ease; transition-delay: var(--d, 0ms); }
.js .reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Calm the page's own motion, but keep the creator-card rip, tilt and flip: they only run when the
     visitor clicks, and Windows Server turns "animations" off by default. */
  :not(.tcard, .tcard *, .viewer, .viewer *),
  :not(.tcard, .tcard *, .viewer, .viewer *)::before,
  :not(.tcard, .tcard *, .viewer, .viewer *)::after { animation: none !important; transition: none !important; }
  .js .reveal { transform: none; }
}