/* ========== SPA PAGE SYSTEM ========== */
.spa-page {
  display: none;
  opacity: 0;
}
.spa-page.active {
  display: block;
  opacity: 1;
}
.spa-page.measuring {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.spa-page.transitioning {
  z-index: 200;
}

/* ========== PAGE CONTAINER (fetched content) ========== */
.page-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow-y: auto;
  padding-bottom: 220px;
  pointer-events: none;
}

/* ========== DRAG BLUR OVERLAY ========== */
.drag-blur-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(0,0,0,0);
  pointer-events: none;
  will-change: backdrop-filter, background;
}

/* ========== HAND CONTAINER ========== */
.hand-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  height: 400px;
  width: 100%;
  max-width: 700px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hand-container {
    height: 260px;
    max-width: 400px;
  }
}

/* ========== ATTRACTOR LABEL (drag-me hint) ========== */
.attractor-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  text-shadow: 0 0 12px var(--accent-glow, rgba(0,0,0,0.2));
}
@media (max-width: 768px) {
  .attractor-label {
    font-size: 0.7rem;
  }
}

/* ========== PERSPECTIVE + FLY OVERLAY ========== */
.perspective-container {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.fly-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

/* ========== CARD BASE ========== */
.card {
  position: absolute;
  width: 220px;
  height: 320px;
  left: 0;
  top: 0;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .card {
    width: 132px;
    height: 192px;
  }
}
.card.dragging {
  cursor: grabbing;
  z-index: 100 !important;
}
.card:not(.dragging):not(.playing) {
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.card.playing {
  cursor: default;
  will-change: transform;
}

/* ========== CARD INNER (CORAL default) ========== */
.card-inner {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  transition: box-shadow 0.3s, border-color 0.3s;
  background: #ffffff;
  border: 1.5px solid var(--border);
}

.card-title {
  padding: 8px 10px 5px;
  text-align: center;
  position: relative;
  z-index: 4;
}
.card-title h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.2;
}

.card-art {
  position: relative;
  z-index: 2;
  margin: 0 6px;
  height: 155px;
  overflow: hidden;
  border-radius: 6px;
}
.card-art-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-art-icon {
  font-size: 44px;
  opacity: 0.12;
  display: inline-block;
}
.card-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Home card — art fills entire card edge-to-edge */
.card-inner--home {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #f0e4c8, #e8d8b8 50%, #f0e4c8);
}
.card-art--home {
  flex: 1;
  height: auto;
  margin: 0;
  border-radius: 0;
}
.card-art--home .card-art-inner {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-bottom: 25%;
}
.card-art-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  padding: 0 14px;
  text-align: left;
  margin: 0;
}
.card-art-title .serif-line {
  display: block;
}
.card-art-title em {
  font-style: italic;
  color: var(--accent);
}
.card-art-blurb {
  font-family: var(--font-body);
  font-size: 7px;
  line-height: 1.4;
  color: var(--text-secondary);
  padding: 6px 10px 12px;
  text-align: left;
}

.type-bar {
  position: relative;
  z-index: 5;
  margin: -13px 8px 0;
  padding: 4px 8px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-secondary);
}

.card-textbox {
  position: relative;
  z-index: 3;
  margin: 5px 0 0;
  padding: 8px 10px;
  min-height: 80px;
}
.card-textbox p {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.accent-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 4;
  border-radius: 0 0 14px 14px;
}

/* ========== MOBILE CARD SCALING ========== */
@media (max-width: 768px) {
  .card-inner { border-radius: 9px; }
  .card-title { padding: 5px 6px 3px; }
  .card-title h3 { font-size: 9px; }
  .card-art { margin: 0 4px; height: 93px; border-radius: 4px; }
  .card-art-icon { font-size: 28px; }
  .type-bar { margin: -8px 5px 0; padding: 2px 5px; font-size: 6px; }
  .card-textbox { margin: 3px 0 0; padding: 4px 6px; min-height: 40px; }
  .card-textbox p { font-size: 6px; }
  .card-art-title { font-size: 13px; padding: 0 8px; }
  .card-art-blurb { font-size: 5px; padding: 3px 6px 6px; }
  .accent-strip { height: 2px; }
}

/* ========== NEON THEME OVERRIDES ========== */
[data-theme="neon"] .card-inner {
  background: #131318;
  border: 1.5px solid var(--border);
  border-radius: 8px;
}

