/* Stones: the launcher's palette and type, carried onto the web. Dark only, like the game. */
@font-face { font-family: "Marcellus SC"; src: url("/assets/fonts/MarcellusSC-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("/assets/fonts/Marcellus-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/assets/fonts/AlegreyaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #0c0b0a;          /* warm near-black ground */
  --ink-2: #15130f;        /* raised */
  --ink-3: #201c16;        /* inset */
  --rule: #3b3327;         /* bronze-dark hairline */
  --parch: #ece4d2;        /* text */
  --ash: #a9a395;          /* secondary text */
  --bronze: #c9a25b;       /* accent */
  --bronze-hi: #e6c88a;
  --bronze-ink: #1b1305;   /* text on bronze */
  --gate: #8fb2ea;         /* moongate blue */
  --moss: #8cc084;
  --brick: #e2725b;
  --vaal: #ff6a45;
  --chaos: #b07cff;
  --chaos-2: #46d8cf;
  --exalted: #d3dbe7;
  --divine: #f3c873;
  --display: "Marcellus SC", "Marcellus", "Trajan Pro", Georgia, serif;
  --serif: "Marcellus", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--parch); font: 400 1.125rem/1.6 var(--sans); font-kerning: normal; font-variant-numeric: lining-nums proportional-nums; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--bronze-hi); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--bronze); color: var(--bronze-ink); }

h2 { font: 400 clamp(2.1rem, 4.4vw, 3.4rem)/1.08 var(--display); letter-spacing: 0.02em; text-wrap: balance; }
h3, h4 { font: 400 1.35rem/1.2 var(--display); letter-spacing: 0.02em; }
.intro { font-size: clamp(1.2rem, 1.9vw, 1.42rem); line-height: 1.5; color: var(--parch); max-width: 34em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.glow-exalted { --glow: var(--exalted); } .glow-chaos { --glow: var(--chaos); } .glow-divine { --glow: var(--divine); } .glow-vaal { --glow: var(--vaal); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--bronze); color: var(--bronze-ink); padding: 8px 14px; border-radius: 4px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 2px; background: linear-gradient(180deg, var(--bronze-hi), var(--bronze) 55%, #a8813d); color: var(--bronze-ink); font: 400 1.05rem/1 var(--display); letter-spacing: 0.06em; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.35), 0 0 0 1px #5b4520, 0 10px 30px -12px rgba(201, 162, 91, 0.6); transition: filter 0.2s, transform 0.2s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 0.92rem; }
.btn-quiet { background: none; border: 0; padding: 10px 2px; color: var(--parch); font: 500 1.05rem/1.2 var(--sans); text-decoration: underline; text-decoration-color: rgba(201, 162, 91, 0.55); text-underline-offset: 0.3em; cursor: pointer; }
.btn-quiet:hover { text-decoration-color: var(--bronze-hi); }

/* status: words plus a distinct shape for each state */
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 0.95rem/1 var(--sans); color: var(--ash); padding: 6px 12px 6px 10px; border: 1px solid var(--rule); border-radius: 99px; white-space: nowrap; }
.status span { width: 10px; height: 10px; border-radius: 50%; }
.status.live { color: var(--moss); }
.status.live span { background: var(--moss); box-shadow: 0 0 10px var(--moss); }
.status.forge { color: var(--bronze-hi); }
.status.forge span { background: linear-gradient(90deg, var(--bronze-hi) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--bronze-hi); }
.status.horizon span { box-shadow: inset 0 0 0 1.5px var(--ash); }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 22px; }

