/* Halloway: The Arrival — shell stylesheet: the root palette, base reset, button
 * base classes referenced by easter-shared.css, and toast styles. Hunt-world
 * styling stays in the per-hunt CSS files and easter-shared.css (the shared
 * hunt stylesheet) — this file is part of the shell layer and must never be
 * required by a hunt engine.
 *
 * Part I's further sections (entry hall, doors, paywall overlay, account
 * pages, Coat Room, admin console) return re-parameterized with the surfaces
 * that own them — the Well, rooms, and account phases port their own
 * chrome per docs/THE_ARRIVAL_BOOTSTRAP.md.
 */

:root {
  color-scheme: dark;
  /* The house palette carries the descent from Part I (the family look): a
     near-black stage, maroon for every "red," a quiet dusty-rose ink where a
     brighter accent once shouted, and borders pulled almost all the way back
     so the chrome reads as backlit hairlines, not boxes. The Arrival's own
     register may retune these with its cover treatment. */
  --bg: #07060c;
  --fg: #f2f5ff;
  --fg-secondary: #c8d0e7;
  --muted: #9aa3c7;
  --accent: #8d2337;
  --accent-2: #b27e84;
  --moss: #7fae84;
  --card: rgba(13, 11, 20, 0.82);
  --border: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

a,
button,
[role="button"] {
  touch-action: manipulation;
}

/* Phone/iPad-first touch hardening. The Arrival is a handheld, tap-driven app —
 * not a scrollable web page — so the generic browser gestures that can strand a
 * player are turned off here: the text-selection caret + blue handles, the iOS
 * long-press callout, the grey tap flash, image drag-out, and the rubber-band /
 * pull-to-refresh overscroll. Pinch-zoom is gated per page by the viewport meta
 * and double-tap-zoom by `manipulation` below — which still preserves pinch
 * where the viewport allows it. Anything that genuinely needs selection (a form
 * field, or a room that wants its verse copied out) opts back in with a more
 * specific rule, so this baseline never blocks a solve. The puzzle engines' own
 * drag targets set their own (more specific) touch-action, so they keep
 * winning too. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img,
svg,
picture {
  -webkit-user-drag: none;
}

/* The exceptions: real text entry stays editable/selectable. A room that
 * wants selectable verse adds its own class here with its PR. */
input,
textarea,
[contenteditable="true"],
[contenteditable="true"] * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Button base classes — referenced by easter-shared.css (auth modal) and
   available to shell surfaces. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  border-radius: 10px;
  padding: 0.62rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  border: 1px solid transparent;
  color: #fff;
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.08);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--fg-secondary);
}