[data-theme="neon"] .card-inner.card-inner--home {
  background: #0a0a0c;
}
[data-theme="neon"] .card-art--home .card-art-inner {
  background: #0a0a0c;
}

[data-theme="neon"] .card-title h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

[data-theme="neon"] .card-art {
  border-radius: 4px;
}
[data-theme="neon"] .card-art-inner {
  background: #0a0a0c;
  border: 1px solid #1e1e28;
}
[data-theme="neon"] .card-art-icon {
  color: var(--accent);
  opacity: 0.15;
}

[data-theme="neon"] .type-bar {
  font-family: var(--font-mono);
  border-radius: 3px;
  background: #131318;
  border: 1px solid #c9f05935;
  color: var(--accent);
}

[data-theme="neon"] .card-textbox p {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

[data-theme="neon"] .card-art-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
}
[data-theme="neon"] .card-art-blurb {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* All neon accent strips use lime */
[data-theme="neon"] .accent-strip {
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--accent) !important;
  opacity: 0.4;
  border-radius: 0;
}

/* Neon cards get a lime glow line at the top */
[data-theme="neon"] .card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  z-index: 10;
  background: linear-gradient(90deg, transparent 5%, #c9f05960 30%, #c9f05980 50%, #c9f05960 70%, transparent 95%);
  border-radius: 8px 8px 0 0;
}

/* ========== TOUCH SUPPORT ========== */
html.card-dragging {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.card-dragging body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
@media (max-width: 768px) {
  .card {
    touch-action: none;
  }
}
/* ========================================================================
   BOLD THEME — cards.css additions
   Add this block after the [data-theme="neon"] section in cards.css.
   ======================================================================== */

/* ── Card Inner — fully opaque ── */
[data-theme="bold"] .card-inner {
  background: #FFFFFF;
  border: 1.5px solid #E0DCD4;
  border-radius: 8px;
}

/* ── Card Title ── */
[data-theme="bold"] .card-title {
  background: #FFFFFF;
}
[data-theme="bold"] .card-title h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 12.5px;
  text-transform: uppercase;
}

/* ── Card Art — unified warm, fully opaque ── */
[data-theme="bold"] .card-art {
  border-radius: 0;
}
[data-theme="bold"] .card-art-inner {
  background: #F0EDE5 !important;
}


/* ── Card art icon — accent orange tint ── */
[data-theme="bold"] .card-art-icon {
  color: #FF6123;
  opacity: 0.15;
}

/* ── Type Bar — chip-styled, fully opaque ── */
[data-theme="bold"] .type-bar {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.2px;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #FDEEE6;
  border: 1px solid #F5C8A8;
  color: #FF6123;
}

/* ── Card Textbox — fully opaque ── */
[data-theme="bold"] .card-textbox {
  background: #FFFFFF;
}
[data-theme="bold"] .card-textbox p {
  font-family: var(--font-body);
  font-weight: 300;
}

/* ── Remove accent strips ── */
[data-theme="bold"] .accent-strip {
  display: none;
}

/* ── Home Card — mini index page ── */
[data-theme="bold"] .card-inner.card-inner--home {
  background: #FAFAF7;
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="bold"] .card-art--home {
  position: relative;
  overflow: hidden;
}

[data-theme="bold"] .card-art--home .card-art-inner {
  background: #FAFAF7 !important;
}

/* Accent circle — mirrors the hero */
[data-theme="bold"] .card-art--home .card-art-inner::after {
  content: '';
  position: absolute;
  right: -30%;
  top: 50%;
  transform: translateY(-50%);
  width: 65%;
  height: 0;
  padding-bottom: 65%;
  border-radius: 50%;
  background: #FF6123;
  pointer-events: none;
}

/* ── Home Card Art Title ── */
[data-theme="bold"] .card-art-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
[data-theme="bold"] .card-art-title em {
  font-style: normal;
  color: #FF6123;
}

/* ── Home Card Blurb ── */
[data-theme="bold"] .card-art-blurb {
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
}
/* ========== CINEMATIC THEME — CARD HAND OVERRIDES ========== */

[data-theme="cinematic"] .card-inner {
  background: #161616;
  border: 1.5px solid #222222;
  border-radius: 8px;
}

[data-theme="cinematic"] .card-inner.card-inner--home {
  background: #0e0e0e;
}
[data-theme="cinematic"] .card-art--home .card-art-inner {
  background: #0e0e0e;
}