/* top bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color 0.35s, border-color 0.35s; border-bottom: 1px solid transparent; }
.bar.solid { background: rgba(12, 11, 10, 0.86); border-bottom-color: var(--rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar-inner { max-width: 1320px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 28px; }
.mark { font: 400 1.35rem/1 var(--display); letter-spacing: 0.16em; color: var(--parch); text-decoration: none; }
.bar nav { display: flex; gap: 22px; margin-left: auto; }
.bar nav a { color: var(--ash); text-decoration: none; font-size: 1rem; padding: 6px 0; }
.bar nav a:hover { color: var(--parch); }
.motion { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: rgba(12, 11, 10, 0.4); color: var(--ash); cursor: pointer; }
.motion:hover { color: var(--parch); border-color: var(--bronze); }
.motion span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.motion[aria-pressed="true"] span { border: 0; width: 11px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 2px; }
.paused .pulse { animation-play-state: paused; }
/* Right-hand bar buttons: pushed right; when the section nav shows, it takes the push instead. */
.bar-actions { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bar nav ~ .bar-actions { margin-left: 0; }
@media (max-width: 860px) { .bar nav { display: none; } .bar nav ~ .bar-actions { margin-left: auto; } }
/* Secondary bar button (Discord): outlined, so the gold button stays the primary action. */
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(201, 162, 91, 0.45); border-radius: 2px; background: rgba(12, 11, 10, 0.4); color: var(--parch); font: 400 0.92rem/1 var(--display); letter-spacing: 0.06em; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.btn-ghost:hover { border-color: var(--bronze-hi); color: var(--bronze-hi); }
.discord-icon { flex: none; }
/* On narrow screens the Discord button becomes an icon, the same size as the motion toggle. */
@media (max-width: 560px) {
  .bar-inner { gap: 12px; }
  .btn-ghost.discord { width: 38px; padding: 0; border-radius: 50%; }
  .btn-ghost.discord span { display: none; }
}

/* hero */
.hero { min-height: 100vh; min-height: 100svh; display: grid; align-items: end; justify-items: center; overflow: hidden; isolation: isolate; background: #0b0e14; }
.hero-art, .hero-art img, .hero-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-art { z-index: -1; }
.hero-art video { opacity: 0; transition: opacity 1.6s ease; }
.hero-art video.playing { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.55) 0%, rgba(12, 11, 10, 0) 18%, rgba(12, 11, 10, 0) 52%, rgba(12, 11, 10, 0.78) 76%, var(--ink) 100%); }
.hero-copy { width: 100%; max-width: 900px; padding: 0 var(--gutter) clamp(48px, 9vh, 96px); text-align: center; display: grid; justify-items: center; gap: 18px; }
.alpha-flag { display: inline-flex; align-items: center; gap: 10px; font: 500 1rem/1 var(--sans); color: var(--parch); padding: 8px 14px; border-radius: 99px; background: rgba(12, 11, 10, 0.55); border: 1px solid rgba(201, 162, 91, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 0 rgba(140, 192, 132, 0.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(140, 192, 132, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(140, 192, 132, 0); } }
.wordmark { font: 400 clamp(4.4rem, 15vw, 11rem)/0.86 var(--display); letter-spacing: 0.12em; margin-right: -0.12em; display: flex; }
.wordmark span { background: linear-gradient(178deg, #fbf0d6 8%, #e7c98a 42%, #b8893f 74%, #7a5622 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.65)); animation: rise 1.3s cubic-bezier(0.2, 0.7, 0.1, 1) both; animation-delay: calc(0.25s + var(--i) * 0.09s); }
.wordmark span:nth-child(1) { --i: 0; } .wordmark span:nth-child(2) { --i: 1; } .wordmark span:nth-child(3) { --i: 2; }
.wordmark span:nth-child(4) { --i: 3; } .wordmark span:nth-child(5) { --i: 4; } .wordmark span:nth-child(6) { --i: 5; }
@keyframes rise { from { opacity: 0; transform: translateY(0.18em); filter: blur(10px) drop-shadow(0 4px 24px rgba(0, 0, 0, 0.65)); } }
.lead { font: 400 clamp(1.2rem, 2.3vw, 1.55rem)/1.45 var(--serif); color: var(--parch); max-width: 30em; text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; margin-top: 6px; }
.alpha-flag, .lead, .hero-actions { animation: fade 1.2s ease both; animation-delay: 1s; }
.hero-actions { animation-delay: 1.2s; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }

/* Content follows the same live / in development / alpha order as the navigation. */
.live-opening, .development, .alpha { padding-block: clamp(64px, 9vw, 112px); }
.system { padding-block: clamp(44px, 6vw, 80px); }
.system-title { font: 400 clamp(1.9rem, 3.8vw, 2.9rem)/1.15 var(--display); text-wrap: balance; }
.feature-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.eyebrow { font: 500 0.92rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bronze); margin-bottom: 18px; }
.live-opening { padding-bottom: 28px; }
.era-note { color: var(--ash); max-width: 43em; margin-top: 22px; }
.live-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
@media (max-width: 1100px) and (min-width: 861px) { .live-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.live-index a { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 16px; text-decoration: none; font-family: var(--serif); }
.live-index a:hover { border-color: var(--bronze); }
.live-index span { color: var(--ash); font: 400 1rem/1.3 var(--sans); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature-copy { display: grid; gap: 18px; align-content: start; }
.feature-copy .head { margin-bottom: 0; }
.feature-copy > p:not(.intro) { color: var(--ash); }
.game-shot { margin: 0; min-width: 0; }
.game-shot img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 3px; background: var(--ink-2); }
.game-shot figcaption { padding-top: 14px; font-size: 1rem; line-height: 1.45; color: var(--ash); }
.game-shot figcaption b { display: block; color: var(--parch); font: 400 1.2rem/1.3 var(--display); margin-bottom: 6px; }
.station-gallery { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 36px; margin-top: 36px; align-items: center; }
.world-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 36px; }
.system-list { display: grid; gap: 28px; }
.system-list article { display: grid; gap: 10px; justify-items: start; padding-top: 18px; border-top: 1px solid var(--rule); }
.system-list p:not(.status) { color: var(--ash); }
/* Play together: two window renders stacked beside the feature list. */
.shot-stack { display: grid; gap: 32px; }
.client { margin-top: 48px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
@media (max-width: 860px) {
  .feature-grid, .world-grid, .station-gallery { grid-template-columns: minmax(0, 1fr); }
  .live-index { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* the stones */
.stones { background: radial-gradient(60% 50% at 50% 55%, rgba(143, 178, 234, 0.07), transparent 70%); }
.altar { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.stone { display: grid; gap: 6px; justify-items: center; text-align: center; }
.stone h4 { color: var(--glow); margin-top: 6px; }
.stone .job { font: 500 1.05rem/1.3 var(--sans); color: var(--parch); }
.stone p:last-child { color: var(--ash); font-size: 1rem; max-width: 18em; }
.turn { width: min(100%, 240px); aspect-ratio: 1; cursor: grab; touch-action: pan-y; position: relative; isolation: isolate; background-repeat: no-repeat; border-radius: 50%;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--glow) 32%, transparent)); transition: filter 0.4s; }
.turn::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); z-index: -1; }
.turn:hover, .turn:focus-visible, .turn.dragging { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--glow) 55%, transparent)); }
.turn.dragging { cursor: grabbing; }
.turn:focus-visible { outline-offset: -2px; }
@media (max-width: 860px) { .altar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } }

.craft-notes { margin-top: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 1100px) and (min-width: 761px) { .craft-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.craft-notes > div { border-top: 1px solid var(--rule); padding-top: 20px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.craft-notes p:not(.status) { color: var(--ash); max-width: 32em; }
@media (max-width: 760px) { .craft-notes { grid-template-columns: minmax(0, 1fr); } }

/* Pick a stone, then target the ring itself. */
.simulator { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--rule); }
.simulator > p { margin-top: 16px; max-width: 52em; }
.bench { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; align-items: start; }
.bench-item { display: grid; gap: 14px; justify-items: center; align-content: center; min-height: 360px; padding: 28px 16px; border: 1px solid var(--rule); border-radius: 4px; background: radial-gradient(70% 60% at 50% 35%, var(--ink-3), var(--ink-2)); }
.opl { width: 100%; max-width: 340px; padding: 12px 16px 14px; border: 1px solid var(--rule); background: var(--ink); text-align: center; font: 500 1.05rem/1.45 var(--sans); color: var(--parch); transition: box-shadow 0.4s; }
.opl-name { font-weight: 700; color: var(--bronze-hi); margin-bottom: 8px; }
.opl-lines li, .opl-lines button span { display: block; }
.opl-lines .empty, .opl-lines .ineligible { color: var(--ash); }
.opl-lines .top { color: var(--divine); }
.opl-lines .corrupt, .opl-lines .sealed { color: var(--brick); }
.opl-lines .sealed { font-weight: 700; letter-spacing: 0.02em; }
.opl-lines .socket { color: var(--gate); }
.opl-lines .flash { animation: bench-flash 1s ease-out; }
@keyframes bench-flash { from { text-shadow: 0 0 14px var(--flash); background: color-mix(in srgb, var(--flash) 22%, transparent); } }
.opl-lines button { display: block; width: 100%; min-height: 44px; padding: 6px; margin-block: 3px; border: 1px solid color-mix(in srgb, var(--pick) 50%, transparent); border-radius: 2px; background: transparent; color: inherit; font: inherit; text-align: center; cursor: pointer; scroll-margin-block: 90px; }
.opl-lines button:hover, .opl-lines button:focus-visible { background: color-mix(in srgb, var(--pick) 18%, transparent); }
.opl-lines button:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }
.opl.picking { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pick) 60%, transparent), 0 0 40px -6px color-mix(in srgb, var(--pick) 50%, transparent); }
.bench-meta, .bench-help { color: var(--ash); font-size: 0.96rem; }
.bench-item .bench-help, .bench-meta { text-align: center; }
.bench-log { color: var(--parch); text-align: center; min-height: 3em; max-width: 26em; }
.pouch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pouch > :not(.use) { grid-column: 1 / -1; }
.use { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; text-align: left; color: var(--ash); background: var(--ink-2); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; font: inherit; }
.use img { width: 48px; height: 48px; }
.use span { font-size: 0.9rem; }
.use b { display: block; color: var(--glow); font: 400 1.08rem/1.3 var(--display); }
.use:hover:not(:disabled), .use[aria-pressed="true"] { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 10%, var(--ink-2)); }
.use:disabled { opacity: 0.5; cursor: not-allowed; }
.reset { justify-self: start; }
.spent { color: var(--ash); font-size: 0.95rem; min-height: 1.6em; }
.fragment-art { display: flex; gap: 22px; align-items: center; }
.fragment-art img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 860px) { .bench { grid-template-columns: minmax(0, 1fr); } }

