.race-in-lobby {
  min-height: 650px !important;
  height: min(78vh, 900px) !important;
  background: #11283f;
}
.race-lobby {
  position: absolute;
  inset: 0;
  z-index: 8;
  color: #fff;
  pointer-events: none;
  font-family: system-ui, sans-serif;
}
.race-lobby[hidden],
.race-lobby [hidden] {
  display: none !important;
}
.race-lobby button,
.race-lobby select,
.race-custom,
.race-shop {
  pointer-events: auto;
}
.race-nav {
  position: absolute;
  top: 12px;
  left: 18px;
  right: 18px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px;
  background: #10283fee;
  border: 1px solid #44617a;
  border-radius: 8px;
}
.race-nav button {
  background: transparent;
  color: #fff;
  border: 0;
  font-weight: 900;
  font-size: 17px;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 5px;
}
.race-nav button[aria-current='page'] {
  background: #eef7f8;
  color: #142d43;
}
.race-wallet {
  margin-left: auto;
  color: #ffe47f;
  font-weight: 800;
  white-space: pre;
}
.race-mode {
  position: absolute;
  left: 22px;
  bottom: 28px;
  width: 225px;
  background: #10253eed;
  padding: 20px;
  border: 1px solid #567188;
  border-radius: 10px;
}
.race-kicker {
  font-size: 10px;
  letter-spacing: 2px;
  color: #8ae6df;
}
.race-mode h2 {
  font-size: 30px;
  color: white;
  margin: 8px 0;
  font-weight: 950;
}
.race-mode p {
  font-size: 12px;
  line-height: 1.5;
  color: #d2e4f2;
}
.race-track {
  display: block;
  font-size: 16px;
  margin: 18px 0 8px;
}
.race-mode select {
  width: 100%;
  min-height: 44px;
  background: #24425a;
  color: white;
  border: 1px solid #628098;
  border-radius: 6px;
  margin-bottom: 8px;
}
.race-hour {
  color: #d2e4f2 !important;
}
.race-mode .race-ready,
.race-start {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  font-weight: 900 !important;
  border-radius: 7px !important;
  background: #c5f63d !important;
  color: #142900 !important;
  border: 0 !important;
}
.race-start {
  background: #f9d84b !important;
  color: #2a2307 !important;
}
.race-start:disabled {
  background: #4a5a62 !important;
  color: #c6d2d7 !important;
  cursor: not-allowed;
}
.race-lobby-slot {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 5px #071522;
}
.race-lobby-slot strong {
  display: block;
  font-size: 15px;
}
.race-lobby-slot span {
  font-size: 10px;
  letter-spacing: 1px;
  color: #ffce73;
}
.slot-ready span {
  color: #a7f956;
}
.race-lobby-slot strong:only-child {
  font-size: 30px;
}
.race-custom,
.race-shop {
  position: absolute;
  top: 88px;
  bottom: 18px;
  left: 20px;
  right: 20px;
  background: #142d43f5;
  overflow: auto;
  padding: 22px;
  border: 1px solid #567188;
  border-radius: 10px;
}
.race-custom h2,
.race-shop h2 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 28px;
}
.race-custom p,
.race-shop p {
  color: #cde0eb;
}
.race-custom .garage {
  display: block !important;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}
