/* ── Splash screen ───────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease;
}
#splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
#splash.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Variables ───────────────────────────────────────── */
:root {
  --btnInk:       rgba(255, 255, 255, 0.92);
  --stroke:       rgba(255, 255, 255, 0.18);
  --glass:        rgba(255, 255, 255, 0.08);
  --glassHover:   rgba(255, 255, 255, 0.13);
  --cardBg:       rgba(0, 0, 0, 0.92);
  --cardStroke:   rgba(255, 255, 255, 0.18);
  --cardText:     rgba(255, 255, 255, 0.96);
  --auraColor:    hsla(245, 85%, 72%, 0.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #05050a;
}

/* ── Background canvases ─────────────────────────────── */
#space {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  display: block; pointer-events: none;
  background: #05050a;
}

#animus {
  position: fixed; inset: 0; z-index: 2;
  width: 100vw; height: 100vh;
  display: none; pointer-events: none;
}

#tarotCanvas {
  position: fixed; inset: 0; z-index: 3;
  width: 100vw; height: 100vh;
  display: block;
}

/* ── Generic button base ─────────────────────────────── */
button {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 10px;
  color: var(--btnInk);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 120ms ease;
}
button:active { }

/* ── Hamburger button ─────────────────────────────────── */
.menuBtn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 40;

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 120ms ease, transform 120ms ease,
              border-color 400ms ease, box-shadow 400ms ease;
}



/* Focus Mode active — same color, bars collapse to single line */
.menuBtn.focus-mode-active {
  box-shadow: 0 0 16px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5);
}
.menuBtn.focus-mode-active .bar:nth-child(1) {
  transform: translateY(7px) scaleX(0.5);
  opacity: 0;
}
.menuBtn.focus-mode-active .bar:nth-child(2) {
  transform: scaleX(1.2);
}
.menuBtn.focus-mode-active .bar:nth-child(3) {
  transform: translateY(-7px) scaleX(0.5);
  opacity: 0;
}
/* Pulse animation on toggle */
@keyframes focusPulse {
  0%   { box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); }
  40%  { box-shadow: 0 0 32px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); transform: scale(1.08); }
  100% { box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); transform: scale(1); }
}
.menuBtn.focus-mode-pulse {
  animation: focusPulse 400ms ease-out forwards;
}

.menuBtn .bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--auraColor);
  transition: transform 200ms ease, opacity 200ms ease,
              background 400ms ease;
}

/* ── Menu panel ─────────────────────────────────────── */
.panel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 39;

  width: 272px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 12px 10px 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(4, 3, 14, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.65);

  display: none;
}
.panel.open { display: block; }

/* Scrollbar (webkit) */
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* ── Panel typography ───────────────────────────────── */
.sectionTitle {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 4px 2px 8px;
}

.divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0 12px;
  border-radius: 999px;
}

/* ── Rows ───────────────────────────────────────────── */
.sliderRow {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
}

.sliderLabelRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 8px;
}
.sliderValue { color: rgba(255,255,255,0.5); }

input[type="range"] {
  width: 100%;
  accent-color: rgba(255,255,255,0.8);
}
/* Hue-specific sliders get rainbow gradient track */
#hueASlider, #hueBSlider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    90deg,
    hsl(0,85%,55%), hsl(45,85%,55%), hsl(90,85%,55%),
    hsl(135,85%,55%), hsl(180,85%,55%), hsl(225,85%,55%),
    hsl(270,85%,55%), hsl(315,85%,55%), hsl(360,85%,55%)
  );
  cursor: pointer;
}
#hueASlider::-webkit-slider-thumb,
#hueBSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  border: 2px solid rgba(0,0,0,0.2);
}
#hueASlider::-moz-range-thumb,
#hueBSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  border: 2px solid rgba(0,0,0,0.2);
}



.fullWidthBtn {
  width: 100%;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  outline: none;
  font-weight: 600;
  font-size: 13px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
}
select option {
  background: #05050a;
  color: rgba(255,255,255,0.9);
}

/* ── Reversals toggle ───────────────────────────────── */
.toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggleLabel {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  user-select: none;
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggleTrack {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 200ms ease, border-color 200ms ease;
  position: relative;
  display: block;
}

.toggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform 200ms ease, background 200ms ease;
  display: block;
}

.toggle input:checked + .toggleTrack {
  background: rgba(180, 80, 80, 0.55);
  border-color: rgba(220, 100, 100, 0.4);
}

.toggle input:checked + .toggleTrack .toggleThumb {
  transform: translateX(16px);
  background: rgba(255, 180, 180, 0.92);
}

/* ── View mode overlay (reticle shown when draw is disabled) ── */
.zoomOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 10;
  color: var(--auraColor);
}
.zoomOverlay.visible { opacity: 1; }

.zoomReticle {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 8px var(--auraColor));
}

.zoomLabel {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  text-shadow: 0 0 8px var(--auraColor);
}

/* ── Card description overlay (tap-hold) ─────────────────── */
.descOverlay {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 22%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 14%, #08090f) 40%,
    color-mix(in srgb, var(--auraColor) 8%, #08090f) 75%,
    color-mix(in srgb, var(--auraColor) 4%, #08090f) 100%
  );
  border-top: 0;
  border-bottom: 0;
  padding: 10px 16px 14px 16px;
  z-index: 61;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  max-height: 35vh;
  overflow-y: auto;
}
.descOverlay::before,
.descOverlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: var(--auraColor);
  box-shadow: 0 0 7px color-mix(in srgb, var(--auraColor) 55%, transparent);
}
.descOverlay::before { top: 0; }
.descOverlay::after  { bottom: 0; }
.descOverlay > * {
  position: relative;
  z-index: 2;
}
.descOverlay.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.descTitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--auraColor);
  text-shadow: 0 0 10px var(--auraColor);
  text-transform: uppercase;
}

.descBody {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 210, 255, 0.85);
}

/* ══════════════════════════════════════════════════════
   CARD INDEX
   ══════════════════════════════════════════════════════ */
#cardIndexOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(6, 7, 16);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
}
#cardIndexOverlay.ci-open {
  opacity: 1;
  pointer-events: auto;
}
/* Gradient layer — fixed so it doesn't scroll with content */
#cardIndexOverlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 25%, black) 0%,
    color-mix(in srgb, var(--auraColor) 14%, black) 35%,
    color-mix(in srgb, var(--auraColor) 8%, black) 65%,
    color-mix(in srgb, var(--auraColor) 4%, transparent) 100%
  );
}
/* All children sit above the gradient */
#cardIndexOverlay > * {
  position: relative;
  z-index: 1;
}

/* Views fill the overlay, only one shown at a time */
.ci-list-view, .ci-detail-view {
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* Fill available space between search row and bottom bar */
  flex: 1;
  min-height: 0;
}
.ci-list-view.ci-active {
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ci-detail-view.ci-active {
  display: flex;
  overflow: hidden; /* sticky + scroll children */
}

/* ── Search + deck toggle ─────────────────────────── */
.ci-search-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
.ci-search {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--auraColor);
  border-radius: 10px;
  padding: 9px 14px;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  outline: none;
  transition: box-shadow 150ms ease;
  box-shadow: 0 0 8px color-mix(in srgb, var(--auraColor) 20%, transparent);
}
.ci-search:focus {
  box-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 45%, transparent);
}
.ci-search::placeholder { color: rgba(255,255,255,0.3); }

.ci-deck-toggle {
  display: flex;
  gap: 6px;
}
.ci-deck-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-deck-btn.active {
  background: rgba(100,80,200,0.25);
  border-color: var(--auraColor);
  color: var(--auraColor);
  box-shadow: 0 0 8px var(--auraColor);
}

/* ── List ─────────────────────────────────────────── */
.ci-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.ci-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  padding: 16px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.ci-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 8px;
  padding: 8px;
  margin: 0 -8px;
}

