html, body { overflow:hidden; }
#gamecontainer { width:100%; height:100%; }
#startscreen, #generalmessage, #deathscreen, #reconnectscreen, #errorscreen { position:absolute; width:100%; height: 100%; }
#weaponpad {width:200px; height:200px;}
#hotkeys { left:330px; height:100px; }
.hotkey { width: 100px; height:100px; }
.hotkeyimage { transform: translate(-24px, 7px)  scale(1.2) rotate(45deg); }
.hotkeynumber { display:none; }
#bombbutton {width:128px; height:128px;bottom:180px;} 
#shieldbutton {right: 130px; bottom: 200px;}

#invitebutton { display:none; }
#clipbutton { top:68px; }
#furniturebutton { right:8px; top:160px; }
#fullscreenbutton { top:68px; right:220px; display:none; }
#logoutbutton { top:128px; }
#playerland-collectbutton { right: 160px; top: 130px; }
#playerland-kickplayers { right: 68px; top: 160px; }
#quickemotes { left: 10px; top: 135px; }
#strafelock-button { left: 10px; bottom: 180px; }

#coinscount { right:210px; }
#coinsbutton { right:160px; }
#helpbutton { right:160px; } 
#coinsarrow { right:98px; top:83px; }

.pmbadge { min-width:14px; font-size:15px; }
.gamebutton, .gamewidebutton { user-select:none; -moz-user-select:none;-webkit-user-select:none;-o-user-select:none;-ms-user-select:none; }

#movementhelp { background:url(../../files/gui/bbuilder_movementhelp_mobile.png); }

#recordinterface { width:512px; height:652px; max-height: 90%; }
#recordborder { width:512px; height:78%; top:10%; background-size: 100% 100%; }
#recordstartbutton { left:176px; width:160px;height:64px; }
#recordstopbutton { left:176px; width:160px;height:64px; }

@media 
(-webkit-min-device-pixel-ratio: 2) and (max-width: 1023px),
(-webkit-min-device-pixel-ratio: 2) and (min-width: 1025px) {

  #chatbox {position:absolute; left:68px; height:64px;width:788px; background-size: 788px 64px; top:6px;}
  #chatbox input {font-size:40px;color:#eee;background:none;width:95%;border:0;margin-left:2%;padding:16px 0;}

  #healthbar { height:39px; width:306px; left:372px; top:20px; margin-left:0px;}
  #healthbarbar {background-size: auto 39px;}
  #hitpoints {height:33px; top:3px;left:20px; }

  #coinscount {font-size:24px;right:228px;width:100px;top:24px;text-align:right;text-shadow:2px 2px 0 #000000;}
  #clanchatbutton { top:68px; }
  #menubutton { left:68px; }
  #homebutton { left:128px; }
  #playerlistbutton { left:128px; } /* playerlist button takes the home button's place */
  #pmbutton { left:188px; }
  .pmbadge { min-width:19px; font-size:20px; }
  #pinglabel { height: 40px; font-size: 30pt; }
  #winnercanvas { top:130px; }

  .backbutton { top:-16px; width:86px; background-size: contain; background-repeat: no-repeat; }

  .gamebutton { background-size: auto 60px; position:absolute; width:60px; height:60px; }
  .gamewidebutton { background-size: auto 60px; position:absolute; width:120px; height:60px; }

  .closebuttonimage { left:8px; top:8px; width:64px; height:64px; }

  #shortmessage { top: 60px; }

  .resizablewindow { left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 0px; resize: none; }
  .resizablewindowtitle { height:56px; font-size: 32px; }
  .resizablewindowclose { width:52px; height: 52px; }
  .adminconsoletext { bottom: 60px; top: 56px; font-size: 28px; }
  .adminconsoleinputcontainer { right: 2px; height: 54px; }
  .adminconsoleinput { font-size: 28px; }
  .resizablewindowcontent { top: 56px; bottom:80px; }
  .resizablewindow input[type=submit] { font-size:42px; }
  .ace_editor *, ul.tree .foldertitle, ul.tree .filetitle { font-size: 28px; }
}

/* iPhone X */
@media only screen
    and (device-width  : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) {
  #movepad { left:40px; }
  #hotkeys { left: 394px; }
  #weaponpad { right:40px; }

  #chatbutton { left:48px;  }
  #clanchatbutton { left:28px;  }
  #menubutton { left:108px; }
  #homebutton { left:168px; }
  #playerlistbutton { left:168px; } /* playerlist button takes the home button's place */
  #pmbutton { left:228px; }

  #furniturebutton { right: 110px; }
  #coinscount { right:268px; }
  #coinsbutton { right:200px; }
  #helpbutton { right:200px; }
  #coinsarrow { right:138px;  }
  #clipbutton { right:200px; }
  #fullscreenbutton { right:260px; }
  #bombbutton { right:60px;  }
  #minimap { right: 48px; }

  .resizablewindow { left: 40px; right: 40px; width:auto; }
}