.race-custom .garage > h3:first-child,
.race-custom .garage > p,
.race-custom .pilot-heading {
  display: none;
}
.race-custom .garage-options,
.race-custom .pilot-options {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.race-custom .locked {
  opacity: 0.45;
}
.race-custom .garage-choice,
.race-custom .pilot-choice {
  background: #25465f;
  color: white;
}
.race-shop-filter {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.race-shop-filter button {
  min-height: 44px;
  background: #32566e;
  color: white;
  border: 1px solid #7397ae;
  border-radius: 6px;
}
.race-shop-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.race-shop-card {
  background: #25465f;
  padding: 12px;
  border: 1px solid #56778e;
  border-radius: 8px;
}
.race-shop-card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
}
.race-shop-card h3 {
  color: #fff;
  margin: 8px 0;
}
.race-shop-card button {
  width: 100%;
  min-height: 44px;
  background: #c5f63d;
  border: 0;
  border-radius: 5px;
  font-weight: 800;
}
.race-shop-card button:disabled {
  background: #526c7b;
  color: #c9d8e1;
}
.race-in-lobby > .game-display-tools {
  top: 80px !important;
  left: auto !important;
  right: 18px;
  z-index: 12;
}
.race-in-lobby > .race-ranking,
.race-in-lobby > .race-effects {
  display: none !important;
}
.race-in-lobby > #fullscreen-start-btn {
  display: none;
}
.race-in-lobby.race-expanded {
  height: 100dvh !important;
  min-height: 0 !important;
}
.race-in-lobby .game-display-tools #fullscreen-start-btn {
  display: none;
}
@media (max-width: 900px) {
  .race-in-lobby {
    height: 640px !important;
    min-height: 560px !important;
  }
  .race-nav {
    left: 8px;
    right: 8px;
    top: 8px;
    padding: 4px;
    gap: 0;
  }
  .race-nav button {
    font-size: 13px;
    padding: 7px 10px;
  }
  .race-wallet {
    font-size: 12px;
  }
  .race-mode {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
  .race-mode h2 {
    font-size: 20px;
    margin: 0;
  }
  .race-mode > .race-kicker,
  .race-mode > p:not(.race-invite),
  .race-mode > .race-ready-hint {
    display: none;
  }
  .race-mode .race-track {
    margin: 0;
    font-size: 13px;
  }
  .race-mode .race-invite {
    margin: 0;
    font-size: 11px;
  }
  .race-mode .race-hour {
    font-size: 10px;
    grid-column: 2;
    grid-row: 2/4;
  }
  .race-mode > select {
    grid-column: 1;
    grid-row: 2/4;
  }
  .race-mode .race-ready,
  .race-mode .race-start {
    min-height: 44px;
    margin: 0;
    font-size: 12px;
  }
  .race-lobby-slot strong {
    font-size: 12px;
  }
  .race-lobby-slot span {
    font-size: 9px;
  }
  .race-custom,
  .race-shop {
    left: 8px;
    right: 8px;
    top: 108px;
    bottom: 8px;
    padding: 12px;
  }
  .race-custom .garage-options,
  .race-custom .pilot-options,
  .race-shop-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .race-shop-card img {
    height: 100px;
  }
  .race-shop-card h3 {
    font-size: 15px;
  }
  .race-shop-card p {
    font-size: 11px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .race-in-lobby {
    height: 520px !important;
  }
  .race-mode {
    right: auto;
    width: 185px;
    display: block;
    padding: 10px;
  }
  .race-mode .race-track {
    margin: 5px 0;
  }
  .race-mode > .race-hour,
  .race-mode > select {
    display: none;
  }
  .race-mode .race-ready,
  .race-mode .race-start {
    margin-top: 5px;
  }
  .race-custom,
  .race-shop {
    top: 70px;
  }
  .race-shop-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .race-custom .garage-options,
  .race-custom .pilot-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .race-in-lobby > .game-display-tools {
    top: 70px !important;
  }
}

/* Racing owns its preparation UI, including inside native fullscreen. */
#game-board .race-in-lobby > .race-controls,
#game-board .race-in-lobby > .race-touch-actions,
#game-board .race-in-lobby > .race-power-slot,
#game-board .race-in-lobby > .pilot-reaction,
#game-board .race-in-lobby > .race-countdown,
#game-board .race-in-lobby > .race-minimap {
  display: none !important;
}
#game-board:has(.race-in-lobby) > .race-ranking,
#game-board:has(.race-in-lobby) > .game-actions,
#game-board:has(.race-in-lobby) > .race-event,
#game-board:has(.race-in-lobby) > .race-help,
.game-stage:has(.race-in-lobby) > .game-message,
#room-screen:has(.race-in-lobby) #room-start-controls,
#room-screen:has(.race-in-lobby) #players-strip {
  display: none !important;
}
.game-stage:has(.race-in-lobby) {
  padding: 0;
  border: 0;
  background: transparent;
}
#game-board:has(.race-in-lobby) {
  gap: 0;
}
#game-board .race-nav button {
  background: transparent !important;
  color: white !important;
  border: 0 !important;
  box-shadow: none !important;
}
#game-board .race-nav button[aria-current='page'] {
  background: #f0f7f8 !important;
  color: #142d43 !important;
}
#game-board .race-shop-card button {
  background: #c5f63d !important;
  color: #193109 !important;
}
#game-board .race-shop-card button:disabled {
  background: #526c7b !important;
  color: #d7e3e7 !important;
}
#game-board .race-in-lobby .game-display-tools button {
  background: #10283f !important;
  color: #eef7fb !important;
}
#game-board .race-shop-filter button {
  background: #32566e !important;
  color: white !important;
}

