/* =============================================================================
   SubSurrender — Component Kit (Phase 1)
   Mobile-first. Token-driven (no raw hex). Namespaced `ss-` to coexist with the
   legacy inline styles during the facelift. Phases 2–11 build with these.

   Every interactive element carries a :focus-visible red ring (§6) and respects
   prefers-reduced-motion.
   ========================================================================== */

/* ---- Base helpers -------------------------------------------------------- */
.ss-display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.ss-tnum { font-variant-numeric: tabular-nums; }

:where(.ss-btn, .ss-input, .ss-textarea, .ss-select, .ss-tab, .ss-switch,
       .ss-lang, .ss-icon-btn,
       .ss-bell, .ss-skip, .ss-side-link, .ss-sidebar__collapse,
       .ss-tabbar__center, .ss-tabbar a.nav-btn, .home-tile, .home-strip):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* =============================================================================
   1. BUTTONS
   ========================================================================== */
.ss-btn {
  --_bg: var(--red-500);
  --_fg: var(--text-on-accent);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); letter-spacing: 0.02em;
  line-height: 1; text-align: center; white-space: nowrap;
  padding: 0 var(--space-4); min-height: 44px; min-width: 44px;   /* touch target */
  border: 1.5px solid var(--_bd); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-base) var(--ease-std),
              transform var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std);
}
.ss-btn:hover  { --_bg: var(--red-400); box-shadow: 0 0 22px -6px var(--red-glow); }
.ss-btn:active { --_bg: var(--red-600); transform: translateY(1px) scale(0.99); }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] {
  --_bg: var(--bg-3); --_fg: var(--text-muted);
  cursor: not-allowed; box-shadow: none; transform: none;
}

.ss-btn--secondary { --_bg: var(--bg-2); --_fg: var(--text-primary); --_bd: var(--border-subtle); }
.ss-btn--secondary:hover  { --_bg: var(--bg-3); --_bd: var(--red-600); box-shadow: none; }
.ss-btn--secondary:active { --_bg: var(--bg-2); }

.ss-btn--ghost { --_bg: transparent; --_fg: var(--text-secondary); --_bd: transparent; }
.ss-btn--ghost:hover  { --_bg: var(--bg-2); --_fg: var(--text-primary); box-shadow: none; }

.ss-btn--destructive { --_bg: transparent; --_fg: var(--danger); --_bd: color-mix(in srgb, var(--danger) 45%, transparent); }
.ss-btn--destructive:hover  { --_bg: color-mix(in srgb, var(--danger) 14%, var(--bg-1)); --_fg: var(--danger); box-shadow: none; }
.ss-btn--destructive:active { --_bg: color-mix(in srgb, var(--danger) 22%, var(--bg-1)); }

.ss-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--text-secondary);
  border: 1.5px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ss-icon-btn:hover { background: var(--bg-2); color: var(--text-primary); }

.ss-btn--sm { min-height: 36px; font-size: var(--text-xs); padding: 0 var(--space-3); }
.ss-btn--lg { min-height: 52px; font-size: var(--text-base); padding: 0 var(--space-6); }
.ss-btn--block { display: flex; width: 100%; }

/* loading state — spinner replaces label, width preserved */
.ss-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.ss-btn.is-loading::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: var(--text-on-accent); border-radius: 50%;
  animation: ssSpin 0.7s linear infinite;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-btn.is-loading::after { animation-duration: 1.4s; } }

/* =============================================================================
   2. QUESTCARD — the hero component. Full-surface rarity treatment.
   Usage: <article class="ss-quest ss-rarity-epic" data-rarity="epic"> …
   ========================================================================== */
.ss-quest {
  --_r: var(--rarity-common);
  --_tint: var(--rarity-common-tint);
  --_glow: var(--rarity-common-glow);
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--_tint);
  border: 1.5px solid color-mix(in srgb, var(--_r) 55%, transparent);
  box-shadow: 0 0 18px -8px var(--_glow), inset 0 0 40px -34px var(--_r);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-std);
}
.ss-quest:hover { transform: translateY(-2px); box-shadow: 0 0 26px -4px var(--_glow), inset 0 0 40px -30px var(--_r); }

/* rarity wiring for the QuestCard */
.ss-rarity-common    { --_r: var(--rarity-common);    --_tint: var(--rarity-common-tint);    --_glow: var(--rarity-common-glow); }
.ss-rarity-uncommon  { --_r: var(--rarity-uncommon);  --_tint: var(--rarity-uncommon-tint);  --_glow: var(--rarity-uncommon-glow); }
.ss-rarity-rare      { --_r: var(--rarity-rare);      --_tint: var(--rarity-rare-tint);      --_glow: var(--rarity-rare-glow); }
.ss-rarity-epic      { --_r: var(--rarity-epic);      --_tint: var(--rarity-epic-tint);      --_glow: var(--rarity-epic-glow); }
.ss-rarity-legendary { --_r: var(--rarity-legendary); --_tint: var(--rarity-legendary-tint); --_glow: var(--rarity-legendary-glow); }
.ss-rarity-mythic    { --_r: var(--rarity-mythic);    --_tint: var(--rarity-mythic-tint);    --_glow: var(--rarity-mythic-glow); }

