/* Mobile adaptation. Original desktop styles and game rules are retained. */
#touchControls { display:none; }
#offlineStatus { position:fixed; left:60px; bottom:12px; font-size:12px; color:#666; }
@media (max-width: 800px) {
 html, body { min-height:100%; height:auto; }
 body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
 div#wrapper { width:auto; padding:20px 16px 12px; margin:0; display:flex; flex-direction:column; }
 div#content { height:auto; overflow:visible; min-height:240px; }
 div#outerSlider, div#locationSlider { position:relative; left:0!important; top:0!important; width:100%!important; }
 div#outerSlider > div { float:none; width:100%; height:auto; overflow:visible; }
 div#header { height:auto; display:flex; flex-wrap:wrap; gap:8px 0; padding-bottom:24px; }
 div.headerButton { min-height:32px; display:flex; align-items:center; }
 div.location { float:none; width:100%; display:none!important; min-height:160px; }
 div.location.mobile-active { display:block!important; }
 div#main { display:block; }
 body.mobile-world div#main, body.mobile-space div#main { display:none; }
 div#buildBtns, div#craftBtns, div#buyBtns { position:relative; top:auto; left:auto; display:inline-block; vertical-align:top; margin:24px 16px 0 0; }
 div#storesContainer { position:relative; top:auto; right:0!important; margin:24px 0 8px; }
 div#stores, div#weapons, div#village, div#perks { box-sizing:border-box; width:100%; }
 div#village, div#workers, div#perks, div#blueprints { position:relative; top:auto; left:auto; right:auto; margin:24px 0; }
 div#blueprints { box-sizing:border-box; width:100%; }
 div#workers { width:calc(100% - 24px); }
 div#workers .row_val { min-width:90px; padding-right:60px; }
 .workerRow { min-height:40px; margin:14px 0; }
 .upBtn,.dnBtn,.upManyBtn,.dnManyBtn { width:28px; height:24px; }
 .upManyBtn,.dnManyBtn { right:-28px; }
 .workerRow .upBtn,.workerRow .dnBtn { right:28px; }
 .workerRow .upManyBtn,.workerRow .dnManyBtn { right:0; }
 div.button { min-height:32px; display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
 div.button div.cooldown { pointer-events:none; }
 #pathScroller { width:100%; max-height:none; overflow:visible; }
 #outfitting { box-sizing:border-box; width:calc(100% - 24px); }
 div.outfitRow { min-height:40px; margin-top:14px; margin-bottom:14px; }
 div.outfitRow > .row_val { padding-right:62px; }
 .outfitRow .upBtn,.outfitRow .dnBtn { right:28px; }
 .outfitRow .upManyBtn,.outfitRow .dnManyBtn { right:0; }
 div#notifications { position:relative; top:auto; left:auto; width:100%; height:160px; margin:24px 0 16px; order:2; }
 #notifyGradient { pointer-events:none; }
 .menu { position:relative; right:auto; bottom:auto; display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 16px 24px; }
 .menu span { float:none; margin:0; min-height:32px; display:inline-flex; align-items:center; }
 .customSelectOptions > ul { position:relative; bottom:auto; right:auto; }
 .logo { position:relative; display:block; width:44px; left:16px; margin-bottom:8px; }
 #offlineStatus { position:relative; left:auto; bottom:auto; margin:4px 16px 16px; }
 .eventPanel { position:fixed; box-sizing:border-box; left:16px!important; top:calc(24px + env(safe-area-inset-top))!important; width:calc(100% - 32px)!important; max-height:calc(100dvh - 64px); overflow:auto; padding:20px 16px; border-color:currentColor; }
 .eventPanel:before { position:fixed; inset:-100vh -100vw; width:300vw; height:300vh; }
 .eventPanel .button { margin-right:10px; }
 #description textarea { box-sizing:border-box; font-size:16px; }
 #worldOuter { display:block; width:100%; overflow:auto; }
 #map { font-size:min(11px, calc((100vw - 36px) * 0.027)); line-height:9px; letter-spacing:0; touch-action:none; }
 #bagspace-world { height:auto; min-height:62px; }
 #touchControls { display:none; grid-template-columns:repeat(3,48px); gap:6px; justify-content:center; margin:16px auto 0; }
 body.mobile-world #touchControls, body.mobile-space #touchControls { display:grid; }
 #touchControls button { background:transparent; color:inherit; border:1px solid currentColor; font:22px Georgia,serif; height:48px; touch-action:none; }
 #touchControls button:first-child { grid-column:2; }
 #touchControls button:nth-child(2) { grid-column:1; }
 #spacePanel.mobile-active { position:relative!important; top:0!important; width:700px; height:700px; transform-origin:top left; transform:scale(var(--space-scale)); }
 body.mobile-space #content { height:calc(700px * var(--space-scale)); overflow:hidden; }
 body.mobile-space #notifications { display:none; }
 .outroContainer { width:100%; }
 #theEnd { margin-left:0; }
}