#game-board .race-lobby-slot {
  transform: translate(-50%, 0);
}

.race-capacity {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d2e4f2;
  font-size: 12px;
  margin-bottom: 10px;
}
.race-capacity select {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.skin-tier {
  display: block;
  color: #c5f63d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  margin-top: 5px;
}
@media (max-width: 900px) {
  .race-mode .race-capacity {
    grid-column: 1/-1;
    grid-row: 4;
    margin: 0;
    min-height: 44px;
  }
  .race-mode .race-capacity select {
    max-width: 180px;
    min-height: 44px;
  }
  .race-mode .race-invite {
    grid-column: 1/-1;
  }
  .race-mode .race-ready,
  .race-mode .race-start {
    grid-row: 6;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .race-mode .race-capacity {
    display: flex;
    margin: 8px 0;
  }
  .race-mode .race-capacity select {
    display: block;
    font-size: 11px;
    padding: 4px;
    min-height: 44px;
  }
  .race-mode {
    padding: 8px;
  }
  .race-mode .race-invite {
    margin: 0;
  }
  .race-mode h2 {
    font-size: 17px;
  }
  .race-mode .race-track {
    font-size: 11px;
  }
}

#game-board .arcade-scene > .race-ranking {
  position: absolute;
  left: 10px;
  top: 64px;
  z-index: 9;
  width: 205px;
  border-collapse: collapse;
  background: #132b3cdb;
  color: #fff;
  font-size: 11px;
  border-radius: 7px;
  overflow: hidden;
  pointer-events: none;
  display: table;
  max-width: 40%;
  padding: 0;
}
#game-board .race-ranking caption {
  background: #123044;
  font-weight: 900;
  padding: 8px;
  letter-spacing: 1px;
  font-size: 10px;
}
#game-board .race-ranking td,
#game-board .race-ranking th {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #50708744;
  font-weight: 500;
  white-space: nowrap;
}
#game-board .race-ranking .rank-me {
  background: #28544d;
  color: #d7ff94;
}
#game-board .race-in-lobby > .race-ranking {
  display: none !important;
}
.race-respawn-notice {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50%;
  padding: 10px 15px;
  border: 1px solid #71dbff;
  border-radius: 8px;
  background: #143446de;
  color: #e6fbff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  z-index: 18;
  pointer-events: none;
}
.race-water-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  box-shadow: inset 0 0 80px #159bcc99;
}
.race-water-effect i {
  position: absolute;
  left: 50%;
  top: 65%;
  width: 110px;
  height: 45px;
  margin-left: -55px;
  border: 4px solid #77dfff;
  border-radius: 50%;
  animation: race-splash 0.75s ease-out infinite;
}
.race-water-effect i:nth-child(2) {
  animation-delay: 0.2s;
}
.race-water-effect i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes race-splash {
  from {
    transform: scale(0.5);
    opacity: 1;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}
@media (min-width: 901px) and (pointer: fine) {
  #game-board .race-controls,
  #game-board .race-touch-actions,
  #game-board > .game-actions,
  #game-board .race-expanded > .game-actions {
    display: none !important;
  }
}
@media (max-width: 900px) {
  #game-board .arcade-scene > .race-ranking {
    width: 150px;
    font-size: 9px;
    top: 64px;
  }
  #game-board .race-ranking td,
  #game-board .race-ranking th {
    padding: 3px 4px;
  }
  .race-respawn-notice {
    top: 112px;
    left: auto;
    right: 10px;
    transform: none;
    max-width: 48%;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .race-water-effect i {
    animation: none;
    opacity: 0.3;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #game-board .arcade-scene > .race-ranking {
    top: 56px;
    width: 150px;
    font-size: 9px;
    line-height: 12px;
  }
  #game-board .race-ranking caption {
    padding: 4px;
    font-size: 9px;
  }
  #game-board .race-ranking td,
  #game-board .race-ranking th {
    padding: 1px 4px;
  }
}
/* Reserve independent columns for the ranking and the driving status. */
#game-board .arcade-scene > .game-hud {
  position: absolute !important;
  top: 60px !important;
  left: 225px !important;
  right: 85px !important;
  max-width: calc(100% - 310px) !important;
  width: auto !important;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  z-index: 8;
}
#game-board .arcade-scene > .race-ranking {
  table-layout: fixed;
}
#game-board .race-ranking th {
  overflow: hidden;
  text-overflow: ellipsis;
}
#game-board .race-ranking td:first-child {
  width: 24px;
}
#game-board .race-ranking td:last-child {
  width: 38px;
}
@media (max-width: 900px) {
  #game-board .arcade-scene > .game-hud {
    left: 170px !important;
    right: 8px !important;
    top: 78px !important;
    max-width: calc(100% - 178px) !important;
    font-size: 9px;
    padding: 5px;
  }
}