.ci-thumb-wrap {
  width: auto;
  min-width: 28px;
  max-width: 40px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ci-thumb {
  width: auto;
  height: 100%;
  max-width: 40px;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.ci-thumb-glyph {
  font-size: 24px;
  color: var(--auraColor);
  line-height: 1;
}
.ci-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ci-row-name {
  font-size: 14px;
  color: rgba(255,255,255,0.88);
}
.ci-empty {
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
}

/* ── Detail view ──────────────────────────────────── */
/* Sticky top: deck select + image + card name */
.ci-detail-sticky {
  flex-shrink: 0;
  background: transparent;
  z-index: 2;
}
/* Scrollable bottom: meta, meanings, lore */

.ci-detail-deck {
  padding: 10px 16px 0;
  flex-shrink: 0;
}
.ci-card-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 24px 20px;
  flex-shrink: 0;
  height: calc(min(340px, 85vw) + 44px); /* fixed height — all decks same vertical space */
}
.ci-card-img {
  width: auto;
  height: min(340px, 85vw);
  max-width: 90%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 0 32px var(--auraColor), 0 8px 32px rgba(0,0,0,0.6);
  display: block;
  background: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: zoom-in;
}
/* Per-deck aspect ratios kept for browsers that need the hint before image loads */
.ci-card-img.ci-liminal-img    { aspect-ratio: 640 / 1040; object-fit: fill; }
.ci-card-img.ci-gilded-img     { aspect-ratio: 1 / 2; }
.ci-card-img.ci-riderwaite-img { aspect-ratio: 258 / 420; }
/* Rune images — tall narrow domino proportion, less rounded */
.ci-card-img.ci-rune-img {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
}
/* Playing cards — more rounded corners */
.ci-card-img.ci-playing-img {
  aspect-ratio: 344 / 560;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
}
.ci-card-img-placeholder {
  width: min(220px, 55vw);
  height: min(330px, 82vw);
  aspect-ratio: unset;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: var(--auraColor);
  text-shadow: 0 0 24px var(--auraColor);
}

/* Info block — free layout, sections separated by spacing */
.ci-card-info {
  padding: 4px 20px 32px;
}
.ci-content-panel {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  backdrop-filter: none;
}
.ci-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.97);
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.ci-meta-pill {
  background: rgba(100,80,200,0.18);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 15px; /* glyph/emoji size */
  color: rgba(255,255,255,0.75);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 36px;
  justify-content: center;
}
/* Pill text hidden — icon only */
.ci-pill-text { display: none; }
.ci-numerology {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 16px;
  font-style: italic;
}
.ci-meaning-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ci-meaning-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-reversed-block .ci-meaning-label {
  color: rgba(200,100,100,0.85);
}
.ci-meaning-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(220,210,255,0.82);
}
/* Keyword chips row */
.ci-keyword-chips {
  font-size: 13px;
  color: rgba(220,210,255,0.75);
  line-height: 1.7;
  margin-bottom: 0;
}
.ci-keyword-chip {
  font-size: 13px;
  color: rgba(220,210,255,0.75);
  letter-spacing: 0.02em;
  /* No badge — plain text, comma separation handled in JS */
}
/* Lore labels same treatment */
.ci-lore-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Desktop: two-column detail ───────────────────── */
@media (min-width: 640px) {
  .ci-detail-view {
    overflow-y: auto;
  }
  .ci-card-img-wrap {
    float: left;
    width: 260px;
    height: auto; /* sidebar: let height flow naturally */
    padding: 20px 20px 20px 24px;
    position: sticky;
    top: 0;
  }
  .ci-card-img {
    width: 100%;
    height: auto; /* width-driven on desktop sidebar */
  }
  .ci-card-info {
    margin-left: 260px;
    padding: 20px 24px 40px 16px;
  }
  .ci-detail-deck {
    margin-left: 260px;
  }
  .ci-detail-name { text-align: left; }
  .ci-detail-meta-row { justify-content: flex-start; }
  .ci-numerology { text-align: left; }
}

/* ── Desc overlay: title row ─────────────────────────── */
.descTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* ── Card index: no pinch-zoom ───────────────────────── */
#cardIndexOverlay {
  touch-action: pan-y;
}

/* ── Swipe hint ───────────────────────────────────────── */
.ci-swipe-hint {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  padding: 6px 16px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* ── Nav dots ─────────────────────────────────────────── */
.ci-nav-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}
.ci-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.ci-dot-active {
  background: var(--auraColor);
  transform: scale(1.4);
  box-shadow: 0 0 6px var(--auraColor);
}
.ci-dot-count {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}

/* ── Reversed badge ───────────────────────────────────── */
.ci-rev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(200,100,100,0.9);
  border: 1px solid rgba(200,100,100,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Active meaning highlight ─────────────────────────── */
.ci-meaning-active {
  background: rgba(100,80,200,0.1);
  border-radius: 8px;
  padding: 10px 10px 10px 12px;
  border-left: 2px solid var(--auraColor);
  margin-bottom: 20px;
}
.ci-reversed-block.ci-meaning-active {
  border-left-color: rgba(200,100,100,0.7);
}

/* ── Lightbox ─────────────────────────────────────────── */
.ci-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  touch-action: none;
}
.ci-lightbox.ci-lb-open {
  opacity: 1;
  pointer-events: auto;
}
.ci-lightbox-img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  object-fit: contain;
}
.ci-lightbox-meta {
  position: absolute;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  transform: translateX(-50%);
  width: min(88vw, 560px);
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(8, 9, 18, 0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--auraColor) 52%, rgba(255,255,255,0.12));
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 16px color-mix(in srgb, var(--auraColor) 14%, transparent);
  text-align: center;
  pointer-events: none;
}
.ci-lightbox-meta[hidden] { display: none !important; }
.ci-lightbox-meta-name {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
}
.ci-lightbox-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.ci-lightbox-meta-keywords {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
}

/* ── Image wrap cursor hint ───────────────────────────── */
.ci-card-img-wrap { cursor: zoom-in; }

/* ── Action icon buttons (Journal / Index / Clear) ───── */
.actionBtnRow {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}
.actionIconBtn {
  flex: 1;
  height: 44px;
  width: 44px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}


/* ══════════════════════════════════════════════════════
   JOURNAL
   ══════════════════════════════════════════════════════ */
#journalOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(6, 7, 16);
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
  touch-action: pan-y;
}
/* Cards strip pinned above keyboard via absolute positioning */
#journalOverlay.jo-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Journal close/nav buttons now in bottom bar ──── */
.jo-back, .jo-close {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 36px;
  transition: color 150ms ease;
}

/* ── Views ────────────────────────────────────────── */
/* ── Calendar nav (mini popup only) ──────────────── */
.jo-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.jo-cal-month {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.04em;
}
.jo-cal-arrow {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
}

/* ── Calendar grid ────────────────────────────────── */
.jo-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 12px;
  flex: 1;
  align-content: start;
  overflow-y: auto;
}
.jo-cal-day-name {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  padding: 4px 0 6px;
  letter-spacing: 0.06em;
}
.jo-cal-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease;
  border: 1px solid transparent;
}
.jo-cal-empty, .jo-future { cursor: default; opacity: 0.25; }
.jo-cal-num {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1;
}
.jo-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--auraColor);
  margin-top: 2px;
}
.jo-today {
  border-color: var(--auraColor) !important;
  box-shadow: 0 0 8px var(--auraColor);
}

/* ── Calendar shades (0=empty → 6=1000 words) ─────── */
.jo-shade-0 { background: rgba(255,255,255,0.04); }
.jo-shade-1 { background: rgba(var(--auraRGB, 120,90,220), 0.20); }
.jo-shade-2 { background: rgba(var(--auraRGB, 120,90,220), 0.35); }
.jo-shade-3 { background: rgba(var(--auraRGB, 120,90,220), 0.52); }
.jo-shade-4 { background: rgba(var(--auraRGB, 120,90,220), 0.68); }
.jo-shade-5 { background: rgba(var(--auraRGB, 120,90,220), 0.85); }
.jo-shade-6 { background: var(--auraColor); box-shadow: 0 0 8px var(--auraColor); }

