/* app/regles.css — les règles du jeu (app/regles.js) : des pages sans défilement, une à la fois, dans le volet pleine
   page de l'accueil ; le grand titre et le titre de la page comme ceux des paramètres (app/reglages.css), les onglets
   en bas comme la barre des menus, le bouton Accueil à côté. */
.regles-p{box-sizing:border-box;display:flex;flex-direction:column;height:100%;width:100%;max-width:1120px;margin:0 auto;overflow:hidden;
 padding:calc(14px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
 color:#d8dce6;font:13px/1.35 system-ui,sans-serif;text-align:left;--arena-accent:linear-gradient(90deg,#00e0ff,#9a5cff 52%,#ff2fd0);}
html .regles-p .regles-grand{justify-content:flex-start;font-size:28px;margin:0 0 8px;flex:none;}
.regles-p .regles-grand svg{width:1.05em;height:1.05em;}
.regles-p .regles-rubrique{margin:0 0 8px;font-size:20px;align-items:baseline;}
.regles-p .reglages-titre.reglages-rubrique > span{background:none;color:#00e0ff;-webkit-text-fill-color:#00e0ff;text-shadow:0 0 10px rgba(0,224,255,.35);}
.regles-rubrique small{font:700 13px system-ui,sans-serif;color:#8d93a6;letter-spacing:0;text-transform:none;}
/* Les pages, empilées dans la même case ; seule l'ouverte se voit, et sa voisine pendant un glissé (app/regles.js). */
.regles-corps{flex:1 1 auto;min-height:0;display:grid;touch-action:pan-y;}
.regles-corps.glisse{overflow:hidden;}
.regles-page{grid-area:1/1;min-height:0;display:flex;flex-direction:column;}
.regles-page:not(.on):not(.voisin){visibility:hidden;}
.regles-contenu{min-height:0;}
.regles-contenu b{color:#fff;}
.regles-intro{margin:0 0 12px;font-size:14px;}
.regles-intro b{color:#7ff3ff;}
.regles-enigme{margin:14px 0 0;font-style:italic;color:#c9a7ff;}
/* Les points : le mot-clé en bleu, puis l'essentiel ; parfois une image devant. */
.regles-pts{display:grid;gap:9px;align-content:start;}
.regles-pt{display:flex;align-items:flex-start;gap:10px;}
.regles-pt p{margin:0;}
.regles-pt p > b{color:#7ff3ff;}
.regles-ico{flex:none;width:26px;height:26px;display:grid;place-items:center;}
.regles-ico svg,.regles-ico img{width:26px;height:26px;fill:none;stroke:#7ff3ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.regles-ico svg .plein{fill:#ffd23d;stroke:#ffd23d;stroke-width:1;}
.regles-ico svg .trait-plein{stroke:#ffd23d;stroke-width:2;}
.regles-point{width:10px;height:10px;border-radius:50%;background:#ffd23d;box-shadow:0 0 8px #ffd23d;}
.regles-ico img{width:34px;height:34px;margin:-4px;}
/* Le bestiaire : une tuile par Rezi, boss ou bâtiment ; le dessin, le nom, ce qu'il faut savoir. */
.regles-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;align-content:start;}
.regles-tuile{display:flex;align-items:center;gap:8px;min-width:0;}
.regles-tuile img,.regles-tuile canvas,.regles-sans{flex:none;width:46px;height:46px;}
.regles-tuile > span{min-width:0;}
.regles-tuile b{display:block;font-size:13px;line-height:1.2;}
.regles-tuile small{display:block;font-size:11.5px;line-height:1.25;color:#9aa2b6;}
.regles-g-boss .regles-tuile img{width:50px;height:50px;}
/* Commandes : une touche, ce qu'elle fait. */
.regles-blocs{display:grid;gap:14px;}
.regles-bloc h4,.regles-bonus h4{margin:0 0 6px;font:800 12px system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8d93a6;}
.regles-touche{display:flex;align-items:baseline;gap:10px;padding:3px 0;}
.regles-touche kbd{flex:none;min-width:96px;font:700 12px system-ui,sans-serif;color:#7ff3ff;}
/* En partie : les bonus, leur icône et leur nom. */
.regles-deux{display:grid;gap:14px;align-content:start;}
.regles-bonus > div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;}
.regles-bonus span{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;}
.regles-bonus img{width:22px;height:22px;flex:none;}
/* Nids : le nid en grand à côté de ses règles. */
.regles-nids{grid-template-columns:auto 1fr;align-items:start;}
.regles-nid img{width:84px;height:84px;}
.regles-pts-bat{margin-top:12px;}
/* Le pied : les onglets, des boutons au dessin de la barre des menus, puis le bouton Accueil. */
.regles-pied{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;}
.regles-p .regles-onglets{align-self:stretch;gap:5px;}
.regles-p .regles-onglet{font-family:inherit;}
.regles-p .regles-pied .arena-actions{display:flex;margin:0;padding:0;}
.regles-p .regles-pied .arena-btn.regles-sortie{flex:none;margin:0;min-width:170px;min-height:46px;padding:0 22px;}
/* Debout, étroit : les onglets en symboles seuls (le titre de la page dit où l'on est). */
@media (max-width:620px){
 .regles-p .regles-onglet{min-height:44px;}
 .regles-p .regles-onglet span{display:none;}
}
/* Debout, avec de la hauteur : plus grand, la place ne manque pas. */
@media (max-width:620px) and (min-height:700px){
 .regles-p{font-size:14px;}
 .regles-intro{font-size:15px;}
 .regles-pts{gap:12px;}
 .regles-grille{gap:12px 12px;}
 .regles-tuile img,.regles-tuile canvas,.regles-sans{width:54px;height:54px;}
 .regles-g-boss .regles-tuile img{width:56px;height:56px;}
 .regles-tuile b{font-size:14px;}
 .regles-tuile small{font-size:12.5px;}
 .regles-touche{padding:5px 0;}
 .regles-nid img{width:110px;height:110px;}
 .regles-bonus span{font-size:13px;}
 .regles-bonus img{width:26px;height:26px;}
}
/* Couché, ou large : les colonnes côte à côte, les onglets et le bouton Accueil sur une ligne. */
@media (min-width:700px){
 .regles-g-rezis,.regles-g-bat{grid-template-columns:repeat(4,minmax(0,1fr));}
 .regles-g-boss{grid-template-columns:repeat(3,minmax(0,1fr));}
 .regles-blocs{grid-template-columns:1fr 1fr;column-gap:28px;}
 .regles-deux{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:28px;}
 .regles-nids{grid-template-columns:auto minmax(0,1fr);}
 .regles-pts-prog,.regles-mission .regles-pts{grid-template-columns:1fr 1fr;column-gap:28px;}
 .regles-pied{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;}
}
@media (min-width:700px) and (max-height:560px){
 .regles-p{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
 html .regles-p .regles-grand{font-size:22px;margin:0 0 4px;}
 .regles-p .regles-rubrique{font-size:17px;margin:0 0 6px;}
 .regles-p .regles-onglet{min-height:46px;}
 .regles-pied{margin-top:6px;}
 .regles-intro{margin-bottom:8px;}
 .regles-pts{gap:6px;}
}