/* Live rules and assistant policy */
.rulebook { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 52px); }
.rulebook > div { border-top: 1px solid var(--rule); padding: 20px 0 28px; display: grid; gap: 8px; align-content: start; }
.rulebook dt { font: 400 1.2rem/1.25 var(--display); color: var(--parch); letter-spacing: 0.02em; }
.rulebook dd { color: var(--ash); font-size: 1.02rem; }
@media (max-width: 960px) { .rulebook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rulebook { grid-template-columns: minmax(0, 1fr); } }
.assist { margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--rule); padding-top: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); }
.assist-rule { display: grid; gap: 16px; align-content: start; }
.assist blockquote { margin: 0; padding-left: 18px; border-left: 2px solid var(--bronze); font: 400 clamp(1.15rem, 1.8vw, 1.35rem)/1.45 var(--serif); color: var(--parch); }
.assist-rule p { color: var(--ash); }
.assist-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 52px); align-content: start; }
.assist h5 { margin: 0 0 10px; font: 400 1.05rem/1.2 var(--display); letter-spacing: 0.06em; }
.assist .yes h5 { color: var(--moss); }
.assist .no h5 { color: var(--brick); }
.assist li { color: var(--ash); font-size: 1.02rem; padding: 10px 0; border-top: 1px solid var(--rule); }
@media (max-width: 960px) { .assist { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .assist-lists { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* The Circle: the real tree, explorable */
.circle { padding-block: clamp(64px, 9vw, 112px); border-top: 1px solid var(--rule); background: radial-gradient(55% 45% at 35% 55%, rgba(243, 200, 115, 0.07), transparent 70%), var(--ink); }
.circle-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.circle-map { margin: 0; min-width: 0; }
.circle-map svg { width: 100%; height: auto; touch-action: manipulation; border-radius: 50%; }
.circle-map svg:focus, .circle-map svg:focus-visible { outline: none; }
.circle-map svg:focus-visible .c-stone.current, .circle-map svg:focus-visible .c-centre.current { stroke: var(--bronze-hi); stroke-width: 5; }
.c-edges line { stroke: #3b3327; stroke-width: 1.6; transition: stroke 0.3s; }
.c-edges line.lit { stroke: var(--divine); stroke-width: 2.6; }
.c-labels text { font: 400 30px var(--display); letter-spacing: 0.08em; text-anchor: middle; }
.c-stone { fill: color-mix(in srgb, var(--c) 30%, var(--ink)); stroke: var(--c); stroke-width: 1.6; cursor: pointer; transition: fill 0.3s, filter 0.3s; }
.c-great { stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
.c-stone:hover { fill: color-mix(in srgb, var(--c) 60%, var(--ink)); }
.c-stone.lit { fill: var(--c); filter: drop-shadow(0 0 7px var(--c)); }
.c-stone.current, .c-centre.current { stroke: var(--parch); stroke-width: 3.5; }
.c-centre { fill: var(--divine); stroke: #fff3d6; stroke-width: 2; filter: drop-shadow(0 0 14px var(--divine)); cursor: pointer; }
.circle-read { display: grid; gap: 10px; align-content: start; justify-items: start; min-height: 290px; padding: 24px; border: 1px solid var(--rule); border-left: 2px solid var(--bronze); background: var(--ink-2); }
.circle-virtue { font: 500 0.92rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bronze); }
.circle-name { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.circle-words { color: var(--parch); font-size: 1.1rem; min-height: 3.2em; }
.circle-gate { color: var(--divine); font-size: 1rem; }
.circle-gate:empty { display: none; }
.circle-help { color: var(--ash); font-size: 0.96rem; margin-top: 8px; }
.circle-read button:disabled { opacity: 0.45; cursor: default; }
.footnote { margin-top: 18px; color: var(--ash); font-size: 0.95rem; }
.circle-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 52px); margin-top: clamp(44px, 6vw, 72px); }
.circle-points article { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--rule); padding-top: 20px; }
.circle-points p { color: var(--ash); }
@media (max-width: 960px) { .circle-stage { grid-template-columns: minmax(0, 1fr); } .circle-read { min-height: 0; } .circle-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .circle-points { grid-template-columns: minmax(0, 1fr); }
  .circle-map { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
  .circle-map svg { width: 680px; max-width: none; }
}

/* Arena and the road ahead */
.arena-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.arena-note { padding: 26px 0 26px 28px; border-left: 2px solid var(--bronze); }
.arena-motto { font: 400 clamp(1.55rem, 2.5vw, 2rem)/1.4 var(--serif); margin-bottom: 16px; }
.arena-note > p:last-child { color: var(--ash); }
.development { border-top: 1px solid var(--rule); background: var(--ink-2); }
.development > .wrap > .intro { margin-top: 22px; color: var(--ash); }
.next-list, .later { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 6vw, 72px); margin-top: 36px; }
.next-list article, .later article { display: grid; gap: 12px; align-content: start; justify-items: start; border-top: 1px solid var(--rule); padding-top: 20px; }
.next-list p:not(.status), .later p:not(.status), .horizon-heading p { color: var(--ash); }
.horizon-heading { margin-top: 56px; display: grid; gap: 10px; }
.isle-preview { margin-top: 56px; display: grid; gap: 20px; }
.isle-preview .head { margin-bottom: 0; }
.isle-preview > p:not(.intro) { max-width: 46em; color: var(--ash); }
.creature-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.creature-gallery .game-shot { display: grid; justify-items: center; align-content: start; padding: 28px; border: 1px solid var(--rule); background: var(--ink); }
.creature-gallery img { width: auto; height: 300px; max-width: 100%; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; }
.creature-gallery figcaption { max-width: 26em; text-align: center; }
@media (max-width: 760px) { .creature-gallery { grid-template-columns: minmax(0, 1fr); } }
.phase-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); max-width: 50em; color: var(--ash); }
@media (max-width: 860px) { .arena-grid, .next-list, .later { grid-template-columns: minmax(0, 1fr); } }

/* Closed alpha note: invite-only, access is asked for on Discord (no sign-up form). */
.alpha { text-align: center; background: radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--bronze) 8%, transparent), transparent 70%); border-top: 1px solid var(--rule); }
.alpha .wrap { display: grid; justify-items: center; gap: 18px; }
.alpha .eyebrow { margin: 0; }
.needs { color: var(--ash); }
.needs { max-width: 40em; }
.join { display: grid; justify-items: center; gap: 16px; margin-top: 8px; padding: 26px clamp(18px, 4vw, 40px) 22px; border: 1px solid var(--rule); border-radius: 3px; background: rgba(12, 11, 10, 0.45); max-width: 36em; width: 100%; box-sizing: border-box; }
.join .needs { color: var(--parch); font-size: clamp(1.1rem, 1.7vw, 1.25rem); text-wrap: balance; }
.join-note { color: var(--ash); font-size: 0.95rem; }
/* footer */
.foot { border-top: 1px solid var(--rule); padding-block: 14px 18px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 4px; }
.foot p { margin: 0; color: var(--ash); font-size: 0.78rem; line-height: 1.45; }
.foot .mark { font-size: 0.82rem; letter-spacing: 0.14em; }
.foot a { color: var(--parch); text-decoration-color: rgba(201, 162, 91, 0.55); }
.foot a:hover { text-decoration-color: var(--bronze-hi); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}