/* Toasts — same class contract as the shim's showToast(). */
.toast-container {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0) + var(--hw-kb-inset, 0px));
  right: 1rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.toast {
  background: rgba(13, 11, 20, 0.95);
  color: var(--fg);
  border: 1px solid rgba(178, 126, 132, 0.32);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--error {
  border-color: rgba(141, 35, 55, 0.65);
  color: #ffd4cb;
}

.save-nudge {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0));
  z-index: 180;
  width: min(28rem, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  transform: translateX(-50%);
  border: 1px solid rgba(178, 126, 132, 0.34);
  border-radius: 8px;
  background: rgba(13, 11, 20, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.save-nudge-copy {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 0.88rem;
  line-height: 1.35;
}

.save-nudge-link,
.save-nudge-action,
.save-nudge-close {
  color: var(--fg);
  font: inherit;
}

.save-nudge-link,
.save-nudge-action {
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 126, 132, 0.5);
}

.save-nudge-action {
  border-width: 0 0 1px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.save-nudge-close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
}

@media (max-width: 520px) {
  .save-nudge {
    grid-template-columns: 1fr auto;
  }
  .save-nudge-link {
    grid-column: 1;
    justify-self: start;
  }
  .save-nudge-close {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.descent-share-actions {
  display: grid;
  justify-items: start;
  gap: 0.48rem;
  margin: 1.2rem 0 0;
}

.descent-share-button {
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.62rem 0.9rem;
}

.descent-share-button:hover,
.descent-share-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.descent-share-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.descent-share-status {
  min-height: 1.2em;
  color: var(--fg-secondary);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* ── The paywall overlay (paywall.js, on the hunt pages) ─────────────────
   Ported with the first door (the Undercroft); mechanism verbatim from Part I,
   tints re-minted per hunt above. */
/* ── The paywall overlay (paywall.js, on the hunt pages) ───────────────── */

/* Per-hunt accents so the curtain matches the world behind it. */
.paywall {
  --pw-accent: #cdd3ea;
  --pw-glow: rgba(205, 211, 234, 0.16);
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem
    max(1.25rem, env(safe-area-inset-bottom));
  background: rgba(4, 4, 9, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  animation: paywall-fade 220ms ease;
}
@keyframes paywall-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Per-movement paywall poster tint (.paywall.unlock--<movement>). Each movement registers its own here in the PR that authors it. Empty in B2. */
body.paywall-open {
  overflow: hidden;
}

/* Light leaking from the room you just earned. paywall.js feeds --pw-tilt-x/y
   from device tilt, so the warm seam behind the card drifts as if a door were
   ajar just out of frame; it sits behind the card and stills under reduced
   motion (the subscription reports a flat 0). */
.paywall-keyhole {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    32% 22% at calc(50% + var(--pw-tilt-x, 0) * 16%) calc(40% + var(--pw-tilt-y, 0) * 12%),
    color-mix(in srgb, var(--pw-accent) 32%, transparent),
    transparent 60%
  );
  transition: background 160ms ease;
}

.paywall-card {
  width: min(100%, 27rem);
  border: 1px solid color-mix(in srgb, var(--pw-accent) 38%, transparent);
  border-radius: 16px;
  padding: 1.6rem 1.5rem;
  background:
    radial-gradient(130% 90% at 50% 0%, var(--pw-glow), transparent 62%),
    rgba(12, 10, 20, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.paywall-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.paywall-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: #f4f1ff;
}
.paywall-tagline {
  margin: 0 0 1rem;
  color: var(--fg-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}
/* A glimpse of the room behind the price — a cropped level shot, or the
   ghost-keyhole mark where a hunt has no poster. */
.paywall-poster {
  position: relative;
  margin: 0 0 1.3rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 32%, transparent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}
.paywall-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.paywall-poster--locked-preview img {
  opacity: 0.38;
  filter: brightness(0.58) saturate(0.72) blur(2.1px);
  transform: scale(1.035);
}
.paywall-poster--locked-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.86), transparent 62%),
    rgba(0, 0, 0, 0.24);
}
.paywall-preview-lock {
  position: absolute;
  z-index: 1;
  top: 0.68rem;
  left: 0.68rem;
  width: 2.2rem;
  height: 2.2rem;
  color: #f8e7b7;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 54%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), transparent 56%),
    rgba(4, 4, 9, 0.72);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.22), 0 0 20px var(--pw-glow);
}
.paywall-preview-lock::before,
.paywall-preview-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.paywall-preview-lock::before {
  top: 0.42rem;
  width: 0.88rem;
  height: 0.72rem;
  border: 0.16rem solid currentColor;
  border-bottom: 0;
  border-radius: 0.55rem 0.55rem 0 0;
}
.paywall-preview-lock::after {
  bottom: 0.42rem;
  width: 1.12rem;
  height: 0.86rem;
  border-radius: 0.2rem;
  background: currentColor;
  box-shadow: inset 0 -0.26rem 0 rgba(0, 0, 0, 0.16);
}
.paywall-preview-caption {
  position: absolute;
  z-index: 1;
  right: 0.9rem;
  bottom: 0.72rem;
  left: 0.9rem;
  display: grid;
  gap: 0.12rem;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}
.paywall-preview-kicker,
.paywall-preview-state {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.paywall-preview-kicker {
  color: var(--pw-accent);
}
.paywall-preview-title {
  color: #fffaf0;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.12;
}
.paywall-preview-state {
  color: color-mix(in srgb, var(--pw-accent) 76%, #fff);
}
.paywall-poster--ghost {
  display: grid;
  place-items: center;
  padding: 0.8rem;
  background:
    radial-gradient(70% 70% at 50% 38%, var(--pw-glow), transparent 70%),
    rgba(0, 0, 0, 0.3);
}
/* The ghost sets its own --ghost-accent default, so the per-hunt recolour and
   the frame sizing must land on the element itself, not the figure. */
.paywall-poster--ghost halloway-ghost {
  --ghost-accent: var(--pw-accent);
  --ghost-size: 7rem;
}
.paywall-offers {
  display: grid;
  gap: 0.6rem;
}
.paywall-unlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 40%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font: inherit;
  text-align: left;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.paywall-unlock-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.98rem;
  font-weight: 700;
}
.paywall-unlock-note {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent);
}
.paywall-unlock-price {
  flex: none;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
/* The whole-house bundle is the headline offer. */
.paywall-unlock--all {
  border-color: color-mix(in srgb, var(--pw-accent) 60%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--pw-accent) 22%, #0a0712);
}
/* The pay-the-difference upgrade: the cheapest way to the whole house, so it
   reads a touch warmer than the full bundle to mark it as the standout deal. */
.paywall-unlock--upgrade {
  border-color: color-mix(in srgb, var(--pw-accent) 80%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--pw-accent) 32%, #0a0712);
}
.paywall-unlock:hover,
.paywall-unlock:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pw-accent) 70%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--pw-glow);
  outline: none;
}
.paywall-unlock:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.paywall-restore {
  margin: 0.8rem auto 0;
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.paywall-restore:hover,
.paywall-restore:focus-visible {
  color: #fff;
  outline: none;
}
.paywall-restore:disabled {
  opacity: 0.6;
  cursor: default;
}
.paywall-meta {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
/* The gated-browser offer: no buy button, just a note that the door unlocks in
   the app. Reads like a framed card so the curtain still feels deliberate. */
.paywall-gate {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 35%, transparent);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.03);
  color: var(--fg-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.paywall-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.paywall-nav a {
  color: var(--fg-secondary);
  text-decoration: none;
}
.paywall-nav a:hover,
.paywall-nav a:focus-visible {
  color: var(--fg);
  text-decoration: underline;
}
.paywall-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.paywall-legal a {
  color: var(--muted);
  text-decoration: underline;
}
.paywall-legal a:hover,
.paywall-legal a:focus-visible {
  color: var(--fg);
}

/* First fulfilled Depth purchase: one quiet, skippable breath before the
 * newly opened room returns. The JS owns the 1.6s lifetime; reduced-motion
 * devices keep the beat but lose every transform/fade. */
body.purchase-beat-open {
  overflow: hidden;
}

.purchase-beat {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  padding: 2rem;
  color: var(--fg);
  text-align: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(146, 80, 45, 0.16), transparent 28rem),
    rgba(6, 5, 9, 0.97);
  animation: purchase-beat-breathe 1600ms ease both;
  outline: none;
}

.purchase-beat-latch {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(transparent, rgba(225, 182, 129, 0.9), transparent);
  box-shadow: 0 0 2rem rgba(196, 109, 54, 0.3);
}

.purchase-beat-kicker,
.purchase-beat-line,
.purchase-beat-skip {
  margin: 0;
}

.purchase-beat-kicker {
  color: var(--fg-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.purchase-beat-line {
  max-width: 24rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.35;
}

.purchase-beat-skip {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

@keyframes purchase-beat-breathe {
  0% { opacity: 0; }
  16%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-beat {
    animation: none;
  }
}

/* ── V1-style shell pages (Coat Room, Library-adjacent chrome, UAT) ─────── */
.hall-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(72, 21, 32, 0.36), transparent 68%),
    var(--bg);
  padding: calc(2.5rem + env(safe-area-inset-top, 0)) 1.25rem
    calc(2.5rem + env(safe-area-inset-bottom, 0));
  text-align: center;
}

.shell-page {
  justify-content: flex-start;
  text-align: left;
}

.shell-brand {
  width: min(100%, 40rem);
  margin: 0 0 1rem;
  display: inline-block;
  font-size: 1rem;
  color: var(--muted);
  text-decoration: none;
}

.shell-brand:hover,
.shell-brand:focus-visible {
  color: var(--fg-secondary);
}

.shell-head {
  width: min(100%, 40rem);
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
  min-height: 2.75rem;
}

.shell-back {
  grid-column: 1;
  color: var(--fg-secondary);
  text-decoration: none;
}

.shell-back:hover,
.shell-back:focus-visible {
  color: var(--fg);
}

.shell-door-back {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(16, 13, 22, 0.58);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.shell-door-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0.32rem;
  height: 0.32rem;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.shell-door-back:hover,
.shell-door-back:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.38);
  outline: none;
}

.shell-door-back:hover::after,
.shell-door-back:focus-visible::after {
  opacity: 0.85;
  transform: translate(-65%, -50%) rotate(45deg);
}

.shell-door-back svg {
  width: 1.35rem;
  height: 1.8rem;
}

.shell-title {
  grid-column: 2;
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: left;
  color: #efe9ff;
}

.shell-main {
  width: min(100%, 40rem);
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.shell-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 1.2rem 1.3rem;
}

.shell-section-title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--fg);
}