/* ── Legend ───────────────────────────────────────── */
.jo-cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 16px 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.jo-shade {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

/* ── Day view ─────────────────────────────────────── */
/* The header/card stack is deliberately OUTSIDE the scrolling region.
   Earlier versions relied on position:sticky inside a mobile flex scroller,
   which could release the cards during certain textarea/viewport scroll
   paths. Only the paper scrolls now, so the cards cannot scroll away. */
.jo-day-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
  min-height: 0;
}
.jo-sticky-stack {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  background: #08090f;
  isolation: isolate;
}
.jo-day-header {
  padding: 14px 20px 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #08090f;
}
.jo-day-date {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.jo-word-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.jo-muted { margin-left: 6px; color: var(--auraColor); }
.jo-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  margin: 0 20px 12px;
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.jo-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--auraColor);
  box-shadow: 0 0 8px var(--auraColor);
  border-radius: 99px;
  transition: width 200ms ease;
}

/* ── Cards strip — cards scroll inside a static aura frame ─── */
.jo-cards-frame {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: rgba(6,7,16,0.97);
  box-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 14%, transparent);
}

.jo-cards-frame::before,
.jo-cards-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 8;
  pointer-events: none;
  background: var(--auraColor);
  box-shadow: 0 0 6px color-mix(in srgb, var(--auraColor) 48%, transparent);
}
.jo-cards-frame::before { top: 0; }
.jo-cards-frame::after  { bottom: 0; }

.jo-cards-strip {
  display: flex;
  width: 100%;
  gap: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  position: relative;
}

.jo-cards-strip.scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.jo-cards-strip.scrollable::-webkit-scrollbar { display: none; }
.jo-cards-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  padding: 8px 20px;
  font-style: italic;
}
.jo-card-thumb {
  flex: 0 0 20%;
  min-width: 0;
  height: 0;
  padding-bottom: 33.3%;
  position: relative;
  overflow: visible; /* allow glow to radiate outside card bounds */
  border-right: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jo-card-thumb:last-child { border-right: none; }

.jo-card-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  -webkit-touch-callout: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  clip-path: inset(0); /* clips image to card bounds without clipping the thumb's glow */
  touch-action: none;
  draggable: false;
}
/* Gilded Minima — see override block after "Journal larger card thumbnails" below */
.jo-card-thumb-gilded {
  background: #0a0814;
}
.jo-card-glyph {
  font-size: 22px;
  color: var(--auraColor);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ── Textarea ──────────────────────────────────────── */
.jo-paper-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.jo-paper {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 40px;
  background: rgba(6, 7, 16, 0.72);
  border: none;
  border-top: none;
  color: rgba(255,255,255,0.88);
  font-size: 15px;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
  box-sizing: border-box;
  display: block;
}
.jo-paper::placeholder { color: rgba(255,255,255,0.2); }

/* ── Index detail: journal buttons ───────────────── */
.ci-journal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 4px;
}
.ci-journal-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-journal-go {
  border-color: var(--auraColor);
  color: var(--auraColor);
}



/* ── Canvas header ────────────────────────────────── */
.canvasHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  padding: 18px 16px 12px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 7, 16, 0.72) 0%,
    rgba(6, 7, 16, 0.0) 100%
  );
}
.canvasHeader-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--auraColor);
  text-shadow: 0 0 20px var(--auraColor), 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.canvasHeader-sub {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(200, 185, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Journal: tap-hold card confirm ───────────────── */
.jo-card-thumb {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jo-card-thumb img {
  -webkit-touch-callout: none;
  pointer-events: none;
}
.jo-card-confirm {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(6, 7, 16, 0.92);
  border: 1px solid rgba(180,60,60,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.jo-card-confirm.visible {
  opacity: 1;
  pointer-events: auto;
}
.jo-card-confirm-name {
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jo-card-confirm-btn {
  width: 100%;
  padding: 3px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 5px;
  background: rgba(180,50,50,0.7);
  border: 1px solid rgba(220,80,80,0.5);
  box-shadow: none;
  color: rgba(255,200,200,0.95);
  cursor: pointer;
  transition: background 120ms ease;
}
.jo-card-confirm-btn:active { background: rgba(200,60,60,0.9); }
.jo-card-cancel-btn {
  width: 100%;
  padding: 2px 4px;
  font-size: 9px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
}

/* ── Sticky bottom nav bars (index + journal) ────── */
.ci-bottom-bar, .jo-bottom-bar {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 18%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 10%, #08090f) 100%
  );
  border-top: 1px solid var(--auraColor);
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--auraColor) 15%, transparent);
  z-index: 5;
  flex-shrink: 0;
}
#cardIndexOverlay, #journalOverlay {
  padding-bottom: 0;
  bottom: 60px !important;
}
.ci-bottom-btn, .jo-bottom-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  box-shadow: 0 0 10px color-mix(in srgb, var(--auraColor) 28%, transparent),
              0 3px 12px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.88);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-bottom-btn:active, .jo-bottom-btn:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.08);
}
/* Nav buttons on the right — back then close */
.ci-close-right, .jo-close-right,
.ci-nav-right { 
  margin-left: auto;
}
.ci-nav-right + .ci-nav-right {
  margin-left: 8px;
}

/* ── Journal: day header row + popup cal button ───── */
.jo-day-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.jo-cal-jump-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  color: rgba(255,255,255,0.45);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
  flex-shrink: 0;
}

/* ── Mini popup calendar ──────────────────────────── */
.jo-mini-cal {
  position: fixed;
  left: 50%;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 18px);
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  background: rgba(10, 11, 22, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--auraColor) 72%, transparent);
  border-radius: 18px;
  padding: 10px 12px 12px;
  z-index: 70;
  box-shadow: 0 12px 34px rgba(0,0,0,0.58), 0 0 16px color-mix(in srgb, var(--auraColor) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.985);
  transform-origin: bottom center;
  transition: opacity 160ms ease, transform 160ms ease;
}
.jo-mini-cal.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.jo-mini-cal-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 5px;
}
.jo-mini-cal .jo-cal-arrow {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  justify-self: center;
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.10);
}
.jo-mini-cal-month {
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.jo-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 18px repeat(6, 34px);
  gap: 3px;
}
.jo-mini-day-name {
  text-align: center;
  font-size: 8px;
  line-height: 18px;
  color: rgba(255,255,255,0.28);
  padding: 0;
  letter-spacing: 0.04em;
}
.jo-mini-cell {
  min-width: 0;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.67);
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease;
  border: 1px solid transparent;
}

.jo-mini-empty { height: 34px; }
.jo-mini-current { border-color: rgba(255,255,255,0.4) !important; }
.jo-mini-cell.jo-future { opacity: 0.2; cursor: default; }

/* ── Journal larger card thumbnails ───────────────── */
.jo-card-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 100px;
}
.jo-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Gilded Minima — same slot size as every other card, but contained so the
   full tall card shows with empty space on the sides rather than cropping */
.jo-card-thumb-gilded {
  background: #0a0814;
}
.jo-card-thumb-gilded img {
  object-fit: contain;
  object-position: center center;
}

