/* ============================================================================
   BUSINESS CLASH — style.css
   ============================================================================ */

:root {
  --bg: #0b1830;
  --bg-alt: #10213e;
  --panel: #142a4d;
  --panel-border: #24406e;
  --text: #eef3fb;
  --muted: #9db0cc;
  --gold: #e8c66b;
  --gold-dark: #b6963f;
  --green-ok: #3ddc84;
  --red-bad: #ff5c6c;
  --rose: #ff4fa3;
  --yellow: #ffc93c;
  --greenc: #3ddc84;
  --blue: #4f8cff;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, var(--bg-top, #132a4e) 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

.hidden { display: none !important; }

#app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 18px 40px;
}

/* ------------------------------- Topbar ---------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Retour utilisateur (mofification_parties_30-09.pdf, points 4 et 6) :
     deux boutons de plus dans le bandeau (Règles, Niveaux supérieurs) — le
     bandeau peut désormais passer sur 2 lignes sur petit écran plutôt que
     d'écraser le logo/titre. */
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 6px 4px 18px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 52px; height: 52px; border-radius: 50%; box-shadow: var(--shadow); }
.brand-text h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--rose), var(--yellow), var(--greenc), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.tagline { margin: 2px 0 0; font-size: 0.78rem; color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn-rules, .btn-premium-teaser, .btn-fullscreen, .btn-leaderboard {
  padding: 6px 12px;
  font-size: 0.76rem;
  white-space: nowrap;
}
.btn-premium-teaser { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, var(--panel-border) 45%); }
.beta-badge {
  background: var(--gold);
  color: #2a2205;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* Retour utilisateur (mofification_parties.pdf, point 6) : 2 boutons
   drapeau toujours visibles, façon Culture Clash — un tricolore bleu/blanc/
   rouge pour le français, un bleu/rouge pour l'anglais. Le bouton de la
   langue active est mis en valeur par un liseré doré. */
.lang-switch { display: flex; gap: 8px; }
.lang-flag-btn {
  position: relative;
  width: 46px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.lang-flag-btn:hover { opacity: 0.85; }
.lang-flag-btn:active { transform: scale(0.96); }
.lang-flag-btn.active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232,198,107,0.25);
}
.lang-flag-btn .flag-stripe { flex: 1; height: 100%; }
.lang-flag-fr .flag-stripe:nth-child(1) { background: #002395; }
.lang-flag-fr .flag-stripe:nth-child(2) { background: #ffffff; }
.lang-flag-fr .flag-stripe:nth-child(3) { background: #ed2939; }
.lang-flag-btn .flag-half { flex: 1; height: 100%; }
.lang-flag-en .flag-half:nth-child(1) { background: #00247d; }
.lang-flag-en .flag-half:nth-child(2) { background: #cf142b; }
.lang-flag-code {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.55);
  padding: 1px 0 2px;
}

/* ------------------------------- Buttons ---------------------------------- */

.btn {
  font: inherit;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.08s ease, filter 0.15s ease, opacity 0.15s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }

.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #221a03; }
.btn-outline { background: transparent; border: 1px solid var(--panel-border); color: var(--text); width: 100%; margin-top: 8px; }
.btn-ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--panel-border); }
.btn-collect { background: linear-gradient(135deg, var(--green-ok), #1fa35c); color: #06210f; width: 100%; }
.btn-collect.attention { box-shadow: 0 0 0 3px rgba(61,220,132,0.35); animation: pulse 1.1s infinite; }
.btn-lg { width: 100%; padding: 13px; font-size: 1.02rem; margin-top: 14px; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0.45); }
  50% { box-shadow: 0 0 0 8px rgba(61,220,132,0); }
}

/* ------------------------------- Cards / panels ---------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.panel-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 8px; }

.muted { color: var(--muted); }
.disclaimer { font-size: 0.72rem; color: var(--muted); margin-top: 16px; border-top: 1px dashed var(--panel-border); padding-top: 10px; }

/* Retour utilisateur (mofification_parties.pdf, point 5) : ligne compacte
   listant les effets de carte actifs/différés, au-dessus du journal — le
   détail s'ouvre dans une popup au clic, pour ne pas encombrer l'écran. */
.active-effects-btn {
  display: block;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.active-effects-btn:hover:not(:disabled) { filter: brightness(1.15); }
.active-effects-btn:disabled { cursor: default; opacity: 0.7; }
.active-effects-btn.attention {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--panel-border) 40%);
  box-shadow: 0 0 0 2px rgba(232,198,107,0.2);
}
.active-effects-list { margin: 0; padding-left: 20px; text-align: left; }
.active-effects-list li { margin-bottom: 8px; line-height: 1.35; }

.rules-modal-body { text-align: left; max-height: 60vh; overflow-y: auto; }
.rules-modal-body p { margin: 0 0 12px; line-height: 1.4; }
.rules-modal-body p:last-child { margin-bottom: 0; }

/* Retour utilisateur : lien Confidentialité en bas de page, comme sur
   Culture Clash — discret, centré, sous le contenu du jeu. */
.site-footer {
  text-align: center;
  padding: 22px 0 6px;
  margin-top: 12px;
  border-top: 1px solid var(--panel-border);
}
.site-footer a {
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: none;
}
.site-footer a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------- Screens ---------------------------------- */

.screen { display: block; }
#screen-start, #screen-circuits { display: flex; justify-content: center; padding: 30px 10px; }
.start-card, #screen-circuits .card { max-width: 560px; width: 100%; text-align: center; }
.start-card h2, #screen-circuits h2 { margin-top: 0; }

#playerNameInput {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 1rem;
  margin: 10px 0 4px;
}
#playerNameLabel { display: block; text-align: left; font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* ------------------------------- Circuit choice cards ---------------------------------- */