@media (max-width: 900px) {
  #game-board .arcade-scene > .game-hud {
    max-height: 86px;
    overflow: hidden;
  }
  .race-respawn-notice {
    top: 174px;
  }
}

/* PLAY: the panel grows upwards from the bottom but never under the tabs. */
.race-mode {
  max-height: calc(100% - 118px);
  overflow: auto;
}

/* CUSTOM / SHOP studio: the 3D viewer shows the canvas behind it; the panel lists the items. */
.race-studio {
  position: absolute;
  top: 84px;
  bottom: 16px;
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 44%);
  gap: 16px;
}
.race-viewer {
  position: relative;
  min-height: 0;
  pointer-events: auto;
  border-radius: 10px;
  outline: 0;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.race-viewer:active {
  cursor: grabbing;
}
.race-viewer:focus-visible {
  box-shadow: inset 0 0 0 3px #64f0ed;
}
.race-viewer-name {
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px #06121d;
}
.race-viewer-hint {
  position: absolute;
  left: 14px;
  top: 46px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #0b1f30b3;
  color: #d5e7f2;
  font-size: 12px;
  white-space: nowrap;
}
.race-viewer-turns {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  gap: 8px;
}
#game-board .race-viewer-turn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50% !important;
  background: #10283f !important;
  color: #eef7fb !important;
  border: 1px solid #567188 !important;
  font-size: 20px;
  line-height: 1;
}
.race-viewer-image {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 56px;
  bottom: 64px;
  width: 84%;
  height: calc(100% - 120px);
  object-fit: contain;
}
.race-studio > .race-custom,
.race-studio > .race-shop {
  position: static;
  min-height: 0;
  padding: 18px 18px 22px;
}
.race-studio h2 {
  font-size: 24px !important;
}
.race-studio > section > p {
  font-size: 13px;
  margin: 0 0 12px;
}
.race-detail {
  display: grid;
  gap: 2px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #4d7591;
  border-radius: 8px;
  background: #0f2538;
}
.race-detail:empty {
  display: none;
}
.race-detail h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
}
.race-detail p {
  margin: 2px 0 6px !important;
  font-size: 12px;
  line-height: 1.45;
}
.race-detail-kind {
  font-size: 10px;
  letter-spacing: 2px;
  color: #8ae6df;
  font-weight: 800;
}
.race-detail-status {
  font-size: 12px;
  color: #ffce73;
}
.race-detail-status.equipped {
  color: #c5f63d;
}
.race-detail-status.locked {
  color: #9fb6c6;
}