/* ── Settings panel (full-screen, same as index/journal) ── */
.atmo-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 7, 16, 0.97);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
  touch-action: pan-y;
}
.atmo-panel.atmo-open {
  opacity: 1;
  pointer-events: auto;
}
.atmo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.atmo-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auraColor);
  text-shadow: 0 0 12px var(--auraColor);
}
.atmo-close {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 150ms ease;
}
.atmo-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
/* Section subheader within settings */
.atmo-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  padding: 8px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.atmo-privacy-link {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.atmo-privacy-link:hover { color: rgba(255,255,255,0.55); }

/* Inline randomize button sits in the sliderLabelRow next to hue value */
.inline-randomize-btn {
  margin-left: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  border-radius: 4px;
  transition: opacity 150ms;
  -webkit-tap-highlight-color: transparent;
}

/* No bottom bar needed — settings close lives in the real bottom nav */
.atmo-panel { padding-bottom: 0; }

/* ── Aura off: white text instead of gray ────────── */
/* aura-off: borders/glows use dim blue; text elements stay white */
body.aura-off .descTitle,
body.aura-off .ci-detail-name,
body.aura-off .canvasHeader-title {
  color: rgba(255,255,255,0.88);
}

/* ── Button tooltips (tap-hold) ───────────────────── */
.btn-tooltip {
  position: fixed;
  background: rgba(11, 14, 26, 0.95);
  border: 1px solid var(--auraColor);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--auraColor);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  box-shadow: 0 0 10px var(--auraColor);
}
.btn-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card lore (extended index descriptions) ─────── */
.ci-lore-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ci-lore-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 5px;
}
.ci-lore-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(220, 210, 255, 0.78);
}
.ci-lore-theme {
  font-style: italic;
  color: rgba(220, 210, 255, 0.92);
  font-size: 14px;
}
.ci-lore-affirmation {
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-left: 2px solid var(--auraColor);
  background: rgba(100, 80, 200, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--auraColor);
  text-shadow: 0 0 12px var(--auraColor);
  line-height: 1.5;
}

/* ── Symbol emoji chips — inline in meta row ───────── */
.ci-meta-pill-gap {
  display: inline-block;
  width: 10px;
  flex-shrink: 0;
}
.ci-symbol-emoji-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  flex-shrink: 0;
}

/* ── List view symbol emojis ───────────────────────── */
.ci-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
  overflow: hidden;
}
.ci-row-sym-gap {
  display: inline-block;
  width: 8px;
  flex-shrink: 0;
}
.ci-row-sym-emoji {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Symbolism section extra top border ────────────── */
.ci-symbolism-divider {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  margin-top: 8px;
  padding-top: 24px;
}

/* ── Symbol list ───────────────────────────────────── */
.ci-symbol-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.ci-symbol-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ci-symbol-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ci-symbol-entry-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--auraColor);
  opacity: 0.85;
  text-transform: uppercase;
  font-size: 10px;
}
.ci-symbol-entry-text {
  font-size: 12.5px;
  line-height: 1.68;
  color: rgba(200, 190, 240, 0.70);
}

/* ── Desc overlay redesign ───────────────────────── */
/* Orientation dot — subtle, doesn't take space */
.desc-orient-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.8;
}
.desc-orient-upright  { background: var(--auraColor); box-shadow: 0 0 5px var(--auraColor); }
.desc-orient-reversed { background: rgba(200,100,100,0.9); box-shadow: 0 0 5px rgba(200,100,100,0.7); }

/* Action row — add card + view spread */
.descActionRow {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.descActionBtn:active { background: rgba(255,255,255,0.12); }
.descActionBtn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.descActionBtn--index {
  border-color: var(--auraColor);
  color: var(--auraColor);
}

/* Remove old badge and spread button styles */
.descSpreadBtn { display: none !important; } /* replaced by .descActionBtn */

/* ── Index bottom nav: deck cycle button (center) ── */
.ci-bottom-deck-btn {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Journal cards strip — no visible scrollbar ──── */
.jo-cards-strip { scrollbar-width: none; }
.jo-cards-strip::-webkit-scrollbar { display: none; }



/* ── Orientation badge ─────────────────────────────── */
.desc-orient-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  vertical-align: middle;
  pointer-events: none;
  flex-shrink: 0;
  background: transparent;
}
.desc-orient-upright {
  color: var(--auraColor);
  border: 1px solid var(--auraColor);
  text-shadow: 0 0 6px var(--auraColor);
  background: transparent;
}
.desc-orient-reversed {
  color: rgba(220,100,100,0.95);
  border: 1px solid rgba(220,100,100,0.6);
  background: transparent;
}

/* ── Index deck dropdown ───────────────────────────── */
.ci-deck-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(100,80,200,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  margin-bottom: 4px;
}
.ci-detail-deck-select {
  margin: 8px 16px 4px;
  width: calc(100% - 32px);
}

/* ── Journal thumbnail popup menu ─────────────────── */
/* Option B — buttons slide up from bottom half of card */
.jo-thumb-popup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: rgba(6, 7, 16, 0.94);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 150ms ease;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.jo-thumb-popup.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.jo-popup-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  background: none;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 100ms ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jo-popup-btn:nth-child(2) { border-right: none; }
.jo-popup-btn:nth-child(3) { border-bottom: none; }
.jo-popup-btn:nth-child(4) { border-right: none; border-bottom: none; }
.jo-popup-remove {
  color: rgba(220,100,100,0.85);
}
.jo-popup-reverse {
  color: var(--auraColor);
}

/* ── Reversed indicator — red glow line at bottom of thumb ─────────── */
/* red line handled by body.reversal-glow .jo-thumb-reversed::after */

/* ── Index/journal nav button spacing ─────────────── */
.ci-bottom-bar, .jo-bottom-bar {
  gap: 8px;
}

/* ── Remove old confirm popup styles ──────────────── */
.jo-card-confirm { display: none !important; }

/* ── Settings card aura select ────────────────────── */
#cardAuraModeSelect {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  outline: none;
}

/* ── Overlay inline action buttons ────────────────── */
.descActionRow {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.descActionBtn:active { background: rgba(255,255,255,0.14); }
.descActionBtn {
  flex: 1;
  padding: 8px 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 150ms ease;
  white-space: nowrap;
  text-align: center;
}


/* ── Overlay action buttons (inside overlay, below text) ─ */
.overlayBtns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.overlayActionBtn {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: none;
}
.overlayActionBtn:active {
  color: var(--auraColor);
}

/* Add to Journal button — flex:1 like its sibling, min-width for "Already Saved" */
#descAddCardBtn {
  flex: 1;
  min-width: 120px;
}

/* Success pulse — flash text aura color */
@keyframes auraPulse {
  0%   { color: rgba(255,255,255,0.75); }
  50%  { color: var(--auraColor); }
  100% { color: rgba(255,255,255,0.75); }
}
.aura-btn-pulse {
  animation: auraPulse 600ms ease-out;
}

/* Already saved — dimmed */
.aura-btn-muted {
  color: rgba(255,255,255,0.35) !important;
}

/* ── Battery hint toast ────────────────────────────── */
.battery-hint {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11,14,26,0.95);
  border: 1px solid rgba(200,150,50,0.5);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(255,200,100,0.9);
  z-index: 60;
  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  animation: fadeInUp 400ms ease;
}
@keyframes fadeInUp {
  from { opacity:0; transform: translateX(-50%) translateY(10px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ── Settings perf select ──────────────────────────── */
#perfModeSelect {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  outline: none;
  margin-top: 4px;
}

/* ── Settings text inputs ──────────────────────────── */
.text-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  outline: none;
  margin-top: 4px;
  font-family: inherit;
}
.text-input::placeholder { color: rgba(255,255,255,0.25); }
.text-input:focus { border-color: var(--auraColor); }

/* ── PRO badge ─────────────────────────────────────── */
.paid-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,200,80,0.9);
  border: 1px solid rgba(255,200,80,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Index detail: sticky top / scroll bottom ────── */
.ci-detail-sticky {
  flex-shrink: 0;
  background: transparent;
  z-index: 2;
}
.ci-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: none;
}
.ci-detail-scroll::-webkit-scrollbar { display: none; }
/* ── Name bar: title + ornament + nav row ─────────── */
.ci-detail-name-bar {
  padding: 4px 20px 0;
  text-align: center;
}
.ci-detail-name-bar .ci-detail-name {
  margin: 0 0 4px;
}
/* ornament removed */
/* Nav row below ornament */
.ci-hint-row {
  display: flex;
  align-items: center;
  padding: 3px 0 6px;
  gap: 0;
}
.ci-prev-hint, .ci-next-hint {
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-prev-hint { text-align: left; }
.ci-next-hint { text-align: right; }
.ci-hint-btn {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
  transition: color 150ms ease;
}

.ci-prev-hint.ci-hint-btn { text-align: left; }
.ci-next-hint.ci-hint-btn { text-align: right; }
.ci-hint-count {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.45); /* matches hint button color */
  letter-spacing: 0.06em;
  padding: 0 8px;
}

