/* 한국어 주석: 레이스 화면은 카메라와 캔버스에 집중하고 가리는 UI를 최소화합니다. */
.race-shell {
  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: calc(100dvh - 20px);
  background: #dfe8f7;
  overflow: hidden;
}

.race-stage-shell {
  position: relative;
  width: min(100%, 920px);
  margin: 0 auto;
  height: 100%;
}

.race-stage-grid {
  position: relative;
  display: block;
  min-height: 100dvh;
  height: 100%;
}

.race-topbar {
  display: none;
}

.race-stage-view {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(121,199,255,0.14), rgba(255,255,255,0.95));
  border: 0;
}

.race-stage-view.is-prestart #race-canvas {
  filter: brightness(0.42) saturate(0.82);
  transform: scale(1.018);
}

.race-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.14), rgba(7, 15, 30, 0.88)),
    linear-gradient(180deg, rgba(8, 15, 28, 0.52), rgba(8, 15, 28, 0.82));
  backdrop-filter: blur(10px);
  opacity: 1;
}

.race-start-overlay[hidden],
.race-loading-panel[hidden],
.race-countdown-panel[hidden],
.race-launch-flash[hidden],
.race-speedlines[hidden] {
  display: none !important;
}

.race-launch-flash {
  position: absolute;
  inset: -10%;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,0.95) 0%, rgba(173, 235, 255, 0.62) 18%, rgba(95, 170, 255, 0.16) 42%, rgba(95, 170, 255, 0) 68%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: 0;
}

.race-speedlines {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.race-speedlines span {
  --angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 320px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.94), rgba(132,224,255,0));
  box-shadow: 0 0 16px rgba(132,224,255,0.24);
  opacity: 0;
  transform-origin: center;
  transform: rotate(var(--angle));
}

.race-speedlines span:nth-child(1) { --angle: -34deg; }
.race-speedlines span:nth-child(2) { --angle: -18deg; }
.race-speedlines span:nth-child(3) { --angle: -6deg; }
.race-speedlines span:nth-child(4) { --angle: 8deg; }
.race-speedlines span:nth-child(5) { --angle: 20deg; }
.race-speedlines span:nth-child(6) { --angle: 34deg; }

.race-loading-panel,
.race-countdown-panel {
  display: grid;
  justify-items: center;
  text-align: center;
  color: #ffffff;
  width: min(88vw, 420px);
}

.race-countdown-panel {
  position: relative;
  isolation: isolate;
}

.race-countdown-panel::before,
.race-countdown-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.58);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.race-countdown-panel::before {
  border: 2px solid rgba(255,255,255,0.34);
  box-shadow: 0 0 26px rgba(255,255,255,0.16);
}

.race-countdown-panel::after {
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 46px rgba(121,199,255,0.22);
}

.race-loading-panel strong,
.race-countdown-panel strong {
  display: block;
  letter-spacing: 0.02em;
  text-shadow: 0 8px 20px rgba(0,0,0,0.26);
}

.race-loading-panel strong {
  margin-top: 16px;
  font-size: clamp(24px, 4vw, 34px);
}

.race-loading-panel p,
.race-countdown-panel p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}

.race-loading-progress {
  position: relative;
  width: min(72vw, 280px);
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.race-loading-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #86d1ff 0%, #ffffff 48%, #8cf0c6 100%);
  box-shadow: 0 0 18px rgba(134, 209, 255, 0.42);
  transition: width 320ms cubic-bezier(.18,.82,.24,1), opacity 220ms ease;
}

.race-loading-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.16);
  border-top-color: #ffffff;
  border-right-color: rgba(121, 199, 255, 0.96);
  box-shadow: 0 0 0 10px rgba(255,255,255,0.05);
  animation: race-spin 0.9s linear infinite;
}

.race-countdown-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.86);
  transition: opacity 180ms ease;
}

#race-countdown-number {
  margin-top: 16px;
  font-size: clamp(78px, 18vw, 156px);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.05em;
  animation: race-countdown-pop 0.78s cubic-bezier(.2,.8,.2,1);
  text-shadow:
    0 0 18px rgba(255,255,255,0.24),
    0 0 42px rgba(121,199,255,0.26),
    0 12px 28px rgba(0,0,0,0.34);
}

.race-countdown-panel p {
  display: none;
}

