/* Keep round artwork at its natural aspect ratio; touch targets may extend beyond it. */
.portrait-button-art,.portrait-turbo-face > img { display:none; }
.portrait-turbo-face,.portrait-turbo-caption { display:contents; }
#turboLabel::before { content:'⚡ '; }

html[data-layout=portrait] #menuButton,
html[data-layout=portrait] #autoButton {
  top:91.555556%; width:18cqw; height:18cqw;
  min-width:44px; min-height:44px; padding:0;
  border:0; outline-offset:2px; box-shadow:none;
}
html[data-layout=portrait] #menuButton { left:23.5%; }
html[data-layout=portrait] #autoButton { left:76.5%; }
html[data-layout=portrait] .portrait-button-art {
  display:block; position:absolute; left:50%; top:50%;
  width:18cqw; height:18cqw; max-width:none; object-fit:contain;
  transform:translate(-50%,-50%); pointer-events:none; user-select:none;
}
html[data-layout=portrait] #turboButton {
  left:15.5%; top:81.333333%; width:19.4cqw; height:10.3cqw;
  min-width:44px; min-height:44px; padding:0;
  border:0; background:transparent; box-shadow:none; border-radius:1.8cqw;
}
html[data-layout=portrait] #turboButton::after { display:none; }
html[data-layout=portrait] .portrait-turbo-face {
  display:block; position:absolute; left:50%; top:50%;
  width:19.4cqw; height:10.3cqw; transform:translate(-50%,-50%);
  pointer-events:none; user-select:none;
}
html[data-layout=portrait] .portrait-turbo-face > img {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; user-select:none;
}
html[data-layout=portrait] .portrait-turbo-caption {
  position:absolute; left:37%; right:10%; top:18%; bottom:18%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:.55cqw; line-height:1; color:#ffeaa6; text-shadow:0 1px 1px #180016;
}
html[data-layout=portrait] #turboLabel { font-size:1.9cqw; font-weight:900; letter-spacing:.04cqw; }
html[data-layout=portrait] #turboLabel::before { content:none; }
html[data-layout=portrait] #turboState { font-size:2.65cqw; font-weight:900; color:#d5c5b4; letter-spacing:.06cqw; }
html[data-layout=portrait] #turboButton[data-active=true] #turboState { color:#fff6b9; text-shadow:0 0 .8cqw #fba91b; }
html[data-layout=portrait] #turboButton[data-active=true] .portrait-turbo-face > img { filter:brightness(1.13) drop-shadow(0 0 .35cqw #f9bf4766); }
html[data-layout=portrait] #turboButton[data-feedback=electricity] .portrait-turbo-face > img { animation:portrait-turbo-rim .74s ease-out both; }
@keyframes portrait-turbo-rim {
  0%,100% { filter:brightness(1); }
  16%,44% { filter:brightness(1.4) drop-shadow(0 0 .7cqw #ffda73); }
  29%,67% { filter:brightness(1.08) drop-shadow(0 0 .25cqw #ffc154); }
}
@media(hover:hover) {
  html[data-layout=portrait] #menuButton:not(:disabled):hover .portrait-button-art,
  html[data-layout=portrait] #autoButton:not(:disabled):hover .portrait-button-art { filter:brightness(1.1); }
}
html[data-layout=portrait] #menuButton:not(:disabled):active .portrait-button-art,
html[data-layout=portrait] #autoButton:not(:disabled):active .portrait-button-art { filter:brightness(.88); }
@media(prefers-reduced-motion:reduce) {
  html[data-layout=portrait] #turboButton[data-feedback=electricity] .portrait-turbo-face > img { animation:none; }
}
.reduced-motion #turboButton[data-feedback=electricity] .portrait-turbo-face > img { animation:none!important; }