/* One local set of SVG shapes for controls on desktop and mobile. */
.control-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.control-icon {
  display: inline-block;
  width: var(--icon-size, 1.1em);
  height: var(--icon-size, 1.1em);
  vertical-align: -0.12em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.icon-button,
.close-button {
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  --icon-size: 20px;
}

.close-button {
  width: 34px;
  height: 34px;
  flex: none;
}

.bolt { --icon-size: 70%; }
.hero .eyebrow { --icon-size: 16px; }
.hero-spark { --icon-size: 0.9em; }
.hero .primary-button { --icon-size: 19px; }
.choice b { --icon-size: 20px; }
.player-laps { --icon-size: 1em; }

.bolt .control-icon,
.hero .eyebrow .control-icon,
.hero .primary-button .control-icon,
.choice .control-icon {
  display: block;
}

.lobby-actions button > span,
.choice b {
  display: inline-grid;
  flex: none;
  place-items: center;
  line-height: 1;
}

.lobby-actions button { --icon-size: 15px; }
.dialog-actions button,
.result-actions button {
  column-gap: 0.6em;
}

.join-hint .control-icon {
  --icon-size: 1.3em;
  margin-inline-end: 0.35em;
}

.admin-link .control-icon { margin-inline-start: 0.15em; }