/* ── shell metrics ── */
:root {
  --rail-w: 4.55rem;
  --rail-w-open: 16.25rem;
  --topbar-h: 3.45rem;
  --stats-h: 2.2rem;
  --chrome-h: calc(var(--topbar-h) + var(--stats-h) + var(--safe-t));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--skin-bg);
  color: var(--skin-text);
  font-family: var(--skin-font);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img { display: block; max-width: 100%; }

/* ── grain + wash ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(1200px 520px at 12% -10%, var(--skin-hero-glow), transparent 58%),
    radial-gradient(900px 480px at 110% 0%, color-mix(in srgb, var(--skin-accent-2) 18%, transparent), transparent 50%),
    linear-gradient(180deg, var(--skin-bg), var(--skin-bg-2) 48%, var(--skin-bg));
}
html[data-skin="parchment"] body::before {
  opacity: 1;
  background:
    radial-gradient(900px 400px at 20% 0%, var(--skin-hero-glow), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(90, 60, 30, 0.025) 3px),
    linear-gradient(180deg, var(--skin-bg), var(--skin-bg-2));
}

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
.chrome {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 50;
  background: var(--skin-surface);
}
.rail { grid-column: 1; grid-row: 2; }
.stage { grid-column: 2; grid-row: 2; }

/* ══════════════════════════════════════
   RAIL — collapsed by default
   ══════════════════════════════════════ */
.rail {
  position: relative;
  top: 0;
  height: 100%;
  min-height: 0;
  width: var(--rail-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.45rem calc(0.55rem + var(--safe-b));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--skin-surface) 94%, var(--skin-accent)) 0%,
      var(--skin-surface) 18%,
      var(--skin-surface) 100%);
  border-right: 1px solid var(--skin-border);
  box-shadow: 8px 0 40px color-mix(in srgb, var(--skin-bg) 55%, transparent);
  overflow: hidden;
  transition: width 0.34s var(--ease), box-shadow 0.34s var(--ease);
}

.rail.is-open {
  width: var(--rail-w-open);
  box-shadow:
    18px 0 60px color-mix(in srgb, var(--skin-bg) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--skin-accent) 18%, transparent);
}

.rail-filament {
  position: absolute;
  left: 0.28rem;
  top: 4.6rem;
  bottom: 5.4rem;
  width: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--skin-accent) 28%, transparent);
  pointer-events: none;
}
.rail-bead {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 1.55rem;
  margin-left: -3px;
  border-radius: 99px;
  background: var(--skin-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--skin-accent) 22%, transparent),
    0 0 18px var(--skin-hero-glow);
  transition: transform 0.38s var(--ease);
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.15rem;
  padding: 0 0.28rem;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
  text-align: left;
}
.rail-gem {
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  min-width: 2.55rem;
  border-radius: 0.95rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--skin-bg) 70%, var(--skin-surface-2));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--skin-accent) 40%, transparent),
    0 10px 22px color-mix(in srgb, var(--skin-bg) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--skin-text) 12%, transparent);
}
.rail-gem::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 1.1rem;
  background: conic-gradient(from 180deg, transparent 20%, var(--skin-accent), var(--skin-accent-2), transparent 72%);
  opacity: 0.55;
  z-index: -1;
  filter: blur(0.5px);
  animation: gem-spin 14s linear infinite;
}
@keyframes gem-spin { to { transform: rotate(360deg); } }
.rail-gem img {
  width: 1.85rem;
  height: 1.85rem;
  object-fit: contain;
}
.rail-word {
  min-width: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  pointer-events: none;
}
.rail.is-open .rail-word {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rail-word strong {
  display: block;
  font-family: var(--skin-display);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.rail-word em {
  display: block;
  margin-top: 0.12rem;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--skin-muted);
  white-space: nowrap;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.rail-nav::-webkit-scrollbar { display: none; }

.rail-group {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.rail-rule {
  height: 1px;
  margin: 0.2rem 1.15rem;
  background: var(--skin-line);
  opacity: 0.45;
  flex-shrink: 0;
}
.rail.is-open .rail-rule {
  margin-left: 0.85rem;
  margin-right: 0.85rem;
}
html[data-tcg="off"] .rail-tcg {
  display: none !important;
}
.rail-label {
  margin: 0.15rem 0 0.2rem;
  padding: 0 0.85rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--skin-muted);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
}
.rail.is-open .rail-label {
  opacity: 0.8;
  height: 1rem;
}

.rail-item,
.rail-user,
.rail-expand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 2.7rem;
  padding: 0 0.42rem;
  border-radius: 0.95rem;
  color: var(--skin-muted);
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.rail-item i {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.92rem;
  background: color-mix(in srgb, var(--skin-surface-2) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skin-border) 70%, transparent);
}
.rail-item span,
.rail-expand span,
.rail-user-meta {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s var(--ease) 0.02s, transform 0.2s var(--ease);
}
.rail.is-open .rail-item span,
.rail.is-open .rail-expand span,
.rail.is-open .rail-user-meta {
  opacity: 1;
  transform: none;
}

.rail-item:hover,
.rail-expand:hover,
.rail-user:hover {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 10%, transparent);
}
.rail-item.is-on {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 16%, transparent);
}
.rail-item.is-on i {
  background: var(--skin-btn);
  color: var(--skin-btn-text);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--skin-accent) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}