/* legendary + mythic pulse */
@keyframes ssQuestPulse {
  0%, 100% { box-shadow: 0 0 16px -8px var(--_glow), inset 0 0 40px -34px var(--_r); }
  50%      { box-shadow: 0 0 30px -2px var(--_glow), inset 0 0 40px -26px var(--_r); }
}
.ss-quest.ss-rarity-legendary,
.ss-quest.ss-rarity-mythic { animation: ssQuestPulse 3s var(--ease-std) infinite; }

.ss-quest__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ss-quest__title { font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.ss-quest__desc { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.ss-quest__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ss-quest__cta { align-self: flex-start; --_bg: var(--_r); color: var(--bg-0); }
.ss-quest__cta:hover { --_bg: color-mix(in srgb, var(--_r) 82%, var(--text-on-accent)); box-shadow: 0 0 20px -6px var(--_glow); }

/* duration / xp chips */
.ss-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--bg-2); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.ss-chip--xp { color: var(--rarity-legendary); border-color: color-mix(in srgb, var(--rarity-legendary) 40%, transparent); }
.ss-chip .ss-tnum { font-variant-numeric: tabular-nums; }

/* QuestCard states */
.ss-quest.is-active { box-shadow: 0 0 24px -6px var(--_glow), 0 0 0 1.5px var(--_r); }
.ss-quest.is-completed::after {
  content: '✓'; position: absolute; top: var(--space-3); right: var(--space-4);
  color: var(--success); font-weight: var(--weight-bold); font-size: var(--text-lg);
}
.ss-quest.is-completed { background: color-mix(in srgb, var(--success) 7%, var(--bg-1));
  border-color: color-mix(in srgb, var(--success) 40%, transparent); animation: none; }
.ss-quest.is-failed { filter: saturate(0.4); border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  background: var(--bg-1); animation: none; }
.ss-quest.is-failed .ss-quest__cta { --_bg: var(--bg-3); color: var(--danger); }
.ss-quest.is-locked { filter: grayscale(1); opacity: 0.6; background: var(--bg-1);
  border-color: var(--border-subtle); box-shadow: none; animation: none; }
.ss-quest.is-locked .ss-quest__cta { pointer-events: none; }
.ss-quest__lock { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .ss-quest.ss-rarity-legendary, .ss-quest.ss-rarity-mythic { animation: none; }
  .ss-quest, .ss-quest:hover { transform: none; }
}

/* =============================================================================
   3. XP BAR — animated fill, skinnable
   ========================================================================== */
.ss-xpbar { --_skin: var(--red-500); display: flex; flex-direction: column; gap: var(--space-1); }
.ss-xpbar__track {
  position: relative; height: 10px; border-radius: var(--radius-full);
  background: var(--bg-2); border: 1px solid var(--border-subtle); overflow: hidden;
}
.ss-xpbar__fill {
  height: 100%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--_skin) 70%, var(--bg-0)), var(--_skin));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--_skin) 60%, transparent);
  width: var(--xp, 0%);
  transition: width var(--dur-slow) var(--ease-out);
}
.ss-xpbar__labels { display: flex; justify-content: space-between;
  font-size: var(--text-xs); color: var(--text-muted); }
.ss-xpbar__labels .ss-tnum { color: var(--text-secondary); }
/* skin variants (Phase 6 cosmetics wire more) */
.ss-xpbar--pink { --_skin: var(--cosmetic-pink); }
.ss-xpbar--legendary { --_skin: var(--rarity-legendary); }
@media (prefers-reduced-motion: reduce) { .ss-xpbar__fill { transition: none; } }

/* =============================================================================
   4. LEVEL BADGE + STREAK COUNTER
   ========================================================================== */
.ss-level {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  background: var(--bg-2); border: 1.5px solid var(--red-600);
  border-radius: var(--radius-md); box-shadow: 0 0 14px -6px var(--red-glow);
}
.ss-streak {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
  color: var(--warning);
}
.ss-streak__flame { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--warning) 60%, transparent)); }

/* =============================================================================
   5. RARITY BADGE — small chip usable anywhere
   ========================================================================== */
.ss-rbadge {
  --_r: var(--rarity-common);
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  color: var(--_r); background: color-mix(in srgb, var(--_r) 12%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--_r) 50%, transparent);
}
.ss-rbadge.ss-rarity-common    { --_r: var(--rarity-common); }
.ss-rbadge.ss-rarity-uncommon  { --_r: var(--rarity-uncommon); }
.ss-rbadge.ss-rarity-rare      { --_r: var(--rarity-rare); }
.ss-rbadge.ss-rarity-epic      { --_r: var(--rarity-epic); }
.ss-rbadge.ss-rarity-legendary { --_r: var(--rarity-legendary); }
.ss-rbadge.ss-rarity-mythic    { --_r: var(--rarity-mythic);
  box-shadow: 0 0 12px -4px var(--rarity-mythic-glow); }

/* =============================================================================
   6. MODAL (desktop) / BOTTOMSHEET (mobile) — one API
   ========================================================================== */
