/* DELUX V33: responsive correction for all application screens. */
:root{box-sizing:border-box}html{width:100%;min-width:0;min-height:100%}*,*::before,*::after{box-sizing:border-box}
body{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden}
header,main{width:100%;min-width:0}main{max-width:1440px;margin-inline:auto}
img,canvas,video,iframe{max-width:100%}button,input,select{max-width:100%;min-width:0}
.hero{min-width:0}.hero canvas{display:block;width:100%;height:auto}
#s-login:not([hidden]),#s-lobby:not([hidden]),#s-game:not([hidden]){min-width:0;width:100%}
@media(orientation:landscape) and (min-width:560px){
 header{min-height:38px;padding:4px 14px}header h1{font-size:19px}main{padding:8px clamp(10px,1.8vw,24px)}
 #s-login:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"brand auth";gap:clamp(10px,1.5vw,22px);align-items:center;min-height:calc(100dvh - 54px);height:auto}
 #s-login>.hero{grid-area:brand;width:100%;max-width:none;margin:0;align-self:center}
 #s-login>.hero canvas{width:100%;height:min(58dvh,420px);min-height:0;aspect-ratio:16/10;object-fit:cover}
 #s-login>.card{grid-area:auth;width:100%;max-width:none;margin:0;padding:clamp(12px,2vh,20px);align-self:center}
 #s-login>.card h2{font-size:clamp(17px,2.5vh,24px);margin-bottom:4px}
 #s-login>.card p{font-size:clamp(11px,1.7vh,14px);line-height:1.35}
 #s-login .soc{min-height:42px;padding:8px 10px;margin-top:6px;font-size:clamp(12px,1.8vh,15px)}
 #s-login #dlxf input{min-height:40px;padding:8px 10px}#s-login .tiny{font-size:10px}
 #s-lobby:not([hidden]){display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"visual welcome" "visual country" "visual menu" "visual server" "visual animal" "visual friend" "visual help";gap:clamp(5px,1vh,10px) clamp(12px,2vw,26px);align-items:start;max-width:1440px;margin:0 auto}
 #s-lobby>.hero{grid-area:visual;width:100%;max-width:none;height:calc(100dvh - 70px);min-height:0;max-height:none;margin:0}
 #s-lobby>.hero canvas{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover}
 #s-lobby>.k2{grid-area:welcome;margin:0;text-align:left}#s-lobby>#dlx-pais{grid-area:country;margin:0}
 #s-lobby>.menu{grid-area:menu;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
 #s-lobby>.menu .big{min-height:clamp(38px,7vh,54px);padding:6px;font-size:clamp(11px,1.7vh,15px)}
 #s-lobby>label#l-srv{grid-area:server;margin:0}#s-lobby>label.pl:not(#l-srv){grid-area:animal;margin:0}
 #s-lobby>details.card{grid-area:friend;margin:0;padding:8px 10px}
 #s-lobby>p.tiny:nth-last-child(2){grid-area:help;margin:0;font-size:clamp(8px,1.3vh,10px);line-height:1.25}
 #s-lobby>p.tiny:last-child{display:none}
}
@media(orientation:portrait) and (max-width:900px){
 header{min-height:48px;padding:8px 12px}header h1{font-size:20px}
 main{max-width:680px;padding:10px 12px calc(22px + env(safe-area-inset-bottom))}
 #s-login:not([hidden]),#s-lobby:not([hidden]){display:block!important;min-height:0;height:auto}
 #s-login>.hero,#s-lobby>.hero{width:100%;max-width:none;margin:0 auto 12px}
 #s-login>.hero canvas,#s-lobby>.hero canvas{width:100%;height:auto;min-height:0;aspect-ratio:16/10}
 #s-login>.card{width:100%;max-width:none;margin:10px 0}
 #s-login .soc{width:100%;min-height:48px}
 #s-lobby>.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
 #s-lobby>.menu .big{min-height:50px;padding:9px 6px;font-size:14px}
 #s-lobby>.pl,#s-lobby>details.card{width:100%;margin:8px 0}
}
@media(orientation:landscape) and (max-height:500px){
 body{overflow-y:auto}main{padding:6px 10px}
 #s-login:not([hidden]){min-height:0;align-items:start}
 #s-login>.hero canvas{height:calc(100dvh - 72px);max-height:360px}
 #s-login>.card{padding:9px 12px}
 #s-login .soc{min-height:36px;margin-top:4px;padding:5px 8px}
 #s-lobby>.hero{height:calc(100dvh - 52px);min-height:190px}
}
#s-game canvas#cv{width:100%;height:auto;max-height:58dvh;object-fit:contain}
#s-game .ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(orientation:landscape) and (min-width:560px){
 #s-game:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,28%);grid-template-areas:"hud hud" "arena controls" "health controls";gap:8px 14px;align-items:start}
 #s-game .hud.top{grid-area:hud}#s-game canvas#cv{grid-area:arena;width:100%;max-height:calc(100dvh - 130px)}
 #s-game .hud.sub{grid-area:health}#s-game .ctl{grid-area:controls;gap:7px}
 #s-game .ctl button,#s-game .ctl select{min-height:38px}
}
@supports(padding:max(0px)){main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}}