body.shell-center-titles .shell-head {
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
}

body.shell-center-titles .shell-head::after {
  content: "";
  grid-column: 3;
}

body.shell-center-titles .shell-title {
  grid-column: 2;
  text-align: center;
}

body.shell-center-titles .shell-section-title {
  text-align: center;
}

.shell-note,
.shell-prose p {
  margin: 0 0 0.7rem;
  color: var(--fg-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.shell-note:last-child,
.shell-prose p:last-child {
  margin-bottom: 0;
}

.shell-note a,
.shell-prose a {
  color: var(--accent-2);
}

.settings-list {
  display: grid;
  gap: 0.7rem;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(239, 230, 216, 0.11);
  border-radius: 8px;
  background: rgba(7, 6, 12, 0.46);
}

.settings-row label,
.settings-row > span {
  display: grid;
  gap: 0.25rem;
}

.settings-row strong {
  color: var(--fg);
  font-size: 0.95rem;
}

.settings-row span {
  color: var(--fg-secondary);
  font-size: 0.82rem;
  line-height: 1.42;
}

.settings-row input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--accent);
}

.settings-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-choice label {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(239, 230, 216, 0.13);
  border-radius: 8px;
  color: var(--fg-secondary);
}

.settings-choice label.is-selected {
  border-color: rgba(178, 126, 132, 0.48);
  color: var(--fg);
}

