/* app/menus/reglages.css — les paramètres (app/menus/reglages.js) : la roue de l'accueil et la fenêtre. */
/* La roue : en haut à droite, debout comme couché (choix de Tris, 28/10), dans la bande de l'appareil photo quand il y en a une (téléphone
   debout, plein écran), au trait des boutons Son et Pause du bandeau (habillage.css). */
.reglages-roue{position:fixed;z-index:9050;right:calc(8px + env(safe-area-inset-right,0px));
 top:max(6px,calc(env(safe-area-inset-top,0px) / 2 - 15px));width:30px;height:30px;padding:0;display:grid;place-items:center;
 cursor:pointer;} /* au néon des boutons du bandeau (habillage.css), allumée en bleu quand les paramètres sont ouverts */
.reglages-roue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
 filter:drop-shadow(0 0 3px rgba(0,224,255,.6));} /* l'icône du titre de la fenêtre (.reglages-titre svg) */
.reglages-roue svg .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;filter:drop-shadow(0 0 2px rgba(255,210,61,.7));}
.reglages-roue[hidden]{display:none;}
/* Le volet des règles a sa croix en haut à droite : la roue s'efface pendant qu'il est ouvert (classe
   volet-regles posée par app/menus/accueil.js et app/main.js, marquerRacine). Plus de :has() ici : chaque élément
   caché ou montré, chaque nœud ajouté dans la page faisait recalculer le style de toute la page (Samsung A16, 31/10). */
html.volet-regles .reglages-roue{display:none;}
.arena-hud .arena-icon-btn[data-act="reglages"] svg{width:15px;height:15px;}

