/* ==========================================================
   Impro Studio — Stylesheet
   Theatrical aesthetic: deep stage colors, spotlights, gold accents
   ========================================================== */

/* The HTML `hidden` attribute should always remove the element from layout,
   even when a later rule sets `display: flex / grid / etc.`. Without this,
   `<div hidden style="display: flex">` would still render. */
[hidden] { display: none !important; }

:root {
  /* Stage palette */
  --bg-deep:        #0c0814;
  --bg-mid:         #1a0f2b;
  --bg-velvet:      #2a0e2c;
  --crimson:        #b91c4d;
  --crimson-bright: #e11d6a;
  --gold:           #f5c451;
  --gold-soft:      #fde08a;
  --ink:            #f5f0ea;
  --ink-muted:      rgba(245, 240, 234, 0.65);
  --ink-faint:      rgba(245, 240, 234, 0.35);

  /* Mode accents */
  --troupe:         #6dd3c5;
  --troupe-glow:    rgba(109, 211, 197, 0.35);
  --match:          #ff6b8a;
  --match-glow:     rgba(255, 107, 138, 0.35);

  /* Card category accents */
  --c-exercise:     #6dd3c5;
  /* In Match mode, the Category card visually replaces the Exercise card and
     should match its color. Keep --c-category aligned with --c-exercise. */
  --c-constraint:   #ffae5c;
  --c-theme:        #b794f4;
  --c-category:     #6dd3c5;
  --c-duration:     #84e1bc;
  --c-players:      #74b8ff;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-card: 0 25px 60px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 60px rgba(245, 196, 81, 0.18);
}

/* ----------------------------------------
   Reset & base
   ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg-deep);
  overflow-x: hidden;
  position: relative;
  line-height: 1.55;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  color: inherit;
}

/* ----------------------------------------
   Stage backdrop & spotlights
   ---------------------------------------- */
.stage-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at top, rgba(185, 28, 77, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(40, 12, 60, 0.7), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
}

.stage-backdrop::before {
  /* Subtle stage floor texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.spotlight {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}

.spotlight-1 {
  background: radial-gradient(circle, rgba(245, 196, 81, 0.6), transparent 70%);
  top: -20vmax;
  left: -10vmax;
}

.spotlight-2 {
  background: radial-gradient(circle, rgba(225, 29, 106, 0.55), transparent 70%);
  bottom: -25vmax;
  right: -15vmax;
  animation-delay: -7s;
  animation-duration: 28s;
}

.spotlight-3 {
  background: radial-gradient(circle, rgba(109, 211, 197, 0.4), transparent 70%);
  top: 40%;
  left: 60%;
  width: 40vmax;
  height: 40vmax;
  animation-delay: -14s;
  animation-duration: 32s;
}

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vmax, -4vmax) scale(1.08); }
  100% { transform: translate(-4vmax, 5vmax) scale(0.95); }
}

/* Theater curtains - subtle on the sides */
.curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 6vw;
  min-width: 40px;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(70, 8, 24, 0.85) 0%,
      rgba(120, 18, 40, 0.6) 35%,
      rgba(80, 10, 30, 0.85) 60%,
      rgba(40, 5, 18, 0.95) 100%);
  background-size: 24px 100%;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(30, 5, 14, 0.85) 0px,
      rgba(120, 18, 40, 0.4) 12px,
      rgba(60, 8, 22, 0.95) 24px);
  pointer-events: none;
  opacity: 0.55;
}

.curtain-left  { left: 0;  border-right: 2px solid rgba(245, 196, 81, 0.1); }
.curtain-right { right: 0; border-left:  2px solid rgba(245, 196, 81, 0.1); }

/* ----------------------------------------
   Hero
   ---------------------------------------- */
.hero {
  text-align: center;
  padding: clamp(1.25rem, 3.5vw, 2.5rem) 1.5rem 0.75rem;
  position: relative;
  /* Pull the subtitle visually closer to the logo by collapsing the
     bottom of the logo's drop shadow space. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-mask {
  font-size: 4rem;
  margin-bottom: 0.75rem;
  display: inline-block;
  animation: maskFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(245, 196, 81, 0.5));
}

@keyframes maskFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}

.title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 11vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 0.95;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.title-line {
  display: block;
}

.title-accent {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 50%, var(--crimson-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(245, 196, 81, 0.3));
}

.subtitle {
  /* The default <p> top margin pushes this too far below the logo;
     reset it so the subtitle sits tight under the wordmark. */
  margin: 0.15rem auto 0;
  max-width: 36rem;
  color: var(--ink-muted);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  font-family: 'Playfair Display', serif;
  line-height: 1.25;
}

/* ----------------------------------------
   Container & panels
   ---------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  position: relative;
  z-index: 1;
}

.config-panel {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.config-panel::before {
  /* Top gold ribbon */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.config-block {
  margin-bottom: 1.75rem;
}

.config-block:last-child {
  margin-bottom: 0;
}

.config-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-weight: 600;
  font-size: 1.05rem;
}

.label-num {
  font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--bg-deep);
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.9rem;
  letter-spacing: 0;
  box-shadow: 0 2px 12px rgba(245, 196, 81, 0.4);
}

.label-text {
  letter-spacing: 0.01em;
}

.config-hint {
  margin: -0.4rem 0 0.7rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* ----------------------------------------
   Mode toggle
   ---------------------------------------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  text-align: left;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mode-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.mode-btn.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.18), rgba(225, 29, 106, 0.12));
  box-shadow: 0 8px 30px rgba(245, 196, 81, 0.25), inset 0 0 30px rgba(245, 196, 81, 0.05);
}

.mode-btn.active::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mode-icon {
  font-size: 1.85rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(245, 196, 81, 0.3));
}

.mode-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mode-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.mode-desc {
  font-size: 0.825rem;
  color: var(--ink-muted);
}

/* ----------------------------------------
   Team inputs (match mode)
   ---------------------------------------- */
.team-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.85rem;
}

/* Match-mode team blocks (Team A row + VS divider + Team B row). Each row
   stacks the name input with a roster-config button + a status sub-line. */
.team-block { margin-bottom: 0.6rem; }
.team-block:last-child { margin-bottom: 0; }
.team-block-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.team-block-row .team { flex: 1 1 200px; min-width: 0; }
.team-block .roster-status {
  display: block;
  margin-top: 0.3rem;
  margin-left: calc(0.85rem + 8px);
  font-size: 0.78rem;
}
.team-vs {
  text-align: center;
  font-family: 'Bebas Neue', Inter, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin: 0.4rem 0;
  opacity: 0.7;
}
.roster-edit-btn-compact {
  flex: 0 0 auto;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.team {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: border-color 0.3s;
}

.team:focus-within {
  border-color: var(--gold);
}

.team-color {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-a .team-color { background: #4a90e2; box-shadow: 0 0 12px #4a90e2; }
.team-b .team-color { background: #ff6b8a; box-shadow: 0 0 12px #ff6b8a; }
/* Troupe variant: gold accent — distinct from Match A (blue) / B (pink). */
.team-troupe .team-color { background: var(--gold); box-shadow: 0 0 12px rgba(245, 196, 81, 0.6); }

.team input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.team input::placeholder { color: var(--ink-faint); }

.vs {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

/* ----------------------------------------
   Level selector
   ---------------------------------------- */
.level-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.level-btn {
  padding: 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.25s ease;
}

.level-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.level-btn.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.18), rgba(245, 196, 81, 0.06));
  box-shadow: 0 4px 20px rgba(245, 196, 81, 0.25);
}

.level-stars {
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

/* ----------------------------------------
   Themes textarea
   ---------------------------------------- */
textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}

textarea:focus {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
}

textarea::placeholder { color: var(--ink-faint); white-space: pre-line; }

.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

.ghost-btn {
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: all 0.2s;
}

.ghost-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.theme-status {
  font-size: 0.825rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ----------------------------------------
   Roster (team / troupe composition)
   ---------------------------------------- */
.roster-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.roster-edit-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  padding: 0.6rem 0.95rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(245, 196, 81, 0.35);
  color: var(--gold-soft);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.roster-edit-btn:hover {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.45);
}
.roster-edit-btn:active { transform: translateY(1px); }
.roster-status {
  font-size: 0.825rem;
  color: var(--ink-faint);
  font-style: italic;
  /* Long lineups (5+ actors) need to wrap rather than overflow the row. */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.roster-status.active {
  color: var(--gold-soft);
  font-style: normal;
  font-weight: 500;
}

/* Roster dialog body — search → results dropdown → ad-hoc add → list */
.roster-dialog .dlg-body { gap: 0.9rem; }
.roster-search-row,
.roster-adhoc-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
/* Team-name input: sits above the saved-teams row. For Match A/B it
   syncs with the #teamA / #teamB inputs on the main page; for Troupe
   it's persisted independently in localStorage. The status line below
   warns the user if the typed name collides with an already-saved
   team (theirs → updates on save, others' → no real conflict). */
.roster-team-name {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
}
.roster-team-name label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.roster-team-name input[type="text"] {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}
.roster-team-name input[type="text"]:focus {
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(0, 0, 0, 0.5);
}
.roster-team-name-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.roster-team-name-status.is-available { color: var(--troupe); }
.roster-team-name-status.is-self      { color: var(--gold-soft); }
.roster-team-name-status.is-other     { color: var(--ink-muted); }

/* Saved-teams section sits at the top of the roster dialog: dropdown
   to pick a team + load/update/delete actions. The "save this team"
   button lives in the dialog action bar so it can't be missed. */
.saved-teams-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  background: rgba(245, 196, 81, 0.06);
  border: 1px solid rgba(245, 196, 81, 0.2);
  border-radius: var(--radius-md);
}
.saved-teams-row label {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.saved-teams-row select {
  grid-column: 1 / 2;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}
.saved-teams-row select:focus { border-color: rgba(245, 196, 81, 0.5); }
/* Ensure black text on the OS-rendered dropdown panel. */
.saved-teams-row select option {
  color: #000;
  background: #fff;
  font-weight: 500;
}
.saved-teams-row select option:checked,
.saved-teams-row select option:hover {
  color: #000;
  font-weight: 700;
  background: #fde08a;
}
.saved-teams-row .ghost-btn {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
}
.saved-teams-row .ghost-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .saved-teams-row {
    grid-template-columns: 1fr;
  }
}
.saved-teams-share-btn { margin-right: auto; }
.roster-search-row input,
.roster-adhoc-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}
.roster-search-row input:focus,
.roster-adhoc-row input:focus {
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(0, 0, 0, 0.5);
}
.roster-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
}
.roster-search-status {
  margin: 0;
  font-size: 0.825rem;
  color: var(--ink-faint);
  font-style: italic;
  min-height: 1em;
}
.roster-search-status.searching { color: var(--ink-muted); }
.roster-search-status.found     { color: var(--troupe); font-style: normal; }
.roster-search-status.none      { color: var(--match);  font-style: normal; }
.roster-search-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s;
}
.roster-search-item:last-child { border-bottom: 0; }
.roster-search-item:hover,
.roster-search-item:focus { background: rgba(245, 196, 81, 0.1); outline: none; }
.roster-search-stage { font-weight: 600; color: var(--ink); }
.roster-search-prenom { color: var(--ink-muted); font-size: 0.85rem; }

