/* ===================== Alnasia — affichage mobile / tablette ===================== */
#joy{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;touch-action:none;z-index:9;opacity:.72;pointer-events:auto}
#joy.hidden{display:none}
#joy .jring{position:absolute;inset:0;border-radius:50%;border:3px solid #8a5a1c;background:radial-gradient(circle,#1d1030aa 0,#07040bcc 100%);box-shadow:inset 0 0 22px #b3122b66,0 0 14px #000a}
#joy .jring::before{content:'';position:absolute;inset:14px;border-radius:50%;border:1px dashed #f2c14e66}
#joy .jknob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:3px solid #f2c14e;background:radial-gradient(circle at 35% 30%,#ff6a82,#8a0c24 60%,#2a0410);box-shadow:0 0 16px #ff4a62aa,0 4px 8px #000a;transition:box-shadow .1s}
#joy.on{opacity:1}
#chatBtn,#rotate{display:none}

@media (orientation:portrait){
  body.mobile #rotate{display:flex;position:fixed;inset:0;z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#07040bf5;color:#f2c14e;text-align:center;font:700 20px var(--serif)}
  body.mobile #rotate svg{width:96px;height:96px;animation:rot 2.4s ease-in-out infinite}
  body.mobile #rotate small{font:14px var(--ui);color:#bfa98a}
}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* ---- menus de connexion ---- */
body.mobile #chars .slotsbox{left:10px;top:10px;width:min(330px,46vw);max-height:92vh;overflow:auto}
body.mobile #charinfo{display:none}
body.mobile .logo .l1{font-size:46px}body.mobile .logo{margin-top:2vh}
body.mobile .authbox{width:min(360px,90vw);margin-top:2vh}
body.mobile .createbox{left:8px;top:6px;width:min(380px,50vw);max-height:96vh;padding:12px 14px}
body.mobile #btnPlay{bottom:12px;font-size:18px;padding:12px 40px}
body.mobile .btn{min-height:40px}
body.mobile input,body.mobile select{font-size:16px}
body.mobile #dpad{display:none!important}

/* ---- HUD en jeu ---- */
body.mobile #hudTL{left:calc(6px + env(safe-area-inset-left));top:4px}
body.mobile #hudTR{right:calc(6px + env(safe-area-inset-right));top:4px}
body.mobile #miniWrap{width:104px;height:104px}
body.mobile #miniWrap .ring{inset:-5px}
body.mobile #miniWrap .gem{width:8px;height:8px}
body.mobile #onlineBox{min-width:80px;padding:4px 12px 4px 8px}
body.mobile #onlineBox b{font-size:17px}body.mobile #onlineBox svg{width:22px;height:22px}body.mobile #onlineBox small{font-size:8px}
body.mobile .zinfo b{font-size:14px}body.mobile .zinfo span{font-size:11px}body.mobile #fps{display:none}
body.mobile #giftBtn{right:210px;top:8px;width:46px;height:46px}body.mobile #giftBtn img{width:28px;height:28px}
body.mobile #menuBtns{top:150px;grid-template-columns:repeat(4,42px);gap:6px;right:calc(6px + env(safe-area-inset-right))}
body.mobile .mb{width:42px;height:42px}body.mobile .mb img{width:25px;height:25px}
body.mobile #notices{top:14%}
body.mobile #banner{font-size:30px}body.mobile #banner small{font-size:14px}
body.mobile #turnBanner{font-size:38px}
body.mobile #hint{bottom:92px;font-size:12px}

/* barre du bas : disposition horizontale compacte */
body.mobile #bottom{left:0;margin-left:0;width:100%;height:0;transform:none}
body.mobile #bottom .bwing{display:none}
body.mobile #orbs{position:fixed;left:50%;bottom:calc(4px + env(safe-area-inset-bottom));transform:translateX(-50%) scale(var(--ms,.7));transform-origin:50% 100%}
body.mobile #bLeft{position:fixed;right:auto;left:calc(max(18px,env(safe-area-inset-left)) + 150px);bottom:20px}
body.mobile #fightBtns{flex-direction:row}
body.mobile #fightBtns .btn{min-width:98px;min-height:46px;font-size:15px}
body.mobile #bRight{position:fixed;left:auto;right:calc(6px + env(safe-area-inset-right));bottom:calc(6px + env(safe-area-inset-bottom));max-width:none}
body.mobile #spellbar{display:none;grid-template-columns:repeat(5,52px);gap:6px;padding:8px 10px;clip-path:none;border-radius:8px}
body.mobile.infight #spellbar{display:grid}
body.mobile .sp{width:52px;height:52px}
body.mobile #fightTop{top:4px;transform:translateX(-50%) scale(.85);transform-origin:50% 0}
body.mobile #timeline{max-width:48vw}
body.mobile #hudFx{display:block}

/* discussion repliée */
body.mobile #chatbox{left:calc(max(18px,env(safe-area-inset-left)) + 142px);bottom:62px;width:min(46vw,300px);pointer-events:none}
body.mobile #chatlog{max-height:64px;font-size:11px}
body.mobile #chatin{display:none;pointer-events:auto;position:fixed;left:8px;right:8px;top:6px;z-index:90;font-size:16px;padding:10px}
body.mobile.chatopen #chatin{display:block}
body.mobile #chatBtn{display:block;position:absolute;left:calc(max(18px,env(safe-area-inset-left)) + 144px);bottom:12px;z-index:8;padding:8px 14px;border-radius:6px;border:2px solid #8a5a1c;background:linear-gradient(#2a1640,#0b0612);color:#f2c14e;font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase}
body.mobile.infight #chatBtn{display:none}

/* fenêtres plein écran */
body.mobile .panel,body.mobile .panel.wide{width:calc(100vw - 16px);max-width:none;max-height:calc(100vh - 12px);left:50%;top:50%}
body.mobile .panel .ph{cursor:default;padding:8px 12px}
body.mobile .panel .ph .x{width:38px;height:38px;font-size:16px}
body.mobile .panel .pb{padding:10px 12px}
body.mobile .invwrap{flex-direction:row;flex-wrap:wrap}
body.mobile .eqcol{width:auto;flex:1;min-width:170px}
body.mobile .cell{width:50px;height:50px}body.mobile .grid{grid-template-columns:repeat(auto-fill,50px)}
body.mobile .cols2{grid-template-columns:1fr}
body.mobile .plus{width:36px;height:36px;font-size:20px}
body.mobile .roles{grid-template-columns:repeat(2,1fr)}body.mobile .keys{grid-template-columns:repeat(2,1fr)}
body.mobile .admwrap{grid-template-columns:1fr}body.mobile .admlist{max-height:22vh}body.mobile .admdet{max-height:none}
body.mobile .ahfilters{grid-template-columns:1fr 1fr}body.mobile .ahsell{grid-template-columns:1fr}body.mobile .lawgrid{grid-template-columns:1fr}
body.mobile .govrow{grid-template-columns:1fr 1fr}
body.mobile .packs{grid-template-columns:repeat(2,1fr)}
body.mobile .tab{padding:10px 4px}
body.mobile #result{width:min(440px,92vw)}
body.mobile #giftModal .gbox{width:92vw}

@media (max-height:420px){
  body.mobile #hudTL{--hs:.5}
  body.mobile #menuBtns{top:126px}
}