/* Babel Squad — tout tient dans la fenêtre, quelle que soit la résolution (sans zoom ni scroll de page) */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
#app{height:100vh;height:100dvh;min-height:0}
body.bg-home #app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.home{height:100%;min-height:0}

/* ---- Ordinateur : monde à gauche, panneau à droite, espacements calculés sur la hauteur ---- */
@media (min-width:901px){
  .home-panel{height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin;
    padding-top:clamp(52px,7vh,80px);padding-bottom:clamp(12px,2.5vh,28px);gap:clamp(8px,1.9vh,18px)}
  .home .brand h1{font-size:clamp(40px,min(5.5vw,8.5vh),86px)}
  .home .brand .squad{font-size:clamp(13px,2vh,21px)}
  .home .beta-tag{margin-top:clamp(6px,1.2vh,12px)}
  .home .lead{line-height:1.5}
  .home .mini{padding:clamp(7px,1.4vh,12px)}
  .home .form{gap:clamp(6px,1.2vh,10px)}
  .home .form input{padding-block:clamp(10px,1.8vh,16px)}
  .home .cta{padding-block:clamp(11px,1.9vh,16px)}
  .world-chip{min-height:0;padding:clamp(4px,.8vh,7px) 8px}
}
@media (min-width:901px) and (max-height:620px){ .home .lead,.home-panel>.eyebrow{display:none} }

/* ---- Téléphone / tablette en portrait : monde en haut (il se réduit), panneau en bas ---- */
@media (max-width:900px){
  .home{display:flex;flex-direction:column;overflow:hidden}
  .home-world{position:relative;inset:auto;height:auto;flex:1 1 auto;min-height:150px}
  .home-panel{flex:0 1 auto;margin-top:-26px;min-height:0;max-height:calc(100% - 150px);overflow:visible;
    padding:clamp(14px,2.4dvh,24px) max(18px,calc((100vw - 520px)/2)) max(12px,env(safe-area-inset-bottom,0px));gap:clamp(7px,1.4dvh,12px)}
  /* le logo repose sur le haut du panneau, quelle que soit sa hauteur (plus de chevauchement avec le texte) */
  .home .brand{top:auto;bottom:calc(100% + 10px);left:max(18px,calc((100vw - 520px)/2))}
  .home .brand h1{font-size:clamp(38px,min(13vw,7dvh),56px)}
  .home .beta-tag{margin-top:8px;font-size:9px;padding:3px 8px}
  .world-caption{bottom:42px}
  .home .mini{padding:clamp(6px,1.1dvh,10px) 12px}
  .home .mini b{font-size:15px}
  .home .form{gap:clamp(6px,1.1dvh,10px)}
  .home .form input{padding-block:clamp(9px,1.6dvh,15px)}
  .home .form .cta{padding-block:clamp(10px,1.8dvh,15px)}
  .home .ghost{padding-block:clamp(8px,1.4dvh,12px)}
  .home .links{margin-top:0}
  .privbox{max-height:44dvh;overflow-y:auto}
}
@media (max-width:900px) and (max-height:700px){ .home .lead{display:none} }
@media (max-width:900px) and (max-height:600px){ .home .cards{display:none} }

/* ---- Téléphone en paysage : côte à côte, comme sur ordinateur ---- */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row}
  .home-world{flex:1 1 50%;min-height:0;height:100%}
  .home-panel{flex:0 0 50%;width:50%;margin:0;max-height:none;height:100%;overflow-y:auto;border-radius:0;padding:56px 18px 10px;justify-content:flex-start}
  .home .brand{position:relative;top:auto;bottom:auto;left:auto;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .home .brand h1{font-size:34px}.home .brand .squad{margin-top:0}
  .home .cards{display:none}
  .world-caption{bottom:16px;right:auto;left:16px;text-align:left}
}