.settings-reset {
  justify-self: start;
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(159, 36, 56, 0.44);
  border-radius: 8px;
  background: rgba(159, 36, 56, 0.12);
  color: var(--fg);
  font: inherit;
}

.settings-status {
  min-height: 1.35rem;
  margin: -0.4rem 0 0;
  color: var(--fg-secondary);
  font-size: 0.84rem;
  text-align: center;
}

.shell-lede {
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.55;
}

.shell-footnote {
  width: min(100%, 40rem);
  margin: 1.6rem 0 0;
  color: rgba(154, 163, 199, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.shell-footnote a {
  color: var(--accent-2);
}

/* ── Accounts and depth seals used by the V1-style Coat Room ───────────── */
.account-panel .account-signout,
.account-panel .account-link-btn {
  margin-top: 0.5rem;
  padding: 0.45rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--fg);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
}

.account-panel .account-link-btn {
  display: inline-block;
}

.account-panel .account-link-btn:disabled,
.account-panel .account-signout:disabled {
  opacity: 0.55;
  cursor: default;
}

.account-panel .account-link-btn--go {
  border-color: color-mix(in srgb, var(--moss) 55%, var(--border));
  color: color-mix(in srgb, var(--moss) 78%, var(--fg));
}

.account-verified {
  color: var(--moss);
  font-size: 0.82rem;
}

.account-unverified {
  color: var(--muted);
  font-size: 0.82rem;
}

.coatroom-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.2rem 0 0;
}

