/* ===================== Accueil illustré (inspiré de la référence) + HUD + bonus ===================== */
.home-svg { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0 !important; display: block; }
.svg-cloud.c1 { animation: cl1 22s ease-in-out infinite alternate; transform: translate(330px, 120px); }
.svg-cloud.c2 { animation: cl2 30s ease-in-out infinite alternate; transform: translate(150px, 255px); }
.svg-cloud.c3 { animation: cl3 26s ease-in-out infinite alternate; transform: translate(470px, 330px); }
@keyframes cl1 { to { transform: translate(430px, 120px); } }
@keyframes cl2 { to { transform: translate(240px, 255px); } }
@keyframes cl3 { to { transform: translate(380px, 330px); } }

.chest-bar { position: absolute !important; top: 96px; left: 14px; right: 14px; z-index: 5 !important; display: flex; align-items: center; }
.chest-bar .bar { flex: 1; width: auto; height: 32px; }
.chest-bar .bar span { line-height: 24px; font-size: 20px; }
.chest-bar .chest { width: 56px; height: 56px; font-size: 32px; margin-left: -10px; }

.side { position: absolute !important; top: 160px; z-index: 5 !important; display: flex; flex-direction: column; gap: 16px; }
.side.left { left: 12px; }
.side.right { right: 12px; }
.side-btn { position: relative; width: 72px; height: 72px; border-radius: 20px; border: 4px solid var(--gold); background: linear-gradient(#6fa8ff, #2a4fd8); box-shadow: 0 5px 0 var(--purple); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: transform .1s; }
.side-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--purple); }
.side-btn .ico { font-size: 34px; line-height: 1; }
.side-btn em { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 14px; font-weight: 800; padding: 1px 10px; border-radius: 10px; background: linear-gradient(#ffc24a, #f08a00); border: 3px solid var(--purple); text-shadow: var(--ink); white-space: nowrap; }

/* gobelet : les éléments HTML sont calés sur le dessin SVG (ancré en bas), avec le même facteur d'échelle */
.home-center { position: absolute !important; left: 50%; bottom: calc(250px * var(--hk, 1)); width: 0; height: 0; margin: 0 !important; z-index: 3 !important; display: block !important; flex: none; }
.podium { position: absolute; left: -150px; bottom: 0; width: 300px; height: 300px; transform: scale(var(--hk, 1)); transform-origin: 50% 100%; }
.podium .mini-stack { bottom: 138px; }
.podium .plate { top: auto; bottom: 62px; min-width: 150px; padding: 4px 18px 6px; }
.podium .plate b { font-size: 44px; }
.podium .plate small { font-size: 16px; }
.floaters { left: -190px; top: auto; bottom: 120px; width: 380px; height: 300px; margin: 0; transform: scale(var(--hk, 1)); transform-origin: 50% 100%; }
.mc { width: 56px; height: 56px; padding: 9px; border-radius: 14px; border: 3px solid rgba(28, 10, 66, .95); background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 4px 0 rgba(28, 10, 66, .95), inset 0 3px 0 rgba(255, 255, 255, .3); }
.floaters .fl { width: 52px; height: 52px; padding: 9px; border-radius: 16px; border: 3px solid rgba(28, 10, 66, .95); background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 5px 0 rgba(28, 10, 66, .95), inset 0 3px 0 rgba(255, 255, 255, .3); }

.home-actions { bottom: 56px; }
.btn.big.play { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 14px 90px 16px; min-width: 330px; }
.btn.big.play small { font-size: 18px; letter-spacing: 2px; margin-bottom: 4px; opacity: .95; }
.btn.big.play b { font-size: 50px; }
.btn.big.play .diff-ico { position: absolute; left: -16px; top: -22px; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 4px solid var(--purple); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 30px; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.btn.big.play.diff-easy { background: linear-gradient(#8bff6a, #2fc92b 50%, #159a2a); }
.btn.big.play.diff-normal { background: linear-gradient(#9fe6ff, #3aa0ff 50%, #2a50d8); }
.btn.big.play.diff-hard { background: linear-gradient(#ffcf6b, #ff9a1a 50%, #e25a00); }
.btn.big.play.diff-extreme { background: linear-gradient(#ff7a85, #e32636 50%, #a30f1c); }
.btn.big.play { color: #fff; text-shadow: 0 3px 0 rgba(59, 10, 110, .9); }
#stage.short .home-actions .btn.big { padding: 8px 60px; min-width: 0; }

/* --- HUD de jeu : compteur de balles au centre, niveau à gauche, réglages à droite --- */
.hud { justify-content: space-between; }
.balls-pill { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
#hud-cubes { display: none !important; }
.hud .lvl-pill { margin-top: 8px; }

/* --- fiche de niveau : choix du bonus --- */
.boosters-title { margin-top: 12px; font-size: 20px; color: var(--purple); }
.boosters { display: flex; gap: 22px; justify-content: center; margin: 10px 0 12px; }
.bst { position: relative; width: 92px; height: 92px; border-radius: 22px; border: 4px solid #c9a24a; background: linear-gradient(#f2f6ff, #c3d1fa); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: transform .1s; }
.bst:hover { transform: translateY(-2px); }
.bst.sel { border-color: #2fc92b; box-shadow: 0 0 0 3px #b8f5a8; }
.bst em { position: absolute; bottom: -14px; font-style: normal; font-size: 15px; font-weight: 800; color: #fff; padding: 1px 12px; border-radius: 12px; background: linear-gradient(#6be83a, #2fb21f); border: 3px solid var(--purple); text-shadow: var(--ink); white-space: nowrap; }
.bst .pw-ico.super { color: #ffb300; text-shadow: 0 2px 0 #a86a00; }
.bst.locked { filter: grayscale(1) brightness(.85); cursor: default; }
.bst.locked em { background: linear-gradient(#8a8fc0, #4a4f80); }
@media (hover: none) { .bst:hover { transform: none; } }

/* ajustements */
.side-btn em { font-size: 12px; padding: 0 7px; bottom: -12px; }
.btn.big.play { overflow: visible; }
.btn.big.play::after { display: none; }
.btn.big.play .diff-ico { left: -14px; top: -20px; z-index: 2; }

/* avatar = icône utilisateur */
#home-avatar, #prof-avatar { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.avatars button { display: flex; align-items: center; justify-content: center; padding: 0; }
.avatars button svg { width: 56%; height: 56%; }

/* portraits dessinés */
.avatar-btn, .avatar.big { overflow: hidden; }
.avatars { max-height: 310px; overflow-y: auto; padding: 4px; }
.avatars button { height: 76px; overflow: hidden; border-radius: 18px; }
.avatars button svg { width: 100%; height: 100%; }

/* avatars : portraits illustrés */
#home-avatar img, #prof-avatar img, .avatars button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
.avatars { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avatars button { height: 74px; }

/* écran de victoire : bouton « Niveau suivant » bien visible */
.panel.win .btn.big.next { font-size: 34px; padding: 10px 52px; margin: 14px 0 4px; animation: pulse 1.6s ease-in-out infinite; }

/* coffre de dizaine */
.chest-bar .chest small { font-size: 12px; margin-top: -2px; }
.chest.open { animation: chestpop .8s cubic-bezier(.3, 1.8, .5, 1) 3, glowbox 1.2s ease-in-out infinite .6s; }
@keyframes chestpop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.35) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes glowbox { 50% { box-shadow: 0 5px 0 var(--purple), 0 0 18px rgba(255, 210, 63, .8); } }

/* coffre = prochaine technologie à débloquer */
.tcube { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 3px solid rgba(28, 10, 66, .95); background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 3px 0 rgba(28, 10, 66, .95), inset 0 2px 0 rgba(255, 255, 255, .3); }
.tcube img { width: 66%; height: 66%; }
.chest .tcube { width: 44px; height: 44px; }
.chest-bar .chest .tcube { width: 40px; height: 40px; }
.chest-bar .chest { font-size: 30px; }

/* écran de victoire : la techno (case du coffre) + son libellé placé SOUS la case, hors du cadre */
.panel.win .progress { margin: 14px 0 38px; }
.panel.win .chest { position: relative; width: 78px; height: 78px; overflow: visible; }
.panel.win .chest .tcube { width: 54px; height: 54px; border-radius: 14px; }
.chest .chest-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font-style: normal; font-size: 18px; font-weight: 800; line-height: 1; white-space: nowrap; color: #ffd23f; -webkit-text-stroke: 4px #a63a00; paint-order: stroke fill; text-shadow: 0 2px 0 #a63a00; }

/* ===== accueil v2 : tout est ancré dans le repère du dessin SVG (540 x 960), mis à l'échelle comme lui ===== */
.home-center { position: absolute !important; left: 50%; bottom: 0; width: 540px; height: 960px; margin: 0 0 0 -270px !important; transform: scale(var(--hk, 1)); transform-origin: 50% 100%; z-index: 3 !important; display: block !important; flex: none; pointer-events: none; }
.podium { position: absolute; left: 120px; top: 380px; bottom: auto; width: 300px; height: 300px; transform: none; }
.podium .mini-stack { bottom: 128px; }
.podium .mc { width: 36px; height: 36px; padding: 6px; border-radius: 10px; border-width: 2px; box-shadow: 0 3px 0 rgba(28, 10, 66, .95), inset 0 2px 0 rgba(255, 255, 255, .3); }
.podium .plate { top: auto; bottom: 18px; min-width: 150px; padding: 4px 18px 6px; }
.floaters { left: 80px; top: 140px; bottom: auto; width: 380px; height: 300px; margin: 0; transform: none; }

/* pastilles crème et bouton Jouer vert à cadre doré (comme la référence) */
.topbar .pill { background: linear-gradient(#fffaf0, #f3dfb4); border: 3px solid #d9b46a; color: #5a3a12; text-shadow: none; box-shadow: 0 3px 0 rgba(90, 58, 18, .25); }
.topbar .pill b, .topbar .pill span { color: #5a3a12; text-shadow: none; }
.chest-bar .bar i { background: linear-gradient(#a6f23c, #3dbb1e); }
.btn.big.play { background: linear-gradient(#9aea3a, #4fbf1f 55%, #2f9a14); border: 6px solid #ffd23f; box-shadow: 0 0 0 3px #b67b00, 0 9px 0 #8a5a00, 0 14px 22px rgba(0, 0, 0, .25); color: #1f5a08; text-shadow: 0 2px 0 rgba(255, 255, 255, .55); }
.btn.big.play b { color: #1f5a08; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(0, 0, 0, .15); }

.home-svg { overflow: visible; }

/* accueil « monde du développeur » : petites animations du décor */
.home-svg .gear { transform-box: fill-box; transform-origin: center; animation: gear-spin 30s linear infinite; }
.home-svg .gear.g2 { animation-direction: reverse; }
@keyframes gear-spin { to { transform: rotate(360deg); } }
.home-svg .led { animation: led-blink 1.8s ease-in-out infinite; }
.home-svg .led.l1 { animation-delay: -.6s; } .home-svg .led.l2 { animation-delay: -1.2s; }
@keyframes led-blink { 50% { opacity: .2; } }
.home-svg .cursor { animation: cursor-blink 1s steps(2) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.home-svg .rain { animation: rain-fall 9s linear infinite; }
.home-svg .rain.r1 { animation-duration: 12s; animation-delay: -4s; } .home-svg .rain.r2 { animation-duration: 15s; animation-delay: -8s; }
@keyframes rain-fall { from { transform: translateY(-120px); } to { transform: translateY(470px); } }
@media (prefers-reduced-motion: reduce) { .home-svg .gear, .home-svg .led, .home-svg .cursor, .home-svg .rain { animation: none; } }

/* choix du décor d'accueil + variante « ville cyber » */
html[data-home='dev'] #home-cyber, html:not([data-home='dev']) #home-dev { display: none; }
html[data-home='cyber'] .topbar .pill { background: linear-gradient(rgba(34, 14, 104, .92), rgba(20, 8, 70, .92)); border: 3px solid #5df0ff; color: #fff; box-shadow: 0 0 12px rgba(93, 240, 255, .55); }
html[data-home='cyber'] .topbar .pill b, html[data-home='cyber'] .topbar .pill span { color: #fff; text-shadow: 0 0 8px rgba(93, 240, 255, .7); }
.home-svg .tw { animation: tw 3s ease-in-out infinite; } .home-svg .tw.t1 { animation-delay: -1s; } .home-svg .tw.t2 { animation-delay: -2s; }
@keyframes tw { 50% { opacity: .25; } }
.home-svg .win { animation: win-blink 5s ease-in-out infinite; } .home-svg .win.w1 { animation-delay: -1.7s; } .home-svg .win.w2 { animation-delay: -3.4s; }
@keyframes win-blink { 0%, 80%, 100% { opacity: .9; } 88% { opacity: .15; } }
.home-svg .flick { animation: flick 4s steps(1) infinite; } .home-svg .flick.f1 { animation-delay: -1.3s; } .home-svg .flick.f2 { animation-delay: -2.6s; }
@keyframes flick { 0%, 92%, 96%, 100% { opacity: 1; } 94%, 98% { opacity: .35; } }
.home-svg .chev { animation: chev-pulse 1.6s ease-in-out infinite; } .home-svg .chev.c1 { animation-delay: .2s; } .home-svg .chev.c0 { animation-delay: .4s; }
@keyframes chev-pulse { 50% { opacity: .35; } }
.home-svg .hl { animation: hl-grow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; } .home-svg .hl.h1 { animation-delay: -1s; } .home-svg .hl.h2 { animation-delay: -2s; }
@keyframes hl-grow { 50% { transform: scaleX(.6); } }
@media (prefers-reduced-motion: reduce) { .home-svg .tw, .home-svg .win, .home-svg .flick, .home-svg .chev, .home-svg .hl { animation: none; } }

/* les cubes sont posés DANS la tasse (cachés par le bord avant du verre), rien ne flotte dans l'air */
.podium .mini-stack { left: 50px; right: auto; width: 200px; top: 20px; bottom: auto; height: 175px; justify-content: flex-end; clip-path: path('M0 0 H200 V161 H188 A88 13 0 0 1 12 161 H0 Z'); }
.podium .mc { width: 46px; height: 46px; padding: 7px; margin: 0 -3px; border-radius: 12px; animation: none; transform: rotate(var(--rot, 0deg)); box-shadow: 0 3px 0 rgba(28, 10, 66, .95), inset 0 2px 0 rgba(255, 255, 255, .3); }
.podium .mini-stack .mr { margin-top: -9px; }
.podium .mini-stack .mr:nth-child(1) .mc { --rot: 9deg; }
.podium .mini-stack .mr:nth-child(2) .mc:nth-child(1) { --rot: -11deg; } .podium .mini-stack .mr:nth-child(2) .mc:nth-child(2) { --rot: 6deg; }
.podium .mini-stack .mr:nth-child(3) .mc:nth-child(1) { --rot: 8deg; } .podium .mini-stack .mr:nth-child(3) .mc:nth-child(2) { --rot: -5deg; } .podium .mini-stack .mr:nth-child(3) .mc:nth-child(3) { --rot: 12deg; }
.floaters { display: none; }

/* ===== accueil : illustration plein écran en arrière-plan, adaptée automatiquement à l'écran ===== */
#screen-home { background: #4fb4ff url('../assets/home-bg.webp') center bottom / cover no-repeat !important; }
#screen-home::before, #screen-home::after { display: none !important; }
.podium { top: 426px; }

/* barre de progression et boutons latéraux un peu plus bas : ils ne touchent plus le profil ni les réglages */
.chest-bar { top: calc(116px + env(safe-area-inset-top, 0px)); }
.side { top: calc(190px + env(safe-area-inset-top, 0px)); }

/* --- Accueil « fête foraine » : boutons latéraux brillants avec icônes vectorielles, bouton Jouer rouge cerclé d'or --- */
.side-btn { background: linear-gradient(#7fc0ff 0%, #3d7cf0 48%, #2448c8 100%); border: 4px solid #fff3c4; box-shadow: 0 0 0 3px #1c2f8a, 0 6px 0 #1c2f8a, 0 10px 14px rgba(0, 0, 0, .25); overflow: visible; }
.side-btn::before { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 40%; border-radius: 14px 14px 30px 30px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.side-btn:active { box-shadow: 0 0 0 3px #1c2f8a, 0 2px 0 #1c2f8a; }
.side-btn svg.ico { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(20, 30, 110, .55)); position: relative; }
.side-btn em { background: linear-gradient(#ffd85a, #f39a00); border: 3px solid #7a3a00; color: #fff; text-shadow: 0 1px 0 #7a3a00, 0 0 2px #7a3a00; }
.btn.big.play, html[data-home] .btn.big.play { background: linear-gradient(#ff8f8f 0%, #f23a4a 40%, #c8102e 100%); border: 5px solid #ffd23f; box-shadow: 0 0 0 3px #8a1020, 0 8px 0 #8a1020, 0 14px 24px rgba(0, 0, 0, .3), inset 0 -6px 0 rgba(120, 0, 20, .35); }
.btn.big.play b, html[data-home] .btn.big.play b { color: #fff; letter-spacing: 2px; text-transform: uppercase; -webkit-text-stroke: 3px #7a0a1c; paint-order: stroke fill; text-shadow: 0 4px 0 #7a0a1c; }
.btn.big.play::before { content: ''; position: absolute; left: 14px; right: 14px; top: 6px; height: 38%; border-radius: 30px 30px 60px 60px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }

/* jauge de balles plus grande : pastille agrandie + barre sous le compteur */
.balls-pill { padding: 6px 30px 6px 14px; gap: 12px; }
.balls-pill b { font-size: 46px; line-height: 1; }
.balls-pill .ball-icon { width: 46px; height: 46px; }
.balls-gauge { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); width: min(300px, 62%); height: 16px; border-radius: 10px; background: rgba(20, 8, 70, .72); border: 3px solid var(--gold); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); overflow: hidden; pointer-events: none; }
.balls-gauge i { display: block; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient(#a6f23c, #3dbb1e); transition: width .35s ease-out, background .3s; }
.balls-gauge i[data-low='1'] { background: linear-gradient(#ffd23f, #ff9a1a); }
.balls-gauge i[data-low='2'] { background: linear-gradient(#ff7a85, #e32636); animation: gauge-warn .6s ease-in-out infinite; }
@keyframes gauge-warn { 50% { filter: brightness(1.5); } }