.circuit-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.circuit-choice {
  border-radius: var(--radius);
  padding: 14px;
  border: 2px solid var(--panel-border);
  background: var(--bg-alt);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.circuit-choice:hover:not(.disabled) { transform: translateY(-2px); }
.circuit-choice.disabled { opacity: 0.4; cursor: not-allowed; }
.circuit-choice h3 { margin: 0 0 6px; font-size: 1rem; }
.circuit-choice .stat-line { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); margin: 2px 0; }
.circuit-choice .stat-line b { color: var(--text); }
.circuit-choice .slots { font-size: 0.72rem; margin-top: 8px; font-weight: 700; }

/* Rappel du capital de départ — retour de playtest #3 : certains joueurs ne
   font pas spontanément le lien entre ce capital et l'investissement de
   départ demandé par chaque circuit. */
.starting-capital-hint { margin-top: -6px; font-weight: 700; color: var(--gold); }

/* ------------------------------- Turn banner ---------------------------------- */

.turn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.turn-banner.mine { background: linear-gradient(90deg, rgba(232,198,107,0.18), transparent); border-color: var(--gold); }
.turn-banner.paused { background: linear-gradient(90deg, rgba(232,198,107,0.25), rgba(232,198,107,0.05)); border-color: var(--gold); color: var(--gold); }
.turn-banner-name { font-weight: 800; }
/* Bug corrigé (retour utilisateur, capture vidéo smartphone) : le texte du
   tour et les boutons Pause/Quitter se chevauchaient et devenaient
   illisibles sur petit écran. Cause : #turnBannerText était centré sur
   TOUTE la largeur de la bannière tandis que .turn-banner-actions était
   positionné en `absolute` par-dessus — sur un écran large les deux ne se
   croisaient jamais, mais sur un écran de smartphone (~360-420px) le texte
   centré déborde sous les boutons. Remplacé par un vrai layout flex : le
   texte prend l'espace restant (avec troncature "…" si nécessaire) et les
   boutons gardent leur propre espace réservé, sans jamais se superposer. */
#turnBannerText {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.turn-banner-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}
.btn-pause, .btn-quit-game, .btn-speed {
  padding: 6px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ------------------------------- Pause : simple bandeau discret ---------------------------------- */
/* Retour de playtest #2 : la pause ne doit plus recouvrir/griser le reste de
   l'écran (plateau, journal...) — juste un petit rappel sous la bannière de
   tour ; tout reste visible et lisible normalement pendant la pause. */

.pause-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gold);
  background: rgba(232,198,107,0.08);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 6px 10px;
  margin: -6px 0 14px;
}

/* ------------------------------- Game layout ---------------------------------- */
/* Retour de playtest #3 : le bouton "Lancer le dé" doit être visible sans
   scroll juste sous le bandeau de tour, et le cadre trésorerie doit suivre
   directement le circuit du joueur plutôt que d'être relégué en bas de la
   colonne latérale. #screen-game est donc un simple flux vertical
   (bannière → indice pause → dé → contenu principal) ; seul #gameMain,
   lui, se scinde en deux colonnes. */

#screen-game.screen {
  display: flex;
  flex-direction: column;
}

/* Dé bien visible, juste sous la bannière de tour, avant tout le reste. */
.dice-panel {
  text-align: center;
  max-width: 460px;
  margin: 0 auto 14px;
}

.game-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}

.boards-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.other-circuits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ------------------------------- Circuit board loop ---------------------------------- */

