/* Ragdoll Souls shell. SOUL DS019 is the token authority. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
.icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, .button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-35); background: transparent; color: var(--text-primary); font-size: var(--small-size); font-weight: var(--weight-strong); cursor: pointer; border-radius: var(--radius-nested); transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
button:hover:not(:disabled), .button:hover { background: var(--hover-row); }
button:disabled, .button[aria-disabled=true] { color: var(--text-ghosted); border-color: var(--border-22); background: var(--surface-1); cursor: not-allowed; }
.button[aria-disabled=true] { pointer-events: none; }
.primary { background: var(--text-primary); border-color: var(--text-primary); color: var(--canvas); }
.primary:hover:not(:disabled) { background: var(--text-primary); opacity: .88; }
.top { max-width: 1180px; margin: auto; padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--border-22); }
.brand { display: flex; gap: var(--space-2); align-items: center; font-size: var(--headline-size); font-weight: var(--weight-strong); letter-spacing: var(--headline-track); }
.brand > span { font-size: var(--label-size); letter-spacing: var(--label-track); line-height: var(--label-lh); }
nav { display: flex; gap: var(--space-4); font-size: var(--small-size); color: var(--text-secondary); }
nav a:hover, nav a[aria-current=page] { color: var(--text-primary); }
main { max-width: 1100px; margin: 0 auto; padding: var(--space-6) 0; min-height: calc(100dvh - 174px); }
.eyebrow, .menu h2, .bottom, th { font-size: var(--label-size); font-weight: var(--weight-strong); letter-spacing: var(--label-track); line-height: var(--label-lh); text-transform: uppercase; color: var(--text-secondary); }
h1 { font-family: var(--font-sans); font-size: var(--headline-size); font-weight: var(--weight-strong); letter-spacing: var(--headline-track); line-height: var(--display-lh); margin: var(--space-3) 0; overflow-wrap: anywhere; }
h2, h3 { font-size: var(--title-size); font-weight: var(--weight-strong); letter-spacing: var(--title-track); line-height: var(--title-lh); margin: 0 0 var(--space-3); }
p { margin: var(--space-2) 0; }
.muted, .hint { color: var(--text-secondary); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; min-height: 440px; }
.hero h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(32px, 4.5vw, 58px); letter-spacing: var(--display-track); }
.hero p { max-width: 37ch; }
.menu { display: grid; gap: var(--space-4); }
.menu section { background: var(--surface-1); border: 1px solid var(--border-22); border-radius: var(--radius-card); padding: var(--space-4); backdrop-filter: var(--blur-panel); }
.menu h2 { margin: 0 0 var(--space-2); }
.menu button, .menu .button { width: 100%; margin-top: var(--space-2); text-align: left; }
.menu a:not(.button) { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); margin-top: var(--space-2); border-radius: var(--radius-nested); color: var(--text-secondary); }
.menu a:not(.button):hover { color: var(--text-primary); background: var(--hover-row); }
.bottom { max-width: 1100px; margin: auto; padding: var(--space-4) 0; border-top: 1px solid var(--border-22); display: flex; justify-content: space-between; gap: var(--space-3); }
.narrow { max-width: 460px; margin: auto; padding: var(--space-4); border: 1px solid var(--border-22); border-radius: var(--radius-card); background: var(--surface-1); backdrop-filter: var(--blur-panel); }
.form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
label { font-size: var(--small-size); color: var(--text-secondary); display: grid; gap: var(--space-1); }
input { padding: var(--space-2); min-height: var(--control-h); border: 1px solid var(--border-35); background: var(--surface-2); border-radius: var(--radius-nested); color: var(--text-primary); width: 100%; min-width: 0; }
.form p { font-size: var(--small-size); margin: 0; }
.text-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.error { color: var(--text-secondary); min-height: var(--space-3); font-size: var(--small-size); }
.error:not(:empty)::before { content: 'Error · '; color: var(--text-primary); font-weight: var(--weight-strong); }
.profile-head { display: flex; gap: var(--space-4); align-items: center; }
.avatar { display: grid; place-items: center; width: 84px; height: 84px; flex-shrink: 0; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-35); border-radius: var(--radius-pill); }
.avatar svg { width: 76%; height: 76%; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-5) 0; border-block: 1px solid var(--border-22); padding: var(--space-4) 0; gap: var(--space-3); }
.stats strong, .souls strong { display: block; font-family: var(--font-numeric); font-weight: var(--weight-body); font-size: var(--metric-lg); font-variant-numeric: tabular-nums; letter-spacing: var(--metric-track); line-height: var(--display-lh); }
.stats > div > span, .souls > section > span { font-size: var(--small-size); color: var(--text-secondary); }
.souls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0 0 var(--space-5); }
.souls > section { border: 1px solid var(--border-22); background: var(--surface-1); padding: var(--space-4); border-radius: var(--radius-card); backdrop-filter: var(--blur-panel); }
.souls h2 { margin: 0 0 var(--space-3); }
.souls p { font-size: var(--small-size); margin: var(--space-2) 0 0; }
.avatars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.avatar-card { border: 1px solid var(--border-22); background: var(--surface-1); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-4) var(--space-2); backdrop-filter: var(--blur-panel); }
.avatar-card h3 { margin: var(--space-2) 0 var(--space-1); }
.avatar-card p { font-size: var(--small-size); color: var(--text-secondary); min-height: var(--space-4); margin: 0 0 var(--space-2); }
.avatar-card button { justify-content: center; width: 100%; margin-top: auto; }
.avatar-card small { font-size: var(--small-size); color: var(--text-secondary); margin-top: var(--space-1); }
#purchase-status { color: var(--text-secondary); font-size: var(--small-size); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid var(--border-22); padding: var(--space-3) var(--space-2); }
td:last-child, th:last-child { text-align: right; }
tbody tr:hover { background: var(--hover-row); }
.numeric, [inputmode=numeric], td:not(:nth-child(2)), kbd { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.queue { text-align: center; max-width: 560px; margin: var(--space-5) auto; }
.pulse { width: var(--space-6); height: var(--space-6); border: 1px solid var(--border-35); border-top-color: var(--text-primary); border-radius: var(--radius-pill); margin: var(--space-5) auto; animation: spin var(--pulse-duration) linear infinite; }
.queue button { margin-top: var(--space-4); }
@keyframes spin { to { transform: rotate(360deg); } }
@media(max-width:1180px) { main, .bottom { margin-inline: var(--space-5); } }
@media(max-width:700px) {
  .top { padding: var(--space-3) var(--space-4); }
  .brand { font-size: var(--display-size); }
  .brand > span { display: none; }
  nav { gap: var(--space-3); font-size: var(--micro-size); }
  main { margin: 0; padding: var(--space-5) var(--space-4); }
  .hero { grid-template-columns: 1fr; gap: var(--space-4); min-height: 0; }
  .hero h1 { font-size: clamp(32px, 8vw, 48px); }
  .bottom { margin: 0 var(--space-4); }
  .bottom span { display: none; }
  .souls { grid-template-columns: 1fr; gap: var(--space-2); }
  .avatars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-card { padding: var(--space-3) var(--space-2); }
  .avatar-card .avatar { width: 64px; height: 64px; }
  .stats { gap: var(--space-2); }
  .stats strong { font-size: var(--metric-size); }
  .stats > div > span { font-size: var(--micro-size); }
  td, th { padding: var(--space-2) var(--space-1); }
}