/* 31 Oct, night (owner: «проверить, как там в мобиле всё работает, по UI нет ли проблем на разных устройствах»): the phone fixes found on the
   emulated iPhone SE (320×568), Galaxy S9+ (320×658), Pixel 7 (412×839) and their landscape sides. Only small screens are touched; it is loaded
   after round.css so it wins over the older phone rules (game.css «PHONE» block). */

/* the top row on a narrow phone: the buttons did not fit (≈380 px on a 320 px screen) and «Журнал» and ☰ (the menu!) were cut off. The
   language, the graphics and the online count are also in the menu's settings / the channel list, so they step aside */
@media (orientation:portrait) and (max-width:400px){
  #top #lang,#top #gfxBtn,#top #online{display:none!important}
}

/* a window's title on a narrow screen: «О статусе персонажа» broke letter by letter beside «Сила …»; now the header wraps by words */
@media (max-width:520px){
  .modal>h2.mHead{flex-wrap:wrap!important;row-gap:4px}
  .mHead>span:first-child:not(.mTools){overflow-wrap:normal;word-break:normal;flex:1 1 auto}
}

/* the companions screen on a narrow phone: its tabs row was wider than the screen (344 px on 320) and pulled the whole screen wider, the
   text ran off the right edge */
@media (max-width:500px){
  .cscr{grid-template-columns:minmax(0,1fr)}
  .ctop{gap:8px!important;padding:8px 10px!important}
  .ctop h2{font-size:21px}
  .ckinds{margin-left:0}
  .ckinds button{padding:5px 10px;font-size:14px}
  .ctabs{overflow-x:auto;padding:0 8px;gap:2px;scrollbar-width:none}
  .ctabs button{padding:9px 10px!important;font-size:14px!important;white-space:nowrap}
}

/* the bag on a phone held sideways: it stood 230 px above the bottom with 55 % of the height, so on a 320–360 px high screen its header and
   ✕ went off the top. Now it sits at the right between the top row and the bottom bar, its grid scrolls */
@media (orientation:landscape) and (max-height:500px){
  #bag{left:auto!important;right:max(8px,env(safe-area-inset-right))!important;width:min(440px,62vw)!important;top:26px!important;
    bottom:calc(var(--hudH,66px) + 6px)!important;max-height:none!important}
  #bag .bgGrid{grid-template-columns:repeat(6,1fr)}
}

/* the main menu on a phone held sideways: the hero's stage (≈360 px) stood over the buttons, so the first screen showed only the fire and
   «Войти кошельком» was 550 px down. Now the stage is at the left, the title and the buttons at the right, both on the first screen */
@media (orientation:landscape) and (max-height:500px){
  #mainv{grid-template-columns:minmax(0,40%) minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
  .mvStage{position:sticky;top:0;padding-bottom:0!important;justify-content:flex-start!important}
  #mvCv{width:min(100%,250px)!important;height:auto!important}
  .mvL{padding-top:0!important}
  #menu .big{font-size:46px!important}
  #menu .sub{font-size:13px}
}

/* the main menu on a small phone held upright (iPhone SE): a smaller stage, so the first buttons are on the first screen */
@media (orientation:portrait) and (max-height:700px){
  #mvCv{width:min(100%,230px)!important;height:auto!important}
}

/* the commands on a narrow phone held upright (≤ 380 px): squeezed over the right of the second row they were 46 px wide and 18 px high —
   «Автоата…», «Карта м…», «Инвент…», too small for a finger. Now they are a row of their own under the bar, five a line, full words */
@media (orientation:portrait) and (max-width:380px){
  #hud>#right{grid-area:2/1!important;justify-self:stretch!important;align-self:auto!important;padding:4px 6px 6px!important;background:linear-gradient(180deg,#140e0aee,#0b0806f5)!important;border-top:1px solid #3a2a16!important}
  #hud #cmds{grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important}
  #hud #cmds .btn{height:24px!important;min-width:0!important;padding:0 2px!important;font-size:9px!important;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis}
  #chat{bottom:calc(var(--hudH,124px) + 6px)!important}
}

/* 5 Nov (audit): from 381 to 500 px held upright (iPhone 12–16, Pixel 7) the commands still sat over the right of the second row, three a line.
   Since «Друзья» (1 Nov) and «PK ON» (2 Nov) there are 11 of them: four rows, and the first one covered the mana and experience bars. They get
   a row of their own under the bar here too, six a line (two rows); the chat stands above the taller bar */
@media (orientation:portrait) and (min-width:381px) and (max-width:500px){
  #hud>#right{grid-area:2/1!important;justify-self:stretch!important;align-self:auto!important;padding:4px 6px 6px!important;background:linear-gradient(180deg,#140e0aee,#0b0806f5)!important;border-top:1px solid #3a2a16!important}
  #hud #cmds{grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important}
  #hud #cmds .btn{height:26px!important;min-width:0!important;padding:0 2px!important;font-size:10px!important;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis}
  #chat{bottom:calc(var(--hudH,186px) + 6px)!important}
}