/* Couche finale : alignements garantis après toutes les feuilles historiques. */
:root{--safe-top:max(0px,env(safe-area-inset-top));--safe-right:max(0px,env(safe-area-inset-right));--safe-bottom:max(0px,env(safe-area-inset-bottom));--safe-left:max(0px,env(safe-area-inset-left))}
html,body{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden}
.phone-shell{contain:layout paint;width:min(100vw,1060px);height:min(100dvh,932px);max-width:100vw;max-height:100dvh;padding:0!important}
.screen{width:100%;height:100%;min-width:0;min-height:0}
.game-screen .grid{grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));align-items:stretch;justify-items:stretch}
.game-screen .grid>.cell{width:100%;height:100%;min-width:0;min-height:0}
.topbar,.game-topbar{padding-left:max(10px,var(--safe-left));padding-right:max(10px,var(--safe-right))}
.topbar>*{min-width:0}.brand{flex:0 1 auto}.top-actions{flex:0 0 auto}.avatar{flex:0 1 auto}
.home-content>*{min-width:0;max-width:100%}.goal-copy,.leaderboard-button>div,.level-card>div{min-width:0}.goal-copy strong,.goal-copy>span,.leaderboard-button strong,.level-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pregame-content,.pregame-goals,.pregame-goals>div{text-align:center}.pregame-content>*{margin-left:auto;margin-right:auto}

/* Navigation mobile toujours visible ; seul le contenu central défile si nécessaire. */
@media(max-width:699px) and (orientation:portrait){
  .home-screen .home-content{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;padding-bottom:calc(70px + var(--safe-bottom))!important}
  .home-screen .home-content::-webkit-scrollbar{display:none}
  .home-screen .dock{position:fixed;z-index:12;left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));bottom:max(6px,var(--safe-bottom));width:auto;min-height:52px;margin:0;padding:4px 3px;border:1px solid #ffffff18;border-radius:15px;background:#09172bea;box-shadow:0 -8px 24px #030817aa;backdrop-filter:blur(14px)}
  .home-screen .dock button{min-height:44px}
}

/* Navigation mobile paysage : ancrée dans la colonne de commandes et toujours dans le viewport. */
@media(orientation:landscape) and (max-height:600px){
  .home-screen .home-content{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:calc(62px + var(--safe-bottom))!important}
  .home-screen .dock{position:fixed;z-index:12;left:calc(46% + max(8px,var(--safe-left)));right:max(8px,var(--safe-right));bottom:max(5px,var(--safe-bottom));width:auto;min-height:48px;margin:0;padding:2px 3px;border:1px solid #ffffff18;border-radius:14px;background:#09172bf2;box-shadow:0 -7px 22px #030817aa;backdrop-filter:blur(14px)}
  .home-screen .dock button{min-height:42px}
}

/* Jeu portrait : chaque zone occupe sa propre ligne, sans marge négative. */
@media(orientation:portrait){
  .game-screen{--game-gutter:16px}
  .game-screen .xp-head,.game-screen .level-progress,.game-screen .game-goal,.game-screen .placement-help,.game-screen .placement-options,.game-screen .block-values,.game-screen .pieces,.game-screen .boosters,.game-screen .energy{box-sizing:border-box;width:calc(100% - (var(--game-gutter) * 2));max-width:calc(100% - (var(--game-gutter) * 2));margin-left:auto!important;margin-right:auto!important}
  .game-screen .game-topbar{text-align:center}.game-screen .game-topbar>div{align-items:center;justify-content:center;text-align:center}
  .game-screen .game-goal{overflow:hidden;text-overflow:ellipsis;text-align:center}
  .game-screen .placement-help{height:35px;margin-top:0;margin-bottom:0;overflow:hidden;text-align:center}
  .game-screen .placement-options{position:relative;z-index:2}
  .game-screen .placement-options>div{text-align:center}
  .game-screen .block-values{position:relative;z-index:2}
  .game-screen .block-values span{text-align:left}
  .game-screen .pieces{position:relative;z-index:1}
  .game-screen .boosters{grid-template-columns:repeat(5,minmax(0,1fr));min-width:0}
  .game-screen .boosters>*{min-width:0;padding-left:4px;padding-right:4px}
  .game-screen .game-gems{padding:0 4px}
  .game-screen .energy{padding-bottom:var(--safe-bottom)}
}

/* Téléphones étroits : l’identité garde de la place sans collision. */
@media(max-width:320px) and (orientation:portrait){
  .game-screen{--game-gutter:5px}
  .home-screen .brand>span:last-child{display:none}.home-screen .brand{flex:0 0 25px}.home-screen .avatar{min-width:78px;padding:0 9px;font-size:9px}.home-screen .top-actions{gap:3px}.home-screen .top-gems{min-width:48px!important;padding:0 6px!important}.home-screen .quick-settings{min-width:44px}
  .game-screen .game-topbar{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) 52px;gap:2px}.game-screen .game-topbar>div small{font-size:5px}.game-screen .game-topbar strong{font-size:15px}.game-screen .header-gems{min-width:50px;padding:0 4px}
  .game-screen .block-values{gap:2px}.game-screen .block-values span{grid-template-columns:7px 1fr;padding-left:2px;padding-right:2px}.game-screen .block-values b{display:none}.game-screen .block-values strong{font-size:7px!important}
  .game-screen .piece[data-tier]::before{top:2px;left:2px;min-width:30px;height:15px;padding:0 2px;border-radius:5px;font-size:6px}.game-screen .mini-grid{translate:0 5px}
  .game-screen .boosters{gap:2px}.game-screen .boosters button{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px}.game-screen .boosters button>span{font-size:13px}.game-screen .boosters button b{font-size:5px!important;line-height:6px}.game-screen .boosters button small{display:none}.game-screen .game-gems strong{font-size:9px}
}