.ss-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-std);
}
.ss-overlay.is-open { opacity: 1; pointer-events: auto; }
.ss-modal {
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-6); box-shadow: var(--elev-3);
  transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.ss-overlay.is-open .ss-modal { transform: translateY(0); }
.ss-modal__title { font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-3); }
@media (min-width: 640px) {
  .ss-overlay { align-items: center; }
  .ss-modal { border-radius: var(--radius-lg); transform: translateY(12px) scale(0.98); }
  .ss-overlay.is-open .ss-modal { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-overlay, .ss-modal { transition: opacity var(--dur-base) linear; }
  .ss-modal { transform: none; }
}

/* =============================================================================
   7. TOAST / NOTIFICATION
   ========================================================================== */
.ss-toasts {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0) + var(--space-4));
  transform: translateX(-50%); z-index: 1100;
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(420px, calc(100vw - var(--space-8)));
}
.ss-toast {
  --_accent: var(--info);
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-2); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--_accent);
  box-shadow: var(--elev-2);
  animation: ssToastIn var(--dur-base) var(--ease-out) both;
}
.ss-toast--success { --_accent: var(--success); }
.ss-toast--error   { --_accent: var(--danger); }
.ss-toast--info    { --_accent: var(--info); }
.ss-toast--reward  { --_accent: var(--rarity-legendary);
  background: color-mix(in srgb, var(--rarity-legendary) 8%, var(--bg-2)); }
.ss-toast.ss-rarity-mythic { --_accent: var(--rarity-mythic); }
.ss-toast.ss-rarity-epic   { --_accent: var(--rarity-epic); }
.ss-toast__body { font-size: var(--text-sm); line-height: var(--lh-sm); }
@keyframes ssToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-toast { animation: none; } }

/* =============================================================================
   8. FORM CONTROLS — dark, red focus ring, visible errors
   ========================================================================== */
.ss-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.ss-label { font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-secondary); letter-spacing: 0.04em; }
.ss-input, .ss-textarea, .ss-select {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary);
  background: var(--bg-2); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ss-textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }
.ss-input::placeholder, .ss-textarea::placeholder { color: var(--text-muted); }
.ss-input:focus, .ss-textarea:focus, .ss-select:focus { border-color: var(--red-500); }
.ss-field.is-invalid .ss-input,
.ss-field.is-invalid .ss-textarea,
.ss-field.is-invalid .ss-select { border-color: var(--danger); }
.ss-help { font-size: var(--text-xs); color: var(--text-muted); }
.ss-field.is-invalid .ss-help { color: var(--danger); }

/* checkbox + radio */
.ss-check { display: inline-flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; line-height: var(--lh-sm); }
.ss-check input { width: 18px; height: 18px; accent-color: var(--red-500); margin-top: 1px; flex-shrink: 0; }

/* toggle switch */
.ss-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.ss-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.ss-switch__track { width: 44px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-3); border: 1px solid var(--border-subtle); transition: background var(--dur-fast); }
.ss-switch__thumb { position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast); }
.ss-switch input:checked ~ .ss-switch__track { background: color-mix(in srgb, var(--red-500) 40%, var(--bg-3)); }
.ss-switch input:checked ~ .ss-switch__thumb { transform: translate(20px, -50%); background: var(--red-400); }
.ss-switch input:focus-visible ~ .ss-switch__track { box-shadow: var(--focus-ring); }

/* slider */
.ss-slider { width: 100%; accent-color: var(--red-500); height: 24px; }

/* =============================================================================
   9. TABS + ACCORDION
   ========================================================================== */
.ss-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.ss-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--space-3) var(--space-4); min-height: 44px;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ss-tab:hover { color: var(--text-primary); }
.ss-tab[aria-selected="true"] { color: var(--red-400); border-bottom-color: var(--red-500); }

.ss-accordion { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.ss-accordion__item + .ss-accordion__item { border-top: 1px solid var(--border-subtle); }
.ss-accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); min-height: 44px;
  background: var(--bg-1); color: var(--text-primary); cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: none; text-align: left;
}
.ss-accordion__head:hover { background: var(--bg-2); }
.ss-accordion__icon { transition: transform var(--dur-base) var(--ease-std); color: var(--text-muted); }
.ss-accordion__head[aria-expanded="true"] .ss-accordion__icon { transform: rotate(180deg); }
.ss-accordion__panel { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: var(--lh-sm); }
.ss-accordion__panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ss-accordion__icon { transition: none; } }

/* =============================================================================
   10. CARD / EMPTYSTATE / SKELETON / SPINNER
   ========================================================================== */
.ss-card { background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4); }

.ss-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); padding: var(--space-12) var(--space-4); color: var(--text-secondary); }
.ss-empty__icon { font-size: var(--text-4xl); opacity: 0.5; }
.ss-empty__line { font-size: var(--text-sm); }

.ss-skeleton { background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
  background-size: 400% 100%; border-radius: var(--radius-sm); animation: ssShimmer 1.4s ease infinite;
  min-height: 1em; }