.race-countdown-panel[data-step="3"] #race-countdown-number {
  color: #8fd0ff;
}

.race-countdown-panel[data-step="2"] #race-countdown-number {
  color: #ffd36f;
}

.race-countdown-panel[data-step="1"] #race-countdown-number {
  color: #ff8e7e;
}

.race-countdown-panel.is-go #race-countdown-number {
  color: #8ff2c7;
}

.race-countdown-panel.is-pulse::before {
  animation: race-countdown-ring 720ms cubic-bezier(.18,.82,.24,1);
}

.race-countdown-panel.is-pulse::after {
  animation: race-countdown-ring 720ms cubic-bezier(.12,.78,.24,1) 90ms;
}

.race-countdown-panel[data-step="3"].is-pulse::before,
.race-countdown-panel[data-step="3"].is-pulse::after {
  border-color: rgba(143, 208, 255, 0.42);
  box-shadow: 0 0 52px rgba(143, 208, 255, 0.18);
}

.race-countdown-panel[data-step="2"].is-pulse::before,
.race-countdown-panel[data-step="2"].is-pulse::after {
  border-color: rgba(255, 211, 111, 0.42);
  box-shadow: 0 0 52px rgba(255, 211, 111, 0.18);
}

.race-countdown-panel[data-step="1"].is-pulse::before,
.race-countdown-panel[data-step="1"].is-pulse::after {
  border-color: rgba(255, 142, 126, 0.42);
  box-shadow: 0 0 52px rgba(255, 142, 126, 0.18);
}

.race-countdown-panel.is-go.is-pulse::before,
.race-countdown-panel.is-go.is-pulse::after {
  border-color: rgba(143, 242, 199, 0.46);
  box-shadow: 0 0 58px rgba(143, 242, 199, 0.22);
}

.race-shell.is-final-duel .race-stage-view {
  box-shadow: inset 0 0 0 2px rgba(255, 90, 103, 0.18);
}

.race-stage-view.is-launch-burst {
  animation: race-launch-burst 520ms cubic-bezier(.18,.82,.24,1);
}

.race-shell.is-final-duel .race-topbar {
  border-color: rgba(255, 90, 103, 0.18);
  box-shadow: 0 14px 34px rgba(255, 90, 103, 0.14);
}

#race-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  max-height: none;
}

.topbar-item {
  min-width: 0;
}

.topbar-item span,
.topbar-actions span,
.winner-label {
  font-size: 9px;
  color: var(--muted);
}

.topbar-item strong,
.topbar-actions strong {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  color: var(--text);
}

.topbar-item.center {
  text-align: center;
  min-width: 52px;
}

.topbar-item:first-child strong,
.topbar-item:first-child span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(47,111,255,0.08);
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 700;
}

.compact-exit-button {
  min-height: 24px;
  padding: 5px 8px;
  font-size: 10px;
}

.cinematic-banner {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 5;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cinematic-banner strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
}

.cinematic-banner p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.cinematic-banner.is-faded {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

@keyframes race-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes race-countdown-pop {
  0% {
    opacity: 0;
    transform: scale(0.58);
    filter: blur(8px);
  }
  45% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes race-countdown-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }
  18% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes race-launch-burst {
  0% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
  }
  28% {
    transform: scale(1.035);
    filter: saturate(1.08) brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
  }
}

.compact-result-actions {
  flex-wrap: wrap;
}

.compact-winner-strip {
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 14px;
}

.compact-winner-strip h3 {
  margin: 0;
  font-size: 18px;
}

.winner-strip {
  margin-bottom: 10px;
  border-radius: 18px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(246,250,255,1) 0%, rgba(236,243,255,1) 100%);
  border: 1px solid rgba(214,224,239,0.96);
}

.winner-strip h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}

.winner-strip p:last-child {
  margin-bottom: 0;
}

.winner-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.winner-title-row .winner-label {
  margin: 0;
  flex: 0 0 auto;
}

.winner-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #41536b;
}

.winner-code {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.result-detail-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.result-detail-list-compact {
  max-height: 188px;
  overflow-y: auto;
  padding-right: 4px;
}

.result-detail-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 12px;
  background: #f7f9fe;
  border: 1px solid rgba(47,111,255,0.08);
}