/* Systems reference page: dense, tabular, same palette and type. */
.ref .bar { position: sticky; top: 0; }
.ref-main { display: block; }
.ref-hero { padding-block: clamp(40px, 6vw, 72px) 8px; }
.ref-hero .wrap { display: grid; gap: 16px; }
.ref-title { font: 400 clamp(2.4rem, 6vw, 4rem)/1.05 var(--display); letter-spacing: 0.03em; margin: 0; text-wrap: balance; }
.ref-updated { color: var(--ash); font-size: 0.95rem; }
.toc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin-top: 12px; }
.toc a { display: grid; gap: 4px; padding: 12px 0 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ash); font-size: 0.95rem; }
.toc a b { color: var(--parch); font: 400 1.1rem/1.2 var(--display); letter-spacing: 0.02em; }
.toc a:hover { border-color: var(--bronze); }
@media (max-width: 860px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref-section { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule); scroll-margin-top: 64px; }
.ref-section .wrap { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ref-hero .wrap, .csim, .bench > * { min-width: 0; }
.ref-section h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0; }
.ref-section h3 { font: 400 1.3rem/1.2 var(--display); color: var(--bronze-hi); margin: 10px 0 0; letter-spacing: 0.02em; }
.ref-section .head { margin-bottom: 0; }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.28rem); max-width: 46em; }
.ref-section p { max-width: 60em; }
.note { color: var(--ash); font-size: 0.97rem; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 99px; font: 500 0.88rem/1 var(--sans); color: var(--ash); }
.tag.live { color: var(--moss); border-color: color-mix(in srgb, var(--moss) 45%, var(--rule)); }
.tag.forge { color: var(--bronze-hi); border-color: color-mix(in srgb, var(--bronze) 45%, var(--rule)); }
.table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; background: var(--ink-2); }
.table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.table thead th { font: 500 0.82rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); }
.table tbody th { font: 400 1.02rem/1.25 var(--display); color: var(--bronze-hi); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td.num { white-space: nowrap; color: var(--parch); font-weight: 700; }
.table td.none { color: #5c5446; }
.table.compact th, .table.compact td { padding: 8px 12px; }
.table.runes table { min-width: 820px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 4vw, 52px); }
.cols > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.facts li { color: var(--ash); }
.facts li b { color: var(--parch); font-weight: 500; }
.ref blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--bronze); font: 400 1.15rem/1.45 var(--serif); }
.ref code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.92em; color: var(--parch); }