@keyframes ssShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ss-skeleton { animation: none; opacity: 0.7; } }

.ss-spinner { display: inline-block; width: 24px; height: 24px;
  border: 2px solid var(--bg-3); border-top-color: var(--red-500); border-radius: 50%;
  animation: ssSpin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ss-spinner { animation-duration: 1.4s; } }

/* =============================================================================
   11. LANGUAGE SWITCHER — flag-free, names in their own language
   ========================================================================== */
.ss-lang { position: relative; display: inline-block; }
.ss-lang__btn {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px;
  padding: 0 var(--space-3); cursor: pointer;
  background: var(--bg-2); color: var(--text-primary);
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm);
}
.ss-lang__btn:hover { border-color: var(--red-600); }
.ss-lang__menu {
  position: absolute; right: 0; bottom: calc(100% + var(--space-1)); min-width: 160px;
  background: var(--bg-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--elev-2); padding: var(--space-1);
  list-style: none; margin: 0; z-index: 1200;
}
.ss-lang__menu[hidden] { display: none; }
.ss-lang__opt {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  min-height: 40px; background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm);
}
.ss-lang__opt:hover { background: var(--bg-3); color: var(--text-primary); }
.ss-lang__opt[aria-current="true"] { color: var(--red-400); }

/* =============================================================================
   12. PROFILE FRAME — slot around avatars (cosmetic frames ship Phase 6)
   ========================================================================== */
.ss-frame { --_r: var(--border-subtle);
  display: inline-grid; place-items: center; padding: 3px; border-radius: var(--radius-full);
  background: var(--bg-2); border: 2px solid var(--_r); }
.ss-frame > img, .ss-frame > .ss-frame__avatar {
  display: block; width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; }
.ss-frame--rare      { --_r: var(--rarity-rare); box-shadow: 0 0 14px -4px var(--rarity-rare-glow); }
.ss-frame--epic      { --_r: var(--rarity-epic); box-shadow: 0 0 14px -4px var(--rarity-epic-glow); }
.ss-frame--legendary { --_r: var(--rarity-legendary); box-shadow: 0 0 16px -3px var(--rarity-legendary-glow); }
.ss-frame--mythic    { --_r: var(--rarity-mythic); box-shadow: 0 0 18px -3px var(--rarity-mythic-glow); }

/* =============================================================================
   12b. COSMETICS (Phase 6) — frames, backgrounds, titles, name effects.
   All token-/CSS-driven (no image pipeline). Catalog id → class in
   public/js/cosmetics-catalog.js (cssClass). Legendary/Mythic frames pulse;
   reduced-motion degrades every pulse to a static glow.
   ========================================================================== */