.result-detail-item strong {
  color: var(--blue-strong);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.result-detail-item .result-detail-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.result-detail-item .result-detail-copy b {
  display: inline;
  color: #17305c;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}

.result-detail-item .result-detail-copy small {
  display: inline;
  color: #617188;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
}
.result-detail-item.is-top,
.result-detail-item.is-bottom {
  background: #f7f9fe;
  border-color: rgba(47,111,255,0.08);
}
.result-detail-item.is-top strong,
.result-detail-item.is-bottom strong {
  color: var(--blue-strong);
}

.result-detail-item .result-detail-copy small.is-champion {
  display: inline-block;
  width: fit-content;
  padding: 0 4px;
  border-radius: 4px;
  color: #4c5d1f;
  background:
    linear-gradient(transparent 34%, rgba(241, 234, 109, 0.9) 34%, rgba(241, 234, 109, 0.9) 86%, transparent 86%);
}

.result-detail-foot {
  font-size: 11px;
  color: var(--muted);
}

.race-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.share-preview-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.share-preview-title {
  font-size: 12px;
  color: var(--blue-strong);
}

.share-preview-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
  border: 1px solid rgba(47,111,255,0.12);
}

.share-preview-image {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(47,111,255,0.08);
}

.share-preview-copy {
  min-width: 0;
}

.share-preview-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: #17305c;
}

.share-preview-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #41536b;
}

.result-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.result-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 30, 52, 0.46);
}

.result-modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94vw, 430px);
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 24px;
  padding: 18px;
  border: 1px solid rgba(214,224,239,0.96);
  box-shadow: 0 20px 48px rgba(23, 48, 92, 0.22);
}
.result-modal-slider-window {
  overflow: hidden;
  margin-bottom: 10px;
}
.result-modal-slider-track {
  display: flex;
  width: 200%;
  transition: transform 280ms cubic-bezier(.18,.82,.24,1);
}
.result-modal-card.is-rank-view .result-modal-slider-track {
  transform: translateX(-50%);
}
.result-modal-page {
  width: 50%;
  flex: 0 0 50%;
}