/* ── Index: name bar + hint row below ─────────────── */
.ci-detail-name-bar {
  padding: 2px 20px 0;
  text-align: center;
}
.ci-detail-name-bar .ci-detail-name {
  margin: 0;
  display: block;
}
/* Hint row: ← prev  N/Total  next → on one thin line */
.ci-hint-row {
  display: flex;
  align-items: center;
  padding: 4px 0 6px;
  gap: 0;
}
/* hint styles consolidated above */

/* ── Journal: paper-wrap keyboard shrink ────────── */
.jo-paper-wrap {
  transition: max-height 200ms ease;
}

/* ── Settings inline toggle row ────────────────────── */
.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}

/* ── Journal thumbnail radial menu ─────────────────── */
/* Journal thumbs: aura glow, reversed glows red */
.jo-card-thumb {
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: box-shadow 200ms ease;
}
.jo-thumb-selected {
  box-shadow: 0 0 32px var(--auraColor), 0 4px 16px rgba(0,0,0,0.5);
  z-index: 5;
}
/* Reversed red line — ONLY in glow mode, never by default */
body.reversal-glow .jo-thumb-reversed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(200,70,70,0.9);
  box-shadow: 0 0 6px rgba(200,70,70,0.8);
  z-index: 2;
  pointer-events: none;
}
/* Selected + reversed: aura glow, red line stays */
.jo-thumb-selected.jo-thumb-reversed {
  box-shadow: 0 0 32px var(--auraColor), 0 4px 16px rgba(0,0,0,0.5);
}
.jo-radial-menu {
  /* positioned via JS — contains absolutely placed buttons */
}
.jo-radial-btn {
  height: 40px;
  width: 120px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 10px color-mix(in srgb, var(--auraColor) 28%, transparent),
              0 4px 14px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transform: translateY(-8px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 180ms ease,
              background 120ms ease;
}
.jo-radial-btn.jo-radial-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Remove — red border, red text */
.jo-radial-remove {
  border-color: rgba(220,80,80,0.6);
  box-shadow: 0 0 10px rgba(220,80,80,0.2), 0 4px 14px rgba(0,0,0,0.55);
}
.jo-radial-remove .lmb-icon,
.jo-radial-remove .lmb-text {
  color: rgba(220,90,90,0.9);
}
/* Reverse — red icon only, aura border */
.jo-radial-reverse .lmb-icon {
  color: rgba(220,90,90,0.9);
}

/* category toggle removed — now a cycle button */
/* Bottom bar: category + deck cycle side by side */
.ci-bottom-center {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  min-width: 0;
}
.ci-bottom-center .ci-bottom-deck-btn {
  flex: 1;
  min-width: 0;
}
/* ── Settings: deck equip rows ──────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.deck-equip-row:last-of-type { border-bottom: none; }
.deck-equip-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.deck-equip-label {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.deck-equip-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auraColor);
  opacity: 0.7;
}
/* Each toggle column is a fixed width so legend aligns */
.deck-equip-row .toggle {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  justify-content: center;
}
.deck-drag-handle {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 16px;
  cursor: grab;
  padding: 4px 0;
}

/* ── Settings: shortcuts section ───────────────── */
.atmo-section-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: -4px 0 8px;
  line-height: 1.5;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shortcut-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  width: 40px;
}

/* ══════════════════════════════════════════════════
   LINEAR MENU (main + journal)
   ══════════════════════════════════════════════════ */

/* Backdrop */
#radialBackdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 250ms ease;
}
#radialBackdrop.open {
  background: rgba(0,0,0,0.35);
  pointer-events: auto;
}

/* ── Main menu linear buttons ───────────────── */
.linear-menu-btn {
  position: fixed;
  height: 44px;
  min-width: 0;
  width: 148px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 12px color-mix(in srgb, var(--auraColor) 30%, transparent),
              0 4px 16px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  z-index: 41;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 180ms ease,
              background 120ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.linear-menu-btn.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.lmb-icon {
  font-size: 17px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.75;
}
.lmb-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}

/* Hamburger → X when open */
.menuBtn.radial-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menuBtn.radial-open .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menuBtn.radial-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Collapsible settings sections ──────────────── */
.atmo-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.atmo-section:last-child { border-bottom: none; }
.atmo-subsection-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}

.atmo-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 14px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  cursor: pointer;
  text-align: left;
}


.atmo-chevron {
  font-size: 12px;
  transition: transform 220ms ease;
  color: rgba(255,255,255,0.4);
}
.atmo-collapse-btn.open .atmo-chevron {
  transform: rotate(0deg);
}

.atmo-section-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 300ms ease, opacity 200ms ease;
  opacity: 1;
  padding-bottom: 8px;
}
.atmo-section-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ── Collapsible subsections ─────────────────────── */
.atmo-subsection {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 4px;
}
.atmo-subsection:last-child { border-bottom: none; }
.atmo-sub-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  transition: color 150ms;
  -webkit-tap-highlight-color: transparent;
}

.atmo-sub-collapse-btn.open   { color: rgba(255,255,255,0.45); }
.atmo-sub-chevron {
  font-size: 10px;
  transition: transform 250ms ease;
  display: inline-block;
  transform: rotate(-90deg);
}
.atmo-sub-collapse-btn.open .atmo-sub-chevron {
  transform: rotate(0deg);
}
.atmo-subsection-body {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 280ms ease, opacity 180ms ease;
  opacity: 1;
  padding-bottom: 6px;
}
.atmo-subsection-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ── Deck row drag handle ────────────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.deck-row-dragging {
  opacity: 0.6;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}

/* ── Journal thumb drag ──────────────────────────── */
.jo-thumb-dragging {
  opacity: 0.45;
  transition: opacity 150ms ease;
}
/* Ghost overlay follows finger */
.jo-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  border-radius: 6px;
  box-shadow: 0 0 24px var(--auraColor), 0 8px 24px rgba(0,0,0,0.7);
  transform: scale(1.1);
  transition: none;
  overflow: hidden;
}
/* Deck row drag ghost — matches journal strip style */
.deck-row-dragging {
  opacity: 0.35;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  transition: opacity 150ms ease;
}
.deck-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  left: 0;
  right: 0;
  background: rgba(14, 12, 32, 0.97);
  border: 1px solid color-mix(in srgb, var(--auraColor) 50%, transparent);
  border-radius: 10px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--auraColor) 30%, transparent),
              0 8px 24px rgba(0,0,0,0.7);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: none;
}
/* Other thumbs shift smoothly */
.jo-card-thumb {
  transition: transform 180ms ease;
}

/* ── Restored active state feedback ─────────────────── */

.ci-row:active { background: rgba(255,255,255,0.06); }
.actionIconBtn:active { background: rgba(255,255,255,0.18); }
.jo-card-thumb:active { opacity: 0.85; }
.inline-randomize-btn:active { opacity: 0.6; }
.ci-bottom-deck-btn:active { background: rgba(255,255,255,0.14); }
.jo-popup-btn:active { background: rgba(255,255,255,0.12); }
.bnav-btn:active { color: var(--auraColor); }
.ci-hint-btn:active { color: var(--auraColor); background: rgba(255,255,255,0.05); }
.atmo-collapse-btn:active { opacity: 0.7; }
.atmo-sub-collapse-btn:active { opacity: 0.7; }




