/* phase6.css
   Phase 6c: the experience storefront and the kid/adult register choice (the age
   gate, minor block and sensitivity panel). Themed with the same parchment / gold /
   ink tokens as the rest of the app so a switched pack restyles it via the theme
   variables. Child-first: large tap targets, generous spacing, one clear action.
   Every colour is a theme variable with a sane fallback, so it works before a pack
   theme loads and adapts when one does. */

/* ----- Experience storefront ----- */
.storefront { max-width: 56rem; margin: 0 auto; }

.xp-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.xp-filter-label { font-weight: 700; color: var(--ink, #3a2b10); opacity: 0.85; }
.xp-filter-btn {
  border: 2px solid var(--gold-dim, #c9a84c); background: transparent;
  color: var(--ink, #3a2b10); border-radius: 999px; padding: 0.5rem 1rem;
  font-size: 0.95rem; cursor: pointer;
  /* WCAG 2.5.5: a comfortable 44px tap target, so the family/adult chips are easy to hit. */
  min-height: 44px; display: inline-flex; align-items: center;
}
.xp-filter-btn.on { background: var(--gold, #c9a84c); color: var(--near-black, #1a1407); border-color: var(--gold, #c9a84c); }

.xp-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.xp-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--gold-dim, #d7dee6); border-radius: var(--radius, 16px);
  background: var(--panel, rgba(255, 255, 255, 0.06)); overflow: hidden;
  box-shadow: var(--shadow, 0 2px 10px rgba(0, 0, 0, 0.25));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.xp-card:hover { transform: translateY(-2px); }
/* The per-pack colour band: each experience's signature colour identifies it. */
.xp-card-accent { height: 6px; width: 100%; }
.xp-card-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.xp-card-name { margin: 0; font-family: var(--font-head, Georgia, serif); font-size: 1.25rem; color: var(--gold-bright, #b8860b); }
.xp-card-sub { margin: 0; font-style: italic; color: var(--ink, #3a2b10); opacity: 0.9; }
.xp-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; opacity: 0.8; }
.xp-card-loc::before { content: "\1F4CD\00A0"; }
.xp-card-desc { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink, #3a2b10); }
.xp-card-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.xp-badge {
  font-size: 0.78rem; font-weight: 700; border-radius: 999px;
  padding: 0.2rem 0.6rem; border: 1px solid transparent;
}
/* Darker green than the bright accent so white text clears WCAG AA (4.5:1). */
.xp-badge-kid { background: #0b7a52; color: #fff; }
.xp-badge-adult { background: #a81e2f; color: #fff; }
.xp-card-themes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.xp-theme-chip {
  font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 6px;
  background: rgba(154, 52, 18, 0.1); color: #9a3412;
  border: 1px solid rgba(154, 52, 18, 0.3);
}
.xp-card-pick { margin-top: 0.4rem; }

/* Compact storefront header: the big wordmark + tagline + decorative acrostic pushed the
   actual adventures below the fold. The acrostic already greets people on the landing, so
   drop it here and shrink the brand block so "Choose your adventure" and the first card sit
   near the top. */
.storefront .platform-brand { margin: 0 0 0.5rem; }
.storefront .platform-acronym { display: none; }
.storefront .platform-wordmark { font-size: 1.9rem; margin: 0.1rem 0; }
.storefront .platform-tagline { font-size: 0.85rem; margin: 0; }
.storefront .panel-title { margin-top: 0.3rem; }

/* Cover art banner on an adventure card (falls back to the colour band when absent). */
.xp-card-cover { height: 120px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.xp-card-chapters::before { content: "\1F4D6\00A0"; }
/* A neutral "who it is for" badge alongside the mode badges. */
.xp-badge-ages { background: rgba(128, 128, 128, 0.16); color: var(--ink, #3a2b10); border-color: rgba(128, 128, 128, 0.35); }
/* Search + sort toolbar above the grid. */
.xp-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.xp-search {
  flex: 1 1 12rem; min-width: 0; padding: 0.6rem 0.8rem; font-size: 16px; border-radius: 10px;
  border: 1px solid var(--gold-dim, #c9a84c); background: var(--panel, #fff); color: var(--ink, #3a2b10);
}
.xp-sort {
  padding: 0.6rem 0.7rem; font-size: 15px; border-radius: 10px; min-height: 44px;
  border: 1px solid var(--gold-dim, #c9a84c); background: var(--panel, #fff); color: var(--ink, #3a2b10);
}
.xp-search:focus-visible, .xp-sort:focus-visible { outline: 2px solid var(--gold, #c9a84c); outline-offset: 1px; }

/* ----- Register choice / age gate / sensitivity ----- */
.register-choice, .register-age-gate, .register-minor-block, .register-sensitivity {
  max-width: 36rem; margin: 0 auto;
}
.register-cards { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .register-cards { grid-template-columns: 1fr 1fr; } }
.register-card {
  display: flex; flex-direction: column; gap: 0.4rem; text-align: left;
  border: 2px solid var(--gold-dim, #c9a84c); border-radius: var(--radius, 12px);
  background: var(--panel, rgba(255, 255, 255, 0.06)); padding: 1rem;
  cursor: pointer; color: var(--ink, #3a2b10);
}
.register-card-adult { border-color: var(--rune-red, #8b1a1a); }
.register-card-title { font-family: var(--font-head, Georgia, serif); font-size: 1.15rem; color: var(--gold-bright, #b8860b); }
.register-card-adult .register-card-title { color: var(--rune-red, #8b1a1a); }
.register-card-note { font-size: 0.92rem; line-height: 1.4; opacity: 0.92; }

.register-gate-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.register-themes-note { font-size: 0.9rem; opacity: 0.85; }

.register-theme-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 2px solid var(--gold-dim, #c9a84c); border-radius: 10px;
  background: var(--panel, rgba(255, 255, 255, 0.06)); padding: 0.7rem 0.9rem;
  margin-top: 0.5rem; cursor: pointer; color: var(--ink, #3a2b10);
}
.register-theme-row.off { opacity: 0.6; }
.register-theme-name { font-weight: 600; }
.register-theme-state {
  font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.6rem;
}
.register-theme-row.on .register-theme-state { background: var(--forest, #2f6b4f); color: #fff; }
.register-theme-row.off .register-theme-state { background: var(--gold-dim, #c9a84c); color: var(--near-black, #1a1407); }

/* ----- Comfort and sensitivity panel (user2 feature 9) ----- */
.comfort-settings { max-width: 36rem; margin: 0 auto; }
.comfort-group-title { font-family: var(--font-head, Georgia, serif); color: var(--gold-bright, #b8860b); margin: 1.1rem 0 0.2rem; }
.comfort-chooser { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.comfort-opt {
  flex: 1 1 6rem; border: 2px solid var(--gold-dim, #c9a84c); background: transparent;
  color: var(--ink, #3a2b10); border-radius: 10px; padding: 0.55rem 0.8rem; cursor: pointer;
}
.comfort-opt.on { background: var(--gold, #c9a84c); color: var(--near-black, #1a1407); border-color: var(--gold, #c9a84c); }
.comfort-themes { margin-top: 0.4rem; }

/* ----- Cinematic experience intro (user2 feature 3) ----- */
.cinematic-intro {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius, 12px); padding: 1.5rem 1rem;
}
.cinematic-card { max-width: 34rem; text-align: center; color: #fdf6e3; }
.cinematic-wordmark {
  font-family: var(--font-head, Georgia, serif); font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: 0.04em; color: var(--gold-bright, #ffe08a); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.cinematic-subtitle { font-style: italic; font-size: 1.15rem; margin-top: 0.3rem; opacity: 0.95; }
.cinematic-portrait { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid var(--gold, #c9a84c); margin: 1rem auto 0.5rem; display: block; }
.cinematic-desc { font-size: 1rem; line-height: 1.5; margin: 0.8rem 0; opacity: 0.92; }
.cinematic-line { font-size: 1.05rem; line-height: 1.5; margin: 0.8rem 0 1.2rem; }
.cinematic-speaker { color: var(--gold-bright, #ffe08a); font-weight: 700; }
.cinematic-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.cinematic-skip { color: #fdf6e3; opacity: 0.8; }
.cinematic-enter { animation: cinematic-fade 700ms ease-out both; }
@keyframes cinematic-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ----- Cast-as-a-character (user2 feature 4) ----- */
.cast-role-panel { max-width: 34rem; margin: 0 auto; }
.cast-current { margin: 0.6rem 0 1rem; font-size: 1.05rem; }
.cast-current-role { color: var(--gold-bright, #b8860b); }
.cast-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cast-option {
  flex: 1 1 7rem; border: 2px solid var(--gold-dim, #c9a84c); background: transparent;
  color: var(--ink, #3a2b10); border-radius: 10px; padding: 0.6rem 0.8rem; cursor: pointer;
}
.cast-option.on { background: var(--gold, #c9a84c); color: var(--near-black, #1a1407); border-color: var(--gold, #c9a84c); }

/* ----- Cross-experience passport (user2 feature 6) ----- */
.passport-panel { max-width: 40rem; margin: 0 auto; }
.passport-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; }
.passport-entry { border: 2px solid var(--gold-dim, #c9a84c); border-radius: var(--radius, 12px); padding: 0.8rem 1rem; background: var(--panel, rgba(255, 255, 255, 0.06)); }
.passport-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.passport-name { font-family: var(--font-head, Georgia, serif); font-size: 1.15rem; color: var(--gold-bright, #b8860b); }
.passport-count { font-size: 0.85rem; opacity: 0.8; }
.passport-stamps { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; }
.passport-stamp {
  display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem;
  border: 2px dashed var(--rune-red, #8b1a1a); border-radius: 50%; color: var(--rune-red, #8b1a1a);
  transform: rotate(-8deg); font-weight: 700;
}
.passport-none { font-size: 0.9rem; opacity: 0.75; }
.passport-dates { font-size: 0.78rem; opacity: 0.7; margin-top: 0.4rem; }

/* ----- Shareable invite (user2 feature 8) ----- */
.share-invite-panel { max-width: 34rem; margin: 0 auto; }
.share-code-box {
  display: flex; align-items: baseline; gap: 0.6rem; justify-content: center;
  border: 2px dashed var(--gold-dim, #c9a84c); border-radius: 10px; padding: 0.7rem 1rem; margin: 0.8rem 0;
}
.share-code-label { font-size: 0.85rem; opacity: 0.8; }
.share-code-value { font-family: var(--font-head, Georgia, serif); font-size: 1.6rem; letter-spacing: 0.12em; color: var(--gold-bright, #b8860b); }
.share-invite-text { width: 100%; box-sizing: border-box; margin-top: 0.4rem; font-family: inherit; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--gold-dim, #c9a84c); }

/* ----- Sensitivity preview (gm2 feature 18) ----- */
.sens-preview { max-width: 52rem; margin: 0 auto; }
.sens-grid { display: flex; flex-direction: column; border: 1px solid var(--gold-dim, #c9a84c); border-radius: var(--radius, 12px); overflow: hidden; margin: 0.8rem 0; }
.sens-row { display: flex; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.sens-row:first-child { border-top: none; }
.sens-head { background: rgba(201, 168, 76, 0.18); font-weight: 700; }
.sens-cell { flex: 1; padding: 0.6rem 0.7rem; font-size: 0.9rem; line-height: 1.4; border-left: 1px solid rgba(0, 0, 0, 0.1); }
.sens-cell:first-child { border-left: none; }
.sens-label { flex: 0 0 8rem; font-weight: 600; opacity: 0.85; }
.sens-col-head { color: var(--gold-bright, #b8860b); }
.sens-group-title { font-family: var(--font-head, Georgia, serif); color: var(--gold-bright, #b8860b); margin: 1rem 0 0.3rem; }
.sens-cast-sample { font-style: italic; margin-top: 0.4rem; }
@media (max-width: 34rem) {
  .sens-row { flex-wrap: wrap; }
  .sens-label { flex: 1 1 100%; }
  .sens-cell { flex: 1 1 40%; }
}

/* ----- Party / household (user2 feature 5) ----- */
.party-panel { max-width: 34rem; margin: 0 auto; }
.party-group-title { font-family: var(--font-head, Georgia, serif); color: var(--gold-bright, #b8860b); margin: 1.1rem 0 0.4rem; }
.party-list { display: flex; flex-direction: column; gap: 0.5rem; }
.party-group {
  border: 1px solid var(--gold-dim, #c9a84c); border-radius: 10px; padding: 0.6rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.party-group.mine { border-color: var(--gold-bright, #b8860b); background: rgba(201, 168, 76, 0.12); }
.party-unassigned { opacity: 0.75; }
.party-name { font-weight: 700; color: var(--gold-bright, #b8860b); }
.party-unassigned .party-name { color: inherit; }
.party-members { font-size: 0.92rem; }