:root {
  --rouge: #ff2a2a;
  --contour: #3a0d0d;
  /* Tout le texte du jeu : gras, sans-serif, majuscules (style 𝗠𝗔𝗥𝗜𝗢 𝗫 𝗠𝗜𝗡𝗘𝗖𝗥𝗔𝗙𝗧) */
  --hud: 'Inter', 'Arial Black', sans-serif;
  --leg: 'Inter', 'Arial Black', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; font-family: var(--hud); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: #fff; user-select: none; }
button { font-weight: 900; text-transform: uppercase; }
#titre { font-size: 22px; letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.25); margin-bottom: 2px; }

/* Scène 9:16 mise à l'échelle par jeu.js */
#scene { position: relative; width: 540px; height: 960px; flex: none; overflow: hidden; background: #7ec8f5; }
#c { position: absolute; inset: 0; width: 540px; height: 960px; }
.cache { display: none !important; }

/* Haut : pastilles */
#haut { position: absolute; top: 14px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.pill { background: rgba(20, 24, 32, .82); border-radius: 10px; padding: 2px 18px 4px; font-size: 38px; line-height: 1.15; letter-spacing: 1px; }
.pill.petit { font-size: 34px; letter-spacing: 5px; padding: 0 16px 2px; }
.pill.or { color: #ffd23f; font-size: 28px; }
.pill.pop { animation: pop .45s ease-out; }
@keyframes pop { 40% { transform: scale(1.3); } }

/* Multi : barre de chargement qui se vide, avec le X dedans */
#multi-barre { position: relative; width: 290px; height: 50px; background: rgba(20, 24, 32, .85); border: 3px solid #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
#multi-rempli { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #ff7a18, #ffd23f); }
#multi-rempli::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: rgba(255,255,255,.3); }
#multi-texte { position: relative; text-align: center; line-height: 44px; font-size: 34px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.6); }

/* Top donateur */
#top { position: absolute; left: 16px; top: 220px; display: flex; align-items: center; gap: 12px; pointer-events: none; max-width: 400px; }
#top-avatar { width: 92px; height: 92px; flex: none; border-radius: 50%; background: #fff center/cover; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; font-size: 40px; color: #ff7a18; }
#top-ligne { display: flex; align-items: baseline; gap: 10px; }
#top-rang { font-family: var(--leg); font-size: 38px; color: #9bd7ff; -webkit-text-stroke: 2px #4b8ab8; }
#top-nom { font-family: var(--leg); font-size: 30px; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(90deg, #ff3d6e, #b04dff, #3d8bff, #2ee6a6, #ffd23f, #ff7a18); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.25)); }
#top-pts { font-family: var(--leg); font-size: 26px; color: var(--rouge); -webkit-text-stroke: 1px var(--contour); margin-top: 2px; }
#top.change { animation: entre .4s ease-out; }

/* Légende des cadeaux */
#leg-droite { position: absolute; right: 4px; top: 10px; width: 130px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
#leg-bas { position: absolute; left: 6px; right: 140px; bottom: 10px; display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none; }
.leg { display: flex; flex-direction: column; align-items: center; text-align: center; }
.leg .ico { font-size: 52px; line-height: 1.05; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.leg img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.leg .txt { font-family: var(--leg); font-size: 24px; line-height: 1; color: var(--rouge); -webkit-text-stroke: 1.5px var(--contour); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#leg-bas .leg .txt { font-size: 16px; color: #fff; -webkit-text-stroke: 1px #333; }
#leg-bas .leg img { width: 72px; height: 72px; }

/* Fil des cadeaux */
#feed { position: absolute; left: 12px; top: 340px; width: 250px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.toast { font-size: 16px; line-height: 1.25; padding: 5px 10px; background: rgba(20, 24, 32, .72); border-radius: 8px; border-left: 5px solid #3ddc84; animation: entre .25s ease-out; transition: opacity .6s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toast.rouge { border-color: var(--rouge); }
.toast.violet { border-color: #b06cff; }
.toast b { color: #ffd23f; font-weight: 900; }
@keyframes entre { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Message central (chrono de victoire, WIN, pile ou face) */
#centre { position: absolute; left: 0; right: 0; top: 33%; text-align: center; font-family: var(--hud); font-size: 60px; line-height: 1.15; color: #fff; pointer-events: none; }
#centre .bulle { display: inline-block; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.35); }   /* même police que le compteur WIN, sans fond */
#centre small { display: block; font-size: 28px; }
#centre.vert { color: #3ddc84; }
#centre.rouge { color: var(--rouge); }
#centre.or { color: #ffd23f; }
#centre.anim { animation: zoom .35s ease-out; }
@keyframes zoom { from { transform: scale(.4); opacity: 0; } }

#hors-ligne { position: absolute; bottom: 120px; left: 0; right: 0; text-align: center; font-size: 18px; color: var(--rouge); }

/* Panneau de test */
#panel { position: absolute; left: 20px; right: 20px; top: 230px; background: rgba(20, 24, 32, .95); border-radius: 14px; padding: 16px; z-index: 10; }
#panel .titre { font-size: 22px; margin-bottom: 12px; text-align: center; }
#panel .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#panel button { font-family: var(--hud); font-size: 16px; padding: 10px 4px; background: #2b3140; color: #fff; border: 3px solid #555; border-radius: 8px; cursor: pointer; }
#panel button:hover { filter: brightness(1.25); }
#panel button.vert { border-color: #3ddc84; }
#panel button.rouge { border-color: var(--rouge); }
#panel button.violet { border-color: #b06cff; }
#panel .petit { font-size: 13px; opacity: .6; margin-top: 12px; text-align: center; }

/* ⚙ Paramètres */
#btn-params { position: absolute; top: 14px; left: 14px; z-index: 25; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: rgba(20, 24, 32, .85); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .2s; text-transform: none; }
#btn-params:hover { transform: rotate(45deg) scale(1.08); }
#params { position: absolute; left: 16px; right: 16px; top: 78px; height: 860px; z-index: 30; display: flex; flex-direction: column; background: #12161d; border: 1px solid #262d3a; border-radius: 20px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; text-transform: none; letter-spacing: 0; color: #e8ebf1; box-shadow: 0 18px 60px rgba(0,0,0,.6); overflow: hidden; }
#params.cache { display: none !important; }
#params button { font-family: 'Inter', sans-serif; text-transform: none; cursor: pointer; }

#params .p-tete { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 10px; font-size: 21px; font-weight: 900; }
#params .p-tete button { background: #1f2530; border: 0; color: #c9cfdb; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; }
#params .p-tete button:hover { color: #fff; background: #2a3241; }

#params .p-onglets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0 14px 12px; border-bottom: 1px solid #222936; }
#params .p-onglets button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; background: transparent; border: 0; border-radius: 12px; color: #8a93a6; font-size: 12px; font-weight: 800; }
#params .p-onglets button i { font-style: normal; font-size: 20px; }
#params .p-onglets button:hover { background: #1a1f28; color: #c9cfdb; }
#params .p-onglets button.actif { background: #ff7a18; color: #111; }

#params .p-corps { flex: 1; overflow-y: auto; padding: 4px 18px 16px; }
#params .p-corps::-webkit-scrollbar { width: 6px; }
#params .p-corps::-webkit-scrollbar-thumb { background: #333b4b; border-radius: 3px; }
#params section.cache { display: none !important; }
#params h4 { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px; font-size: 11px; font-weight: 900; color: #8a93a6; text-transform: uppercase; letter-spacing: .1em; }

#params .p-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 12px; background: #181d26; border-radius: 12px; margin-bottom: 6px; }
#params .p-ligne > span:first-child { color: #c9cfdb; }
#params .p-droite { display: flex; gap: 8px; align-items: center; }
#params input[type=range] { width: 200px; accent-color: #ff7a18; }
#params select, #params input[type=number], #params input[type=text] { background: #0e1117; color: #fff; border: 1px solid #2f3746; border-radius: 10px; padding: 8px 10px; font: 800 14px 'Inter', sans-serif; outline: none; }
#params select:focus, #params input:focus { border-color: #ff7a18; }
#params input[type=number] { width: 110px; }
#params input[type=text] { width: 210px; }
#params input[type=number].p-court { width: 72px; }

#params .p-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#params .p-case { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #181d26; border-radius: 12px; padding: 6px 6px 6px 12px; color: #c9cfdb; font-size: 13px; }
#params .btn-touche { min-width: 62px; padding: 7px 10px; background: #262e3c; color: #fff; border: 1px solid #343e50; border-radius: 9px; font: 900 13px 'Inter', sans-serif; }
#params .btn-touche:hover { border-color: #fff; }
#params .btn-touche.ecoute { border-color: #ffd23f; color: #ffd23f; animation: clign 1s infinite; }
@keyframes clign { 50% { opacity: .5; } }

#params .p-liste:empty::before { content: attr(data-vide); display: block; padding: 12px; border: 1px dashed #2f3746; border-radius: 12px; color: #6c7588; font-size: 13px; text-align: center; }
#params .p-liste .p-ligne { justify-content: flex-start; gap: 8px; }
#params .p-unite { color: #8a93a6; font-weight: 800; }
#params .p-suppr { margin-left: auto; background: none; border: 0; color: #6c7588; font-size: 15px; padding: 6px 8px; border-radius: 8px; }
#params .p-suppr:hover { color: #ff6b6b; background: #232a36; }
#params .p-plus, #params .p-rond { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ff7a18; color: #111; font-size: 17px; font-weight: 900; line-height: 1; padding: 0; }
#params .p-rond { background: #262e3c; color: #fff; font-size: 11px; }

#params .p-persos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-top: 6px; }
#params .p-groupe { grid-column: 1 / -1; color: #8a93a6; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; margin: 10px 2px 0; }
#params .p-skin { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #181d26; border: 2px solid transparent; border-radius: 14px; padding: 6px 2px 8px; color: #c9cfdb; font: 800 11px 'Inter', sans-serif; }
#params .p-skin canvas { width: 64px; height: 92px; image-rendering: pixelated; }
#params .p-skin:hover { border-color: #3a4456; }
#params .p-skin.actif { border-color: #ff7a18; color: #fff; background: #251b12; }

#params .p-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#params .p-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; background: #181d26; border: 2px solid transparent; border-radius: 14px; color: #fff; font: 800 12px 'Inter', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#params .p-opt:hover { border-color: #3a4456; }
#params .p-opt.actif { border-color: #ff7a18; box-shadow: 0 0 0 3px rgba(255,122,24,.2); }
#params .p-ico { font-size: 22px; }
#params .p-police .p-ex { font-size: 18px; line-height: 1.2; }
#params .p-police span:last-child { color: #8a93a6; font-size: 11px; }

#params .p-bas { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid #222936; }
#params .p-lien { background: none; border: 0; color: #6c7588; font-size: 12px; text-decoration: underline; }
#params .p-lien:hover { color: #ff6b6b; }
#params #o-ok { color: #3ddc84; font-size: 12px; }
#feed { display: none !important; }
/* Annonce au milieu : donateur + ce qu'il a envoyé */
#annonce { position: absolute; left: 0; right: 0; top: 170px; text-align: center; pointer-events: none; z-index: 15; font-family: var(--leg); line-height: 1.1; }
#annonce.anim { animation: annonce 2.2s ease-out both; }
@keyframes annonce { 0% { transform: scale(.3); opacity: 0; } 10% { transform: scale(1.12); opacity: 1; } 18% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
#annonce-nom { font-size: 30px; color: #fff; -webkit-text-stroke: 2px #111; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0,0,0,.4); margin-bottom: 4px; }
#annonce-quoi { font-size: 58px; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 0 5px 0 rgba(0,0,0,.4); }
#annonce-detail { font-size: 22px; color: #e2c2ff; -webkit-text-stroke: 1.5px #111; paint-order: stroke fill; margin-top: 4px; }
#annonce.rouge #annonce-quoi { color: #ff3d4d; }
#annonce.vert #annonce-quoi { color: #3ddc84; }
#top { display: none !important; }   /* top donateur retiré (demande du streamer) */
canvas.pix { image-rendering: pixelated; display: block; }
#btn-params { display: flex; align-items: center; justify-content: center; }
#params .p-onglets button.actif canvas.pix { filter: drop-shadow(0 0 0 #111); }

/* Bouton retour à l'accueil (à côté de l'engrenage) */
#btn-accueil { position: absolute; top: 14px; left: 76px; z-index: 25; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: rgba(20, 24, 32, .85); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .2s; text-decoration: none; }
#btn-accueil:hover { transform: translateY(-2px) scale(1.08); }

/* Bouton des notes de mise à jour (à côté de la maison) */
#btn-patch { top: 14px !important; left: 138px !important; width: 52px !important; height: 52px !important; border: 3px solid #fff !important; background: rgba(20, 24, 32, .85) !important; z-index: 25 !important; }