.rail-item-warn.is-on,
.rail-item-warn:hover { color: color-mix(in srgb, #fb7185 70%, var(--skin-text)); }

/* collapsed tooltips */
.rail:not(.is-open) .rail-item[data-tip]:hover::after,
.rail:not(.is-open) .rail-user[data-tip]:hover::after,
.rail:not(.is-open) .rail-expand:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 0.65rem);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.32rem 0.55rem;
  border-radius: 0.5rem;
  background: var(--skin-surface);
  color: var(--skin-text);
  border: 1px solid var(--skin-border);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-bg) 55%, transparent);
  z-index: 50;
  pointer-events: none;
}

.rail-foot {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.45rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--skin-border);
  flex-shrink: 0;
}
.rail-avatar {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--skin-btn-text);
  background: var(--skin-btn);
}
.rail-user-meta strong,
.rail-user-meta em {
  display: block;
  line-height: 1.15;
}
.rail-user-meta em {
  font-style: normal;
  font-size: 0.62rem;
  color: var(--skin-muted);
}
.rail-expand {
  margin-top: 0.15rem;
  color: var(--skin-muted);
}
.rail-expand i {
  width: 2.15rem;
  min-width: 2.15rem;
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease);
}
.rail.is-open .rail-expand i { transform: rotate(180deg); }

body[data-auth="guest"] .rail-authed,
body[data-auth="user"] .rail-guest { display: none !important; }

/* ══════════════════════════════════════
   TOPBAR — icons only
   ══════════════════════════════════════ */
.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 0.7rem 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--skin-surface) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.topbar::after { display: none; }

.statsbar {
  height: var(--stats-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: 0 0.85rem;
  position: relative;
  background: color-mix(in srgb, var(--skin-surface) 94%, var(--skin-bg));
}
.statsbar::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--skin-accent) 55%, var(--skin-border)) 35%,
    color-mix(in srgb, var(--skin-accent-2) 45%, var(--skin-border)) 65%,
    transparent);
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 1.7rem;
  padding: 0.1rem 0.15rem;
  color: var(--skin-muted);
  border-radius: 0.45rem;
}
.stat i {
  font-size: 0.78rem;
  line-height: 1;
}
.stat span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--skin-text);
}
.stat-bonus i { color: var(--skin-accent-2); }
.stat-booster i { color: #f0b429; }
.stat-room i { color: var(--skin-accent); }
.stat[hidden] { display: none !important; }
.stat-spend i { color: var(--skin-accent-soft); }
.stat-saved i { color: #34d399; }
.stat:hover {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 10%, transparent);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.topbar-left { flex: 1; }

/* Home lives in the top bar on every view; the chat name/face block is gone. */
.topbar-home i { font-size: 0.95rem; }
body[data-view="home"] .topbar-home {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 18%, transparent);
}

.life-pill {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.38rem;
  border-radius: 0.35rem;
  color: var(--skin-chip-text);
  background: var(--skin-chip);
  border: 1px solid var(--skin-chip-border);
}

.icon-btn {
  position: relative;
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  color: var(--skin-muted);
  font-size: 0.95rem;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.icon-btn:hover {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 12%, transparent);
}
.icon-btn:active { transform: scale(0.96); }
.icon-btn.is-on {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 18%, transparent);
}
.icon-btn.is-on::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 99px;
  background: var(--skin-accent);
}