/* ---- Autres écrans : la page ne défile jamais, seules les listes défilent ---- */
.screen{min-height:0}
.lobby,.over,.board{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.bg-over #app,.bg-board #app,.bg-lobby #app{padding-top:clamp(52px,8dvh,64px);padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.over .rank{max-height:none;flex:1 1 auto;min-height:90px;overflow-y:auto}
.board .rank{flex:1 1 auto;min-height:0;overflow-y:auto}
.lobby .ring{width:clamp(110px,24dvh,190px);height:auto;aspect-ratio:1}
@media (max-height:640px){ .lobby .kicker{display:none} .lobby .team{font-size:22px} }
.game{height:100%}

/* ---- Drapeau de langue (à côté de la roue crantée) ---- */
#lang-button{position:fixed;top:14px;right:110px;z-index:50;width:36px;height:36px;border-radius:50%;padding:0;display:grid;place-items:center;
  background:#25253edb;border:1px solid #ffffff40;cursor:pointer}
#lang-button svg{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px #0003;display:block}
#lang-button:hover{border-color:#ffe0a0}
body:not(.bg-home) #lang-button{display:none}
#lang-menu{position:fixed;top:58px;right:14px;z-index:60;width:220px;max-height:min(70dvh,520px);overflow-y:auto;padding:6px;border-radius:16px;
  background:#2f2a44f7;border:1px solid #ffffff33;box-shadow:0 20px 60px #0007;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
#lang-menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:none;color:#eee8fc;font-size:13px;text-align:left;cursor:pointer;border:0}
#lang-menu button:hover{background:#ffffff14}
#lang-menu button.sel{background:#ffe0a01f;color:#ffedc0;font-weight:800}
#lang-menu svg{width:24px;height:16px;border-radius:3px;flex:none;box-shadow:0 0 0 1px #0003}

/* ---- Salon : tout visible d'un coup, même sur petit téléphone ---- */
.lobby{gap:clamp(6px,1.6dvh,16px)!important}
.lobby .ring{width:clamp(84px,19dvh,190px)}
.lobby .ring b{font-size:clamp(34px,6dvh,58px)}
.lobby .invite{padding:clamp(6px,1.2dvh,12px) 14px;gap:clamp(2px,.6dvh,6px)}
.lobby .invite b{font-size:clamp(24px,4.4dvh,34px)}
.lobby .invite .ghost{padding-block:clamp(7px,1.2dvh,12px)}
.lobby .crew{gap:clamp(4px,1dvh,10px)}
.lobby .mate i{max-width:clamp(30px,5.6dvh,54px)}
.lobby .row2 button{padding-block:clamp(10px,1.7dvh,15px)}
@media (max-height:760px){ .lobby .kicker{display:none} .lobby .team{font-size:clamp(20px,3.6dvh,30px)} .lobby .mate small{font-size:10px} }

/* ---- Téléphone : quand le bloc « Salon entre amis » est ouvert, il se règle sur la place disponible ---- */
@media (max-width:900px){
  .home-panel>*{flex-shrink:0}
  .home .form{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
  .home .form>*{flex-shrink:0}
  .home .privbox{flex:0 1 auto;min-height:110px;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  .home-panel:has(#pbox:not([hidden])) .cards,.home-panel:has(#pbox:not([hidden])) .lead{display:none}
  .home-panel:has(#pbox:not([hidden])){max-height:calc(100% - 120px)}
  .home:has(#pbox:not([hidden])) .home-world{min-height:120px}
}
@media (max-width:900px){
  .home .world-picker{grid-template-columns:repeat(4,1fr);gap:4px}
  .home .world-chip{font-size:10px;padding:5px 6px;min-height:0;gap:2px;line-height:1.15}
  .home .world-chip span{font-size:9px}
  .home .privbox{gap:clamp(5px,1dvh,9px);padding:clamp(8px,1.4dvh,12px)}
  .home .privbox input{padding-block:clamp(8px,1.4dvh,13px)}
}