/* Shatter Rush early-access concepts.
   Tokens and the button / field / pill vocabulary are carried over from the Members Hub
   (TS-PatreonHub static-assets.ts) so both surfaces read as one studio.
   Class names follow Astryx parts (Item, Field, Stepper, Banner) so a React port maps 1:1. */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/chakra-petch-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: italic; font-display: swap; src: url("../assets/fonts/chakra-petch-700-italic.woff2") format("woff2"); }

:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;

  --text-xs: 0.875rem; --text-base: 1rem; --text-lead: 1.125rem;
  --font-display: "Chakra Petch", Impact, "Arial Narrow Bold", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --brand: #ec833c; --brand-soft: #f0935a; --brand-press: #d36a26;
  --ink: #f4f4f4; --ink-soft: #d4d4d8; --ink-mute: #9c9ca0;
  --bg: #141415; --surface-1: #1a1a1f; --surface-2: #23232a;
  --border: #2a2a30; --border-strong: #3a3a44;
  --ok: #5fbf6d; --warn: #f5a76a; --danger: #e06464;

  /* Sampled from the game's own art, used only where art and page meet. */
  --logo-yellow: #f2ae24; --logo-red: #eb6a4b;
  --sky: #4670bc; --sky-low: #69acd9;

  --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 220ms;
  --slant: -11deg; /* the lean of the logo lettering */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5;
  min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-soft); text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3 { margin: 0; color: #fff; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Type --- */
.display {
  font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 0.98; letter-spacing: 0.005em;
}
.headline { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: 1.1; letter-spacing: 0.02em; }
.title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.15; letter-spacing: 0.04em; }
.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--ink-soft); max-width: 34rem; }
.small { font-size: var(--text-xs); color: var(--ink-soft); }
.small.mute { color: var(--ink-mute); }
strong { color: #fff; font-weight: 600; }

/* --- Buttons (Members Hub) --- */
.btn {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); min-height: 48px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--brand); color: #1a0f06; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: filter var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.btn:hover { filter: brightness(1.07); text-decoration: none; color: #1a0f06; box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 4px rgba(236,131,60,.14); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); }
.btn.wide { width: 100%; }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); box-shadow: none; }
.btn.secondary:hover { background: var(--surface-2); color: var(--ink); filter: none; box-shadow: none; }
.btn.btn-sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--text-xs); letter-spacing: 0.08em; }
.btn.brand-discord { background: #5865f2; color: #fff; }
.btn.brand-discord:hover { color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 4px rgba(88,101,242,.2); }
.btn.brand-steam { background: #1b2838; color: #fff; border: 1px solid #2f4257; }
.btn.brand-steam:hover { color: #fff; background: #223247; filter: none; box-shadow: 0 0 0 4px rgba(102,192,244,.14); }
.btn.brand-patreon { background: #0a0a0a; color: #fff; border: 1px solid var(--border-strong); }
.btn.brand-patreon:hover { color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.textlink { font-weight: 600; }

/* --- Fields (Astryx Field: label, control, description, status) --- */
.field { display: grid; gap: var(--space-1); }
.field label, .field-label { font-size: var(--text-xs); color: var(--ink-soft); font-weight: 600; }
.field-desc { font-size: var(--text-xs); color: var(--ink-mute); }
.field-status { font-size: var(--text-xs); color: #f0b7b7; display: flex; gap: var(--space-2); align-items: center; }
input[type="email"], input[type="text"] {
  width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border-strong);
  padding: var(--space-3); min-height: 48px; border-radius: var(--radius-sm); font: inherit; font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input::placeholder { color: var(--ink-mute); }
input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(236,131,60,.2); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }

/* --- Pills, banners --- */
.pill { display: inline-flex; align-items: center; gap: 0.4em; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border); letter-spacing: 0.02em; white-space: nowrap; }
.pill.success { background: rgba(95,191,109,.14); color: #a9dcb1; border-color: rgba(95,191,109,.4); }
.pill.warn { background: rgba(245,167,106,.14); color: #f3c79a; border-color: rgba(245,167,106,.4); }
.pill.brand { background: rgba(236,131,60,.14); color: #f4b089; border-color: rgba(236,131,60,.4); }
.banner { border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--ink-soft); display: flex; gap: var(--space-3); align-items: flex-start; }
.banner .i { margin-top: 0.2em; color: var(--ink-mute); }
.banner.error { border-color: rgba(224,100,100,.45); background: rgba(224,100,100,.1); color: #f4d0d0; }
.banner.error .i { color: #f0a0a0; }

/* --- Split shell: art pane + task pane (Astryx login-split) --- */
.split { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(26rem, 1fr); min-height: 100dvh; }
.art {
  position: sticky; top: 0; height: 100dvh; overflow: hidden;
  /* the logo's own yellow-to-red, showing only as slivers along the broken edge */
  background: linear-gradient(180deg, var(--logo-yellow), var(--logo-red));
  clip-path: polygon(0 0, 100% 0, 96.5% 8%, 99% 13%, 93.5% 27%, 97% 32%, 94% 47%, 98.5% 53%, 92.5% 67%, 96% 73%, 91% 89%, 93.5% 100%, 0 100%);
}
.art > img.plate {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%);
  clip-path: polygon(0 0, 99% 0, 95% 9%, 97% 14%, 92% 26%, 95.5% 33%, 92.5% 48%, 96% 53%, 91% 66%, 94.5% 74%, 89.5% 88%, 91.5% 100%, 0 100%);
}
/* keeps the white wordmark and the credit readable over busy plates */
.art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(158deg, rgba(10,14,34,.5) 0, rgba(10,14,34,0) 34%), linear-gradient(0deg, rgba(10,14,34,.6) 0, rgba(10,14,34,0) 20%); }
.art .logo, .art .credit { z-index: 1; }
.art .logo { position: absolute; top: clamp(1.25rem, 4vh, 2.5rem); left: clamp(1.25rem, 3.2vw, 2.75rem); width: min(46%, 21rem); filter: drop-shadow(0 3px 0 rgba(10,20,50,.35)); }
.art .credit { position: absolute; left: clamp(1.25rem, 3.2vw, 2.75rem); bottom: 1.25rem; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.art .credit img { width: 5.25rem; height: auto; }
.pane { padding: clamp(1.5rem, 4vh, 2.75rem) clamp(1.25rem, 3.4vw, 3.5rem) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pane > * { max-width: 33rem; width: 100%; }
.pane-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--ink-soft); }
.pane-foot { margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pane-foot a { color: var(--ink-soft); }
.stack { display: grid; gap: var(--space-4); }
.stack.tight { gap: var(--space-3); }
.stack.loose { gap: var(--space-5); }
.cta { display: grid; gap: var(--space-3); }
.or { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-mute); font-size: var(--text-xs); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Numbered sequence (only where order is real) --- */
.seq { list-style: none; margin: 0; padding: 0; counter-reset: seq; display: grid; gap: var(--space-4); }
.seq li { counter-increment: seq; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); align-items: baseline; }
.seq li::before { content: counter(seq); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--brand); }
.seq b { display: block; color: #fff; font-weight: 600; }
.seq span { color: var(--ink-soft); font-size: var(--text-xs); }

/* --- FAQ --- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-3) 0; min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-weight: 600; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.35rem; color: var(--brand); transition: transform var(--dur-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--space-4); color: var(--ink-soft); font-size: var(--text-xs); max-width: 60ch; }

/* --- Stepper (Astryx: segmented bar per step) --- */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stepper li { font-size: var(--text-xs); color: var(--ink-mute); padding-top: var(--space-2); border-top: 4px solid var(--border-strong); font-weight: 600; }
.stepper li[data-state="done"], .stepper li[data-state="active"] { border-top-color: var(--brand); color: var(--ink); }
.stepper li[data-state="done"]::after { content: " \2713"; color: #a9dcb1; }

/* --- Inline wizard (Astryx form-wizard-inline): active step open, finished steps collapse to a result line --- */
.wiz { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.wiz-step { border-bottom: 1px solid var(--border); padding: var(--space-4) 0; display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--space-3); }
.wiz-num { width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--border-strong); }
.wiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); min-height: 2rem; }
.wiz-head h2 { flex: 1; min-width: 0; }
.wiz-head h2 { font-size: var(--text-lead); font-weight: 600; color: var(--ink-mute); }
.wiz-result, .wiz-body { grid-column: 2; }
.wiz-result { font-size: var(--text-xs); color: var(--ink-soft); display: none; }
.wiz-body { display: none; padding-top: var(--space-3); }
.wiz-change { font-size: var(--text-xs); display: none; }
.wiz-step[data-state="active"] .wiz-num { background: var(--brand); border-color: var(--brand); color: #1a0f06; }
.wiz-step[data-state="active"] .wiz-head h2 { color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem; font-weight: 700; }
.wiz-step[data-state="active"] .wiz-body { display: grid; gap: var(--space-4); }
.wiz-step[data-state="done"] .wiz-num { background: rgba(95,191,109,.14); border-color: rgba(95,191,109,.4); color: #a9dcb1; font-size: 0; }
.wiz-step[data-state="done"] .wiz-num::before { content: "\2713"; font-size: 1rem; }
.wiz-step[data-state="done"] .wiz-head h2 { color: var(--ink); }
.wiz-step[data-state="done"] .wiz-result, .wiz-step[data-state="done"] .wiz-change { display: block; }
.via-email, [data-via="email"] .via-discord { display: none; }
[data-via="email"] .via-email { display: inline; }
.wiz-ask, .wiz-sent { display: grid; gap: var(--space-4); }
.wiz-sent[hidden], .wiz-ask[hidden] { display: none; }

/* --- Signed-in shell --- */
.shell { max-width: 68rem; margin: 0 auto; padding: var(--space-5) clamp(1rem, 3vw, 2rem) var(--space-7); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.topbar .lockup { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-size: var(--text-xs); }
.topbar .lockup img { height: 30px; width: auto; }
.topbar .who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.foot { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--ink-mute); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.foot img { width: 5rem; height: auto; }
.foot a { color: var(--ink-soft); }

/* --- Entries meter: slanted ticks, filled = entries you hold --- */
.meter { display: flex; gap: 5px; }
.meter i { width: 26px; height: 12px; background: var(--surface-2); border: 1px solid var(--border-strong); transform: skewX(var(--slant)); border-radius: 2px; }
.meter i.on { background: var(--brand); border-color: var(--brand); }

/* --- Item rows (Astryx Item: start content, label, description, end content) --- */
.items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); align-items: start; }
.item-start { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1.2rem; color: #fff; }
.item-label { font-weight: 600; color: #fff; }
.item-desc { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 2px; max-width: 52ch; }
.item-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; }
.item-more { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-1); }
.gain { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--brand); white-space: nowrap; }
.gain.done { color: #a9dcb1; }

.code { display: inline-flex; align-items: center; gap: var(--space-3); padding: 0 0 0 var(--space-3); min-height: 44px; background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; color: #fff; min-height: 40px; }
.code button { appearance: none; border: 0; border-left: 1px dashed var(--border-strong); background: transparent; color: var(--brand); cursor: pointer; min-height: 44px; padding: 0 var(--space-3); font: 600 var(--text-xs) var(--font-body); letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.4em; }
.code button:hover { color: var(--brand-soft); }

.panel { border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius-md); padding: var(--space-5); }
.panel.focal { border-color: rgba(236,131,60,.4); }

/* --- Focus shell: one panel front and centre, the art dimmed behind it. Used where the player is adding info. --- */
.backdrop { position: fixed; inset: 0; z-index: -1; background: #0c0d14; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: brightness(.46) saturate(.85); }
.focus { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-3) var(--space-5); }
.focus-top { width: 100%; max-width: 68rem; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: var(--text-xs); }
.focus-top img { width: 8.5rem; }
.focus-top .who { display: flex; align-items: center; gap: var(--space-3); color: #fff; }
.sheet { width: 100%; max-width: var(--sheet, 30rem); align-self: start; margin-top: clamp(0rem, 5vh, 3.5rem); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: var(--space-5); }
.focus-foot { font-size: var(--text-xs); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.focus-foot a { color: #fff; }

/* A question the player can open if they want the answer; closed by default. */
.why { font-size: var(--text-xs); color: var(--ink-soft); }
.why summary { cursor: pointer; color: var(--ink-soft); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary:hover { color: #fff; }
.why p { padding-bottom: var(--space-2); max-width: 46ch; }

/* Rows that open one at a time: label and effect up front, instructions inside. */
.rows { border-top: 1px solid var(--border); }
.rows details { border-bottom: 1px solid var(--border); }
.rows summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 1rem; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; min-height: 60px; }
.rows summary::-webkit-details-marker { display: none; }
.rows summary::after { content: "+"; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink-mute); text-align: center; transition: transform var(--dur-base) var(--ease); }
.rows details[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.rows .item-start { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.rows .item-label { font-weight: 600; color: #fff; }
.rows summary:hover .item-label { color: var(--brand-soft); }
.row-body { padding: 0 0 var(--space-4) calc(2.5rem + var(--space-3)); display: grid; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); }
.row-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 520px) { .row-body { padding-left: 0; } }

/* --- Small screens --- */
@media (max-width: 860px) {
  .btn.btn-sm { min-height: 44px; }
  .split { grid-template-columns: 1fr; }
  .art { position: relative; height: 46vh; min-height: 260px;
    clip-path: polygon(0 0, 100% 0, 100% 89%, 88% 96%, 80% 90%, 62% 98%, 53% 91%, 34% 99%, 25% 92%, 9% 100%, 0 94%); }
  .art > img.plate { clip-path: polygon(0 0, 100% 0, 100% 85%, 87% 93%, 79% 87%, 62% 95%, 52% 88%, 34% 96%, 24% 89%, 9% 97%, 0 91%); }
  .art .credit { display: none; }
  .art .logo { width: min(58%, 15rem); }
  .pane { padding-top: var(--space-4); gap: var(--space-5); }
  .item { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .item-end { grid-column: 2; flex-direction: row; align-items: center; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}