/* La fenêtre, par-dessus tout (la partie en pause, la manette). */
.reglages{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
 padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 10px calc(10px + env(safe-area-inset-left,0px));
 background:rgba(3,2,10,.55);
 --arena-accent:linear-gradient(90deg,#00e0ff,#9a5cff 52%,#ff2fd0);} /* hors du calque du jeu : sa couleur d'accent (habillage.css) */
.reglages .reglages-p{position:relative;box-sizing:border-box;width:min(560px,100%);max-height:100%;overflow:auto;margin:0;
 padding:18px 18px calc(26px + env(safe-area-inset-bottom,0px));border-radius:14px;color:#e7e9ee;font:14px system-ui,sans-serif;text-align:left;
 display:flex;flex-direction:column;}
/* Sous les boutons du bas, le même air que sous la barre des menus (Tris, 28/10 : 12 px debout, 8 px couché, menus.css
   .menus-bas) ; passe devant le bas à 0 des menus sur téléphone (petit-ecran.css). */
html .reglages .arena-panel.reglages-p{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
@media (orientation:landscape) and (max-height:560px){
 html .reglages .arena-panel.reglages-p{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
}
.reglages-titre{display:flex;align-items:center;gap:10px;margin:0 0 6px;}
.reglages-titre svg{width:26px;height:26px;flex:none;fill:none;stroke:#7ff3ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
 filter:drop-shadow(0 0 3px rgba(0,224,255,.6));}
.reglages-titre svg .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;filter:drop-shadow(0 0 2px rgba(255,210,61,.7));}
/* « Paramètres » en grand, à gauche (Tris, 28/10) ; sous lui, le titre de la rubrique ouverte, à la taille des titres
   des menus (app/menus/menus.css, .menus-titre), sans symbole, en bleu plein. */
.reglages .reglages-titre.reglages-grand{justify-content:flex-start;font-size:32px !important;margin:0 0 10px;}
html.petit-ecran .reglages .reglages-titre.reglages-grand{font-size:28px !important;}
.reglages .reglages-grand svg{width:1.05em;height:1.05em;}
.reglages .reglages-rubrique{margin:0 0 4px;}
.reglages .reglages-titre.reglages-rubrique > span{background:none;color:#00e0ff;-webkit-text-fill-color:#00e0ff;text-shadow:0 0 10px rgba(0,224,255,.35);}
/* Les volets, empilés dans la même case (la hauteur du plus grand) ; seul celui de l'onglet ouvert se voit, et sa
   voisine pendant un glissé (app/menus/reglages.js), qui arrive à côté de lui. */
.reglages-corps{display:grid;flex:1 1 auto;min-height:0;}
.reglages-corps.glisse{overflow:hidden;}
.reglages-sec{grid-area:1/1;align-self:start;display:flex;flex-direction:column;will-change:auto;}
.reglages-sec:not(.on):not(.voisin){visibility:hidden;}
.reglages-lignes{display:grid;align-content:start;}
.reglages-l{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 0;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.07);}
.reglages-l > span{flex:1;min-width:0;line-height:1.25;}
.reglages-l small{display:block;margin-top:1px;color:#8d93a6;font-size:11.5px;line-height:1.25;}
.reglages-l input[type=range]{width:min(130px,30vw);accent-color:#00e0ff;}
.reglages-l output{width:3.2em;text-align:right;white-space:nowrap;color:#7ff3ff;font-variant-numeric:tabular-nums;}
.reglages-l.eteint{opacity:.42;} /* le volume en partie, quand la musique n'y est pas gardée */
.reglages-t{flex:none;width:44px;height:26px;padding:0;border-radius:13px;position:relative;cursor:pointer;
 background:#24223a;border:1px solid rgba(255,255,255,.12);}
.reglages-t::after{content:'';position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#8d93a6;transition:left .15s;}
.reglages-t.on{background:rgba(0,224,255,.35);border-color:rgba(0,224,255,.7);}
.reglages-t.on::after{left:22px;background:#7ff3ff;box-shadow:0 0 8px #00e0ff;}
.reglages-seg{display:flex;flex:none;border:1px solid rgba(0,224,255,.3);border-radius:9px;overflow:hidden;}
.reglages-seg button{border:0;padding:7px 9px;background:none;color:#8d93a6;font:600 12px system-ui,sans-serif;cursor:pointer;}
.reglages-seg button.on{background:rgba(0,224,255,.22);color:#fff;}
.reglages-l .arena-btn{flex:none;min-width:96px;min-height:40px;margin:0;}
.reglages-lire{display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.reglages-lire svg{width:18px;height:18px;flex:none;fill:none;stroke:#7ff3ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.reglages-lire svg .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;}
.reglages-credit{margin:4px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);color:#8d93a6;font-size:11.5px;}
/* Le pied : les quatre onglets, des boutons séparés au dessin de la barre du bas des menus (app/menus/menus.css, .menus-onglet :
   le symbole au-dessus du mot), puis le bouton Accueil (Retour en partie), au milieu, pas sur toute la largeur, avec de
   l'air sous lui jusqu'au bord de la fenêtre. */
.reglages-pied{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px;}
.reglages .reglages-onglets{align-self:stretch;gap:6px;}
.reglages .reglages-onglet{font-family:inherit;}
.reglages .reglages-pied .arena-actions{display:flex;margin:0;padding:0;gap:0;}
.reglages .reglages-pied .arena-btn.reglages-sortie{flex:none;margin:0;min-width:170px;min-height:46px;padding:0 22px;}
/* L'aide à la visée, debout et étroit : ses trois choix sous le mot, sur toute la largeur. */
@media (max-width:440px){
 .reglages .reglages-p{padding:16px 14px calc(26px + env(safe-area-inset-bottom,0px));}
 .reglages-l[data-l="visee"]{flex-wrap:wrap;row-gap:6px;padding:8px 0;}
 .reglages-l[data-l="visee"] > span{flex-basis:100%;}
 .reglages-l[data-l="visee"] .reglages-seg{flex:1;}
 .reglages-l[data-l="visee"] .reglages-seg button{flex:1;padding:8px 4px;font-size:13px;}
}
/* Très étroit (360 px) : « Commandes » tient entier dans son bouton. */
@media (max-width:380px){
 .reglages .reglages-onglets{gap:5px;}
 .reglages .reglages-onglet{padding-left:0;padding-right:0;font-size:10.5px;letter-spacing:-.02em;}
}
/* Couché (peu de hauteur) : les réglages d'une rubrique sur deux colonnes ; les onglets au milieu, comme la barre des
   menus, et le bouton Accueil à leur droite. */
@media (min-width:700px) and (max-height:520px){
 .reglages .reglages-p{width:min(860px,100%);padding:12px 18px calc(26px + env(safe-area-inset-bottom,0px));} /* de l air sous les boutons (Tris, 28/10) */
 .reglages .reglages-titre.reglages-grand{margin:6px 0 4px;}
 html.petit-ecran .reglages .reglages-titre.reglages-grand{font-size:26px !important;}
 .reglages .reglages-rubrique{margin:0 0 2px;}
 /* Rempli colonne par colonne (--rangs : le nombre de rangées, posé par app/menus/reglages.js) : ce qui va ensemble
    reste l'un sous l'autre (la musique en partie et son volume). Chaque réglage a son filet au-dessus. */
 .reglages-lignes{grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rangs,3),auto);grid-auto-flow:column;column-gap:28px;}
 .reglages-l{min-height:48px;}
 .reglages-credit{grid-row:3;grid-column:1/-1;border-top:0;} /* sous les deux colonnes de l'onglet Son */
 .reglages-pied{display:grid;grid-template-columns:minmax(0,1fr) 56% minmax(0,1fr);align-items:center;column-gap:10px;margin-top:10px;}
 .reglages .reglages-onglets{grid-column:2;}
 .reglages .reglages-pied .arena-actions{grid-column:3;justify-self:end;}
 .reglages .reglages-pied .arena-btn.reglages-sortie{min-width:150px;min-height:48px;}
}
/* Derrière la fenêtre, sur l'accueil (Tris, 27/10) : la map seule, en pause. La démonstration est figée (app/menus/reglages.js),
   le bandeau et le titre s'arrêtent, et tout ce qui est posé sur l'accueil (titre, textes, boutons, barre, bandeau)
   s'efface en fondu rapide pendant que la fenêtre s'ouvre ; il revient de même à la fermeture. */
html.reglages-ouverts .accueil-bandeau div,html.reglages-ouverts .accueil-titre::before,html.reglages-ouverts .accueil-titre::after{animation-play-state:paused;}
.accueil-col,.accueil-bandeau,.accueil-voile{transition:opacity .2s ease-out;}
html.reglages-accueil .accueil-col,html.reglages-accueil .accueil-bandeau,html.reglages-accueil .accueil-voile{opacity:0;pointer-events:none;} /* le voile sombre de lisibilité aussi : la map entière */
html.reglages-accueil .reglages{background:rgba(3,2,10,.25);} /* la map plus claire derrière, qu'on la voie */

/* Mode gaucher : les deux zones de pouce échangées (app/manette/). */
html.gaucher .manette-gauche{left:auto;right:0;}
html.gaucher .manette-droite{right:auto;left:0;}

/* Compteur d'images par seconde. */
.reglages-ips{position:fixed;z-index:9550;left:calc(6px + env(safe-area-inset-left,0px));bottom:calc(4px + env(safe-area-inset-bottom,0px));
 padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.55);color:#7fffb0;font:11px/1.3 ui-monospace,monospace;pointer-events:none;}

/* En partie (réglages de la section « En partie », app/menus/affichage.js). Sans barre du haut, le jeu prend
   tout l'écran ; il ne reste qu'un petit bouton Pause, en haut à droite, sous l'appareil photo, au-dessus
   de la manette (html.en-jeu : partie lancée, aucun écran ouvert, posé par app/main.js). */
html.sans-barre .arena-hud{display:none;}
.pause-flottante{display:none;position:fixed;z-index:9160;right:calc(8px + env(safe-area-inset-right,0px));top:calc(var(--photo,0px) + 8px);
 width:34px;height:34px;padding:0;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.16);
 background:rgba(10,9,22,.42);color:rgba(231,233,238,.85);cursor:pointer;touch-action:manipulation;}
.pause-flottante svg{width:16px;height:16px;}
html.sans-barre.en-jeu .pause-flottante{display:grid;}
/* Sans annonces : un bandeau ou un message déjà affiché quand on change le réglage s'efface aussi. */
html.sans-annonces .arena-toast,html.sans-annonces .arena-banner{display:none;}