/* The online game's controls outside the game, in the look of the game's own bubbles:
   white, a black rounded edge, grey Arial Black titles, green buttons in 04b_08. */

#gear {
  position: fixed;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 5px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #fff;
  opacity: 0.55;
  cursor: pointer;
}
#gear svg { display: block; width: 100%; height: 100%; fill: #000; }
#gear:hover, #gear:focus-visible { opacity: 1; }

.panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  overflow-y: auto;
}
.panel[hidden] { display: none; }
.bubble, #scores-toast {
  box-sizing: border-box;
  background: #fff;
  border: 4px solid #000;
  border-radius: 14px;
  color: #000;
  font: 15px/1.35 Arial, sans-serif;
}
.panel .bubble { width: min(460px, 100%); padding: 14px 20px 18px; }
.panel h2 {
  margin: 0 0 6px;
  font: 900 26px 'Arial Black', Arial, sans-serif;
  color: #aaa;
}
.panel h3 {
  margin: 14px 0 4px;
  font: 400 12px 'WB 04b_08', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.panel p { margin: 0 0 8px; }
.panel p.note { margin: 6px 0 0; color: #555; font-size: 14px; overflow-wrap: anywhere; }
.panel p.note:empty { display: none; }
.panel .choices { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .choices + .choices { margin-top: 8px; }
.panel button.choice, .panel button.done, #scores-toast button.send, #scores-toast button.skip {
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: #99ff66;
  color: #000;
  font: 400 12px 'WB 04b_08', monospace;
  text-transform: uppercase;
  cursor: pointer;
}
.panel button.choice[aria-pressed="true"] { background: #33bb22; color: #fff; }
.panel button:hover, #scores-toast button:hover { filter: brightness(1.08); }
.panel button:focus-visible, .panel input:focus-visible, .panel select:focus-visible,
#scores-toast button:focus-visible, #scores-toast input:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.panel .actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.panel button.done { min-width: 110px; }
.panel input[type=text], .panel select, #scores-toast input[type=text] {
  min-height: 30px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font: 15px Arial, sans-serif;
}
.panel .name input { flex: 1 1 140px; min-width: 0; }
.panel .pick select { flex: 1 1 160px; min-width: 0; }
.panel .pick input { flex: 0 1 110px; min-width: 0; text-transform: uppercase; }
.panel .pick select[hidden] { display: none; }

#scores .bubble { width: min(520px, 100%); }
#scores .tables { min-height: 120px; max-height: min(60vh, 520px); overflow-y: auto; margin-top: 8px; }
#scores table { width: 100%; border-collapse: collapse; font-size: 14px; }
#scores th {
  text-align: left;
  font: 400 11px 'WB 04b_08', monospace;
  text-transform: uppercase;
  border-bottom: 2px solid #000;
  padding: 2px 6px;
}
#scores td { padding: 3px 6px; border-bottom: 1px solid #ddd; font-variant-numeric: tabular-nums; }
#scores td:first-child, #scores th:first-child { width: 2.5em; color: #777; }
#scores tr.me td { background: #e6ffd9; font-weight: bold; }

#scores-toast {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 8;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
}
#scores-toast[hidden] { display: none; }
#scores-toast b { font: 900 17px 'Arial Black', Arial, sans-serif; }
#scores-toast .note { color: #555; }
#scores-toast .line { margin-top: 2px; }
#scores-toast button.link {
  padding: 0;
  border: 0;
  background: none;
  color: #1a6e00;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
#scores-toast form { margin-top: 4px; }
#scores-toast .row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
#scores-toast .row input { flex: 1 1 140px; min-width: 0; }
#scores-toast .always { font-size: 13px; color: #333; }

/* Races: the race panel's players, the race in the corner, the countdown. */
#race .players { margin: 4px 0 8px; padding: 0 0 0 1.6em; }
#race .players li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid #ddd; }
#race .players li.me { font-weight: bold; }
#race .players .status { color: #555; font-variant-numeric: tabular-nums; }
#race [hidden] { display: none; }
.panel button.choice:disabled { opacity: 0.5; cursor: default; }

#race-hud {
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  top: max(8px, env(safe-area-inset-top));
  z-index: 6;
  max-width: min(260px, calc(100vw - 32px));
  padding: 6px 10px;
  border: 3px solid #000;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #000;
  font: 13px/1.35 Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}
#race-hud[hidden] { display: none; }
#race-hud b { display: block; font: 400 11px 'WB 04b_08', monospace; text-transform: uppercase; }
#race-hud .me { font-weight: bold; }

#race-count {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  font: 900 min(28vw, 220px) 'Arial Black', Arial, sans-serif;
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #000;
}
#race-count[hidden] { display: none; }

/* A word for an upright phone. */
#turn-hint {
  position: fixed;
  left: 50%;
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 48px));
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 14px;
  box-sizing: border-box;
  border: 3px solid #000;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font: 15px/1.3 Arial, sans-serif;
}
#turn-hint[hidden] { display: none; }
#turn-hint button {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: #99ff66;
  color: #000;
  font: 700 18px Arial, sans-serif;
  cursor: pointer;
}

/* Race ghosts: whose a ghost is, in a tag like the game's own (white, a black rounded edge,
   04b_08), with the player's colour; and the colours by the names. */
#ghost-tag {
  position: fixed;
  z-index: 4;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 5px;
  border: 2px solid #000;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font: 400 10px 'WB 04b_08', monospace;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
#ghost-tag[hidden] { display: none; }
#ghost-tag .dot, #race .dot, #race-hud .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1px solid #000;
  border-radius: 2px;
  vertical-align: -1px;
}
#ghost-tag .dot { margin-right: 0; }