.circuit-board {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 3px solid var(--panel-border);
  position: relative;
}
.circuit-board.rose { border-color: var(--rose); --cc: var(--rose); --cc-soft: #7a2a52; }
.circuit-board.yellow { border-color: var(--yellow); --cc: var(--yellow); --cc-soft: #7a5f1c; }
.circuit-board.green { border-color: var(--greenc); --cc: var(--greenc); --cc-soft: #1c6b45; }
.circuit-board.blue { border-color: var(--blue); --cc: var(--blue); --cc-soft: #2c4c8c; }

.circuit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 800;
}
.circuit-header .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
.circuit-header .slots-note { font-weight: 400; color: var(--muted); font-size: 0.72rem; }

/* Retour utilisateur (modifications1.pdf, playtest #4) : trésorerie/résultat
   des concurrents sous leur circuit, consultable en pause (cf. ui.js). */
.circuit-finance-panel {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--panel-border);
  font-size: 0.76rem;
}
.circuit-finance-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 2px 0; }
.circuit-finance-name { font-weight: 700; margin-right: 4px; }
.circuit-finance-row .pos { color: var(--green-ok); }
.circuit-finance-row .neg { color: var(--red-bad); }

/* Retour utilisateur (mofification_parties.pdf, point 7) : sur grand écran
   (PC), les cases grandissent (grille fluide en 1fr) mais les icônes restaient
   à taille fixe en rem, donc minuscules par rapport aux cases — alors que sur
   smartphone la proportion était correcte. On déclare .track-grid comme
   "container" de taille (inline-size) pour que les icônes/valeurs des cases
   soient dimensionnées en unités cqw, c'est-à-dire proportionnellement à la
   largeur RÉELLE du plateau rendu, quelle que soit la mise en page (colonne
   principale pleine largeur sur PC, grille 1 ou 2 colonnes pour les circuits
   adverses, empilement vertical sur mobile). */
.track-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 5px;
  aspect-ratio: 7 / 5;
  container-type: inline-size;
  container-name: track;
}

/* Chaque plateau est teinté dans SA couleur de circuit (comme le plateau
   physique original) : toutes les cases d'un même circuit partagent la même
   teinte vive, seule la nuance et l'icône distinguent leur nature — retour
   de playtest : "l'entourage colorié ne suffit pas, il manque de gaieté". */
.square {
  border-radius: 7px;
  background: color-mix(in srgb, var(--cc) 46%, var(--bg-alt) 54%);
  border: 1px solid color-mix(in srgb, var(--cc) 65%, black 10%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.62rem;
  color: var(--text);
  min-height: 0;
  overflow: visible;
  transition: background 0.15s ease;
}
.square.type-SALE {
  background: color-mix(in srgb, var(--cc) 72%, var(--bg-alt) 28%);
}
.square.type-EXT_SERVICES,
.square.type-SALARIES,
.square.type-ADVERTISING,
.square.type-TAXES {
  background: color-mix(in srgb, var(--cc-soft) 78%, var(--bg-alt) 22%);
}
/* Retour utilisateur (modifications1.pdf, playtest #4) : la case DÉPART est
   remplacée par une carte Événement (E4) sur les 4 circuits — elle doit donc
   avoir exactement le même style qu'une case CARTE (fond doré), plus de
   mise en valeur distincte façon « case départ ». */
.square.type-CARD,
.square.type-START {
  background: color-mix(in srgb, var(--gold) 48%, var(--bg-alt) 52%);
  border-color: color-mix(in srgb, var(--gold) 70%, black 10%);
}

.square .icon {
  pointer-events: none;
  /* cqw = proportion de la largeur RÉELLE du plateau (voir .track-grid) :
     l'icône grandit avec la case sur grand écran au lieu de rester fixe. Les
     bornes clamp() évitent les extrêmes (mini-plateaux très étroits, ou très
     grands écrans). */
  font-size: clamp(0.85rem, 6.2cqw, 4.5rem);
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.square .value {
  pointer-events: none;
  font-size: clamp(0.46rem, 2.6cqw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.square .pawns {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1px;
  padding: 2px;
  pointer-events: none;
}
/* Pion « façon meeple », vu légèrement de biais (~45°) plutôt qu'un simple
   point plat vu du dessus — retour de playtest #2. Forme en goutte/quille,
   dégradé pour un effet de volume, plus une ombre elliptique décalée qui
   simule un point de vue en angle. */
.pawn {
  /* Même logique que .square .icon (mofification_parties.pdf, point 7) : le
     pion grandit lui aussi avec la case sur grand écran plutôt que de rester
     figé en pixels. */
  width: clamp(16px, 5.2cqw, 60px);
  height: clamp(17px, 5.7cqw, 66px);
  position: relative;
  border-radius: 55% 55% 46% 46% / 62% 62% 38% 38%;
  border: 2px solid #06111f;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.5),
    3px 5px 0 -1px rgba(0,0,0,0.35);
  font-size: clamp(8px, 2.4cqw, 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #06111f;
  z-index: 2;
  transition: transform 0.12s ease;
}
.pawn::after {
  /* petite ombre au sol, décalée, pour suggérer la vue en angle */
  content: "";
  position: absolute;
  left: 15%;
  bottom: -5px;
  width: 70%;
  height: 5px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  filter: blur(1px);
  z-index: -1;
}
.pawn.human { background: linear-gradient(155deg, #fff3cf, var(--gold) 55%, var(--gold-dark)); }
.pawn.ai0 { background: linear-gradient(155deg, #eafeff, #b3f1ff 55%, #6fd3e8); }
.pawn.ai1 { background: linear-gradient(155deg, #ffe3f8, #ffb3ec 55%, #e37fcb); }
.pawn.ai2 { background: linear-gradient(155deg, #eeffda, #c9ff9e 55%, #93d666); }
.pawn.eliminated { opacity: 0.25; filter: grayscale(1); }
.pawn.hop { animation: pawnHop 0.28s ease; }
@keyframes pawnHop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

.track-center {
  grid-column: 2 / 7;
  grid-row: 2 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(6,14,28,0.55);
  border-radius: 12px;
  padding: 8px;
}
.center-logo {
  width: 44%;
  max-width: 92px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.center-name {
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.4px;
}

/* ------------------------------- Side panel ---------------------------------- */

.side-panel { display: flex; flex-direction: column; }

.dice-timer-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.dice-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--green-ok), var(--gold), var(--red-bad)); transition: width 1s linear; }
.dice-row { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* Dé blanc en 3D, points dessinés en CSS (grille 3x3) — retour de playtest
   #2 : reste un vrai dé blanc en permanence, seuls les points changent. */
.dice-face {
  width: 54px;
  height: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 8px;
  background: linear-gradient(155deg, #ffffff, #d8dee8);
  border-radius: 12px;
  border: 1px solid #b9c2d0;
  box-shadow: 0 3px 0 #b9c2d0, 0 5px 10px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.9);
}
.dice-face.rolling { animation: shake 0.4s infinite; }
@keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} }

.dice-face .pip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4864, #0b1830 75%);
  opacity: 0;
  align-self: center;
  justify-self: center;
  transform: scale(0.9);
  transition: opacity 0.12s ease;
}
.dice-face .p1 { grid-area: 1 / 1; }
.dice-face .p2 { grid-area: 1 / 2; }
.dice-face .p3 { grid-area: 1 / 3; }
.dice-face .p4 { grid-area: 2 / 1; }
.dice-face .p5 { grid-area: 2 / 2; }
.dice-face .p6 { grid-area: 2 / 3; }
.dice-face .p7 { grid-area: 3 / 1; }
.dice-face .p8 { grid-area: 3 / 2; }
.dice-face .p9 { grid-area: 3 / 3; }

.dice-face[data-value="1"] .p5 { opacity: 1; }
.dice-face[data-value="2"] .p1, .dice-face[data-value="2"] .p9 { opacity: 1; }
.dice-face[data-value="3"] .p1, .dice-face[data-value="3"] .p5, .dice-face[data-value="3"] .p9 { opacity: 1; }
.dice-face[data-value="4"] .p1, .dice-face[data-value="4"] .p3,
.dice-face[data-value="4"] .p7, .dice-face[data-value="4"] .p9 { opacity: 1; }
.dice-face[data-value="5"] .p1, .dice-face[data-value="5"] .p3, .dice-face[data-value="5"] .p5,
.dice-face[data-value="5"] .p7, .dice-face[data-value="5"] .p9 { opacity: 1; }
.dice-face[data-value="6"] .p1, .dice-face[data-value="6"] .p3, .dice-face[data-value="6"] .p4,
.dice-face[data-value="6"] .p6, .dice-face[data-value="6"] .p7, .dice-face[data-value="6"] .p9 { opacity: 1; }

.finance-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.88rem; }
.finance-row strong { font-variant-numeric: tabular-nums; }
.finance-actions { margin-top: 8px; }
.loan-info { font-size: 0.76rem; color: var(--muted); background: var(--bg-alt); border-radius: 6px; padding: 6px 8px; margin-top: 8px; }

.reactions-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.reaction-btn { font-size: 1.2rem; background: var(--bg-alt); border: 1px solid var(--panel-border); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.reaction-btn:hover { transform: scale(1.15); }

.players-list { display: flex; flex-direction: column; gap: 6px; }
.player-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; padding: 5px 7px; border-radius: 6px; background: var(--bg-alt); }
.player-row .pname { display: flex; align-items: center; gap: 6px; }
.player-row .dot { width: 9px; height: 9px; border-radius: 50%; }
.player-row.active { outline: 1px solid var(--gold); }
.player-row.dead { opacity: 0.4; text-decoration: line-through; }

.log-panel { max-height: 220px; display: flex; flex-direction: column; }
.log-list { overflow-y: auto; font-size: 0.74rem; color: var(--muted); display: flex; flex-direction: column-reverse; gap: 3px; max-height: 190px; }
.log-list .log-entry { border-bottom: 1px dashed rgba(255,255,255,0.06); padding-bottom: 3px; }

/* ------------------------------- Modal ---------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,10,22,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  text-align: center;
  animation: modalIn 0.2s ease;
}
@keyframes modalIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-box h3 { margin-top: 0; }
.modal-box .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-box .modal-actions .btn { flex: 1; }

/* Bandeau d'identité du joueur en train de jouer sa carte — retour de
   playtest : "on ne comprend plus qui joue, ça va trop vite". Bien visible,
   coloré selon le circuit du joueur (rose/jaune/vert/bleu). */
.modal-player-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--panel-border);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 10px;
}
.modal-player-dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
.modal-player-name { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3px; }

.modal-family-tag {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: var(--gold);
}
.modal-pedagogy { font-size: 0.76rem; color: var(--muted); margin-top: 12px; border-top: 1px dashed var(--panel-border); padding-top: 10px; }
.modal-timer { font-size: 1.05rem; font-weight: 800; color: var(--gold); margin-top: 10px; }
.modal-timer-hint { font-size: 0.68rem; color: var(--muted); margin-top: 3px; }

/* Retour utilisateur (modifications1.pdf, playtest #4) : journal complet
   consultable depuis l'écran de fin de partie, avant "Nouvelle partie" /
   "Terminer la partie" — liste défilante (peut contenir jusqu'à 200
   évènements, cf. G.log côté moteur). */
.game-log-modal-list {
  text-align: left;
  max-height: 55vh;
  overflow-y: auto;
  margin-top: 12px;
  padding: 4px 10px;
  background: var(--bg-alt);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8rem;
}
.game-log-modal-list .log-entry { border-bottom: 1px dashed rgba(255,255,255,0.06); padding: 5px 0; }
.game-log-modal-list .log-entry:last-child { border-bottom: none; }

.ranking-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.86rem; }
.ranking-table th, .ranking-table td { padding: 7px 6px; border-bottom: 1px solid var(--panel-border); text-align: left; }
.ranking-table tr.me td { color: var(--gold); font-weight: 700; }

/* ------------------------------- Classement général (Supabase) ---------------------------------- */

.btn-leaderboard { color: var(--gold); }
.lb-publish { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--panel-border); border-radius: var(--radius-md, 8px); text-align: center; }
.lb-publish p { margin: 0 0 10px; font-size: 0.82rem; }
.lb-publish .btn { width: 100%; }
.lb-ok { color: var(--green-ok); font-weight: 700; }
.lb-err { color: var(--red-bad); font-size: 0.85rem; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.lb-tab {
  padding: 5px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  background: transparent; color: var(--tab-color); border: 2px solid var(--panel-border);
}
.lb-tab.active { border-color: var(--tab-color); background: color-mix(in srgb, var(--tab-color) 18%, transparent); }
.lb-body { min-height: 80px; }
.lb-scroll { max-height: 55vh; overflow: auto; }
.lb-table .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.lb-table { font-size: 0.8rem; }
.lb-table th, .lb-table td { padding: 7px 4px; }
.lb-table .lb-nowrap { white-space: nowrap; }
.lb-table .lb-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------- Floating reactions ---------------------------------- */

.reaction-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }

/* ------------------------------- Révélation de case / encart vente ---------------------------------- */

.square-reveal {
  position: fixed;
  /* Retour de playtest #3 : le dé est désormais affiché juste sous la
     bannière de tour (au lieu d'être dans la colonne latérale) — l'encart
     de révélation doit donc être repoussé plus bas pour ne plus le
     chevaucher. */
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  pointer-events: auto;
  cursor: pointer;
  min-width: 230px;
  max-width: 90vw;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  animation: revealIn 0.22s ease;
}
@keyframes revealIn { from { transform: translateX(-50%) translateY(-10px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.square-reveal-player { font-weight: 800; font-size: 0.92rem; margin-bottom: 4px; }
.square-reveal-icon { font-size: 2rem; line-height: 1; margin-bottom: 2px; }
.square-reveal-label { font-weight: 700; font-size: 0.95rem; }
.square-reveal-amount { font-size: 0.82rem; color: var(--red-bad); margin-top: 2px; font-weight: 600; }
.sale-summary { min-width: 280px; max-width: 340px; text-align: left; }
.sale-summary .square-reveal-player { text-align: center; }
.sale-summary .stat-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; justify-content: space-between; font-size: 0.85rem; padding: 4px 0; }
.sale-summary .stat-line .muted { flex-basis: 100%; font-size: 0.72rem; text-align: right; }
.sale-summary-units { text-align: center; font-size: 0.78rem; color: var(--muted); margin: 2px 0 8px; }
.sale-summary-total { border-top: 1px dashed var(--panel-border); margin-top: 4px; padding-top: 8px; font-weight: 700; }
.square-reveal .pos { color: var(--green-ok); }
.square-reveal .neg { color: var(--red-bad); }
.floating-emoji {
  position: absolute;
  bottom: 40px;
  right: 60px;
  font-size: 2rem;
  animation: floatUp 1.6s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; transform: translateY(-10px) scale(1.1); }
  100% { transform: translateY(-160px) scale(1); opacity: 0; }
}

/* ------------------------------- Responsive ---------------------------------- */

@media (max-width: 980px) {
  .game-main { grid-template-columns: 1fr; }
  .other-circuits-grid { grid-template-columns: 1fr; }
  .circuit-choices { grid-template-columns: 1fr; }
}

/* Bandeau de tour sur smartphone : au lieu de tronquer le texte du tour
   (souvent plus long qu'un nom de circuit, ex. « Tour 5 — IA Nexus ») pour
   le faire tenir à côté des boutons, on passe en deux lignes empilées —
   texte du tour au-dessus, actions Pause/Quitter en dessous — toujours
   entièrement lisibles, sans chevauchement. */
@media (max-width: 480px) {
  .turn-banner {
    flex-wrap: wrap;
    justify-content: center;
  }
  #turnBannerText {
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .turn-banner-actions {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Fin de partie : 3 boutons (journal, quitter, nouvelle partie) — le
   dernier occupe toute la ligne pour rester lisible sur téléphone. */
.modal-box .modal-actions { flex-wrap: wrap; }
.modal-box .modal-actions .btn-full-row { flex-basis: 100%; }

/* Écran d'au revoir (bouton « Quitter ») */
.farewell { text-align: center; }
.farewell-logo { width: 96px; height: 96px; border-radius: 50%; margin: 4px auto 8px; display: block; }
.farewell h3 { margin-bottom: 6px; }
.farewell-promo { margin-top: 16px; padding: 14px; border: 1px dashed var(--gold, #e3c36a); border-radius: 12px; }
.farewell-promo h4 { margin: 0 0 6px; color: var(--gold, #e3c36a); }

/* Profil joueur sans email (17/10) */
.profile-badge { margin: -4px 0 12px; color: var(--gold, #e3c36a); font-weight: 600; }
.lvl-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .75em; font-weight: 700; line-height: 1.6; background: rgba(227,195,106,.18); color: var(--gold, #e3c36a); vertical-align: middle; }
.lb-pseudo-input { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--bg-alt); color: var(--text); font-size: 1rem; margin: 8px 0; }

/* Tableaux de classement sur téléphone (17/10) : montants insécables, donc
   colonnes plus serrées pour que tout tienne sans défilement horizontal. */
@media (max-width: 480px) {
  .modal-box .ranking-table th,
  .modal-box .ranking-table td { padding: 6px 4px; font-size: 0.8rem; white-space: nowrap; }
  .modal-box .ranking-table td:nth-child(2) { white-space: normal; }
  .modal-box .ranking-table th { white-space: normal; }
}

/* Multijoueur (17/10) : couleurs de pions supplémentaires (jusqu'à 8 joueurs) */
.pawn.ai3 { background: linear-gradient(155deg, #fff0e0, #ffc58a 55%, #e3954a); }
.pawn.ai4 { background: linear-gradient(155deg, #efe6ff, #c9b3ff 55%, #9a7ee3); }
.pawn.ai5 { background: linear-gradient(155deg, #e6fff5, #9effd6 55%, #4fcf9c); }
.pawn.ai6 { background: linear-gradient(155deg, #f2f2f2, #cfcfcf 55%, #9a9a9a); }
.mp-paused-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .72em; font-weight: 700; background: rgba(255,120,120,.18); color: #ff9c9c; }

/* Écrans multijoueur (17/10) */
.mp-home-btn { width: 100%; margin-top: 10px; }
.mp-card { text-align: left; }
.mp-card h2, .mp-card > p { text-align: center; }
.mp-card h3 { margin: 18px 0 8px; font-size: 1rem; }
.mp-section { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mp-label { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.mp-input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--bg-alt); color: var(--text); font-size: 1rem; }
.mp-code-input { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-weight: 700; }
.mp-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 4px 0; }
.mp-or { text-align: center; color: var(--muted); margin: 14px 0 0; }
.mp-code-box { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.mp-code { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.25em; color: var(--gold); }
.mp-players { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mp-player-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--bg-alt); }
.mp-player-row .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.mp-circuits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-circuit-btn { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; border: 2px solid var(--c); background: var(--bg-alt); color: var(--text); text-align: left; cursor: pointer; font-size: 0.8rem; }
.mp-circuit-btn.selected { box-shadow: 0 0 0 3px var(--c) inset; background: color-mix(in srgb, var(--c) 18%, var(--bg-alt)); }
.mp-circuit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-host-controls { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mp-wait { text-align: center; margin-top: 14px; }
.mp-card .btn-ghost { display: block; margin: 14px auto 0; }
.btn-pause.attention { background: var(--gold); color: #1a1a1a; }

/* ------------------------- Niveaux supérieurs (phase A, 19/10) ------------------------- */
.rep-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.rep-nav-btn { flex: 1 1 30%; min-width: 0; font-size: 0.78rem; padding: 7px 6px; }
.fin-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.84rem; }
.fin-table td { padding: 5px 6px; border-bottom: 1px solid var(--panel-border); }
.fin-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-table tr.sub td:first-child { padding-left: 16px; color: var(--muted); }
.fin-table tr.total td { font-weight: 700; }
.fin-table tr.key td { font-weight: 800; color: var(--gold); border-bottom: 2px solid var(--gold); }
.fin-table tr.ratio td { font-style: italic; color: var(--muted); }
.fin-table tr.head td { font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; padding-top: 12px; color: var(--muted); }
.rep-locked { margin: 14px 0; padding: 16px; border: 1px dashed var(--gold); border-radius: var(--radius-md, 8px); text-align: center; }
.rep-locked h4 { margin: 0 0 8px; color: var(--gold); }
.rep-locked p { margin: 0; font-size: 0.86rem; }
.tester-tag { margin: -6px 0 12px; font-size: 0.75rem; font-weight: 700; color: var(--bg, #111); background: var(--gold, #e3c36a); display: inline-block; padding: 2px 10px; border-radius: 999px; }
.lb-crit-tabs { margin-bottom: 2px; }
.lb-crit-note { font-size: 0.74rem; margin: 2px 0 6px; }
#reportsBtn { margin-top: 6px; }
.fin-table td:first-child { text-align: left; }
.cash-shortfall { border-color: var(--red-bad) !important; background: linear-gradient(160deg, rgba(255,80,80,0.25), var(--panel) 65%) !important; cursor: pointer; }
.cash-shortfall .square-reveal-label { color: var(--red-bad); }
.cash-shortfall-msg { font-size: 0.84rem; margin-top: 6px; line-height: 1.35; }
.partial-sale-box { position: static; transform: none; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: var(--radius-md, 8px); text-align: left; }
.choice-options { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.choice-option { border: 1px solid var(--panel-border); border-radius: var(--radius-md, 8px); padding: 10px 12px; text-align: left; }
.choice-option h4 { margin: 0 0 4px; color: var(--gold); }
.choice-option p { margin: 0 0 6px; font-size: 0.84rem; }
.choice-option .choice-va { font-weight: 700; font-size: 0.8rem; }
.choice-option .btn { width: 100%; }
.choice-option .choice-va .neg { color: var(--red-bad); }
.choice-option .choice-va .pos { color: var(--green-ok); }

/* ---------------- Couleurs de fond par niveau (20/10) ----------------
   N1 bleu profond (inchangé). Teintes choisies loin du rose, jaune, vert et
   bleu des circuits pour que le plateau reste lisible. */
html[data-level="2"] { --bg: #170f33; --bg-alt: #1e1542; --panel: #261b52; --panel-border: #43337f; --muted: #b3a8d6; --bg-top: #2b1d5c; }
html[data-level="3"] { --bg: #2a0c18; --bg-alt: #351020; --panel: #42152a; --panel-border: #6e2a46; --muted: #d4a9b8; --bg-top: #4d1830; }
html[data-level="4"] { --bg: #0f0e12; --bg-alt: #17151c; --panel: #1f1c24; --panel-border: #5a4a22; --muted: #c9bc98; --bg-top: #2e2614; }
html[data-level="4"] .modal-box, html[data-level="4"] .panel { box-shadow: 0 0 0 1px rgba(232,198,107,0.18), var(--shadow); }

.lvl-offers { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; text-align: left; }
.lvl-offer { border: 1px solid var(--panel-border); border-radius: var(--radius-md, 8px); padding: 8px 12px; }
.lvl-offer p { margin: 4px 0 0; font-size: 0.82rem; }
.lvl-offer-head { display: flex; justify-content: space-between; gap: 8px; }
.lvl-offer-head span { color: var(--gold); font-weight: 800; white-space: nowrap; }
.lvl-offer.unlocked { opacity: 0.75; }
.lvl-offer.unlocked .lvl-offer-head span { color: var(--green-ok); }
.lvl-offer.next { border-color: var(--gold); }
.lvl-offer-2 { border-left: 5px solid #6b52c8; }
.lvl-offer-3 { border-left: 5px solid #b0406c; }
.lvl-offer-4 { border-left: 5px solid #e8c66b; }
.lvl-bundle { border: 2px dashed var(--gold); }
.lvl-req { font-size: 0.74rem !important; }
.mp-room-level { margin: 0 0 8px; text-align: center; }

/* ------------------------------- Vitesse des popups (22/10) ---------------------------------- */
.speed-choice { margin: 14px 0 6px; text-align: left; }
.speed-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.speed-options { display: flex; gap: 8px; }
.speed-option {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.25;
  cursor: pointer;
}
.speed-option.active { border-color: var(--gold); background: rgba(232,198,107,0.16); color: var(--gold); font-weight: 700; }
.speed-hint { font-size: 0.76rem; margin: 6px 0 4px; }
@media (max-width: 420px) { .speed-options { flex-direction: column; } }

/* Barre de temps restant sous chaque popup temporisé ; elle s'arrête
   (et le popup s'éclaircit) tant que le doigt reste appuyé. */
.popup-timer { height: 3px; margin: 8px -4px -4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.popup-timer-fill { height: 100%; width: 100%; background: var(--gold); }
.popup-held .popup-timer-fill { background: var(--muted); }
.popup-held { outline: 2px dashed var(--gold); outline-offset: 2px; }
/* Appui long sur un popup = pause : pas de sélection de texte ni de menu. */
.square-reveal, .modal-box.popup-timed { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Achats des niveaux (04/11) */
.lvl-buy-btn { display: block; width: 100%; margin-top: 8px; }
.lvl-buy-btn:disabled, .lvl-restore-btn:disabled { opacity: 0.5; cursor: default; }
.lvl-status { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius-md, 8px); background: rgba(255, 255, 255, 0.06); font-size: 0.85rem; }
.lvl-status.hidden { display: none; }
.lvl-note { font-size: 0.75rem; margin: 6px 0; }
.lvl-restore-btn, .lvl-store-link { display: block; width: 100%; margin: 6px 0; text-align: center; text-decoration: none; box-sizing: border-box; }
.lb-locked { text-align: center; padding: 12px 4px; }
.lb-locked .btn { margin-top: 8px; }

/* Export du journal (13/11) */
.jrn-export { border: 1px solid var(--panel-border); border-radius: var(--radius-md, 8px); padding: 10px 12px; margin: 10px 0; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.jrn-export.locked { opacity: 0.9; }
.jrn-export-title { margin: 0; }
.jrn-export .btn { width: 100%; }
.jrn-export-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.jrn-export select { padding: 8px; border-radius: 8px; font-size: 0.95rem; }
.jrn-status { margin: 0; font-size: 0.82rem; }

/* Profil, e-mail facultatif et consentement d'achat (14/11) */
.profile-btn { display: block; margin: 6px auto 0; font-size: 0.85rem; padding: 6px 14px; }
.pf-block { border: 1px solid var(--panel-border); border-radius: var(--radius-md, 8px); padding: 10px 12px; margin: 10px 0; text-align: left; }
.pf-title { margin: 0 0 4px; }
.pf-block .muted { font-size: 0.82rem; margin: 4px 0 8px; }
.pf-form { display: flex; flex-direction: column; gap: 6px; }
.pf-form.hidden, .pf-code.hidden, .pf-status.hidden { display: none; }
.pf-code { display: flex; flex-direction: column; gap: 6px; }
.pf-form input { padding: 10px; border-radius: 8px; font-size: 1rem; }
.pf-status { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius-md, 8px); background: rgba(255, 255, 255, 0.06); font-size: 0.85rem; }
.pf-privacy { font-size: 0.75rem; }
.lvl-consent { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 0.8rem; margin: 6px 0 4px; padding: 6px; border-radius: 8px; }
.lvl-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.lvl-consent a { color: var(--gold); }
.lvl-consent.attention { outline: 2px solid var(--gold); }
.footer-sep { opacity: 0.6; }