/* Téléphones courts : priorité à la grille et aux actions essentielles. */
@media(max-height:740px) and (orientation:portrait){
  .game-screen .placement-help{display:none}
  .game-screen .grid{width:min(92vw,calc(100dvh - 377px),310px)!important;max-height:none}
  .game-screen .pieces{height:55px!important;margin-top:4px!important;margin-bottom:3px!important}
  .game-screen .piece[data-tier]::before{top:2px;height:17px;font-size:7px}
  .game-screen .mini-grid{translate:0 5px}
  .game-screen .boosters{height:40px;margin-top:0;margin-bottom:2px}.game-screen .boosters button{min-height:40px!important}
  .game-screen .energy{margin-top:0;margin-bottom:0}
}
@media(max-height:600px) and (orientation:portrait){
  .game-screen .grid{width:min(88vw,calc(100dvh - 342px),275px)!important}
  .game-screen .game-goal{height:21px;padding-top:4px;padding-bottom:4px;margin-top:1px;margin-bottom:3px;font-size:6px!important}
  .game-screen .pieces{height:48px!important}.game-screen .mini-block{width:9px!important;height:9px!important}
  .game-screen .boosters{height:36px}.game-screen .boosters button{min-height:36px!important}.game-screen .energy-track{height:6px}
}

/* Tablettes et ordinateurs : colonne droite ordonnée de haut en bas. */
@media(min-width:700px) and (min-height:650px){
  .game-screen{--left-column-x:4%;--left-column-width:43%;--right-column-x:5%;--right-column-width:42%}
  .game-screen .xp-head,.game-screen .grid{left:var(--left-column-x);width:var(--left-column-width);margin-left:0!important;margin-right:0!important}
  .game-screen .level-progress,.game-screen .mode-chip,.game-screen .game-goal{position:absolute;left:auto;right:var(--right-column-x);width:var(--right-column-width);max-width:var(--right-column-width);margin-left:0!important;margin-right:0!important;text-align:center}
  .game-screen .placement-help,.game-screen .placement-options,.game-screen .block-values,.game-screen .pieces,.game-screen .boosters,.game-screen .energy{position:absolute;left:auto;right:5%;width:42%;margin:0}
  .game-screen .placement-help{top:166px;height:35px}
  .game-screen .placement-options{top:211px}
  .game-screen .block-values{position:absolute;z-index:4;right:5%;top:262px;width:42%;margin:0}
  .game-screen .pieces{top:302px;height:145px}
  .game-screen .boosters{top:465px;grid-template-columns:repeat(5,minmax(0,1fr))}
  .game-screen .boosters>*{min-width:0}
  .game-screen .energy{top:530px}
  .game-screen .placement-help,.game-screen .placement-options,.game-screen .energy{text-align:center}.game-screen .pieces{justify-items:stretch}.game-screen .boosters{justify-items:stretch}
}

