/* Phone mode (body.is-phone, set by mobile.js): status strip on top, tab bar at the bottom, menu drawer, one-line chat,
   windows full screen. Everything here is scoped to body.is-phone, so the desktop look is untouched.
   Test on a PC by opening the game with ?phone=1 at the end of the address. */
#m-strip,#m-tabs,#m-drawer,#m-scrim{display:none}
body.is-phone{--m-top:46px;--m-tabs:56px}

body.is-phone #m-strip{display:flex;position:fixed;top:0;left:0;right:0;height:var(--m-top);z-index:30;align-items:center;gap:8px;padding:4px 8px;padding-top:max(4px,env(safe-area-inset-top));box-sizing:content-box;background:rgba(18,20,30,.82);border-bottom:1px solid rgba(255,255,255,.14);color:#e8e8e8;font:12px Verdana,sans-serif;touch-action:manipulation}
#m-strip .m-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#m-strip .m-name{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m-strip .m-bars{display:grid;gap:2px}
#m-strip .m-bar{position:relative;height:9px;background:#222;border:1px solid #000;border-radius:2px;overflow:hidden}
#m-strip .m-bar i{position:absolute;inset:0 auto 0 0;width:0;background:#43a047}
#m-strip .m-bar.mp i{background:#4a63d8}#m-strip .m-bar.xp i{background:#c9a13b}
#m-strip .m-bar b{position:absolute;inset:0;font:bold 8px/9px Verdana;text-align:center;color:#fff;text-shadow:1px 1px #000}
#m-strip .m-gold{white-space:nowrap;font-weight:bold;color:#ffd24a}
#m-strip button{min-width:42px;height:38px;font:bold 20px Verdana;color:#fff;background:rgba(60,64,90,.9);border:1px solid rgba(255,255,255,.3);border-radius:4px}

body.is-phone #m-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--m-tabs);padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;z-index:30;background:rgba(18,20,30,.9);border-top:1px solid rgba(255,255,255,.14)}
#m-tabs button{border:0;border-right:1px solid rgba(255,255,255,.08);background:transparent;color:#ddd;font:bold 12px Verdana;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation}
#m-tabs button span{font-size:20px;line-height:1}
#m-tabs button:active,#m-tabs button.on{background:rgba(90,100,160,.55);color:#fff}
#m-tabs button.danger{color:#ff8a80}

body.is-phone #m-scrim.on{display:block;position:fixed;inset:0;z-index:34;background:rgba(0,0,0,.45)}
body.is-phone #m-drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;width:min(280px,82vw);z-index:35;padding:12px;padding-top:calc(12px + env(safe-area-inset-top));gap:6px;background:rgba(18,20,30,.97);border-left:1px solid rgba(255,255,255,.2);transform:translateX(105%);transition:transform .18s;overflow-y:auto}
body.is-phone #m-drawer.on{transform:none}
#m-drawer h3{margin:0 0 6px;font:bold 14px Verdana;color:#ffe08a}
#m-drawer button{height:46px;text-align:left;padding:0 14px;font:14px Verdana;color:#eee;background:rgba(60,64,90,.8);border:1px solid rgba(255,255,255,.2);border-radius:4px}
#m-drawer button.danger{color:#ff9a90}
#m-drawer small{color:#aab;font:11px Verdana;margin-top:auto}

/* Game view sits between the strip and the tab bar; the old top bar becomes an on-demand dropdown. */
body.is-phone #game #client-top{display:none;top:calc(var(--m-top) + env(safe-area-inset-top));padding-right:0;flex-wrap:wrap;max-height:50vh;overflow:auto}
body.is-phone #game.m-top-open #client-top{display:flex}
body.is-phone #ui-controls{display:none!important}
body.is-phone #game .sidebar{top:calc(var(--m-top) + env(safe-area-inset-top));bottom:calc(var(--m-tabs) + env(safe-area-inset-bottom));width:min(240px,66vw)}
body.is-phone #game .sidebar .panel button,body.is-phone #game .sidebar button{min-height:32px}

/* One-line chat that opens when tapped. */
body.is-phone #game .console{left:0;right:0;width:100vw;bottom:calc(var(--m-tabs) + env(safe-area-inset-bottom));height:34px;z-index:25;transition:height .15s}
body.is-phone #game .console .console-tabs,body.is-phone #game .console #chat-form{display:none}
body.is-phone #game .console #log{height:100%;overflow:hidden;font-size:13px}
body.is-phone #game.m-chat-open .console{height:46vh}
body.is-phone #game.m-chat-open .console .console-tabs{display:flex}
body.is-phone #game.m-chat-open .console #chat-form{display:flex}
body.is-phone #game.m-chat-open .console #log{overflow:auto}
body.is-phone #game.ui-chat-off .console{display:block}

/* Windows: full screen, one clear Ok/Cancel at the bottom (those are the dialogs' own buttons). */
body.is-phone dialog[open]:not(#logout-confirm):not(#motd):not(#login-failure){position:fixed;inset:0;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0;border-radius:0;overflow:auto;box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body.is-phone dialog[open] .dialog-body{min-height:0}
body.is-phone dialog[open] button{min-height:40px}
body.is-phone dialog[open] input,body.is-phone dialog[open] select{min-height:38px;font-size:16px}