/* Use the same insets for the HTML controls and the canvas race markers. */
#phone-status { display: none; }
.welcome-pedal-strip { display: none; }

@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  :root {
    --phone-left: max(6px, env(safe-area-inset-left, 0px));
    --phone-right: max(6px, env(safe-area-inset-right, 0px));
    --phone-bottom: env(safe-area-inset-bottom, 0px);
    --phone-top: env(safe-area-inset-top, 0px);
  }
  body, #world { height: 100dvh; }
  .hero-art .hero-rider-front { background-image: var(--welcome-rider-art, none); }
  .hero-art .welcome-normalized { background-image: none; overflow: hidden; animation: none; }
  .welcome-normalized .welcome-pedal-strip {
    display: block;
    width: 400%;
    height: 100%;
    animation: welcome-pedal 1.2s steps(4, end) infinite;
  }
  .hero-art :is(.hero-rider-back, .hero-rider-side) { display: none; }
  #world {
    --track-safe-left: env(safe-area-inset-left, 0px);
    --track-safe-right: env(safe-area-inset-right, 0px);
  }
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: calc(var(--phone-top) + 3px) calc(var(--phone-right) + 2px) 0 calc(var(--phone-left) + 2px);
  }
  .brand, .brand > span:last-child { min-width: 0; }
  .brand .bolt { flex: none; width: 27px; height: 30px; }
  body:not([data-state="home"]) .brand > span:last-child { display: none; }
  body[data-state="home"] .brand { grid-column: 1 / 3; }
  .brand small { max-width: 100%; }
  .clock-box {
    position: static;
    min-width: 0;
    transform: none;
    grid-column: 2;
    text-align: left;
  }
  .clock-box #clock-label { display: none; }
  .clock-box strong { font-size: 22px; line-height: 1; }
  .clock-box #race-rule { font-size: 9px; margin: 2px 0 0; letter-spacing: 0; }
  .top-actions { grid-column: 3; gap: 2px; align-items: center; }
  .top-actions .source-pill { flex: none; white-space: nowrap; padding: 3px 5px; font-size: 9px; gap: 3px; }
  .top-actions .icon-button, .dialog-top .close-button {
    width: 40px;
    height: 40px;
    flex: none;
  }
  /* Keep the compact cards in lane order. Their live height is also the bottom
     boundary used by the track, including when the phone changes orientation. */
  #player-hud {
    left: var(--phone-left);
    right: var(--phone-right);
    bottom: calc(var(--phone-bottom) + 18px);
    grid-template-columns: repeat(var(--phone-cols, 1), minmax(0, 150px));
    justify-content: center;
    gap: 3px;
  }
  #player-hud .player-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: baseline;
    gap: 1px 2px;
    padding: 3px 4px 4px;
    border-top-width: 2px;
    border-radius: 6px;
    box-shadow: 0 1px 2px #233e342e;
  }
  #player-hud .player-card.boosting { outline-width: 1px; outline-offset: 0; }
  #player-hud .player-top {
    grid-column: 1 / -1;
    gap: 2px;
    font-size: 10px;
    line-height: 12px;
  }
  #player-hud .player-name { border: 0; padding: 0; }
  #player-hud .player-meta { gap: 2px; }
  #player-hud .player-rank { font-size: 10px; line-height: 12px; }
  #player-hud .player-laps { display: none; } /* Shown next to the cyclist. */
  #player-hud .player-energy {
    margin: 0;
    font: 800 14px/15px 'Trebuchet MS', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.35px;
    white-space: nowrap;
  }
  #player-hud .player-energy small { font-size: 8px; margin-left: 1px; }
  #player-hud .player-bottom { display: contents; }
  #player-hud .player-bottom span {
    font: 9px/11px 'Trebuchet MS', sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #player-hud .player-bottom span:first-child { justify-self: end; }
  #player-hud .player-bottom strong { font-size: inherit; }
  #player-hud .player-bottom span:last-child { display: block; grid-column: 1 / -1; }
  #player-hud .player-status { display: none; }
  #player-hud .player-status.lost {
    display: block;
    grid-column: 1 / -1;
    position: static;
    white-space: normal;
    margin: 0;
    font-size: 9px;
  }
  .join-hint { margin: 0; padding: 3px 8px; font-size: 11px; }
  body footer, body.many-racers footer, body[data-state="home"] footer {
    left: var(--phone-left);
    right: var(--phone-right);
    bottom: calc(var(--phone-bottom) + 2px);
    justify-content: center;
    gap: 0;
  }
  footer #status-text, footer > span:last-child { display: none; }
  footer #phone-status {
    display: block;
    padding: 1px 6px;
    font: 600 10px/12px 'Microsoft JhengHei', sans-serif;
    letter-spacing: 0;
  }
  .lobby { top: max(calc(var(--phone-top) + 56px), 17%); width: calc(100% - var(--phone-left) - var(--phone-right)); }
  .lobby-actions { margin-top: 7px; gap: 8px; }
  .lobby #lobby-copy { margin: 6px auto; max-width: 100%; }
  .race-cue {
    max-width: calc(100% - var(--phone-left) - var(--phone-right));
    text-align: center;
    white-space: normal;
  }
  .toast {
    top: calc(var(--phone-top) + 48px);
    bottom: auto;
    width: max-content;
    max-width: calc(100% - var(--phone-left) - var(--phone-right) - 12px);
    padding: 5px 10px;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  dialog:not(.result-dialog) {
    inset: var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left);
    width: min(580px, calc(100% - var(--phone-left) - var(--phone-right) - 10px));
    max-height: calc(100dvh - var(--phone-top) - var(--phone-bottom) - 12px);
    margin-block: auto;
    overscroll-behavior: contain;
  }
  dialog :is(fieldset, label, .choice > span, .form-row > *, .slider-row > *) { min-width: 0; }
  dialog :is(select, input, .review strong) { max-width: 100%; }
  .review strong { min-width: 0; overflow-wrap: anywhere; }
  .dialog-actions { flex-wrap: wrap; }
  #host-dialog .host-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #result-dialog {
    padding-top: calc(var(--phone-top) + 8px);
    padding-left: max(10px, var(--phone-left));
    padding-right: max(10px, var(--phone-right));
  }
  .result-dialog .result-actions {
    margin-inline: 0;
    padding: 6px 0 calc(var(--phone-bottom) + 4px);
    flex-wrap: wrap;
    gap: 4px;
  }
}