/* ═══════════════════════════════════════════════════════
   PERSISTENT BOTTOM NAV
   ═══════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 22%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 12%, #08090f) 50%,
    color-mix(in srgb, var(--auraColor) 6%, #08090f) 100%
  );
  border-top: 1px solid var(--auraColor);
  border-bottom: 1px solid var(--auraColor);
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--auraColor) 18%, transparent),
              0  4px 16px color-mix(in srgb, var(--auraColor) 12%, transparent);
}

/* Show only the active state */
.bnav-state { display: none; width: 100%; }
.bottom-nav[data-state="canvas"]   .bnav-canvas   { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.bottom-nav[data-state="journal"]  .bnav-journal   { display: flex; align-items: center; gap: 4px; }
.bottom-nav[data-state="index"]    .bnav-index     { display: flex; align-items: center; gap: 4px; }
.bottom-nav[data-state="settings"] .bnav-settings  { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Journal typing: Android lifts fixed controls into the visual viewport when
   the IME opens. Hide this nav while the software keyboard is present so the
   close button stays out of the typing path. */
.bottom-nav[data-state="journal"].jo-keyboard-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Shared button style — fully transparent, text/icon only */
.bnav-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255,255,255,0.70);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bnav-btn:active {
  background: transparent;
  color: var(--auraColor);
}

/* Deck button — text only, no background */
.bnav-btn.bnav-deck-btn {
  width: auto;
  flex: 1;
  padding: 0 14px;
  font-size: 13px;
  gap: 5px;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
}

.bnav-deck-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  cursor: pointer;
  transition: color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bnav-deck-btn:active {
  color: var(--auraColor);
}


/* Center group (index: cat + deck cycle) */
.bnav-center {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

/* Spacer pushes right group to far right */
.bnav-spacer { flex: 1; }

/* Index nav cat + deck buttons — fill remaining space evenly */
.bnav-ci-cat, .bnav-ci-deck {
  flex: 1;
  justify-content: center;
}

/* Push right-aligned buttons to the end */
.bnav-right { margin-left: auto; }
.bnav-right + .bnav-right { margin-left: 8px; }

/* Settings panel full-screen */
.atmo-fullscreen {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 60px !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Extra content block in settings for canvas section */
.atmo-body-extra {
  padding: 0 16px 16px;
}

/* ── Deck row two-toggle layout ───────────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deck-equip-row .toggle + .toggle {
  margin-left: 4px;
}
/* Standby deck rows — equip toggle only, no drag handle */
.deck-equip-row--standby {
  padding: 10px 4px;
  gap: 12px;
}
.deck-equip-row--standby .deck-equip-info {
  flex: 1;
}
.deck-equip-row--standby .toggle {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  justify-content: center;
}
/* Active rows get a subtle left accent */
.deck-equip-row--active {
  border-left: 2px solid color-mix(in srgb, var(--auraColor) 35%, transparent);
  padding-left: 8px;
}
/* Standby sections collapse when empty */
.deck-sub--standby:not(:has(.deck-equip-row)) {
  display: none;
}

.deck-sub-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 6px 4px 4px;
}

.deck-category-separator {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  opacity: 0.6;
  padding: 10px 4px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--auraColor) 20%, transparent);
  margin-bottom: 4px;
}

.deck-toggle-legend {
  display: flex;
  align-items: center;
  padding: 2px 4px 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 12px;
}
/* Spacer mirrors deck-equip-info flex:1 */
.deck-toggle-legend::before {
  content: "";
  flex: 1;
  min-width: 0;
}
/* Handle spacer at end mirrors drag handle width */
.deck-toggle-legend::after {
  content: "";
  width: 24px;
  flex-shrink: 0;
}
.deck-toggle-legend span {
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}
/* Ensure handle stays last in flex row */
.deck-drag-handle { order: 10; }

/* ── Aura-off text overrides ─────────────────────────────
   When aura is disabled, keep primary reading text white
   rather than falling through to the dim blue placeholder.
   Decorative accents (badges, active states, borders) keep
   their auraColor — they still look intentional in blue.
──────────────────────────────────────────────────────── */
.aura-off .zoomOverlay,
.aura-off .zoomLabel,
.aura-off .descTitle,
.aura-off .ci-section-header,
.aura-off .ci-meaning-label,
.aura-off .ci-detail-name,
.aura-off .ci-symbol-entry-name,
.aura-off .jo-card-glyph,
.aura-off .jo-entry-deck-label,
.aura-off .jo-entry-theme,
.aura-off .jo-section-header,
.aura-off .jo-section-label,
.aura-off .canvasHeader-title {
  color: rgba(255,255,255,0.88);
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   RELEASE CANDIDATE — safe areas, status, backup controls
   ═══════════════════════════════════════════════════════ */
html, body {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overscroll-behavior: none;
}
body { height: 100dvh; }
#space, #animus, #tarotCanvas { height: 100dvh; }

.canvasHeader {
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

.bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.descOverlay {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

#cardIndexOverlay,
#journalOverlay {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.atmo-fullscreen {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.arcana-toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -7px);
  width: min(84vw, 460px);
  z-index: 1000;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, transparent);
  background: rgba(8, 9, 18, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.86);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 10px color-mix(in srgb, var(--auraColor) 12%, transparent);
  font: 500 12.5px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.arcana-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.arcana-toast[data-tone="warning"] { border-color: #d9a441; }
.arcana-toast[data-tone="danger"]  { border-color: #d65a67; }
.arcana-toast[data-tone="success"] { border-color: #69c991; }

.settings-note {
  margin: 4px 0 14px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  line-height: 1.6;
}
.settings-note strong { color: rgba(255,255,255,0.88); font-weight: 600; }
.settings-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-action-btn {
  flex: 1 1 130px;
  min-height: 42px;
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--auraColor) 55%, transparent);
  color: rgba(255,255,255,0.86);
  box-shadow: none;
}
.settings-status {
  min-height: 18px;
  margin-top: 10px;
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  line-height: 1.4;
}
.settings-status.is-error { color: #e38a94; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--auraColor);
  outline-offset: 3px;
}

/* On a very crowded canvas, drop expensive glass effects before interaction. */
html[data-performance-tier="2"] .bottom-nav,
html[data-performance-tier="2"] .descOverlay,
html[data-performance-tier="3"] .bottom-nav,
html[data-performance-tier="3"] .descOverlay {
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .arcana-toast { transition: none; }
}

/* ── Browser pass 2: on-demand and offline deck controls ─────────── */
.deck-offline-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.deck-offline-note {
  margin: 2px 4px 10px;
}
.offline-deck-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offline-deck-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 6px 8px 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}
.offline-deck-meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.offline-deck-name {
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}
.offline-deck-detail {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255,255,255,0.42);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offline-deck-btn {
  flex-shrink: 0;
  min-width: 92px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 52%, rgba(255,255,255,0.12));
  border-radius: 9px;
  background: color-mix(in srgb, var(--auraColor) 12%, rgba(10,8,28,0.72));
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.offline-deck-btn:disabled {
  cursor: default;
  opacity: 0.72;
}
.offline-deck-btn.saved {
  border-color: rgba(105,201,145,0.48);
  background: rgba(39,111,72,0.18);
  color: rgba(193,244,212,0.92);
}



.atmo-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atmo-header-close { display: none; }

/* ═══════════════════════════════════════════════════════
   BROWSER PASS 3 — responsive desktop and tablet shell
   ═══════════════════════════════════════════════════════ */

/* The desktop Settings drawer gets a click-catching veil while preserving the
   canvas as visible context. It remains absent from the full-screen mobile UI. */
.atmo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: rgba(1, 2, 9, 0.18);
  transition: opacity 180ms ease;
}

.ci-desktop-empty { display: none; }

/* Roomier tablet/browser navigation without turning the canvas into a desktop
   dashboard. The same controls become a compact floating instrument bar. */
@media (min-width: 720px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(680px, calc(100vw - 32px));
    height: 54px;
    padding: 0 10px;
    padding-bottom: 0;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.16));
    border-radius: 17px;
    background: color-mix(in srgb, var(--auraColor) 10%, rgba(5, 6, 16, 0.82));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 42px rgba(0,0,0,0.52),
                0 0 22px color-mix(in srgb, var(--auraColor) 16%, transparent);
  }

  .bnav-btn { height: 42px; }
  .bnav-btn.bnav-deck-btn { max-width: 280px; }

  .descOverlay {
    left: 16px;
    right: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid color-mix(in srgb, var(--auraColor) 70%, rgba(255,255,255,0.12));
    border-radius: 16px;
  }

  #journalOverlay {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .canvasHeader {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Desktop / large-tablet workspace. */