/* Cosmetic FRAMES — self-contained over the base .ss-frame (set --_r + glow). */
.cos-frame--plain    { --_r: var(--border-subtle); }
.cos-frame--etched   { --_r: var(--rarity-common-border); border-style: double; border-width: 3px; }
.cos-frame--ringed   { --_r: var(--rarity-uncommon-border); box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--rarity-uncommon-border); }
.cos-frame--iron     { --_r: #8a8f98; box-shadow: 0 0 12px -4px var(--rarity-rare-glow); }
.cos-frame--obsidian { --_r: var(--rarity-rare); background: linear-gradient(135deg, #15151a, #23232b); box-shadow: 0 0 12px -4px var(--rarity-rare-glow); }
.cos-frame--rose     { --_r: var(--rarity-epic); box-shadow: 0 0 14px -3px var(--rarity-epic-glow); }
.cos-frame--gilded   { --_r: #d4af37; box-shadow: 0 0 16px -3px rgba(212, 175, 55, 0.42); }
.cos-frame--ember    { --_r: var(--rarity-legendary); --_glow: var(--rarity-legendary-glow); box-shadow: 0 0 16px -3px var(--_glow); }
.cos-frame--halo     { --_r: var(--rarity-legendary); --_glow: var(--rarity-legendary-glow); box-shadow: 0 0 0 2px var(--bg-0), 0 0 16px -3px var(--_glow); }
.cos-frame--eclipse  { --_r: var(--rarity-mythic); --_glow: var(--rarity-mythic-glow); background: radial-gradient(circle at 30% 30%, #2a0a0a, #0a0a0c); box-shadow: 0 0 20px -2px var(--_glow); }
/* Slow glow pulse for Legendary/Mythic frames (the signature element travels). */
@keyframes ssFramePulse { 0%, 100% { box-shadow: 0 0 10px -4px var(--_glow); } 50% { box-shadow: 0 0 22px -1px var(--_glow); } }
.cos-frame--pulse { animation: ssFramePulse 3s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce) { .cos-frame--pulse { animation: none; box-shadow: 0 0 14px -3px var(--_glow); } }

/* Cosmetic BACKGROUNDS — profile-header treatments. All dark → text-primary keeps contrast. */
.cos-bg--charcoal      { background: var(--bg-1); }
.cos-bg--slate         { background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); }
.cos-bg--velvet        { background: linear-gradient(160deg, #1a1118, var(--bg-1)); }
.cos-bg--crimson       { background: linear-gradient(160deg, color-mix(in srgb, var(--rarity-mythic) 16%, var(--bg-1)), var(--bg-1)); }
.cos-bg--nebula        { background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--rarity-epic) 22%, var(--bg-1)), var(--bg-1)); }
.cos-bg--aurora        { background: linear-gradient(120deg, color-mix(in srgb, var(--rarity-legendary) 16%, var(--bg-1)), color-mix(in srgb, var(--rarity-rare) 16%, var(--bg-1))); }
.cos-bg--obsidian-silk { background: linear-gradient(135deg, #0a0a0c, #1c0e10 60%, #0a0a0c); }

/* Cosmetic TITLES — colored by rarity. */
.cos-title--common    { color: var(--text-muted); }
.cos-title--uncommon  { color: var(--rarity-uncommon); }
.cos-title--rare      { color: var(--rarity-rare); }
.cos-title--epic      { color: var(--rarity-epic); }
.cos-title--legendary { color: var(--rarity-legendary); }
.cos-title--mythic    { color: var(--rarity-mythic); }

/* Cosmetic NAME EFFECTS — subtle tint/glow only, never text animation (readability). */
.cos-name--plain {}
.cos-name--glow  { color: color-mix(in srgb, var(--rarity-epic) 30%, var(--text-primary)); text-shadow: 0 0 8px var(--rarity-epic-glow); }
.cos-name--gilt  { color: #e9c46a; text-shadow: 0 0 6px rgba(212, 175, 55, 0.4); }

/* XP skin variants (pink + legendary defined above; complete the launch set). */
.ss-xpbar--default { --_skin: var(--red-500); }
.ss-xpbar--rare    { --_skin: var(--rarity-rare); }
.ss-xpbar--mythic  { --_skin: var(--rarity-mythic); }

/* PlayerIdentity — the one shared avatar+frame+name+title cluster (HUD/leaderboard/feed/profile). */
.ss-pid { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ss-pid__frame { --_sz: 40px; width: calc(var(--_sz) + 6px); height: calc(var(--_sz) + 6px); flex: 0 0 auto; }
.ss-pid__frame > img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; display: block; }
.ss-pid--mini .ss-pid__frame { --_sz: 32px; }
.ss-pid--full .ss-pid__frame { --_sz: 96px; }
.ss-pid__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ss-pid__name { font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-pid__title { font-size: var(--text-xs); line-height: 1.1; }

/* Customize editor — catalog grid; owned = selectable, unowned = silhouette + source. */
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-3); }
.cos-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-1); cursor: pointer; min-height: 44px; text-align: center; }
.cos-cell:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; }
.cos-cell.is-equipped { border-color: var(--red-500); box-shadow: 0 0 0 1px var(--red-500); }
.cos-cell.is-locked { opacity: 0.72; }
.cos-cell.is-locked .cos-swatch { filter: grayscale(1) brightness(0.5); }
.cos-locked { filter: grayscale(1) brightness(0.5); opacity: 0.6; display: inline-block; }
.invite-milestone.is-reached { background: var(--bg-1); }
.invite-milestone.is-next { box-shadow: 0 0 12px -4px var(--red-glow); }

/* Phase 10 — the Mistress's seal (challenge code shown before proof upload). */
.proof-seal { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--red-600);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--red-500) 8%, var(--bg-1)); }
.proof-seal__head { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-400); }
.proof-seal__code { font-family: 'Space Grotesk', var(--font-display, monospace); font-size: 2rem; font-weight: 700;
  letter-spacing: 0.25em; color: var(--text-primary); text-align: center; padding: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.cos-cell__name { font-size: var(--text-xs); color: var(--text-secondary); }
.cos-cell__source { font-size: 0.62rem; color: var(--text-muted); }
.cos-swatch { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--bg-2); }
.cos-swatch--bg { border-radius: var(--radius-sm); width: 56px; height: 40px; }
.current-state-panel { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: var(--bg-1); }
.current-state-panel .state-row { font-size: var(--text-sm); color: var(--text-secondary); padding: 2px 0; }

/* =============================================================================
   12c. LOOT REVEAL (Phase 7) — the cosmetic drop card + rarity glow burst.
   Built on motion tokens; reduced-motion = static glow, no burst.
   ========================================================================== */
.rr-loot--drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); }
.rr-loot-swatch { transform: scale(1.4); margin: var(--space-2) 0; }
.rr-loot-name { font-size: var(--text-lg); font-weight: 700; }
.rr-loot-type { font-size: var(--text-xs); color: var(--text-muted); }
.rr-loot-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
@keyframes ssLootBurst { 0% { box-shadow: 0 0 0 0 var(--rarity-mythic-glow); } 60% { box-shadow: 0 0 40px 6px var(--rarity-legendary-glow); } 100% { box-shadow: 0 0 18px -2px var(--rarity-legendary-glow); } }
.rr-loot--burst { animation: ssLootBurst 1.2s var(--ease-out) 1; }
@media (prefers-reduced-motion: reduce) { .rr-loot--burst { animation: none; box-shadow: 0 0 18px -2px var(--rarity-legendary-glow); } }
.feed-lootfind .feed-lootfind-body { font-weight: 600; }