@keyframes welcome-pedal { to { transform: translateX(-100%); } }

/* Very narrow landscape phones cannot fit eight power readings across. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 639px) {
  #player-hud.many { grid-template-columns: repeat(4, minmax(0, 150px)); }
}

@media (max-width: 359px) {
  #player-hud .player-energy { font-size: 12px; }
  #player-hud .player-bottom span { font-size: 8px; }
  #player-hud .player-card { padding-inline: 3px; }
}

/* The phone welcome card gives one rider its own space beside the headline. */
@media (max-width: 600px) and (orientation: portrait) {
  .hero {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "intro intro"
      "title rider"
      "copy copy"
      "start start"
      "steps steps";
    align-items: center;
    column-gap: 4px;
    width: min(480px, calc(100% - var(--phone-left) - var(--phone-right) - 16px));
    padding: 18px clamp(16px, 4.4vw, 24px);
  }
  .hero-content { display: contents; }
  .hero .eyebrow { grid-area: intro; margin: 0; }
  .hero h1 {
    grid-area: title;
    margin: 0;
    font-size: clamp(24px, 7.6vw, 38px);
    white-space: nowrap;
  }
  .hero #hero-copy { grid-area: copy; margin: 4px 0 13px; }
  .hero .primary-button { grid-area: start; }
  .hero-steps { grid-area: steps; margin-top: 14px; padding-top: 12px; }
  .hero-art {
    display: block;
    grid-area: rider;
    justify-self: end;
    width: min(100%, 170px);
    height: auto;
    aspect-ratio: 1;
    opacity: 1;
  }
  .hero-art .hero-rider-front { inset: 0; width: 100%; height: 100%; }
  .hero-art .hero-orbit { inset: 8% 0 3%; }
  .hero-art :is(.hero-rider-back, .hero-rider-side, .hero-art-caption, .hero-spark) { display: none; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  #player-hud { grid-template-columns: repeat(var(--count, 1), minmax(0, 150px)); }
  #player-hud .player-card { padding-block: 2px; }
  .hero {
    top: calc(var(--phone-top) + 47px);
    bottom: calc(var(--phone-bottom) + 19px);
    transform: translateX(-50%);
    width: min(780px, calc(100% - var(--phone-left) - var(--phone-right) - 20px));
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    padding: 9px 20px;
    overflow: auto;
  }
  .hero h1 { font-size: clamp(22px, 7dvh, 33px); margin: 3px 0 6px; }
  .hero #hero-copy { margin-bottom: 7px; line-height: 1.35; }
  .hero .eyebrow { margin-bottom: 2px; }
  .hero .primary-button { min-width: 0; width: min(100%, 225px); min-height: 40px; padding-block: 2px; }
  .hero-steps { display: none; }
  .hero-art { display: block; height: min(50dvh, 200px); }
  .hero-rider-front { width: min(48dvh, 190px); height: min(48dvh, 190px); }
  .hero-rider-back, .hero-rider-side { width: min(32dvh, 130px); height: min(32dvh, 130px); }
  .lobby { top: calc(var(--phone-top) + 47px); }
  .lobby .eyebrow { display: none; }
  .lobby h2 { font-size: 20px; margin: 0; }
  .lobby #lobby-copy { padding: 2px 6px; margin-block: 3px; }
  .lobby-actions { margin-top: 3px; }
  .race-cue { display: none; } /* The rule and connection status stay in the header. */
}