/* Landscape phones (844x390): the menu as a side rail, the way Octopath Traveler, Genshin Impact's character screen and Pokémon
   Scarlet/Violet lay out their menus in landscape. The tabs stack in a column on the left, under the title and the close button,
   and the page takes the whole height on the right. The old layout spent 130 px of the 390 on a title bar and a row of seven tabs
   (the last one cut by the fade) and left about 220 px for the page. Loaded last, so it wins over the earlier layers. */
@media (orientation:landscape) and (max-height:520px){
 #menu.modal{padding:6px max(6px,env(safe-area-inset-right,0px)) 6px max(6px,env(safe-area-inset-left,0px))!important}
 #menu .menu-sheet{display:grid!important;grid-template-columns:164px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  width:100%!important;max-width:980px;height:calc(100dvh - 12px)!important;max-height:none!important;overflow:hidden!important}
 #menu .menu-sheet{position:relative}
 /* the title bar goes: the selected tab already says where you are; the close button sits in the top right corner of the page */
 #menu .menu-sheet>header{position:absolute!important;top:0;right:0;z-index:7;padding:0!important;min-height:0!important;background:none!important;border:0!important}
 #menu .menu-sheet>header>div{display:none!important}
 #menu #menu-close{width:38px!important;height:38px!important}
 #menu .menu-sheet>nav#menu-tabs{grid-column:1;grid-row:1/-1;align-self:center;max-height:100%;display:flex!important;flex-direction:column!important;gap:2px!important;
  height:auto!important;padding:0 6px 4px 2px!important;overflow-x:hidden!important;overflow-y:auto!important;
  -webkit-mask-image:none!important;mask-image:none!important;border:0!important;background:none!important}
 #menu .menu-sheet>nav#menu-tabs button{flex:0 0 36px!important;height:36px!important;min-height:36px!important;width:100%!important;
  justify-content:flex-start!important;gap:8px!important;padding:0 6px!important;font-size:13px!important}
 #menu .menu-sheet>nav#menu-tabs button i{width:16px;text-align:center;font-size:13px!important}
 #menu .menu-sheet>nav#menu-tabs button.selected{transform:translateX(4px)!important}
 #menu .menu-sheet>nav#menu-tabs [data-tab].has-dot::after{top:-8px;right:-8px}
 #menu .menu-sheet #menu-content{grid-column:2;grid-row:1/-1;min-height:0;overflow-y:auto!important;padding:6px 46px 14px 12px!important;
  border-left:1px solid #f0d49a33}
 /* the shop hides the tabs: its page then takes both columns */
 #menu.shop-open .menu-sheet #menu-content{grid-column:1/-1;border-left:0}
}
/* the native selects (inventory owner and item) take the panel's parchment look instead of the system grey */
#menu #menu-content select{appearance:none;-webkit-appearance:none;background:#f3e3bf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233a3326'/%3E%3C/svg%3E") no-repeat right 10px center;
 color:#3a3326;border:2px solid #b8893e;border-radius:8px;padding:0 28px 0 10px;font:600 14px/1.2 inherit;box-shadow:inset 0 1px 0 #fff8}
/* the chosen font size is the teal button (as "Continuar jornada"), not a square outline drawn around the framed button */
.font-scale-btn.active:not(#_a):not(#_b){outline:0!important;border-image-source:url(assets/ui/v5/btn_wide_primary.png)!important;background-color:transparent!important;color:#fff!important;text-shadow:0 1px 0 #0d4a43}