.dot-badge,
.spark-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.18rem;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
  color: var(--skin-btn-text);
  background: var(--skin-accent);
  box-shadow: 0 0 0 2px var(--skin-surface);
}
.spark-badge {
  min-width: 0.7rem;
  height: 0.7rem;
  background: var(--skin-accent-2);
}
.spark-badge[hidden] { display: none !important; }

.more-wrap { position: relative; }
.more-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 0.9rem;
  background: var(--skin-surface);
  border: 1px solid var(--skin-border);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--skin-bg) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.more-menu[hidden] { display: none; }
.more-menu button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  color: var(--skin-text);
  font-size: 0.82rem;
  text-align: left;
}
.more-menu button:hover {
  background: color-mix(in srgb, var(--skin-accent) 12%, transparent);
}
.more-menu .danger { color: #f87171; }

.chat-only { display: none !important; }
body[data-view="chat"] .chat-only { display: inline-flex !important; }

/* The chat ⋯ keeps its slot everywhere, so the bar never reflows per view. */
.topbar .more-wrap.chat-only { display: block !important; visibility: hidden; }
body[data-view="chat"] .topbar .more-wrap.chat-only { visibility: visible; }
.topbar-menu { display: none; }

/* ══════════════════════════════════════
   CANVAS (so the shell has a room)
   ══════════════════════════════════════ */
.canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 1.15rem 1.15rem 1.5rem;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.canvas::-webkit-scrollbar { display: none; width: 0; height: 0; }

html[data-scroll-hints="off"] .fg-scroll-arrow {
  display: none !important;
}
.fg-scroll-arrow {
  position: sticky;
  left: 50%;
  z-index: 8;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--skin-accent-soft) 55%, var(--skin-border));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--skin-accent-soft);
  background: color-mix(in srgb, var(--skin-accent) 42%, var(--skin-surface));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--skin-bg) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
}
.fg-scroll-arrow-up {
  top: 0.35rem;
  margin-bottom: -2rem;
}
.fg-scroll-arrow-down {
  bottom: 0.35rem;
  margin-top: -2rem !important;
}
.fg-scroll-arrow.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fg-scroll-arrow i {
  font-size: 0.92rem;
}
.fg-scroll-arrow:hover {
  color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-accent) 62%, var(--skin-surface));
}
.sheet-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}
.sheet-check strong {
  display: block;
  font-size: 0.88rem;
}
.sheet-check em {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--skin-muted);
}
.sheet-check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--skin-accent);
}