/* =============================================================================
   i18n layout resilience — never truncate; tolerate ~35% expansion (§4)
   ========================================================================== */
.ss-btn, .ss-tab, .ss-chip, .ss-rbadge { white-space: normal; height: auto; }
.ss-btn { min-height: 44px; }

/* =============================================================================
   12. APP SHELL (Phase 2) — tab bar, sidebar, HUD bell, badges, offline banner
   ========================================================================== */

/* visually-hidden (screen-reader only) */
.ss-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* skip-to-content — first element in tab order, visible only on focus */
.ss-skip {
  position: fixed; top: var(--space-2); left: var(--space-2); z-index: 1000;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--text-primary); font-size: var(--text-sm);
  text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-std);
}
.ss-skip:focus-visible { transform: translateY(0); }

/* offline banner — thin, fixed, never shifts content */
.ss-offline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: none; padding: var(--space-2) var(--space-4); text-align: center;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-1));
  color: var(--text-primary); border-bottom: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}
.ss-offline.show { display: block; }

/* badge dot — "something new". Always aria-hidden; pair with a .ss-sr label. */
.ss-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--red-500); box-shadow: 0 0 8px var(--red-glow);
  display: inline-block; opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ss-dot.show { opacity: 1; transform: scale(1); }

/* HUD bell (header) — space for the count badge is always reserved */
.ss-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; border: none; border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); font-size: 1.05rem; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.ss-bell:hover { background: var(--bg-2); color: var(--text-primary); }
.ss-bell__count {
  position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--red-500); color: var(--text-on-accent);
  font-family: var(--font-body); font-size: 0.62rem; font-weight: var(--weight-semibold);
  border: 1px solid var(--bg-0); box-shadow: 0 0 7px var(--red-glow);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ss-bell__count.show { opacity: 1; transform: scale(1); }

/* ---- bottom tab bar (mobile) -------------------------------------------- */
.ss-tabbar {
  display: flex; align-items: stretch;
  background: var(--bg-1); border-top: 1px solid var(--border-subtle);
  position: sticky; bottom: 0; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
}
.ss-tabbar a.nav-btn { text-decoration: none; min-height: 52px; }

/* center action — raised circular Get-task button */
.ss-tabbar__centerwrap {
  flex: 1; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding-bottom: 0.45rem; min-width: 64px;
}
.ss-tabbar__center {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--red-500); color: var(--text-on-accent); border: 2px solid var(--bg-0);
  font-size: 1.35rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 22px var(--red-glow), 0 4px 14px rgba(0, 0, 0, 0.55);
  transition: background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.ss-tabbar__center:hover { background: var(--red-400); box-shadow: 0 0 30px var(--red-glow), 0 4px 14px rgba(0, 0, 0, 0.55); }
.ss-tabbar__center:active { background: var(--red-600); transform: translateX(-50%) scale(0.94); }
.ss-tabbar__center-label {
  font-family: var(--font-display); font-size: 0.5rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); pointer-events: none;
}

/* tab badge dot, positioned over the icon — space reserved (absolute) */
.ss-dot--tab { position: absolute; top: 4px; right: 22%; }

/* ---- desktop sidebar ------------------------------------------------------ */
:root { --ss-sidebar-w: 228px; --ss-sidebar-w-collapsed: 64px; }

.ss-sidebar {
  display: none; /* mobile: hidden — the tab bar rules */
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 150;
  width: var(--ss-sidebar-w);
  flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--bg-1); border-right: 1px solid var(--border-subtle);
  overflow-y: auto; overflow-x: hidden;
  transition: width var(--dur-base) var(--ease-std);
}
.ss-sidebar__get { margin-bottom: var(--space-4); gap: var(--space-2); white-space: nowrap; }

.ss-side-link {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm);
  font-weight: var(--weight-medium); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.ss-side-link:hover { background: var(--bg-2); color: var(--text-primary); }
.ss-side-link.active {
  background: var(--bg-2); color: var(--text-primary);
}
.ss-side-link.active::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-3)); top: 8px; bottom: 8px; width: 3px;
  background: var(--red-500); border-radius: 0 2px 2px 0; box-shadow: 0 0 10px var(--red-glow);
}
.ss-side-icon { font-size: 1.05rem; width: 24px; text-align: center; flex: none; }
.ss-side-link .ss-dot { margin-left: auto; }
.ss-side-divider { height: 1px; background: var(--border-subtle); margin: var(--space-3) var(--space-2); }

/* shop — quiet premium treatment: crown + one subtle shimmer on hover */
@keyframes ssShimmer {
  0% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rarity-legendary) 75%, transparent)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
.ss-side-link--shop .ss-side-icon { color: var(--rarity-legendary); }
.ss-side-link--shop:hover .ss-side-icon { animation: ssShimmer 0.9s var(--ease-out) 1; }