.coatroom-badges-lead {
  margin: -0.2rem 0 1rem;
}

.account-badge-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.95rem 0.55rem;
}

.account-badge {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.45rem;
  color: var(--fg-secondary);
  text-align: center;
}

.account-badge-seal {
  position: relative;
  width: 3.15rem;
  height: 3.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--badge-accent, #888) 72%, #ffffff);
  background:
    radial-gradient(
      circle at 50% 32%,
      color-mix(in srgb, var(--badge-accent, #888) 55%, #1b1622) 0%,
      color-mix(in srgb, var(--badge-accent, #888) 22%, #100c16) 60%,
      #0c0910 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--badge-accent, #888) 55%, transparent),
    inset 0 1px 1px color-mix(in srgb, #ffffff 24%, transparent),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 4px 11px rgba(0, 0, 0, 0.5),
    0 0 18px color-mix(in srgb, var(--badge-accent, #888) 28%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-badge-seal::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border: 1px dashed color-mix(in srgb, var(--badge-accent, #888) 50%, transparent);
  border-radius: 50%;
  opacity: 0.55;
}

.account-badge-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, transparent 44%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.account-badge-seal svg {
  position: relative;
  width: 1.35rem;
  height: 1.7rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}

.account-badge:hover .account-badge-seal,
.account-badge:focus-within .account-badge-seal,
.account-badge:active .account-badge-seal {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--badge-accent, #888) 70%, transparent),
    inset 0 1px 1px color-mix(in srgb, #ffffff 28%, transparent),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 7px 15px rgba(0, 0, 0, 0.5),
    0 0 26px color-mix(in srgb, var(--badge-accent, #888) 42%, transparent);
}

.account-badge-name {
  max-width: 100%;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--fg);
}

.account-badge-state {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.account-badge.is-earned .account-badge-state {
  color: color-mix(in srgb, var(--badge-accent, #888) 72%, #ffffff);
}

.account-badge.is-locked {
  color: var(--muted);
}

.account-badge.is-locked .account-badge-seal {
  color: color-mix(in srgb, var(--badge-accent, #888) 26%, #6b6676);
  background: radial-gradient(circle at 50% 32%, #211d29 0%, #16121c 60%, #0b0910 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 3px 9px rgba(0, 0, 0, 0.45);
  opacity: 0.72;
}

.account-badge.is-locked .account-badge-seal::before {
  border-color: rgba(255, 255, 255, 0.14);
  opacity: 0.4;
}

.account-badge.is-locked .account-badge-seal svg {
  opacity: 0.45;
}

.account-badge.is-locked .account-badge-name {
  color: var(--fg-secondary);
}

.account-badges-secret {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.55;
  text-align: center;
  color: var(--muted);
}

.account-badges-secret.is-unlocked {
  color: color-mix(in srgb, var(--accent-2, #b27e84) 78%, #ffffff);
  font-style: normal;
}

.coatroom-danger:empty {
  display: none;
}

.coatroom-danger {
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.coatroom-danger .account-delete-note {
  margin: 0 auto 0.4rem;
  max-width: 26rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.account-delete-link {
  background: none;
  border: 0;
  padding: 0.25rem 0.3rem;
  font: inherit;
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.75;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.account-delete-link:hover,
.account-delete-link:focus-visible {
  color: #e6a39b;
  opacity: 1;
}

.account-delete-link[disabled] {
  opacity: 0.5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .account-badge-seal {
    transition: none;
  }

  .account-badge:hover .account-badge-seal,
  .account-badge:focus-within .account-badge-seal,
  .account-badge:active .account-badge-seal {
    transform: none;
  }
}

/* ── The Coat Room (coatroom.html) ─────────────────────────────────────── */
.coatroom-id {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  padding: 0;
}

.coatroom-id-body {
  min-width: 0;
  padding: 0 1.2rem 1.2rem;
}

.coatroom-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.coatroom-mirror {
  display: grid;
  place-items: center;
  min-height: clamp(12rem, 54vw, 19rem);
  padding: clamp(0.9rem, 4vw, 1.4rem) 1rem 0.3rem;
  background:
    radial-gradient(80% 65% at 50% 8%, rgba(141, 35, 55, 0.32), transparent 62%),
    #08070d;
  touch-action: pan-y;
}

halloway-ghost.coatroom-ghost,
.halloway-ghost.coatroom-ghost {
  --ghost-size: min(100%, 18.5rem);
  --ghost-accent: #b64044;
  --ghost-eye: #ffe8d2;
  --ghost-float: 4px;
  animation: halloway-ghost-float 8s ease-in-out infinite;
}

.coatroom-account {
  text-align: left;
}

.coatroom-commerce {
  display: grid;
  gap: 0.75rem;
}

.coatroom-commerce [hidden] {
  display: none !important;
}

.coatroom-commerce-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.coatroom-commerce-facts > div {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: baseline;
  padding: 0.65rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.coatroom-commerce-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.coatroom-commerce-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.coatroom-ownership-source,
.coatroom-restore-status {
  margin: 0;
}

.coatroom-restore-status:empty {
  display: none;
}

.coatroom-receipt-queue {
  display: grid;
  gap: 0.65rem;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.coatroom-receipt-queue[hidden] {
  display: none;
}

.coatroom-receipt-queue .shell-note {
  margin: 0;
}

.coatroom-progress {
  display: grid;
  gap: 0.55rem;
}

.coatroom-prog-row {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.coatroom-prog-row:hover,
.coatroom-prog-row:focus-visible {
  border-color: var(--fg-secondary);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
  outline: none;
}

.coatroom-prog-door {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--row-accent, var(--fg-secondary));
  background: color-mix(in srgb, var(--row-accent, #888) 12%, transparent);
}

.coatroom-prog-door svg {
  width: 1.15rem;
  height: 1.55rem;
}

.coatroom-prog-main {
  min-width: 0;
}

.coatroom-prog-head {
  display: grid;
  gap: 0.1rem;
}

.coatroom-prog-name {
  color: var(--fg);
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.coatroom-prog-state {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.coatroom-prog-bar {
  display: block;
  margin-top: 0.55rem;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.coatroom-prog-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--row-accent, var(--fg-secondary));
  transition: width 220ms ease;
}

.coatroom-dir {
  display: grid;
  gap: 0.55rem;
}

.coatroom-link {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.82rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.coatroom-link:hover,
.coatroom-link:focus-visible {
  border-color: var(--fg-secondary);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  outline: none;
}

.coatroom-link-door {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--fg-secondary);
  background: rgba(255, 255, 255, 0.045);
}

.coatroom-link-door svg {
  width: 1.15rem;
  height: 1.55rem;
}

.coatroom-link-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.coatroom-link-name {
  color: var(--fg);
  font-size: 0.98rem;
  letter-spacing: 0;
  line-height: 1.25;
}

.coatroom-link-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.coatroom-link-chev {
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
}

.coatroom-link:hover .coatroom-link-chev,
.coatroom-link:focus-visible .coatroom-link-chev {
  color: var(--fg);
}