/* Compact cards: image and name; the description lives in the detail box. */
.race-custom .garage > h3:first-child,
.race-custom .pilot-heading {
  display: block !important;
  margin: 14px 0 8px !important;
  font-size: 12px;
  letter-spacing: 2px;
  color: #8ae6df;
}
.race-custom .garage > h3:first-child {
  margin-top: 0 !important;
}
.race-custom .garage-options,
.race-custom .pilot-options {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}
#game-board .race-custom .garage-choice,
#game-board .race-custom .pilot-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  min-height: 0;
  background: #1f3d55 !important;
  color: #fff !important;
  border: 2px solid #3d6079;
  border-radius: 8px;
}
.race-custom .garage-choice span,
.race-custom .pilot-choice small {
  display: none;
}
.race-custom .garage-choice strong,
.race-custom .pilot-choice strong {
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.race-custom .garage-choice img {
  width: 100%;
  height: 58px;
  object-fit: contain;
}
.race-custom .pilot-choice img {
  width: 100%;
  height: 92px;
  object-fit: contain;
}
#game-board .race-custom [aria-pressed='true']:not(.race-swatch) {
  border-color: #ffd16b;
  outline: 0;
  background: #3a4b3f !important;
}
#game-board .race-custom .previewing {
  box-shadow: 0 0 0 3px #64f0ed;
}
#game-board .race-custom .locked {
  opacity: 0.62;
}
#game-board .race-custom .locked::after {
  content: '🔒';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
}
.race-custom .skin-tier {
  font-size: 9px;
  margin-top: 0;
}
.race-studio .race-shop-items {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}
.race-studio .race-shop-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.race-studio .race-shop-card:focus-visible {
  outline: 3px solid #64f0ed;
  outline-offset: 2px;
}
.race-studio .race-shop-card.selected {
  border-color: #64f0ed;
  box-shadow: 0 0 0 2px #64f0ed;
}
.race-studio .race-shop-card img {
  height: 104px;
}
.race-studio .race-shop-card h3 {
  font-size: 15px;
  margin: 6px 0 2px;
}
.race-studio .race-shop-card p {
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.race-studio .race-shop-card button {
  margin-top: auto;
}

/* The fullscreen button moves off the panel while the studio is open. */
.race-in-lobby:has(.race-studio:not([hidden])) > .game-display-tools {
  top: auto !important;
  bottom: 22px;
  left: 30px !important;
  right: auto;
}

@media (max-width: 900px) {
  .race-mode {
    max-height: calc(100% - 70px);
  }
  .race-studio {
    top: 62px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: 1fr;
    grid-template-rows: 230px minmax(0, 1fr);
    gap: 8px;
  }
  .race-viewer-name {
    font-size: 17px;
    top: 6px;
    left: 10px;
  }
  .race-viewer-hint {
    font-size: 10px;
    top: 32px;
    left: 10px;
    padding: 4px 9px;
  }
  .race-viewer-turns {
    bottom: 4px;
    right: 6px;
  }
  .race-studio > .race-custom,
  .race-studio > .race-shop {
    padding: 12px;
  }
  .race-studio > section > p {
    display: none;
  }
  .race-in-lobby:has(.race-studio:not([hidden])) > .game-display-tools {
    top: 242px !important;
    bottom: auto;
    left: 14px !important;
    right: auto;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .race-studio {
    top: 62px;
    bottom: 6px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 52%);
    grid-template-rows: none;
  }
  .race-studio > section > p {
    display: none;
  }
  .race-custom .pilot-choice img {
    height: 64px;
  }
}

/* Paint: swatches, free colour picker and finish chips (race-lobby.js paintPanel).
   !important: the global button rule excludes classes with :not(#sound-btn), an id selector. */
.race-paint {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #4d7591;
  border-radius: 8px;
  background: #0f2538;
}
.race-paint[hidden] {
  display: none;
}
.race-paint-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #8ae6df;
  font-weight: 800;
}
.race-paint-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
}
#game-board .race-swatch {
  position: relative;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  padding: 0 !important;
  border: 2px solid #0b1a28 !important;
  border-radius: 50% !important;
  background: var(--swatch) !important;
  box-shadow: 0 0 0 1px #4d7591, inset 3px 3px 0 #ffffff59 !important;
  cursor: pointer;
}
#game-board .race-swatch[aria-pressed='true'] {
  box-shadow: 0 0 0 2px #c5f63d, inset 3px 3px 0 #ffffff59 !important;
}
#game-board .race-swatch-custom {
  display: block;
  overflow: hidden;
  background: #142f45 !important;
  border: 2px dashed #8ae6df !important;
}
.race-swatch-custom input {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
}
.race-swatch-custom:focus-within {
  outline: 2px solid #8ae6df;
  outline-offset: 2px;
}
.race-paint-finishes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#game-board .race-finish {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid #4d7591 !important;
  border-radius: 6px !important;
  background: #142f45 !important;
  color: #dceaf3 !important;
  font-size: 12px !important;
  font-weight: 700;
  text-align: left;
}
#game-board .race-finish[aria-pressed='true'] {
  border-color: #c5f63d !important;
  background: #1f3f2a !important;
  color: #fff !important;
}
.race-finish-chip {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.finish-brillante { background: #d33; box-shadow: inset 3px 3px 0 #ffffffcc; }
.finish-metalico { background: #b02a24; box-shadow: inset 2px 2px 0 #ffb3a8, inset -3px -3px 0 #6e1410; }
.finish-mate { background: #b23a33; }
.finish-perlado { background: #f3e6f7; box-shadow: inset 3px 3px 0 #c8e4ff, inset -3px -3px 0 #fff0c8; }
.finish-satinado { background: #b5413a; box-shadow: inset 2px 2px 0 #e78b8466; }
.finish-cromado { background: #8d98a3; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #2b3138; }
.race-paint.locked .race-swatch,
.race-paint.locked .race-finish {
  opacity: 0.45;
}
.race-paint-note {
  font-size: 11px;
  color: #9fb6c6;
}
.race-swatch-custom::before {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8ae6df;
  font-weight: 800;
  pointer-events: none;
}