.buttonspacing #movepad { left:40px; }
.buttonspacing #hotkeys { left: 394px; }
.buttonspacing #weaponpad { right:40px; }
.buttonspacing #shieldbutton { right:180px; bottom: 200px; }
.buttonspacing #playerland-collectbutton { right: 200px; }
.buttonspacing #playerland-kickplayers { right: 108px; }
.buttonspacing #quickemotes { left: 50px; }
.buttonspacing #strafelock-button { right: 180px; }

.buttonspacing #chatbutton { left:48px;  }
.buttonspacing #clanchatbutton { left:48px;  }
.buttonspacing #menubutton { left:108px; }
.buttonspacing #homebutton { left:168px; }
.buttonspacing #playerlistbutton { left:168px; } /* playerlist button takes the home button's place */
.buttonspacing #pmbutton { left:228px; }

.buttonspacing #furniturebutton { right: 40px; }
.buttonspacing #coinscount { right:268px; }
.buttonspacing #coinsbutton { right:200px; }
.buttonspacing #helpbutton { right:200px; }
.buttonspacing #coinsarrow { right:138px;  }
.buttonspacing #clipbutton { right:200px; }
.buttonspacing #fullscreenbutton { right:260px; }
.buttonspacing #bombbutton { right:60px;  }
.buttonspacing #minimap { right: 48px; }

.buttonspacing .resizablewindow { left: 40px; right: 40px; width:auto; }
.buttonspacing .resizablewindowclose { right: 40px; }

/* iPad */
/* disabled because its messing things up
@media only screen
    and (device-width  : 768px)
    and (device-height : 1024px) {
  #movepad { bottom:64px; width:450px; height:450px; }
  #hotkeys { left: 480px; right:480px; }
  #weaponpad { bottom:64px; width:450px; height:450px; }
  #bombbutton { bottom:500px;}
}
*/

/* New portrait mode */
@media screen and (orientation: portrait) {
  #chatbutton { top:104px;  }
  #clanchatbutton { top:164px; }
  #menubutton { top:104px; }
  #homebutton { top:104px; }
  #playerlistbutton { top:104px; } /* playerlist button takes the home button's place */
  #pmbutton   { top:104px; }
  #quickemotes { top: 210px; }

  #furniturebutton { top:104px; }
  #coinscount { top:116px; }
  #coinsbutton { top:104px; }
  #helpbutton { top:104px; }
  #coinsarrow { top:159px;  }
  #clipbutton { top:164px; }
  #fullscreenbutton { top:164px; }
  #minimap { top: 72px; }

  #chatbox { top: 102px; }
  #notifications { top:180px; }
}



/* Portrait mode: hotkeys stacked vertically on the left, above the movement
   pad. The .portrait class is toggled on <body> by Game.resizeMobileButtons(),
   which also sets exact inline position/size/scale on phones. Tablets skip
   the JS sizing, so the positional values below handle them. */
.portrait #hotkeys { left:10px; right:auto; bottom:330px; width:100px; height:auto; overflow:visible; }
.portrait .hotkey { float:none; }

/* iPad: bigger pads (450px at bottom:64px, see iPad media query above) */
@media only screen
    and (device-width  : 768px)
    and (device-height : 1024px) {
  .portrait #hotkeys { bottom:544px; }
}

/* Video clips (ClientTS VideoRecorder.ts): the clip button uses the (renamed) placement rules of the
   former story button above; touch-sized overlay label / export progress. --safe-* = notch / home indicator insets from the app shells. */
#clipbutton .clipicon { font-size:30px; }
#clipoverlay div { font-size:24px; padding:12px 24px; }
#clipprogress { width:340px; font-size:22px; padding:10px 16px; }
#clipprogress .clipprogresstrack { height:10px; margin-top:6px; }
#clipprogress .clipprogresshint { font-size:16px; }



/* Staff player list (ClientTS PlayerList.ts) - see newinterface.css */
#playerlistbutton .playerlistbuttonicon { font-size:30px; }
#playerlist { width:250px; height:380px; font-size:18px; }
#playerlist .playerlisttitle { font-size:20px; }
#playerlist .playerlistentry { padding:6px 8px 6px 12px; }
#playerlistmenu { font-size:19px; }
#playerlistmenu .playerlistmenuitem { padding:9px 14px; }
#playerlist .playerlistresize { width:28px; height:28px; }
#playerlist { left:8px; top:200px; }

/* "Go back to start!" on the map (menu_map.js): big pill centered at the bottom of the popup window
   (menu_map.js moves it down to the screen bottom when the map window is not full height) */
.mapgobackbutton { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(16px + var(--safe-bottom, 0px)); height:52px; line-height:52px; padding:0 26px; border-radius:26px; font-size:20px !important; font-weight:bold; }