.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 1rem;
}
.roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.875rem;
  cursor: pointer;        /* clickable: toggles presence for tonight */
  user-select: none;
  transition: opacity 0.15s, border-style 0.15s, background 0.15s;
}
/* Absent: dimmed + dashed border + struck-through name. The participant
   stays visible in the dialog so the user can re-mark them present, but
   they're filtered out of the active roster on Save. */
.roster-chip.is-absent {
  opacity: 0.45;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
}
.roster-chip.is-absent .roster-chip-name { text-decoration: line-through; }
.roster-chip.is-absent::after {
  content: attr(data-absent-label);
  margin-left: 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.roster-chip-user {
  border-color: rgba(109, 211, 197, 0.45);
  background: rgba(109, 211, 197, 0.08);
}
.roster-chip-guest {
  border-color: rgba(245, 196, 81, 0.35);
  background: rgba(245, 196, 81, 0.06);
}
.roster-chip-tag {
  font-size: 0.7rem;
  color: var(--ink-muted);
  width: 1rem;
  text-align: center;
}
.roster-chip-user .roster-chip-tag  { color: var(--troupe); }
.roster-chip-guest .roster-chip-tag { color: var(--gold-soft); }
.roster-chip-name { color: var(--ink); font-weight: 500; }
.roster-chip-remove {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.roster-chip-remove:hover { background: rgba(225, 29, 106, 0.5); color: #fff; }
.roster-empty {
  margin: 0;
  font-size: 0.825rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ----------------------------------------
   Generate button
   ---------------------------------------- */
.generate-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-bright) 50%, var(--gold) 200%);
  color: white;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(225, 29, 106, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.3s;
}

.generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(225, 29, 106, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
}

.generate-btn:active {
  transform: translateY(0);
}

.generate-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.generate-icon {
  font-size: 1.2rem;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.2) rotate(15deg); }
}

.generate-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.7s;
}

.generate-btn:hover .generate-shine {
  left: 100%;
}

/* ----------------------------------------
   Results grid
   ---------------------------------------- */
.results {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  --accent: var(--gold);
}

.card-exercise   { --accent: var(--c-exercise); }
.card-constraint { --accent: var(--c-constraint); }
.card-theme      { --accent: var(--c-theme); }
.card-category   { --accent: var(--c-category); }
.card-duration   { --accent: var(--c-duration); }
.card-players    { --accent: var(--c-players); }

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

.card.revealed {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow:
    var(--shadow-card),
    0 0 40px color-mix(in srgb, var(--accent) 25%, transparent);
}

.card.revealed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0;
  animation: cardGlow 0.8s ease-out forwards;
}

@keyframes cardGlow {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0.3; }
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.card-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  opacity: 0.9;
}

.card-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px var(--accent));
}

/* ----------------------------------------
   Reels (slot-machine effect)
   ---------------------------------------- */
.reel {
  position: relative;
  margin: 0.5rem 0 0.85rem;
}

.reel-window {
  height: 4.5rem;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-sm);
}

.reel-window::before,
.reel-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.25rem;
  pointer-events: none;
  z-index: 2;
}

.reel-window::before {
  top: 0;
  background: linear-gradient(180deg,
    rgba(15, 8, 25, 0.95) 0%,
    rgba(15, 8, 25, 0) 100%);
}

.reel-window::after {
  bottom: 0;
  background: linear-gradient(0deg,
    rgba(15, 8, 25, 0.95) 0%,
    rgba(15, 8, 25, 0) 100%);
}

.reel-track {
  display: flex;
  flex-direction: column;
  transition: none;
}

.reel.spinning .reel-track {
  animation: reelSpin 0.08s linear infinite;
}

@keyframes reelSpin {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-4.5rem); }
}

.reel-item {
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.5rem 0.75rem;
  flex-shrink: 0;
  line-height: 1.25;
  color: var(--ink);
}

.reel-item.placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 400;
}

.reel.settled .reel-item.final {
  animation: settle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  color: var(--accent);
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
}

@keyframes settle {
  0%   { transform: translateY(20px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

.card-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-height: 1.2rem;
  font-style: italic;
}

/* ----------------------------------------
   Re-roll bar
   ---------------------------------------- */
.reroll-bar {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

.reroll-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-right: 0.4rem;
}

.reroll-btn {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s;
}

.reroll-btn:hover {
  border-color: var(--gold);
  background: rgba(245, 196, 81, 0.1);
  transform: translateY(-1px);
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */
.footer {
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.footer-heart {
  color: var(--crimson-bright);
  display: inline-block;
  animation: heartbeat 2s ease-in-out infinite;
}

.sources {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
}

.sources summary {
  cursor: pointer;
  padding: 0.4rem 0;
  font-weight: 500;
  color: var(--gold);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sources summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.2s;
  color: var(--gold-soft);
}

.sources[open] summary::before {
  transform: rotate(90deg);
}

.sources ul {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.sources li::before {
  content: "•";
  color: var(--gold);
  margin-right: 0.5rem;
}

.sources a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted rgba(245, 196, 81, 0.3);
  transition: color 0.2s, border-color 0.2s;
}

.sources a:hover {
  color: var(--gold-soft);
  border-color: var(--gold);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

/* ----------------------------------------
   Match-only visibility
   ---------------------------------------- */
.match-only[hidden],
.troupe-only[hidden] { display: none !important; }

/* Card order per mode — follows the official match d'impro announcement
   sequence (Nature → Thème → Joueurs → Catégorie) and the troupe flow
   (Exercice → Contrainte → Thème). DOM order is mode-independent so the
   HTML stays clean; CSS `order` reshuffles per active mode. */
body.mode-match  #card-nature     { order: 1; }
body.mode-match  #card-theme      { order: 2; }
body.mode-match  #card-players    { order: 3; }
body.mode-match  #card-category   { order: 4; }
body.mode-troupe #card-exercise   { order: 1; }
body.mode-troupe #card-constraint { order: 2; }
body.mode-troupe #card-theme      { order: 3; }

/* Nature banner — full-width strip above the cards (Match only) */
.nature-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(245, 196, 81, 0.35);
  background: linear-gradient(135deg,
    rgba(245, 196, 81, 0.10) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(109, 211, 197, 0.10) 100%);
  border-radius: var(--radius-md);
  position: relative;
}
/* Match Comparée tirage banner — same vibe as the nature one but
   slightly more subdued (smaller padding, softer border) since it's
   informational rather than result-revealing. */
.tirage-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem;
  border: 1px dashed rgba(245, 196, 81, 0.3);
  background: rgba(245, 196, 81, 0.06);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--ink);
  margin-top: -0.4rem;
}
.tirage-banner[hidden] { display: none; }
.tirage-icon { font-size: 1.05rem; }
.tirage-text { font-weight: 500; letter-spacing: 0.02em; }
.tirage-flip { font-size: 0.95rem; }
.nature-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}
.nature-value {
  font-family: 'Bebas Neue', Inter, sans-serif;
  letter-spacing: 0.04em;
  font-size: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nature-reroll {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}
.nature-value.appearing {
  animation: natureFadeIn 0.45s ease-out;
}
@keyframes natureFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ----------------------------------------
   Reveal animations
   ---------------------------------------- */
.card {
  opacity: 1;
  transform: translateY(0);
}

.card.appearing {
  animation: cardAppear 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes cardAppear {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------
   Confetti / sparkle on final reveal
   ---------------------------------------- */
.sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 0.9rem;
  animation: sparkleFloat 1.2s ease-out forwards;
  z-index: 5;
}

@keyframes sparkleFloat {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg);   opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(180deg); opacity: 0; }
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */
@media (max-width: 640px) {
  .mode-toggle { grid-template-columns: 1fr; }
  .level-selector { grid-template-columns: repeat(3, 1fr); }
  .team-inputs { grid-template-columns: 1fr; }
  .vs { text-align: center; }
  .curtain { display: none; }
  .results { grid-template-columns: 1fr; }
  .reroll-bar { flex-direction: column; align-items: stretch; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spotlight, .hero-mask, .footer-heart, .generate-icon { animation: none; }
  .reel.spinning .reel-track { animation-duration: 0.2s; }
}

/* ----------------------------------------
   Top-right floating actions (Rules + Settings)
   ---------------------------------------- */
.top-actions {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  gap: 0.5rem;
}
.top-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  background: rgba(15, 8, 25, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 196, 81, 0.25);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, color 0.2s;
}
.top-trigger:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
}
.top-trigger svg { display: block; transition: transform 0.25s ease; }
.settings-trigger:hover svg { transform: rotate(20deg); }
.rules-trigger:hover    svg { transform: scale(1.08); }

/* ----------------------------------------
   Settings dialog
   ---------------------------------------- */
.settings-dialog {
  border: none;
  padding: 0;
  background: linear-gradient(160deg, #1a0f2b 0%, #0c0814 100%);
  color: var(--ink);
  border-radius: var(--radius-lg);
  width: min(720px, 92vw);
  max-height: 88vh;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 80px rgba(245, 196, 81, 0.1);
  overflow: hidden;
}
.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.settings-dialog .dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, transparent, rgba(245, 196, 81, 0.06), transparent);
  margin: 0;
}
.settings-dialog h2 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.dlg-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  color: var(--ink-muted);
  font-size: 1rem;
  transition: all 0.2s;
}
.dlg-close:hover { color: var(--gold); border-color: var(--gold); }

