:root {
  --relay-accent: #6d4aff;
  --bs-primary: #6d4aff;
  --bs-primary-rgb: 109, 74, 255;
  --bs-link-color: #6d4aff;
  --bs-link-color-rgb: 109, 74, 255;
}
[data-bs-theme="dark"] {
  --relay-accent: #a78bfa;
  --bs-link-color: #a78bfa;
  --bs-link-color-rgb: 167, 139, 250;
}
.btn-primary { --bs-btn-bg: #6d4aff; --bs-btn-border-color: #6d4aff; --bs-btn-hover-bg: #5935f0; --bs-btn-hover-border-color: #5935f0; --bs-btn-active-bg: #4c2bd6; --bs-btn-disabled-bg: #6d4aff; --bs-btn-disabled-border-color: #6d4aff; }
.btn-outline-primary { --bs-btn-color: var(--relay-accent); --bs-btn-border-color: var(--relay-accent); --bs-btn-hover-bg: #6d4aff; --bs-btn-hover-border-color: #6d4aff; --bs-btn-active-bg: #5935f0; }
.text-bg-primary { background-color: #6d4aff !important; }

body { background: var(--bs-tertiary-bg); }
.container-narrow { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.brand { font-weight: 700; font-size: 1.5rem; color: var(--bs-body-color); letter-spacing: -.02em; }
.brand .dot { color: var(--relay-accent); }

.rule { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .5rem; overflow-wrap: anywhere; }

.photo-drop {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
  background: var(--bs-body-bg); cursor: pointer; overflow: hidden;
}
.photo-drop:hover, #photo:focus-visible + * { border-color: var(--relay-accent); }
.photo-drop img { width: 100%; height: 100%; object-fit: cover; }
.photo-hint { color: var(--bs-secondary-color); }

.pass-card { border-color: var(--relay-accent); border-width: 2px; }

.chain { display: flex; flex-direction: column; gap: 14px; position: relative; }
.chain .hand { overflow: hidden; }
.chain .hand img { aspect-ratio: 1; object-fit: cover; }
.hand-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em;
  border-radius: 999px; background: var(--relay-accent); color: #fff; font-size: .8em; margin-right: .2em;
}
.poster { background: #14121f; }

/* Rule idea chips in dark mode: Bootstrap's grey (#6c757d) is only ~3.3:1 on the dark body (emulator round 3). */
[data-bs-theme="dark"] #rule-ideas .btn-outline-secondary:not(.active) { --bs-btn-color: #adb5bd; --bs-btn-border-color: #6c757d; }