/* Paysage : deux colonnes indépendantes et légende sous la grille. */
@media(orientation:landscape) and (max-height:649px){
  .phone-shell{width:100vw;height:100dvh;border:0;border-radius:0}
  .game-screen .block-values{position:absolute;left:max(12px,var(--safe-left));right:auto;top:auto;bottom:max(8px,var(--safe-bottom));width:min(42vw,360px);margin:0;gap:3px}
  .game-screen .boosters{grid-template-columns:repeat(5,minmax(0,1fr));right:max(12px,var(--safe-right))}
  .game-screen .pieces,.game-screen .placement-options,.game-screen .level-progress,.game-screen .energy{right:max(12px,var(--safe-right))}
  .game-screen .boosters>*{min-width:0}.game-screen .boosters button{min-height:38px}.game-screen .boosters button small{display:none}
  .game-screen .placement-options,.game-screen .energy{text-align:center}
}
@media(orientation:landscape) and (max-height:340px){
  .game-screen .grid{width:min(60dvh,38vw)}
  .game-screen .pieces{top:136px;height:50px}.game-screen .boosters{top:192px!important;height:42px}.game-screen .energy{top:244px!important}
  .game-screen .block-values{bottom:5px}
}

/* Fenêtres : centrage, zones sûres et contenus flexibles sur tous les modèles. */
dialog{box-sizing:border-box;max-width:calc(100vw - max(16px,var(--safe-left)) - max(16px,var(--safe-right)))!important;max-height:calc(100dvh - max(16px,var(--safe-top)) - max(16px,var(--safe-bottom)))!important;margin:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
dialog>*{max-width:100%;min-width:0}dialog nav{max-width:100%}dialog button,dialog input,dialog select{min-width:0}.reward-tabs,.ranking-tabs,.ranking-mode-tabs,.auth-tabs,.legal-tabs,.shop-categories{max-width:100%}
#authForms,#authForm,#authForm>label,.auth-modal .password-field,.auth-modal .remember-login{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.auth-modal input{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.auth-modal .remember-login span{min-width:0;overflow-wrap:anywhere}.auth-modal .forgot-password{max-width:100%;justify-self:start;white-space:normal;text-align:left}
@media(max-width:359px){dialog{width:calc(100vw - 10px)!important;padding-left:12px;padding-right:12px}.reward-tabs{gap:2px}.reward-tabs button{padding-left:2px;padding-right:2px;font-size:6px}.ranking-tabs,.ranking-mode-tabs{width:100%}.legal-tabs button,.shop-categories button{font-size:8px!important}}

/* Les éléments masqués ne doivent jamais réserver d’espace. */
[hidden]{display:none!important}

/* Lisibilité : aucun libellé utile ne doit rester à 5–7 px. */
.home-screen :is(.stat small,.leaderboard-button small,.level-card small,.level-card>b,.journey-card small,.journey-card>b,.goal-copy small,.goal-right em,.reward-alert strong,.reward-alert small,.reward-alert>b,.play-button i,.utility-links .rules-link,.utility-links u,.dock b){font-size:max(9px,.56rem)!important;line-height:1.25}
.home-screen .city-build-stage :is(span,b){font-size:max(9px,.56rem)!important;line-height:1.2}
.home-screen :is(.journey-card strong,.goal-copy span,.reward-alert small){font-size:max(10px,.625rem)!important}
.home-screen .dock i{font-size:max(9px,.56rem)!important}
.home-screen a[href*="ludopia.fr"]{font-size:max(9px,.56rem)!important;line-height:1.3}
dialog :is(p,li,label,small,em){font-size:max(11px,.69rem)!important;line-height:1.45}
dialog :is(button,.legal-tabs button,.shop-categories button,.reward-tabs button,.ranking-tabs button,.ranking-mode-tabs button){font-size:max(10px,.625rem)!important}
.mode-modal [data-select-mode]>b{font-size:max(10px,.625rem)!important}
.game-screen :is(.game-topbar small,.game-goal,.placement-help,.placement-options small,.block-values b,.block-values strong,.boosters b,.boosters small,.energy small){font-size:max(9px,.56rem)!important;line-height:1.2}

@media(max-height:600px) and (orientation:portrait){
  .game-screen :is(.game-goal,.placement-help,.placement-options small,.block-values b,.boosters small){font-size:max(8px,.5rem)!important}
}

/* Bouton principal : typographie plus directe et sous-texte mieux différencié. */
.home-screen .play-button{font-family:"DM Sans",sans-serif;font-size:clamp(18px,5vw,22px);font-weight:800;letter-spacing:.7px}
.home-screen .play-button i{font-family:Manrope,sans-serif;font-size:max(9px,.56rem)!important;font-style:normal;font-weight:700;letter-spacing:1.5px;line-height:1.35}