.dlg-body {
  padding: 1.25rem 1.4rem;
  overflow-y: auto;
  max-height: calc(88vh - 8rem);
}

.dlg-field {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.dlg-field label {
  font-weight: 600;
  font-size: 0.95rem;
  min-width: 6rem;
}
#langSelect {
  flex: 1;
  padding: 0.55rem 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  outline: none;
}
#langSelect:focus { border-color: var(--gold); }

.dlg-help {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.85rem;
  line-height: 1.5;
}
.dlg-help code {
  background: rgba(245, 196, 81, 0.1);
  color: var(--gold-soft);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.82rem;
}

#editorList details {
  margin-bottom: 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#editorList summary {
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}
#editorList summary::before {
  content: "▸";
  color: var(--gold-soft);
  font-size: 0.7rem;
  transition: transform 0.2s;
}
#editorList details[open] summary::before { transform: rotate(90deg); }
#editorList details[open] summary { color: var(--gold); }
#editorList textarea {
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.75rem;
  min-height: 8rem;
}
#editorList textarea:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--gold); }

.dlg-status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-height: 1.2rem;
}
.dlg-status[data-kind="ok"]    { color: #84e1bc; }
.dlg-status[data-kind="error"] { color: #ff6b8a; }

.dlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
.dlg-actions .primary-btn {
  margin-left: auto;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-bright) 100%);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 6px 20px rgba(225, 29, 106, 0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
.dlg-actions .primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(225, 29, 106, 0.5); }

/* View Transitions API hooks (modern browsers only) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(.34, 1.4, .64, 1);
}

/* Footer / sources */
.footer { text-align: center; padding: 2.5rem 1.5rem 3rem; color: var(--ink-faint); font-size: 0.85rem; }

@media (max-width: 640px) {
  .top-actions { top: 0.6rem; right: 0.6rem; gap: 0.35rem; }
  .top-trigger { padding: 0.45rem 0.75rem; }
  .top-trigger span { display: none; }
  .settings-dialog { width: 96vw; max-height: 92vh; }
}

/* ==========================================================
   Duration picker (config block 04)
   ========================================================== */
.duration-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  font-weight: 500;
}
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(245, 240, 234, 0.4);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 13px;
}
.duration-max-help {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}
.duration-manual {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.duration-manual input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--troupe), var(--gold), var(--match));
  outline: none;
  cursor: pointer;
}
.duration-manual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  cursor: pointer;
}
.duration-manual input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}
.duration-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 196, 81, 0.3);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Chrono section (timer card + audience card)
   ========================================================== */
/* Chrono card spans the full container width (same as the mode panel).
   Audience card stacks below it. */
.chrono-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

/* All four action buttons (Start / Pause / Reset / Open recorder) sit on a
   single horizontal row beneath the centered chrono. Wraps to two rows on
   narrow portrait mobile when there's not enough width. */
.chrono-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin-top: 4px;
}
.chrono-controls > .chrono-btn,
.chrono-controls > .record-open-btn {
  flex: 1 1 140px;
  min-width: 120px;
  margin: 0;
}
.card-chrono {
  --c-chrono: #ffd166;
  border-color: rgba(255, 209, 102, 0.3);
}
.card-chrono::before {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), transparent);
}
.chrono-display {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(54px, 10vw, 96px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 10px;
  text-shadow: 0 0 30px rgba(255, 209, 102, 0.3);
  line-height: 1;
  transition: color 0.2s, text-shadow 0.2s;
}
.chrono-display.warn {
  color: #fbbf24;
  text-shadow: 0 0 35px rgba(251, 191, 36, 0.5);
}
.chrono-display.danger {
  color: #f87171;
  text-shadow: 0 0 40px rgba(248, 113, 113, 0.6);
  animation: chrono-pulse 0.8s infinite alternate;
}
.chrono-display.ended {
  color: var(--gold);
  text-shadow: 0 0 50px rgba(245, 196, 81, 0.7);
}
@keyframes chrono-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.chrono-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.chrono-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--troupe), var(--gold), var(--match));
  border-radius: 999px;
  transition: width 0.25s linear;
}
.chrono-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s;
  letter-spacing: 0.02em;
  min-height: 44px;
}
.chrono-btn:hover:not(:disabled) { transform: translateY(-1px); }
.chrono-btn:active:not(:disabled) { transform: translateY(0); }
.chrono-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.chrono-start {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #052e0e;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.35);
}
.chrono-pause {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #2a1a00;
}
.chrono-reset {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ==========================================================
   Audience card
   ========================================================== */
.card-audience {
  --c-audience: #ffae5c;
  border-color: rgba(255, 174, 92, 0.3);
}
.card-audience::before {
  background: linear-gradient(135deg, rgba(255, 174, 92, 0.18), transparent);
}
.audience-controls { margin-top: 8px; }
.audience-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: 0.2s;
  cursor: pointer;
}
.switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}
.audience-interval-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0 4px;
}
.audience-interval-label {
  font-size: 13px;
  color: var(--ink-muted);
  flex-basis: 100%;
}
.audience-interval-row input[type="range"] {
  flex: 1;
  min-width: 140px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-audience), var(--gold));
  outline: none;
  cursor: pointer;
}
.audience-interval-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  background: var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.audience-interval-row input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--ink);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
}
.audience-interval-value {
  min-width: 70px;
  text-align: center;
  padding: 4px 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-audience);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 174, 92, 0.3);
  border-radius: 7px;
}
.audience-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 174, 92, 0.1);
  border: 1px solid rgba(255, 174, 92, 0.35);
  transition: all 0.25s;
  font-weight: 600;
}
.audience-flash.flash-on {
  background: rgba(255, 174, 92, 0.45);
  border-color: var(--c-audience);
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(255, 174, 92, 0.45);
}
.audience-flash-dot {
  width: 12px; height: 12px;
  background: var(--c-audience);
  border-radius: 50%;
  flex-shrink: 0;
}
.audience-flash.flash-on .audience-flash-dot {
  animation: audience-ring 1.2s ease-out;
}
@keyframes audience-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 174, 92, 0.85); }
  100% { box-shadow: 0 0 0 24px rgba(255, 174, 92, 0); }
}

/* ==========================================================
   Mobile portrait responsiveness (≤480px = iPhone, S22, etc.)
   ========================================================== */