[data-theme="cinematic"] .card-title h3 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

[data-theme="cinematic"] .card-art {
  border-radius: 4px;
}
[data-theme="cinematic"] .card-art-inner {
  background: #0e0e0e !important;
  border: 1px solid #222222;
}
[data-theme="cinematic"] .card-art-icon {
  color: var(--accent);
  opacity: 0.15;
}

/* Override per-card accent backgrounds with unified dark */

[data-theme="cinematic"] .type-bar {
  font-family: var(--font-mono);
  font-size: 7.5px;
  border-radius: 3px;
  background: #161616;
  border: 1px solid rgba(214, 0, 28, 0.25);
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="cinematic"] .card-textbox p {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

[data-theme="cinematic"] .card-art-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #E8E6E1;
}
[data-theme="cinematic"] .card-art-title em {
  font-style: normal;
  color: var(--accent);
}
[data-theme="cinematic"] .card-art-blurb {
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Accent strips: red glow, unified */
[data-theme="cinematic"] .accent-strip {
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--accent) !important;
  opacity: 0.4;
  border-radius: 0;
}

/* Top glow line — red */
[data-theme="cinematic"] .card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  z-index: 10;
  background: linear-gradient(90deg, transparent 5%, rgba(214,0,28,0.35) 30%, rgba(214,0,28,0.5) 50%, rgba(214,0,28,0.35) 70%, transparent 95%);
  border-radius: 8px 8px 0 0;
}

/* Home card: mini scanline effect */
[data-theme="cinematic"] .card-inner--home::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.015) 2px,
    rgba(255,255,255,0.015) 4px
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 8px;
}

/* Home card title needs z-index to sit above scanlines */
[data-theme="cinematic"] .card-art-title {
  position: relative;
  z-index: 3;
}
[data-theme="cinematic"] .card-art-blurb {
  position: relative;
  z-index: 3;
}
/* ══════════════════════════════════════════════════════════
   BRUTALIST TYPOGRAPHIC THEME — cards.css overrides
   All card backgrounds fully opaque hardcoded hex.
   ══════════════════════════════════════════════════════════ */

[data-theme="brutalist"] .card-inner {
  background: #FFFFFF;
  border: 2px solid #0C0C0C;
  border-radius: 4px;
}

[data-theme="brutalist"] .card-inner.card-inner--home {
  background: #FFFFFF;
}

/* ── Title ── */
[data-theme="brutalist"] .card-title h3 {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0C0C0C;
}

/* ── Art ── */
[data-theme="brutalist"] .card-art {
  border-radius: 0;
}

[data-theme="brutalist"] .card-art-inner {
  border: 1px solid #0C0C0C;
}

/* Unified white art backgrounds — overrides per-card accents */

[data-theme="brutalist"] .card-art-icon {
  color: #0C0C0C;
}