.result-modal-card h3 {
  margin: 0;
  font-size: 22px;
}
.result-modal-headline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.result-modal-headline-row h3 {
  min-width: 0;
  flex: 1 1 auto;
}
.result-view-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 10px;
  font-size: 11px;
  white-space: nowrap;
}
.result-rank-headline-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.result-rank-back {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 11px;
  white-space: nowrap;
}
.result-rank-headcopy {
  display: grid;
  gap: 2px;
}
.result-rank-headcopy strong {
  font-size: 17px;
  color: #18305a;
}
.result-rank-headcopy span {
  font-size: 12px;
  line-height: 1.45;
  color: #617188;
}
.result-rank-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.result-rank-tab {
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(47,111,255,0.14);
  background: #f5f8ff;
  color: #5a6d86;
  font-size: 12px;
  font-weight: 800;
}
.result-rank-tab.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color: #1f5ae0;
  border-color: rgba(47,111,255,0.30);
  box-shadow: 0 10px 20px rgba(47,111,255,0.12);
}
.result-rank-tie-rule {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(47,111,255,0.07);
  border: 1px solid rgba(47,111,255,0.10);
  font-size: 12px;
  line-height: 1.5;
  color: #48607d;
}
.result-rank-scroll {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.result-rank-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f7ff 100%);
  border: 1px solid rgba(47,111,255,0.10);
}
.result-rank-card.is-top {
  background: linear-gradient(180deg, #fff5cf 0%, #fffdf2 100%);
  border-color: rgba(205, 149, 38, 0.22);
  box-shadow: 0 12px 24px rgba(205, 149, 38, 0.12);
}
.result-rank-card.is-top .result-rank-badge {
  background: rgba(205, 149, 38, 0.16);
  color: #946100;
}
.result-rank-card.is-bottom {
  background: linear-gradient(180deg, #fff0f0 0%, #fff9f9 100%);
  border-color: rgba(214, 98, 98, 0.18);
}
.result-rank-card.is-bottom .result-rank-badge {
  background: rgba(214, 98, 98, 0.14);
  color: #b44747;
}
.result-rank-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.result-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(47,111,255,0.12);
  color: #1f5ae0;
  font-size: 12px;
  font-weight: 900;
}
.result-rank-card-top strong {
  display: block;
  font-size: 13px;
  color: #18305a;
  line-height: 1.35;
}
.result-rank-card-top span {
  display: block;
  font-size: 11px;
  color: #617188;
  line-height: 1.35;
}
.result-rank-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.result-rank-metric {
  padding: 8px 9px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(47,111,255,0.08);
  min-width: 0;
}
.result-rank-metric label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  color: #6a7b8f;
  line-height: 1.25;
}
.result-rank-metric strong {
  font-size: 13px;
  color: #16305b;
  line-height: 1.25;
  white-space: nowrap;
}
.result-rank-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.result-rank-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(47,111,255,0.08);
  border: 1px solid rgba(47,111,255,0.10);
  font-size: 11px;
  font-weight: 800;
  color: #2759b8;
}
#share-kakao-button {
  background: #fee500;
  color: #191600;
  border-color: rgba(25, 22, 0, 0.12);
  box-shadow: 0 10px 24px rgba(254, 229, 0, 0.28);
}
#share-kakao-button:hover,
#share-kakao-button:focus-visible {
  background: #f2da00;
  color: #191600;
}
#share-kakao-button:disabled {
  background: #f6e983;
  color: rgba(25, 22, 0, 0.62);
  border-color: rgba(25, 22, 0, 0.08);
  box-shadow: none;
}
.result-rank-card-ball {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 15px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8ff 100%);
  border: 1px solid rgba(47,111,255,0.10);
}
.result-rank-card-ball.is-top {
  background: linear-gradient(180deg, #fff5cf 0%, #fffdf2 100%);
  border-color: rgba(205, 149, 38, 0.22);
}
.result-rank-card-ball.is-top strong {
  color: #946100;
}
.result-rank-card-ball.is-bottom {
  background: linear-gradient(180deg, #fff0f0 0%, #fff9f9 100%);
  border-color: rgba(214, 98, 98, 0.18);
}
.result-rank-card-ball.is-bottom strong {
  color: #b44747;
}
.result-rank-card-ball strong {
  color: #1f5ae0;
  font-size: 13px;
}
.result-rank-card-ball span {
  font-size: 13px;
  font-weight: 700;
  color: #18305a;
}

.result-modal-close {
  width: 100%;
}

@media (min-width: 721px) {
  .race-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 18px 18px;
  }

  .race-stage-shell {
    width: min(100%, 920px);
    height: calc(100dvh - 30px);
  }

  .race-stage-grid {
    min-height: 100%;
  }

  .race-stage-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    border: 1px solid rgba(47,111,255,0.08);
    overflow: hidden;
  }

}

@media (max-width: 900px) {
  .winner-strip {
    padding: 8px 10px;
    margin-bottom: 6px;
  }

  .winner-strip h3 {
    font-size: 16px;
  }

  .winner-summary,
  .winner-strip p:last-child {
    font-size: 11px;
  }
  .race-action-row {
    gap: 6px;
    margin-bottom: 0;
  }

  .race-action-row .soft-button {
    min-height: 38px;
    padding: 9px 10px;
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .race-stage-shell {
    width: 100%;
    height: 100dvh;
  }

  .race-stage-grid {
    position: relative;
    display: block;
    min-height: 100dvh;
    height: 100dvh;
  }

  .race-stage-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    overflow: hidden;
  }

  #race-canvas {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    max-width: none;
    max-height: none;
  }

  .race-topbar {
    display: none;
  }

  .topbar-item.center {
    min-width: 44px;
  }

  .topbar-item strong {
    font-size: 11px;
  }

  .topbar-item span,
  .status-chip {
    font-size: 9px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .status-chip {
    min-height: 22px;
    padding: 0 8px;
  }

  .compact-exit-button {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .cinematic-banner {
    top: calc(max(6px, env(safe-area-inset-top)) + 34px);
    left: 50%;
    right: auto;
    width: min(88vw, 320px);
    transform: translateX(-50%);
  }

  .cinematic-banner p {
    display: none;
  }

  .share-preview-card {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .share-preview-image {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .result-modal-card {
    width: calc(100vw - 24px);
    padding: 16px;
  }

  .race-start-overlay {
    padding: 18px;
  }

  .race-loading-spinner {
    width: 56px;
    height: 56px;
  }

  .race-loading-panel strong {
    font-size: 24px;
  }

  .race-loading-panel p,
  .race-countdown-panel p {
    font-size: 12px;
  }
}