@media (max-width: 480px) {
  /* Tighten the whole page so it fits in portrait */
  .hero {
    padding: 2.5rem 1rem 1rem;
  }
  .hero-mask {
    font-size: 2.6rem;
    margin-bottom: 0.4rem;
  }
  .title {
    font-size: clamp(2.6rem, 14vw, 4rem);
    line-height: 0.95;
  }
  .subtitle {
    font-size: 0.85rem;
    margin-top: 0.7rem;
    padding: 0 0.5rem;
  }

  .container {
    padding: 0 0.75rem 2rem;
  }
  .config-panel {
    padding: 1rem;
    border-radius: 16px;
  }
  .config-block {
    margin-bottom: 1.1rem;
  }
  .config-label {
    font-size: 0.75rem;
  }

  /* Make mode/level buttons compact and tappable */
  .mode-toggle {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .mode-btn {
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }
  .mode-icon { font-size: 1.4rem; }
  .mode-title { font-size: 0.85rem; }
  .mode-desc { display: none; }   /* hide long sub-text on phone */

  .level-selector {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .level-btn {
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    min-height: 44px;          /* tap target */
  }

  textarea#themesInput {
    min-height: 80px;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
  }
  .theme-toggle-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .ghost-btn {
    width: 100%;
    text-align: center;
  }

  /* Duration block on phone */
  .duration-toggle-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .duration-max-help { font-size: 12px; }
  .duration-manual {
    flex-wrap: wrap;
    gap: 10px;
  }
  .duration-manual input[type="range"] {
    flex-basis: 100%;
    order: 2;
  }
  .duration-value {
    order: 1;
    align-self: flex-start;
    min-width: 80px;
    font-size: 14px;
  }

  /* Generate button bigger and full-width for thumbs */
  .generate-btn {
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    min-height: 52px;
  }

  /* Result cards on phone — single column, compact */
  .results {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 1.5rem;
  }
  .card {
    padding: 1rem;
    border-radius: 14px;
  }
  .card-head { margin-bottom: 0.5rem; }
  .card-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .card-icon { font-size: 1.3rem; }
  .reel-window { height: 3.4rem; }
  .reel-item { font-size: 1.05rem; padding: 0 0.5rem; }
  .card-meta { font-size: 0.85rem; }

  /* Chrono section: stack vertically with reasonable sizes */
  .chrono-section {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
    margin-top: 1.4rem;
  }
  .chrono-display {
    font-size: clamp(54px, 16vw, 80px);
    margin: 8px 0 10px;
  }
  .chrono-progress { height: 6px; margin-bottom: 12px; }
  .chrono-controls {
    gap: 0.4rem;
  }
  .chrono-btn {
    flex: 1 1 30%;
    padding: 0.7rem 0.4rem;
    font-size: 0.78rem;
    min-height: 44px;
    min-width: 0;
  }

  /* Audience card on phone */
  .audience-toggle-row {
    padding: 10px 12px;
    font-size: 0.9rem;
    gap: 10px;
  }
  .audience-interval-row {
    margin-top: 10px;
    gap: 10px;
  }
  .audience-interval-row input[type="range"] {
    flex-basis: 100%;
    order: 2;
  }
  .audience-interval-value {
    order: 1;
    align-self: flex-start;
    font-size: 13px;
  }
  .audience-interval-label { font-size: 12px; }
  .audience-flash {
    padding: 10px 12px;
    font-size: 0.85rem;
    margin-top: 10px;
  }

  /* Reroll bar wraps gracefully */
  .reroll-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem;
  }
  .reroll-label {
    flex-basis: 100%;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }
  .reroll-btn {
    flex: 1 1 calc(50% - 0.4rem);
    padding: 0.55rem 0.5rem;
    font-size: 0.8rem;
    min-height: 40px;
  }

  /* Top actions compact */
  .top-actions { top: 0.5rem; right: 0.5rem; gap: 0.3rem; }
  .top-trigger { padding: 0.4rem 0.55rem; }
  .top-trigger span { display: none; }

  /* Footer compact */
  .footer { padding: 1.5rem 1rem 2rem; font-size: 0.78rem; }
}

/* Very small phones (≤360px = Galaxy S22 portrait, iPhone SE) */
@media (max-width: 380px) {
  .hero { padding-top: 2rem; }
  .title { font-size: 2.4rem; }
  .hero-mask { font-size: 2.2rem; }
  .config-panel { padding: 0.85rem; }
  .chrono-display { font-size: 50px; }
  .chrono-btn { font-size: 0.72rem; padding: 0.6rem 0.3rem; }
  .level-btn { font-size: 0.72rem; padding: 0.45rem 0.3rem; }
  .mode-btn { font-size: 0.78rem; padding: 0.55rem 0.4rem; }
}

/* Match-mode reels in portrait: keep one per row instead of cramping six */
@media (max-width: 480px) {
  .results { grid-template-columns: 1fr; }
}

/* ==========================================================
   In-card reroll button (small dice next to label)
   ========================================================== */
.card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-head .card-label { flex: 0 0 auto; }
.card-head .card-icon  { margin-left: auto; }

.card-reroll {
  appearance: none;
  border: 1px solid rgba(245, 196, 81, 0.25);
  background: rgba(245, 196, 81, 0.08);
  color: var(--gold-soft);
  font-size: 0.95rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  flex-shrink: 0;
  min-height: 28px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-reroll:hover:not(:disabled) {
  background: rgba(245, 196, 81, 0.18);
  border-color: rgba(245, 196, 81, 0.55);
  color: var(--gold);
  transform: rotate(-15deg) scale(1.08);
  box-shadow: 0 0 18px rgba(245, 196, 81, 0.35);
}
.card-reroll:active:not(:disabled) {
  transform: rotate(20deg) scale(0.95);
}
.card-reroll:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile: same compact button, fits comfortably in card head */
@media (max-width: 480px) {
  .card-reroll {
    font-size: 0.85rem;
    padding: 3px 6px;
    min-height: 26px;
    min-width: 28px;
  }
}

/* Hide the (now-deleted) reroll-bar in case it's somehow referenced anywhere */
.reroll-bar { display: none !important; }

/* Edit-value button — sibling of .card-reroll. Clicking opens the
   #editValueDialog so the user can override the picked value, and if the
   typed text doesn't match the bundled pool it gets submitted to the admin. */
.card-edit {
  appearance: none;
  border: 1px solid rgba(108, 211, 197, 0.25);
  background: rgba(108, 211, 197, 0.08);
  color: var(--troupe);
  font-size: 0.95rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  flex-shrink: 0;
  min-height: 28px;
  min-width: 32px;
}
.card-edit:hover {
  background: rgba(108, 211, 197, 0.18);
  border-color: rgba(108, 211, 197, 0.55);
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .card-edit { font-size: 0.85rem; padding: 3px 6px; min-height: 26px; min-width: 28px; }
}
.edit-value-dialog .dlg-body { padding: 1rem 1.25rem; }
.edit-value-dialog input[type="text"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
}
.edit-value-dialog input[type="text"]:focus,
.edit-value-dialog textarea:focus {
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(0, 0, 0, 0.5);
}
.edit-value-dialog textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  resize: vertical;
  min-height: 4.4rem;
  line-height: 1.4;
}
.edit-value-status {
  background: rgba(109, 211, 197, 0.12);
  border: 1px solid rgba(109, 211, 197, 0.4);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  color: var(--troupe);
  font-weight: 500;
}
.edit-value-status.error {
  background: rgba(255, 60, 80, 0.12);
  border-color: rgba(255, 100, 110, 0.4);
  color: #ffd0d4;
}

/* ==========================================================
   Themes mode toggle (Random / Custom) + edit modal
   ========================================================== */
.themes-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.themes-mode-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.18s ease;
  font-family: inherit;
  min-height: 48px;
}
.themes-mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.18);
}
.themes-mode-btn.active {
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.25), rgba(245, 196, 81, 0.1));
  color: var(--gold);
  border-color: rgba(245, 196, 81, 0.5);
  box-shadow: 0 4px 18px rgba(245, 196, 81, 0.18);
}

.themes-custom-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.themes-edit-btn {
  appearance: none;
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.2), rgba(157, 108, 255, 0.18));
  color: var(--ink);
  border: 1px solid rgba(108, 140, 255, 0.4);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  transition: transform 0.12s, box-shadow 0.18s, border-color 0.18s;
}
.themes-edit-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(108, 140, 255, 0.7);
  box-shadow: 0 4px 18px rgba(108, 140, 255, 0.25);
}
.themes-custom-row .theme-status {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* === Match d'impro rules dialog ===
   Bigger than the other dialogs. Both `display:` and the size rules are
   gated behind `[open]` — a closed `<dialog>` MUST stay `display: none`
   (UA default), otherwise it renders inline below the page.
   The double-class selector beats `.themes-dialog` defaults regardless
   of CSS source order. */
.themes-dialog.rules-dialog[open] {
  width: min(960px, 96vw);
  max-width: 96vw;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}
.themes-dialog.rules-dialog[open] .dlg-head   { flex: 0 0 auto; }
.themes-dialog.rules-dialog[open] .rules-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rules-body {
  line-height: 1.6;
  padding: 1rem 1.5rem 1.5rem;
}
.rules-body p { margin: 0.4rem 0 0.8rem; }
.rules-body h3 {
  font-family: 'Bebas Neue', Inter, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 1.4rem 0 0.5rem;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--row-border, rgba(255,255,255,0.08));
  padding-bottom: 0.25rem;
}
.rules-body h3:first-of-type { margin-top: 1rem; }
.rules-body ol, .rules-body ul { margin: 0.4rem 0 0.8rem 1.4rem; padding: 0; }
.rules-body ul ul { margin-top: 0.3rem; margin-bottom: 0.4rem; }
.rules-body li { margin: 0.3rem 0; }
.rules-body strong { color: var(--gold-soft); font-weight: 600; }
.rules-body code { background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }

/* === Themes dialog === */
.themes-dialog {
  border: 0;
  background: linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-velvet) 100%);
  color: var(--ink);
  padding: 0;
  border-radius: var(--radius-lg);
  width: min(560px, 92vw);
  max-height: 88vh;
  box-shadow: var(--shadow-card), 0 0 60px rgba(108, 140, 255, 0.18);
  overflow: hidden;
}
.themes-dialog::backdrop {
  background: rgba(8, 5, 20, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.themes-dialog .dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.themes-dialog .dlg-head h2 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 1.6rem;
  color: var(--gold);
}
.themes-dialog .dlg-close {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-muted);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.themes-dialog .dlg-close:hover { color: var(--ink); border-color: rgba(255,255,255,0.3); }
.themes-dialog .dlg-body {
  padding: 1.1rem 1.5rem;
}
.themes-dialog .dlg-help {
  margin: 0 0 0.7rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.themes-dialog textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 180px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.themes-dialog textarea:focus {
  border-color: rgba(108, 140, 255, 0.6);
  background: rgba(0, 0, 0, 0.5);
}
.themes-dialog .dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .themes-mode-toggle { gap: 0.4rem; }
  .themes-mode-btn { padding: 0.6rem 0.5rem; font-size: 0.85rem; min-height: 44px; }
  .themes-custom-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .themes-edit-btn { width: 100%; text-align: center; }
  .themes-dialog { width: 96vw; max-height: 92vh; }
  .themes-dialog .dlg-head { padding: 0.9rem 1rem 0.7rem; }
  .themes-dialog .dlg-head h2 { font-size: 1.3rem; }
  .themes-dialog .dlg-body { padding: 0.9rem 1rem; }
  .themes-dialog .dlg-actions { padding: 0.7rem 1rem 1rem; }
  .themes-dialog .dlg-actions button { flex: 1 1 calc(50% - 0.3rem); }
}

/* ==========================================================
   Brand logo (replaces text title in hero)
   ========================================================== */
.hero-logo-link {
  display: inline-block;
  /* Negative bottom margin compensates for the visual padding the logo
     image carries inside its bounding box, so the subtitle ends up
     visually adjacent to the wordmark rather than floating below it. */
  margin: 0 auto -0.6rem;
  text-decoration: none;
  line-height: 0;
  transition: transform 0.25s ease;
  filter: drop-shadow(0 12px 40px rgba(245, 196, 81, 0.25))
          drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
.hero-logo-link:hover {
  transform: scale(1.02) translateY(-2px);
}
.hero-logo {
  display: block;
  width: 100%;
  /* Logo sizing reduced by 20% across every breakpoint compared to
     the original (540 / 420 / 320 / 280). Less hero real estate so
     the config panel + impro cards sit higher on the screen. */
  max-width: 432px;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  animation: heroLogoFloat 6s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Tighter on tablets */
@media (max-width: 768px) {
  .hero-logo { max-width: 336px; }
}
/* Mobile portrait */
@media (max-width: 480px) {
  .hero { padding: 1.6rem 0.75rem 0.4rem; }
  .hero-logo { max-width: 256px; }
}
@media (max-width: 380px) {
  .hero-logo { max-width: 224px; }
}

/* Reduced motion: keep the logo still */
@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

/* ==========================================================
   Footer creator credit
   ========================================================== */
.footer-credit {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  font-style: italic;
}
.footer-credit::before {
  content: "✦ ";
  color: var(--gold);
  opacity: 0.6;
}
/* Support button: outlined, gold-accented — visible without being loud.
   Sits above the "Made with ♥" footer line so it's the first thing the
   reader sees, but stays a subdued color until hovered. */
.footer-support {
  margin: 0 0 1rem;          /* space below it before footerText */
  text-align: center;
}
.footer-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(245, 196, 81, 0.5);   /* gold @ 50% */
  border-radius: var(--radius-md);
  background: rgba(245, 196, 81, 0.08);        /* gold @ 8% */
  color: var(--gold-soft);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
}
.footer-support-btn:hover,
.footer-support-btn:focus-visible {
  background: rgba(245, 196, 81, 0.18);
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
  transform: translateY(-1px);
}
.footer-support-btn:active {
  transform: translateY(0);
}
.footer-support-heart {
  color: var(--gold);
  font-size: 1em;
}
@media (max-width: 480px) {
  .footer-credit { font-size: 0.74rem; }
  .footer-support-btn { font-size: 0.82rem; padding: 0.5rem 0.95rem; }
}

/* ==========================================================
   Open-recorder button (in the chrono card)
   ========================================================== */
.record-open-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #b91c4d, #ff4d6d);
  border: 1px solid rgba(255, 77, 109, 0.55);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.3);
  transition: transform 0.12s, box-shadow 0.18s;
  min-height: 48px;
}
.record-open-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(255, 77, 109, 0.42); }
.record-open-btn:active { transform: translateY(0); }

/* ==========================================================
   Recorder full-screen modal
   ========================================================== */
.recorder-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.recorder-modal[hidden] { display: none; }
.recorder-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.recorder-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.recorder-hidden-video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}
.recorder-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

/* Top-right close button */
.recorder-close {
  position: absolute;
  top: max(0.7rem, env(safe-area-inset-top));
  right: 0.7rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.recorder-close:hover { background: rgba(0, 0, 0, 0.75); }

/* REC indicator (top-left) */
.recorder-rec-indicator {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  left: 0.85rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.recorder-rec-indicator[hidden] { display: none; }
.recorder-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.7);
  animation: recBlink 1.1s infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.recorder-rec-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Bottom controls bar */
.recorder-bottom-bar,
.recorder-finish-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}
.recorder-bottom-bar[hidden],
.recorder-finish-bar[hidden] { display: none; }
.recorder-spacer { width: 56px; }

.recorder-action {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  min-height: 44px;
}
.recorder-action:hover { background: rgba(0, 0, 0, 0.75); border-color: rgba(255, 255, 255, 0.45); }
.recorder-action:active { transform: scale(0.97); }

.recorder-record {
  background: linear-gradient(135deg, #ff3b3b, #b91c4d);
  border: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-size: 0;
  position: relative;
  box-shadow: 0 6px 24px rgba(255, 59, 59, 0.45), inset 0 0 0 4px rgba(255, 255, 255, 0.95);
}
.recorder-record::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s;
}
.recorder-modal .recorder-rec-indicator + * .recorder-record::before,
.recorder-record[data-recording="true"]::before {
  border-radius: 6px;
  width: 26px; height: 26px;
}
.recorder-switch-cam {
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 1.25rem;
  padding: 0;
}

.recorder-download {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #052e0e;
  font-weight: 800;
  border: 0;
  padding: 0.85rem 1.4rem;
}
.recorder-download:hover { filter: brightness(1.05); }

.recorder-again {
  background: rgba(255, 255, 255, 0.08);
}

/* Error overlay */
.recorder-error {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--ink);
}
.recorder-error[hidden] { display: none; }
.recorder-error p {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  max-width: 32rem;
}
.recorder-error-hint {
  color: var(--gold-soft);
  font-style: italic;
  font-size: 0.9rem;
}

/* Mobile portrait */
@media (max-width: 480px) {
  .recorder-record { width: 68px; height: 68px; }
  .recorder-record::before { width: 28px; height: 28px; }
  .recorder-switch-cam { width: 48px; height: 48px; font-size: 1.1rem; }
  .recorder-action { padding: 0.6rem 0.95rem; font-size: 0.9rem; }
}

/* ==========================================================
   Recorder modal — top bar (REC | chrono chip | switch + close)
   ========================================================== */
.recorder-top-bar {
  position: absolute;
  top: max(0.6rem, env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.7rem;
  pointer-events: none;
}
.recorder-top-bar > * { pointer-events: auto; }

.recorder-top-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.recorder-icon-btn {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.recorder-icon-btn:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.5);
}
.recorder-icon-btn:active { transform: scale(0.95); }

