/* ---------- Ajouts : notifications, tutoriel, réglages, profil, top 5, défi du jour ---------- */
.toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translate(-50%,-140%);z-index:60;display:flex;align-items:center;gap:12px;max-width:min(92vw,460px);padding:12px 18px;border-radius:18px;background:#0d1434f2;border:2px solid var(--cyan);box-shadow:0 14px 40px -10px #000c;font-weight:700;font-size:15px;transition:transform .35s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.toast.on{transform:translate(-50%,0)}
.toast.ach{border-color:var(--gold);background:linear-gradient(100deg,#2a1d05f2,#0d1434f2)}
.toast .ico{font-size:32px}.toast small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}.toast b{font:italic 900 22px/1.1 'Barlow Condensed',sans-serif}

.tuto{position:fixed;left:50%;bottom:max(150px,22vh);transform:translate(-50%,20px);z-index:25;opacity:0;padding:14px 22px;border-radius:999px;background:#070b1be6;border:2px solid var(--lime);font:italic 800 clamp(18px,2.6vw,26px)/1.2 'Barlow Condensed',sans-serif;text-align:center;max-width:92vw;transition:opacity .25s,transform .25s;pointer-events:none}
.tuto.on{opacity:1;transform:translate(-50%,0)}
.tuto kbd,.tagline kbd{display:inline-block;min-width:1.6em;padding:1px 8px;margin:0 2px;border-radius:8px;background:#fff;color:#070b1b;font:800 .85em/1.4 'DM Sans',sans-serif;font-style:normal}

.skin{margin-top:10px;border:1px solid var(--line);background:#0b1130cc;border-radius:999px;padding:7px 14px;font-weight:800;font-size:13px;color:#dfe6ff}
.skin:hover{border-color:var(--vc,#fff)}

.daily{display:flex;gap:10px;margin-bottom:12px}
.dailybtn{flex:1;text-align:left;border:0;border-radius:18px;padding:12px 16px;background:linear-gradient(100deg,var(--c,#ff4ba7),var(--c2,#48e3ff));color:#070b1b;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;box-shadow:0 10px 30px -14px var(--c)}
.dailybtn b{font:italic 900 26px/1 'Barlow Condensed',sans-serif}.dailybtn small{font-weight:800;opacity:.8}
.dailybtn .dl{flex-basis:100%;font-size:13px;font-weight:700}
.daily .ghost{font-size:22px;padding:0 18px}

.solo{margin-left:auto;font-size:14px;padding:10px 16px}
.solo[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}

.lvl .toks{position:absolute;right:12px;bottom:10px;color:var(--gold);font-size:15px;letter-spacing:2px}.lvl .toks i{font-style:normal;opacity:.35}
.lvl .topbtn{position:absolute;right:10px;top:10px;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;background:#ffffff14;border:1px solid var(--line);cursor:pointer}
.lvl .topbtn:hover,.lvl .topbtn:focus-visible{background:#ffffff2a}

.opts{display:flex;flex-direction:column;gap:12px}
.opts label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:#0b1130d9;font-weight:700}
.opts input[type=range]{width:min(220px,45vw);accent-color:var(--lime)}
.opts select{background:#070b1b;color:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit}
.sw{appearance:none;width:52px;height:30px;border-radius:999px;background:#ffffff26;position:relative;cursor:pointer;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.sw:checked{background:var(--lime)}.sw:checked::after{transform:translateX(22px)}
.opts .ghost{align-self:flex-start}

.pstats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pstats div{border:1px solid var(--line);border-radius:16px;background:#0b1130d9;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pstats span{font-size:22px}.pstats b{font:italic 900 26px/1.1 'Barlow Condensed',sans-serif}.pstats small{font-size:11px;color:var(--muted);font-weight:700}
.title3{font:italic 900 28px/1 'Barlow Condensed',sans-serif;margin:22px 0 10px}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ach{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center;padding:9px 12px;border-radius:14px;border:1px solid var(--line);background:#0b113099;opacity:.5}
.ach span{grid-row:span 2;font-size:26px;text-align:center}.ach b{font-size:14px}.ach small{font-size:11px;color:var(--muted)}
.ach.on{opacity:1;border-color:#ffd16677;background:linear-gradient(100deg,#2a1d0599,#0b113099)}

.top5 li{grid-template-columns:40px 1fr auto}.top5 li span:first-child{font-size:22px;text-align:center}.top5 small{display:block;font-size:11px;color:var(--muted);font-weight:600}

@media (max-width:820px){.pstats{grid-template-columns:repeat(3,1fr)}.solo{font-size:12px;padding:8px 12px}}
@media (max-width:560px){.dailybtn b{font-size:22px}.lvl .topbtn{top:auto;bottom:34px}}
/* les boutons ronds en haut à droite ne doivent pas recouvrir les titres */
@media (max-width:1300px){.screen .bar{padding-right:150px}}
@media (max-width:560px){.screen .bar{padding-right:0;padding-top:46px}}
@media (max-height:430px){.tuto{bottom:120px;font-size:18px;padding:10px 16px}}
/* résultats : on laisse voir la danse des véhicules derrière */
#scrResult{background:radial-gradient(120% 90% at 50% 40%,#070b1b99,#070b1bcc 70%)}