.ss-sidebar__collapse {
  margin-top: auto; min-height: 40px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.ss-sidebar__collapse:hover { background: var(--bg-2); color: var(--text-primary); }

/* collapsed state — icons only, labels hidden (persisted per user) */
.ss-side-collapsed .ss-sidebar { width: var(--ss-sidebar-w-collapsed); padding-left: var(--space-2); padding-right: var(--space-2); }
.ss-side-collapsed .ss-side-label { display: none; }
.ss-side-collapsed .ss-sidebar__get { padding: 0; justify-content: center; }

@media (min-width: 1024px) {
  .ss-sidebar { display: flex; }
  .ss-tabbar { display: none; }
  .ss-with-sidebar { padding-left: var(--ss-sidebar-w); transition: padding-left var(--dur-base) var(--ease-std); }
  .ss-side-collapsed .ss-with-sidebar { padding-left: var(--ss-sidebar-w-collapsed); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-sidebar, .ss-with-sidebar { transition: none; }
  .ss-side-link--shop:hover .ss-side-icon { animation: none; }
}

/* styleguide demo variant — render the sidebar in normal flow */
.ss-sidebar--demo { display: flex; position: static; height: 420px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }

/* ---- home hub ------------------------------------------------------------- */
.home-strip {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6);
  text-decoration: none; color: inherit; cursor: pointer;
}
.home-strip .ss-xpbar { flex: 1; min-width: 0; }
.home-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 640px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }
.home-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); padding: var(--space-4); min-height: 84px;
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  color: var(--text-primary); text-decoration: none; font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.home-tile:hover { border-color: var(--red-600); transform: translateY(-2px); box-shadow: 0 0 18px -8px var(--red-glow); }
.home-tile .ss-dot { position: absolute; top: var(--space-3); right: var(--space-3); }
.home-tile__icon { font-size: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .home-tile, .home-tile:hover { transform: none; transition: none; } }

/* draw-the-eye pulse for the quest board after "Get task" */
@keyframes ssAttention {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40% { box-shadow: 0 0 0 3px var(--red-glow); }
}
.ss-attention { animation: ssAttention 1.1s var(--ease-out) 1; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) { .ss-attention { animation: none; } }

/* =============================================================================
   15. ONBOARDING (Phase 3) — progress bar, option cards, strength meter,
   consent cards, step layout. All tokens; reduced-motion honored.
   ========================================================================== */
/* Thin red progress bar — set the fill via --progress (e.g. style="--progress: 43%"). */
.ss-progress { height: 4px; background: var(--bg-2); border-radius: var(--radius-full); overflow: hidden; }
.ss-progress__fill { height: 100%; width: var(--progress, 0%); background: var(--red-500);
  border-radius: inherit; box-shadow: 0 0 8px var(--red-glow);
  transition: width var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ss-progress__fill { transition: none; } }

/* Password strength meter — JS sets data-score="0..4" and toggles .is-on on the bars. */
.ss-strength { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.ss-strength__bars { display: flex; gap: var(--space-1); }
.ss-strength__bar { height: 4px; flex: 1; background: var(--bg-2); border-radius: var(--radius-full);
  transition: background var(--dur-fast); }
.ss-strength[data-score="1"] .ss-strength__bar.is-on { background: var(--danger); }
.ss-strength[data-score="2"] .ss-strength__bar.is-on { background: var(--warning); }
.ss-strength[data-score="3"] .ss-strength__bar.is-on { background: var(--info); }
.ss-strength[data-score="4"] .ss-strength__bar.is-on { background: var(--success); }
.ss-strength__label { font-size: var(--text-xs); color: var(--text-muted); min-height: 1em; }

/* Selectable option cards (radio behind a card label) — Step 4 identity/experience. */
.ss-optcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.ss-optcard { position: relative; }
.ss-optcard input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.ss-optcard label { display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: var(--space-2) var(--space-3); cursor: pointer;
  background: var(--bg-2); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--lh-sm);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.ss-optcard label:hover { background: var(--bg-3); }
.ss-optcard input:checked + label { border-color: var(--red-500); color: var(--text-primary);
  background: var(--bg-3); }
.ss-optcard input:focus-visible + label { box-shadow: var(--focus-ring); }

/* Onboarding step layout (used on /welcome and demoed on /styleguide). */
.ss-onb { width: 100%; max-width: 560px; margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-16); }
.ss-onb__top { position: sticky; top: 0; z-index: 5; background: var(--bg-0);
  padding: var(--space-3) 0 var(--space-2); }
.ss-onb__steplabel { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.ss-onb__head { margin: var(--space-5) 0 var(--space-4); }
.ss-onb__head h1 { font-family: var(--font-display); font-size: var(--text-2xl);
  line-height: var(--lh-2xl); color: var(--text-primary); margin: 0 0 var(--space-2); }
.ss-onb__lead { font-size: var(--text-base); line-height: var(--lh-base); color: var(--text-secondary); margin: 0; }
.ss-onb__actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); align-items: center; }
.ss-onb__actions .ss-btn { flex: 1; }
.ss-onb__actions .ss-btn--ghost { flex: 0 0 auto; }
.ss-onb__error { color: var(--danger); font-size: var(--text-sm); line-height: var(--lh-sm);
  margin-top: var(--space-3); min-height: 1.2em; }