/* Chrono chip in top-center */
.recorder-chrono-chip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 196, 81, 0.45);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.recorder-chrono-chip[hidden] { display: none; }
.recorder-chrono-chip.warn  { color: #fbbf24; border-color: #fbbf24; }
.recorder-chrono-chip.danger {
  color: #f87171;
  border-color: #f87171;
  animation: chronoChipPulse 0.8s infinite alternate;
}
@keyframes chronoChipPulse {
  from { transform: translateX(-50%) scale(1); }
  to   { transform: translateX(-50%) scale(1.06); }
}
.recorder-chrono-icon { font-size: 0.95rem; }

/* Removed: the old absolute REC indicator + close button positioning
   (.recorder-rec-indicator now lives inside .recorder-top-bar) */
.recorder-top-bar .recorder-rec-indicator {
  position: relative;
  top: auto;
  left: auto;
}

/* Mobile: tighter top bar so the chrono chip never overlaps the buttons */
@media (max-width: 480px) {
  .recorder-top-bar { padding: 0 0.5rem; gap: 0.4rem; }
  .recorder-icon-btn { width: 40px; height: 40px; font-size: 0.95rem; }
  .recorder-chrono-chip { font-size: 0.9rem; padding: 0.35rem 0.65rem; }
  .recorder-chrono-chip .recorder-chrono-icon { font-size: 0.85rem; }
}
@media (max-width: 380px) {
  .recorder-icon-btn { width: 36px; height: 36px; font-size: 0.85rem; }
  .recorder-chrono-chip { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
}

/* ==========================================================
   Recorder UI v3 — record button redesign + brand logo + polish
   ========================================================== */

/* Top-left container holding the brand logo + REC indicator */
.recorder-top-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.recorder-brand-logo {
  height: 38px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}
@media (max-width: 480px) {
  .recorder-brand-logo { height: 30px; max-width: 90px; }
}
@media (max-width: 380px) {
  .recorder-brand-logo { height: 26px; max-width: 78px; }
}

/* Override .recorder-record (it is no longer .recorder-action). Pure circle, no text. */
.recorder-record {
  appearance: none;
  -webkit-appearance: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.12s;
  font-size: 0;            /* belt-and-suspenders: prevent any leftover text rendering */
  line-height: 0;
  /* Outer white ring */
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.95),
    0 8px 32px rgba(255, 47, 92, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.recorder-record:active { transform: scale(0.94); }
.recorder-record:hover .recorder-record-inner {
  filter: brightness(1.06);
}
.recorder-record-inner {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b3b, #c0143b);
  box-shadow: 0 0 18px rgba(255, 59, 59, 0.55) inset;
  transition: all 0.22s ease;
}
/* Recording state: red disc morphs into a rounded square (universal stop icon) */
.recorder-record[data-recording="true"] .recorder-record-inner {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
.recorder-record[data-recording="true"] {
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(255, 47, 92, 0.7);
  animation: recRecordingPulse 1.4s ease-in-out infinite;
}
@keyframes recRecordingPulse {
  0%, 100% { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 47, 92, 0.55); }
  50%      { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 50px rgba(255, 47, 92, 0.85); }
}

/* Bottom bar: stack record button + tiny label below it */
.recorder-bottom-bar {
  flex-direction: column;
  gap: 0.35rem;
}
.recorder-record-label {
  display: inline-block;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  pointer-events: none;
}

/* Mobile portrait: smaller record button + label */
@media (max-width: 480px) {
  .recorder-record { width: 74px; height: 74px; }
  .recorder-record-inner { width: 52px; height: 52px; }
  .recorder-record[data-recording="true"] .recorder-record-inner { width: 26px; height: 26px; }
  .recorder-record-label { font-size: 0.72rem; padding: 0.28rem 0.75rem; }
}
@media (max-width: 380px) {
  .recorder-record { width: 66px; height: 66px; }
  .recorder-record-inner { width: 46px; height: 46px; }
}

/* Polish on top toolbar: clearer separation of icon buttons */
.recorder-icon-btn {
  background: rgba(20, 12, 32, 0.65);
}
.recorder-top-right .recorder-icon-btn:first-child {
  background: rgba(20, 12, 32, 0.5);
  border-color: rgba(245, 196, 81, 0.35);
}
.recorder-top-right .recorder-icon-btn:first-child:hover {
  background: rgba(20, 12, 32, 0.85);
  border-color: rgba(245, 196, 81, 0.7);
  color: #f5c451;
}
.recorder-top-right .recorder-close {
  border-color: rgba(255, 100, 100, 0.4);
}
.recorder-top-right .recorder-close:hover {
  background: rgba(150, 30, 50, 0.7);
  border-color: rgba(255, 100, 100, 0.85);
  color: #ffd0d0;
}

/* Shared icon-button focus ring (a11y polish) */
.recorder-icon-btn:focus-visible {
  outline: 2px solid #f5c451;
  outline-offset: 2px;
}
.recorder-record:focus-visible {
  outline: 3px solid #f5c451;
  outline-offset: 4px;
}

/* Subtle ambient overlay so the camera image always feels framed */
.recorder-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(0, 0, 0, 0.35), transparent 45%),
    radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.35), transparent 45%);
  z-index: 1;
}
.recorder-canvas, .recorder-preview { z-index: 2; }
.recorder-top-bar, .recorder-bottom-bar, .recorder-finish-bar, .recorder-error { z-index: 5; }

/* ==========================================================
   Recorder UI v4 — bigger logo, pause/stop layout, confirm + preview popups
   ========================================================== */

/* Bigger top-left logo */
.recorder-brand-logo {
  height: 64px;
  max-width: 180px;
}
@media (max-width: 480px) {
  .recorder-brand-logo { height: 48px; max-width: 140px; }
}
@media (max-width: 380px) {
  .recorder-brand-logo { height: 40px; max-width: 120px; }
}

/* Bottom controls — ACTIVE state (pause | stop) */
.recorder-controls-active {
  flex-direction: row !important;
  gap: 1.2rem !important;
  justify-content: center;
}
.recorder-ctl-btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(20, 12, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  min-height: 50px;
  min-width: 120px;
  transition: transform 0.1s, box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.recorder-ctl-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.4); }
.recorder-ctl-btn:active { transform: translateY(0); }
.recorder-ctl-icon { font-size: 1.05rem; }

.recorder-ctl-pause {
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.25), rgba(245, 196, 81, 0.08));
  border-color: rgba(245, 196, 81, 0.5);
  color: var(--gold-soft);
}
.recorder-ctl-pause:hover {
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.4), rgba(245, 196, 81, 0.15));
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(245, 196, 81, 0.35);
}
.recorder-ctl-stop {
  background: linear-gradient(135deg, rgba(255, 59, 92, 0.35), rgba(185, 28, 77, 0.25));
  border-color: rgba(255, 100, 130, 0.55);
  color: #ffd0d4;
}
.recorder-ctl-stop:hover {
  background: linear-gradient(135deg, rgba(255, 59, 92, 0.55), rgba(185, 28, 77, 0.45));
  border-color: rgba(255, 100, 130, 0.9);
  box-shadow: 0 6px 22px rgba(255, 47, 92, 0.45);
}

@media (max-width: 480px) {
  .recorder-ctl-btn { padding: 0.6rem 0.95rem; font-size: 0.78rem; min-width: 100px; min-height: 46px; }
  .recorder-controls-active { gap: 0.85rem !important; }
}
@media (max-width: 380px) {
  .recorder-ctl-btn { padding: 0.55rem 0.75rem; font-size: 0.72rem; min-width: 88px; min-height: 42px; }
}

/* Stop confirmation dialog */
.recorder-confirm {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 18, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
  animation: recFade 0.18s ease-out;
}
.recorder-confirm[hidden] { display: none; }
@keyframes recFade { from { opacity: 0; } to { opacity: 1; } }

.recorder-confirm-card {
  background: linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-velvet) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 50px rgba(255, 47, 92, 0.18);
}
.recorder-confirm-title {
  margin: 0 0 0.6rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 400;
}
.recorder-confirm-msg {
  margin: 0 0 1.3rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}
.recorder-confirm-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.recorder-confirm-btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 46px;
  transition: transform 0.1s, box-shadow 0.18s, border-color 0.18s;
  flex: 1;
  max-width: 180px;
}
.recorder-confirm-no {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.recorder-confirm-no:hover { border-color: rgba(255, 255, 255, 0.4); }
.recorder-confirm-yes {
  background: linear-gradient(135deg, #ff3b3b, #b91c4d);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 47, 92, 0.45);
}
.recorder-confirm-yes:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(255, 47, 92, 0.6); }

/* Preview / download popup */
.recorder-preview-popup {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 18, 0.92);
  padding: 1.2rem;
  animation: recFade 0.22s ease-out;
}
.recorder-preview-popup[hidden] { display: none; }
.recorder-preview-card {
  background: linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-velvet) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.2rem;
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 60px rgba(245, 196, 81, 0.18);
  max-height: 92vh;
}
.recorder-preview-title {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 400;
}
/* Participants confirmation block — shown above the download button.
   Auto-populated from the active rosters; the user can tweak before
   downloading so the filename + analytics carry the right names. */
.recorder-participants {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  max-height: 26vh;
  overflow: auto;
}
.recorder-participants-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.recorder-participant-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}
.recorder-participant-row[hidden] { display: none; }
.recorder-participant-row label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.recorder-participant-row input,
.recorder-participant-row textarea {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
  resize: vertical;
}
.recorder-participant-row textarea { min-height: 2.4rem; }
.recorder-participant-row input:focus,
.recorder-participant-row textarea:focus { border-color: rgba(245, 196, 81, 0.55); }

.recorder-preview-card .recorder-preview {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: var(--radius-md);
  background: #000;
  display: block;
}
.recorder-preview-actions {
  width: 100%;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.recorder-preview-actions .recorder-action {
  flex: 1 1 200px;
  max-width: 240px;
  min-height: 48px;
  font-size: 0.95rem;
  border-radius: 12px;
}
.recorder-preview-actions .recorder-download {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #052e0e;
  font-weight: 800;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
}
.recorder-preview-actions .recorder-download:hover { filter: brightness(1.06); transform: translateY(-1px); }
.recorder-preview-actions .recorder-exit {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
  padding: 0.8rem 1rem;
}
.recorder-preview-actions .recorder-exit:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 480px) {
  .recorder-preview-card { padding: 1rem 1rem 0.9rem; gap: 0.7rem; }
  .recorder-preview-title { font-size: 1.35rem; }
  .recorder-preview-card .recorder-preview { max-height: 52vh; }
  .recorder-preview-actions { gap: 0.5rem; }
  .recorder-preview-actions .recorder-action { flex-basis: 100%; max-width: none; }
}