/* ── Type Bar ── */
[data-theme="brutalist"] .type-bar {
  font-family: 'Space Mono', monospace;
  font-size: 7.5px;
  border-radius: 0;
  background: #E8E4DC;
  border: 1px solid #0C0C0C;
  color: #5C584F;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Textbox ── */
[data-theme="brutalist"] .card-textbox p {
  font-family: 'Literata', Georgia, serif;
  font-size: 8.5px;
  color: #5C584F;
}

/* ── Home Card ── */
[data-theme="brutalist"] .card-art--home .card-art-inner {
  background: #FFFFFF !important;
  position: relative;
}

[data-theme="brutalist"] .card-art-title {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: #0C0C0C;
  position: relative;
  z-index: 1;
}

[data-theme="brutalist"] .card-art-title em {
  font-style: normal;
  color: #0C0C0C;
}

[data-theme="brutalist"] .card-art-blurb {
  font-family: 'Literata', Georgia, serif;
  color: #5C584F;
}

/* Blue status stripe on home card — echoes the index status bar */
[data-theme="brutalist"] .card-inner--home::after {
  content: 'OPEN TO OPPORTUNITIES';
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 3px 10px;
  background: #0038FF;
  color: white;
  font-family: 'Space Mono', monospace;
  font-size: 5.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Accent Strips: hidden in brutalist ── */
[data-theme="brutalist"] .accent-strip { display: none !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  [data-theme="brutalist"] .card-inner { border-radius: 3px; }
  [data-theme="brutalist"] .card-title h3 { font-size: 7.5px; }
  [data-theme="brutalist"] .card-art-title { font-size: 12px; }
  [data-theme="brutalist"] .type-bar { font-size: 5.5px; }
  [data-theme="brutalist"] .card-inner--home::after { font-size: 4px; padding: 2px 6px; }
}
/* ═══════════════════════════════════════════════════════
   RETRO THEME — cards.css overrides
   
   All card backgrounds are fully opaque hardcoded hex.
   Every colour traces back to the index page:
   
   #FDF6EC  = card bg, type bar bg (hero cream)
   #1A5C52  = card art bg (hero panel teal)
   #0F3E37  = home card panel stripe (about deep-teal)
   #E8A825  = accent strips, top glow, icon tint (mustard)
   #D94230  = "Never" on home card (red accent)
   #D4CBBA  = borders (page border)
   #1A1A16  = title text (primary text)
   #6D6A5E  = type bar text, textbox text (muted text)
   ═══════════════════════════════════════════════════════ */

/* ══════════ CARD INNER ══════════ */
[data-theme="retro"] .card-inner {
  background: #FDF6EC;
  border: 2px solid #D4CBBA;
  border-radius: 10px;
}

/* ══════════ CARD TITLE — Shrikhand ══════════ */
[data-theme="retro"] .card-title h3 {
  font-family: 'Shrikhand', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  color: #1A1A16;
}

/* ══════════ CARD ART — unified teal ══════════ */
[data-theme="retro"] .card-art {
  border-radius: 4px;
}
[data-theme="retro"] .card-art-inner {
  border: none;
}

[data-theme="retro"] .card-art-icon {
  color: #E8A825;
  opacity: 0.15;
}

/* ══════════ TYPE BAR — mono, sharp edges ══════════ */
[data-theme="retro"] .type-bar {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: #FDF6EC;
  border: 1.5px solid #D4CBBA;
  border-radius: 0;
  color: #6D6A5E;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════ TEXTBOX — Bitter body ══════════ */
[data-theme="retro"] .card-textbox p {
  font-family: 'Bitter', serif;
  font-weight: 300;
  font-size: 8.5px;
  color: #6D6A5E;
}

/* ══════════ NO ACCENT STRIPS ══════════ */
[data-theme="retro"] .accent-strip {
  display: none;
}

/* ══════════ NO TOP GLOW LINE ══════════ */
[data-theme="retro"] .card-inner::before {
  display: none;
}

/* ══════════ HOME CARD ══════════ */
[data-theme="retro"] .card-inner.card-inner--home {
  background: #FDF6EC;
  border: 2px solid #D4CBBA;
}

[data-theme="retro"] .card .card-art--home .card-art-inner {
  background: #FDF6EC !important;
  position: relative;
}

/* Mini teal panel on right side — echoes the split hero layout */
[data-theme="retro"] .card-art--home .card-art-inner::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28%;
  background: #1A5C52;
  pointer-events: none;
  z-index: 0;
}

/* Mini decorative circle — echoes hero mustard circle */
[data-theme="retro"] .card-art--home .card-art-inner::before {
  content: '';
  position: absolute;
  bottom: 10%; left: 5%;
  width: 45px; height: 45px;
  border: 2px solid #E8A825;
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

[data-theme="retro"] .card-art-title {
  font-family: 'Shrikhand', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: #1A1A16;
  position: relative;
  z-index: 1;
}
[data-theme="retro"] .card-art-title em {
  font-style: normal;
  color: #D94230;
  position: relative;
  display: inline-block;
}
[data-theme="retro"] .card-art-title em::after {
  content: '';
  position: absolute;
  bottom: 0.02em; left: 0; right: 0;
  height: 0.13em;
  background: #E8A825;
}
[data-theme="retro"] .card-art-blurb {
  font-family: 'Bitter', serif;
  color: #6D6A5E;
  position: relative;
  z-index: 1;
}

/* ══════════ MOBILE ADJUSTMENTS ══════════ */
@media (max-width: 768px) {
  [data-theme="retro"] .card-inner { border-radius: 7px; }
  [data-theme="retro"] .card-inner::before { border-radius: 7px 7px 0 0; }
  [data-theme="retro"] .card-art-title { font-size: 12px; }
  [data-theme="retro"] .type-bar { font-size: 5.5px; }
  [data-theme="retro"] .card-art--home .card-art-inner::before {
    width: 28px; height: 28px;
  }
}