@media (min-width: 900px) {
  /* Right-side Settings drawer */
  .atmo-backdrop {
    display: block;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .atmo-backdrop.atmo-backdrop-open {
    opacity: 1;
    pointer-events: auto;
  }

  .atmo-fullscreen {
    left: auto !important;
    right: 18px !important;
    top: 18px !important;
    bottom: 18px !important;
    width: min(500px, calc(100vw - 36px)) !important;
    max-width: 500px !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 48%, rgba(255,255,255,0.12)) !important;
    border-radius: 18px !important;
    background: rgba(6, 7, 16, 0.90);
    box-shadow: -18px 22px 60px rgba(0,0,0,0.52),
                0 0 24px color-mix(in srgb, var(--auraColor) 12%, transparent);
    transform: translateX(26px);
    transition: opacity 190ms ease, transform 220ms ease;
  }
  .atmo-fullscreen.atmo-open { transform: translateX(0); }
  .atmo-header { padding: 17px 20px 13px; }
  .atmo-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .atmo-header-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    color: rgba(255,255,255,0.68);
    font-size: 15px;
  }
  .atmo-header-close:hover {
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.08);
  }
  .atmo-body { padding: 12px 20px 24px; }
  .bottom-nav[data-state="settings"] { display: none; }

  /* Card Index becomes a browser workspace only in its complete-index mode.
     Spread and journal launches remain focused detail views. */
  #cardIndexOverlay {
    left: 18px !important;
    right: 18px !important;
    top: 18px !important;
    bottom: 82px !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 36%, rgba(255,255,255,0.10));
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0,0,0,0.58),
                0 0 24px color-mix(in srgb, var(--auraColor) 10%, transparent);
  }

  #cardIndexOverlay[data-mode="full"] {
    display: grid;
    grid-template-columns: minmax(300px, 33%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  #cardIndexOverlay[data-mode="full"] .ci-list-view {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, var(--auraColor) 22%, rgba(255,255,255,0.08));
    background: rgba(3, 4, 12, 0.28);
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) {
    align-items: stretch;
    justify-content: stretch;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-detail-sticky,
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-detail-scroll {
    display: none;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-desktop-empty {
    display: flex;
  }

  .ci-desktop-empty {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px;
    color: rgba(255,255,255,0.42);
    text-align: center;
  }
  .ci-desktop-empty-glyph {
    color: var(--auraColor);
    font-size: 54px;
    line-height: 1;
    text-shadow: 0 0 24px var(--auraColor);
    opacity: 0.78;
  }
  .ci-desktop-empty-title {
    margin-top: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .ci-desktop-empty-copy {
    max-width: 430px;
    font-size: 13px;
    line-height: 1.65;
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active {
    display: grid !important;
    grid-template-columns: minmax(240px, 36%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active .ci-desktop-empty {
    display: none;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-sticky {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.07);
    scrollbar-width: thin;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-scroll {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }

  #cardIndexOverlay[data-mode="full"] .ci-search-row {
    padding: 18px 18px 10px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-list {
    padding: 0 18px 30px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-row {
    padding: 9px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-row.ci-selected {
    background: color-mix(in srgb, var(--auraColor) 13%, rgba(255,255,255,0.035));
    box-shadow: inset 2px 0 0 var(--auraColor);
  }
  #cardIndexOverlay[data-mode="full"] .ci-row.ci-selected .ci-row-name {
    color: rgba(255,255,255,0.98);
  }

  /* Undo the earlier tablet float layout inside the new desktop detail grid. */
  #cardIndexOverlay[data-mode="full"] .ci-card-img-wrap {
    float: none;
    width: 100%;
    height: auto;
    padding: 28px 24px 20px;
    position: static;
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-img {
    width: auto;
    height: auto;
    max-width: min(100%, 330px);
    max-height: 52vh;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-name-bar {
    padding: 2px 18px 22px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-name {
    text-align: center;
    font-size: clamp(17px, 1.55vw, 22px);
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-info {
    margin-left: 0;
    padding: 28px 34px 52px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-meta-row {
    justify-content: flex-start;
  }
  #cardIndexOverlay[data-mode="full"] .ci-numerology {
    text-align: left;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-deck {
    margin-left: 0;
  }

  /* Back is a mobile list/detail navigation concept; the list remains visible
     on desktop, while Escape can still clear the selected detail. */
  #cardIndexOverlay[data-mode="full"].ci-open ~ .bottom-nav #navCiBack,
  body:has(#cardIndexOverlay[data-mode="full"].ci-open) #navCiBack {
    display: none !important;
  }
}

@media (min-width: 1250px) {
  #cardIndexOverlay[data-mode="full"] {
    grid-template-columns: minmax(330px, 30%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active {
    grid-template-columns: minmax(290px, 35%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-info {
    padding-left: 42px;
    padding-right: 46px;
  }
}

/* ═══════════════════════════════════════════════════════
   BROWSER PASS 4 — installability and web presentation
   ═══════════════════════════════════════════════════════ */
.webapp-intro {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 3px 0 16px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 24%, rgba(255,255,255,0.08));
  border-radius: 13px;
  background: color-mix(in srgb, var(--auraColor) 7%, rgba(255,255,255,0.025));
}
.webapp-intro-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  filter: drop-shadow(0 7px 16px rgba(0,0,0,0.42));
}
.webapp-intro-title {
  margin: 3px 0 3px;
  color: rgba(255,255,255,0.94);
  font: 650 14px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.webapp-intro .settings-note { margin: 0; }

.webapp-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 13px;
}
.webapp-status-card {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
}
.webapp-status-label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.38);
  font: 600 9px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.webapp-status-value {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,0.9);
  font: 650 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webapp-status-value[data-state="online"],
.webapp-status-value[data-state="ready"] { color: rgba(188,240,207,0.92); }
.webapp-status-value[data-state="offline"] { color: rgba(249,205,121,0.92); }
.webapp-status-value[data-state="pending"] { color: rgba(255,255,255,0.62); }
.webapp-status-detail {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,0.43);
  font: 400 10px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.webapp-action-row { margin-top: 4px; }
.webapp-primary-btn {
  border-color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(8,9,20,0.78));
  color: rgba(255,255,255,0.96);
}
.webapp-primary-btn.is-installed {
  border-color: rgba(105,201,145,0.38);
  background: rgba(39,111,72,0.14);
  color: rgba(193,244,212,0.86);
}

.install-nudge {
  position: fixed;
  z-index: 850;
  left: 12px;
  right: 12px;
  top: calc(82px + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px 12px;
  width: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 62%, rgba(255,255,255,0.14));
  border-radius: 15px;
  background: color-mix(in srgb, var(--auraColor) 9%, rgba(5,6,16,0.88));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55),
              0 0 22px color-mix(in srgb, var(--auraColor) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 180ms ease, transform 220ms ease;
}
.install-nudge.install-nudge-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.install-nudge > img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.48));
}
.install-nudge-copy { min-width: 0; }
.install-nudge-copy strong {
  display: block;
  margin: 1px 0 3px;
  color: rgba(255,255,255,0.95);
  font: 650 13px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-nudge-copy span {
  display: block;
  color: rgba(255,255,255,0.58);
  font: 400 11px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-nudge-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.install-nudge-actions button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
}
.install-nudge-primary {
  border-color: color-mix(in srgb, var(--auraColor) 76%, rgba(255,255,255,0.16));
  background: color-mix(in srgb, var(--auraColor) 20%, rgba(10,9,28,0.82));
  color: rgba(255,255,255,0.96);
}
.install-nudge-dismiss {
  border-color: rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.58);
}

.install-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(1,2,9,0.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.install-help-overlay.install-help-open {
  opacity: 1;
  pointer-events: auto;
}
.install-help-dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  padding: 28px 24px 22px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.14));
  border-radius: 20px;
  background: rgba(7,8,19,0.96);
  box-shadow: 0 28px 80px rgba(0,0,0,0.68),
              0 0 30px color-mix(in srgb, var(--auraColor) 13%, transparent);
  text-align: center;
  transform: translateY(12px) scale(0.985);
  transition: transform 220ms ease;
}
.install-help-open .install-help-dialog { transform: translateY(0) scale(1); }
.install-help-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  box-shadow: none;
  color: rgba(255,255,255,0.62);
}
.install-help-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 18px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.52));
}
.install-help-kicker {
  margin-bottom: 7px;
  color: var(--auraColor);
  font: 650 10px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.install-help-dialog h2 {
  margin: 0 22px 10px;
  color: rgba(255,255,255,0.96);
  font: 650 21px/1.22 Georgia, "Times New Roman", serif;
}
.install-help-lead,
.install-help-note {
  margin: 0 auto 16px;
  color: rgba(255,255,255,0.58);
  font: 400 12px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-help-steps {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
  text-align: left;
}
.install-help-steps li {
  position: relative;
  min-height: 40px;
  padding: 10px 11px 10px 48px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.76);
  font: 500 12px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  counter-increment: install-step;
}
.install-help-steps li::before {
  content: counter(install-step);
  position: absolute;
  left: 11px;
  top: 50%;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--auraColor) 65%, rgba(255,255,255,0.14));
  border-radius: 50%;
  color: rgba(255,255,255,0.92);
  font: 650 11px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  transform: translateY(-50%);
}
.install-help-note { margin-bottom: 17px; font-size: 10.5px; }
.install-help-done {
  width: 100%;
  min-height: 43px;
  border-color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.14));
  border-radius: 11px;
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(8,9,20,0.78));
  color: rgba(255,255,255,0.94);
  font-weight: 650;
}