/* When recording finishes, no need to keep the camera vignette around */
.recorder-stage-finished::after { display: none; }

/* ==========================================================
   Recorder UI v5 — single canvas logo, REC bottom-right, smaller bottom timer
   ========================================================== */

/* Switch camera button: floating top-right (no toolbar wrapper anymore) */
.recorder-floating-tr {
  position: absolute;
  top: max(0.7rem, env(safe-area-inset-top));
  right: 0.7rem;
  z-index: 5;
}

/* REC indicator: floating bottom-right (only visible while recording) */
.recorder-rec-indicator {
  position: absolute;
  bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 5rem));
  right: 0.85rem;
  top: auto;          /* clear old top positioning */
  left: auto;         /* clear old left positioning */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  background: rgba(10, 6, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 80, 100, 0.45);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 18px rgba(255, 47, 92, 0.25);
}
.recorder-rec-indicator[hidden] { display: none; }

@media (max-width: 480px) {
  .recorder-rec-indicator {
    bottom: max(4.6rem, calc(env(safe-area-inset-bottom) + 4.4rem));
    font-size: 0.74rem;
    padding: 0.32rem 0.6rem;
  }
}

/* Match Comparée team selector — sits above the big record button
   when the recorder is idle. Two chips (Team A / Team B); the
   selected one is gold-soft, the other is muted. Clicks change
   state.currentRecordingTeam and refresh the recorder team indicator. */
.recorder-team-selector {
  position: absolute;
  bottom: max(7rem, calc(env(safe-area-inset-bottom) + 6.8rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: rgba(10, 6, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 196, 81, 0.45);
  border-radius: var(--radius-md);
  max-width: calc(100vw - 2rem);
}
.recorder-team-selector[hidden] { display: none; }
.recorder-team-selector-label {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 600;
  text-align: center;
}
.recorder-team-selector-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.recorder-team-chip {
  appearance: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recorder-team-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
.recorder-team-chip.is-selected {
  background: rgba(245, 196, 81, 0.18);
  border-color: rgba(245, 196, 81, 0.65);
  color: var(--gold-soft);
}

/* Recording team indicator (Match Comparée only): floating chip
   showing whose video is being captured right now. Sits below the
   REC dot so the room knows whose turn it is. */
.recorder-team-indicator {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  right: 0.85rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(10, 6, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 196, 81, 0.55);
  border-radius: 999px;
  color: var(--gold-soft);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.recorder-team-indicator[hidden] { display: none; }
/* "Enregistrer la 2e équipe" — same shape as the download/exit
   buttons; gold-soft accent so it reads as the primary next action. */
.recorder-record-other {
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.95), rgba(253, 224, 138, 0.95));
  color: var(--bg-deep);
  border: 0;
  font-weight: 700;
}
.recorder-record-other[hidden] { display: none !important; }

/* === Removed in this version (kept here only as no-ops in case old markup survives) === */
.recorder-brand-logo,
.recorder-chrono-chip,
.recorder-top-bar,
.recorder-top-left,
.recorder-top-right { display: none !important; }

/* Re-enable just the switch-cam button (it now uses .recorder-floating-tr) */
.recorder-floating-tr { display: inline-flex !important; }

/* ==========================================================
   Recorder UI v6 — clean record button (white outline + full red circle)
   ========================================================== */

/* Override the older record button design: thin white border + full red center */
.recorder-record {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid #ffffff;
  /* Reset the previous inset white ring shadow */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(255, 47, 92, 0.5);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s;
  font-size: 0;
  line-height: 0;
}
.recorder-record:hover { box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 12px 40px rgba(255, 47, 92, 0.7); }
.recorder-record:active { transform: scale(0.94); }

/* Bigger red disc (no morph during recording) */
.recorder-record .recorder-record-inner,
.recorder-record[data-recording="true"] .recorder-record-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b3b, #c0143b);
  box-shadow: 0 0 14px rgba(255, 59, 59, 0.5) inset;
  transition: none;
}

/* Disable any remaining recording-state animation that produced a square */
.recorder-record[data-recording="true"] {
  animation: none;
}

/* Mobile: keep proportions */
@media (max-width: 480px) {
  .recorder-record { width: 74px; height: 74px; border-width: 3px; }
  .recorder-record .recorder-record-inner { width: 58px; height: 58px; }
}
@media (max-width: 380px) {
  .recorder-record { width: 66px; height: 66px; border-width: 3px; }
  .recorder-record .recorder-record-inner { width: 52px; height: 52px; }
}

/* The "LANCER L'ENREGISTREMENT" label below the button is no longer needed,
   the icon speaks for itself. Hide it. */
.recorder-record-label { display: none !important; }

/* ==========================================================
   Recorder — 3-2-1 pre-countdown overlay (centered, big, animated)
   ========================================================== */
.recorder-pre-countdown {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 28vw, 320px);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.6),
               0 0 60px rgba(245, 196, 81, 0.55);
  pointer-events: none;
  user-select: none;
}
.recorder-pre-countdown[hidden] { display: none; }
.recorder-pre-countdown.flash {
  animation: recCdPop 0.95s cubic-bezier(.2, .9, .35, 1) forwards;
}
@keyframes recCdPop {
  0%   { transform: scale(0.4); opacity: 0; }
  35%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================
   Recorder — Audience interaction cue (centered rounded chip, 5s)
   ========================================================== */
.recorder-audience-cue {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%) translateY(0);
  z-index: 16;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(135deg, rgba(255, 174, 92, 0.95), rgba(245, 196, 81, 0.92));
  color: #2a1a00;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 2px solid rgba(255, 230, 180, 0.85);
  box-shadow: 0 12px 40px rgba(255, 174, 92, 0.55),
              0 0 0 6px rgba(255, 174, 92, 0.18);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.recorder-audience-cue[hidden] { display: none; }
.recorder-audience-cue.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
  animation: recAudCueAttn 1.2s ease-out;
}
.recorder-audience-cue-icon { font-size: 1.4em; }
@keyframes recAudCueAttn {
  0%   { transform: translateX(-50%) scale(0.85); }
  35%  { transform: translateX(-50%) scale(1.08); }
  60%  { transform: translateX(-50%) scale(0.98); }
  100% { transform: translateX(-50%) scale(1); }
}

@media (max-width: 480px) {
  .recorder-audience-cue {
    bottom: 28%;
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
    max-width: 86vw;
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================
   Recorder — Exercise description popup (top-right, 5s after countdown)
   ========================================================== */
.recorder-exercise-desc {
  position: absolute;
  top: 28%;
  right: 2.5%;
  max-width: 42%;
  z-index: 14;
  background: rgba(10, 6, 18, 0.86);
  border: 1px solid rgba(109, 211, 197, 0.45);
  border-radius: 18px;
  padding: 0.95rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55),
              0 0 0 4px rgba(109, 211, 197, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.recorder-exercise-desc[hidden] { display: none; }
.recorder-exercise-desc.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: recDescPop 0.45s cubic-bezier(.2,.9,.35,1);
}
@keyframes recDescPop {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(2px)   scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.recorder-exercise-desc-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .recorder-exercise-desc {
    top: 30%;
    right: 3%;
    max-width: 70%;
  }
}
@media (max-width: 480px) {
  .recorder-exercise-desc {
    top: auto;
    bottom: 25%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-6px) scale(0.96);
    max-width: 92%;
    padding: 0.8rem 1rem;
    border-radius: 14px;
  }
  .recorder-exercise-desc.show {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .recorder-exercise-desc-text { font-size: 0.88rem; }
}

/* ==========================================================
   Recorder — Description popup width/alignment override
   (must mirror canvas info block: 50vw landscape / 78vw portrait,
    same right margin = 2.5%, text size matches body text)
   ========================================================== */
.recorder-exercise-desc {
  /* Match the canvas top-right block sizing rules */
  top: 28%;
  right: 2.5%;
  /* Override the previous max-width so it matches the canvas block exactly */
  max-width: none !important;
  width: min(50vw, 720px);
}

/* Make the text the SAME size as the body text in the top-right block.
   Canvas sub size = max(13, baseDim * 0.026). Mirror that with a clamp. */
.recorder-exercise-desc-text {
  font-size: clamp(0.95rem, 2.2vw, 1.5rem) !important;
  line-height: 1.4;
}

@media (orientation: portrait) {
  .recorder-exercise-desc {
    width: min(78vw, 620px);
  }
}

/* On narrow phone screens, keep the popup top-right aligned (overrides earlier mobile rule
   that switched it to bottom-center). */
@media (max-width: 480px) {
  .recorder-exercise-desc {
    top: 28%;
    bottom: auto;
    left: auto;
    right: 2.5%;
    width: 78vw;
    max-width: none !important;
    transform: translateY(-6px) scale(0.96);
    border-radius: 16px;
  }
  .recorder-exercise-desc.show {
    transform: translateY(0) scale(1);
  }
  .recorder-exercise-desc-text {
    font-size: clamp(0.85rem, 3.4vw, 1.05rem) !important;
  }
}

/* ==========================================================
   Recorder — Description popup is now JS-positioned (follows the canvas panel).
   These rules give it a sane fallback before JS positions it, and apply only
   when no inline styles are set yet.
   ========================================================== */

.recorder-exercise-desc {
  /* Smooth transitions when JS updates top/left/width every frame */
  transition: top 0.15s ease, left 0.15s ease, width 0.15s ease,
              opacity 0.32s ease, transform 0.32s ease;
}

/* Ensure transitions don't fight the show animation in CSS */
.recorder-exercise-desc:not([hidden]) {
  /* JS sets top/left/width/right inline — no CSS overrides needed here. */
}

/* If JS hasn't run yet (very first frames), don't paint at top:28% which would
   cover the panel — keep it invisible until JS positions it. */
.recorder-exercise-desc:not(.show) {
  opacity: 0;
}

@media (orientation: portrait) and (max-width: 480px) {
  .recorder-exercise-desc-text {
    /* Ensure text wraps properly within the JS-set width on phones */
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================
   Recorder — Description popup FINAL position (no JS placement,
   safely below the top-right canvas panel for any orientation).
   ========================================================== */

/* Override every previous .recorder-exercise-desc rule with a single,
   reliable layout. */
.recorder-exercise-desc {
  position: absolute !important;
  /* Drop down enough to clear the panel even with full E + C + T text */
  top: 42% !important;
  right: 2.5% !important;
  bottom: auto !important;
  left: auto !important;
  width: min(50vw, 720px) !important;
  max-width: none !important;
  z-index: 14;
  background: rgba(10, 6, 18, 0.92);
  border: 1px solid rgba(109, 211, 197, 0.45);
  border-radius: 18px;
  padding: 0.95rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55),
              0 0 0 4px rgba(109, 211, 197, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.recorder-exercise-desc[hidden] { display: none; }
.recorder-exercise-desc.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: recDescPop 0.45s cubic-bezier(.2,.9,.35,1);
}

.recorder-exercise-desc-text {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.5rem) !important;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
}

/* Portrait: panel is wider (78%), so the popup matches */
@media (orientation: portrait) {
  .recorder-exercise-desc {
    width: min(78vw, 620px) !important;
    /* Panel is taller per width in portrait — drop the popup further down */
    top: 38% !important;
  }
}

/* On narrow phones, lock to top-right and let it span most of the width.
   Override any earlier mobile rules. */
@media (max-width: 480px) {
  .recorder-exercise-desc {
    top: 36% !important;
    right: 3% !important;
    bottom: auto !important;
    left: auto !important;
    width: 78vw !important;
    transform: translateY(-6px) scale(0.96);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
  }
  .recorder-exercise-desc.show {
    transform: translateY(0) scale(1);
  }
  .recorder-exercise-desc-text {
    font-size: clamp(0.85rem, 3.4vw, 1.05rem) !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .recorder-exercise-desc {
    top: 38% !important;
    right: 3% !important;
    width: 80vw !important;
  }
}

/* ==========================================================
   Recorder description popup — final color/positioning override
   (background matches the canvas E/C/T panel; text in cyan).
   ========================================================== */

.recorder-exercise-desc {
  background: rgba(10, 6, 18, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55) !important;
}
.recorder-exercise-desc-text {
  color: #6dd3c5 !important; /* same cyan as the EXERCICE accent on canvas */
}

/* ==========================================================
   Hide the HTML description popup entirely — the canvas-drawn version
   (recDrawDescription) is the single source of truth and ends up in the
   recorded video too.
   ========================================================== */
#recorderExerciseDesc { display: none !important; }

/* Reduce spacing between hero logo and subtitle */
@media (max-width: 480px) {
  .subtitle { margin-top: 0.2rem; font-size: 0.82rem; }
}

/* ==========================================================
   Auth screen + signup dialog + account section
   ========================================================== */
.auth-screen {
  position: relative;
  z-index: 5;
  margin: clamp(1rem, 4vw, 2rem) auto;
  padding: 0 1rem;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-screen[hidden] { display: none; }

.auth-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2rem);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}
.auth-card[hidden] { display: none; }

.auth-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0 0 1.1rem;
  text-align: center;
}

.auth-form,
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.auth-field span,
.auth-field legend {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.72rem;
}
/* Fieldset variant: used to group the DOB JJ/MM/AAAA inputs under one
   accessible group label (the <legend>). Strip default browser styling so
   it renders identically to the <label class="auth-field"> variant. */
.auth-field-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.auth-field-fieldset legend {
  padding: 0;
  margin: 0 0 0.32rem;
  display: block;
  color: var(--ink-muted);
}
/* Visually-hidden — keeps content available to screen readers / a11y
   checks but invisible on screen. Used for per-input DOB labels. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.auth-field input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.auth-field input:focus {
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(0, 0, 0, 0.5);
}
.auth-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 100, 100, 0.5);
}

/* DOB triplet — three small numeric inputs side by side (JJ / MM / AAAA).
   Friendlier than `<input type="date">`, especially for older year picking. */
.auth-dob-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.auth-dob-row input {
  flex: 0 0 auto;
  width: 3.2em;
  padding: 0.7rem 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.auth-dob-row input#authSignupDobYear,
.auth-dob-row input#authEditDobYear {
  /* 4-digit year + padding — comfortably wide for "2010"–"AAAA" placeholder */
  width: 6em;
}
.auth-dob-row .auth-dob-sep {
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem !important;
}

.auth-error {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 60, 80, 0.12);
  border: 1px solid rgba(255, 100, 110, 0.4);
  color: #ffd0d4;
  font-size: 0.85rem;
}
.auth-error[hidden] { display: none; }

.auth-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  font-size: 0.95rem;
  min-height: 48px;
  transition: transform 0.1s, box-shadow 0.18s, filter 0.18s;
}
.auth-btn:hover:not(:disabled) { transform: translateY(-1px); }
.auth-btn:active:not(:disabled) { transform: translateY(0); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--bg-deep);
  box-shadow: 0 6px 22px rgba(245, 196, 81, 0.35);
}
.auth-btn-primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 8px 28px rgba(245, 196, 81, 0.5); }

.auth-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.auth-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }

.auth-btn-danger {
  background: linear-gradient(135deg, #ff3b3b, #b91c4d);
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 47, 92, 0.4);
}

.auth-link {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--gold-soft);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.3rem 0.5rem;
  align-self: center;
}
.auth-link:hover { color: var(--gold); }

.auth-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.auth-divider span {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

/* Pending screen */
.auth-pending { text-align: center; }
.auth-pending-icon { font-size: 2.6rem; margin-bottom: 0.4rem; }
.auth-pending-msg {
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.auth-pending-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

/* Signup dialog: reuses .themes-dialog skeleton; the form inside replaces dlg-body styling.
   The form also places dlg-actions correctly. */
.signup-dialog .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.signup-dialog .signup-form .dlg-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.signup-dialog .dlg-actions {
  justify-content: stretch;
}
.signup-dialog .dlg-actions .auth-btn {
  flex: 1;
}

@media (max-width: 480px) {
  .signup-dialog .form-row { grid-template-columns: 1fr; }
}

/* "Personnaliser mes impros" link inside the Settings dialog —
   reuses .auth-btn .auth-btn-secondary, just full-width. */
.settings-personalize-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

/* Account section (inside settings) — also has class .dlg-field which
   imposes `display: flex; align-items: center` (great for the Langue
   row, but it would lay out the section's h3 / p / actions div as a
   single horizontal row). Force a vertical block flow here so the
   account name, info and CTA buttons stack one below the other. */
.auth-account-section {
  display: block !important;
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.auth-account-section h3 {
  margin: 0 0 0.4rem;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}
.auth-account-info {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  /* Definition list: each .account-row holds dt (label) + dd (value).
     Two-column layout — label aligned left muted, value aligned left
     in the readable ink color. Empty rows hide themselves once the
     value has been populated (see :empty rule below). */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.auth-account-info .account-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.7rem;
  align-items: baseline;
}
.auth-account-info dt {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.auth-account-info dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}
/* If the value is missing (e.g. legacy profile w/o nom_scene) hide
   the whole row instead of showing a label with nothing next to it. */
.auth-account-info .account-row:has(dd:empty) { display: none; }
@media (max-width: 480px) {
  .auth-account-info .account-row {
    grid-template-columns: 1fr;
    gap: 0.05rem;
  }
}
.auth-account-actions {
  display: flex;
  flex-direction: column;   /* stack buttons vertically — name, info, then one CTA per row */
  gap: 0.5rem;
}
.auth-account-actions .auth-btn {
  width: 100%;
  flex: 0 0 auto;
}

/* Delete confirmation dialog */
#deleteAccountDialog .auth-delete-warning {
  color: var(--ink);
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
#deleteAccountDialog input[type="text"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-align: center;
}
#deleteAccountDialog input[type="text"]:focus {
  border-color: rgba(255, 100, 110, 0.6);
  outline: none;
}