.ptr {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--skin-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.ptr.is-on {
  height: 2.4rem;
}
.ptr-orb {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 99px;
  border: 2px solid color-mix(in srgb, var(--skin-accent) 55%, transparent);
  border-top-color: var(--skin-accent);
}
.ptr.is-armed .ptr-lab { color: var(--skin-text); }
.ptr.is-busy .ptr-orb,
.ptr.is-armed .ptr-orb {
  animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════
   FINISH: ink (editorial, thinner)
   ══════════════════════════════════════ */
html[data-finish="ink"] {
  --rail-w: 3.85rem;
  --rail-w-open: 15.25rem;
}
html[data-finish="ink"] .rail {
  background: var(--skin-bg);
  box-shadow: none;
}
html[data-finish="ink"] .rail-gem {
  border-radius: 0.45rem;
  background: transparent;
  box-shadow: none;
}
html[data-finish="ink"] .rail-gem::after { display: none; }
html[data-finish="ink"] .rail-item i,
html[data-finish="ink"] .rail-item.is-on i {
  background: transparent;
  box-shadow: none;
  border-radius: 0.4rem;
  color: inherit;
}
html[data-finish="ink"] .rail-item.is-on {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--skin-accent);
  border-radius: 0;
}
html[data-finish="ink"] .rail-filament { opacity: 0.35; }
html[data-finish="ink"] .icon-btn { border-radius: 0.4rem; }
html[data-finish="ink"] .topbar,
html[data-finish="ink"] .chrome,
html[data-finish="ink"] .statsbar {
  background: color-mix(in srgb, var(--skin-bg) 88%, transparent);
}

/* ══════════════════════════════════════
   MOBILE — rail starts fully collapsed (off-canvas)
   ══════════════════════════════════════ */
.rail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: color-mix(in srgb, var(--skin-bg) 62%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.rail-backdrop.is-on {
  opacity: 1;
  pointer-events: auto;
}
.rail.is-dragging,
.rail-backdrop.is-dragging {
  transition: none !important;
}
.swipe-edge {
  display: none;
}

html.is-rail-open,
html.is-rail-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
html.is-rail-open .canvas {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.is-rail-open .rail,
html.is-rail-open .rail-nav {
  touch-action: pan-y;
}

@media (max-width: 860px), (max-height: 560px) {
  /* minmax(0, 1fr), not 1fr: a 1fr track floors at min-content, so a wide
     composer row (large text size) stretched the column past the viewport. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-column: 1; }
  .topbar-menu { display: grid; }
  .swipe-edge {
    display: block;
    position: fixed;
    left: 0;
    top: var(--chrome-h);
    bottom: 0;
    width: 1.65rem;
    z-index: 32;
    pointer-events: none;
    touch-action: pan-y;
  }
  .rail-backdrop {
    top: var(--chrome-h);
  }
  .rail {
    position: fixed;
    left: 0;
    top: var(--chrome-h);
    height: calc(100dvh - var(--chrome-h));
    transform: translateX(-108%);
    transition: transform 0.32s var(--ease), width 0.32s var(--ease);
    box-shadow: none;
    touch-action: pan-y;
  }
  .rail.is-mobile-open {
    transform: none;
    box-shadow: 18px 0 50px color-mix(in srgb, var(--skin-bg) 60%, transparent);
  }
}

/* ══════════════════════════════════════
   SETTINGS SHEET (from topbar)
   ══════════════════════════════════════ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: color-mix(in srgb, var(--skin-bg) 55%, transparent);
}
.sheet-backdrop[hidden],
.sheet[hidden] { display: none !important; }

.sheet {
  position: fixed;
  top: calc(var(--chrome-h) + 0.4rem);
  right: 0.7rem;
  left: auto;
  width: min(22.5rem, calc(100vw - 1.4rem));
  max-height: calc(100dvh - var(--chrome-h) - 1.2rem);
  overflow: auto;
  z-index: 60;
  padding: 0.85rem 0.95rem 1rem;
  border-radius: 1.15rem;
  background: var(--skin-surface);
  border: 1px solid var(--skin-border);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--skin-bg) 55%, transparent);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.sheet-head h2 {
  margin: 0;
  font-family: var(--skin-display);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.sheet-block {
  padding: 0.75rem 0;
  border-top: 1px solid var(--skin-border);
}
.sheet-block h3 {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--skin-muted);
}
.sheet-hint {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  color: var(--skin-muted);
}
.lab-skins, .lab-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
}
.lab-seg + .lab-seg { margin-top: 0.6rem; }
.lab-seg-stack {
  flex-direction: column;
  align-items: stretch;
}
.lab-skins button,
.lab-seg button {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.15;
  color: var(--skin-muted);
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--skin-surface-2) 55%, transparent);
}
.lab-skins button:hover,
.lab-seg button:hover {
  color: var(--skin-text);
  border-color: color-mix(in srgb, var(--skin-accent) 40%, var(--skin-border));
}
.lab-skins button.is-on,
.lab-seg button.is-on {
  color: var(--skin-btn-text);
  background: var(--skin-btn);
  border-color: transparent;
}
.sheet-chats {
  width: min(26rem, calc(100vw - 1.4rem));
  padding-bottom: 0.55rem;
}
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 -0.35rem;
}
.chat-row {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.55rem;
  border-radius: 0.85rem;
  text-align: left;
  color: inherit;
}
.chat-row:hover {
  background: color-mix(in srgb, var(--skin-accent) 10%, transparent);
}
.chat-row.is-on {
  background: color-mix(in srgb, var(--skin-accent) 16%, transparent);
}
.chat-ava {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--skin-text);
  background: var(--skin-surface-2);
  overflow: hidden;
}
.chat-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-ava.t1 { background: color-mix(in srgb, #4c1d95 55%, var(--skin-surface)); }
.chat-ava.t2 { background: color-mix(in srgb, #1e3a8a 55%, var(--skin-surface)); }
.chat-ava.t3 { background: color-mix(in srgb, #134e4a 55%, var(--skin-surface)); }
.chat-ava.t4 { background: color-mix(in srgb, #3f6212 55%, var(--skin-surface)); }
.chat-ava.t5 { background: color-mix(in srgb, #7c2d12 55%, var(--skin-surface)); }
.chat-ava.t6 { background: color-mix(in srgb, #831843 55%, var(--skin-surface)); }
.chat-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.chat-meta strong {
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}
.chat-meta em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--skin-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-when {
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--skin-muted);
  align-self: start;
  padding-top: 0.15rem;
}
.chat-row.is-unread .chat-meta strong::after {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.4rem;
  border-radius: 99px;
  background: var(--skin-accent);
  vertical-align: middle;
}
/* Settings sections: one pane at a time instead of one long modal. */
.set-tabs {
  margin: 0 -0.9rem 0.15rem;
}
/* The 12% tint alone vanishes on the light skins. */
.set-tabs .home-tab.is-on {
  background: color-mix(in srgb, var(--skin-accent) 20%, transparent);
  font-weight: 750;
}
.set-tabs .home-tab.is-on::after { height: 3px; }
.set-sync {
  margin: 0.6rem 0 0.15rem;
  font-size: 0.7rem;
}
.set-pane[hidden] { display: none !important; }
.set-pane > .sheet-block:first-child { border-top: 0; }
.set-pane > .sheet-block {
  padding: 0.85rem 0;
}

/* Text size — the shell is rem-based, so scaling the root scales everything. */
html[data-font="sm"] { font-size: 93.75%; }
html[data-font="md"] { font-size: 100%; }
html[data-font="lg"] { font-size: 109%; }
html[data-font="xl"] { font-size: 119%; }

.set-fold {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--skin-border);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--skin-surface-2) 45%, transparent);
}
.set-fold > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--skin-text);
}
.set-fold[open] > summary { margin-bottom: 0.45rem; }
.set-fold.is-danger-fold {
  border-color: color-mix(in srgb, #f43f5e 40%, var(--skin-border));
}
.set-fold.is-danger-fold > summary { color: #fda4af; }
.set-build {
  margin-top: 0.6rem;
  opacity: 0.7;
  font-size: 0.7rem;
}
.set-account[hidden] { display: none !important; }

.sheet-back {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--skin-accent-soft);
  text-decoration: none;
}

.auth-card { max-width: 24rem; }
.auth-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.auth-form[hidden],
.auth-tabs[hidden],
.auth-google[hidden],
.auth-or[hidden],
.auth-lead[hidden],
.auth-err[hidden] {
  display: none !important;
}
#view-auth[data-auth-mode="google"] #auth-login,
#view-auth[data-auth-mode="google"] #auth-register,
#view-auth[data-auth-mode="google"] #auth-tabs,
#view-auth[data-auth-mode="google"] #auth-google,
#view-auth[data-auth-mode="google"] #auth-or {
  display: none !important;
}
.auth-lead {
  margin: 0 0 0.85rem;
  color: var(--skin-muted);
  font-size: 0.88rem;
}
.auth-err {
  margin: 0 0 0.75rem;
  color: #f87171;
  font-size: 0.85rem;
  display: block;
}
.auth-field-err {
  display: block;
  margin-top: 0.28rem;
  font-style: normal;
  font-size: 0.78rem;
  color: #f87171;
}
.auth-field-err[hidden] { display: none !important; }
.auth-form input.is-bad {
  outline: 1px solid #f87171;
}
.auth-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  border-radius: 0.85rem;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--skin-accent) 12%, var(--skin-surface));
  color: var(--skin-text);
  font-weight: 650;
}
.auth-or {
  margin: 0.7rem 0;
  text-align: center;
  color: var(--skin-muted);
  font-size: 0.78rem;
}
.auth-form { display: flex; flex-direction: column; gap: 0.7rem; }
.auth-check { align-items: flex-start; }
.auth-submit {
  min-height: 2.6rem;
  border-radius: 0.85rem;
  border: 0;
  font-weight: 700;
  background: var(--skin-btn);
  color: var(--skin-btn-text);
}