@media (min-width: 480px) {
  .webapp-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .install-nudge {
    left: auto;
    right: 18px;
    top: calc(84px + env(safe-area-inset-top, 0px));
    width: min(390px, calc(100vw - 36px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-nudge,
  .install-help-overlay,
  .install-help-dialog { transition: none; }
}

.bnav-btn:disabled {
  opacity: 0.22;
  pointer-events: none;
}

@media (max-width: 420px) {
  .bottom-nav[data-state="canvas"] { padding-left: 7px; padding-right: 7px; }
  .bottom-nav[data-state="canvas"] .bnav-btn:not(.bnav-deck-btn) { width: 38px; }
  .bottom-nav[data-state="canvas"] .bnav-btn.bnav-deck-btn { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}

/* ── Rider-Waite Major editorial pilot ───────────────── */
.ci-watch-for {
  border-left-color: color-mix(in srgb, var(--auraColor) 44%, rgba(255,255,255,0.14));
}
.ci-image-reading {
  margin-top: 12px;
}
.ci-visible-symbols {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}
.ci-visible-symbol {
  display: grid;
  grid-template-columns: minmax(92px, 0.34fr) 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--auraColor) 6%, rgba(255,255,255,0.025));
  border: 1px solid color-mix(in srgb, var(--auraColor) 18%, rgba(255,255,255,0.055));
}
.ci-visible-symbol-name {
  color: var(--auraColor);
  font: 650 11px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.025em;
}
.ci-visible-symbol-meaning {
  color: rgba(235,232,245,0.78);
  font: 400 11.5px/1.42 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (max-width: 420px) {
  .ci-visible-symbol {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* ── Rune editorial overhaul ─────────────────────────── */
.ci-rune-assoc-label {
  margin: 13px 2px 2px;
  color: color-mix(in srgb, var(--auraColor) 78%, rgba(255,255,255,0.64));
  font: 650 10px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Playing-card cartomancy editorial ───────────────── */
.ci-playing-guidance {
  font-style: normal;
}
.ci-playing-guidance-label {
  margin-bottom: 4px;
  font: 700 9px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--auraColor) 78%, rgba(255,255,255,0.56));
  text-shadow: none;
}

/* Journal typing: once the nav is hidden for the software keyboard, remove
   the 64px space normally reserved for it so journal text can use the full
   visible typing area instead of ending above an empty black band. */
#journalOverlay.jo-keyboard-open {
  bottom: 0 !important;
}


/* ── Reading recovery prompt — explicit actions, no OK/Cancel ambiguity ── */
.session-recovery-prompt {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(3, 4, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 150ms ease;
}
.session-recovery-prompt.visible { opacity: 1; }
.session-recovery-card {
  width: min(92vw, 390px);
  padding: 20px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.14));
  background: rgba(10, 10, 22, 0.98);
  box-shadow: 0 18px 60px rgba(0,0,0,0.52),
              0 0 24px color-mix(in srgb, var(--auraColor) 15%, transparent);
}
.session-recovery-kicker {
  margin-bottom: 5px;
  color: var(--auraColor);
  font: 700 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.session-recovery-title {
  color: rgba(255,255,255,0.94);
  font: 650 20px/1.25 ui-sans-serif, system-ui, sans-serif;
}
.session-recovery-copy {
  margin-top: 10px;
  color: rgba(255,255,255,0.62);
  font: 400 13px/1.55 ui-sans-serif, system-ui, sans-serif;
}
.session-recovery-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.session-recovery-btn {
  min-height: 44px;
  flex: 1;
  border-radius: 12px;
  padding: 9px 12px;
  font: 650 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.session-recovery-restore {
  border: 1px solid var(--auraColor);
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(10,10,22,0.98));
  color: rgba(255,255,255,0.94);
}
.session-recovery-fresh {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.66);
}


/* ═══════════════════════════════════════════════════════
   JOURNAL HARD-PIN FIX — header/cards never join vertical scroll
   ═══════════════════════════════════════════════════════ */
#journalOverlay {
  --jo-pinned-stack-height: 0px;
  --jo-nav-space: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* The day shell is now only a logical owner.  The pinned stack and editor
   occupy fixed viewport regions so Android cannot promote the entire flex
   column into a scroll target while the textarea/caret is moving. */
#journalOverlay .jo-day-view {
  display: block;
  position: static;
  min-height: 0;
  overflow: hidden;
}

#journalOverlay .jo-sticky-stack {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 62;
  margin: 0;
  flex: none;
  transform: none !important;
  contain: layout paint;
  background: #08090f;
}

/* Vertical gestures are only meaningful in the paper.  The card rail keeps
   horizontal panning/reordering without being able to start a page pan. */
#journalOverlay .jo-sticky-stack { touch-action: pan-x; }
#journalOverlay .jo-day-header,
#journalOverlay .jo-progress-bar { touch-action: none; }
#journalOverlay .jo-cards-strip { touch-action: pan-x; }

#journalOverlay .jo-paper-wrap {
  position: fixed !important;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--jo-pinned-stack-height));
  bottom: var(--jo-nav-space);
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  z-index: 51;
}

#journalOverlay .jo-paper {
  height: 100% !important;
  max-height: none !important;
  touch-action: pan-y;
}

/* While typing the bottom navigation is hidden, so the editor can extend to
   the bottom of the visible Journal region.  The pinned stack never moves. */
#journalOverlay.jo-keyboard-open .jo-paper-wrap {
  bottom: 0;
}

@media (min-width: 720px) {
  #journalOverlay {
    --jo-nav-space: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════
   JOURNAL KEYBOARD LAYOUT FIX — keyboard resizes editor, never pans cards
   ═══════════════════════════════════════════════════════
   Android's default soft-keyboard behavior can pan/resize the visual viewport.
   The viewport meta now requests interactive-widget=resizes-content, so the
   layout viewport itself shrinks above the IME. Keep the Journal rail in normal
   flex flow OUTSIDE the textarea scroller: the rail remains at the top while
   only the paper loses vertical room when the keyboard opens. */
#journalOverlay .jo-day-view {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

#journalOverlay .jo-sticky-stack {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  transform: none !important;
  contain: none !important;
  z-index: 62;
}

#journalOverlay .jo-paper-wrap,
#journalOverlay.jo-keyboard-open .jo-paper-wrap {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#journalOverlay .jo-paper {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}