/* Geometric icons share the label's cap height and baseline. No fallback glyphs. */
.ui-icon {
  display: inline-block;
  width: .8em; height: .8em;
  width: 1cap; height: 1cap;
  flex: none;
  vertical-align: baseline;
  line-height: 0;
  background: currentColor;
}
.ui-icon--play { clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.ui-icon--left { clip-path: polygon(90% 0, 0 50%, 90% 100%); }
.ui-icon--up { clip-path: polygon(50% 0, 100% 90%, 0 90%); }
.ui-icon--down { clip-path: polygon(0 10%, 100% 10%, 50% 100%); }
.ui-icon--right-arrow { clip-path: polygon(0 40%, 62% 40%, 37% 15%, 51% 1%, 100% 50%, 51% 99%, 37% 85%, 62% 60%, 0 60%); }
.ui-icon--back { clip-path: polygon(100% 40%, 38% 40%, 63% 15%, 49% 1%, 0 50%, 49% 99%, 63% 85%, 38% 60%, 100% 60%); }
.ui-icon--external { clip-path: polygon(15% 0, 100% 0, 100% 85%, 78% 85%, 78% 38%, 15% 100%, 0 85%, 62% 22%, 15% 22%); }
.ui-icon--pause { clip-path: polygon(5% 0, 35% 0, 35% 100%, 5% 100%, 5% 0, 65% 0, 95% 0, 95% 100%, 65% 100%, 65% 0); }
:is(a, button, span).ui-action { display: inline-flex; align-items: baseline; gap: .8em; }
/* Icon-only controls align to their box; labelled controls align to the letters. */
.edition-navigation button, .dpad button { display: inline-grid; place-items: center; }
/* Keep the home labels centred independently of the selection cursor. */
.menu-button {
  display: grid; grid-template-columns: 1cap minmax(0, 1fr) 1cap;
  column-gap: .8em; align-items: baseline; align-content: center;
  padding-inline: 4.2%;
}
.menu-button::before, .menu-choices .menu-choice::before {
  content: ''; position: static; display: block; flex: none;
  width: .8em; height: .8em; width: 1cap; height: 1cap;
  background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%);
  font: inherit; line-height: 0; opacity: 0;
}
.menu-button::before { grid-column: 1; grid-row: 1; }
.menu-button > span { grid-column: 2; grid-row: 1; }
.menu-button.is-selected::before { content: ''; position: static; font: inherit; opacity: 1; }
.menu-choices .menu-choice { align-items: baseline; justify-content: flex-start; padding-left: 12px; }
.game-card-title { align-items: baseline; }
.play-arrow.ui-icon { font-size: inherit; }
@media (max-width: 600px) {
  .menu-choices .menu-choice { padding-left: 9px; }
  .menu-choices .menu-choice::before { font: inherit; }
}