/* The full crafting simulator */
.csim { display: grid; gap: 24px; }
.csim-setup { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; padding: 16px; border: 1px solid var(--rule); border-radius: 3px; background: var(--ink-2); }
.csim-setup label { display: grid; gap: 6px; color: var(--ash); font-size: 0.92rem; min-width: 0; }
.csim-setup label[hidden] { display: none; }
.csim-setup select { min-height: 44px; min-width: 9rem; max-width: 100%; padding: 8px 10px; font: inherit; font-size: 1rem; color: var(--parch); background: var(--ink); border: 1px solid var(--rule); border-radius: 3px; }
.csim-setup .btn { min-height: 44px; }
.opl-grade { color: var(--ash); font-size: 0.92rem; margin: -4px 0 8px; }

/* Privacy page: the notice block. A placeholder is marked loudly so it cannot pass for the final text. */
.privacy { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.privacy .ref-main { flex: 1 0 auto; }
.notice { display: grid; gap: 16px; max-width: 46em; }
.notice h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 14px; }
.placeholder { display: grid; gap: 12px; padding: 22px 24px; border: 2px dashed var(--bronze); border-radius: 3px; background: color-mix(in srgb, var(--bronze) 7%, transparent); }
.placeholder-label { font: 500 0.92rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--bronze-hi); }