/* B21 — online mobile layout. Loaded LAST. Native AE.Touch controls remain the sole interactive buttons. */
html,body{overscroll-behavior:none}
/* Desktop remains under the game's existing HUD; never force canvas CSS width without updating its backing store. */
body.som-online-required .tg-grow,body.som-online-required .tg-or,
body.som-online-required .tg-fld:has(#tg-r-email),
body.som-online-required .tg-auth-row .tg-link:has(+.tg-link){display:none!important}
body.som-online-required .tg-auth-row .tg-link{display:none!important} /* reset-mail not implemented on live API */
body.som-online-required:not(.som-online-joined) #som-live-controls{display:none!important}
body.som-online-required #som-live-card{
 background:linear-gradient(165deg,#322a36,#171421 70%,#100e18);
 border:2px solid #bb8e46;border-radius:6px;
 box-shadow:inset 0 0 0 2px #6b4b2c,0 16px 48px #000c;
}
/* The online chat uses the native game chat icon; collapsed by default and never another floating toggle. */
#som-chat:not(.show){display:none!important}
#som-chat.show{display:block}
body.som-online-required .chat:not(.open) .chat-l{display:none!important} /* hide duplicate game log */
/* Landscape and portrait touch UI are entirely separate from PC HUD. */
@media (hover:none) and (pointer:coarse), (any-pointer:coarse) and (max-width:1024px){
 html.ae-touch body.som-online-required .hud-tl {transform:scale(.69);transform-origin:top left}
 html.ae-touch body.som-online-required .hud-tr {transform:scale(.73);transform-origin:top right}
 html.ae-touch body.som-online-required .console .orb {width:42px;height:42px;left:calc(var(--x) - 21px);top:calc(var(--y) - 21px)}
 html.ae-touch body.som-online-required .console .orb .tt-orbcd {inset:3%}
 html.ae-touch body.som-online-required .console .pet-strip {transform:scale(.9);transform-origin:top left}
 html.ae-touch body.som-online-required .console .sk.empty {display:none!important}
 html.ae-touch body.som-online-required .chat {display:none!important} /* Touch row owns chat */
 html.ae-touch body.som-online-required #som-live-controls {display:none!important}
 html.ae-touch body.som-online-required #som-offline-badge{display:none!important}
 html.ae-touch #ae-touch .tt-row .tt-btn {width:40px;height:40px}
 html.ae-touch #ae-touch .tt-btn svg {width:21px;height:21px}
 body.som-online-required #som-chat.show{
   position:fixed;left:max(8px,env(safe-area-inset-left));right:auto;
   bottom:calc(48px + env(safe-area-inset-bottom));
   width:min(344px,calc(100vw - 24px));max-width:calc(100vw - 24px);
   max-height:min(34dvh,230px);overflow:hidden;z-index:12000;
   background:rgba(8,22,34,.94);border:1px solid #b79253;
 }
 body.som-online-required #som-chat-log{height:min(21dvh,108px);min-height:36px;overflow-y:auto}
 body.som-online-required #som-chat-form{display:flex;flex-wrap:nowrap;align-items:center;padding:5px;gap:4px}
 body.som-online-required #som-chat-channel{flex:0 0 68px;max-width:68px;min-width:0;font-size:11px;padding:5px 2px;min-height:36px}
 body.som-online-required #som-chat-input{flex:1 1 0;min-width:0;font-size:16px;padding:5px;min-height:36px}
 body.som-online-required #som-chat-send{flex:0 0 auto;min-height:36px;padding:5px 8px;font-size:12px}
 body.som-online-required #som-chat-friend-target:not([hidden]){max-width:75px;min-width:0}
 body.som-online-required #som-live-layer{padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
 body.som-online-required #som-live-card{padding:12px;width:min(460px,100%);max-height:calc(100dvh - 16px)}
}
@media (max-height:500px) and (orientation:landscape){
 html.ae-touch body.som-online-required .hud-tl {transform:scale(.59)}
 html.ae-touch body.som-online-required .hud-tr {transform:scale(.62)}
 html.ae-touch body.som-online-required .hud-tr .qt {display:none!important}
 body.som-online-required #som-chat.show{bottom:calc(48px + env(safe-area-inset-bottom));max-height:47dvh;width:min(340px,43vw)}
 body.som-online-required #som-chat-log{height:min(19dvh,72px)}
}
@media (max-width:500px) and (orientation:portrait){
 html.ae-touch body.som-online-required .hud-tl{transform:scale(.73)}
 html.ae-touch body.som-online-required .hud-tr{transform:scale(.66)}
 body.som-online-required #som-chat.show{bottom:calc(58px + env(safe-area-inset-bottom));width:calc(100vw - 18px);max-height:32dvh}
}