/* Small layout corrections for native browser controls and narrow HUD viewports. */
button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
}

.hud-controls {
  bottom: 230px !important;
  max-width: 58vw;
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}

.hud-build {
  bottom: 230px !important;
  max-width: 75vw;
  white-space: normal;
  text-align: center;
}

.hud-events {
  top: 265px !important;
}

#admin-open-button {
  display: none;
  position: fixed;
  z-index: 12;
  top: 20px;
  left: calc(50% + 76px);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d8f5ef55;
  border-radius: 6px;
  background: #101b2cdd;
  color: #eaf7f5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  pointer-events: auto;
  cursor: pointer;
}

body.in-match #admin-open-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#admin-open-button:hover {
  border-color: #78eadb;
  color: #aaf9e8;
}

#admin-open-button kbd {
  padding: 2px 4px;
  border: 1px solid #ffffff33;
  border-radius: 3px;
  color: #9eb1c2;
  font-size: 8px;
}

#emote-open-button {
  display: none;
  position: fixed;
  z-index: 12;
  top: 20px;
  left: calc(50% - 148px);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d8f5ef55;
  border-radius: 6px;
  background: #101b2cdd;
  color: #eaf7f5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  pointer-events: auto;
  cursor: pointer;
}

body.in-match #emote-open-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#emote-open-button:hover {
  border-color: #78eadb;
  color: #aaf9e8;
}

#emote-open-button kbd {
  padding: 2px 4px;
  border: 1px solid #ffffff33;
  border-radius: 3px;
  color: #9eb1c2;
  font-size: 8px;
}

.emote-wheel-shade {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #02060acc;
  backdrop-filter: blur(8px);
}

.emote-wheel-card {
  width: min(430px, 100%);
  padding: 26px;
  border: 1px solid #a3eee466;
  border-radius: 18px;
  background: linear-gradient(145deg, #172737f5, #09121df5);
  box-shadow: 0 28px 90px #000a, inset 0 1px #ffffff12;
  color: #edf8fa;
  text-align: center;
}

.emote-wheel-kicker {
  color: #82e9db;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.emote-wheel-card h2 {
  margin: 7px 0 5px;
  font-size: 24px;
}

.emote-wheel-card > p {
  margin: 0;
  color: #a8b9c8;
  font-size: 12px;
}

.emote-wheel-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  height: 260px;
  max-width: 100%;
  margin: 22px auto 18px;
  border: 1px solid #9deadd4a;
  border-radius: 50%;
  background: radial-gradient(circle, #1d3544 0 34%, #10202d 35% 67%, #0b1722 68%);
  box-shadow: 0 0 40px #54d9ca18, inset 0 0 35px #0008;
}

.emote-wheel-center {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid #b7fff166;
  border-radius: 50%;
  background: #0b1825;
}

.emote-wheel-center span {
  color: #83eada;
  font-size: 25px;
}

.emote-wheel-center b {
  margin-top: -9px;
  color: #b5c8d3;
  font-size: 8px;
  letter-spacing: .16em;
}

.emote-choice {
  position: absolute;
  top: 9px;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 120px;
  padding: 10px 14px;
  border: 1px solid #a2f4e67a;
  border-radius: 12px;
  background: #1a3443;
  color: #f1fbfc;
  cursor: pointer;
  box-shadow: 0 8px 24px #0007;
}

.emote-choice:hover,
.emote-choice:focus-visible {
  outline: none;
  border-color: #a7ffec;
  background: #285160;
  transform: translateY(-2px);
}

.emote-choice-icon {
  color: #8cf4df;
  font-size: 20px;
}

.emote-choice strong { font-size: 12px; }
.emote-choice small { color: #b5c9d0; font-size: 9px; }

.emote-wheel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8299aa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.emote-wheel-footer button {
  padding: 8px 10px;
  border: 1px solid #ffffff27;
  border-radius: 5px;
  color: #d5e2e7;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}

.emote-wheel-footer button:hover { border-color: #8cebdc; }

@media (max-height: 760px) {
  .hud-controls,
  .hud-build {
    bottom: 148px !important;
  }
}

@media (max-width: 600px) {
  #admin-open-button {
    top: 74px;
    left: 130px;
  }

  #emote-open-button {
    top: 74px;
    left: 18px;
  }

  .emote-wheel-card { padding: 20px 14px; }
}