/* ============================================================================
   ecoheros.fun — Jeux sur téléphone (moteur /mobile)
   Le jeu EST un téléphone : barre de jeu (chrono, indices, menu) au-dessus,
   puis l'écran d'un téléphone trouvé (verrouillage, applis, messages en direct…).
   Sur ordinateur, le même jeu s'affiche dans un cadre de téléphone.
   ========================================================================== */
:root {
  --bg: #07080a; --ink: #f3f4f6; --muted: #8e93a1; --line: rgba(255,255,255,.09);
  --surf: #15171c; --surf-2: #1e2128; --surf-3: #2a2e37;
  --blue: #2f7cf6; --green: #34c759; --red: #ff453a; --amber: #ffb547; --amber-2: #ffd08a;
  --game: #0e0f12;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", var(--sys);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sys); overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; -webkit-user-select: text; user-select: text; }
a { color: var(--amber-2); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Cadre : plein écran sur téléphone, téléphone dessiné sur ordinateur ---------- */
.stage { position: fixed; inset: 0; display: grid; place-items: center; background: #050506 center/cover no-repeat; }
.stage::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(28px) brightness(.35); transform: scale(1.1); }
.device { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #000; overflow: hidden; }
.aside-note { display: none; }
@media (min-width: 700px) and (min-height: 640px) {
  .device { width: min(390px, calc((100vh - 48px) * 390 / 844)); height: min(844px, calc(100vh - 48px)); border-radius: 46px;
    box-shadow: 0 0 0 11px #111216, 0 0 0 12px #2b2d33, 0 40px 120px rgba(0,0,0,.8); }
  .aside-note { display: block; position: absolute; left: calc(50% + 250px); top: 50%; transform: translateY(-50%); width: 240px; color: #c9ccd4; font-size: 14px; }
  .aside-note b { display: block; font: 600 18px var(--display); color: var(--amber-2); margin-bottom: 6px; }
  .aside-note button { margin-top: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 14px; font-size: 13px; }
}
@media (min-width: 700px) and (max-width: 1060px) { .aside-note { display: none; } }

/* ---------- Barre de jeu (hors du téléphone de Lina) ---------- */
.gamebar { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(4px + var(--safe-t)) 8px 4px; background: var(--game); border-bottom: 1px solid #22242a; font: 500 13px var(--display); z-index: 30; }
@media (min-width: 700px) and (min-height: 640px) { .gamebar { padding-top: 12px; padding-left: 22px; padding-right: 22px; } }
.gb-btn { min-width: 38px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; background: #1a1c21; color: #e9e3d6; }
.gb-btn:active { background: #262930; }
.gb-ep { color: var(--amber-2); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-sp { flex: 1; }
.gb-clock { font: 500 14px var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.gb-clock.pen { color: var(--red); transition: color .2s; }
.gb-verdict { background: var(--amber); color: #1a1207; font-weight: 700; animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(255,181,71,.25); } }

/* ---------- Le téléphone ---------- */
.phone { position: relative; flex: 1; overflow: hidden; background: #000; }
.status { position: absolute; left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; padding: 0 18px; font: 600 14px var(--sys); z-index: 20; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.status .sp { flex: 1; }
.status .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; margin-right: 6px; }
.status .bars i { width: 3px; background: #fff; border-radius: 1px; } .status .bars i.off { opacity: .35; }
.status .net { font-size: 12px; margin-right: 7px; }
.batt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.batt .cell { position: relative; width: 24px; height: 12px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 4px; padding: 1px; }
.batt .cell::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: rgba(255,255,255,.8); border-radius: 0 1px 1px 0; }
.batt .lvl { display: block; height: 100%; background: #fff; border-radius: 1.5px; }
.batt.low .lvl { background: var(--red); }
.views { position: absolute; inset: 0; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); padding-top: 30px; animation: vin .22s ease-out; }
.view.back-anim { animation: vback .2s ease-out; }
@keyframes vin { from { transform: translateX(18px); opacity: .4; } }
@keyframes vback { from { transform: translateX(-18px); opacity: .4; } }
.view.fade { animation: vfade .3s ease-out; }
@keyframes vfade { from { opacity: 0; transform: scale(1.04); } }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.nav { flex: none; display: flex; align-items: center; min-height: 48px; padding: 0 8px; gap: 4px; border-bottom: 1px solid var(--line); background: rgba(12,13,16,.94); backdrop-filter: blur(12px); }
.nav h1 { flex: 1; margin: 0; font: 600 17px var(--sys); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 44px; }
.nav .back { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); font-size: 30px; line-height: 1; }
.nav .act { width: 44px; height: 44px; display: grid; place-items: center; color: var(--blue); font-size: 20px; margin-left: -44px; }
.big-title { font: 700 32px var(--sys); margin: 10px 16px 8px; }
.home-bar { position: absolute; left: 50%; bottom: calc(6px + var(--safe-b)); width: 36%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.55); transform: translateX(-50%); z-index: 25; }
.home-bar-hit { position: absolute; left: 25%; right: 25%; bottom: 0; height: calc(22px + var(--safe-b)); z-index: 26; }

/* ---------- Écran verrouillé ---------- */
.lock { background: #000 center/cover no-repeat; }
.lock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 30%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.7)); }
.lock > * { position: relative; }
.lk-date { text-align: center; font: 600 17px var(--sys); margin-top: 26px; opacity: .92; }
.lk-time { text-align: center; font: 700 86px/1 var(--sys); letter-spacing: -.02em; margin-top: 2px; }
.lk-notifs { flex: 1; overflow-y: auto; padding: 18px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.notif { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; padding: 11px 12px; border-radius: 18px; background: rgba(40,42,48,.62); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); animation: nin .35s ease-out; }
@keyframes nin { from { transform: translateY(-10px); opacity: 0; } }
.notif .ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.notif .ico svg { width: 22px; height: 22px; }
.notif .txt { flex: 1; min-width: 0; }
.notif .hd { display: flex; font-size: 14px; } .notif .hd b { flex: 1; font-weight: 600; } .notif .hd span { color: rgba(255,255,255,.6); font-size: 13px; }
.notif .bd { font-size: 14.5px; color: rgba(255,255,255,.9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif.open .bd { -webkit-line-clamp: unset; }
.lk-foot { padding: 10px 20px calc(30px + var(--safe-b)); text-align: center; }
.lk-open { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(14px); font-weight: 600; }
.pad { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding-top: 30px; animation: vfade .2s; }
.pad h2 { margin: 0; font: 500 19px var(--sys); }
.pad .who { font-size: 14px; color: rgba(255,255,255,.7); margin-top: -12px; }
.dots { display: flex; gap: 18px; height: 16px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; }
.dots i.on { background: #fff; }
.dots.bad { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; }
.key { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 400 32px/1 var(--sys); }
.key small { font: 600 10px var(--sys); letter-spacing: .18em; margin-top: 2px; opacity: .8; }
.key:active { background: rgba(255,255,255,.4); }
.key.txt { background: none; font-size: 16px; }
@media (max-height: 640px) { .keys { grid-template-columns: repeat(3, 64px); gap: 10px 20px; } .key { width: 64px; height: 64px; font-size: 26px; } .lk-time { font-size: 64px; } }

/* ---------- Accueil ---------- */
.home { background: #000 center/cover no-repeat; }
.home::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); }
.grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; padding: 26px 14px; align-content: start; }
.app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.7); position: relative; }
.app .ic { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); position: relative; }
.app .ic svg { width: 36px; height: 36px; }
.app:active .ic { filter: brightness(.75); }
.app .badge { position: absolute; top: -6px; right: calc(50% - 38px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: #fff; font: 600 13px/22px var(--sys); text-align: center; text-shadow: none; }
.app.new .ic { animation: appear .9s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 0 0 3px rgba(255,208,138,.8), 0 0 24px rgba(255,181,71,.6); }
@keyframes appear { from { transform: scale(0); } }
.dock { position: absolute; left: 10px; right: 10px; bottom: calc(18px + var(--safe-b)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 6px; border-radius: 30px; background: rgba(60,62,70,.4); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.dock .app .nm { display: none; }
.home-hint { position: relative; margin: 0 22px; text-align: center; font-size: 13px; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000; }

/* ---------- Listes ---------- */
.list { margin: 0; padding: 0; list-style: none; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; text-align: left; min-height: 64px; position: relative; }
.row::after { content: ""; position: absolute; left: 74px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.row.plain::after { left: 16px; }
.row:active { background: var(--surf-2); }
.row .main { flex: 1; min-width: 0; }
.row .t { display: flex; gap: 8px; align-items: baseline; }
.row .t b { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.row .s { color: var(--muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .unread { position: absolute; left: 5px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--blue); }
.row .chev { color: #555a66; font-size: 20px; }
.av { flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(#6b7080, #4a4e5a); display: grid; place-items: center; font: 600 19px var(--sys); color: #fff; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 34px; height: 34px; font-size: 14px; }
.av.xl { width: 112px; height: 112px; font-size: 44px; }
.section { padding: 18px 16px 6px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.empty { padding: 40px 24px; text-align: center; color: var(--muted); }
.tabs { flex: none; display: flex; border-top: 1px solid var(--line); background: rgba(12,13,16,.96); padding-bottom: calc(14px + var(--safe-b)); }
.tabs button { flex: 1; padding: 9px 0 3px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabs button[aria-pressed="true"] { color: var(--blue); }
.tabs button b { font-size: 20px; font-weight: 400; line-height: 1; }
.seg { display: flex; margin: 10px 16px; padding: 2px; border-radius: 9px; background: var(--surf-2); }
.seg button { flex: 1; padding: 7px 0; border-radius: 7px; font-size: 14px; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--surf-3); }

/* ---------- Conversation ---------- */
.thread-head { flex-direction: column; min-height: 0; padding: 4px 8px 8px; position: relative; }
.thread-head .back { position: absolute; left: 8px; top: 12px; }
.thread-head .av { width: 44px; height: 44px; font-size: 17px; }
.thread-head .nm { font-size: 12px; margin-top: 3px; }
.msgs { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.day { align-self: center; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.b { max-width: 78%; padding: 8px 13px; border-radius: 19px; font-size: 16px; line-height: 1.32; word-wrap: break-word; animation: bin .25s ease-out; -webkit-user-select: text; user-select: text; }
@keyframes bin { from { transform: translateY(6px) scale(.97); opacity: 0; } }
.b.them { align-self: flex-start; background: var(--surf-3); border-bottom-left-radius: 6px; }
.b.me { align-self: flex-end; background: var(--blue); border-bottom-right-radius: 6px; }
.b.gap { margin-top: 8px; }
.b.typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.b.typing i { width: 8px; height: 8px; border-radius: 50%; background: #9aa0ad; animation: blink 1.2s infinite; }
.b.typing i:nth-child(2) { animation-delay: .2s; } .b.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 30% { opacity: .25; transform: translateY(-2px); } }
.stamp { font-size: 11px; color: var(--muted); margin: 1px 6px 4px; }
.stamp.me { align-self: flex-end; } .stamp.them { align-self: flex-start; }
.compose { flex: none; padding: 8px 10px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(12,13,16,.96); }
.fake-input { display: flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid #353944; border-radius: 19px; color: #6c7180; font-size: 15px; }
.chips { display: flex; flex-direction: column; gap: 7px; }
.chips .lbl { font-size: 12px; color: var(--muted); margin: 0 4px 3px; }
.chip { text-align: left; padding: 10px 14px; border-radius: 18px; border: 1.5px solid var(--blue); color: #cfe0ff; font-size: 15px; background: rgba(47,124,246,.08); animation: bin .25s; }
.chip:active { background: rgba(47,124,246,.35); }
.chip.tried { opacity: .45; border-style: dashed; }
.chip.dossier { border-color: var(--amber); color: var(--amber-2); background: rgba(255,181,71,.1); font-weight: 600; }

/* ---------- Photos ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pgrid button { aspect-ratio: 1; background: #222 center/cover no-repeat; position: relative; }
.albums { display: flex; gap: 10px; padding: 4px 16px 12px; overflow-x: auto; }
.album { flex: none; width: 118px; text-align: left; font-size: 14px; }
.album .cv { width: 118px; height: 118px; border-radius: 10px; background: var(--surf-2) center/cover no-repeat; display: grid; place-items: center; font-size: 34px; margin-bottom: 5px; }
.album.locked .cv { background-image: none !important; }
.album span { color: var(--muted); font-size: 13px; display: block; }
.viewer { position: absolute; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; padding-top: 30px; animation: vfade .2s; }
.viewer .nav { background: rgba(0,0,0,.6); border: 0; position: relative; z-index: 2; }
.viewer .nav h1 { font-size: 14px; font-weight: 500; line-height: 1.2; }
.viewer .nav h1 small { display: block; color: var(--muted); font-size: 12px; }
.vp { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.ph { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; overflow: hidden; }
.ph img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ph canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lbl { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; pointer-events: none; line-height: 1.05; white-space: nowrap; }
.lbl.plate { background: #fdfdfb; color: #b3141c; border: .06em solid #b3141c; border-radius: .14em; font-family: "Arial Narrow", Arial, sans-serif; font-weight: 700; letter-spacing: .04em; padding-left: .9em; box-shadow: inset 0 0 .3em rgba(0,0,0,.2); }
.lbl.plate::before { content: "B"; position: absolute; left: 0; top: 0; bottom: 0; width: .8em; background: #1c49b8; color: #fff; font-size: .5em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .2em; }
.lbl.tag { background: #f1ede4; color: #232323; font-family: Arial, sans-serif; font-weight: 700; box-shadow: inset 0 0 .6em rgba(80,60,20,.35); mix-blend-mode: multiply; }
.lbl.tag span:first-child { color: #c0161c; }
.lbl.doc { background: rgba(245,243,236,.92); color: #242424; font-family: var(--mono); align-items: flex-start; padding: 0 .4em; transform: rotate(-2deg); mix-blend-mode: multiply; }
.lbl.doc span:first-child { font-weight: 700; }
.zone-flash { position: absolute; border: 2px solid var(--amber); border-radius: 6px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); animation: zf 1.6s ease-out forwards; pointer-events: none; }
@keyframes zf { 70% { opacity: 1; } to { opacity: 0; } }
.vfoot { position: relative; z-index: 2; padding: 10px 16px calc(14px + var(--safe-b)); background: rgba(0,0,0,.65); font-size: 14px; color: #d8dbe2; min-height: 48px; }
.vfoot .tip { color: var(--muted); font-size: 12.5px; }

/* ---------- Feuilles (panneaux du bas) ---------- */
.sheet-veil { position: absolute; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; animation: vfade .15s; }
.sheet { width: 100%; max-height: 88%; display: flex; flex-direction: column; background: var(--surf); border-radius: 18px 18px 0 0; padding-bottom: var(--safe-b); animation: sin .25s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
@keyframes sin { from { transform: translateY(40%); opacity: .5; } }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: #444852; margin: 8px auto 2px; flex: none; }
.sheet .sh { flex: none; display: flex; align-items: center; padding: 6px 8px 8px 18px; }
.sheet .sh h2 { flex: 1; margin: 0; font: 600 18px var(--sys); }
.sheet .sh button { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--muted); }
.sheet .sb { overflow-y: auto; padding: 0 18px 18px; -webkit-user-select: text; user-select: text; }
.sheet.game { background: #16140f; border-top: 2px solid var(--amber); }
.sheet.game .sh h2 { font-family: var(--display); color: var(--amber-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.doc-text { font: 14px/1.55 var(--mono); background: #f3f0e6; color: #1b1b1b; padding: 14px; border-radius: 6px; white-space: pre-line; }
.note-body { padding: 4px 18px 30px; font-size: 17px; line-height: 1.5; -webkit-user-select: text; user-select: text; }
.note-body .muted, .muted { color: var(--muted); }
.mail-head { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.mail-head b { display: block; font-size: 19px; margin-bottom: 4px; }

/* ---------- Téléphone : appels, contact, lecteur ---------- */
.call-ico { width: 18px; text-align: center; color: var(--muted); }
.row.missed .t b { color: var(--red); }
.contact { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; }
.contact h2 { margin: 6px 0 0; font: 600 26px var(--sys); text-align: center; }
.contact .about { color: var(--muted); text-align: center; }
.contact .acts { display: flex; gap: 12px; margin-top: 10px; }
.contact .acts button { width: 76px; padding: 10px 0 8px; border-radius: 12px; background: var(--surf-2); color: var(--blue); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.contact .acts button b { font-size: 20px; font-weight: 400; }
.av-btn { position: relative; border-radius: 50%; }
.av-btn .zoomme { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--surf-3); display: grid; place-items: center; font-size: 13px; border: 2px solid var(--bg); }
.calling { position: absolute; inset: 0; z-index: 50; background: linear-gradient(#1d2029, #0c0d10); display: flex; flex-direction: column; align-items: center; padding: 80px 20px calc(50px + var(--safe-b)); gap: 12px; animation: vfade .2s; }
.calling h2 { margin: 12px 0 0; font: 400 30px var(--sys); } .calling p { margin: 0; color: var(--muted); }
.calling .sp { flex: 1; }
.hang { width: 72px; height: 72px; border-radius: 50%; background: var(--red); font-size: 30px; }
.player { display: flex; flex-direction: column; gap: 14px; }
.player .pl-row { display: flex; align-items: center; gap: 14px; }
.play-btn { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--blue); color: #fff; font-size: 22px; display: grid; place-items: center; }
.play-btn.on { background: var(--surf-3); }
.wave { flex: 1; height: 38px; display: flex; align-items: center; gap: 2px; }
.wave i { flex: 1; background: #3b4050; border-radius: 2px; }
.wave i.done { background: var(--blue); }
.player .time { font: 13px var(--mono); color: var(--muted); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 9px 14px; border-radius: 999px; background: var(--surf-2); font-size: 14px; font-weight: 500; }
.pill[aria-pressed="true"] { background: #203a66; color: #cfe0ff; }
.transcript { padding: 12px 14px; border-radius: 12px; background: var(--surf-2); font-size: 15px; line-height: 1.5; font-style: italic; }
.bg-text { padding: 12px 14px; border-radius: 12px; background: #1d2a1f; color: #cfeccf; font-size: 14.5px; line-height: 1.5; }

/* ---------- Plans ---------- */
.mapbox { position: relative; margin: 0 12px; border-radius: 16px; overflow: hidden; background: #e9e5da; aspect-ratio: 1 / 1.05; }
.mapbox svg { width: 100%; height: 100%; display: block; }
.pin { cursor: pointer; }
.pin circle.dot { fill: #e0443a; stroke: #fff; stroke-width: .8; }
.pin.hl circle.dot { fill: var(--blue); }
.pin text { font: 600 3.1px var(--sys); fill: #262626; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: .9px; }
.mapbox.picking .pin circle.halo { fill: rgba(47,124,246,.25); animation: halo 1.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.6); opacity: .3; } }
.pick-bar { margin: 10px 12px 0; }
.big-btn { width: 100%; padding: 13px 16px; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 600; font-size: 16px; }
.big-btn.ghost { background: var(--surf-2); color: var(--ink); }
.tl { padding: 4px 16px 30px; }
.tl li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tl li span { color: var(--muted); font: 13px var(--mono); width: 96px; flex: none; padding-top: 2px; }

/* ---------- Coffre, schéma ---------- */
.vault { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px 24px; background: radial-gradient(circle at 50% 30%, #1c2533, #07080a 70%); text-align: center; }
.vault .lockico { font-size: 54px; }
.vault form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.vault input { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid #3a4150; background: #0e1116; color: #fff; font: 600 20px var(--mono); text-align: center; letter-spacing: .2em; text-transform: uppercase; }
.vault .hint { font-size: 13px; color: var(--muted); font-style: italic; }
.vault.bad input { border-color: var(--red); animation: shake .4s; }
.pattern { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(5,6,8,.9); backdrop-filter: blur(16px); padding-top: 30px; animation: vfade .2s; }
.pattern h2 { margin: 0; font: 500 18px var(--sys); text-align: center; padding: 0 30px; }
.pat { width: 264px; height: 264px; position: relative; touch-action: none; }
.pat svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pat .pd { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #d9dce3; transition: transform .1s; }
.pat .pd.on { background: var(--blue); transform: scale(1.35); }
.pat.bad .pd.on { background: var(--red); }
.pattern .cancel { color: var(--blue); padding: 12px 20px; }

/* ---------- Bannière de notification, messages éphémères ---------- */
.banner { position: absolute; left: 8px; right: 8px; top: 34px; z-index: 70; transform: translateY(calc(-100% - 60px)); visibility: hidden; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), visibility 0s .35s; }
.banner.show { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.banner .notif { background: rgba(38,40,46,.92); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toasts { position: absolute; left: 12px; right: 12px; bottom: calc(76px + var(--safe-b)); z-index: 80; display: flex; flex-direction: column; gap: 6px; pointer-events: none; align-items: center; }
.toast { padding: 10px 16px; border-radius: 14px; background: rgba(28,30,36,.96); font-size: 14.5px; box-shadow: 0 8px 24px rgba(0,0,0,.5); animation: nin .25s; max-width: 100%; text-align: center; }
.toast.bad { background: #4a1714; } .toast.ok { background: #173b24; } .toast.game { background: #2d220f; color: var(--amber-2); }

/* ---------- Écrans du jeu (titre, épisode, fin) ---------- */
.screen { position: absolute; inset: 0; z-index: 100; overflow-y: auto; background: #07080a center/cover no-repeat; display: flex; flex-direction: column; animation: vfade .35s; -webkit-user-select: text; user-select: text; }
.screen::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(7,8,10,.25) 0%, rgba(7,8,10,.72) 42%, #07080a 78%); pointer-events: none; }
.screen .inner { position: relative; margin-top: auto; padding: calc(40px + var(--safe-t)) 22px calc(28px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.screen .kicker { margin: 0; font: 600 12px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.screen h1 { margin: 0; font: 700 44px/1 var(--display); letter-spacing: -.02em; }
.screen h2 { margin: 0; font: 700 30px/1.08 var(--display); }
.screen .sub { margin: -4px 0 4px; font: 500 19px var(--display); color: var(--amber-2); }
.screen p { margin: 0; }
.screen .story p { font-size: 16.5px; line-height: 1.55; color: #e4e5e9; margin-bottom: 10px; }
.screen .muted { color: #9ea3b0; font-size: 14px; }
.screen .small { font-size: 12.5px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 20px; border-radius: 14px; background: var(--amber); color: #1a1207; font: 700 16px var(--display); text-decoration: none; text-align: center; }
.btn:active { filter: brightness(.9); }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid rgba(255,255,255,.14); }
.btn[disabled] { opacity: .45; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; padding: 0; list-style: none; }
.facts li { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12.5px; color: #d7d9df; }
.tuto { display: flex; flex-direction: column; gap: 12px; }
.tuto div { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.tuto div > b { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,181,71,.15); font-size: 18px; }
.tuto p { font-size: 14.5px; line-height: 1.45; color: #dcdee4; }
.tuto p strong { color: #fff; }
.stars { font-size: 34px; color: var(--amber); letter-spacing: 4px; } .stars .off { color: #3a3c42; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kpi { padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.06); text-align: center; }
.kpi b { display: block; font: 700 18px var(--display); } .kpi span { font-size: 11px; color: #9ea3b0; }
.epilogue { font-size: 16px; line-height: 1.55; color: #e4e5e9; }
.ending-text { padding: 14px; border-left: 3px solid var(--amber); background: rgba(255,181,71,.06); border-radius: 0 12px 12px 0; }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid #3a3d45; background: #111317; color: #fff; font-size: 16px; }
.board { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.board th, .board td { padding: 6px 4px; border-bottom: 1px solid #25272d; text-align: left; } .board th { color: #9ea3b0; font-weight: 500; }
.q { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.q > p { margin: 0 0 2px; font-weight: 600; font-size: 15.5px; }
.opt { text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid #3a3d45; background: #1d1c18; font-size: 14.5px; }
.opt[aria-pressed="true"] { border-color: var(--amber); background: rgba(255,181,71,.14); color: #fff; }
.hint-p { padding: 12px 0; border-bottom: 1px solid #2c2a24; }
.hint-p h3 { margin: 0 0 8px; font: 600 15.5px var(--display); }
.hint-p .h { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: #221f18; font-size: 14.5px; line-height: 1.45; }
.hint-p .hbtn { margin-top: 4px; padding: 9px 13px; border-radius: 10px; background: rgba(255,181,71,.15); color: var(--amber-2); font-size: 14px; font-weight: 600; }
.vol { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .vol input { width: 100%; accent-color: var(--amber); }
.chk { display: flex; gap: 10px; align-items: center; font-size: 15px; } .chk input { width: 20px; height: 20px; accent-color: var(--amber); }

/* comptes (assets/account.js) et achats */
.auth { display: flex; flex-direction: column; gap: 10px; }
.auth-switch { display: flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.07); }
.auth-switch button { flex: 1; padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: 600; color: #aeb2bc; }
.auth-switch button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #aeb2bc; }
.auth-field input { padding: 13px 14px; border-radius: 12px; border: 1px solid #3a3d45; background: #111317; color: #fff; font-size: 16px; }
.auth-hint, .auth-foot { margin: 0; font-size: 12.5px; color: #8e93a1; }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #cfd2d9; } .auth-check input { width: 20px; height: 20px; flex: none; accent-color: var(--amber); }
.auth-go { padding: 15px; border-radius: 14px; background: var(--amber); color: #1a1207; font: 700 16px var(--display); }
.auth-msg { margin: 0; font-size: 13.5px; min-height: 1em; } .auth-msg.bad, .bad { color: #ff8a80; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.buy, .signup { display: flex; flex-direction: column; gap: 10px; }
.buy-opts { display: flex; flex-direction: column; gap: 8px; }
.signup-ok { color: #9fe3b0; font-size: 14.5px; }