/* Rétro Arcade — styles */
:root {
  --bg: #0d0b14;
  --bg-2: #13101d;
  --panel: #181425;
  --panel-2: #201b31;
  --line: #2c2541;
  --line-2: #3a3156;
  --text: #f1edf9;
  --muted: #9d94b8;
  --accent: #ff3d6e;
  --accent-2: #ffb547;
  --cyan: #3ee0d0;
  --ok: #3ddc84;
  --ko: #ff5a5a;
  --radius: 14px;
  --pad-body-1: #2a2440;
  --pad-body-2: #1a1629;
  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pixel: 'Silkscreen', 'Courier New', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 61, 110, .13), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(62, 224, 208, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body::before {               /* trame CRT discrète */
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }
code { font-size: .88em; background: var(--panel-2); padding: .1em .4em; border-radius: 6px; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pixel { font-family: var(--pixel); font-weight: 400; letter-spacing: .02em; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.15em;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  font: 600 15px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s;
}
.btn:hover { border-color: #51467a; background: #282140; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .tab:focus-visible, .card-link:focus-visible, .map-cell:focus-visible, .dropzone:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #12040a;
  box-shadow: 0 4px 0 #a11741, 0 10px 30px -10px rgba(255, 61, 110, .7);
}
.btn.primary:hover { background: #ff5a83; }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #a11741; }
.btn.ghost { background: transparent; }
.btn.small { padding: .55em .9em; font-size: 14px; }
.btn.wide { width: 100%; padding: .95em; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--panel-2); }

/* ---------- Barre du haut ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: rgba(13, 11, 20, .75);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-family: var(--pixel); font-size: 17px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent); position: relative;
  box-shadow: 0 0 20px -2px rgba(255, 61, 110, .7);
}
.brand-mark::before { content: ''; position: absolute; inset: 9px 5px; border-radius: 6px; background: var(--bg); }
.brand-mark::after {
  content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; right: 9px; top: 13px; background: var(--accent);
  box-shadow: -10px 0 0 var(--accent);
}
.brand-mark.big { width: 64px; height: 64px; border-radius: 16px; }
.brand-mark.big::before { inset: 19px 10px; border-radius: 12px; }
.brand-mark.big::after { width: 8px; height: 8px; right: 18px; top: 28px; box-shadow: -22px 0 0 var(--accent); }

.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .55em .9em; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px;
}
.topnav a:hover { color: var(--text); background: var(--panel); }
.topnav a.is-active { color: var(--text); background: var(--panel-2); }
.pad-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4a4262; display: inline-block; flex-shrink: 0;
  transition: background .2s, box-shadow .2s;
}
.pad-dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }

/* ---------- Mise en page ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) 60px; }
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.lib-head h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 4px; line-height: 1.15; }
.lib-head p { margin: 0; }
.lib-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; min-width: 240px;
  color: var(--muted);
}
.search:focus-within { border-color: var(--cyan); }
.search input { background: none; border: 0; outline: none; color: var(--text); font: 15px var(--font); padding: .7em 0; width: 100%; }

/* ---------- Onglets ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: .55em .95em; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font: 500 14px var(--font); cursor: pointer;
}
.tab i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); }
.tab span { font-size: 12px; background: var(--bg); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-color: var(--c, var(--accent)); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }
.tabs.compact { margin-bottom: 18px; }

/* ---------- Reprendre ---------- */
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.recent { margin-bottom: 30px; }
.recent-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.recent-item {
  display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 280px;
  padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none;
}
.recent-item:hover { border-color: var(--c); }
.recent-thumb {
  width: 46px; height: 46px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--c), #0d0b14);
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-txt { min-width: 0; display: flex; flex-direction: column; }
.recent-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.recent-txt small { color: var(--muted); }

/* ---------- Grille des jeux ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 30px 22px; align-items: end; }
.card-meta { min-height: 64px; }
.card { position: relative; }
.card-link { display: block; text-decoration: none; border-radius: var(--radius); }
.cover {
  position: relative; aspect-ratio: var(--cr, 0.75); border-radius: var(--radius); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-link:hover .cover, .card-link:focus-visible .cover {
  transform: translateY(-4px); border-color: var(--c);
  box-shadow: 0 16px 34px -16px var(--c), 0 0 0 1px var(--c);
}
.cover-gen {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #000) 0%, #12101b 75%),
    var(--c);
}
.cover-gen::before {      /* motif pixel */
  content: ''; position: absolute; inset: 0; opacity: .14;
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px;
  mask-image: linear-gradient(180deg, #000, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.cover-console {
  position: relative; align-self: flex-start;
  font-family: var(--pixel); font-size: 11px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.35);
}
.cover-title {
  position: relative; font-family: var(--pixel); font-size: 17px; line-height: 1.2; word-break: break-word;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.play-badge {
  position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #12040a;
  opacity: 0; transform: scale(.8) translateY(6px); transition: .18s ease;
  box-shadow: 0 8px 20px -6px rgba(255, 61, 110, .9);
}
.play-badge svg { fill: currentColor; stroke: none; width: 22px; height: 22px; margin-left: 2px; }
.card-link:hover .play-badge, .card-link:focus-visible .play-badge { opacity: 1; transform: none; }
.card-meta { padding: 10px 2px 0; }
.card-meta h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta p { margin: 5px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
  color: color-mix(in srgb, var(--c, var(--accent)) 60%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
  white-space: nowrap;
}
.card-menu {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; border: 0; color: #fff; background: rgba(10, 8, 16, .65);
  backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.card-menu svg { fill: currentColor; stroke: none; }
.card:hover .card-menu, .card-menu:focus-visible { opacity: 1; }
@media (hover: none) { .card-menu { opacity: 1; } }

.popmenu {
  position: absolute; z-index: 50; min-width: 210px; padding: 6px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
}
.popmenu button {
  display: block; width: 100%; text-align: left; padding: .65em .8em; border-radius: 8px; border: 0;
  background: none; color: var(--text); font: 500 14px var(--font); cursor: pointer;
}
.popmenu button:hover { background: var(--panel); }
.popmenu .danger { color: var(--ko); }

.no-result { text-align: center; padding: 40px 0; }
.foot-note { font-size: 13px; text-align: center; margin-top: 50px; }

/* ---------- Bibliothèque vide ---------- */
.empty { text-align: center; padding: 60px 20px; border: 2px dashed var(--line-2); border-radius: 20px; }
.empty h2 { margin: 18px 0 6px; }
.empty p { max-width: 560px; margin: 0 auto 22px; }
.empty-art { display: inline-flex; gap: 10px; }
.empty-art span { width: 44px; height: 58px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-2); }
.empty-art span:nth-child(2) { background: var(--accent); border-color: var(--accent); transform: translateY(-8px); box-shadow: 0 10px 30px -8px rgba(255,61,110,.8); }

/* ---------- Fenêtre modale ---------- */
.modal {
  width: min(620px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--bg-2); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.modal::backdrop { background: rgba(5, 4, 9, .72); backdrop-filter: blur(4px); }
.modal-inner { padding: 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.field input, .field select {
  width: 100%; padding: .8em .9em; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text); font: 16px var(--font); outline: none;
}
.field input:focus, .field select:focus { border-color: var(--cyan); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin: 4px 0 20px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; border: 2px dashed var(--line-2); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.dropzone span { font-size: 13px; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(255, 61, 110, .06); }

.upload-list { list-style: none; margin: 14px 0 0; padding: 0; max-height: 240px; overflow: auto; }
.upload-list li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.u-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-state { color: var(--muted); text-align: right; }
.u-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.u-bar i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .2s; }
.upload-list li.ok .u-state { color: var(--ok); }
.upload-list li.ok .u-bar i { background: var(--ok); }
.upload-list li.ko .u-state { color: var(--ko); text-align: left; grid-column: 1 / -1; }
.upload-list li.ko .u-bar { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  padding: .75em 1.1em; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 500; z-index: 100; pointer-events: none; transition: .2s ease;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.7);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--ko); color: #ffd0d0; }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: min(400px, 100%); padding: 34px 28px; border-radius: 20px;
  background: rgba(24, 20, 37, .85); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px -30px rgba(255, 61, 110, .35);
  text-align: center;
}
.login-card h1 { font-size: 26px; margin: 18px 0 6px; }
.login-card > p { margin: 0 0 24px; font-size: 15px; }
.login-card form { text-align: left; }
.alert {
  padding: .75em 1em; border-radius: 10px; background: rgba(255, 90, 90, .12); border: 1px solid rgba(255, 90, 90, .45);
  color: #ffd0d0; font-size: 14px; text-align: left;
}

/* ---------- Écran de jeu ---------- */
.page-play { background: #07060b; }
.page-play::before { display: none; }
.play-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 28px); border-bottom: 1px solid var(--line); background: #0b0911;
}
.play-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.play-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pad-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stage { padding: clamp(10px, 2.5vw, 28px); display: flex; flex-direction: column; align-items: center; }
.screen {
  width: min(100%, calc((100vh - 150px) * (var(--ratio, 4 / 3)))); aspect-ratio: var(--ratio, 4 / 3);
  border-radius: 16px; overflow: hidden; background: #000;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px #0f0d17, 0 30px 90px -30px color-mix(in srgb, var(--c) 70%, transparent);
}
.screen #game { width: 100%; height: 100%; }
.play-help { font-size: 13px; text-align: center; margin: 16px 0 0; max-width: 640px; }

/* ---------- Page manette ---------- */
.pad-layout { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.pad-live { position: sticky; top: 86px; }
.pad-conn {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 14px;
}
.pad-conn.on { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.pad-conn div { display: flex; flex-direction: column; min-width: 0; }
.pad-conn small { font-size: 13px; }
.small-note { font-size: 13px; margin: 12px 0 0; }

.ps-pad { width: 100%; height: auto; display: block; stroke: none; fill: none; }
.ps-pad .body { stroke: var(--line-2); stroke-width: 2; }
.ps-pad .pb { fill: #2f2847; stroke: #4a4068; stroke-width: 1.5; transition: fill .08s; }
.ps-pad .pb.on { fill: var(--accent); stroke: #ffc1d1; filter: drop-shadow(0 0 6px rgba(255, 61, 110, .9)); }
.ps-pad .pad-touch { fill: #231d36; }
.ps-pad .stick-well { fill: #110e1b; stroke: #2f2847; stroke-width: 1.5; }
.ps-pad .stick { fill: #3a3256; }
.ps-pad .pt { fill: var(--muted); font: 600 12px var(--font); text-anchor: middle; pointer-events: none; }
.ps-pad .pt.sm { font-size: 10px; }
.ps-pad .sym { fill: none; stroke-width: 2.2; pointer-events: none; }
.ps-pad .tri { stroke: #3ee0a0; }
.ps-pad .sq { stroke: #f07ac8; }
.ps-pad .ci { stroke: #ff6b6b; }
.ps-pad .cr { stroke: #7aa8ff; }

.map-head, .map-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.3fr) minmax(110px, 1fr); gap: 10px; align-items: center; }
.map-head { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 12px 8px; font-weight: 600; }
.map-rows { display: flex; flex-direction: column; gap: 6px; }
.map-row { padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid transparent; transition: border-color .1s, background .1s; }
.map-row.live { border-color: var(--accent); background: rgba(255, 61, 110, .08); }
.map-label b {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font-family: var(--pixel); font-weight: 400; font-size: 14px;
  background: color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.map-cell {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 14px var(--font); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.map-cell:hover { border-color: var(--cyan); background: var(--panel-2); }
.map-cell small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-cell.flash { animation: flash .7s ease; }
@keyframes flash { 0% { background: rgba(62, 224, 208, .35); border-color: var(--cyan); } 100% { background: var(--panel); } }
.kbd {
  display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px;
  background: #0f0c18; border: 1px solid var(--line-2); border-bottom-width: 3px; font-weight: 700; font-size: 14px; white-space: nowrap;
}
.kbd.empty { color: #5e5578; }
.kbd.pad { border-radius: 999px; min-width: 34px; }
.kbd.ps-cr { color: #7aa8ff; } .kbd.ps-ci { color: #ff6b6b; } .kbd.ps-sq { color: #f07ac8; } .kbd.ps-tri { color: #3ee0a0; }
.map-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.save-state { font-size: 13px; }

/* Capture */
.capture {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(5, 4, 9, .8); backdrop-filter: blur(6px);
}
.capture-card {
  width: min(440px, 100%); text-align: center; padding: 30px 24px; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(255, 61, 110, .35);
}
.capture-step { font-size: 13px; margin: 0 0 6px; }
.capture-q { margin: 0; font-size: 16px; }
.capture-card h2 { font-family: var(--pixel); font-weight: 400; font-size: 40px; margin: 10px 0 6px; color: var(--accent); }
.capture-pulse { height: 40px; display: grid; place-items: center; }
.capture-pulse span { width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); animation: pulse 1.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 208, .6); } 100% { box-shadow: 0 0 0 22px rgba(62, 224, 208, 0); } }
.capture-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pad-layout { grid-template-columns: 1fr; }
  .pad-live { position: static; }
}
@media (max-width: 640px) {
  .topbar { padding: 10px 16px; }
  .brand-name { display: none; }
  .topnav a { padding: .5em .7em; font-size: 14px; }
  .search { min-width: 0; flex: 1; }
  .lib-actions { width: 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .cover-title { font-size: 14px; }
  .map-head { display: none; }
  .map-row { grid-template-columns: 1fr 1fr; padding: 10px; }
  .map-label { grid-column: 1 / -1; }
  .play-tools .pad-status { display: none; }
  .screen { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Recherche de jaquettes ---------- */
.modal.wide { width: min(900px, calc(100vw - 24px)); }
.cover-search { display: flex; gap: 10px; }
.cover-search .search { flex: 1; min-width: 0; }
.cover-status { font-size: 14px; margin: 14px 0 10px; min-height: 1.5em; }
.cover-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
  max-height: min(58vh, 560px); overflow: auto; padding: 4px;
}
.cover-pick {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 13px var(--font); cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.cover-pick:hover:not(:disabled), .cover-pick:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.cover-pick:disabled { cursor: wait; opacity: .55; }
.cover-pick.loading { opacity: 1; border-color: var(--cyan); }
.cover-pick-img {
  aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--bg-2);
  display: grid; place-items: center;
}
.cover-pick-img img { width: 100%; height: 100%; object-fit: contain; }
.cover-pick-img.broken::after { content: 'Aperçu indisponible'; color: var(--muted); font-size: 12px; }
.cover-pick-img.broken img { display: none; }
.cover-pick strong { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover-pick small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.auto-progress { height: 8px; border-radius: 8px; background: var(--panel-2); overflow: hidden; margin: 16px 0 10px; }
.auto-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.auto-count { font-weight: 600; margin: 0; }
#autoList li { grid-template-columns: 1fr auto; align-items: center; }
#autoList li.ko .u-name { color: var(--text); }
@media (max-width: 640px) {
  .cover-results { grid-template-columns: repeat(2, 1fr); }
  .lib-actions .btn { flex: 1; }
}

/* ---------- Doublons ---------- */
.btn.danger { background: var(--ko); border-color: var(--ko); color: #1a0505; }
.btn.danger:hover:not(:disabled) { background: #ff7373; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.dup-body { max-height: min(60vh, 560px); overflow: auto; padding-right: 4px; }
.dup-section + .dup-section { margin-top: 22px; }
.dup-section h3 { margin: 0 0 2px; font-size: 16px; }
.dup-section > p { margin: 0 0 12px; font-size: 13px; }
.dup-group {
  border: 1px solid var(--line); border-radius: 12px; padding: 6px; margin-bottom: 10px; background: var(--bg-2);
}
.dup-group.all-gone { border-color: var(--ko); }
.dup-item {
  display: grid; grid-template-columns: auto 40px 1fr auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 9px; cursor: pointer;
}
.dup-item:hover { background: var(--panel); }
.dup-item input { width: 18px; height: 18px; accent-color: var(--ko); }
.dup-thumb { width: 40px; height: 52px; border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.dup-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dup-txt { min-width: 0; display: flex; flex-direction: column; }
.dup-txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-txt small { color: var(--muted); font-size: 12px; }
.dup-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--ok); background: rgba(61, 220, 132, .12); }
.dup-item.del .dup-badge { color: var(--ko); background: rgba(255, 90, 90, .12); }
.dup-item.del strong { text-decoration: line-through; text-decoration-color: rgba(255, 90, 90, .6); }
.modal-foot .dup-sel { margin-right: auto; font-size: 13px; align-self: center; }
@media (max-width: 640px) {
  .dup-item { grid-template-columns: auto 34px 1fr; }
  .dup-badge { display: none; }
}

/* ---------- Page manette : deux manettes côte à côte ---------- */
.pad-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 22px; }
.pad-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.side-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.side-console { font-family: var(--pixel); font-weight: 400; font-size: 15px; }
.pad-arrow { display: grid; place-items: center; color: var(--accent); }
.pad-arrow svg { width: 30px; height: 30px; }
.pad-draw { flex: 1; display: grid; place-items: center; min-height: 200px; }
.pad-conn { margin-bottom: 0; }

.padsvg { width: 100%; max-width: 460px; height: auto; display: block; overflow: visible; stroke: none; fill: none; }
.padsvg text { pointer-events: none; text-anchor: middle; font-family: var(--font); stroke: none; }
.padsvg .body { fill: #241f37; stroke: var(--line-2); stroke-width: 2; }
.padsvg .sw-body { fill: #1e1b29; }
.padsvg .pb { fill: #2f2847; stroke: #4a4068; stroke-width: 1.5; transition: fill .08s; }
.padsvg .pb.on { fill: var(--accent); stroke: #ffc1d1; filter: drop-shadow(0 0 6px rgba(255, 61, 110, .9)); }
.padsvg .pad-touch { fill: #231d36; }
.padsvg .dcenter { fill: #2f2847; }
.padsvg .stick-well { fill: #110e1b; stroke: #2f2847; stroke-width: 1.5; }
.padsvg .stick { fill: #3a3256; }
.padsvg .plus-v { fill: #2f2847; pointer-events: none; }
.padsvg .pt { fill: var(--muted); font-size: 12px; font-weight: 600; }
.padsvg .pt.sm { font-size: 10px; }
.padsvg .pl { fill: #d9d3ee; font-size: 13px; font-weight: 700; }
.padsvg .sym { fill: none; stroke-width: 2.2; pointer-events: none; }
.padsvg .tri { stroke: #3ee0a0; } .padsvg .sq { stroke: #f07ac8; } .padsvg .ci { stroke: #ff6b6b; } .padsvg .cr { stroke: #7aa8ff; }
.padsvg .hl:not(.on) { fill: var(--cyan); stroke: #c9fff8; }

/* étiquettes sur ta manette */
.padsvg .tag { cursor: default; }
.padsvg .tag rect { fill: #0f2a2a; stroke: var(--cyan); stroke-width: 1.2; }
.padsvg .tag text { fill: #bffaf3; font-size: 9.5px; font-weight: 700; }

/* manettes d'origine */
.retro .rb { cursor: pointer; stroke: rgba(0,0,0,.35); stroke-width: 1.5; transition: fill .08s, filter .08s; }
.retro .rb.dark { fill: #2a2830; }
.retro .rb.mid { fill: #3a3a44; }
.retro .dcenter { fill: #2a2830; }
.retro .rb:hover, .retro .rb.hl { stroke: var(--cyan); stroke-width: 3; }
.retro .rb.on { fill: var(--accent) !important; stroke: #ffd1dc; filter: drop-shadow(0 0 8px rgba(255, 61, 110, .95)); }
.retro .rb.target { animation: target 1s ease-in-out infinite; stroke: var(--cyan); stroke-width: 3; }
@keyframes target { 50% { fill: var(--cyan); filter: drop-shadow(0 0 10px rgba(62, 224, 208, .9)); } }
.retro .ghostbtn { stroke-dasharray: 4 3; }
.retro .blbl { fill: #fff; font-size: 13px; font-weight: 700; }
.retro .blbl.sm { font-size: 9px; }
.retro .blbl.dk { fill: #2b2a30; }
.retro .rlbl { fill: #2d2b33; font-size: 13px; font-weight: 700; }
.retro .slbl { fill: #55525e; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; }
.retro .slbl.lt { fill: #9a98a6; font-size: 10px; letter-spacing: 0; font-weight: 500; }
.retro-side .side-console { color: var(--text); }

.map-row.hl { border-color: var(--cyan); }
.pad-map .map-rows { display: grid; grid-template-columns: 1fr; gap: 6px; }

/* sélecteur PlayStation / Switch */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.seg button {
  border: 0; background: none; color: var(--muted); font: 600 13px var(--font); padding: .45em .8em; border-radius: 7px; cursor: pointer;
}
.seg button.is-active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pad-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.calib-note { font-size: 13px; color: var(--ok); margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--text); }
.cap-mini { width: min(300px, 100%); margin: 6px auto 0; }
.cap-mini .rb { cursor: default; }
.calib-bar { height: 5px; border-radius: 5px; background: var(--panel-2); overflow: hidden; margin-top: 10px; }
.calib-bar i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .2s; }

@media (min-width: 1100px) {
  .pad-map .map-rows { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .pad-map .map-head { display: none; }
}
@media (max-width: 900px) {
  .pad-stage { grid-template-columns: 1fr; }
  .pad-arrow { transform: rotate(90deg); }
}

/* ---------- Fiche du jeu ---------- */
.game-modal { width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: hidden; }
.gm { display: grid; grid-template-columns: 280px 1fr; gap: 28px; padding: 26px; position: relative; max-height: calc(100vh - 34px); }
.gm-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.gm-side { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.gm-cover {
  aspect-ratio: var(--cr, .75); max-height: 380px; width: 100%; border-radius: 12px; overflow: hidden; position: relative;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--c) 80%, transparent);
}
.gm-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gm-cover .play-badge { display: none; }
.gm-file { font-size: 12px; margin: 0; word-break: break-all; }
.gm-main { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 86px); }
.gm-head { display: flex; align-items: center; gap: 10px; padding-right: 50px; }
.gm-head .chip { --c: inherit; }
.gm-year { font-family: var(--pixel); color: var(--muted); font-size: 14px; }
.gm-title { font-family: var(--pixel); font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin: 10px 0 2px; }
.gm-wtitle { margin: 0 0 6px; font-size: 13px; }
.gm-body { overflow: auto; padding-right: 8px; margin-top: 10px; flex: 1; min-height: 120px; }
.gm-body p { margin: 0 0 .8em; line-height: 1.6; color: #d9d4ea; }
.gm-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; padding: 14px 16px;
  border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px;
}
.gm-facts dt { color: var(--muted); font-weight: 500; }
.gm-facts dd { margin: 0; }
.gm-sec { margin-bottom: 18px; }
.gm-sec h3, .gm-more summary {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--c, var(--accent)); margin: 0 0 8px; font-weight: 700;
}
.gm-more summary { cursor: pointer; list-style: none; }
.gm-more summary::before { content: '▸ '; }
.gm-more[open] summary::before { content: '▾ '; }
.gm-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; font-size: 13px; }
.gm-source { text-decoration: none; }
.gm-source:hover { color: var(--text); }
.gm-fix { margin-top: 12px; }
.gm-cands { list-style: none; padding: 0; margin: 10px 0 0; max-height: 220px; overflow: auto; }
.gm-cands button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--text); font: 14px var(--font); cursor: pointer;
}
.gm-cands button:hover { background: var(--panel-2); border-color: var(--line-2); }
.gm-cands small { color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-empty { padding: 20px 0; }
.gm-loading { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.gm-loading span { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.gm-loading span:nth-child(1) { width: 60%; } .gm-loading span:nth-child(2) { width: 90%; } .gm-loading span:nth-child(3) { width: 75%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 760px) {
  .game-modal { max-height: calc(100vh - 16px); overflow: auto; }
  .gm { grid-template-columns: 1fr; padding: 18px; gap: 18px; max-height: none; }
  .gm-side { flex-direction: row; align-items: center; }
  .gm-cover { width: 120px; flex-shrink: 0; }
  .gm-side .btn { flex: 1; }
  .gm-file { display: none; }
  .gm-main { max-height: none; }
  .gm-body { overflow: visible; }
}
.gm-body h4 { margin: 14px 0 6px; font-size: 14px; color: var(--text); }

/* ---------- Dépôt d'une image sur une jaquette ---------- */
.cover.drop-on, .gm-cover.drop-on { outline: 3px dashed var(--cyan); outline-offset: 3px; }
.cover.drop-on::after, .gm-cover.drop-on::after, .cover.busy::after, .gm-cover.busy::after {
  content: 'Dépose l\'image ici'; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px;
  background: rgba(8, 30, 30, .78); color: #c9fff8; font-weight: 700; font-size: 15px; z-index: 3;
}
.cover.busy::after, .gm-cover.busy::after { content: 'Envoi de l\'image…'; }
.gm-drop-hint { font-size: 12px; margin: -4px 0 0; }
@media (max-width: 760px) { .gm-drop-hint { display: none; } }

/* ---------- DS : curseur en forme de stylet ---------- */
.console-nds #game canvas, .console-nds #game canvas.ejs-canvas-no-pointer {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(45 16 16)'><rect x='13' y='1' width='6' height='20' rx='3' fill='%23e8eaf0' stroke='%23222' stroke-width='1.4'/><rect x='13' y='5' width='6' height='3' fill='%239aa4b8'/><path d='M13 21 L16 30 L19 21 Z' fill='%23c9ccd4' stroke='%23222' stroke-width='1.4' stroke-linejoin='round'/><circle cx='16' cy='30' r='1' fill='%23ff3d6e'/></g></svg>") 6 26, crosshair !important;
}

/* ---------- Fiche : LaunchBox ---------- */
.game-modal { background:
  linear-gradient(180deg, rgba(19,16,29,.86), rgba(19,16,29,.97) 55%),
  var(--gm-bg, none) center / cover no-repeat, var(--bg-2); }
.gm-logo { max-width: min(360px, 100%); max-height: 90px; object-fit: contain; object-position: left center; margin: 10px 0 2px; display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gm-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); font-size: 12px; }
.gm-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.gm-shot { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 4 / 3; }
.gm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.gm-shot:hover { border-color: var(--cyan); }
.gm-covers { display: flex; gap: 10px; flex-wrap: wrap; }
.gm-cv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); cursor: pointer; width: 96px; font: 11px var(--font); }
.gm-cv img { width: 100%; height: 110px; object-fit: contain; }
.gm-cv:hover { border-color: var(--accent); color: var(--text); }
.gm-sources a { color: inherit; }
.gm-sources a:hover { color: var(--text); }
.gm-cands-h { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 10px 10px 4px; font-weight: 700; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,3,8,.92); display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; image-rendering: pixelated; border-radius: 8px; }

/* ================================================================ */
/* Fiche du jeu façon Netflix                                        */
/* ================================================================ */
.game-modal.nf {
  width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden;
  padding: 0; border-radius: 12px; border: 1px solid #2a2438; background: #141119;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.9); scrollbar-width: thin;
}
.game-modal.nf::backdrop { background: rgba(5, 4, 9, .8); backdrop-filter: blur(3px); }
.nf-close {
  position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(15, 12, 22, .85); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.nf-close:hover { background: #fff; color: #141119; }

/* bandeau */
.nf-hero { position: relative; aspect-ratio: 16 / 8.4; min-height: 320px; overflow: hidden; }
.nf-hero-bg {
  position: absolute; inset: 0; background: center / cover no-repeat #1d1828;
  transition: filter .4s, transform .4s;
}
.nf-hero-bg.blur { filter: blur(26px) brightness(.55) saturate(1.2); transform: scale(1.2); }
.nf-hero-bg.empty { background-image: radial-gradient(700px 300px at 70% 20%, color-mix(in srgb, var(--c, #ff3d6e) 45%, transparent), transparent) !important; }
.nf-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, #141119 0%, rgba(20,17,25,.7) 28%, rgba(20,17,25,0) 62%),
    linear-gradient(to right, rgba(20,17,25,.85) 0%, rgba(20,17,25,.3) 45%, rgba(20,17,25,0) 70%);
}
.nf-hero-content { position: absolute; left: 40px; right: 230px; bottom: 34px; z-index: 2; }
.nf .gm-logo { max-width: min(380px, 100%); max-height: 120px; margin: 0 0 6px; object-position: left bottom; }
.nf .gm-title {
  font-size: clamp(24px, 3.6vw, 40px); margin: 0 0 4px; line-height: 1.1; text-shadow: 0 3px 18px rgba(0,0,0,.8);
}
.nf .gm-wtitle { margin: 0 0 16px; color: #d6d0e6; font-size: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.8); min-height: 0; }
.nf-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.nf-play {
  display: inline-flex; align-items: center; gap: 10px; padding: .62em 1.7em .62em 1.3em; border-radius: 7px;
  background: #fff; color: #111; font: 700 18px var(--font); text-decoration: none; transition: background .15s;
}
.nf-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.nf-play:hover, .nf-play:focus-visible { background: rgba(255,255,255,.78); outline: none; }
.nf-round {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 2px solid rgba(255,255,255,.55); background: rgba(30,26,40,.7); color: #fff;
}
.nf-round:hover { border-color: #fff; }
.nf-round svg { width: 20px; height: 20px; }
.nf-poster.gm-cover {
  position: absolute; right: 36px; bottom: 30px; z-index: 2; width: 160px; max-height: 240px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 18px 40px -10px rgba(0,0,0,.9);
}

/* contenu */
.nf-content { padding: 4px 40px 30px; }
.nf-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nf-year { font-weight: 700; font-size: 16px; color: #46d369; }
.nf-badges { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.nf-badge { border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 1px 8px; font-size: 13px; color: #e6e1f2; }
.nf .gm-body { overflow: visible; max-height: none; padding: 0; margin: 0; min-height: 60px; }
.nf-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 34px; margin-bottom: 26px; }
.nf-desc p { font-size: 15.5px; line-height: 1.65; color: #ebe7f4; }
.nf-facts { margin: 0; font-size: 14px; }
.nf-facts dt { color: #8f88a6; font-size: 13px; }
.nf-facts dd { margin: 0 0 10px; color: #e6e1f2; }
.nf .gm-sec { margin: 0 0 26px; }
.nf .gm-sec h3, .nf .gm-more summary {
  font-size: 21px; text-transform: none; letter-spacing: 0; color: #fff; font-weight: 700; margin: 0 0 12px;
}
.nf .gm-more summary::before { content: '▸ '; color: var(--muted); }
.nf .gm-more[open] summary::before { content: '▾ '; }
.nf .gm-shots { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.nf .gm-shot { border-radius: 6px; }

/* autres jeux */
.nf-more { margin: 8px 0 24px; }
.nf-more h3 { font-size: 21px; margin: 0 0 14px; }
.nf-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.nf-tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; font: 13px var(--font); }
.nf-tile-img { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #221d31; display: grid; place-items: center; transition: transform .15s, box-shadow .15s; }
.nf-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-tile-gen { font-family: var(--pixel); font-size: 12px; padding: 10px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, #000), #12101b); width: 100%; height: 100%; display: grid; place-items: center; }
.nf-tile:hover .nf-tile-img, .nf-tile:focus-visible .nf-tile-img { transform: scale(1.05); box-shadow: 0 10px 24px -8px rgba(0,0,0,.8); }
.nf-tile-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #cfc9de; }

.nf-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #2a2438; font-size: 12px; color: var(--muted); }
.nf .gm-fix { margin: 0 0 22px; padding: 14px; border-radius: 10px; background: #1c1827; border: 1px solid #2a2438; }

@media (max-width: 760px) {
  .game-modal.nf { max-height: calc(100vh - 12px); width: calc(100vw - 12px); }
  .nf-hero { aspect-ratio: auto; min-height: 380px; }
  .nf-hero-content { left: 18px; right: 18px; bottom: 22px; }
  .nf-poster.gm-cover { top: 64px; right: 18px; bottom: auto; width: 96px; }
  .nf-content { padding: 4px 18px 24px; }
  .nf-cols { grid-template-columns: 1fr; gap: 16px; }
  .nf-play { font-size: 16px; }
}

/* ================================================================ */
/* Mobile : manette tactile néon, plein écran                        */
/* ================================================================ */
.ejs_virtualGamepad_parent { display: none !important; }   /* manette intégrée de l'émulateur : remplacée par la nôtre */
@media (pointer: coarse) { .hide-touch { display: none !important; } }
.icon-btn.is-active { background: var(--accent); border-color: var(--accent); color: #12040a; }
.icon-btn svg { width: 20px; height: 20px; }
@media (pointer: coarse) {
  .page-play .screen { box-shadow: none; }
  .page-play .play-bar { backdrop-filter: none; }
}
@media (max-width: 640px) {
  .lib-actions .search { flex: 1 1 100%; }
  .lib-actions .btn { flex: 1 1 auto; }
}

/* ----- page de jeu avec manette tactile ----- */
body.vpad-on {
  --bar: 52px;
  height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #06040b;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body.vpad-on .play-bar { padding: max(6px, env(safe-area-inset-top)) 10px 6px; flex-wrap: nowrap; background: #06040b; border-bottom-color: #1a1428; }
body.vpad-on .play-bar .btn.small { padding: .45em .7em; }
body.vpad-on .play-bar .btn.small svg + * { display: none; }
body.vpad-on .play-title .chip { display: none; }
body.vpad-on .play-title strong { font-size: 14px; }
body.vpad-on .pad-status, body.vpad-on .play-help { display: none; }
body.vpad-on .stage {
  height: calc(100dvh - var(--bar) - env(safe-area-inset-top)); padding: 8px 10px 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
body.vpad-on .screen {
  flex: 0 0 auto; border-radius: 12px; border: 1px solid #2a2140;
  width: min(100%, calc((100dvh - var(--bar) - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * (var(--ratio))));
  box-shadow: 0 0 0 1px rgba(255, 45, 149, .12), 0 0 24px -8px rgba(0, 229, 255, .35);
}
.screen canvas { touch-action: none; }

.vpad {
  --u: 1; width: 100%; max-width: 480px; flex: 1 1 auto; min-height: 320px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto;
  grid-template-areas: "brand brand" "left right" "mid mid";
  padding: 6px 4px max(12px, env(safe-area-inset-bottom));
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.vpad[hidden] { display: none !important; }
.vp-brand { grid-area: brand; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; min-height: 0; overflow: hidden; }
.vp-left { grid-area: left; } .vp-right { grid-area: right; }
.vp-side { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; }
.vp-shoulders { display: flex; gap: 10px; }
.vp-mid { grid-area: mid; display: flex; justify-content: center; gap: 22px; padding-top: 14px; }

/* logo néon dans l'espace libre */
.vp-logo { font-family: var(--pixel); font-size: 22px; letter-spacing: .08em; color: #ff2d95;
  text-shadow: 0 0 6px #ff2d95, 0 0 18px #ff2d95; animation: vp-flicker 6s infinite; }
.vp-logo b { font-weight: 400; color: #00e5ff; text-shadow: 0 0 6px #00e5ff, 0 0 18px #00e5ff; margin-left: .35em; }
.vp-con { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #8a7fb0; }

/* couleurs néon */
.n-pink { --n: #ff2d95; } .n-cyan { --n: #00e5ff; } .n-lime { --n: #a6ff00; } .n-violet { --n: #b14dff; }
.n-orange { --n: #ff8a1f; } .n-yellow { --n: #ffe14d; } .n-blue { --n: #3d8bff; } .n-green { --n: #2bff88; } .n-red { --n: #ff3b5c; }

/* boutons néon : contour lumineux qui tourne doucement */
.vp-btn {
  --n: #e6e1ff;
  position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  color: var(--n); font: 800 21px var(--font); isolation: isolate;
  text-shadow: 0 0 6px var(--n), 0 0 14px var(--n);
  box-shadow: 0 0 14px -3px var(--n), 0 0 34px -12px var(--n);
  transition: transform .06s;
}
.vp-btn span { pointer-events: none; position: relative; }
.vp-btn::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -2; will-change: transform;
  background: conic-gradient(from 0deg, var(--n), color-mix(in srgb, var(--n) 15%, transparent) 30%, var(--n) 50%,
    color-mix(in srgb, var(--n) 15%, transparent) 80%, var(--n));
  animation: vp-spin 4.5s linear infinite;
}
.vp-btn::after {
  content: ''; position: absolute; inset: 2px; border-radius: inherit; z-index: -1;
  background: radial-gradient(circle at 50% 30%, #211a36, #0b0814 72%);
  box-shadow: inset 0 0 14px -3px color-mix(in srgb, var(--n) 70%, transparent);
}
.vp-btn.on { transform: scale(.93); color: #0b0814; text-shadow: none; box-shadow: 0 0 22px 2px var(--n), 0 0 50px -6px var(--n); }
.vp-btn.on::after { background: radial-gradient(circle at 50% 35%, #fff 0%, var(--n) 55%); box-shadow: none; }
/* décalage des animations : les lumières ne tournent pas ensemble */
.vp-face .vp-btn:nth-child(2)::before { animation-duration: 5.2s; animation-delay: -1.3s; }
.vp-face .vp-btn:nth-child(3)::before { animation-duration: 3.9s; animation-delay: -2.1s; animation-direction: reverse; }
.vp-face .vp-btn:nth-child(4)::before { animation-duration: 5.8s; animation-delay: -.7s; }
.vp-face .vp-btn:nth-child(5)::before { animation-duration: 4.8s; animation-delay: -3s; animation-direction: reverse; }
.vp-face .vp-btn:nth-child(6)::before { animation-duration: 6.2s; animation-delay: -1.8s; }

/* gâchettes et Start/Select : rectangles arrondis, lueur qui respire */
.vp-btn.sh, .vp-btn.pill { border-radius: 14px; }
.vp-btn.sh { width: 88px; height: 38px; font-size: 15px; }
.vp-btn.pill { --n: #e6e1ff; width: 74px; height: 28px; font-size: 10.5px; letter-spacing: .14em; border-radius: 14px; }
.vp-btn.pill:last-child { --n: #ff2d95; }
.vp-btn.sh::before, .vp-btn.pill::before {
  background: linear-gradient(90deg, var(--n), color-mix(in srgb, var(--n) 25%, transparent), var(--n));
  animation: vp-breathe 2.8s ease-in-out infinite;
}
.vp-shoulders .vp-btn:nth-child(2)::before { animation-delay: -1.4s; }

/* croix directionnelle néon */
.vp-dpad { --n: #00e5ff; position: relative; width: 168px; height: 168px; touch-action: none; }
.vp-dpad svg { width: 100%; height: 100%; overflow: visible; display: block; }
.vp-dpad .dp-glow { fill: none; stroke: var(--n); stroke-width: 9; opacity: .35; filter: blur(5px); animation: vp-breathe 3.2s ease-in-out infinite; }
.vp-dpad .dp-body { fill: #0d0a17; stroke: var(--n); stroke-width: 2.5; }
.vp-dpad .d { fill: transparent; transition: fill .05s; }
.vp-dpad .d.on { fill: color-mix(in srgb, var(--n) 75%, transparent); }
.vp-dpad .dp-arrow { fill: var(--n); opacity: .9; pointer-events: none; }
.vp-dpad .dp-center { fill: none; stroke: color-mix(in srgb, var(--n) 50%, transparent); stroke-width: 2; pointer-events: none; }

/* stick analogique (N64) */
.vp-stick { --n: #00e5ff; position: relative; width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center;
  touch-action: none; isolation: isolate; box-shadow: 0 0 18px -4px var(--n); }
.vp-stick::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2; will-change: transform;
  background: conic-gradient(var(--n), transparent 30%, var(--n) 50%, transparent 80%, var(--n)); animation: vp-spin 5s linear infinite; }
.vp-stick::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, #15102a, #0a0812 70%); }
.vp-knob { --n: #ff2d95; width: 66px; height: 66px; border-radius: 50%; pointer-events: none; transition: transform .04s;
  background: radial-gradient(circle at 50% 35%, #3a2350, #160d24 70%); border: 2.5px solid var(--n);
  box-shadow: 0 0 14px var(--n), inset 0 0 12px -2px var(--n); }

/* boutons d'action : positions (arc naturel du pouce) */
.vp-face { position: relative; width: 180px; height: 180px; }
.vp-face .vp-btn { position: absolute; }
.vp-face .pos-t { left: 59px; top: 0; }  .vp-face .pos-b { left: 59px; bottom: 0; }
.vp-face .pos-l { left: 0; top: 59px; }  .vp-face .pos-r { right: 0; top: 59px; }
.vp-btn.big { width: 74px; height: 74px; font-size: 24px; }
.vp-face .pos-l2 { left: 6px; top: 92px; }  .vp-face .pos-r2 { right: 4px; top: 30px; }
.vp-face.face-megadrive { width: 196px; }
.face-megadrive .vp-btn { width: 60px; height: 60px; }
.face-megadrive .small { width: 44px; height: 44px; font-size: 15px; }
.face-megadrive .md-a { left: 0; top: 112px; }  .face-megadrive .md-b { left: 66px; top: 88px; }  .face-megadrive .md-c { left: 132px; top: 64px; }
.face-megadrive .md-x { left: 8px; top: 54px; } .face-megadrive .md-y { left: 74px; top: 30px; } .face-megadrive .md-z { left: 140px; top: 6px; }
.face-n64 .c { width: 44px; height: 44px; font-size: 14px; }
.face-n64 .c-u { right: 46px; top: 0; }  .face-n64 .c-d { right: 46px; top: 84px; }
.face-n64 .c-l { right: 92px; top: 42px; }  .face-n64 .c-r { right: 0; top: 42px; }
.face-n64 .n-b { left: 0; top: 84px; width: 56px; height: 56px; }
.face-n64 .n-a { left: 56px; top: 116px; width: 64px; height: 64px; }

@keyframes vp-spin { to { transform: rotate(360deg); } }
@keyframes vp-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes vp-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }

/* petits téléphones */
@media (max-width: 380px) and (orientation: portrait) {
  .vp-dpad, .vp-stick, .vp-face { transform: scale(.88); }
  .vp-face { margin: -10px -12px; } .vp-dpad, .vp-stick { margin: -10px -8px; }
}
/* écran peu haut en portrait : le logo disparaît en premier */
@media (max-height: 700px) and (orientation: portrait) { .vp-brand { display: none; } .vpad { grid-template-rows: 0 auto auto; } }

/* téléphone en paysage : manette de chaque côté de l'écran */
@media (orientation: landscape) and (max-height: 560px) {
  body.vpad-on { --bar: 40px; }
  body.vpad-on .stage { flex-direction: row; justify-content: space-between; align-items: center;
    padding: 6px max(10px, env(safe-area-inset-left)) 6px max(10px, env(safe-area-inset-right)); }
  body.vpad-on .vpad { display: contents; }
  body.vpad-on .vp-brand { display: none; }
  body.vpad-on .vp-left { order: 0; flex: 1; justify-content: center; }
  body.vpad-on .screen { order: 1; height: calc(100dvh - var(--bar) - 14px); width: auto; max-width: calc(100vw - 360px); aspect-ratio: var(--ratio); }
  body.vpad-on .vp-right { order: 2; flex: 1; justify-content: center; }
  body.vpad-on .vp-mid { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: 8px; padding: 0; gap: 10px; z-index: 5; }
  .vp-dpad, .vp-stick, .vp-face { transform: scale(.86); }
}

/* plein écran / mode immersif */
.fs-exit { display: none; }
body.immersive { --bar: 0px; height: 100dvh; overflow: hidden; }
body.immersive .play-bar { display: none; }
body.immersive .stage { height: 100dvh; padding-top: max(6px, env(safe-area-inset-top)); }
body.immersive:not(.vpad-on) .stage { display: flex; align-items: center; justify-content: center; padding: 0; }
body.immersive:not(.vpad-on) .screen { width: min(100vw, calc(100dvh * (var(--ratio)))); border: 0; border-radius: 0; box-shadow: none; }
body.immersive:not(.vpad-on) .play-help { display: none; }
body.immersive .fs-exit {
  display: grid; place-items: center; position: fixed; z-index: 50; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(13,11,20,.55); color: #fff; opacity: .7;
}
body.immersive .fs-exit svg { width: 18px; height: 18px; }
.fs-tip {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; padding: 16px;
  border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 14px;
}
.fs-tip p { margin: 0 0 8px; }
.fs-tip-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fs-tip .muted { font-size: 12.5px; }
.ins-ico { display: inline-block; padding: 0 4px; border-radius: 4px; background: var(--panel); }

@media (prefers-reduced-motion: reduce) {
  .vp-btn::before, .vp-stick::before, .vp-dpad .dp-glow, .vp-logo { animation: none !important; }
}

/* App installée (écran d'accueil) : rien ne passe sous la barre d'état de l'iPhone (heure, batterie) */
.topbar { padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right)); }
.play-bar { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); position: sticky; top: 0; z-index: 30; }
.page-login .login { padding-top: max(24px, env(safe-area-inset-top)); }
.page-play:not(.vpad-on) .stage { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
/* couleurs néon prioritaires sur la couleur par défaut des boutons */
.vp-btn.n-pink { --n: #ff2d95; } .vp-btn.n-cyan { --n: #00e5ff; } .vp-btn.n-lime { --n: #a6ff00; } .vp-btn.n-violet { --n: #b14dff; }
.vp-btn.n-orange { --n: #ff8a1f; } .vp-btn.n-yellow { --n: #ffe14d; } .vp-btn.n-blue { --n: #3d8bff; } .vp-btn.n-green { --n: #2bff88; } .vp-btn.n-red { --n: #ff3b5c; }
.vp-face.face-n64 { height: 196px; }
.face-n64 .n-b { left: 0; top: 98px; }
.face-n64 .n-a { left: 60px; top: 132px; }

/* ---------- Téléphone : fiche du jeu en plein écran, rien sous la barre d'état ---------- */
@media (max-width: 760px) {
  .game-modal.nf {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nf-close {
    position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: max(12px, env(safe-area-inset-right));
    width: 42px; height: 42px; background: rgba(10, 8, 16, .75); backdrop-filter: blur(6px);
  }
  .nf-hero { min-height: calc(390px + env(safe-area-inset-top)); }
  .nf-poster.gm-cover { top: calc(env(safe-area-inset-top) + 62px); }
  .nf-hero-content { bottom: 20px; }
  .nf .gm-logo { max-height: 96px; }
  .nf-content { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }

  /* autres fenêtres : entre la barre d'état et le bas de l'écran */
  dialog.modal:not(.nf) {
    margin: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom));
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
    overflow: auto;
  }
  .lightbox { padding: max(20px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); }
}

/* Les fenêtres restent fixées à l'écran, même quand la page a défilé */
body > dialog, dialog.modal { position: fixed; z-index: auto; }

/* Pas de zoom au double appui (le pincement reste possible hors du jeu) */
html { touch-action: manipulation; }
body.page-play, body.page-play * { touch-action: manipulation; }
body.page-play .vpad, body.page-play .vpad *, body.page-play .screen canvas { touch-action: none; }

/* ================================================================ */
/* Réserves d'écran (encoche, Dynamic Island, barre d'accueil)       */
/* En mode app (écran d'accueil), iOS floute le haut de l'écran :    */
/* on laisse une marge supplémentaire sous l'heure et la batterie.   */
/* ================================================================ */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --top-reserve: max(12px, var(--safe-t));
  --bottom-reserve: max(12px, var(--safe-b));
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root { --top-reserve: calc(var(--safe-t) + 20px); --bottom-reserve: calc(var(--safe-b) + 10px); }
}
html.is-standalone { --top-reserve: calc(var(--safe-t) + 20px); --bottom-reserve: calc(var(--safe-b) + 10px); }

/* barres du haut : sous la zone floutée, fond plein (rien ne défile dessous) */
.topbar {
  padding-top: var(--top-reserve);
  padding-left: max(clamp(16px, 4vw, 40px), calc(var(--safe-l) + 8px));
  padding-right: max(clamp(16px, 4vw, 40px), calc(var(--safe-r) + 8px));
  background: #0d0b14; backdrop-filter: none;
}
.play-bar { padding-top: var(--top-reserve); padding-left: max(12px, calc(var(--safe-l) + 8px)); padding-right: max(12px, calc(var(--safe-r) + 8px)); background: #07060b; }
body.vpad-on .play-bar { padding-top: var(--top-reserve); }
.wrap { padding-left: max(16px, calc(var(--safe-l) + 12px)); padding-right: max(16px, calc(var(--safe-r) + 12px)); padding-bottom: calc(60px + var(--safe-b)); }
.page-login .login { padding-top: var(--top-reserve); padding-bottom: var(--bottom-reserve); }

/* page de jeu : la hauteur suit l'espace réellement disponible */
body.vpad-on { display: flex; flex-direction: column; height: 100dvh; }
body.vpad-on .play-bar { flex: none; }
body.vpad-on .stage { flex: 1 1 auto; min-height: 0; height: auto; container-type: size; padding-bottom: 0; }
body.vpad-on .screen { width: min(100%, calc((100cqh - 330px) * (var(--ratio)))); }
body.vpad-on .vpad { padding-bottom: var(--bottom-reserve); padding-left: calc(var(--safe-l) + 4px); padding-right: calc(var(--safe-r) + 4px); }
@media (orientation: landscape) and (max-height: 560px) {
  body.vpad-on .screen { height: calc(100cqh - 12px); width: auto; }
  body.vpad-on .stage { padding-left: calc(var(--safe-l) + 10px); padding-right: calc(var(--safe-r) + 10px); padding-bottom: max(6px, var(--safe-b)); }
  body.vpad-on .vp-mid { left: calc(var(--safe-l) + 12px); bottom: max(8px, var(--safe-b)); }
}
body.immersive .stage { padding-top: var(--top-reserve); }
body.immersive .fs-exit { top: var(--top-reserve); left: calc(var(--safe-l) + 10px); }
.fs-tip { bottom: var(--bottom-reserve); left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px); }

/* fiche plein écran sur téléphone et autres fenêtres */
@media (max-width: 760px) {
  .nf-close { top: var(--top-reserve); right: calc(var(--safe-r) + 12px); }
  .nf-poster.gm-cover { top: calc(var(--top-reserve) + 54px); }
  .nf-hero { min-height: calc(380px + var(--top-reserve)); }
  .game-modal.nf { padding-bottom: var(--bottom-reserve); }
  dialog.modal:not(.nf) {
    margin: var(--top-reserve) auto var(--bottom-reserve);
    max-height: calc(100dvh - var(--top-reserve) - var(--bottom-reserve));
  }
}
/* bouton « activer le son » */
.screen { position: relative; }
.sound-unlock {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 20;
  padding: 9px 16px; border-radius: 999px; border: 2px solid #ff2d95; background: rgba(10, 6, 18, .88); color: #fff;
  font: 700 14px var(--font); box-shadow: 0 0 16px rgba(255, 45, 149, .6); animation: vp-breathe 1.6s ease-in-out infinite; cursor: pointer;
}
.sound-unlock[hidden] { display: none; }

.sound-panel {
  position: fixed; z-index: 70; left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 12px); top: calc(var(--top-reserve) + 60px);
  max-width: 460px; margin: 0 auto; padding: 14px; border-radius: 14px; background: #120d1f; border: 1px solid #ff2d95;
  box-shadow: 0 0 24px rgba(255, 45, 149, .35); font-size: 14px;
}
.sound-panel p { margin: 6px 0 10px; color: var(--muted); }
.sp-actions { display: flex; gap: 8px; }
.sound-panel pre { margin: 12px 0 0; white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; color: #cfc9de; background: #0a0812; padding: 10px; border-radius: 8px; -webkit-user-select: text; user-select: text; }

/* ================================================================ */
/* Retour haptique iPhone : interrupteur invisible sous chaque bouton */
/* ================================================================ */
.vp-hap { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0;
  -webkit-appearance: none; appearance: none; border-radius: inherit; z-index: 3; cursor: pointer; }
.vp-dpad .vp-hap { border-radius: 0; }
.sp-actions { flex-wrap: wrap; }
.sound-panel label.btn { position: relative; }
.sp-switch { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; -webkit-appearance: none; appearance: none; }
.bar-toggle { display: none; }

/* ================================================================ */
/* Téléphone en paysage : écran de jeu en grand, manette par-dessus   */
/* ================================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  body.vpad-on { display: block; }
  /* barre du haut repliée : bouton ☰ pour l'afficher */
  body.vpad-on .play-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transform: translateY(-105%);
    transition: transform .2s ease; background: rgba(6, 4, 11, .94); }
  body.vpad-on.bar-open .play-bar { transform: none; }
  body.vpad-on .bar-toggle { display: grid; place-items: center; position: fixed; z-index: 41;
    top: max(6px, var(--safe-t)); left: 50%; transform: translateX(-50%);
    width: 44px; height: 26px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(6, 4, 11, .45); color: #e6e1ff; opacity: .7; padding: 0; }
  body.vpad-on .bar-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  body.vpad-on.bar-open .bar-toggle { opacity: 0; pointer-events: none; }
  body.immersive .bar-toggle { display: none; }

  /* écran : toute la hauteur */
  body.vpad-on .stage { position: fixed; inset: 0; height: auto; padding: 0 var(--safe-r) 0 var(--safe-l);
    display: flex; flex-direction: row; align-items: center; justify-content: center; container-type: size; }
  body.vpad-on .screen { order: 0; height: 100cqh; width: auto; max-width: 100cqw; aspect-ratio: var(--ratio);
    border: 0; border-radius: 0; box-shadow: none; }

  /* manette en surimpression, translucide */
  body.vpad-on .vpad { display: block; position: fixed; inset: 0; z-index: 20; max-width: none; min-height: 0; padding: 0;
    pointer-events: none; }
  body.vpad-on .vp-brand { display: none; }
  body.vpad-on .vp-side { position: absolute; top: calc(var(--safe-t) + 8px); bottom: calc(var(--safe-b) + 6px);
    flex-direction: column; justify-content: space-between; align-items: center; gap: 0; pointer-events: none; }
  body.vpad-on .vp-left { left: calc(var(--safe-l) + 10px); }
  body.vpad-on .vp-right { right: calc(var(--safe-r) + 10px); }
  body.vpad-on .vp-side > :only-child { margin-top: auto; }
  body.vpad-on .vp-mid { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 4px); transform: translateX(-50%);
    padding: 0; gap: 14px; pointer-events: none; }
  body.vpad-on .vp-btn, body.vpad-on .vp-dpad, body.vpad-on .vp-stick { pointer-events: auto; }
  body.vpad-on .vp-dpad, body.vpad-on .vp-stick, body.vpad-on .vp-face { transform: scale(.8); }
  body.vpad-on .vp-dpad { transform-origin: left bottom; }
  body.vpad-on .vp-stick { transform-origin: left bottom; }
  body.vpad-on .vp-face { transform-origin: right bottom; }
  body.vpad-on .vp-shoulders .vp-btn { width: 76px; height: 32px; }

  /* translucide : on voit le jeu à travers, plein éclat à l'appui */
  body.vpad-on .vp-btn { opacity: .62; }
  body.vpad-on .vp-btn.on { opacity: 1; }
  body.vpad-on .vp-btn::after { background: radial-gradient(circle at 50% 30%, rgba(33, 26, 54, .55), rgba(11, 8, 20, .35) 72%); }
  body.vpad-on .vp-btn.on::after { background: radial-gradient(circle at 50% 35%, #fff 0%, var(--n) 55%); }
  body.vpad-on .vp-dpad { opacity: .7; }
  body.vpad-on .vp-dpad .dp-body { fill: rgba(13, 10, 23, .4); }
  body.vpad-on .vp-dpad .dp-glow { opacity: .25; }
  body.vpad-on .vp-stick { opacity: .75; }
  body.vpad-on .vp-stick::after { background: radial-gradient(circle, rgba(21, 16, 42, .5), rgba(10, 8, 18, .35) 70%); }
  body.vpad-on .vp-mid .vp-btn { opacity: .5; }
  body.vpad-on .vp-mid .vp-btn.on { opacity: 1; }
}

/* ================================================================ */
/* Favoris                                                           */
/* ================================================================ */
.card-fav {
  position: absolute; top: 8px; left: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; border: 0; padding: 0; color: #fff; background: rgba(10, 8, 16, .65);
  backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .15s, transform .15s, color .15s;
}
.card-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.card:hover .card-fav, .card-fav:focus-visible, .card.is-fav .card-fav { opacity: 1; }
@media (hover: none) { .card-fav { opacity: .9; } }
.card.is-fav .card-fav { color: #ff3d6e; }
.card.is-fav .card-fav svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(255, 61, 110, .7)); }
.card-fav:active { transform: scale(.85); }
.tab-fav svg { width: 14px; height: 14px; fill: #ff3d6e; stroke: none; }
.gm-fav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.gm-fav.is-on { color: #ff3d6e; border-color: #ff3d6e; }
.gm-fav.is-on svg { fill: currentColor; }