/* En-tete, profil, options, fenetres modales, liste des niveaux, icones. */
/* en-tete : seulement des actions (compte, options) ; le pseudo est dans la carte profil, une seule fois */
.home-card .accountPill { padding:0; border:0; background:none; gap:0; }
.home-card .accountPill #accountLabel { display:none; }
.home-card .accountPill .linkBtn { padding:7px 15px; border:1px solid var(--line2); border-radius:99px; background:var(--panel2); color:var(--text); font-size:12px; font-weight:700; }
.home-card .accountPill .linkBtn:hover { border-color:var(--accent); background:var(--panel2); }
.home-card .iconBtn { width:34px; height:34px; }
/* statistiques globales : une ligne discrete, pas des boutons */
.home-card .stats { gap:0; margin:12px 0 18px; font-size:12px; color:var(--muted); }
.home-card .stats div { padding:0; border:0; border-radius:0; background:none; gap:5px; }
.home-card .stats div + div::before { content:'·'; margin:0 12px; opacity:.5; }
.home-card .stats b { font-size:12px; color:var(--text); }
/* carte profil */
/* options : onglet Touches */
.keysList { display:flex; flex-direction:column; }
.kgroup { margin:12px 0 4px; font-size:11px; font-weight:800; color:var(--muted); }
.kgroup:first-child { margin-top:2px; }
.krow { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.kgroup + .krow { border-top:0; }
.klbl { flex:1; font-size:13px; font-weight:600; }
.kcap { min-width:96px; height:30px; padding:0 10px; border:1px solid var(--line2); border-radius:8px; background:var(--panel2); color:var(--text); font:700 12px system-ui, sans-serif; cursor:pointer; }
.kcap:hover { border-color:var(--muted); }
.kcap.empty { color:var(--muted); font-weight:500; border-style:dashed; }
.kcap.listen { border-style:solid; border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px rgba(255,90,95,.18); }
#help .linkBtn { padding:1px 8px; margin-left:4px; border:1px solid var(--line2); border-radius:6px; }
/* profil : une pastille dans l'en-tete (cube, pseudo, niveau + fine barre d'XP), a cote de l'engrenage */
.home-card .accountPill { gap:10px; }
.joinInline { margin:0; }
.home-card .homeHead { flex-wrap:wrap; }
.home-card .logo .row { flex-wrap:nowrap; }
.home-card #name { width:148px; padding:8px 14px; border:1px solid var(--line2); border-radius:99px; background:var(--panel2); color:var(--text); font:600 13px system-ui, sans-serif; }
.home-card #name:focus { outline:none; border-color:rgba(255,255,255,.4); }
.accountPill[data-state="account"] .joinInline, .accountPill[data-state="guest"] .profChip { display:none; }
.profChip { position:relative; display:flex; align-items:center; gap:10px; padding:5px 16px 8px 6px; border:1px solid var(--line2); border-radius:12px; background:var(--panel2); overflow:hidden; }
.profChip canvas { display:block; width:32px; height:32px; border-radius:8px; background:#f6f7fb; }
.profChip .pn { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.profChip .pn b { font-size:14px; font-weight:800; }
.profChip .pn small { color:var(--gold); font-size:11px; font-weight:800; }
.profChip .xpBar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.09); }
.profChip .xpBar i { display:block; height:100%; width:0; background:linear-gradient(90deg, #ffcf6b, #ff9f4a); transition:width .7s cubic-bezier(.2,.8,.2,1); }
@media (max-width:560px) { .headTools { flex-direction:column-reverse; align-items:flex-end; } }
/* profil allonge ; Options et connexion / deconnexion dans un menu sous la pastille */
.home-card .accountPill { position:relative; display:block; }
.profBox { position:relative; width:320px; max-width:100%; }
.home-card .profBox #name { display:block; width:100%; padding:12px 46px 12px 16px; border-radius:12px; font-size:14px; }
.profBox .menuBtn { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer; }
.profBox .menuBtn:hover, .profBox .menuBtn[aria-expanded="true"] { color:var(--text); background:rgba(255,255,255,.07); }
.profBox .menuBtn svg { width:16px; height:16px; }
.accountPill[data-state="account"] .menuBtn { display:none; }
.home-card .profChip { width:100%; gap:12px; padding:9px 14px 13px 9px; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.profChip:hover, .profChip[aria-expanded="true"] { border-color:var(--muted); }
.profChip canvas { width:40px; height:40px; border-radius:10px; }
.profChip .pn { flex:1; min-width:0; }
.profChip .pn b { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profChip .xpn { font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.profChip .chev { display:grid; place-items:center; width:16px; height:16px; color:var(--muted); }
.profChip .chev svg { width:100%; height:100%; }
.profChip .xpBar { height:4px; }
.acctMenu { position:absolute; z-index:40; top:calc(100% + 8px); right:0; min-width:210px; padding:6px; display:flex; flex-direction:column;
            background:var(--panel); border:1px solid var(--line2); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.5); }
.acctMenu[hidden] { display:none; }
.acctMenu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:none; color:var(--text); font:600 13px system-ui, sans-serif; text-align:left; cursor:pointer; }
.acctMenu button:hover, .acctMenu button:focus-visible { background:rgba(255,255,255,.07); outline:none; }
.acctMenu .hudIcon { width:15px; height:15px; color:var(--muted); }
.linkRow { margin:14px 0 0; text-align:center; }
.linkBtn { background:none; border:0; color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:6px; }
.linkBtn:hover { color:var(--text); background:rgba(255,255,255,.05); }
/* fenetres modales (options, compte) */
.modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px; }
.modal[hidden] { display:none; }
.modalVeil { position:absolute; inset:0; background:rgba(8,9,14,.7); backdrop-filter:blur(2px); }
.modalCard { position:relative; width:min(420px, 100%); max-height:calc(100vh - 32px); overflow-y:auto; overflow-x:hidden; background:var(--panel);
             border:1px solid var(--line2); border-radius:14px; padding:18px 18px 12px; box-shadow:var(--shadow); }
.modalHead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.modalHead h3 { margin:0; font-size:15px; }
.modalX { background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:4px 6px; border-radius:6px; }
.modalX:hover { color:var(--text); background:rgba(255,255,255,.06); }
.opt { position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; border-top:1px solid var(--line); cursor:pointer; }
.optRow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; border-top:1px solid var(--line); }
.optRow b { display:block; font-size:13px; }
.optRow small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
.optSlider { display:flex; align-items:center; gap:10px; }
/* curseur de volume : piste fine qui se remplit, poignee ronde ; aucun cadre autour (le focus se voit sur la poignee) */
.optSlider input[type=range], .optSlider input[type=range]:focus { --fill:40%; -webkit-appearance:none; appearance:none; width:160px; height:22px; margin:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; cursor:pointer; outline:none; }
.optSlider input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:linear-gradient(to right, var(--accent) var(--fill), rgba(255,255,255,.14) var(--fill)); }
.optSlider input[type=range]::-moz-range-track { height:6px; border-radius:99px; background:rgba(255,255,255,.14); }
.optSlider input[type=range]::-moz-range-progress { height:6px; border-radius:99px; background:var(--accent); }
.optSlider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-5px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 4px rgba(0,0,0,.55); transition:transform .12s, box-shadow .12s; }
.optSlider input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 4px rgba(0,0,0,.55); transition:transform .12s, box-shadow .12s; }
.optSlider input[type=range]:hover::-webkit-slider-thumb { transform:scale(1.12); }
.optSlider input[type=range]:hover::-moz-range-thumb { transform:scale(1.12); }
.optSlider input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px rgba(255,90,95,.3), 0 1px 4px rgba(0,0,0,.55); }
.optSlider input[type=range]:focus-visible::-moz-range-thumb { box-shadow:0 0 0 4px rgba(255,90,95,.3), 0 1px 4px rgba(0,0,0,.55); }
.optSlider output { min-width:38px; text-align:right; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
.opt b { display:block; font-size:13px; }
.opt small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
.opt input { position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.sw { flex:none; position:relative; width:38px; height:22px; border-radius:99px; background:var(--line2); transition:background .2s; }
.sw::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.opt input:checked + .sw { background:var(--mint); }
.opt input:checked + .sw::after { transform:translateX(16px); }
.opt input:focus-visible + .sw { outline:2px solid var(--accent); outline-offset:2px; }
.tabs { display:flex; gap:4px; margin:18px 0 12px; border-bottom:1px solid var(--line); }
.tabs button { padding:8px 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none;
               color:var(--muted); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.tabs button:hover { color:var(--text); }
.tabs button.on { color:var(--text); border-bottom-color:var(--accent); }
.tabs .tabLock { display:inline-flex; align-items:center; justify-content:center; vertical-align:-1.5px; margin-left:5px; width:13px; height:13px; }
.tabs .tabLock[hidden] { display:none !important; }
.tabs .tabLock .lock-ico { width:100%; height:100%; overflow:visible; }
.tabs .tabLock .lock-ico .lk-bd { fill:var(--gold); }
.tabs .tabLock .lock-ico .lk-sh { stroke:var(--gold); }
.tabs #achCount { display:inline-block; min-width:26px; margin-left:6px; padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.08);
                  color:var(--muted); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; vertical-align:1px; }
body:has(#home:not([hidden])) .replayCard { display:none; }          /* le replay du solveur n'a de sens que dans un niveau */
.botsRow { display:flex; align-items:center; gap:8px; margin-top:10px; }
.botsRow .adminDrawerActionBtn { flex:1; }
.botsStep { display:flex; align-items:center; border:1px solid var(--line2); border-radius:10px; overflow:hidden; background:var(--panel2); }
.botsStep button { width:32px; height:32px; border:0; background:none; color:var(--text); font:800 16px system-ui, sans-serif; cursor:pointer; }
.botsStep button:hover { background:rgba(255,255,255,.08); }
.botsStep button:disabled { opacity:.35; cursor:default; }
.botsStep b { min-width:28px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums; }
.adminDrawerActionBtn.on { border-color:var(--mint); color:var(--mint); }
.adminDrawerActionBtn.warn-on { border-color:#ff5a5f; color:#ff5a5f; background:rgba(255,90,95,.18); }
.adminDrawerActionBtn.warn-on:hover { background:rgba(255,90,95,.3); border-color:#ff7075; color:#fff; }
.adminMaintBadge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:800; color:#ff5a5f; background:rgba(255,90,95,.18); border:1px solid rgba(255,90,95,.45); letter-spacing:.3px; animation:maintPulse 2s infinite ease-in-out; }
@keyframes maintPulse { 0%, 100% { opacity:1; } 50% { opacity:0.65; } }
.tabs #achCount:empty { display:none; }
.tabs button.on #achCount { background:rgba(255,200,80,.16); color:var(--gold); }
.note { margin:10px 0 0; color:var(--muted); font-size:12px; }
.lv { text-align:left; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.lv:hover:not(:disabled) { border-color:var(--accent); }
.lv:disabled { opacity:.45; cursor:not-allowed; }
.lv .n { font-weight:800; color:var(--mint); margin-right:6px; }
.lv .pc { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
.lv.m-diamant { --m:#7fe3ff; } .lv.m-or { --m:#ffcf6b; } .lv.m-argent { --m:#c9cedd; } .lv.m-bronze { --m:#d98a52; }
/* liste des niveaux d'un monde fini : meme langage que la vitrine (medaille + plaque en laiton), une tuile par niveau, aucune couleur de bordure */
.world > .pickGrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.lv.pick { display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 12px 8px 10px; background:#12141d; border-color:#262a3d; }
.lv.pick .pm { flex:none; width:36px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.lv.pick .pm svg { display:block; width:28px; height:28px; }
.lv.pick .pm svg.gem { --c:#7fe3ff; }
.lv.pick .pm svg.ghost { opacity:.16; filter:grayscale(1); }
.lv.pick .pm .boss-ico { width:26px; height:26px; }
.lv.pick .pl { min-width:20px; padding:1px 5px; border-radius:3px; font-size:9.5px; font-weight:800; text-align:center; background:#262a3d; color:#5b6078; }
.lv.pick .pl.on { background:#c9a24a; color:#3a2a08; }
.lv.pick .body { min-width:0; flex:1; }
.lv.pick .nm { display:block; font-weight:700; font-size:13.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv.pick .pc { display:block; margin-top:2px; font-size:11.5px; color:#8f96b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv.pick .pc b { color:var(--text); font-weight:700; }
/* icone du boss */
.boss-ico { display:block; width:100%; height:100%; overflow:visible; --c:#6c7190; }
.boss-ico .cf { fill:var(--c); fill-opacity:.2; stroke:var(--c); stroke-width:1.2; stroke-linejoin:round; }
.boss-ico .cl, .boss-ico .cs, .boss-ico .ct, .boss-ico .ck { display:none; }
.boss-ico.done { --c:#ffcf6b; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.boss-ico.done .cf { fill-opacity:1; }
.boss-ico.done .cl { display:inline; fill:#fff; fill-opacity:.42; }
.boss-ico.done .cs { display:inline; fill:#000; fill-opacity:.12; }
.boss-ico.done .ct { display:inline; fill:#fff; }
.boss-ico.done .ck { display:inline; fill:none; stroke:rgba(21,23,31,.38); stroke-width:.9; stroke-linejoin:round; stroke-linecap:round; }
.boss-ico.done.secret-ico { --c:#a982ff; }
.gemInline { --c:#7fe3ff; display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:3px; }
.roomTag { display:inline-block; margin-left:7px; padding:0 6px; border-radius:6px; border:1px solid rgba(255,207,107,.4); background:var(--goldBg); color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.03em; vertical-align:1px; white-space:nowrap; }
.keys { margin:18px 0 0; color:var(--muted); font-size:12px; }
kbd { padding:1px 5px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px; background:var(--panel); font:11px system-ui, sans-serif; color:var(--text); }
@media (max-width: 960px) {
  #workspace { flex-direction:column; }
  #side { width:100%; }
}