/* The labeled panel is only used by the portrait toolbar. */
#portrait-menu-button,
.portrait-menu-dismiss,
#portrait-menu {display:none}
.toolbar .utility-menu-label,
.toolbar .utility-menu-state {display:none}
#portrait-menu-button[hidden],
.portrait-menu-dismiss[hidden],
#portrait-menu[hidden] {display:none!important}

#game.mobile-layout:not(.landscape-main)>.topbar:has(#portrait-menu-button) {
  inset:calc(7px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) auto auto;
  width:auto;
  height:44px;
  padding:0;
}
#game.mobile-layout:not(.landscape-main) .toolbar {
  position:relative;
  isolation:isolate;
  min-height:44px;
  gap:0;
}
#game.mobile-layout:not(.landscape-main) .toolbar>#portrait-menu-button {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  margin:0;
  padding:0;
  border:1px solid #d3b574b8;
  border-radius:50%;
  background:linear-gradient(155deg,#183d2cf5,#06251cf5);
  box-shadow:inset 0 0 0 2px #e8c47b13,0 2px 8px #00140d80;
  color:#ffdf9c;
  -webkit-tap-highlight-color:transparent;
}
#game.mobile-layout:not(.landscape-main) #portrait-menu-button .utility-icon {
  width:23px;
  height:23px;
  stroke-width:2.2;
}
#game.mobile-layout:not(.landscape-main) #portrait-menu-button[aria-expanded="true"] {
  border-color:#f6d789;
  background:linear-gradient(155deg,#245239,#0b3224);
}
#game.mobile-layout:not(.landscape-main) .toolbar>.portrait-menu-dismiss {
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
  width:auto;
  height:auto;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:1;
  filter:none;
  transform:none;
  transition:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
#game.mobile-layout:not(.landscape-main) .toolbar>#portrait-menu {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:3;
  display:grid;
  width:204px;
  max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  margin:0;
  padding:6px;
  border:1px solid #d9b76e;
  border-radius:10px;
  background:linear-gradient(145deg,#173e2cfb,#07271efc 65%,#061f18fc);
  box-shadow:inset 0 0 0 2px #eed28e16,0 7px 22px #00110dc7;
  color:#ffedbe;
}
#game.mobile-layout:not(.landscape-main) .toolbar #portrait-menu>.utility-button {
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  justify-items:start;
  column-gap:12px;
  width:100%;
  height:48px;
  min-width:0;
  min-height:48px;
  margin:0;
  padding:0 11px;
  border:0;
  border-radius:5px;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:400 12px/1.25 var(--game-font);
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase;
  text-shadow:0 1px 2px #001a10;
  filter:none;
  transform:none;
  transition:background-color .12s;
  -webkit-tap-highlight-color:transparent;
}
#game.mobile-layout:not(.landscape-main) #portrait-menu>.utility-button+.utility-button::before {
  content:'';
  position:absolute;
  top:0;
  left:11px;
  right:11px;
  height:1px;
  background:linear-gradient(90deg,#e8c57522,#e8c57544,#e8c57522);
  pointer-events:none;
}
#game.mobile-layout:not(.landscape-main) .toolbar #portrait-menu>.utility-button:hover,
#game.mobile-layout:not(.landscape-main) .toolbar #portrait-menu>.utility-button:active {
  background-color:#cfb36619;
}
#game.mobile-layout:not(.landscape-main) .toolbar #portrait-menu>.utility-button:focus-visible {
  outline:2px solid #ffe6a1;
  outline-offset:-2px;
  background-color:#cfb36619;
}
#game.mobile-layout:not(.landscape-main) #portrait-menu .utility-icon {
  width:22px;
  height:22px;
  max-width:none;
  max-height:none;
  color:#f0cf83;
}
#game.mobile-layout:not(.landscape-main) .toolbar #portrait-menu .utility-menu-label {
  display:block;
  min-width:0;
  white-space:nowrap;
  transform:translateY(.025em);
}
#game.mobile-layout:not(.landscape-main) #portrait-menu .utility-menu-state {
  display:block;
  justify-self:end;
  color:#e9cb81;
  font:400 9px/1 var(--game-font);
  letter-spacing:.03em;
  transform:translateY(.025em);
}
#game.mobile-layout:not(.landscape-main) #portrait-menu #sound-toggle[aria-pressed="true"] .utility-menu-state {
  color:#b4c4b2;
}