.sheet-tips .sheet-hint { padding: 0 1rem 0.4rem; }
.tj-ask,
.tj-live {
  margin: 0 1rem 0.85rem;
  padding: 0.85rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--skin-accent) 35%, var(--skin-border));
  background: color-mix(in srgb, var(--skin-accent) 10%, var(--skin-surface));
}
.tj-ask-open,
.tj-yes,
.tj-custom-go {
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  background: var(--skin-btn);
  color: var(--skin-btn-text);
}
.tj-ask-form { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; }
.tj-ask-form[hidden] { display: none !important; }
.tj-live p { margin: 0 0 0.55rem; font-size: 0.88rem; }
.tj-list {
  padding: 0 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tj-card {
  padding: 0.9rem 0.95rem 1rem;
  border-radius: 1.15rem;
  border: 1px solid var(--skin-border);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--skin-accent) 16%, var(--skin-surface)) 0%,
      var(--skin-surface) 48%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-bg) 40%, transparent);
}
.tj-card.is-mine {
  border-color: color-mix(in srgb, var(--skin-accent-2) 55%, var(--skin-border));
}
.tj-card-top {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.tj-glyph {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.85rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--skin-accent) 22%, var(--skin-bg));
  color: var(--skin-accent-soft);
  flex-shrink: 0;
}
.tj-who { min-width: 0; }
.tj-who strong { display: block; font-size: 0.95rem; }
.tj-who span { display: block; font-size: 0.72rem; color: var(--skin-muted); }
.tj-anon {
  margin-left: 0.35rem;
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--skin-accent-soft);
}
.tj-note {
  margin: 0.65rem 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.4;
}
.tj-got {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  color: var(--skin-accent-2);
  font-weight: 650;
}
.tj-chips,
.tj-custom,
.tj-confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tj-chip,
.tj-no,
.tj-cancel {
  min-height: 2rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--skin-border);
  background: color-mix(in srgb, var(--skin-bg) 35%, var(--skin-surface));
  color: var(--skin-text);
  font-weight: 650;
  font-size: 0.82rem;
}
.tj-chip:hover,
.tj-no:hover { background: color-mix(in srgb, var(--skin-accent) 14%, transparent); }
.tj-custom { margin-top: 0.45rem; }
.tj-custom-amt,
.tj-msg {
  flex: 1;
  min-width: 0;
  min-height: 2.15rem;
  padding: 0 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--skin-border);
  background: var(--skin-bg);
  color: var(--skin-text);
}
.tj-msg { width: 100%; margin-top: 0.45rem; }
.tj-confirm {
  margin-top: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--skin-accent) 12%, var(--skin-bg));
}
.tj-confirm[hidden] { display: none !important; }
.tj-confirm-copy { margin: 0 0 0.5rem; font-size: 0.82rem; }
.tj-yes { flex: 1; }