.ss-onb__quiet { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-sm);
  margin-top: var(--space-4); }
/* consent cards: plain ss-card stack with a touch more rhythm */
.ss-onb .ss-card + .ss-card { margin-top: var(--space-3); }
.ss-onb__checks { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
/* date-of-birth segmented fields */
.ss-dob { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--space-2); }
/* quiet verification banner shown during steps 4-6 */
.ss-onb__verify { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  font-size: var(--text-xs); line-height: var(--lh-sm); color: var(--text-secondary); }
.ss-onb__verify .ss-btn { margin-left: auto; }
/* tone preview line (step 5) */
.ss-onb__preview { font-style: italic; color: var(--text-secondary); font-size: var(--text-sm);
  line-height: var(--lh-sm); border-left: 2px solid var(--red-500);
  padding-left: var(--space-3); margin-top: var(--space-3); min-height: 2.4em; }

/* One-shot arrival pulse on the Get-task action (step 7). Reduced motion: static highlight. */
@keyframes ssPulseOnce {
  0% { box-shadow: 0 0 0 0 var(--red-glow); }
  60% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ss-pulse-once { animation: ssPulseOnce 1.6s var(--ease-out) 2; }
@media (prefers-reduced-motion: reduce) {
  .ss-pulse-once { animation: none; box-shadow: 0 0 0 3px var(--red-glow); }
}

/* ===================== Phase 4 — Preferences ===================== */
/* One-time "leveled up" banner */
.ss-prefs-banner { display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--bg-1); border: 1px solid var(--red-500); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--elev-1); }
.ss-prefs-banner__title { font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--text-primary); margin: 0 0 var(--space-1); }
.ss-prefs-banner__body { font-size: var(--text-sm); line-height: var(--lh-sm);
  color: var(--text-secondary); margin: 0; }

/* Consent checkpoint card */
.ss-prefs-consent { background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.ss-prefs-consent .ss-help { margin-top: var(--space-2); }

/* Identity tag cards: an optcard with a one-line description under the label */
.ss-tagcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.ss-tagcard { position: relative; }
.ss-tagcard input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.ss-tagcard label { display: flex; flex-direction: column; gap: var(--space-1); height: 100%;
  padding: var(--space-3); cursor: pointer; background: var(--bg-2);
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.ss-tagcard label:hover { background: var(--bg-3); }
.ss-tagcard__name { color: var(--text-primary); font-size: var(--text-sm); line-height: var(--lh-sm); }
.ss-tagcard__desc { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-sm); }
.ss-tagcard input:checked + label { border-color: var(--red-500); background: var(--bg-3); }
.ss-tagcard input:focus-visible + label { box-shadow: var(--focus-ring); }

/* Limits — the sacred layer. Hard limits get the dark-red border treatment. */
.ss-limits { border: 1.5px solid color-mix(in srgb, var(--danger) 55%, var(--bg-0));
  border-radius: var(--radius-md); padding: var(--space-4); background: var(--bg-1); }
.ss-limits--soft { border-color: var(--border-subtle); }
.ss-limits__lede { color: var(--text-primary); font-size: var(--text-sm); line-height: var(--lh-sm);
  margin: 0 0 var(--space-3); font-weight: 600; }
.ss-limits--soft .ss-limits__lede { font-weight: 400; color: var(--text-secondary); }
.ss-limit-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ss-limit-chip { display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--bg-2));
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  font-size: var(--text-sm); color: var(--text-primary); }
.ss-limits--soft .ss-limit-chip { border-color: var(--border-subtle); }
.ss-limit-chip__date { color: var(--text-muted); font-size: var(--text-xs); }
.ss-limit-chip button { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-width: 28px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: var(--text-base); }
.ss-limit-chip button:hover { color: var(--danger); background: var(--bg-3); }
.ss-limit-chip button:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ss-limit-add { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ss-limit-add .ss-select, .ss-limit-add .ss-input { flex: 1 1 160px; }

/* Equipment inventory rows */
.ss-equip-cat { margin-bottom: var(--space-4); }
.ss-equip-cat__name { font-family: var(--font-display); font-size: var(--text-base);
  color: var(--text-primary); margin: 0 0 var(--space-2); }
.ss-equip-row { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.ss-equip-row:first-of-type { border-top: 0; }
.ss-equip-row__main { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.ss-equip-row__main .ss-check { flex: 1; align-items: center; }
.ss-equip-row__variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2); padding: var(--space-2) 0 var(--space-1) var(--space-6); }
.ss-equip-row__variants .ss-field { margin: 0; }
.ss-info-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-width: 28px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--bg-2); color: var(--info);
  font-size: var(--text-xs); cursor: pointer; text-decoration: none; }
.ss-info-btn:hover { background: var(--bg-3); }
.ss-info-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Chastity status block */
.ss-chastity { background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4); }
.ss-chastity__day { font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--text-primary); margin: var(--space-2) 0; }
.ss-chastity__meta { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.ss-chastity__safety { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--lh-sm);
  margin-top: var(--space-3); }

/* Section save row */
.ss-prefs-saverow { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }