/* ===== LIFOREVER — thème néon bleu/violet ===== */
:root {
  --bg: #05030f;
  --bg-2: #0b0820;
  --panel: rgba(18, 12, 44, 0.75);
  --panel-border: rgba(140, 100, 255, 0.18);
  --text: #eae6ff;
  --muted: #9a92c4;
  --blue: #2a7fff;
  --cyan: #4fd8ff;
  --violet: #8a3cff;
  --pink: #d13cff;
  --green: #35e08f;
  --red: #ff4d6d;
  --yellow: #ffd166;
  --grad: linear-gradient(90deg, var(--cyan), var(--blue) 35%, var(--violet) 70%, var(--pink));
  --radius: 14px;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-title: 'Orbitron', var(--font);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Marge du haut des boutons flottants : sous l'heure / l'encoche des téléphones */
  --top-btn: calc(env(safe-area-inset-top, 0px) + 14px);
}
@media (max-width: 760px), (pointer: coarse) {
  :root { --top-btn: calc(env(safe-area-inset-top, 0px) + 34px); }
  .hud { padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(42,127,255,0.18), transparent 60%),
              radial-gradient(900px 500px at 90% 110%, rgba(209,60,255,0.16), transparent 60%),
              var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#app { height: 100%; height: 100dvh; }

h1, h2, h3 { margin: 0; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ===== Écrans ===== */
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* ===== Boutons ===== */
.btn {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { background: rgba(60, 40, 120, 0.6); }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--grad);
  border: none;
  color: #fff;
  box-shadow: 0 0 24px rgba(138, 60, 255, 0.45);
}
.btn-primary:hover { box-shadow: 0 0 36px rgba(138, 60, 255, 0.7); background: var(--grad); }
.btn-big { padding: 16px 36px; font-size: 18px; }
.btn-danger { border-color: rgba(255,77,109,0.5); color: #ffb3c0; }
.btn-danger:hover { background: rgba(255,77,109,0.2); }
.choice.danger { background: rgba(255,77,109,0.15); border-color: rgba(255,77,109,0.5); color: #ffd4dc; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  background: transparent; border: 1px solid var(--panel-border); color: var(--text);
  width: 38px; height: 38px; border-radius: 10px; font-size: 18px;
}

/* ===== Titre ===== */
#screen-title { position: relative; align-items: center; justify-content: flex-start; text-align: center; padding: 6vh 24px 24px; overflow: hidden; cursor: pointer; }
.title-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  --bg: url('../assets/menu.webp'); --dim: linear-gradient(transparent, transparent);
  background: var(--bg) center / cover no-repeat;
  animation: bgFade 1.6s ease-out both, bgBreathe 12s ease-in-out infinite alternate; /* zoom / dézoom permanent */
  will-change: transform;
}
@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }
/* Effets vivants de l'écran d'accueil (js/title_fx.js) : au-dessus du voile sombre, même zoom lent que l'image */
.title-fx-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: bgFade 1.6s ease-out both, bgBreathe 12s ease-in-out infinite alternate; will-change: transform; }
.title-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes bgBreathe { from { transform: scale(1); } to { transform: scale(1.1); } }
#screen-title::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,3,15,0.82) 0%, rgba(5,3,15,0.5) 30%, rgba(5,3,15,0.08) 58%, rgba(5,3,15,0.55) 100%);
}
@keyframes bgIn { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.title-wrap { position: relative; z-index: 2; max-width: 620px; width: 100%; animation: fadeIn .8s ease .3s both; }

/* --- Infini animé --- */
.infinity-stage { perspective: 700px; width: min(72vw, 360px); margin: 0 auto; }
.infinity-svg {
  width: 100%; height: auto; overflow: visible; display: block;
  transform-style: preserve-3d;
  animation: infSpin 9s cubic-bezier(.45,.05,.55,.95) infinite, infFloat 4s ease-in-out infinite;
}
/* Rotation complète dans le plan + balancement 3D léger : toujours lisible, jamais de profil */
@keyframes infSpin {
  0%   { transform: rotateX(18deg) rotateY(-22deg) rotateZ(0deg); }
  25%  { transform: rotateX(-12deg) rotateY(22deg) rotateZ(90deg); }
  50%  { transform: rotateX(18deg) rotateY(22deg) rotateZ(180deg); }
  75%  { transform: rotateX(-12deg) rotateY(-22deg) rotateZ(270deg); }
  100% { transform: rotateX(18deg) rotateY(-22deg) rotateZ(360deg); }
}
@keyframes infFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.inf-halo { fill: none; stroke: url(#inf-grad); stroke-width: 22; opacity: .35; filter: url(#inf-glow-big); animation: infPulse 2.4s ease-in-out infinite; }
.inf-base { fill: none; stroke: url(#inf-grad); stroke-width: 7; stroke-linecap: round; opacity: .75; filter: url(#inf-glow); }
.inf-comet {
  fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; filter: url(#inf-glow);
  stroke-dasharray: 18 82; animation: infComet 3.2s linear infinite;
}
.inf-comet-2 { stroke: #ffd6ff; stroke-dasharray: 10 90; animation-delay: -1.6s; opacity: .9; }
@keyframes infComet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes infPulse { 0%,100% { opacity: .25; } 50% { opacity: .55; } }
.inf-spark { fill: #fff; filter: url(#inf-glow); }
.inf-spark-2 { fill: #ffb3f5; }

.logo {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0.22em;
  font-size: clamp(32px, 8vw, 64px);
  background: linear-gradient(90deg, #cfe9ff, #9fb8ff 45%, #d9a8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-top: -6px; filter: drop-shadow(0 0 18px rgba(138,60,255,0.55));
}
.tagline { color: #cfc8f0; font-size: 15px; margin: 10px 0 34px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.press-key {
  font-family: var(--font-title); font-size: clamp(12px, 2.6vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 14px rgba(79,216,255,.9), 0 2px 10px rgba(0,0,0,.9);
  animation: blink 1.6s ease-in-out infinite; margin: 0;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
/* Écran tactile (téléphone, tablette) : « Touche l'écran » au lieu de « Appuie sur une touche » */
.press-key .pk-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .press-key .pk-keys { display: none; }
  .press-key .pk-touch { display: inline; }
}
.title-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fadeIn .4s ease both; }
.title-meta { color: #cfc8f0; font-size: 13px; margin-top: 24px; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.title-credits {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; animation: fadeIn .8s ease .6s both;
}
.title-credits[hidden] { display: none; }
.credit-box {
  font-size: 12px; color: #d8d2f5; padding: 6px 12px; border-radius: 999px;
  background: rgba(5,3,15,.55); border: 1px solid rgba(138,60,255,.35); backdrop-filter: blur(6px);
}
.credit-box b { color: #fff; font-weight: 600; }

/* ===== Renaissance (création du personnage) ===== */
#screen-rebirth { position: relative; padding: calc(var(--top-btn) + 50px) 16px 24px; overflow-y: auto; }
#screen-rebirth.active { display: block; } /* pas de centrage flex : le contenu peut dépasser l'écran sur mobile */
/* Deux fonds (homme / femme) superposés : on fait un fondu selon le genre choisi */
.rebirth-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  --dim: linear-gradient(rgba(5,3,15,0.35), rgba(5,3,15,0.35));
  background: var(--bg) center / cover no-repeat; opacity: 0; transition: opacity .8s ease;
}
.rebirth-bg.visible { opacity: 1; animation: bgIn 1.2s ease-out both; }
.rebirth-bg-m { --bg: url('../assets/creation-m.webp'); }
.rebirth-bg-f { --bg: url('../assets/creation-f.webp'); }
.rebirth-bg::after { content: ""; position: absolute; inset: 0; background: var(--dim); }
.btn-back { position: fixed; top: var(--top-btn); left: 14px; z-index: 3; padding: 9px 16px; font-size: 14px; backdrop-filter: blur(8px); }
.rebirth-wrap { position: relative; z-index: 1; max-width: 1100px; width: 100%; margin: 0 auto; display: grid; gap: 16px; animation: fadeIn .6s ease .2s both; }
.card {
  background: rgba(10, 7, 28, 0.72); border: 1px solid rgba(140,100,255,0.3); border-radius: 18px;
  padding: 20px; backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.card-identity { text-align: center; display: grid; gap: 12px; align-content: start; }
.card-identity .btn-big { width: 100%; }
.rebirth-title { font-family: var(--font-title); font-size: clamp(18px, 3.5vw, 26px); margin-bottom: 4px; }
.rebirth-sub { color: #cfc8f0; margin: 0 0 14px; font-size: 14px; }
.dons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rebirth-form { display: grid; gap: 10px; text-align: left; }
.rebirth-form label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.field { display: flex; gap: 6px; }
.field input, .field select { flex: 1; min-width: 0; }
.dice {
  background: rgba(138,60,255,0.18); border: 1px solid var(--panel-border); color: var(--text);
  border-radius: 10px; width: 44px; font-size: 18px; transition: transform .15s ease, background .15s ease;
}
.dice:hover { background: rgba(138,60,255,0.4); }
.dice:active { transform: rotate(25deg) scale(.92); }
@media (min-width: 1000px) {
  /* Deux cartes sur les côtés : l'hologramme de l'image reste visible au centre */
  .rebirth-wrap { grid-template-columns: 340px minmax(80px, 1fr) 440px; gap: 24px; align-items: start; min-height: calc(100vh - 100px); align-content: center; }
  .card-dons { grid-column: 3; }
  .card-dons .dons { grid-template-columns: repeat(2, 1fr); }
}
.don {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 16px 14px; text-align: left; color: var(--text); transition: all .15s ease;
}
.don:hover { border-color: var(--violet); transform: translateY(-2px); }
.don.selected { border-color: var(--cyan); box-shadow: 0 0 20px rgba(79,216,255,0.35); background: rgba(42,127,255,0.15); }
.don.malus { border-color: rgba(255,77,109,0.4); }
.don.locked { opacity: .55; filter: grayscale(.6); cursor: default; }
.don.locked:hover { transform: none; border-color: var(--panel-border); }
.don .don-unlock { font-size: 12px; color: var(--yellow); margin-top: 6px; }
.unlocks { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(53,224,143,0.1); border: 1px solid rgba(53,224,143,0.35); }
.unlocks-title { font-weight: 700; color: var(--green); margin-bottom: 6px; }
.unlock-item { font-size: 13px; margin: 3px 0; }
.don .don-ico { font-size: 26px; }
.don .don-name { font-weight: 700; margin: 6px 0 2px; }
.don .don-desc { font-size: 13px; color: var(--muted); }
.rebirth-form input, .rebirth-form select {
  background: rgba(5,3,15,0.7); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit;
}

/* ===== Fond de jeu (selon l'âge) ===== */
#screen-game { position: relative; }
.game-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --dim: linear-gradient(180deg, rgba(5,3,15,0.55), rgba(5,3,15,0.35) 40%, rgba(5,3,15,0.55));
  background: var(--bg) center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease;
}
.game-bg.visible { opacity: 1; }
.game-bg::after { content: ""; position: absolute; inset: 0; background: var(--dim); }
.hud, .stats-compact, .layout, .actions { position: relative; z-index: 1; }

/* ===== HUD ===== */
.hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--panel-border);
  background: rgba(5,3,15,0.7); backdrop-filter: blur(10px);
}
.hud-name { font-weight: 700; font-size: 17px; }
.hud-sub { color: var(--muted); font-size: 12px; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-money { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; background: transparent; border: none; font-size: 15px; padding: 6px 8px; border-radius: 8px; }
.hud-money:hover { background: rgba(53,224,143,0.12); }
.hud-money::before { content: "💶 "; }
/* Argent sale : bien distinct de l'argent propre (rouge sombre, bordure pointillée, mention « sale ») */
.hud-dirty {
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: #ff8a5c;
  background: rgba(120,20,10,0.35); border: 1px dashed rgba(255,110,70,0.7); border-radius: 8px; padding: 5px 8px;
}
.hud-dirty::before { content: "🩸 "; }
.hud-dirty::after { content: " sale"; font-size: 11px; font-weight: 600; opacity: .8; }
.hud-dirty:hover { background: rgba(160,30,15,0.5); }
.hud-money, .hud-dirty { white-space: nowrap; }
.hud-right { flex-shrink: 0; }
.hud-id { min-width: 0; }
.hud-name, .hud-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .hud-dirty::after { content: ""; } .hud-money, .hud-dirty { font-size: 13px; padding: 4px 6px; } .hud-right { gap: 6px; } }
.bank-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px; }
.bank-row span:first-child { color: var(--muted); }
.bank-year { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 12px 0 4px; }
.hud-money.neg { color: var(--red); }

/* ===== Stats ===== */
.stats-compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 12px; background: rgba(5,3,15,0.55); backdrop-filter: blur(8px); }
.stat { font-size: 12px; }
.stat-head { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
.stat-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.bar { height: 7px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.bar.bonheur > i { background: linear-gradient(90deg, #ffd166, #ff8fa3); }
.bar.sante > i { background: linear-gradient(90deg, #35e08f, #4fd8ff); }
.bar.intelligence > i { background: linear-gradient(90deg, #2a7fff, #8a3cff); }
.bar.apparence > i { background: linear-gradient(90deg, #d13cff, #ff6ad5); }
.panel-left .stat { margin-bottom: 10px; font-size: 13px; }

/* ===== Layout principal ===== */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; }
.panel {
  display: none; padding: 14px; overflow-y: auto;
  background: rgba(10,7,28,0.78); backdrop-filter: blur(10px); border-right: 1px solid var(--panel-border);
}
.panel-right { border-right: none; border-left: 1px solid var(--panel-border); }
.panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 14px 0 10px; }
.panel h3:first-child { margin-top: 0; }
.info-list { font-size: 13px; display: grid; gap: 6px; }
.info-list span { color: var(--muted); }

.journal { overflow-y: auto; padding: 12px 14px 20px; scroll-behavior: smooth; }
.jyear { color: #d8d2f5; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.jyear::after { content: ""; flex: 1; height: 1px; background: var(--panel-border); }
.jentry {
  background: rgba(10,7,28,0.74); backdrop-filter: blur(6px); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 14px; line-height: 1.45;
  animation: fadeIn .25s ease;
}
.jentry.good { border-left: 3px solid var(--green); }
.jentry.bad { border-left: 3px solid var(--red); }
.jentry.money { border-left: 3px solid var(--yellow); }
.jentry.love { border-left: 3px solid var(--pink); }
.jentry.major { border-left: 3px solid var(--cyan); background: rgba(42,127,255,0.12); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

/* ===== Relations ===== */
.rel-list { display: grid; gap: 8px; }
.rel {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); border-radius: 10px;
  color: var(--text); text-align: left; width: 100%;
}
.rel:hover { border-color: var(--violet); }
.rel .rel-ico { font-size: 20px; }
.rel .rel-name { font-weight: 600; font-size: 14px; }
.rel .rel-sub { font-size: 12px; color: var(--muted); }
.rel .rel-bar { margin-left: auto; width: 60px; }
.rel.dead { opacity: .45; }

/* ===== Barre d'actions ===== */
.actions {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 8px calc(8px + var(--safe-b));
  border-top: 1px solid var(--panel-border);
  background: rgba(5,3,15,0.85); backdrop-filter: blur(12px);
}
/* Mobile : ligne annexe (Patrimoine, Vibe, Crypto) au-dessus des 5 boutons principaux (+ le petit ⏪) */
.actions-main { display: grid; grid-template-columns: 1fr 1fr 40px 1.15fr 40px 1fr 1fr; align-items: end; gap: 4px; }
.act.act-end .ico { font-size: 15px; opacity: .85; }
.act.act-end:hover { border-color: rgba(255,77,109,.55); }
.act.act-rewind { position: relative; overflow: visible !important; align-self: center; padding: 6px 0; border: 1px solid var(--panel-border); border-radius: 50%; width: 40px; height: 40px; justify-content: center; background: rgba(255,255,255,.05); color: var(--text); }
.act-rewind .ico { font-size: 17px; }
.rw-count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px; font-size: 10px; font-weight: 800; display: grid; place-items: center; background: var(--grad); color: #fff; }
.act-rewind:disabled .rw-count { background: #555; }
.actions-annex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.act.act-annex {
  flex-direction: row; justify-content: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text);
  padding: 7px 6px; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.05); border-radius: 12px;
}
.act.act-annex .ico { font-size: 22px; line-height: 1; }
.act-crypto .ico { color: #f7931a; font-weight: 800; }
.act-annex.off { opacity: .45; filter: grayscale(1); } /* Vibe en prison : toujours cliquable (message), mais grisé */
.act.locked:disabled { opacity: .45; }
.act {
  background: transparent; border: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; padding: 6px 2px; border-radius: 12px;
}
.act .ico { font-size: 22px; }
.act:disabled { opacity: .3; filter: grayscale(1); cursor: not-allowed; pointer-events: none; }
.act:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.act-age {
  color: #fff; background: var(--grad); border-radius: 18px; padding: 8px 4px;
  font-weight: 700; box-shadow: 0 0 22px rgba(138,60,255,0.5);
  transform: translateY(-8px);
}
.act-age .ico { font-size: 28px; line-height: 1; }
.act-age:hover { background: var(--grad); box-shadow: 0 0 32px rgba(138,60,255,0.8); color: #fff; }
.act-age:active { transform: translateY(-8px) scale(0.96); }

/* ===== Modale ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,1,10,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50; padding: 0;
}
/* Menu ouvert : la barre du haut (soldes) reste nette, au-dessus du voile flouté */
body.modal-open .hud { z-index: 60; }
/* … ainsi que les stats (bande de gauche sur PC, bandeau compact sur mobile) */
body.modal-open .layout { z-index: auto; }
body.modal-open .panel-left, body.modal-open .stats-compact { position: relative; z-index: 60; }
body.modal-open .modal { max-height: min(88vh, calc(100vh - 130px)); }
@media (min-width: 900px) {
  body.modal-open .modal-backdrop { padding-left: 280px; } /* le menu se centre à droite de la bande de stats */
  body.modal-open .modal { max-height: min(80vh, calc(100vh - 90px)); }
}
.modal {
  width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16103a, #0b0820);
  border: 1px solid rgba(140,100,255,0.35); border-bottom: none;
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 60px rgba(138,60,255,0.35);
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.modal-head h3 { font-size: 18px; }
.modal-body { padding: 6px 18px 12px; overflow-y: auto; font-size: 15px; line-height: 1.5; flex: 0 1 auto; min-height: 0; }
.modal-body p { margin: 0 0 10px; }
.modal-body .muted { color: var(--muted); font-size: 13px; }
/* Beaucoup de choix (ex. Activités) : la liste défile à l'intérieur du menu au lieu de déborder */
.modal-choices { padding: 6px 14px calc(16px + var(--safe-b)); display: grid; gap: 8px; flex: 0 1 auto; min-height: 90px; overflow-y: auto; overscroll-behavior: contain;
  grid-auto-rows: max-content; align-content: start; } /* (sur iPhone, Safari écrasait sinon chaque bouton à sa hauteur minimale : sous-titres coupés) */
.modal-choices:empty { min-height: 0; padding-top: 0; }
.choice {
  background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border); color: var(--text);
  padding: 12px 14px; border-radius: 12px; text-align: left; font-size: 15px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.choice:hover { border-color: var(--violet); background: rgba(138,60,255,0.15); }
.choice:disabled { opacity: .4; }
.choice > span { flex: 0 1 auto; }
/* Sur mobile : le libellé au-dessus, le détail en dessous, pour éviter les retours à la ligne bizarres */
@media (max-width: 600px) {
  .choice { flex-direction: column; align-items: flex-start; gap: 3px; }
  .choice > span { white-space: nowrap; }
  .choice small { text-align: left; }
}
.choice small { color: var(--muted); font-weight: 400; font-size: 12px; flex: 1 1 auto; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.choice.primary { background: var(--grad); border: none; color: #fff; }
.choice.primary small { color: rgba(255,255,255,.88); } /* (le gris habituel disparaissait sur le dégradé) */
/* ===== Effets visuels (js/fx.js) ===== */
/* Boutons : légère pression + onde lumineuse */
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active { transform: scale(0.96); }
.act-age:not(:disabled):active { transform: translateY(-8px) scale(0.94); }
.choice, .btn, .act, .chip, .icon-btn, .rel, .roul-btn, .roul-num { overflow: hidden; }
.fx-rel { position: relative; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%); transform: scale(0); animation: fxRipple .55s ease-out forwards; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* Menus : zoom + flou à l'ouverture, choix en cascade, transition entre deux pages */
.modal-backdrop:not([hidden]) { animation: fxBackdrop .25s ease; }
@keyframes fxBackdrop { from { background: rgba(2,1,10,0); backdrop-filter: blur(0); } }
.modal { animation: fxModalIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fxModalIn { from { transform: translateY(26px) scale(.96); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.modal-backdrop.fx-swap .modal-body, .modal-backdrop.fx-swap .modal-head { animation: fxSwap .22s ease; }
@keyframes fxSwap { from { opacity: 0; transform: translateX(10px); } }
.modal-choices .choice { animation: fxChoice .32s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes fxChoice { from { opacity: 0; transform: translateY(8px); } }
.modal.fx-glow-good { animation: fxGlowGood 1.4s ease; }
.modal.fx-glow-bad { animation: fxGlowBad 1.4s ease; }
@keyframes fxGlowGood { 0%, 100% { box-shadow: 0 -10px 60px rgba(138,60,255,0.35); } 30% { box-shadow: 0 0 0 2px #ffd84f, 0 0 60px 10px rgba(255,216,79,.55); } }
@keyframes fxGlowBad { 0%, 100% { box-shadow: 0 -10px 60px rgba(138,60,255,0.35); } 30% { box-shadow: 0 0 0 2px var(--red), 0 0 60px 10px rgba(255,77,109,.5); } }

/* Journal : les nouvelles lignes glissent depuis le bas */
.jentry { animation: none; }
.jentry.new, .jyear.new { animation: fxSlide .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--d, 0ms); }
@keyframes fxSlide { from { opacity: 0; transform: translateY(16px); } }

/* Barres de stats : elles glissent vers la nouvelle valeur */
.bar > i { transition: width .7s cubic-bezier(.2,.8,.3,1); }

/* Chiffres flottants (+5, −120 €) */
.fx-float { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -40%); font-weight: 800; font-size: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.8); animation: fxFloat 1.25s ease-out forwards; white-space: nowrap; }
.fx-float.up { color: #35e08f; } .fx-float.down { color: #ff4d6d; }
@keyframes fxFloat { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

/* Solde : clignote en vert / rouge */
.hud-money.fx-gain { animation: fxGain .8s ease; } .hud-money.fx-loss { animation: fxLoss .8s ease; }
@keyframes fxGain { 30% { color: #fff; background: rgba(53,224,143,.35); transform: scale(1.08); } }
@keyframes fxLoss { 30% { color: #fff; background: rgba(255,77,109,.35); transform: scale(1.08); } }

/* Anniversaire : grand « 🎂 25 ans » + impulsion du bouton Vieillir */
.fx-age { position: fixed; left: 50%; top: 42%; z-index: 110; pointer-events: none; transform: translate(-50%, -50%); font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(34px, 9vw, 64px); color: #fff; text-shadow: 0 0 24px rgba(138,60,255,.9), 0 0 60px rgba(79,216,255,.6); animation: fxAge 1.45s ease forwards; white-space: nowrap; }
.fx-age span { margin-right: 10px; }
@keyframes fxAge { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(.95); } }
.act-age.fx-pulse { animation: fxPulse .7s ease; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(138,60,255,.9); } 100% { box-shadow: 0 0 0 26px rgba(138,60,255,0); } }

/* Confettis */
.fx-confetti { position: fixed; inset: 0; z-index: 115; pointer-events: none; overflow: hidden; }
.fx-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: fxConfetti linear forwards; }
@keyframes fxConfetti { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; } }

/* Secousse */
#app.fx-shake { animation: fxShake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes fxShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

/* Bannière de succès */
.fx-ach { position: fixed; left: 50%; top: 14px; z-index: 125; transform: translate(-50%, -140%); display: flex; gap: 12px; align-items: center; width: min(420px, calc(100% - 24px)); padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #3a2a05, #1b1430); border: 2px solid #ffd84f; box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,216,79,.35); animation: fxAchIn .5s cubic-bezier(.2,.9,.3,1.3) forwards; pointer-events: none; }
.fx-ach.out { animation: fxAchOut .5s ease forwards; }
.fx-ach-ico { font-size: 34px; }
.fx-ach-top { font-size: 11px; color: #ffd84f; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.fx-ach-name { font-weight: 800; font-size: 16px; }
.fx-ach-desc { font-size: 12px; color: var(--muted); }
@keyframes fxAchIn { to { transform: translate(-50%, 0); } }
@keyframes fxAchOut { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -140%); opacity: 0; } }

/* Ambiance : santé très basse (bord rouge qui bat), dépression (couleurs ternies) */
body.fx-lowhealth #screen-game::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 90px 10px rgba(255,30,60,.55); animation: fxHeart 1.1s ease-in-out infinite; }
@keyframes fxHeart { 0%, 100% { opacity: .35; } 15% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: .9; } }
body.fx-gloomy .game-bg { filter: saturate(.35) brightness(.85); transition: filter 1.5s; }

/* Mort : fondu au noir */
.fx-black { position: fixed; inset: 0; z-index: 130; background: #000; opacity: 0; animation: fxBlack 1.2s ease forwards; pointer-events: all; }
.fx-black.out { animation: fxBlackOut 1s ease forwards; }
@keyframes fxBlack { to { opacity: 1; } }
@keyframes fxBlackOut { from { opacity: 1; } to { opacity: 0; } }

/* Moins d'animations si l'appareil le demande */
@media (prefers-reduced-motion: reduce) {
  .fx-ripple, .fx-confetti, .fx-age { display: none; }
  .modal, .modal-choices .choice, .jentry.new, .jyear.new, #app.fx-shake, body.fx-lowhealth #screen-game::after { animation: none !important; }
}

/* ===== Visuel (js/visuals.js) ===== */
/* Avatar qui vieillit + humeur + statuts */
.hud-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(138,60,255,.45), rgba(20,12,50,.9)); border: 2px solid rgba(140,100,255,.6); box-shadow: 0 0 14px rgba(138,60,255,.45); }
.av-face { font-size: 26px; line-height: 1; }
.av-mood { position: absolute; right: -4px; bottom: -4px; font-size: 15px; background: #120d33; border-radius: 50%; padding: 1px; line-height: 1; }
.hud-status { display: flex; gap: 3px; margin-top: 2px; font-size: 12px; line-height: 1; }
.av-st { filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
@media (max-width: 600px) { .avatar { width: 38px; height: 38px; } .av-face { font-size: 22px; } }

/* Stats : couleur selon le niveau + flèches d'évolution */
.stat.st-mid .bar > i { background: linear-gradient(90deg, #ffb347, #ff8a3d) !important; }
.stat.st-low .bar > i { background: linear-gradient(90deg, #ff4d6d, #c8283c) !important; animation: stLow 1.2s ease-in-out infinite; }
.stat.st-low .stat-head b { color: var(--red); }
@keyframes stLow { 50% { filter: brightness(1.5); } }
.st-up, .st-down { font-size: 11px; margin-right: 3px; font-weight: 800; }
.st-up { color: #35e08f; } .st-down { color: #ff4d6d; }

/* Journal : frise, cartes à thème, montants en couleur */
.journal { position: relative; }
.jyear { position: relative; padding-left: 18px; }
.jyear::before { content: ""; position: absolute; left: 3px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); background: var(--grad); box-shadow: 0 0 8px rgba(138,60,255,.8); }
.jentry { margin-left: 8px; }
.jentry.love { background: linear-gradient(90deg, rgba(255,90,224,.14), rgba(10,7,28,.74) 60%); }
.jentry.money { background: linear-gradient(90deg, rgba(255,216,79,.12), rgba(10,7,28,.74) 60%); }
.jentry.bad { background: linear-gradient(90deg, rgba(255,77,109,.14), rgba(10,7,28,.74) 60%); }
.jentry.major { font-size: 15px; padding: 13px 14px; border-left-width: 4px; box-shadow: 0 0 18px rgba(42,127,255,.18); }
.m-up { color: #35e08f; font-weight: 700; white-space: nowrap; } .m-down { color: #ff6b81; font-weight: 700; white-space: nowrap; }

/* Menus : en-tête à thème avec grande icône, icônes des choix */
.modal-head { position: relative; border-radius: 22px 22px 0 0; }
.mh-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 10px; border-radius: 12px; font-size: 22px; background: rgba(255,255,255,.08); vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.modal[class*="th-"] .modal-head { background: linear-gradient(135deg, var(--th, rgba(138,60,255,.35)), transparent 75%); }
.modal.th-work { --th: rgba(79,216,255,.28); } .modal.th-home { --th: rgba(53,224,143,.25); } .modal.th-veh { --th: rgba(79,216,255,.25); }
.modal.th-casino { --th: rgba(255,216,79,.3); } .modal.th-crime { --th: rgba(255,77,109,.3); } .modal.th-love { --th: rgba(255,90,224,.3); }
.modal.th-act { --th: rgba(255,179,71,.28); } .modal.th-edu { --th: rgba(138,60,255,.35); } .modal.th-vibe { --th: rgba(255,90,224,.25); }
.modal.th-crypto { --th: rgba(247,147,26,.3); } .modal.th-bank { --th: rgba(53,224,143,.22); } .modal.th-pol { --th: rgba(42,127,255,.3); }
.modal.th-sport { --th: rgba(53,224,143,.28); } .modal.th-art { --th: rgba(255,90,224,.28); } .modal.th-prison { --th: rgba(120,120,140,.35); } .modal.th-gold { --th: rgba(255,216,79,.3); }
.ch-ico { display: inline-block; font-size: 19px; margin-right: 6px; vertical-align: -2px; }
.tabs.tabs-4 { grid-template-columns: repeat(4, 1fr); }
.tabs.tabs-4 .tab { font-size: 12px; padding: 8px 2px; }

/* Relations : visages, cœur qui bat */
.rel-ico { position: relative; }
.heart { position: absolute; right: -6px; bottom: -4px; font-size: 13px; animation: heartBeat var(--beat, 1.3s) ease-in-out infinite; text-shadow: 0 0 6px currentColor; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }

/* Arbre généalogique */
.tree { display: grid; gap: 4px; margin-top: 8px; }
.tgen { position: relative; padding-top: 6px; }
.tgen + .tgen::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 12px; background: linear-gradient(var(--cyan), var(--violet, #8a3cff)); }
.tlabel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: center; margin-bottom: 4px; }
.trow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.tnode { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 76px; padding: 7px 6px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--panel-border); color: var(--text); cursor: pointer; }
.tnode.you { background: var(--grad); border-color: transparent; box-shadow: 0 0 14px rgba(138,60,255,.6); cursor: default; }
.tnode.dead { opacity: .45; filter: grayscale(1); }
.tface { font-size: 24px; line-height: 1.1; }
.tname { font-size: 12px; font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsub { font-size: 10px; color: var(--muted); }
.tnode.you .tsub { color: rgba(255,255,255,.85); }
.tlink { font-size: 14px; }

/* Ambiance : couleurs selon l'âge, neige certains hivers */
body.age-child #screen-game .game-bg { filter: saturate(1.2) brightness(1.04); }
body.age-senior #screen-game .game-bg { filter: sepia(.18) saturate(.9); }
#snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
#snow i { position: absolute; top: -20px; color: #fff; font-style: normal; animation: snowFall linear infinite; text-shadow: 0 0 6px rgba(255,255,255,.8); }
@keyframes snowFall { to { transform: translate(40px, 110vh) rotate(360deg); } }

/* Bilan de vie (écran de mort) */
.recap { text-align: center; margin-bottom: 10px; }
.recap-portrait { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 48px; background: radial-gradient(circle at 35% 30%, rgba(255,216,79,.35), rgba(20,12,50,.9)); border: 2px solid rgba(255,216,79,.6); box-shadow: 0 0 24px rgba(255,216,79,.35); filter: grayscale(.35); }
.recap-epitaph { font-style: italic; font-size: 15px; color: #ffe9a8; margin: 4px 0 10px; }
.recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.recap-stats div { background: rgba(255,255,255,.05); border: 1px solid var(--panel-border); border-radius: 10px; padding: 7px 4px; display: flex; flex-direction: column; gap: 2px; }
.recap-stats b { font-size: 15px; } .recap-stats span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.recap-timeline { text-align: left; border-left: 2px solid rgba(138,60,255,.5); margin: 6px 0 12px 8px; padding-left: 12px; display: grid; gap: 6px; }
.rt-item { position: relative; font-size: 13px; line-height: 1.35; }
.rt-item::before { content: ""; position: absolute; left: -17px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.rt-age { color: var(--cyan); font-weight: 700; margin-right: 6px; }
@media (max-width: 600px) { .recap-stats { grid-template-columns: repeat(2, 1fr); } }

/* Bouton son des écrans titre / création */
.btn-sound { position: fixed; top: var(--top-btn); right: 14px; z-index: 5; backdrop-filter: blur(8px); background: rgba(10,7,28,0.55); }

/* ===== Examen réussi : véhicule qui traverse l'écran ===== */
.fx-pass { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 140; }
.fx-veh { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 141; transform-origin: 50% 50%; transition: opacity .3s; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.fx-veh svg { width: 100%; height: 100%; display: block; }

/* ===== Mini-jeu de réflexe (tirs au but, concert) ===== */
.tg-track { position: relative; height: 38px; margin: 16px 0 10px; border-radius: 19px; background: rgba(255,255,255,.07); border: 1px solid var(--panel-border); overflow: hidden; }
.tg-zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(53,224,143,.3), rgba(53,224,143,.6), rgba(53,224,143,.3)); border-left: 2px solid #35e08f; border-right: 2px solid #35e08f; }
.tg-cursor { position: absolute; top: 3px; bottom: 3px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px #fff, 0 0 4px #8a3cff; }
.tg-score { font-size: 24px; text-align: center; letter-spacing: 4px; margin: 4px 0; }

/* ===== Défis ===== */
.chal-card { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(42,127,255,.12), rgba(138,60,255,.14)); border: 1px solid rgba(138,60,255,.4); }
.chal-card.done { border-color: rgba(53,224,143,.6); background: linear-gradient(135deg, rgba(53,224,143,.12), rgba(42,127,255,.1)); }
.chal-top { display: flex; justify-content: space-between; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.chal-kind { color: #ffd84f; } .chal-time { color: var(--muted); }
.chal-title { font-family: var(--font-title); font-size: 17px; margin: 6px 0 2px; }
.chal-title span { font-family: var(--font); }
.chal-card p { margin: 0 0 8px; font-size: 13.5px; color: #d8d2f5; }
.chal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.chal-reward { color: #ffd84f; font-weight: 700; }
.chal-card.done .chal-foot b { color: var(--green); }

/* ===== Mes vies (frise des réincarnations) ===== */
.lives-tl { display: grid; gap: 8px; margin-top: 8px; }
.life-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--panel-border); }
.lr-no { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-size: 11px; letter-spacing: -.5px; color: #fff; background: var(--grad); }
.lr-body { min-width: 0; display: grid; gap: 2px; }
.lr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lr-top .tag { margin-left: 0; }
.lr-body small { font-size: 12px; color: var(--muted); }

/* ===== Sanctuaire (bénédictions payées en karma, écran de création) ===== */
.sanctuary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); text-align: left; }
.sanctuary[hidden] { display: none; }
.sanct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sanct-head small { color: var(--muted); }
.sanctuary p { font-size: 12.5px; margin: 4px 0 8px; }
.sanct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bless { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); }
.bless .b-ico { font-size: 20px; }
.bless b { font-size: 13px; }
.bless small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.bless em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #ffd84f; margin-top: 2px; }
.bless.selected { border-color: #ffd84f; background: rgba(255,216,79,.12); box-shadow: 0 0 14px rgba(255,216,79,.25); }
.bless.off { opacity: .45; }

/* ===== Titre de vie (écran de mort) ===== */
.life-title { text-align: center; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,216,79,.14), rgba(138,60,255,.16)); border: 1px solid rgba(255,216,79,.4); }
.life-title small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffd84f; font-weight: 700; }
.life-title b { display: block; font-family: var(--font-title); font-size: 22px; margin: 4px 0 2px; color: #fff; }
.life-title b span { font-family: var(--font); }
.life-title em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.life-title.is-new { animation: titleGlow 2s ease-in-out 2; }
@keyframes titleGlow { 50% { box-shadow: 0 0 28px rgba(255,216,79,.55); } }
.titles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.title-card { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); text-align: center; }
.title-card .tc-ico { font-size: 26px; }
.title-card b { display: block; font-size: 13px; margin: 4px 0 2px; }
.title-card span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.title-card.locked { opacity: .45; filter: grayscale(1); }
.title-card .tc-count { color: #ffd84f; font-weight: 700; font-size: 11px; margin-top: 4px; }

/* ===== Prix d'un album (jauge) ===== */
.price-box { margin: 10px 0 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); }
.price-val { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.price-val b { font-family: var(--font-title); font-size: 30px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-val span { color: var(--muted); font-size: 13px; }
.price-range { width: 100%; margin: 10px 0 4px; accent-color: #ff5ae0; height: 28px; cursor: pointer; }
.price-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.price-fx { display: grid; gap: 6px; }
.price-fx > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.03); }
.price-fx small { color: var(--muted); font-weight: 400; }

/* ===== Compte en ligne & classement ===== */
.account-pill {
  position: absolute; top: var(--top-btn); left: 14px; z-index: 5; max-width: calc(100% - 90px);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 600 13px/1.2 inherit; font-family: inherit; color: var(--text);
  background: rgba(10,7,28,0.55); border: 1px solid var(--panel-border); backdrop-filter: blur(8px);
}
.account-pill[hidden] { display: none; }
.account-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-pill.logged { border-color: rgba(79,216,255,.45); box-shadow: 0 0 12px rgba(79,216,255,.18); }
.account-pill:not(.logged) { border-color: rgba(255,90,224,.55); animation: soulGlow 2.4s ease-in-out infinite; }
@keyframes soulGlow { 0%, 100% { box-shadow: 0 0 8px rgba(138,60,255,.35); } 50% { box-shadow: 0 0 20px rgba(255,90,224,.6); } }
/* Invitation à créer son compte (« son âme ») */
.soul-cta {
  flex-basis: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  margin-top: 4px; padding: 12px 16px; border-radius: 16px; color: var(--text); font-family: inherit;
  background: linear-gradient(135deg, rgba(42,127,255,.22), rgba(138,60,255,.25) 55%, rgba(255,90,224,.22));
  border: 1px solid rgba(255,90,224,.45); backdrop-filter: blur(8px); animation: soulGlow 2.4s ease-in-out infinite;
}
.soul-cta[hidden] { display: none; }
.soul-cta b { display: block; font-size: 15px; }
.soul-cta small { display: block; font-size: 12px; color: #d8d2f5; margin-top: 2px; }
.soul-cta-ico, .soul-ico { font-family: var(--font-title); font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soul-cta-ico { font-size: 30px; line-height: 1; }
.soul-hero { display: flex; gap: 12px; align-items: center; }
.soul-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 10px rgba(138,60,255,.6)); }
.soul-hero p { margin: 0; line-height: 1.45; }
.soul-perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.soul-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--panel-border); }
.soul-perks li span { font-size: 18px; line-height: 1.1; }
.soul-keep { margin: 10px 0 0; font-size: 13px; color: #6ee7a8; }
.soul-free { margin-top: 10px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd166; }
.auth-form { display: grid; gap: 10px; margin-top: 12px; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] {
  background: rgba(5,3,15,0.7); color: var(--text); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 11px 12px; font-size: 16px; font-family: inherit; width: 100%; box-sizing: border-box;
}
.auth-form input:focus { outline: none; border-color: rgba(138,60,255,.7); box-shadow: 0 0 0 3px rgba(138,60,255,.18); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.auth-msg { min-height: 18px; font-size: 13px; color: var(--muted); }
.auth-msg.err { color: #ff7a8a; }
.auth-msg.ok { color: #6ee7a8; }
.tabs.tabs-3 { grid-template-columns: repeat(3, 1fr); }
.tabs.tabs-3 .tab { font-size: 13px; padding: 8px 2px; }
.lb-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; margin-top: 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); }
.lb-row.lb-me { border-color: rgba(79,216,255,.55); background: rgba(79,216,255,.08); }
.lb-row.lb-sep { margin-top: 14px; }
.lb-rank { font-weight: 700; text-align: center; color: var(--muted); }
.lb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.lb-val { white-space: nowrap; }
.lb-note { font-size: 12px; margin-top: 12px; }

/* Tutoriel : carte de guidage + surbrillance */
#tuto {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 92px; width: min(520px, calc(100% - 24px));
  max-height: 46vh; overflow-y: auto; z-index: 90; padding: 12px 14px;
  background: linear-gradient(180deg, #221a52, #120d33); border: 2px solid #ffd84f; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 24px rgba(255,216,79,.25); font-size: 14px; line-height: 1.5;
}
body.modal-open #tuto { bottom: auto; top: 8px; max-height: 30vh; }
@media (max-width: 899px) { body.tuto-on.modal-open .modal { max-height: calc(70vh - 24px); } } /* le menu ne passe pas sous la carte du tuto */
@media (min-width: 900px) {
  #tuto { left: 16px; transform: none; width: 300px; bottom: 100px; max-height: 60vh; }
  body.modal-open #tuto { top: auto; bottom: 100px; max-height: 60vh; }
}
.tuto-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.tuto-count { font-size: 11px; color: #ffd84f; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.tuto-quit { background: transparent; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 8px; font-size: 12px; padding: 4px 8px; cursor: pointer; }
.tuto-quit:hover { color: var(--text); border-color: var(--red); }
.tuto-title { font-size: 16px; margin: 4px 0 6px; }
.tuto-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.tuto-btn { padding: 9px 16px; font-size: 14px; }
.tuto-hint { color: #ffd84f; font-weight: 700; font-size: 13px; animation: tutoBlink 1.4s ease-in-out infinite; }
.tuto-pop { animation: tutoPop .3s ease; }
.tuto-shake { animation: tutoShake .35s ease; }
.tuto-hl { outline: 3px solid #ffd84f !important; outline-offset: -3px; border-radius: 10px; animation: tutoPulse 1.2s ease-in-out infinite; }
@keyframes tutoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,216,79,.55); } 50% { box-shadow: 0 0 0 8px rgba(255,216,79,0); } }
@keyframes tutoBlink { 50% { opacity: .45; } }
@keyframes tutoPop { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes tutoShake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

/* Onglets (Patrimoine) */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; padding: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 12px; }
.tab { background: transparent; border: none; color: var(--muted); font-weight: 700; font-size: 14px; padding: 9px 6px; border-radius: 9px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--grad); color: #fff; box-shadow: 0 0 14px rgba(138,60,255,.45); }

/* Règles du jeu */
.rules-sec { border: 1px solid var(--panel-border); border-radius: 12px; margin: 8px 0; background: rgba(255,255,255,0.03); }
.rules-sec summary { cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rules-sec summary::-webkit-details-marker { display: none; }
.rules-sec summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.rules-sec[open] summary::after { transform: rotate(180deg); }
.rules-sec[open] summary { border-bottom: 1px solid var(--panel-border); }
.rules-body { padding: 4px 14px 12px; font-size: 14px; line-height: 1.55; }
.rules-body ul, .rules-body ol { padding-left: 20px; margin: 8px 0; }
.rules-body li { margin: 5px 0; }
.rules-body p { margin: 8px 0; }
.list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
}
.list-item .li-main { font-weight: 600; }
.list-item .li-sub { font-size: 12px; color: var(--muted); }
.list-item .btn { padding: 8px 14px; font-size: 13px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; background: rgba(79,216,255,0.15); color: var(--cyan); margin-left: 6px; }
.tag.red { background: rgba(255,77,109,0.15); color: var(--red); }
.tag.green { background: rgba(53,224,143,0.15); color: var(--green); }
.tag.gold { background: rgba(255,209,102,0.15); color: var(--yellow); }
.btn-col { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.btn-col .btn { padding: 7px 12px; font-size: 12.5px; }

/* ===== Spark (rencontres) ===== */
.dating-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 8px; }
.dating-head .muted { font-size: 12px; }
.dating-fb { text-align: center; font-size: 13px; margin-bottom: 6px; }
.dating-card { background: linear-gradient(180deg, rgba(209,60,255,0.18), rgba(42,127,255,0.12)); border: 1px solid rgba(209,60,255,0.4); border-radius: 18px; padding: 18px 16px; text-align: center; animation: fadeIn .25s ease; }
.dating-avatar { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.dating-name { font-size: 20px; font-weight: 700; margin-top: 8px; }
.dating-stars { color: var(--yellow); letter-spacing: 2px; margin: 2px 0; }
.dating-job { color: var(--muted); font-size: 13px; }
.dating-bio { margin-top: 10px; font-style: italic; font-size: 14px; }
.dating-actions { display: flex; justify-content: center; gap: 28px; margin: 14px 0 4px; }
.dating-btn { width: 64px; height: 64px; border-radius: 50%; border: none; font-size: 28px; cursor: pointer; transition: transform .1s ease; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.dating-btn:active { transform: scale(.9); }
.dating-btn.no { background: #2a2438; color: var(--red); border: 2px solid var(--red); }
.dating-btn.yes { background: linear-gradient(135deg, #ff5ae0, #d13cff); }
.dating-match { text-align: center; padding: 14px 0; }
.dating-match h3 { font-family: var(--font-title); font-size: 22px; margin: 8px 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Casino ===== */
.casino-bar { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.casino-bar b { color: var(--text); }
.bet-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bet-row input { width: 130px; background: rgba(5,3,15,0.7); color: var(--text); border: 1px solid var(--panel-border); border-radius: 10px; padding: 9px 10px; font-size: 15px; font-family: inherit; }
.chip { background: rgba(255,209,102,0.15); border: 1px solid rgba(255,209,102,0.4); color: var(--yellow); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.chip:hover { background: rgba(255,209,102,0.3); }
.chip-select { display: flex; justify-content: center; gap: 8px; margin: 6px 0 8px; }
.chip-big { width: 46px; height: 46px; border-radius: 50%; border: 3px dashed rgba(255,255,255,0.7); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: transform .1s ease; }
.chip-big.c1 { background: #3b82f6; } .chip-big.c10 { background: #16a34a; } .chip-big.c100 { background: #1b1b26; } .chip-big.c1000 { background: #b45309; }
.chip-big.remove { background: #7f1d1d; border-style: solid; font-size: 22px; line-height: 1; }
.chip-big.sel { transform: translateY(-4px) scale(1.12); outline: 3px solid var(--yellow); box-shadow: 0 0 14px rgba(255,209,102,0.7); }
.chip-big:disabled { opacity: .35; }
.chip-on { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--yellow); color: #1b1b26; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; }
.roul-btn.has, .roul-num.has { outline: 2px solid var(--yellow); }
.roul-outside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.roul-btn { position: relative; border: 1px solid var(--panel-border); background: rgba(255,255,255,0.05); color: var(--text); border-radius: 8px; padding: 8px 4px; font-size: 12px; font-weight: 600; }
.roul-btn.rouge { background: rgba(220,40,60,0.45); } .roul-btn.noir { background: rgba(20,20,30,0.9); }
.roul-btn.sel, .roul-num.sel { outline: 2px solid var(--yellow); box-shadow: 0 0 12px rgba(255,209,102,0.6); }
.roul-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 8px; }
.roul-num { position: relative; border: none; border-radius: 6px; padding: 7px 0; font-size: 12px; font-weight: 700; color: #fff; }
.roul-grid { padding-top: 6px; }
.roul-num.rouge { background: #c8283c; } .roul-num.noir { background: #1b1b26; } .roul-num.vert { background: #1f8a4c; grid-column: span 12; }
.roul-result { text-align: center; padding: 14px; margin: 8px 0; }
.roul-ball { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; font-family: var(--font-title); font-size: 28px; font-weight: 700; color: #fff; box-shadow: 0 0 24px rgba(0,0,0,.6); }
.roul-ball.rouge { background: #c8283c; } .roul-ball.noir { background: #1b1b26; border: 2px solid #555; } .roul-ball.vert { background: #1f8a4c; }
.roul-ball.spinning { animation: ballSpin .12s linear infinite; }
@keyframes ballSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.roul-history { display: flex; gap: 4px; flex-wrap: wrap; font-size: 11px; color: var(--muted); align-items: center; }
.roul-history span { display: inline-block; min-width: 20px; text-align: center; border-radius: 4px; padding: 2px 4px; color: #fff; }
.bj-table { display: grid; gap: 12px; margin: 6px 0 10px; }
.bj-hand { background: rgba(31,138,76,0.18); border: 1px solid rgba(31,138,76,0.4); border-radius: 12px; padding: 10px; }
.bj-hand .bj-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
.bj-hand .bj-title b { color: var(--text); }
.cards { display: flex; gap: 6px; flex-wrap: wrap; }
.pcard { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 58px; background: #fff; color: #1b1b26; border-radius: 6px; font-weight: 700; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: fadeIn .25s ease; }
.pcard small { font-size: 13px; }
.pcard.red { color: #c8283c; }
.pcard.back { background: repeating-linear-gradient(45deg, #2a2f6b, #2a2f6b 4px, #1b1e4a 4px, #1b1e4a 8px); color: #9fb8ff; }
.slot { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.reel { width: 76px; height: 86px; display: flex; align-items: center; justify-content: center; font-size: 44px; background: linear-gradient(180deg, #fff, #d9d9e3); border-radius: 12px; box-shadow: inset 0 -8px 16px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.5); border: 3px solid #ffd166; }
.reel.spin { animation: reelShake .08s linear infinite; }
@keyframes reelShake { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.slot-bets { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.slot-bets .chip.sel { background: var(--yellow); color: #1b1b26; }
.paytable { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.paytable span b { color: var(--text); }
.slot-msg { text-align: center; min-height: 22px; font-size: 16px; margin: 4px 0; }
.result-win { color: var(--green); font-weight: 700; } .result-lose { color: var(--red); font-weight: 700; } .result-push { color: var(--yellow); font-weight: 700; }

/* ===== Mort ===== */
#screen-death { position: relative; text-align: center; padding: 24px 16px; overflow-y: auto; }
#screen-death.active { display: block; }
.death-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  --bg: url('../assets/death.webp'); --dim: linear-gradient(180deg, rgba(5,3,15,0.45), rgba(5,3,15,0.25) 50%, rgba(5,3,15,0.6));
  background: var(--bg) center / cover no-repeat;
  animation: bgIn 1.6s ease-out both;
}
.death-bg.pauvre { --bg: url('../assets/death-pauvre.jpg'); } /* mort avec moins de 3 000 € */
.death-bg::after { content: ""; position: absolute; inset: 0; background: var(--dim); }
.death-wrap { position: relative; z-index: 1; max-width: 560px; width: 100%; margin: 0 auto; min-height: calc(100vh - 48px); display: grid; align-content: center; animation: fadeIn .8s ease .4s both; }
.death-icon { font-size: 64px; filter: drop-shadow(0 0 18px rgba(255,209,102,.6)); }
#death-title { font-family: var(--font-title); font-size: 26px; margin: 8px 0; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.death-cause { color: #e6dff5; margin-bottom: 18px; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.death-summary {
  background: rgba(10,7,28,0.72); backdrop-filter: blur(12px); border: 1px solid rgba(140,100,255,0.3); border-radius: var(--radius);
  padding: 16px; text-align: left; margin-bottom: 22px; font-size: 14px; display: grid; gap: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
#btn-rebirth { justify-self: center; }
.death-summary .row { display: flex; justify-content: space-between; }
.death-summary .row span { color: var(--muted); }
.karma-good { color: var(--green); font-weight: 700; }
.karma-bad { color: var(--red); font-weight: 700; }

/* ===== Crypto ===== */
.icon-crypto { color: #f7931a; font-weight: 800; font-size: 19px; }
.icon-vibe { font-size: 17px; }
.icon-btn.off { opacity: .35; filter: grayscale(1); }
.crypto-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.crypto-summary div { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.crypto-summary span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.crypto-list { display: grid; gap: 6px; }
.crypto-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(70px, 1fr) auto; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); border-radius: 12px; padding: 8px 10px; color: var(--text); text-align: left; font-family: inherit; }
.crypto-row:hover { border-color: var(--violet); background: rgba(138,60,255,0.1); }
.crypto-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crypto-name b { display: block; font-size: 14px; }
.crypto-name small { color: var(--muted); font-size: 11px; }
.crypto-ico { font-size: 22px; width: 28px; text-align: center; }
.crypto-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; white-space: nowrap; }
.crypto-price .tag { margin: 0; }
.crypto-chart { background: rgba(5,3,15,0.5); border: 1px solid var(--panel-border); border-radius: 12px; padding: 8px; margin: 8px 0; }
.crypto-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 4px; }
.crypto-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.crypto-stats div { display: flex; flex-direction: column; gap: 3px; font-size: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 6px; }
.crypto-stats span { color: var(--muted); font-size: 11px; }
.crypto-stats .tag { margin: 0; align-self: flex-start; }
@media (max-width: 600px) { .crypto-stats { grid-template-columns: repeat(2, 1fr); } .crypto-row { grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; } }

/* ===== Journal complet (écran de mort) ===== */
.journal-full .jentry { font-size: 13px; }
.journal-full .jyear { margin-top: 10px; }

/* ===== Succès ===== */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ach { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px; }
.ach.ok { background: rgba(255,209,102,0.1); border-color: rgba(255,209,102,0.45); box-shadow: 0 0 12px rgba(255,209,102,0.15); }
.ach.locked { opacity: .5; }
.ach.hard.ok { border-color: var(--pink); background: rgba(209,60,255,0.12); }
.ach-ico { font-size: 24px; }
.ach-name { font-weight: 700; font-size: 13px; margin-top: 4px; }
.ach-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ach-when { color: var(--yellow); }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%);
  background: #1b1446; border: 1px solid var(--violet); color: var(--text);
  padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 60;
  box-shadow: 0 0 20px rgba(138,60,255,0.4); animation: fadeIn .2s ease;
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(140,100,255,0.3); border-radius: 99px; }

/* ===== Écrans très larges (21:9, 32:9…) : image entière en hauteur, côtés remplis par la même image floutée ===== */
@media (min-aspect-ratio: 16/9) and (min-width: 1200px) {
  .title-bg, .rebirth-bg, .death-bg, .game-bg { background-image: none; }
  .title-bg::before, .rebirth-bg::before, .death-bg::before, .game-bg::before {
    content: ""; position: absolute; inset: -60px; z-index: 0;
    background: var(--bg) center / cover no-repeat; filter: blur(32px) brightness(0.45);
  }
  .title-bg::after, .rebirth-bg::after, .death-bg::after, .game-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background-image: var(--dim), var(--bg); background-size: auto, auto 100%; background-position: center; background-repeat: no-repeat;
  }
  /* Le journal reste lisible : pas de lignes de 2 000 px */
  .journal { padding-left: 6vw; padding-right: 6vw; }
  .jentry, .jyear { max-width: 960px; margin-left: auto; margin-right: auto; }
  .layout { grid-template-columns: 320px 1fr 340px; }
}

/* ===== Desktop ===== */
@media (min-width: 900px) {
  .layout { grid-template-columns: 280px 1fr 300px; }
  .panel { display: block; }
  .stats-compact { display: none; }
  .journal { padding: 18px 28px 28px; }
  .jentry { font-size: 15px; }
  /* PC : une seule ligne, les annexes s'intercalent (ordre fixé par « order ») */
  .actions { flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 10px; }
  .actions-annex, .actions-main { display: contents; }
  .act { flex: 0 1 140px; flex-direction: row; gap: 8px; font-size: 14px; padding: 12px 10px; }
  .act.act-annex { padding: 10px; }
  .act.act-rewind { flex: 0 0 46px; width: 46px; height: 46px; padding: 0; }
  .act .ico { font-size: 20px; }
  .act-age { transform: none; padding: 12px 10px; }
  .act-age:active { transform: scale(0.97); }
  .modal-backdrop { align-items: center; padding: 20px; }
  .modal { border-radius: 22px; border-bottom: 1px solid rgba(140,100,255,0.35); max-height: 80vh; }
  .modal-choices { padding-bottom: 16px; }
}

/* ===== 🗺️ Carte du monde (Voyages, Mes vies → Monde) : visités en vert, le reste en noir et blanc ===== */
.worldmap { margin: 8px 0 4px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #151925 0%, #0a0c12 100%); border: 1px solid rgba(255,255,255,.08); }
.worldmap svg { display: block; width: 100%; height: auto; }
.wm-c { fill: #5b5e66; stroke: #23252b; stroke-width: .6; stroke-linejoin: round; }
.wm-c.wm-v { fill: #2fd27a; stroke: #0f5a33; filter: drop-shadow(0 0 4px rgba(47,210,122,.45)); }
.wm-c.wm-home { stroke: #7cc4ff; stroke-width: 2.2; }
.wm-dot circle:last-child { fill: #d9d9d9; stroke: #1b1c21; stroke-width: 2; }
.wm-dot.wm-dot-v circle:last-child { fill: #3dff95; stroke: #0b3d22; }
.wm-dot.wm-dot-life circle:last-child { stroke: #fff; stroke-width: 2.5; }
.wm-hit { fill: transparent; stroke: none; }
.wm-click { cursor: pointer; }
.wm-click:hover circle:last-child { fill: #ffd84d; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12px; color: var(--muted, #9aa); margin-bottom: 6px; }
.wm-key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: #5b5e66; margin-right: 5px; vertical-align: -1px; }
.wm-key-v { background: #2fd27a; }
.wm-key-home { background: transparent; border: 2px solid #7cc4ff; }/* (la fenêtre garde la carte entière : c'est la liste en dessous qui défile) */
.modal-body:has(#wm-box) { flex-shrink: 0; max-height: 62vh; }
/* ===== Écran d'intro « Zylandiir Studio » (logo animé) =====
   Le logo apparaît derrière un rayon de lumière, les deux étoiles des « ii » s'allument, un reflet le traverse,
   des étincelles flottent (canvas, js/splash.js), puis fondu vers le jeu. Tout démarre quand l'image est chargée (.sp-go). */
#splash { position: fixed; inset: 0; z-index: 10000; background: #000; display: grid; place-items: center; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#splash.sp-out { animation: spOut .7s ease forwards; }
#splash.sp-out-fast { animation: spOut .38s ease forwards; }
@keyframes spOut { to { opacity: 0; visibility: hidden; } }
.sp-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-glow { position: absolute; width: min(110vw, 1100px); aspect-ratio: 3 / 1; border-radius: 50%; background: radial-gradient(ellipse, rgba(120,70,255,.42) 0%, rgba(60,140,255,.16) 38%, transparent 68%); filter: blur(14px); opacity: 0; }
.sp-go .sp-glow { animation: spGlow 3.6s ease .35s forwards; }
@keyframes spGlow { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1); } 70% { opacity: .7; } 85% { opacity: 1; } 100% { opacity: .8; transform: scale(1.05); } }
.sp-logo { position: relative; width: min(90vw, 860px); aspect-ratio: 3 / 1; }
.sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
/* 1. Révélation de gauche à droite derrière un rayon de lumière */
.sp-main { opacity: 0; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.sp-go .sp-main { animation: spReveal 1.25s cubic-bezier(.55,0,.25,1) .35s forwards, spFloat 3.2s ease-in-out 1.6s forwards; }
@keyframes spReveal { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(6px) brightness(2.2); transform: scale(1.06); } 60% { filter: blur(0) brightness(1.4); } 100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0) brightness(1); transform: scale(1); } }
@keyframes spFloat { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translateY(-4px) scale(1.012); } }
/* (le halo est sur le conteneur : sur l'image, le masque de révélation le coupait en rectangle) */
.sp-go .sp-logo { animation: spLogoGlow 3.4s ease-in-out 1.2s forwards; }
@keyframes spLogoGlow { 0% { filter: drop-shadow(0 0 0 rgba(140,90,255,0)); } 25% { filter: drop-shadow(0 0 18px rgba(140,90,255,.6)); } 55% { filter: drop-shadow(0 0 30px rgba(140,90,255,.85)) drop-shadow(0 0 60px rgba(70,170,255,.35)); } 100% { filter: drop-shadow(0 0 20px rgba(140,90,255,.6)); } }
.sp-beam { position: absolute; top: -18%; bottom: -18%; width: 3px; left: 0; opacity: 0; border-radius: 3px; background: linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 18px 6px rgba(160,120,255,.9), 0 0 50px 18px rgba(80,170,255,.5); }
.sp-go .sp-beam { animation: spBeam 1.25s cubic-bezier(.55,0,.25,1) .35s forwards; }
@keyframes spBeam { 0% { left: -2%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 101%; opacity: 0; } }
/* 2. Reflet : la même image, éclaircie, visible seulement dans une bande qui traverse le logo */
.sp-shine { opacity: 0; filter: brightness(2.6) saturate(.4); mix-blend-mode: screen; -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%); mask-image: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.sp-go .sp-shine { animation: spShineMove 1.15s ease-in-out 2.05s forwards; }
@keyframes spShineMove { 0% { opacity: .9; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { opacity: .9; -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* 3. Les étoiles des « ii » (et les petites de STUDIO) s'allument */
.sp-spark { position: absolute; width: 0; height: 0; pointer-events: none; }
.sp-spark::before, .sp-spark::after { content: ''; position: absolute; left: 0; top: 0; width: var(--s, 90px); height: 4px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(ellipse, #fff 0%, rgba(210,190,255,.9) 30%, transparent 70%); box-shadow: 0 0 12px rgba(190,160,255,.9); }
.sp-spark::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.sp-go .sp-spark::before { animation: spSparkA 1.1s ease-out var(--d, 1.55s) forwards; }
.sp-go .sp-spark::after { animation: spSparkB 1.1s ease-out var(--d, 1.55s) forwards; }
@keyframes spSparkA { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.25) rotate(20deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.35) rotate(60deg); opacity: .0; } }
@keyframes spSparkB { 0% { transform: translate(-50%, -50%) rotate(90deg) scale(0); opacity: 0; } 25% { transform: translate(-50%, -50%) rotate(110deg) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(150deg) scale(.35); opacity: 0; } }
.sp-skip { position: absolute; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.3); opacity: 0; animation: spSkipIn .6s ease 1.2s forwards; }
@keyframes spSkipIn { to { opacity: 1; } }
/* Animations réduites : le logo apparaît en fondu, sans rayon ni étincelles */
#splash.sp-calm .sp-main { animation: spSkipIn .5s ease forwards !important; -webkit-mask-image: none; mask-image: none; }
#splash.sp-calm .sp-beam, #splash.sp-calm .sp-shine, #splash.sp-calm .sp-spark, #splash.sp-calm .sp-stars { display: none; }
/* =====================================================================
   📱 VERSION TÉLÉPHONE (moins de 900 px de large) — js/mobile.js
   Rien de ce bloc ne s'applique sur ordinateur.
   ===================================================================== */
.m-more, .m-fab-wrap { display: none; }
@media (max-width: 899px) {
  html, body { overscroll-behavior: none; }          /* pas de rechargement si on tire l'écran trop loin */
  input, select, textarea { font-size: 16px !important; } /* pas de zoom automatique quand on écrit (iPhone) */

  /* ----- En-tête compact ----- */
  .hud { padding-left: 12px; padding-right: 10px; gap: 8px; }
  .hud-right { gap: 4px; }
  #btn-bank { display: none; }                        /* le relevé : en touchant l'argent, ou dans « ⋯ » */
  .m-more { display: inline-grid; place-items: center; position: relative; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
  .m-more-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 6px rgba(138,60,255,.9); }
  .hud-money { font-size: 15px; }

  /* ----- Jauges : des pastilles qu'on peut toucher ----- */
  .stats-compact { gap: 6px; padding: 7px 10px; }
  .stats-compact .stat { padding: 5px 8px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(140,100,255,.16); cursor: pointer; transition: transform .12s ease, background .2s ease; }
  .stats-compact .stat:active { transform: scale(.95); background: rgba(138,60,255,.16); }
  .stats-compact .stat-head { font-size: 13px; }
  .m-stat-big { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; }
  .m-stat-big b { font-family: var(--font-title); font-size: 46px; line-height: 1; color: #fff; }
  .m-stat-big span { color: var(--muted); font-size: 14px; }

  /* ----- Journal : une carte par année ----- */
  .journal { padding: 10px 10px 84px; }               /* (de la place sous la dernière carte pour le bouton ✦) */
  .m-year { background: rgba(10,7,28,.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--panel-border); border-left: 3px solid rgba(140,100,255,.45); border-radius: 16px; padding: 9px 13px 9px; margin-bottom: 10px; }
  .m-year.major { border-left-color: var(--cyan); background: rgba(16,22,60,.82); }
  .m-year.bad { border-left-color: var(--red); }
  .m-year.love { border-left-color: var(--pink); }
  .m-year.good { border-left-color: var(--green); }
  .m-year.money { border-left-color: var(--yellow); }
  .m-year.new { animation: fadeIn .35s ease; }
  .m-year > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
  .m-year > header b { font-family: var(--font-title); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
  .m-year > header span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .m-line { font-size: 14.5px; line-height: 1.45; padding: 7px 0; border-top: 1px solid rgba(140,100,255,.12); }
  .m-year > header + .m-line { border-top: none; padding-top: 2px; }
  .m-line.new { animation: fadeIn .4s ease; }
  .m-rel { margin-top: 6px; }
  .m-rel summary { list-style: none; display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: rgba(255,209,102,.07); border: 1px solid rgba(255,209,102,.18); cursor: pointer; }
  .m-rel summary::-webkit-details-marker { display: none; }
  .m-rel-solde { color: var(--muted); }
  .m-rel-more { margin-left: auto; font-size: 11px; color: var(--muted); }
  .m-rel-more::after { content: " ▾"; }
  .m-rel[open] .m-rel-more::after { content: " ▴"; }
  .m-rel-d { font-size: 12.5px; color: var(--muted); padding: 7px 10px 2px; display: grid; gap: 4px; }

  /* ----- Une seule barre en bas : Études · Carrière · ∞ Vieillir · Relations · Activités ----- */
  .actions { padding: 6px 6px calc(6px + var(--safe-b)); }
  .actions-annex { display: none; }
  body.tuto-on .actions-annex { display: grid; }      /* le tutoriel montre encore Patrimoine / Vibe / Crypto en bas */
  .actions-main { grid-template-columns: repeat(5, 1fr); align-items: center; gap: 2px; }
  #btn-rewind, #btn-end { display: none !important; } /* dans le menu « ⋯ » */
  .act { min-height: 54px; justify-content: center; font-size: 11px; font-weight: 600; padding: 6px 2px; }
  .act .ico { font-size: 24px; line-height: 1.1; }
  .act:active { background: rgba(138,60,255,.14); }
  .act-age { justify-self: center; width: 70px; height: 70px; min-height: 0; border-radius: 50%; padding: 0; gap: 0; transform: translateY(-14px); box-shadow: 0 0 0 4px rgba(5,3,15,.9), 0 0 26px rgba(138,60,255,.7); font-size: 11px; }
  .act-age .ico { font-size: 30px; }
  .act-age:not(:disabled):active { transform: translateY(-14px) scale(.93); }

  /* ----- ✦ Bouton et éventail : Patrimoine, Vibe, Crypto ----- */
  .m-fab-wrap { display: block; position: fixed; right: 14px; bottom: calc(96px + var(--safe-b)); z-index: 30; width: 54px; height: 54px; }
  .m-fab { position: relative; z-index: 2; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; border: 2px solid transparent;
    background: linear-gradient(#1a1240, #1a1240) padding-box, var(--grad) border-box; box-shadow: 0 8px 26px rgba(138,60,255,.55); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
  .m-fab span { display: block; transition: transform .3s ease; }
  .m-fab-wrap.open .m-fab { transform: scale(.92); }
  .m-fab-wrap.open .m-fab span { transform: rotate(135deg); }
  .m-fan-veil { position: fixed; inset: 0; background: rgba(2,1,10,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .m-fab-wrap.open .m-fan-veil { opacity: 1; pointer-events: auto; }
  .m-fan { position: absolute; left: 0; top: 0; width: 54px; height: 54px; z-index: 1; }
  .m-fan-btn { position: absolute; left: 0; top: 0; width: 54px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; color: #fff;
    opacity: 0; pointer-events: none; transform: translate(0, 0) scale(.3); transition: transform .32s cubic-bezier(.3,1.5,.5,1), opacity .2s ease; transition-delay: calc(var(--k) * 40ms); overflow: visible; }
  .m-fan-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; background: rgba(24,16,58,.96); border: 1px solid rgba(140,100,255,.5); box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 16px rgba(138,60,255,.35); }
  .m-fan-crypto .m-fan-ico { color: #f7931a; font-weight: 800; }
  .m-fan-lbl { font-size: 12px; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: rgba(10,7,28,.85); border: 1px solid rgba(140,100,255,.3); }
  .m-fab-wrap.open .m-fan-btn { opacity: 1; pointer-events: auto; }
  .m-fab-wrap.open .m-fan-btn[data-i="0"] { transform: translate(0, -118px); }
  .m-fab-wrap.open .m-fan-btn[data-i="1"] { transform: translate(-90px, -84px); }
  .m-fab-wrap.open .m-fan-btn[data-i="2"] { transform: translate(-122px, 4px); }
  .m-fan-btn.locked, .m-fan-btn.off { filter: grayscale(1); }
  .m-fan-btn.locked .m-fan-ico, .m-fan-btn.off .m-fan-ico { opacity: .55; }
  .m-fan-btn:active .m-fan-ico { transform: scale(.92); }

  /* ----- Menus en tiroir (on les ferme en glissant vers le bas) ----- */
  .modal { max-height: 88dvh; border-radius: 24px 24px 0 0; }
  .modal::before { content: ""; display: block; flex: 0 0 auto; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin: 9px auto 0; }
  .modal.m-fixed::before { display: none; }           /* fenêtre obligatoire (bac, événement…) : pas de poignée */
  .modal.m-fixed .modal-head { padding-top: 16px; }
  .modal-head { padding: 8px 16px 6px; }
  .modal-choices { gap: 9px; }
  /* Texte + liste de boutons (ex. menu ☰ avec les vies passées) : un trait sépare les deux zones qui défilent */
  .modal-body:not(:empty) + .modal-choices { border-top: 1px solid rgba(140,100,255,.22); padding-top: 10px; }
  .modal.m-event .modal-body + .modal-choices { border-top: none; }
  .choice { min-height: 52px; padding: 13px 15px; border-radius: 14px; font-size: 15.5px; }
  /* Détail sous le libellé : à gauche (la règle « à gauche » du haut du fichier était écrasée par celle « à droite » de l'ordinateur) */
  .choice small { text-align: left; }
  .choice:active { background: rgba(138,60,255,.2); }

  /* Activités : une grille de tuiles sur deux colonnes */
  .modal.th-act .modal-choices { grid-template-columns: 1fr 1fr; }
  .modal.th-act .choice { flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 104px; padding: 12px 8px; gap: 4px; }
  .modal.th-act .choice > span { white-space: normal; line-height: 1.25; font-weight: 600; font-size: 14px; }
  .modal.th-act .choice .ch-ico { display: block; font-size: 30px; margin: 0 auto 6px; }
  .modal.th-act .choice small { text-align: center; font-size: 11.5px; }
  .modal.th-act .choice.ch-back { grid-column: 1 / -1; min-height: 50px; flex-direction: row; }

  /* Événements : une grande carte, les choix en bas à portée du pouce */
  .modal.m-event { min-height: 56dvh; }
  .modal.m-event::before { display: none; }
  .modal.m-event .modal-head { padding-top: 16px; }
  .modal.m-event .modal-head h3 { font-family: var(--font-title); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
  .modal.m-event .modal-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 20px 14px; }
  .modal.m-event .modal-body p { font-size: 17.5px; line-height: 1.55; }
  .modal.m-event .modal-body p.muted { font-size: 14px; line-height: 1.45; }
  .modal.m-event .modal-choices { gap: 10px; padding-bottom: calc(18px + var(--safe-b)); }
  .modal.m-event .choice { min-height: 58px; font-size: 16px; font-weight: 600; padding: 15px 16px; justify-content: center; align-items: center; text-align: center; }
  .modal.m-event .choice small { text-align: center; }
}
/* Connexion : rappel qu'un compte Triverse marche aussi */
.soul-triverse { font-size: 13px; color: var(--muted); background: rgba(79,216,255,.06); border: 1px solid rgba(79,216,255,.2); border-radius: 12px; padding: 8px 12px; margin: 8px 0 10px; }
.soul-triverse b { color: var(--text); }
/* Conditions de Liforever (inscription et première connexion d'un compte Zylandiir Studio) */
.auth-terms-lf { align-items: flex-start; line-height: 1.35; }
.auth-terms-lf input { margin-top: 2px; flex-shrink: 0; }
.auth-legal { margin: 6px 0 4px; font-size: 12.5px; }
.auth-legal summary { cursor: pointer; color: var(--cyan); font-size: 13px; }
.auth-legal[open] { background: rgba(255,255,255,.03); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 10px; }
.auth-legal p { margin: 6px 0 0; }
/* Suppression du compte : abonnement Premium */
.del-premium { background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.35); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.del-premium p { margin: 0 0 6px; }
.del-premium a { color: var(--yellow); }
/* Site payant : plus de connexion Internet pendant la partie (Cloud.lockOffline) */
.lf-offline { position: fixed; inset: 0; z-index: 2147480000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,2,12,.88); backdrop-filter: blur(6px); }
.lf-offline-box { max-width: 380px; width: 100%; text-align: center; background: linear-gradient(180deg, #16103a, #0b0820); border: 1px solid rgba(140,100,255,.4); border-radius: 20px; padding: 22px 20px; box-shadow: 0 10px 60px rgba(138,60,255,.35); }
.lf-offline-ico { font-size: 42px; margin-bottom: 6px; }
.lf-offline-box h3 { margin: 0 0 8px; font-size: 19px; }
.lf-offline-box p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.lf-offline-box .choice { width: 100%; justify-content: center; }