.tj-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--chrome-h) + 0.65rem);
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(26rem, calc(100vw - 1.5rem));
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--skin-accent-2) 50%, var(--skin-border));
  background: color-mix(in srgb, var(--skin-surface) 88%, var(--skin-accent));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--skin-bg) 55%, transparent);
  color: var(--skin-text);
  text-align: left;
  cursor: pointer;
}
.tj-toast[hidden] { display: none !important; }
.tj-toast i {
  width: 2rem;
  height: 2rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--skin-accent-2) 28%, var(--skin-bg));
  color: var(--skin-accent-2);
  flex-shrink: 0;
}
.tj-toast strong { display: block; font-size: 0.82rem; }
.tj-toast em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--skin-muted);
  line-height: 1.35;
}
.stat.is-pulse,
.stat-bonus.is-pulse {
  animation: tj-pulse 0.9s ease;
}
@keyframes tj-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); filter: brightness(1.25); }
  100% { transform: scale(1); }
}

@media (max-width: 860px), (max-height: 560px) {
  .sheet {
    left: 0.65rem;
    right: 0.65rem;
    width: auto;
  }
  .canvas { padding-bottom: 1.5rem; }
}

/* ══════════════════════════════════════
   ROLEPLAY MARKUP (prettyCopy — cards + chat)
   speech = plain · *„speech“* = .rp-speech-em · *action* = .rp-action · (state) = .rp-state
   ══════════════════════════════════════ */
.rp-speech-em {
  font-weight: 700;
  font-style: normal;
  color: inherit;
}
.rp-action {
  font-style: italic;
  color: color-mix(in srgb, var(--skin-accent) 62%, var(--skin-text));
}
.rp-state {
  font-style: italic;
  font-size: 0.92em;
  color: var(--skin-muted);
  border-left: 2px solid color-mix(in srgb, var(--skin-border) 80%, transparent);
  padding-left: 0.55rem;
}

html.is-bg,
html.is-bg * {
  animation-play-state: paused !important;
}

@media (pointer: coarse) {
  .topbar,
  .composer,
  .chapter-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--skin-surface);
  }
  .cs-back,
  .lp-back {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--skin-bg) 88%, transparent);
  }
  .hot-char-msgs,
  .cs-x,
  .lp-nav,
  .lp-count {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .rail-gem::after { animation: none; }
}