.active-effects {
  border-top: 6px solid #5a41d6;
  background: linear-gradient(135deg, #fff 70%, #f0edff);
}

/* Rider-matched visual language for Ride Control */
body.race-control-active {
  min-height:100vh;
  background:#616699;
  background-image:linear-gradient(145deg,#7479AA 0%,#616699 52%,#555A89 100%);
}
body.race-control-active .race-control-shell {
  position:relative;
  z-index:1;
  width:min(100% - 20px,1240px);
  padding:10px 0 42px;
}
body.race-control-active .race-control-shell > * { position:relative; z-index:2; }
body.race-control-active .race-control-shell .topbar,
body.race-control-active .control-tabs,
body.race-control-active .race-control-shell .panel,
body.race-control-active .pending-summary {
  color:#0c1728;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.34);
  box-shadow:0 8px 28px rgba(23,32,51,.22);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
}
body.race-control-active .race-control-shell .topbar {
  min-height:66px;
  margin:0 0 10px;
  padding:9px 12px 9px 16px;
  border-radius:17px;
}
body.race-control-active .race-control-shell .topbar .eyebrow { margin:0 0 3px; color:#21476f; }
body.race-control-active .race-control-shell .topbar h1 { font-size:clamp(22px,3vw,30px); }
.header-invite-form { flex:1; max-width:420px; margin:0; display:grid; grid-template-columns:minmax(120px,1fr) auto; gap:6px; align-items:end; }
.header-invite-form label { grid-column:1/-1; margin:0; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.header-invite-form input { min-width:0; height:42px; padding:8px 10px; }
.header-invite-form button { min-height:42px; margin:0; padding:0 13px; }
.race-top-actions { display:flex; align-items:center; gap:8px; }
body.race-control-active .race-top-actions button {
  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.8);
  border-radius:13px;
  background:rgba(245,247,250,.82);
  color:#111;
  box-shadow:none;
}
body.race-control-active #race-theme-toggle { display:grid; place-items:center; font-size:22px; }
body.race-control-active .control-tabs {
  width:max-content;
  margin:0 0 10px;
  padding:5px;
  border-radius:14px;
}
body.race-control-active .control-tabs button { flex:0 0 auto; color:#20324b; }
body.race-control-active .control-tabs button.active { background:#3f6f9f; color:#fff; box-shadow:none; }
body.race-control-active .race-command-center { display:block; }
body.race-control-active .command-status-grid { grid-template-columns:repeat(5,minmax(0,1fr)); align-content:start; }
body.race-control-active .command-stat { min-height:102px; background:rgba(255,255,255,.58)!important; }
.overview-statuses { flex:1; display:grid; grid-template-columns:repeat(6,minmax(76px,1fr)); gap:7px; }
.overview-statuses > div { min-width:0; padding:8px 9px; border-radius:11px; background:rgba(255,255,255,.25); text-align:center; }
.overview-statuses span,.overview-statuses strong { display:block; }
.overview-statuses span { min-height:25px; font-size:10px; font-weight:900; line-height:1.2; text-transform:uppercase; }
.overview-statuses strong { font-size:22px; }
body.race-control-active .control-summary,
body.race-control-active .invite-manager,
body.race-control-active .announcement-manager,
body.race-control-active .checkpoint-manager,
body.race-control-active .racer-roster,
body.race-control-active .activity-panel { border-radius:16px; }
body.race-control-active .summary-stat,
body.race-control-active .current-announcement { background:rgba(255,255,255,.25); }
body.race-control-active .rider-card-summary,
body.race-control-active .rider-card-body .roster-row,
body.race-control-active .state-breakdown > div,
body.race-control-active .control-actions,
body.race-control-active .checkpoint-manager form,
body.race-control-active .checkpoint-editor-list article {
  background:rgba(255,255,255,.22);
}
body.race-control-active .race-control-shell .roster-card {
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.27);
  box-shadow:none;
}
body.race-control-active .roster-avatar { border:1px solid #fff; background:#F79142; color:#fff; }
body.race-control-active .roster-avatar { position:relative; overflow:hidden; padding:3px; }
body.race-control-active .roster-avatar .race-rider-character { width:100%; height:100%; max-width:100%; max-height:100%; }
body.race-control-active .race-rider-avatar { display:block; width:100%; height:100%; border-radius:9px; object-fit:cover; }
body.race-control-active .race-nav-icon { position:absolute; right:-10px; bottom:-8px; width:25px; height:25px; object-fit:contain; filter:none; }
body.race-control-active input,
body.race-control-active select,
body.race-control-active textarea { border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.55); }
body.race-control-active .secondary { background:rgba(245,247,250,.65); }
body.race-control-active .pending-summary { background:rgba(255,247,207,.78); }
body.rider-theme-dark.race-control-active { background:#44486B; background-image:linear-gradient(145deg,#51567C 0%,#44486B 56%,#373B5B 100%); }
body.rider-theme-dark.race-control-active .race-control-shell .topbar,
body.rider-theme-dark.race-control-active .control-tabs,
body.rider-theme-dark.race-control-active .race-control-shell .panel,
body.rider-theme-dark.race-control-active .command-map-heading { color:#f3f7ff; border-color:rgba(255,255,255,.25); background:rgba(16,26,41,.72); }
body.rider-theme-dark.race-control-active .map-data-note,
body.rider-theme-dark.race-control-active .command-stat span,
body.rider-theme-dark.race-control-active .command-stat small { color:#c3d0e2; }
body.rider-theme-dark.race-control-active .command-stat,
body.rider-theme-dark.race-control-active .race-control-shell .roster-card,
body.rider-theme-dark.race-control-active .rider-card-summary,
body.rider-theme-dark.race-control-active .rider-card-body .roster-row,
body.rider-theme-dark.race-control-active .state-breakdown > div,
body.rider-theme-dark.race-control-active .control-actions { background:rgba(16,26,41,.72)!important; color:#f3f7ff; border-color:rgba(255,255,255,.2); }
@media(max-width:680px){
  body.race-control-active .race-control-shell{width:min(100% - 12px,1240px);padding-top:6px}
  body.race-control-active .race-control-shell .topbar{min-height:58px;padding:7px 8px 7px 12px}
  body.race-control-active .race-top-actions button{width:44px;min-width:44px;height:44px;min-height:44px}
  body.race-control-active .control-tabs{width:100%}
  body.race-control-active .control-tabs button{flex:1}
  body.race-control-active .command-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.race-control-active .command-stat:first-child{grid-column:1/-1}
  .header-invite-form{order:3;flex-basis:100%;max-width:none}
  body.race-control-active .race-control-shell .topbar{flex-wrap:wrap}
  .overview-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.effect-status {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e7edff;
  color: #2144aa;
  font-size: 12px;
  font-weight: 900;
}

.state-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 2px 12px;
}

.state-breakdown > div {
  padding: 12px 14px;
  border: 1px solid #dfe4ee;
  border-radius: 12px;
  background: #fff;
}

.state-breakdown small,
.state-breakdown span {
  display: block;
}

.state-breakdown small {
  margin-bottom: 5px;
  color: #2457e6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.state-breakdown strong {
  display: block;
  margin-bottom: 5px;
}

.state-breakdown span {
  color: #687086;
  font-size: 11px;
}

@media (max-width: 560px) {
  .state-breakdown { grid-template-columns: 1fr; }
}

.arrival-check {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #dfe4ee;
}

.navigation-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #dfe4ee;
}

.navigation-box > p:not(.label) {
  margin-bottom: 11px;
  color: #687086;
  font-size: 13px;
}

.navigation-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.navigation-buttons a {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid #cbd6ff;
  border-radius: 10px;
  background: #eef2ff;
  color: #2144aa;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.navigation-buttons a:focus-visible {
  outline: 3px solid #2457e62e;
  outline-offset: 2px;
}

.map-poc { margin-top: 12px; padding-top: 12px; border-top: 1px solid #dfe4ee; }
.map-poc-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.map-poc-heading .label { margin: 0 0 3px; }
.map-poc-heading strong,.map-poc-heading small { display: block; }
.map-poc-heading small { margin-top: 3px; color: #687086; }
.map-poc-heading button { flex: 0 0 auto; min-height: 38px; }
.map-poc-body { margin-top: 12px; }
.map-poc-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.map-poc-toolbar label { display: grid; gap: 4px; margin: 0; color: #687086; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.map-poc-toolbar select { min-height: 38px; padding: 7px 34px 7px 10px; }
.map-route-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.map-route-actions button { min-height: 38px; padding: 0 12px; }
#map-location-status { color: #687086; font-size: 12px; font-weight: 700; }
#maplibre-poc { width: 100%; height: clamp(280px,48vh,520px); overflow: hidden; border: 1px solid #cbd2df; border-radius: 13px; background: #dce8ee; }
.map-stage { position: relative; }
.follow-rider { position: absolute; right: 12px; bottom: 14px; z-index: 5; min-height: 42px; padding: 0 14px; background: #fff; color: #172033; border: 2px solid #2457e6; box-shadow: 0 5px 18px #17203344; }
.recenter-dashboard-map { position:fixed; right:12px; bottom:calc(env(safe-area-inset-bottom) + 106px); z-index:9; min-height:42px; padding:0 13px; border:1px solid #ffffffbb; border-radius:10px; background:#f1f3f5e8; color:#172033; font-size:12px; font-weight:900; backdrop-filter:blur(8px); }
body.rider-theme-dark .recenter-dashboard-map { background:#172334e8; color:#f3f7ff; border-color:#ffffff55; }
body.map-navigation-active .recenter-dashboard-map { display:none!important; }
.navigation-hud,.navigation-status { display: none; }
.map-poc-empty { height: 100%; display: grid; place-content: center; gap: 6px; padding: 24px; text-align: center; color: #172033; }
.map-poc-empty span { max-width: 340px; color: #687086; font-size: 13px; line-height: 1.45; }
.map-poc-note { margin: 7px 0 0; color: #687086; font-size: 11px; line-height: 1.4; }
.map-directions:empty { display: none; }
.map-directions { margin-top: 9px; padding: 11px 12px; border: 1px solid #cbd2df; border-radius: 11px; background: #f6f9fb; }
.map-directions .notice,.map-directions .error { margin: 0; }
.route-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-summary div strong,.route-summary div span { display: block; }
.route-summary span { margin-top: 3px; color: #687086; font-size: 12px; }
.route-summary button { flex: 0 0 auto; min-height: 38px; }
.active-maneuver { display: grid; gap: 5px; margin-top: 10px; padding: 14px; border-radius: 11px; background: #172033; color: #fff; }
.active-maneuver[hidden] { display: none; }
.active-maneuver small { color: #aebbd1; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.active-maneuver strong { font-size: clamp(18px,4vw,24px); line-height: 1.2; }
.active-maneuver span { color: #dce4f2; font-size: 13px; }
.map-directions ol { margin: 9px 0 0; padding-left: 21px; color: #3f485a; font-size: 13px; line-height: 1.45; }
.map-directions li+li { margin-top: 4px; }
.map-checkpoint { width: 28px; height: 28px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #2457e6; color: #fff; box-shadow: 0 2px 8px #17203355; font-size: 11px; font-weight: 900; cursor: pointer; }
.map-checkpoint.current { width: 34px; height: 34px; background: #ffd84a; color: #172033; }
.map-rider-marker { width: 38px; height: 38px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: #172033; color: #fff; box-shadow: 0 3px 12px #17203366; font-size: 13px; font-weight: 900; }
.map-rider-marker[data-icon='motorcycle'] { width: 46px; height: 46px; border-radius: 12px; background: #0b7a53; font-size: 25px; }
.map-rider-marker[data-icon='cup'] { width: 44px; height: 44px; background: #b86800; font-size: 23px; }
@media (max-width: 520px) { .map-poc-heading,.map-poc-toolbar { align-items: stretch; flex-direction: column; } .map-poc-heading button { width: 100%; } .map-route-actions { align-items: stretch; flex-direction: column; } .map-route-actions button { width: 100%; } .route-summary { flex-direction: column; gap: 3px; } #maplibre-poc { height: 52vh; min-height: 300px; } }
@media (orientation: landscape) and (max-height: 600px) { #maplibre-poc { height: 68vh; min-height: 260px; } }

body.map-navigation-active { overflow: hidden; background: #7492B9; }
.map-poc.navigation-active { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; border: 0; background: #7492B9; }
.map-poc.navigation-active .map-poc-heading,.map-poc.navigation-active .map-poc-toolbar,.map-poc.navigation-active .map-directions,.map-poc.navigation-active .map-poc-note { display: none; }
.map-poc.navigation-active .map-poc-body,.map-poc.navigation-active .map-stage { width: 100%; height: 100%; margin: 0; }
.map-poc.navigation-active #maplibre-poc { width: 100%; height: 100%; min-height: 100%; border: 0; border-radius: 0; }
.map-poc.navigation-active .navigation-hud { position: absolute; top: max(14px,env(safe-area-inset-top)); left: 14px; right: 14px; z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 1px solid #ffffff55; border-radius: 16px; background: #172033ed; color: #fff; box-shadow: 0 8px 26px #17203355; backdrop-filter: blur(8px); }
.map-poc.navigation-active .navigation-hud[hidden],.map-poc.navigation-active .navigation-status[hidden] { display: none; }
.navigation-hud div { display: grid; gap: 4px; min-width: 0; }
.navigation-hud small { color: #b9c7db; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.navigation-hud strong { font-size: clamp(18px,4.8vw,28px); line-height: 1.15; }
.navigation-hud span { color: #dce4f2; font-size: 13px; }
.navigation-hud>button { flex: 0 0 42px; width: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: #ffffff20; color: #fff; font-size: 26px; }
.map-poc.navigation-active .navigation-status { position: absolute; left: 14px; right: 14px; bottom: max(14px,env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid #ffffff99; border-radius: 14px; background: #f8fbffee; color: #172033; box-shadow: 0 6px 22px #17203344; backdrop-filter: blur(8px); }
.navigation-status span { color: #55637a; font-size: 12px; font-weight: 800; }
.navigation-status strong { font-size: 13px; text-align: right; }
.navigation-game-stats { display: flex; align-items: center; justify-content: center; gap: 8px; }
.navigation-game-stats span { padding: 5px 8px; border-radius: 999px; background: #e8eef7; color: #172033; white-space: nowrap; }
.map-poc.navigation-active .follow-rider { right: 14px; bottom: calc(max(14px,env(safe-area-inset-bottom)) + 66px); }
@media (max-width: 580px) { .map-poc.navigation-active .navigation-status { align-items: flex-start; flex-wrap: wrap; } .navigation-game-stats { order: 3; width: 100%; justify-content: flex-start; } }
@media (orientation: landscape) and (max-height: 600px) { .map-poc.navigation-active .navigation-hud { right: auto; width: min(46vw,520px); } .map-poc.navigation-active .navigation-status { left: auto; width: min(50vw,580px); } .navigation-game-stats { order: initial; width: auto; } }

/* Rider navigation refresh */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.automatic-arrival { display: grid; gap: 5px; }
.automatic-arrival small,#arrival-result { color: var(--muted); font-size: 12px; }
.map-icon-controls { display:flex; align-items:end; gap:9px; flex-wrap:wrap; }
.map-icon-controls label:first-child select { min-width:190px; }
.map-color-control { display:grid; gap:4px; }
.map-color-control>span { color:#687086; font-size:11px; font-weight:800; text-transform:uppercase; }
.map-color-control { position:relative; }
.map-color-toggle { min-height:38px; display:flex; align-items:center; gap:8px; padding:0 11px; background:#fff; color:#172033; border:1px solid #bfc8d8; }
.map-color-toggle i { width:20px; height:20px; border:1px solid #8792a3; border-radius:4px; background:var(--swatch); }
.map-color-grid { position:absolute; top:calc(100% + 6px); right:0; z-index:12; display:grid; grid-template-columns:repeat(10,20px); gap:3px; width:max-content; padding:8px; border:1px solid #8792a3; border-radius:10px; background:#fff; box-shadow:0 10px 30px #17203355; }
.map-color-grid[hidden] { display:none; }
.map-color-grid button { width:20px; height:20px; min-height:20px; padding:0; border:1px solid #8792a3; border-radius:2px; background:var(--swatch); box-shadow:none; }
.map-color-grid button.selected { box-shadow:0 0 0 3px #172033; transform:scale(.86); }
.map-checkpoint { width:44px; height:50px; display:grid; place-items:start center; padding-top:3px; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; color:#fff; font-weight:900; filter:none; }
.map-checkpoint-shape { width:36px; height:36px; display:grid; place-items:center; border:3px solid #fff; border-radius:50% 50% 50% 0; background:#F79142; transform:rotate(-45deg); }
.map-checkpoint-shape span { color:#fff; font-size:14px; line-height:1; transform:rotate(45deg); }
.map-checkpoint.current { width:48px; height:54px; background:transparent; filter:none; }
.map-checkpoint.current .map-checkpoint-shape { width:42px; height:42px; }
.map-rider-marker { width:58px; height:58px; display:grid; place-items:center; border:0; border-radius:0; background:transparent; box-shadow:none; }
.map-rider-symbol { width:100%; height:100%; display:block; background-color:#2878C8; background-repeat:no-repeat; background-position:center; background-size:contain; mask-repeat:no-repeat; mask-position:center; mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; filter:drop-shadow(2px 0 #fff) drop-shadow(-2px 0 #fff) drop-shadow(0 2px #fff) drop-shadow(0 -2px #fff) drop-shadow(0 4px 4px #17203399); }
.map-rider-marker[data-icon^='motorcycle'] { width:62px; height:62px; }
.map-rider-marker[data-icon^='arcade-'] { width:62px; height:62px; }
.map-rider-marker[data-icon^='goofy'] { width:58px; height:58px; }
.map-poc.navigation-active .follow-rider { bottom:calc(max(14px,env(safe-area-inset-bottom)) + 112px); }
body.rider-theme-dark { --ink:#edf3ff; --muted:#aebbd0; --blue:#7ea5ff; --paper:#182334; --line:#344257; --bg:#0d1522; background:#0d1522; color:#edf3ff; }
body.rider-theme-dark .card,body.rider-theme-dark .panel,body.rider-theme-dark .secondary { background:#182334; color:#edf3ff; border-color:#344257; box-shadow:0 10px 30px #0005; }
body.rider-theme-dark input,body.rider-theme-dark select,body.rider-theme-dark textarea { background:#101a29; color:#edf3ff; border-color:#46566e; }
body.rider-theme-dark .coin,body.rider-theme-dark .summary-stat { background:#3b3217; color:#fff1ad; }
body.rider-theme-dark .control-actions,body.rider-theme-dark .inventory-dropdown,body.rider-theme-dark .activity-dropdown { background:#121d2c; }
body.rider-theme-dark .map-poc { border-color:#344257; }
body.rider-theme-dark .map-poc-heading small,body.rider-theme-dark .map-poc-note,body.rider-theme-dark .map-poc-toolbar label,body.rider-theme-dark .map-color-control>span { color:#aebbd0; }
body.rider-theme-dark .map-color-grid { background:#101a29; border-color:#46566e; }
body.rider-theme-dark .map-poc.navigation-active { background:#101826; }
body.rider-theme-dark .map-poc.navigation-active .navigation-status { background:#121d2cee; color:#edf3ff; border-color:#ffffff44; }
@media (max-width:640px){.topbar{align-items:flex-start}.topbar-actions{flex-direction:column;align-items:stretch}.topbar-actions button{min-height:38px;padding:0 11px}.map-icon-controls{display:grid;grid-template-columns:1fr;width:100%}.map-icon-controls select{width:100%;min-width:0!important}.map-color-grid{left:0;right:auto;grid-template-columns:repeat(10,20px);max-width:calc(100vw - 56px)}}
@media (orientation:landscape) and (max-height:600px){.map-poc.navigation-active .follow-rider{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 66px)}}

/* Map-backed rider dashboard */
body.map-dashboard-active { min-height:100vh; background:#7492B9; }
body.map-dashboard-active .shell { position:relative; z-index:1; width:min(100% - 20px,1040px); pointer-events:none; }
body.map-dashboard-active #maplibre-poc { position:fixed; inset:0; z-index:0; width:100vw; height:100vh; min-height:100vh; border:0; border-radius:0; }
body.map-dashboard-active .topbar,body.map-dashboard-active .panel { position:relative; z-index:2; pointer-events:auto; }
body.map-dashboard-active .topbar { margin:8px 0 14px; padding:12px 14px; border:1px solid #ffffff88; border-radius:16px; background:#f8fbf0dc; box-shadow:0 8px 24px #17203333; backdrop-filter:blur(10px); }
body.map-dashboard-active .panel { background:#fffef1dc; border-color:#ffffff99; box-shadow:0 8px 28px #1720333d; backdrop-filter:blur(10px); }
body.map-dashboard-active .map-poc { position:relative; z-index:3; }
body.map-dashboard-active .map-poc-heading,body.map-dashboard-active .map-poc-toolbar,body.map-dashboard-active .map-directions,body.map-dashboard-active .map-poc-note { position:relative; z-index:3; border-radius:11px; background:#fffef1e8; }
body.map-dashboard-active .map-poc-heading { padding:10px; }
body.map-dashboard-active .map-poc-toolbar { padding:9px; }
body.map-dashboard-active .map-poc-note { padding:7px 9px; }
body.rider-theme-dark.map-dashboard-active .topbar,body.rider-theme-dark.map-dashboard-active .panel,body.rider-theme-dark.map-dashboard-active .map-poc-heading,body.rider-theme-dark.map-dashboard-active .map-poc-toolbar,body.rider-theme-dark.map-dashboard-active .map-directions,body.rider-theme-dark.map-dashboard-active .map-poc-note { background:#101a29df; border-color:#ffffff38; }
body.map-navigation-active .shell { z-index:auto; }
body.map-navigation-active .map-poc.navigation-active { position:fixed!important; inset:0!important; z-index:1000!important; width:100vw!important; height:100dvh!important; }
body.map-navigation-active #maplibre-poc { z-index:1; }
body.map-navigation-active .navigation-hud,
body.map-navigation-active .navigation-status,
body.map-navigation-active .follow-rider { z-index:20!important; pointer-events:auto; }

/* Single-screen rider cockpit */
body.map-dashboard-active { overflow:hidden; }
body.map-dashboard-active .cockpit { position:fixed; inset:0; width:100%; height:100%; padding:10px; margin:0; display:grid; grid-template-rows:auto 1fr; pointer-events:none; }
.cockpit-top { align-self:start; width:100%; margin:0!important; padding:6px 8px!important; border:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; text-shadow:0 2px 5px #fff,0 0 8px #fff; pointer-events:auto; }
.rider-id { display:flex; align-items:center; gap:8px; }
.rider-id .avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 3px 9px #17203388; }
.rider-id h1 { margin:0; font-size:clamp(18px,4vw,27px); }
.icon-button { width:42px; padding:0; font-size:20px; }
.cockpit-grid { position:relative; display:block; pointer-events:none; }
.cockpit-grid .panel { position:absolute!important; margin:0; padding:8px 10px!important; border:0!important; border-radius:12px; background:#fff3!important; color:#0c1728; box-shadow:0 3px 14px #17203333!important; backdrop-filter:blur(3px)!important; text-shadow:0 1px 3px #fff,0 0 7px #fff; pointer-events:auto; }
.cockpit-grid .racer { top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cockpit-grid .checkpoint { top:66px; left:0; width:min(58%,430px); border:0; }
.cockpit-grid .checkpoint h2 { margin:0; font-size:clamp(16px,3.5vw,22px); }
.ride-button { min-height:42px; }
.inventory-strip { display:flex; align-items:center; gap:7px; }
.inventory-strip .coin { min-width:60px; padding:5px 8px; background:#fff6; }
.inventory-strip .coin strong { font-size:18px; }
.inventory-tile { position:relative; width:44px; min-height:44px; padding:0; display:grid; place-items:center; border:1px solid #fff9; background:#fff5; color:#172033; font-size:23px; }
.inventory-tile.equipped { outline:3px solid #F79142; background:#fff9; }
.inventory-tile b { position:absolute; right:2px; bottom:1px; font-size:10px; }
.cockpit-grid .equipped,.cockpit-grid .inventory,.cockpit-grid .activity-panel,.cockpit-grid .active-effects { display:none!important; }
.cockpit .map-poc { position:fixed!important; inset:0; z-index:1!important; margin:0; padding:0; border:0; pointer-events:none; }
.cockpit .map-poc-body,.cockpit .map-stage { margin:0; width:100%; height:100%; }
.cockpit .map-poc-toolbar { position:fixed!important; right:10px; top:72px; z-index:7; width:auto; margin:0; padding:0!important; background:transparent!important; pointer-events:auto; }
.cockpit .map-route-actions { display:none; }
.cockpit .map-directions { position:fixed!important; left:10px; right:10px; bottom:10px; z-index:7; margin:0; padding:7px 9px; border:1px solid #ffffff55; background:#ffffff3d!important; backdrop-filter:blur(4px); pointer-events:auto; }
.route-summary { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:8px; }
.route-summary .go-button { justify-self:end; min-height:42px; display:flex; align-items:center; gap:5px; padding:0 14px; }
.route-summary .go-button span { font-size:18px; transform:rotate(-45deg); color:#fff; }
.route-summary #toggle-route-steps { min-height:42px; }
#route-steps { max-height:28vh; overflow:auto; margin:7px 0 0; padding:8px 8px 8px 28px; border-radius:9px; background:#ffffff42; }
.automatic-arrival { position:fixed; z-index:7; left:10px; bottom:72px; width:auto; padding:5px 8px!important; border:0; background:#ffffff38; backdrop-filter:blur(3px); }
.navigation-box { display:none; }
.rider-settings { width:min(92vw,560px); max-height:88vh; padding:14px; border:1px solid #ffffff66; border-radius:18px; background:#172033d9; color:#fff; backdrop-filter:blur(14px); }
.rider-settings::backdrop { background:#17203355; backdrop-filter:blur(3px); }
.settings-head { display:flex; justify-content:space-between; align-items:center; }
.settings-head h2 { margin:0; }.settings-head button { width:40px; min-height:40px; padding:0; font-size:24px; }
.upload-avatar { display:inline-flex; margin:10px 0; padding:10px 12px; border-radius:10px; background:#ffffff22; }.upload-avatar input { display:none; }
.avatar-grid,.map-icon-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin:8px 0; }
.avatar-grid button,.map-icon-grid button { min-height:0; aspect-ratio:1; padding:3px; border:1px solid #ffffff55; background:#ffffff20; }
.avatar-grid img,.map-icon-grid img { width:100%; height:100%; object-fit:contain; }
#settings-map-controls { display:flex; gap:8px; align-items:start; margin-top:10px; }
.square-picker { width:48px; min-width:48px; min-height:48px; padding:4px!important; border:1px solid #ffffff66!important; background:#ffffff22!important; }
.square-picker img { width:100%; height:100%; object-fit:contain; }.square-picker i { width:100%; height:100%; display:block; background:var(--swatch); border-radius:5px; }
.visual-picker,.map-color-control { position:relative; }.map-icon-grid { position:absolute; right:0; bottom:calc(100% + 6px); z-index:50; width:min(78vw,390px); padding:8px; border-radius:12px; background:#172033df; backdrop-filter:blur(12px); }.map-icon-grid[hidden]{display:none}.map-color-grid{z-index:60!important;background:#172033df!important;backdrop-filter:blur(12px)}
body.rider-theme-dark .cockpit-grid .panel,body.rider-theme-dark .cockpit-top { color:#fff; text-shadow:0 2px 5px #000,0 0 8px #000; }
@media (orientation:landscape){body.map-dashboard-active .cockpit{padding:6px}.cockpit-top{width:min(48%,520px)}.cockpit-grid .racer{top:auto;bottom:0;left:0;right:auto;width:min(47%,520px)}.cockpit-grid .checkpoint{top:0;left:0;width:min(43%,460px)}.cockpit .map-poc-toolbar{top:8px;right:8px}.cockpit .map-directions{left:auto;right:8px;bottom:8px;width:min(51%,620px)}.automatic-arrival{left:auto;right:8px;bottom:68px}.route-summary{gap:5px}}
@media (max-width:520px){.topbar-actions{flex-direction:row}.cockpit-grid .checkpoint{top:62px;width:68%}.route-summary{grid-template-columns:auto auto 1fr}.route-summary #toggle-route-steps{grid-column:1/-1;min-height:32px}.avatar-grid,.map-icon-grid{grid-template-columns:repeat(3,1fr)}}

@media (max-width: 430px) {
  .navigation-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .navigation-buttons a { min-height: 42px; padding: 6px 3px; font-size: 11px; }
}

.arrival-check button {
  width: 100%;
}

.arrival-check > small {
  color: #687086;
  line-height: 1.4;
}

.arrival-check .error,
.arrival-check .notice,
.arrival-check .success {
  margin: 3px 0 0;
}

.arrival-confirmed {
  margin: 18px 0 0;
  padding: 11px 13px;
  border: 1px solid #b9e7ca;
  border-radius: 10px;
  background: #e7f8ed;
  color: #17663a;
  font-weight: 800;
}

.challenge-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #b9e7ca;
  border-radius: 13px;
  background: #f0fbf4;
}

.challenge-box h3 { margin: 0 0 10px; line-height: 1.4; }
.challenge-box p { margin-bottom: 12px; }

.awaiting-pill {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff1b8;
  color: #705500;
  font-size: 12px;
  font-weight: 900;
}

.approval-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 2px 0;
  padding: 11px 13px;
  border: 1px solid #efd77c;
  border-radius: 11px;
  background: #fff8d8;
}

.approval-banner span { color: #705500; font-size: 12px; }

@media (max-width: 560px) {
  .approval-banner { flex-direction: column; }
}

.ride-lock-setup {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #dfe4ee;
}

.ride-lock-setup small { color: #687086; line-height: 1.4; }

.ride-mode { overflow: hidden; background: #0c1630; }
.ride-hud { min-height: 100vh; display: grid; place-items: center; padding: 18px; color: #fff; background: radial-gradient(circle at 50% 30%, #203d85, #0c1630 68%); }
.ride-hud > section { width: min(100%, 760px); text-align: center; }
.ride-kicker { margin-bottom: 5px; color: #ffd84a; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ride-hud h1 { margin-bottom: 14px; font-size: clamp(28px, 7vw, 50px); }
.ride-speed { display: flex; justify-content: center; align-items: baseline; gap: 7px; margin: 8px 0 18px; }
.ride-speed strong { font-size: clamp(64px, 20vw, 140px); line-height: .9; }
.ride-speed span { font-size: 18px; font-weight: 900; }
.ride-destination { padding: 18px; border: 1px solid #ffffff33; border-radius: 18px; background: #ffffff12; }
.ride-destination small,.ride-stats small { display: block; color: #b9c9ef; font-weight: 800; text-transform: uppercase; }
.ride-destination h2 { margin: 7px 0; font-size: clamp(24px, 5vw, 38px); }
.ride-destination p { margin: 0; color: #dbe5ff; }
.ride-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ride-stats > div { padding: 14px; border-radius: 14px; background: #ffffff12; }
.ride-stats strong { display: block; margin-top: 6px; font-size: 22px; }
.ride-lock-message { margin: 16px 0 0; color: #dbe5ff; line-height: 1.5; }

@media (orientation: landscape) and (max-height: 600px) {
  .ride-hud { padding: 10px 22px; }
  .ride-hud > section { display: grid; grid-template-columns: .8fr 1.4fr; gap: 10px 18px; align-items: center; }
  .ride-kicker,.ride-hud h1 { grid-column: 1; }
  .ride-speed { grid-column: 1; grid-row: 3 / 5; margin: 0; }
  .ride-destination { grid-column: 2; grid-row: 1 / 3; }
  .ride-stats { grid-column: 2; margin: 0; }
  .ride-lock-message { grid-column: 2; margin: 0; }
}

.challenge-box form { margin-top: 12px; }
.challenge-box textarea { min-height: 78px; resize: vertical; padding: 11px 12px; border: 1px solid #bfc8d8; border-radius: 10px; font: inherit; }
.submission-status { margin-top: 10px; padding: 10px 12px; border-radius: 10px; }
.submission-status p { margin: 5px 0 0; }
.submission-status.pending { background: #fff7cf; color: #705500; }
.submission-status.rejected { background: #fff0f0; color: #8f2020; }
.submission-review { display: grid; grid-template-columns: minmax(180px,1.5fr) minmax(180px,1fr) auto auto; gap: 8px; align-items: center; margin: 5px 2px 8px; padding: 11px; border: 2px solid #d49b00; border-radius: 12px; background: #fffaf0; }
.submission-review small,.submission-review strong { display: block; }
.submission-review small { margin-bottom: 4px; color: #8a6500; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.submission-review input { min-width: 0; padding: 10px; }
.submission-review button { min-height: 40px; padding: 0 12px; }
.submission-review .review-result { grid-column:1/-1; margin:0; }
.inventory-tile.use-item { cursor:pointer; touch-action:manipulation; }
.inventory-tile.use-item:active { transform:scale(.94); }
.inventory-tile.shield-active { border-color:#9cecff!important; background:#dffaff!important; color:#123a67!important; opacity:1!important; cursor:default; animation:shield-active-glow 1.35s ease-in-out infinite alternate; }
@keyframes shield-active-glow { from { box-shadow:0 0 5px #45d7ff,0 0 0 2px #ffffffaa; transform:scale(.97); } to { box-shadow:0 0 16px 5px #45d7ffcc,0 0 0 3px #fff; transform:scale(1.03); } }
.rider-popup { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; padding:10px 12px; border-radius:12px; }
.rider-popup.notice { border:1px solid #89a6ce; background:#edf4ff; color:#172033; }
.rider-popup.success { border:1px solid #4c9b68; background:#effaf2; color:#195a30; }
.rider-popup.error { border:1px solid #bd3f3f; background:#fff0f0; color:#7d1f1f; }
.rider-popup .dismiss-rider-popup,.event-state-banner .dismiss-rider-popup { flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px; padding:0; display:grid; place-items:center; border-radius:10px; font-size:22px; line-height:1; }
.rider-popup .dismiss-rider-popup,.event-state-banner .dismiss-rider-popup { margin-left:auto; }
.rider-popup > span,.event-state-banner > span { min-width:0; }
.powerup-acquired { width:min(92vw,430px); padding:24px; border:2px solid #7ccfff; border-radius:20px; background:linear-gradient(160deg,#ffffff,#eaf7ff); color:#172033; text-align:center; box-shadow:0 24px 80px #08152c88; }
.powerup-acquired::backdrop { background:#08152caa; backdrop-filter:blur(5px); }
.powerup-acquired-icon { width:82px; height:82px; margin:0 auto 10px; display:grid; place-items:center; border:3px solid #fff; border-radius:22px; background:#2457e6; font-size:48px; box-shadow:0 8px 24px #2457e655; }
.powerup-acquired h2 { margin:4px 0 8px; font-size:30px; }
.powerup-acquired > strong,.powerup-acquired > p,.powerup-acquired > small { display:block; }
.powerup-acquired > p { line-height:1.45; }
.powerup-acquired .powerup-question { margin:18px 0 8px; font-size:20px; font-weight:1000; text-transform:uppercase; }
.powerup-acquired-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.powerup-acquired-actions button { min-height:52px; padding:8px; }
.powerup-acquired > small { margin-top:10px; color:#687086; }
.random-award-label { min-width:130px; display:grid; align-content:center; }
.random-award-label small,.random-award-label strong { display:block; }
.random-award-label small { color:#687086; font-size:10px; text-transform:uppercase; }
@media (max-width:420px){.powerup-acquired-actions{grid-template-columns:1fr}.powerup-acquired{padding:18px}.powerup-acquired-icon{width:68px;height:68px;font-size:40px}}
.inventory-strip .target-select { max-width:150px; padding:7px; font-size:12px; }
@media (max-width: 800px) { .submission-review { grid-template-columns: 1fr 1fr; } .submission-review > div,.submission-review input { grid-column: 1 / -1; } }

.pending-summary { position: sticky; top: 8px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding: 11px 14px; border: 2px solid #d49b00; border-radius: 14px; background: #fff7cf; box-shadow: 0 8px 22px #17203325; }
.pending-summary > div { display: flex; align-items: center; gap: 11px; }
.pending-summary > div > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #d49b00; color: #fff; font-size: 20px; font-weight: 900; }
.pending-summary p,.pending-summary small { display: block; margin: 0; }
.pending-summary small { margin-top: 3px; color: #705500; }
.pending-summary button { min-height: 40px; background: #8a6500; }
.race-control-shell .roster-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:10px; border-top:0; }
.race-control-shell .roster-card { overflow: hidden; border: 2px solid #d7deea; border-radius: 14px; background: #fff; box-shadow: 0 5px 15px #1720330d; }
.race-control-shell .roster-card:nth-child(even) { background: #fbfcff; }
.race-control-shell .roster-card.has-pending-submission { border-color: #d49b00; box-shadow: 0 6px 20px #d49b0026; }
.race-control-shell .roster-row { padding: 11px 12px; border-bottom: 1px solid #dfe4ee; background: #f4f7fb; }
.race-control-shell .has-pending-submission .roster-row { background: #fff7cf; }
.race-control-shell .state-breakdown,.race-control-shell .submission-review,.race-control-shell .control-actions,.race-control-shell .reset-actions { margin-left: 10px; margin-right: 10px; }
.review-badge { display: inline-block; margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: #d49b00; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 560px) { .pending-summary { position: static; align-items: stretch; flex-direction: column; } .pending-summary button { width: 100%; } }

.checkpoint-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.checkpoint-title-row h2 { margin: 0; }
.checkpoint-title-row .pill { flex: 0 0 auto; }
@media (max-width: 380px) { .checkpoint-title-row { align-items: flex-start; } .checkpoint-title-row .pill { font-size: 10px; } }

.control-tabs { display: flex; gap: 6px; margin-bottom: 10px; padding: 5px; border: 1px solid #d7deea; border-radius: 13px; background: #fff; }
.control-tabs button { flex: 1; min-height: 40px; background: transparent; color: #687086; }
.control-tabs button.active { background: #2457e6; color: #fff; }
.checkpoint-manager { display: none; border-top: 6px solid #2457e6; }
.checkpoints-view > .pending-summary,.checkpoints-view > .control-summary,.checkpoints-view > .invite-manager,.checkpoints-view > .announcement-manager,.checkpoints-view > .racer-roster,.checkpoints-view > .activity-panel { display: none; }
.checkpoints-view > .checkpoint-manager { display: block; }
.race-live-map { display:none; }
.live-map-view > .pending-summary,.live-map-view > .control-summary,.live-map-view > .invite-manager,.live-map-view > .announcement-manager,.live-map-view > .racer-roster,.live-map-view > .activity-panel,.live-map-view > .checkpoint-manager { display:none!important; }
.live-map-view > .race-live-map { display:block; height:calc(100dvh - 148px); min-height:430px; overflow:hidden; border:1px solid #d7deea; border-radius:16px; background:#fff; }
.race-map-toolbar { height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-bottom:1px solid #d7deea; }
.race-map-toolbar > div:first-child { min-width:0; display:grid; gap:2px; }
.race-map-toolbar span { color:#687086; font-size:12px; }
.race-map-toolbar > div:last-child { display:flex; gap:6px; }
.race-map-toolbar button { min-height:38px; padding:0 11px; }
.race-map-layout { height:calc(100% - 58px); display:grid; grid-template-columns:minmax(0,1fr) 210px; }
#race-control-live-map { width:100%; height:100%; min-height:0; }
.race-map-layout aside { min-width:0; padding:10px; overflow:auto; border-left:1px solid #d7deea; background:#f7f9fc; }
.race-map-layout aside > strong,.race-map-layout aside > small { display:block; }
.race-map-layout aside > small { margin-top:10px; color:#687086; font-size:11px; line-height:1.35; }
#race-live-rider-list { display:grid; gap:5px; margin-top:8px; }
#race-live-rider-list button { min-width:0; min-height:44px; padding:6px 8px; display:grid; justify-items:start; text-align:left; background:#fff; color:#172033; border:1px solid #d7deea; box-shadow:none; }
#race-live-rider-list button small { color:#687086; font-size:10px; }
.race-live-rider-marker { position:relative; width:48px; height:48px; padding:0; border:0; border-radius:0; background:transparent!important; box-shadow:none; overflow:visible; }
.race-live-rider-marker .race-map-character { position:static; display:block; width:100%; height:100%; background-color:transparent!important; filter:drop-shadow(0 3px 4px #17203388); }
.race-live-rider-marker .race-live-rider-label { position:absolute; left:50%; top:calc(100% + 4px); width:max-content; max-width:130px; padding:2px 6px; border-radius:7px; background:#172033e8; color:#fff; font-size:11px; font-weight:900; transform:translateX(-50%); }
.race-live-rider-marker.stale { opacity:.48; filter:grayscale(.6); }
.race-live-checkpoint { width:28px; height:28px; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; background:#F79142; color:#172033; font-size:11px; font-weight:900; box-shadow:0 2px 8px #17203366; }
@media (max-width:700px){.live-map-view > .race-live-map{height:calc(100dvh - 166px)}.race-map-toolbar{height:auto; min-height:76px; align-items:flex-start}.race-map-toolbar>div:last-child{display:grid;grid-template-columns:repeat(3,1fr)}.race-map-toolbar button{padding:0 6px;font-size:11px}.race-map-layout{height:calc(100% - 76px);grid-template-columns:minmax(0,1fr) 150px}.race-map-layout aside{padding:7px}.race-live-rider-marker span{max-width:90px}.control-tabs button{font-size:12px;padding:0 6px}}
.checkpoint-manager-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.checkpoint-manager-heading button { flex: 0 0 auto; }
.checkpoint-manager form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; padding: 14px; border-radius: 13px; background: #f4f7fb; }
.checkpoint-manager form label { display: grid; gap: 5px; margin: 0; font-size: 11px; color: #687086; font-weight: 900; text-transform: uppercase; }
.checkpoint-manager form .checkpoint-number-field { grid-column: 1; }
.checkpoint-manager form .checkpoint-number-field input { width: 68px; }
.checkpoint-manager form .checkpoint-name-field { grid-column: 2 / -1; }
.checkpoint-manager form .wide { grid-column: span 2; }
.checkpoint-manager form textarea { min-height: 70px; resize: vertical; padding: 11px; border: 1px solid #bfc8d8; border-radius: 10px; font: inherit; text-transform: none; }
.checkpoint-manager form button { align-self: end; margin: 0; }
.checkpoint-manager .location-button { grid-column: span 2; }
.checkpoint-manager .save-checkpoint { grid-column: span 2; }
.checkpoint-editor-list { display: grid; gap: 7px; margin-top: 14px; }
.checkpoint-editor-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #d7deea; border-radius: 11px; }
.checkpoint-editor-list strong,.checkpoint-editor-list small { display: block; }
.checkpoint-editor-list small { margin-top: 4px; color: #687086; }
.checkpoint-editor-list button { min-height: 38px; }
.checkpoint-editor-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 760px) { .checkpoint-manager form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .checkpoint-manager-heading { flex-direction: column; } .checkpoint-manager-heading button { width: 100%; } .checkpoint-manager form { grid-template-columns: 72px minmax(0,1fr); } .checkpoint-manager form .wide,.checkpoint-manager .location-button,.checkpoint-manager .save-checkpoint { grid-column: 1 / -1; } .checkpoint-editor-list article { align-items: flex-start; flex-direction: column; } .checkpoint-editor-actions { align-self: stretch; } .checkpoint-editor-actions button { flex: 1; } }

.roster-expand-controls { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin:0; }
.roster-expand-controls button { min-height:36px; padding:0 12px; font-size:12px; }
.rider-card-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:7px; min-width:0; padding:9px 10px; cursor:pointer; list-style:none; background:#f4f7fb; }
.rider-message-toggle { width:38px; min-width:38px; height:38px; min-height:38px; padding:0; font-size:17px; }
.rider-remove-button { width:38px; min-width:38px; height:38px; min-height:38px; display:grid; place-items:center; padding:0; }
.rider-remove-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rider-message-form { grid-template-columns:minmax(0,1fr) auto; gap:7px; margin:8px 10px; padding:9px; border-radius:10px; background:#eef3f8; }
.rider-message-form[hidden] { display:none; }
.rider-message-form label { display:grid; gap:4px; margin:0; font-size:11px; }
.rider-message-form input { min-width:0; padding:9px; }
.rider-message-form button { align-self:end; min-height:40px; margin:0; }
.rider-message-form p { grid-column:1/-1; margin:0; }
.rider-card-summary::-webkit-details-marker { display: none; }
.has-pending-submission > .rider-card-summary { background: #fff7cf; }
.rider-card-summary .roster-name > strong { font-size: 16px; }
.roster-name .rider-nickname { font-weight:600; }
.roster-name .rider-actual-name { font-weight:500; opacity:.72; }
.rider-card-toggle,.activity-toggle { width:38px; min-width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--tc-button-color,#4f75a3); color:#fff; box-shadow:0 2px 5px #17203322; }
.rider-card-toggle svg,.activity-toggle svg { grid-area:1/1; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rider-details-hide,details.roster-card[open] .rider-details-show { display:none; }
details.roster-card[open] .rider-details-hide,.activity-dropdown[open] .rider-details-hide { display:block; }
.activity-dropdown[open] .rider-details-show { display:none; }
.rider-card-body { border-top: 1px solid #dfe4ee; }
.rider-card-body .roster-row { grid-template-columns: repeat(4,minmax(0,1fr)); width:100%; min-width:0; border-bottom: 1px solid #dfe4ee; background: #fff; }
.rider-card-body .roster-row > div { min-width:0; overflow-wrap:anywhere; }
.rider-card-body .control-actions { grid-template-columns:minmax(0,1fr) auto; min-width:0; }
.rider-card-body .control-actions label { grid-column:1/-1; min-width:0; padding:0; }
.rider-card-body .control-actions select { width:100%; max-width:100%; }
.rider-card-body .control-actions button[data-action="unlock"] { width:100%; }
.rider-card-body .control-actions button[data-action="complete"] { width:100%; }
.rider-card-body .state-breakdown,.rider-card-body .submission-review,.rider-card-body .control-actions,.rider-card-body .reset-actions { max-width:calc(100% - 20px); }
.has-pending-submission .rider-card-body .roster-row { background: #fffdf5; }
@media (max-width: 800px) { .race-control-shell .roster-list{grid-template-columns:1fr}.roster-expand-controls { margin:0; justify-content:stretch; } .roster-expand-controls button { flex:1; } .rider-card-body .roster-row { grid-template-columns:1fr 1fr; } }
@media (max-width: 430px) { .rider-card-summary { grid-template-columns:42px minmax(0,1fr) repeat(3,34px); gap:4px; padding:8px 7px; } .rider-message-toggle,.rider-remove-button { width:34px; min-width:34px; height:34px; min-height:34px; } .rider-card-toggle { width:30px; } .rider-card-summary .roster-name > strong { font-size:14px; } }

.roster-group-actions { display:grid; grid-template-columns:auto auto minmax(190px,1fr) auto auto; align-items:end; gap:8px; margin:-44px 0 10px 170px; padding:8px; border:1px solid rgba(255,255,255,.72); border-radius:12px; background:rgba(255,255,255,.24); }
.roster-group-actions > strong { align-self:center; white-space:nowrap; }
.roster-group-actions label { display:grid; gap:3px; margin:0; color:#33435a; font-size:10px; text-transform:uppercase; }
.roster-group-actions select { min-width:0; height:40px; padding:6px 9px; }
.roster-group-actions button { min-height:40px; padding:0 11px; }
.roster-group-actions p { grid-column:1/-1; margin:0; padding:6px 8px; }
@media(max-width:900px){.roster-group-actions{grid-template-columns:1fr 1fr;margin:8px 0 10px}.roster-group-actions>strong,.roster-group-actions label{grid-column:1/-1}.roster-group-actions button{width:100%}}

@media (max-width: 520px) {
  .ride-lock-setup { align-items: stretch; flex-direction: column; }
}

.route-complete {
  padding: 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #eef2ff, #fff7cf);
  text-align: center;
}

.route-complete > span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #2457e6;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.route-complete h2 { margin-bottom: 7px; }
.route-complete p { color: #687086; }

.reset-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 2px 14px;
  padding-top: 11px;
  border-top: 1px dashed #cbd2df;
}

.reset-actions > span {
  margin-right: auto;
  color: #687086;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.reset-actions button { min-height: 38px; padding: 0 12px; }
.danger-button { background: #a22121; }

@media (max-width: 620px) {
  .reset-actions { align-items: stretch; flex-direction: column; }
  .reset-actions > span { margin: 0 0 3px; }
}

.auth-switch {
  width: 100%;
  margin-top: 12px;
}

.registration-card { margin: 24px 0; }

.invite-manager {
  display: grid;
  grid-template-columns: 1fr minmax(260px, .8fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 16px;
  border-top: 6px solid #ffd84a;
}

.invite-manager form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 0;
}

.invite-manager form button { margin: 0; }

@media (max-width: 680px) {
  .invite-manager { grid-template-columns: 1fr; }
  .invite-manager form { grid-template-columns: 1fr; }
}

.rider-announcement { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom: 16px; padding: 17px 20px; border: 2px solid #2457e6; border-radius: 16px; background: #eaf0ff; color: #172033; box-shadow: 0 8px 22px #17203316; }
.rider-announcement p { margin: 0 0 6px; color: #2457e6; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.rider-announcement strong { font-size: clamp(18px, 4vw, 24px); line-height: 1.3; }
.dismiss-rider-announcement { flex:0 0 42px; width:42px; height:42px; min-height:42px; padding:0; display:grid; place-items:center; border:1px solid #ffffffcc; border-radius:12px; background:#f5f7fae8; color:#172033; font-size:25px; line-height:1; box-shadow:none; }
.dismiss-rider-announcement:focus-visible { outline:3px solid #2457e6; outline-offset:2px; }
.rider-announcement.priority-important,.current-announcement.priority-important { border-color: #d49b00; background: #fff7cf; }
.rider-announcement.priority-important p { color: #8a6500; }
.rider-announcement.priority-safety,.current-announcement.priority-safety { border-color: #b52222; background: #fff0f0; }
.rider-announcement.priority-safety p { color: #a22121; }
.announcement-manager { display: grid; grid-template-columns: 1fr minmax(320px, 1fr); gap: 22px; align-items: start; margin-bottom: 16px; border-top: 6px solid #2457e6; }
.announcement-manager form { margin: 0; }
.announcement-manager textarea { min-height: 105px; resize: vertical; padding: 13px 14px; border: 1px solid #bfc8d8; border-radius: 10px; font: inherit; }
.announcement-manager form > div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.announcement-manager form button { margin: 0; }
.current-announcement { display: grid; gap: 5px; margin-top: 12px; padding: 12px; border: 1px solid #2457e6; border-radius: 11px; background: #eaf0ff; }
.current-announcement small { color: #687086; font-weight: 800; text-transform: uppercase; }
@media (max-width: 720px) { .announcement-manager { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .announcement-manager form > div { grid-template-columns: 1fr; } }

.control-summary { flex-wrap:wrap; padding-bottom:10px!important; }
.event-controls { flex:1 0 100%; display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:8px; width:100%; padding-top:7px; border-top:1px solid #dfe4ee; }
.event-controls > span { color: #687086; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.event-controls > strong { padding: 6px 10px; border-radius: 999px; background: #e7edff; color: #2144aa; text-transform: uppercase; }
.event-controls > div { display: flex; justify-content: flex-end; gap: 7px; }
.event-controls button { min-height: 38px; padding: 0 12px; }
.event-controls .pause-button { background: #c98a00; }
.event-state-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 17px; border-radius: 14px; background: #fff7cf; border: 1px solid #e9c955; }
.event-state-banner strong { text-transform: uppercase; }
.event-state-banner.state-paused { background: #fff0df; border-color: #e4aa62; }
.event-state-banner.state-finished { background: #eef2ff; border-color: #b9c7ef; }
body.rider-theme-dark .event-state-banner { background:#1A1928; border-color:#595672; color:#F1F0F7; box-shadow:0 8px 24px #0007; }
body.rider-theme-dark .event-state-banner.state-paused { background:#2A2118; border-color:#765A36; color:#FFE8C4; }
body.rider-theme-dark .event-state-banner.state-finished { background:#171E30; border-color:#465A82; color:#E4EBFF; }
body.rider-theme-dark .rider-popup.notice,body.rider-theme-dark .notice { background:#191D2D; border-color:#465A82; color:#E4EBFF; }
body.rider-theme-dark .rider-popup.success,body.rider-theme-dark .success { background:#11271F; border-color:#376B55; color:#C9F3DF; }
body.rider-theme-dark .rider-popup.error,body.rider-theme-dark .error { background:#30191F; border-color:#814452; color:#FFD9E0; }

/* Keep map checkpoint popups readable and prevent global button sizing from covering their text. */
body:not(.race-control-active) .maplibregl-popup-content { min-width:150px; padding:14px 36px 14px 14px; border:2px solid var(--tc-accent,#120F23); border-radius:12px; background:#fff7cf; color:#171426; font-size:14px; font-weight:900; line-height:1.3; box-shadow:0 8px 24px #17142655; }
body:not(.race-control-active) .maplibregl-popup-close-button { position:absolute!important; top:5px!important; right:5px!important; width:26px!important; min-width:26px!important; height:26px!important; min-height:26px!important; padding:0!important; border:0!important; border-radius:7px!important; display:grid!important; place-items:center!important; background:var(--tc-accent,#120F23)!important; color:#fff!important; font-size:18px!important; line-height:1!important; }
body.rider-theme-dark:not(.race-control-active) .maplibregl-popup-content { background:#26233b; color:#fff; border-color:#fff; }
.gameplay-locked button,.gameplay-locked select { pointer-events: none; opacity: .45; }
.gameplay-locked .navigation-buttons { pointer-events: none; opacity: .45; }
@media (max-width: 700px) { .event-controls { grid-template-columns: 1fr auto; } .event-controls > div { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } }

/* Compact Ride Control layout. Rider Dashboard spacing is unchanged. */
.race-control-shell { width: min(100% - 20px, 1180px); padding-top: 14px; }
.race-control-shell .topbar { margin-bottom: 10px; }
.race-control-shell .topbar h1 { margin-bottom: 0; }
.race-control-shell .panel { padding: 15px 18px; border-radius: 15px; }
.race-control-shell .control-summary,.race-control-shell .invite-manager,.race-control-shell .announcement-manager { margin-bottom: 10px; }
.race-control-shell .control-summary { gap:7px 12px; }
.race-control-shell .summary-stat { padding: 8px 12px; }
.race-control-shell .summary-stat strong { font-size: 23px; }
.race-control-shell .invite-manager { grid-template-columns: 1fr minmax(250px,.65fr); gap: 14px; }
.race-control-shell .announcement-manager { grid-template-columns:minmax(320px,1.15fr) minmax(240px,.85fr); gap:10px; align-items:stretch; }
.race-control-shell .announcement-manager h2 { margin-bottom:5px; }
.race-control-shell .announcement-manager form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.race-control-shell .announcement-manager textarea { min-height:48px; height:48px; padding:9px 10px; }
.race-control-shell .announcement-manager form > div { grid-template-columns:auto auto auto; align-items:stretch; gap:5px; }
.race-control-shell .announcement-manager form select { max-width:112px; padding:7px; }
.race-control-shell .announcement-manager form button { min-height:40px; padding:0 10px; }
.race-control-shell .current-announcement { height:100%; min-height:82px; margin:0; align-content:center; }
.race-control-shell .racer-roster > .label { margin-top: 6px; }
.race-control-shell .racer-roster > h2 { margin-bottom: 7px; }
.race-control-shell .roster-list { margin-top: 7px; }
.race-control-shell .roster-row { padding: 10px 2px; gap: 10px; }
.race-control-shell .state-breakdown { margin-bottom: 7px; gap: 7px; }
.race-control-shell .state-breakdown > div { padding: 8px 10px; }
.race-control-shell .state-breakdown strong { margin-bottom: 2px; }
.race-control-shell .control-actions { gap: 6px; padding: 8px 2px 10px; margin-bottom: 8px; }
.race-control-shell .reset-actions { margin-bottom: 8px; padding-top: 7px; }
.activity-dropdown { margin-top: 10px; }
.activity-dropdown summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.activity-dropdown summary::-webkit-details-marker { display: none; }
.activity-dropdown summary small,.activity-dropdown summary strong { display: block; }
.activity-dropdown summary small { margin-bottom: 4px; color: #2457e6; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.activity-dropdown summary strong { font-size: 18px; }
.activity-toggle { flex:0 0 38px; }
.activity-dropdown .activity-list { max-height: 360px; overflow-y: auto; }
.activity-empty { margin: 14px 0 0; }

@media (min-width: 700px) and (max-width: 900px) {
  .race-control-shell .control-actions { grid-template-columns: minmax(125px,1fr) auto minmax(145px,1fr) auto auto; }
  .race-control-shell .control-actions label { grid-column: auto; padding-left: 5px; }
}

@media (max-width: 699px) {
  .race-control-shell .invite-manager,.race-control-shell .announcement-manager { grid-template-columns: 1fr; }
}

.inventory-dropdown summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.inventory-dropdown summary::-webkit-details-marker { display: none; }
.inventory-dropdown summary small,.inventory-dropdown summary strong { display: block; }
.inventory-dropdown summary small { margin-bottom: 4px; color: #2457e6; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.inventory-toggle { color: #2457e6; font-size: 12px; font-weight: 900; }
.inventory-dropdown[open] .inventory-toggle { font-size: 0; }
.inventory-dropdown[open] .inventory-toggle::after { content: 'Hide items'; font-size: 12px; }
.inventory-body { margin-top: 14px; padding-top: 2px; border-top: 1px solid #dfe4ee; }
.inventory-body > .label,.inventory-body > h2 { display: none; }

@media (max-width: 640px) {
  .shell:not(.race-control-shell) { width: min(100% - 16px, 960px); padding: 9px 0 24px; }
  .shell:not(.race-control-shell) .topbar { margin-bottom: 8px; }
  .shell:not(.race-control-shell) .topbar .eyebrow { margin-bottom: 3px; font-size: 10px; }
  .shell:not(.race-control-shell) .topbar h1 { margin: 0; font-size: 24px; }
  .shell:not(.race-control-shell) .topbar button { min-height: 40px; padding: 0 13px; }
  .shell:not(.race-control-shell) .grid { gap: 8px; }
  .shell:not(.race-control-shell) .panel { padding: 13px 14px; border-radius: 14px; }
  .shell:not(.race-control-shell) .racer { grid-template-columns: auto 1fr auto; gap: 10px; }
  .shell:not(.race-control-shell) .avatar { width: 46px; height: 46px; border-radius: 13px; font-size: 20px; }
  .shell:not(.race-control-shell) .racer .label { margin: 0 0 3px; font-size: 10px; }
  .shell:not(.race-control-shell) .racer h2 { margin-bottom: 2px; font-size: 19px; }
  .shell:not(.race-control-shell) .racer .muted { margin: 0; font-size: 12px; }
  .shell:not(.race-control-shell) .coin { grid-column: auto; min-width: 62px; padding: 7px; }
  .shell:not(.race-control-shell) .coin span { font-size: 9px; }
  .shell:not(.race-control-shell) .coin strong { font-size: 21px; }
  .shell:not(.race-control-shell) .ride-lock-setup { gap: 7px; padding-top: 8px; }
  .shell:not(.race-control-shell) .ride-lock-setup button { min-height: 40px; }
  .shell:not(.race-control-shell) .checkpoint,.shell:not(.race-control-shell) .equipped { border-top-width: 4px; }
  .shell:not(.race-control-shell) .checkpoint .label,.shell:not(.race-control-shell) .equipped .label { margin-top: 4px; }
  .shell:not(.race-control-shell) .checkpoint h2,.shell:not(.race-control-shell) .equipped h2 { margin-bottom: 7px; font-size: 20px; }
  .shell:not(.race-control-shell) .checkpoint .muted,.shell:not(.race-control-shell) .equipped .muted { margin-bottom: 8px; font-size: 13px; }
  .shell:not(.race-control-shell) .inventory { grid-column: auto; }
  .shell:not(.race-control-shell) .rider-announcement,.shell:not(.race-control-shell) .event-state-banner { margin-bottom: 8px; padding: 11px 13px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .shell:not(.race-control-shell) .grid { grid-template-columns: 1.25fr .75fr; }
  .shell:not(.race-control-shell) .racer,.shell:not(.race-control-shell) .inventory { grid-column: 1 / -1; }
}

/* Phone interaction and rider profile fixes */
body.map-dashboard-active #maplibre-poc {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
}
body.map-dashboard-active .cockpit {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.rider-settings,
.rider-profile,
.rider-settings *,
.rider-profile * { pointer-events: auto !important; }
.avatar-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  min-height: 0;
  background: transparent;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: none;
}
.avatar-button:focus-visible { outline: 4px solid #e40078; outline-offset: 3px; }
.rider-profile { width: min(92vw,520px); max-height: min(88dvh,760px); overflow: auto; }
.display-name-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin: 12px 0 18px; }
.display-name-form label { display: grid; gap: 5px; font-weight: 800; }
.display-name-form input { width: 100%; min-width: 0; }
.display-name-form p { grid-column: 1 / -1; margin: 0; }
#profile-avatar-options { display: grid; gap: 14px; }
#profile-avatar-options .upload-avatar { display: flex; align-items: center; justify-content: center; min-height: 46px; font-weight: 900; cursor: pointer; }
#profile-avatar-options .avatar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; max-height: 46dvh; overflow: auto; padding: 2px; }
#profile-avatar-options .avatar-grid button { min-width: 0; aspect-ratio: 1; border-radius: 16px; padding: 4px; }
#profile-avatar-options .avatar-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.rider-settings #settings-map-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 14px; }
.rider-settings #settings-map-controls .map-icon-grid,
.rider-settings #settings-map-controls .map-color-grid { position: static; width: 100%; max-width: 100%; max-height: 42dvh; overflow: auto; z-index: auto; }
@media (max-width: 480px) {
  .display-name-form { grid-template-columns: 1fr; }
  .display-name-form p { grid-column: auto; }
}

/* Consistent rider identity treatment in portrait and landscape */
.cockpit-top .rider-id {
  gap: 9px;
  padding: 6px 11px 6px 6px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.cockpit-top .avatar-button,
.cockpit-top .rider-id .avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 15px;
}
.cockpit-top .rider-id .avatar {
  border: 2px solid #fff;
  object-fit: cover;
}
.cockpit-top .rider-id h1 { font-size: clamp(17px,3.5vw,23px); }
@media (orientation: landscape) {
  .cockpit-grid .racer .inventory-strip { grid-template-columns:minmax(0,1fr) 98px; }
  .cockpit-grid .racer .inventory-slots { grid-template-columns:repeat(2,48px); grid-template-rows:48px; }
  .cockpit-top .avatar-button,
  .cockpit-top .rider-id .avatar {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 15px;
  }
}

/* Definitive one-line coin readout in the Rider inventory cell */
.cockpit-grid .racer .inventory-strip > .coin {
  width:max-content!important;
  min-width:0!important;
  display:inline-flex!important;
  flex-flow:row nowrap!important;
  align-items:baseline!important;
  align-self:end!important;
  justify-content:flex-start!important;
  gap:4px!important;
  padding:0!important;
  white-space:nowrap;
}
.cockpit-grid .racer .inventory-strip > .coin > span,
.cockpit-grid .racer .inventory-strip > .coin > strong { display:inline!important; margin:0!important; line-height:1!important; }

/* Orientation-specific cockpit layout */
body.map-dashboard-active .cockpit { grid-template-rows: auto minmax(0,1fr); }
.cockpit > .cockpit-top { grid-row: 1; }
.cockpit > .cockpit-grid { grid-row: 2; min-height: 0; }
.cockpit > #rider-notice { position: fixed; z-index: 12; pointer-events: auto; }
.cockpit > #rider-notice:empty { display: none; }
.cockpit-top { display: flex; justify-content: space-between; align-items: center; }
.cockpit-top .rider-id { margin-right: auto; }
.cockpit-top .rider-id {
  min-width: 0;
  max-width: calc(100% - 150px);
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow: hidden;
}
.cockpit-top .rider-id .avatar-button {
  display: block;
  width: 54px!important;
  min-width: 54px!important;
  max-width: 54px!important;
  height: 54px!important;
  min-height: 54px!important;
  padding: 0!important;
  flex: 0 0 54px!important;
  overflow: hidden;
}
.cockpit-top .rider-id .avatar { display: block; margin: 0; }
.cockpit-top .rider-id h1 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(16px,3.15vw,21px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (orientation: portrait) {
  body.map-dashboard-active .cockpit { padding: 8px; }
  .cockpit-top { width: 100%; }
  .cockpit-top .rider-id { align-self: flex-start; margin-left: 0; }
  .cockpit-grid .checkpoint { top: 8px; left: 0; right: auto; width: min(68%,430px); }
  .cockpit-grid .racer { top: auto; right: 0; bottom: 112px; left: 0; width: 100%; }
  .cockpit .map-poc-toolbar { top: 92px; right: 8px; }
  .cockpit .map-directions { right: 8px; bottom: 8px; left: 8px; width: auto; }
  .automatic-arrival { right: auto; bottom: 174px; left: 8px; }
  .maplibregl-ctrl-top-right { top: 86px; right: 4px; }
  .cockpit > #rider-notice { top: 88px; right: 8px; left: 8px; }
}

@media (orientation: landscape) {
  body.map-dashboard-active .cockpit { padding: 6px; }
  .cockpit-top { width: min(48%,520px); }
  .cockpit-grid .checkpoint { top: 8px; right: auto; left: 0; width: min(43%,460px); }
  .cockpit-grid .racer { top: auto; right: auto; bottom: 0; left: 0; width: min(47%,520px); }
  .cockpit .map-poc-toolbar { top: 8px; right: 8px; }
  .cockpit .map-directions { right: 8px; bottom: 8px; left: auto; width: min(51%,620px); }
  .automatic-arrival { right: 8px; bottom: 68px; left: auto; }
  .maplibregl-ctrl-top-right { top: 4px; right: 4px; }
  .cockpit > #rider-notice { top: 8px; right: 25%; left: 25%; }
}

/* Stable profile/settings dialogs and compact navigation sprite picker */
.rider-settings:not(.rider-profile) {
  width: min(92vw,420px);
  height: 220px;
  max-height: 76dvh;
  overflow: auto;
}
.rider-profile {
  width: min(92vw,520px);
  height: min(88dvh,760px);
  max-height: min(88dvh,760px);
  overflow: hidden;
  display: none;
  grid-template-rows: auto auto minmax(0,1fr);
}
.rider-profile[open] { display: grid; }
#profile-avatar-options { min-height: 0; overflow-y: auto; align-content: start; padding-right: 3px; }

/* Compact, touch-safe Rider Profile avatar chooser */
#profile-avatar-options .avatar-grid {
  display: grid;
  grid-template-columns: repeat(5,52px);
  justify-content: center;
  align-content: start;
  gap: 6px;
  width: 100%;
  max-height: 190px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
}
#profile-avatar-options .avatar-grid button {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: auto;
  padding: 3px !important;
  overflow: hidden;
  border-radius: 11px;
  touch-action: manipulation;
}
#profile-avatar-options .avatar-grid img {
  display: block;
  width: 46px !important;
  height: 46px !important;
  max-width: 46px;
  max-height: 46px;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
}
#profile-avatar-options .avatar-grid button.selected {
  outline: 3px solid #F79142;
  outline-offset: 1px;
  background: #ffffff45;
}
@media (max-width: 370px) {
  #profile-avatar-options .avatar-grid { grid-template-columns: repeat(4,50px); }
  #profile-avatar-options .avatar-grid button {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }
  #profile-avatar-options .avatar-grid img {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Bright translucent glass treatment for Rider Profile only */
.rider-profile {
  background: rgba(255,255,255,.36);
  color: #172033;
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 42px rgba(23,32,51,.16);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.rider-profile::backdrop {
  background: rgba(23,32,51,.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.rider-profile .display-name-form input {
  background: rgba(255,255,255,.72);
  color: #172033;
}
.profile-navigation-controls {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid #ffffff45;
  border-radius: 14px;
  background: #ffffff12;
}
.profile-navigation-controls h3,
.profile-navigation-controls p { margin: 0; }
.profile-navigation-controls p { font-size: 12px; color: #ffffffc7; }
.profile-navigation-controls .map-icon-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.profile-navigation-controls .visual-picker,
.profile-navigation-controls .map-color-control { display: contents; }
.profile-navigation-controls .map-icon-grid {
  order: 3;
  position: static;
  width: 100%;
  max-width: none;
  max-height: 190px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  margin: 0;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #ffffff38;
  border-radius: 11px;
  background: #0d1727d9;
}
.profile-navigation-controls .map-icon-grid button {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 4px;
  overflow: hidden;
  border-radius: 9px;
}
.profile-navigation-controls .map-icon-grid img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 54px;
  max-height: 54px;
  margin: auto;
  object-fit: contain;
}
.profile-navigation-controls .map-color-grid,
.profile-avatar-picker .map-color-grid {
  order: 4;
  position: static;
  max-width: 100%;
  max-height: 168px;
  overflow: auto;
}
.profile-navigation-controls .map-icon-grid[hidden],
.profile-navigation-controls .map-color-grid[hidden] { display: none!important; }
.profile-navigation-controls .map-icon-grid:not([hidden]),
.profile-navigation-controls .map-color-grid:not([hidden]) { display: grid!important; }
.cockpit-grid .checkpoint,
.cockpit-grid .racer { z-index: 6; }
.cockpit-grid .checkpoint { min-height: 58px; }
.cockpit-grid .checkpoint .pill { display: inline-block; }
.cockpit-grid .racer { background: #ffffff52!important; border: 1px solid #ffffff73!important; }
.inventory-strip::before { content: 'Items'; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 420px) {
  .profile-navigation-controls .map-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 164px; }
  .profile-navigation-controls .map-icon-grid img { max-width: 46px; max-height: 46px; }
}

/* Bottom cockpit command and inventory cells */
.cockpit,
.cockpit * { text-shadow: none!important; }
.cockpit-grid .checkpoint-host { display: contents!important; }
.cockpit .map-directions {
  display: grid;
  gap: 7px;
  overflow: visible;
  padding: 9px!important;
  border: 1px solid #ffffff9c;
  border-radius: 14px;
  background: #ffffff66!important;
  box-shadow: none!important;
}
.command-static { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; }
.command-static .checkpoint-title-row { grid-column: 1 / -1; margin: 0; align-items: center; }
.command-static .checkpoint-title-row .label { margin: 0 0 2px; font-size: 10px; }
.command-static .checkpoint-title-row h2 { font-size: clamp(15px,3.2vw,20px); }
.command-static .ride-button { display: none; }
.command-static .checkpoint-title-row .label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.command-static .checkpoint-title-row .pill { padding: 0; border: 0; background: transparent; font-size: inherit; }
.checkpoint-label-text { color: #111; }
.command-static .checkpoint-title-row .pill.ready { color: #137333; }
.command-static .checkpoint-title-row .pill.not-ready { color: #c62828; }
.checkpoint-metrics { margin-left: auto; color: #172033; font-weight: 900; white-space: nowrap; }
.route-summary .go-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.route-summary .go-button.awaiting-approval {
  background: #737985!important;
  color: #f4f5f7!important;
  border-color: #9298a2!important;
  opacity: .76;
  cursor: not-allowed;
  filter: grayscale(1);
}
.route-summary .go-button.awaiting-approval span { color: inherit!important; }
.awaiting-race-control { font-weight: 800; }
.route-summary .go-button .go-arrow { width: 16px; height: 16px; display: inline-grid; place-items: center; margin: 0; color: #fff; font-size: 17px; line-height: 16px; transform: rotate(-45deg); transform-origin: 50% 50%; }
.route-summary .go-button .go-label { margin: 0; color: inherit; line-height: 1; }
#route-dynamic { min-width: 0; }
#route-dynamic .notice,
#route-dynamic .error { margin: 0; }
.cockpit-grid .racer {
  top: auto!important;
  left: auto!important;
  display: block;
  padding: 8px!important;
  border: 1px solid #ffffff9c!important;
  border-radius: 14px;
  background: #ffffff66!important;
  box-shadow: none!important;
  height: 116px;
}
.cockpit .map-directions { height: 116px; align-content: start; }
.cockpit-grid .racer > .ride-button { display: none; }
.cockpit-grid .racer .inventory-strip { height: 100%; display: grid; grid-template-columns: minmax(48px,1fr) auto; justify-content: stretch; align-items: center; gap: 7px; }
.cockpit-grid .racer .inventory-strip::before { display: none; }
.cockpit-grid .racer .rider-cell-left { height:100%; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
.cockpit-grid .racer .inventory-slots { display: grid; grid-template-columns: 48px; grid-template-rows:repeat(2,48px); align-content:center; justify-content: end; gap: 2px; }
.cockpit-grid .racer .challenge-response-toggle { width:76px; min-width:76px; min-height:44px; padding:4px 7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:11px; line-height:1.05; text-align:center; }
.cockpit-grid .racer .challenge-response-toggle span { display:block; }
.challenge-response-flyout { position:absolute; right:0; bottom:calc(100% + 6px); left:0; z-index:30; padding:10px; border:1px solid #ffffffb8; border-radius:12px; background:rgba(255,255,255,.9); color:#172033; text-shadow:none; box-shadow:0 8px 24px #17203338; backdrop-filter:blur(12px); }
.challenge-response-flyout form { margin:0; display:grid; gap:5px; }
.challenge-response-flyout label { margin:0; font-size:12px; font-weight:900; }
.challenge-response-flyout form > div { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:6px; }
.challenge-response-flyout input { width:100%; min-width:0; height:46px; }
.challenge-response-flyout .challenge-send { width:46px; min-width:46px; height:46px; min-height:46px; padding:0; font-size:22px; }
.challenge-response-flyout .challenge-submit-result,.challenge-response-flyout .challenge-review-note { margin:2px 0 0; padding:0; font-size:12px; }
.challenge-rejection-alert { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; padding:10px 12px; border:2px solid #bd3f3f; border-radius:12px; background:#fff0f0; color:#7d1f1f; }
.challenge-rejection-alert p,.challenge-rejection-alert strong,.challenge-rejection-alert span { display:block; margin:0; }
.challenge-rejection-alert p { font-size:10px; font-weight:900; text-transform:uppercase; }
.challenge-rejection-alert span { margin-top:3px; font-size:12px; }
.challenge-rejection-alert button { width:36px; min-width:36px; height:36px; min-height:36px; padding:0; background:#bd3f3f; }
.cockpit-grid .racer .coin { min-width: 48px; padding: 4px 5px; text-align: left; background: transparent; }
.cockpit-grid .racer .coin span,.cockpit-grid .racer .coin strong { text-align: left; }
.cockpit-grid .racer .coin strong { font-size: 16px; }
.cockpit-grid .racer .inventory-tile { width: 38px; height: 38px; min-height: 38px; font-size: 19px; }
.cockpit-grid .racer .inventory-placeholder { display: block; border: 1px solid #17203388; border-radius: 8px; background: #ffffff38; }
.topbar #open-settings { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.maplibregl-ctrl-top-right { z-index: 8; }
.maplibregl-ctrl-compass.north-up-active { background-color:#dbe8f7!important; box-shadow:inset 0 0 0 2px #4779ad!important; }
.automatic-arrival { display: none!important; }
.topbar .logout-icon {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0!important;
  font-size: 21px;
  line-height: 1;
}
.topbar .logout-icon span { display: flex; align-items: center; justify-content: center; }
.signout-art {
  position: relative;
  display:block!important;
  width: 30px;
  height: 28px;
  margin: auto;
}
.signout-door {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 3px;
  background: transparent;
  box-shadow:none;
  transform:none;
}
.signout-door::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
}
.signout-arrow {
  position: absolute;
  top: 12px;
  right: 2px;
  width: 15px;
  height: 4px;
  border-radius: 4px 0 0 4px;
  background: #fff;
}
.signout-arrow::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 8px solid #fff;
}
.topbar .logout-icon:hover .signout-arrow,
.topbar .logout-icon:focus-visible .signout-arrow { transform: translateX(2px); }

@media (orientation: portrait) {
  .cockpit .map-directions {
    right: auto!important;
    bottom: max(6px,env(safe-area-inset-bottom))!important;
    left: 6px!important;
    width: calc(62% - 9px)!important;
    max-height: min(47dvh,390px);
  }
  .cockpit-grid .racer {
    right: 6px!important;
    bottom: max(6px,env(safe-area-inset-bottom))!important;
    width: calc(38% - 9px)!important;
  }
  .route-summary { grid-template-columns: 1fr 1fr; gap: 5px; }
  .route-summary .go-button,
  .route-summary #toggle-route-steps { justify-self: stretch; min-height: 36px; padding: 0 8px; }
  .route-summary #toggle-route-steps { grid-column: auto; }
  #route-steps { max-height: 18dvh; }
  .maplibregl-ctrl-top-right { top: 148px!important; right: 6px!important; }
  .automatic-arrival { bottom: 6px; left: 6px; }
}

@media (orientation: landscape) {
  .cockpit .map-directions {
    right: auto!important;
    bottom: max(6px,env(safe-area-inset-bottom))!important;
    left: 6px!important;
    width: min(54%,620px)!important;
    max-height: min(62dvh,360px);
  }
  .cockpit-grid .racer {
    right: 6px!important;
    bottom: max(6px,env(safe-area-inset-bottom))!important;
    width: min(38%,360px)!important;
  }
  .maplibregl-ctrl-top-right { top: 92px!important; right: 6px!important; }
}

/* Anchor both bottom information cells to the same viewport baseline */
.cockpit-grid .racer {
  position: fixed!important;
}

/* Full Rider menu */
.rider-settings.rider-menu {
  width: min(92vw,520px);
  height:min(94dvh,820px);
  max-height:min(94dvh,820px);
  padding: 14px;
  overflow: hidden;
  display: none;
  grid-template-rows: auto minmax(0,1fr);
  background: rgba(255,255,255,.36);
  color: #172033;
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 14px 42px rgba(23,32,51,.16);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.rider-settings.rider-menu::backdrop { background: rgba(23,32,51,.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.rider-settings.rider-menu[open] { display: grid; }
.settings-sections { min-height: 0; overflow-y: auto; display: grid; gap: 8px; padding: 4px 2px 2px; }
.settings-sections details { border: 1px solid #17203325; border-radius: 12px; background: rgba(255,255,255,.5); }
.settings-sections summary { padding: 12px; cursor: pointer; font-weight: 900; }
.settings-options { display: grid; gap: 9px; padding: 0 12px 12px; }
.settings-options label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; }
.settings-options input[type='checkbox'] { width: 20px; height: 20px; flex: 0 0 20px; order: 2; }
.settings-options input[type='range'] { width: min(190px,48vw); padding: 0; }
.settings-options select { padding: 8px 10px; }
.settings-options p { margin: 0; font-size: 13px; line-height: 1.45; }
.settings-options.diagnostics p { display: flex; justify-content: space-between; gap: 12px; }
.settings-theme { width: 100%; }
.reduced-motion * { animation-duration: .001ms!important; transition-duration: .001ms!important; }
.large-rider-text .cockpit { font-size: 112%; }
.high-visibility .cockpit .map-directions,.high-visibility .cockpit-grid .racer { background: rgba(255,255,255,.9)!important; border-color: #111!important; }
.cockpit .route-summary { grid-template-columns: minmax(0,1fr) 52px; gap: 6px; }
.cockpit .route-summary #toggle-route-steps { grid-column: 1; min-height: 42px; width: 100%; }
.cockpit .route-summary .go-button { grid-column: 2; width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; justify-self: end; }
.cockpit #route-steps { position: absolute; right: 0; bottom: calc(100% + 6px); left: 0; z-index: 20; max-height: min(46dvh,340px); margin: 0; padding: 12px 12px 12px 30px; overflow-y: auto; border: 1px solid #ffffffb8; border-radius: 12px; background: rgba(255,255,255,.82); color: #172033; backdrop-filter: blur(12px); }
@media (max-width: 380px) {
  .checkpoint-metrics { font-size: 9px; }
  .command-static .checkpoint-title-row .label { gap: 3px; }
}

/* Compact collapsible Rider Profile pickers */
.rider-profile .display-name-form { grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin: 8px 0 10px; }
.rider-profile .display-name-form p { grid-column: 1 / -1; }
.rider-profile .display-name-form button { min-width: 76px; padding: 0 12px; }
.rider-profile .display-name-form input[readonly] { color: #4f5868; cursor: default; }
#profile-avatar-options { gap: 8px; }
.profile-avatar-picker,.profile-navigation-controls { padding: 8px; border: 1px solid #ffffff55; border-radius: 12px; background: #ffffff12; }
.profile-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-picker-heading h3,.profile-picker-heading p { margin: 0; }
.profile-picker-heading p { margin-top: 2px; font-size: 12px; color: #172033c7; }
#avatar-picker-toggle img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.avatar-picker-panel { display: grid; gap: 6px; margin-top: 6px; }
.avatar-picker-panel[hidden] { display: none!important; }
#profile-avatar-options .upload-avatar { margin: 0; min-height: 40px; }
.profile-navigation-controls { gap: 4px; }
.profile-navigation-controls p { color: #172033c7; }

/* Full-width color palette and compact inventory refinements */
.profile-navigation-controls .map-color-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(10,minmax(0,1fr));
  gap: 2px;
  padding: 5px;
  overflow: visible;
}
.profile-navigation-controls .map-color-grid button,
.profile-avatar-picker .map-color-grid button {
  width: 100%!important;
  height: auto!important;
  min-width: 0!important;
  min-height: 0!important;
  aspect-ratio: 1;
  padding: 0!important;
}
.profile-navigation-controls .map-color-grid button.selected,
.profile-avatar-picker .map-color-grid button.selected { box-shadow:inset 0 0 0 3px #172033,0 0 0 1px #fff; transform:none; }
.profile-picker-heading { justify-content: flex-start; }
.profile-picker-heading p { flex: 1; }
.cockpit-grid .racer .coin { align-self:end; display:flex; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:4px; padding:0; line-height:1; }
.cockpit-grid .racer .inventory-strip { gap:3px; }
.cockpit-grid .racer .inventory-slots { grid-template-columns:48px; grid-template-rows:repeat(2,48px); gap:2px; }
.cockpit-grid .racer .inventory-tile { width:48px; height:48px; min-height:48px; font-size:23px; }

/* Clean rider marker and explicit navigation exit */
.maplibregl-marker.map-rider-marker,.map-rider-marker { background-color:transparent!important; border:0!important; outline:0!important; box-shadow:none!important; filter:none!important; }
.map-rider-symbol { border:0!important; outline:0!important; box-shadow:none!important; filter:none!important; }
.map-rider-symbol { image-rendering:auto; }
.map-rider-marker[data-icon^='char-'] { width:46px; height:56px; }
body.map-navigation-active .map-rider-marker[data-icon^='char-'] { width:68px; height:82px; }
.character-picker-sprite,.character-rear-sprite,.character-avatar { display:block; background-repeat:no-repeat!important; background-size:contain!important; background-position:center!important; background-color:transparent!important; }
.character-rear-sprite { width:100%; height:100%; transform:rotate(var(--vehicle-lean,0deg)); transform-origin:50% 82%; transition:transform .38s ease-out; filter:drop-shadow(0 3px 3px #1119)!important; }
.character-picker-sprite { width:100%; height:100%; }
.character-toggle .character-picker-sprite { width:48px; height:48px; }
.character-grid { grid-template-columns:repeat(5,minmax(0,1fr))!important; width:min(100%,560px)!important; max-width:100%!important; box-sizing:border-box; overflow-x:hidden; }
.character-grid button { aspect-ratio:1!important; min-width:0!important; min-height:0!important; padding:2px!important; overflow:hidden; }
.character-avatar { object-fit:contain; border:0!important; }
.char-01 { --picker-atlas:url('navigation-icons/characters-v4/char-01-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-01-rear.png'); }
.char-02 { --picker-atlas:url('navigation-icons/characters-v4/char-02-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-02-rear.png'); }
.char-03 { --picker-atlas:url('navigation-icons/characters-v4/char-03-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-03-rear.png'); }
.char-04 { --picker-atlas:url('navigation-icons/characters-v4/char-04-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-04-rear.png'); }
.char-05 { --picker-atlas:url('navigation-icons/characters-v4/char-05-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-05-rear.png'); }
.char-06 { --picker-atlas:url('navigation-icons/characters-v4/char-06-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-06-rear.png'); }
.char-07 { --picker-atlas:url('navigation-icons/characters-v4/char-07-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-07-rear.png'); }
.char-08 { --picker-atlas:url('navigation-icons/characters-v4/char-08-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-08-rear.png'); }
.char-09 { --picker-atlas:url('navigation-icons/characters-v4/char-09-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-09-rear.png'); }
.char-10 { --picker-atlas:url('navigation-icons/characters-v4/char-10-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-10-rear.png'); }
.char-11 { --picker-atlas:url('navigation-icons/characters-v4/char-11-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-11-rear.png'); }
.char-12 { --picker-atlas:url('navigation-icons/characters-v4/char-12-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-12-rear.png'); }
.char-13 { --picker-atlas:url('navigation-icons/characters-v4/char-13-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-13-rear.png'); }
.char-14 { --picker-atlas:url('navigation-icons/characters-v4/char-14-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-14-rear.png'); }
.char-15 { --picker-atlas:url('navigation-icons/characters-v4/char-15-picker.png'); --rear-atlas:url('navigation-icons/characters-v4/char-15-rear.png'); }
.character-picker-sprite,.character-avatar { background-image:var(--picker-atlas)!important; }
.character-rear-sprite { background-image:var(--rear-atlas)!important; }
#open-profile,.avatar-button { background:transparent!important; box-shadow:none!important; }
.race-rider-character,.race-map-character { width:48px; height:48px; }
.race-map-character { width:42px; height:42px; }
.map-poc.navigation-active .navigation-hud > .exit-guidance {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #ffffff70;
  border-radius: 10px;
  background: #edf0f3;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}
.map-poc.navigation-active .navigation-hud > .exit-guidance span { color: inherit; font-size: 20px; line-height: 1; }
@media (max-width: 420px) {
  .map-poc.navigation-active .navigation-hud > .exit-guidance { min-width: 104px; width: auto; padding: 0 9px; font-size: 12px; }
  .map-poc.navigation-active .navigation-hud > .exit-guidance span { font-size: 20px; }
}

/* Separate avatar and navigation picker rows */
.profile-picker-heading { display:grid; grid-template-columns:48px 48px minmax(0,1fr); align-items:center; justify-content:start; gap:8px; }
.profile-picker-heading #avatar-picker-toggle { grid-column:1; grid-row:1; }
.profile-picker-heading .avatar-color-control { display:contents; }
.profile-picker-heading #avatar-color-toggle { grid-column:2; grid-row:1; }
.profile-picker-heading > p { grid-column:3; grid-row:1; }
.profile-picker-heading #avatar-color-grid { grid-column:1 / -1; grid-row:2; }

/* Dedicated active-navigation surface */
body.map-navigation-active .cockpit > :not(.cockpit-grid),
body.map-navigation-active .cockpit-grid > :not(.checkpoint-host),
body.map-navigation-active #rider-settings,
body.map-navigation-active #rider-profile { visibility:hidden!important; pointer-events:none!important; }
body.map-navigation-active .map-poc.navigation-active,
body.map-navigation-active .map-poc.navigation-active .map-poc-body,
body.map-navigation-active .map-poc.navigation-active .map-stage { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; margin:0!important; padding:0!important; overflow:hidden!important; visibility:visible!important; pointer-events:auto!important; }
body.map-navigation-active .map-poc.navigation-active { z-index:2000!important; }
body.map-navigation-active .map-poc.navigation-active #maplibre-poc { position:absolute!important; inset:0!important; z-index:0!important; width:100%!important; height:100%!important; min-height:0!important; visibility:visible!important; }
body.map-navigation-active .map-poc.navigation-active .navigation-actions { position:absolute; top:max(12px,env(safe-area-inset-top)); left:12px; right:72px; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:auto; }
body.map-navigation-active .map-poc.navigation-active .navigation-actions[hidden] { display:none!important; }
body.map-navigation-active .navigation-actions button { min-height:44px; padding:0 12px; border:1px solid #ffffffbb; border-radius:11px; background:#f1f3f5ee; color:#172033; font-size:13px; font-weight:900; box-shadow:none; }
body.map-navigation-active .navigation-actions .north-toggle.north-up-active { background:#dbe8f7ee; box-shadow:inset 0 0 0 2px #4779ad; }
body.rider-theme-dark.map-navigation-active .navigation-actions button { background:#172334ee; color:#f3f7ff; border-color:#ffffff55; }
body.rider-theme-dark.map-navigation-active .navigation-actions .north-toggle.north-up-active { background:#294b70ee; box-shadow:inset 0 0 0 2px #8dbcef; }
body.map-navigation-active .map-poc.navigation-active .navigation-hud { position:absolute!important; top:calc(max(12px,env(safe-area-inset-top)) + 54px)!important; left:12px!important; right:12px!important; width:auto!important; z-index:25!important; display:block!important; padding:11px 13px!important; }
body.map-navigation-active .map-poc.navigation-active .navigation-hud[hidden] { display:none!important; }
body.map-navigation-active .map-poc.navigation-active .navigation-status { position:absolute!important; left:12px!important; right:12px!important; bottom:max(12px,env(safe-area-inset-bottom))!important; z-index:25!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; align-items:center; }
body.map-navigation-active .map-poc.navigation-active .navigation-status[hidden] { display:none!important; }
body.map-navigation-active .navigation-status #hud-destination { grid-column:1 / -1; text-align:left; }
body.map-navigation-active .map-poc.navigation-active .follow-rider { position:absolute!important; right:12px!important; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 84px)!important; z-index:30!important; display:block!important; min-height:42px; pointer-events:auto; }
body.map-navigation-active .map-poc.navigation-active .follow-rider[hidden] { display:none!important; }
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .navigation-hud { background:#101a29f2; color:#f3f7ff; border-color:#ffffff38; }
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .navigation-hud small,
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .navigation-hud span { color:#c8d5e8; }
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .navigation-status { background:#121d2cf2; color:#f3f7ff; border-color:#ffffff38; }
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .navigation-status span { color:#b8c7dc; }
body.rider-theme-dark.map-navigation-active .map-poc.navigation-active .follow-rider { background:#172334ee; color:#f3f7ff; border-color:#8dbcef; }
body.map-navigation-active .maplibregl-ctrl-top-right { top:66px!important; right:8px!important; z-index:18!important; }
@media (orientation:landscape) and (max-height:600px) {
  body.map-navigation-active .map-poc.navigation-active .navigation-hud { right:auto!important; width:min(46vw,520px)!important; }
  body.map-navigation-active .map-poc.navigation-active .navigation-status { left:auto!important; width:min(48vw,560px)!important; }
}

/* Navigation controls are portaled above the page-level map */
body.map-navigation-active #maplibre-poc { position:fixed!important; inset:0!important; z-index:2000!important; width:100vw!important; height:100dvh!important; min-height:0!important; }
.active-navigation-overlay { position:fixed; inset:0; z-index:3000; width:100vw; height:100dvh; overflow:hidden; pointer-events:none; }
.active-navigation-overlay .navigation-actions { position:absolute; inset:0; display:block; pointer-events:none; }
.active-navigation-overlay .navigation-actions[hidden],.active-navigation-overlay .navigation-hud[hidden],.active-navigation-overlay .navigation-status[hidden],.active-navigation-overlay .follow-rider[hidden] { display:none!important; }
.active-navigation-overlay .navigation-actions button { position:absolute; width:58px; min-width:58px; height:58px; min-height:58px; padding:0; border:2px solid #ffffffcc; border-radius:13px; background:#f1f3f5ee; color:#172033; font-size:13px; font-weight:900; box-shadow:none; pointer-events:auto; touch-action:manipulation; }
.active-navigation-overlay .exit-guidance { top:max(12px,env(safe-area-inset-top)); left:12px; }
.back-arrow-art { position:absolute; left:15px; top:17px; width:27px; height:23px; border:5px solid currentColor; border-right:0; border-bottom:0; border-radius:14px 0 0 0; transform:rotate(-8deg); }
.back-arrow-art::before { content:""; position:absolute; left:-8px; top:-8px; width:15px; height:15px; border-left:5px solid currentColor; border-bottom:5px solid currentColor; transform:rotate(36deg); }
.active-navigation-overlay .north-toggle { top:calc(max(12px,env(safe-area-inset-top)) + 126px); right:8px; }
.orientation-icon { position:absolute; inset:5px; display:block; }
.north-icon b { position:absolute; top:-2px; left:0; right:0; font-size:17px; line-height:17px; text-align:center; }
.north-icon i { position:absolute; left:12px; top:16px; width:22px; height:29px; border:4px solid currentColor; clip-path:polygon(50% 0,100% 100%,50% 74%,0 100%); background:linear-gradient(90deg,transparent 49%,currentColor 50%); }
.route-icon::before,.route-icon::after { content:""; position:absolute; width:12px; height:12px; border:4px solid currentColor; border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.route-icon::before { left:2px; bottom:3px; }.route-icon::after { right:2px; top:3px; }
.route-icon i { position:absolute; left:13px; top:17px; width:22px; height:22px; border-left:5px solid currentColor; border-bottom:5px solid currentColor; border-radius:0 0 0 17px; transform:skewX(-15deg); }
.route-icon b { position:absolute; left:27px; top:12px; width:12px; height:18px; border-top:5px solid currentColor; border-radius:50%; transform:rotate(-25deg); }
.active-navigation-overlay .navigation-actions .north-toggle.north-up-active { background:#dbe8f7ee; box-shadow:inset 0 0 0 2px #4779ad; }
.active-navigation-overlay .navigation-hud { position:absolute; top:calc(max(12px,env(safe-area-inset-top)) + 54px); left:12px; right:12px; display:block; padding:11px 13px; border:1px solid #ffffff55; border-radius:14px; background:#172033ed; color:#fff; backdrop-filter:blur(8px); pointer-events:auto; }
.active-navigation-overlay .navigation-hud div { display:grid; gap:4px; }
.active-navigation-overlay .navigation-hud small { color:#b9c7db; font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.active-navigation-overlay .navigation-hud strong { font-size:clamp(17px,4.6vw,27px); line-height:1.15; }
.active-navigation-overlay .navigation-hud span { color:#dce4f2; font-size:13px; }
.active-navigation-overlay .navigation-status { position:absolute; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; align-items:center; padding:11px 14px; border:1px solid #ffffff99; border-radius:14px; background:#f8fbffee; color:#172033; backdrop-filter:blur(8px); pointer-events:auto; }
.active-navigation-overlay .navigation-status #hud-location { color:#55637a; font-size:12px; font-weight:800; }
.active-navigation-overlay .navigation-status #hud-eta { text-align:right; }
.active-navigation-overlay .navigation-status #hud-destination { grid-column:1; grid-row:1; text-align:left; }
.active-navigation-overlay .navigation-status #hud-eta { grid-column:2; grid-row:1; text-align:right; white-space:nowrap; }
.active-navigation-overlay .navigation-status #hud-location { grid-column:1 / -1; grid-row:2; }
.active-navigation-overlay .follow-rider { position:absolute; right:12px; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 92px); display:block; min-height:56px; padding:0 17px; border:2px solid #4779ad; border-radius:12px; background:#f1f3f5ee; color:#172033; font-size:14px; font-weight:900; pointer-events:auto; touch-action:manipulation; }
body.rider-theme-dark .active-navigation-overlay .navigation-actions button,body.rider-theme-dark .active-navigation-overlay .follow-rider { background:#172334ee; color:#f3f7ff; border-color:#8dbcef; }
body.rider-theme-dark .active-navigation-overlay .navigation-hud { background:#101a29f2; border-color:#ffffff38; }
body.rider-theme-dark .active-navigation-overlay .navigation-status { background:#121d2cf2; color:#f3f7ff; border-color:#ffffff38; }
body.rider-theme-dark .active-navigation-overlay .navigation-status #hud-location { color:#b8c7dc; }
@media (orientation:landscape) and (max-height:600px) {
  .active-navigation-overlay .navigation-hud { top:auto; right:auto; bottom:max(12px,env(safe-area-inset-bottom)); width:min(42vw,430px); padding:8px 10px; }
  .active-navigation-overlay .navigation-hud strong { font-size:clamp(15px,2.5vw,21px); }
  .active-navigation-overlay .navigation-hud span { font-size:11px; }
  .active-navigation-overlay .navigation-status { left:auto; width:min(48vw,560px); }
  .active-navigation-overlay .follow-rider { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 78px); }
}
body.map-navigation-active .maplibregl-ctrl-top-right { top:max(12px,env(safe-area-inset-top))!important; right:8px!important; z-index:10!important; }
body.map-navigation-active .maplibregl-ctrl-group button { width:58px!important; height:58px!important; touch-action:manipulation; }
body.map-navigation-active .maplibregl-ctrl-group button .maplibregl-ctrl-icon { background-size:34px 34px!important; }

/* Refined responsive map-control placement and icon artwork */
@media (orientation:portrait) {
  body:not(.map-navigation-active) .recenter-dashboard-map { bottom:calc(env(safe-area-inset-bottom) + 126px); }
  .active-navigation-overlay .navigation-hud { top:max(12px,env(safe-area-inset-top)); left:82px; right:12px; min-height:58px; padding:9px 12px; }
  body.map-navigation-active .maplibregl-ctrl-top-right { top:calc(max(12px,env(safe-area-inset-top)) + 94px)!important; }
  .active-navigation-overlay .north-toggle { top:calc(max(12px,env(safe-area-inset-top)) + 224px); right:18px; }
  .active-navigation-overlay .follow-rider { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 66px); }
}
@media (orientation:landscape) {
  body:not(.map-navigation-active) .maplibregl-ctrl-top-right { top:8px!important; }
  .active-navigation-overlay .north-toggle { top:calc(max(8px,env(safe-area-inset-top)) + 132px); right:18px; }
  .active-navigation-overlay .follow-rider { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px); }
}
.back-arrow-art { position:static!important; display:block!important; width:auto!important; height:auto!important; border:0!important; background:none!important; transform:none!important; font-family:Arial,sans-serif; font-size:42px!important; font-weight:900!important; line-height:50px!important; }
.back-arrow-art::before { display:none!important; }
.orientation-icon { inset:4px!important; }
.north-icon b { top:-1px!important; font-size:16px!important; font-weight:1000!important; line-height:16px!important; }
.north-icon i { position:absolute!important; left:6px!important; right:6px!important; top:13px!important; width:auto!important; height:auto!important; border:0!important; clip-path:none!important; background:none!important; color:currentColor!important; font-style:normal!important; font-size:38px!important; font-weight:900!important; line-height:34px!important; text-align:center!important; }
.route-icon::before,.route-icon::after { display:none!important; }
.route-icon i { position:absolute!important; inset:1px!important; width:auto!important; height:auto!important; border:0!important; color:currentColor!important; font-family:Arial,sans-serif!important; font-style:normal!important; font-size:50px!important; font-weight:900!important; line-height:44px!important; text-align:center!important; transform:rotate(-18deg)!important; }
.route-icon b,.route-icon em { position:absolute; width:10px; height:10px; border:4px solid currentColor; border-radius:50%; background:transparent; }
.route-icon b { left:1px; bottom:3px; }.route-icon em { right:1px; top:3px; }
.rider-menu .settings-head { justify-content:flex-start; gap:8px; }
.rider-menu .settings-head h2 { margin-right:auto; }
.rider-menu .settings-head button { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; background:#4f75a3; color:#fff; border-color:#4f75a3; }
.rider-menu .settings-head #rider-theme-toggle { font-size:23px; }
.rider-menu .settings-head #rider-settings-logout .logout-glyph { display:block; margin-top:-2px; font-family:Arial,sans-serif; font-size:30px; font-weight:700; line-height:1; transform:scaleX(1.08); }
.recenter-dashboard-map { pointer-events:auto!important; cursor:pointer; }
.profile-navigation-controls .map-icon-controls { display:grid; grid-template-columns:48px 48px minmax(0,1fr); width:100%; align-items:start; justify-content:stretch; gap:8px; }
.profile-navigation-controls .visual-picker { grid-column:1; display:contents; }
.profile-navigation-controls .map-color-control { grid-column:2; display:contents; }
.profile-navigation-controls #map-icon-toggle { grid-column:1; grid-row:1; }
.profile-navigation-controls #map-color-toggle { grid-column:2; grid-row:1; }
.profile-navigation-controls .map-icon-grid,.profile-navigation-controls .map-color-grid { grid-column:1 / -1; width:100%; max-width:none; }
.profile-navigation-controls .avatar-picker-panel { width: 100%; }

/* Responsive bottom-cell alignment and softer controls */
.cockpit button.secondary,.rider-settings button.secondary { background: #edf0f3; color: #172033; border-color: #cbd1d8; }
.cockpit .map-directions { grid-template-rows: auto minmax(0,1fr); }
.cockpit #route-dynamic { align-self: end; }
.command-static .checkpoint-title-row h2 { margin: 0 0 1px; font-size: clamp(14px,3vw,18px); line-height: 1.08; }
.command-static .checkpoint-name-row { display:flex; align-items:flex-end; justify-content:flex-start; gap:7px; min-width:0; }
.command-static .checkpoint-name-row h2 { min-width:0; }
.command-static .checkpoint-name-row .checkpoint-metrics { flex:0 0 auto; margin:0 0 1px; }
.cockpit .route-summary { align-items: end; }
.cockpit .route-summary #toggle-route-steps,
.cockpit .route-summary .go-button { height: 44px; min-height: 44px; }
.cockpit .route-summary .go-button { width: 44px; min-width: 44px; padding: 0; display: grid; place-items: center; background: #4f75a3; }
.cockpit .route-summary .go-button .go-arrow { width: 19px; height: 19px; margin: 0; font-size: 20px; line-height: 19px; }

/* Rider-profile picker previews and unified action color */
.profile-navigation-controls #map-color-toggle,
.profile-avatar-picker #avatar-color-toggle { background:var(--swatch)!important; }
.profile-navigation-controls #map-color-toggle i,
.profile-avatar-picker #avatar-color-toggle i { background:transparent; border:0; }
.profile-navigation-controls .map-icon-grid,
.profile-navigation-controls .map-color-grid,
.profile-avatar-picker .map-color-grid { padding-left:0; padding-right:0; border:0; background:transparent!important; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.profile-navigation-controls .map-icon-grid button.selected,
.profile-navigation-controls .map-color-grid button.selected,
.profile-avatar-picker .map-color-grid button.selected { outline:3px solid #F79142; outline-offset:1px; box-shadow:none; transform:none; }
.profile-navigation-controls .map-icon-grid { max-height:250px; }
.profile-avatar-picker #avatar-color-grid {
  width:100%;
  max-width:none;
  max-height:168px;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:2px;
  overflow:visible;
}
@media (max-width:420px) {
  .profile-navigation-controls .map-icon-grid { max-height:218px; }
}
.rider-settings .settings-head button,
.rider-profile .display-name-form button { background:#4f75a3; color:#fff; border-color:#4f75a3; }
@media (orientation: portrait) {
  .cockpit .map-directions,.cockpit-grid .racer { height: 108px; }
  .cockpit-grid .racer .inventory-strip { grid-template-columns:minmax(0,1fr) 48px; grid-template-rows:1fr; align-content:stretch; gap:3px; }
  .cockpit-grid .racer .inventory-slots { grid-row:1; grid-column:2; align-self:center; justify-content:end; }
  .cockpit-grid .racer .coin { align-self:end; padding:0; }
  .command-static .checkpoint-title-row h2 { margin-bottom: 0; }
}
@media (orientation: landscape) {
  .cockpit .map-directions,.cockpit-grid .racer { height: 94px; }
  .cockpit-grid .racer .inventory-strip { grid-template-columns:minmax(0,1fr) 98px; }
  .cockpit-grid .racer .inventory-slots { grid-template-columns:repeat(2,48px); grid-template-rows:48px; }
  .command-static .checkpoint-title-row > div { width: 100%; min-width:0; }
  .command-static .checkpoint-title-row .label { min-width: 0; margin: 0; flex-wrap: nowrap; }
  .command-static .checkpoint-title-row h2 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Universal Tucson Cup button color */
body { --tc-button-color:#4f75a3; }
body.rider-theme-dark { --tc-button-color:#2d4868; }
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='file']::file-selector-button {
  background-color:var(--tc-button-color,#4f75a3)!important;
  border-color:var(--tc-button-color,#4f75a3)!important;
  color:#FFFFFF!important;
}
button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled,
input[type='reset']:disabled { opacity:.5; }

/* Control artwork and compact Rider Profile refinements */
.maplibregl-ctrl-group { background:transparent!important; box-shadow:none!important; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { filter:brightness(0) invert(1); }
#open-settings { font-size:29px!important; }
.back-arrow-art { font-weight:1000!important; -webkit-text-stroke:1px currentColor; text-shadow:.6px 0 currentColor,-.6px 0 currentColor; }
.cockpit-top #open-profile.avatar-button {
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:none!important;
}
.rider-profile[open] {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  height:fit-content!important;
  max-height:min(88dvh,760px)!important;
  overflow-y:auto!important;
  margin-block-start:max(3dvh,calc((100dvh - 820px)/2))!important;
  margin-block-end:auto!important;
  margin-inline:auto!important;
}
.rider-profile > * { flex:0 0 auto!important; align-self:stretch!important; }
#profile-avatar-options {
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-height:0!important;
  overflow:visible!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
.profile-navigation-controls .map-icon-controls {
  grid-template-columns:calc((100% - 28px)/5) minmax(0,1fr)!important;
}
.profile-navigation-controls #map-icon-toggle {
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1!important;
  box-sizing:border-box!important;
}
.profile-navigation-controls #map-icon-toggle .character-picker-sprite {
  width:100%!important;
  height:100%!important;
}
.profile-navigation-controls .map-icon-grid button,
.profile-navigation-controls #map-icon-toggle {
  background:rgba(255,255,255,.5)!important;
}
@media (orientation:landscape) {
  body:not(.map-navigation-active) .cockpit-top #open-settings {
    position:fixed!important;
    top:18px!important;
    right:52px!important;
    z-index:20!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }
}

/* Rider and Ride Control actions share the same mode-aware button color. */
body:not(.race-control-active) .cockpit .ride-button,
body:not(.race-control-active) .cockpit .challenge-response-toggle,
body:not(.race-control-active) .cockpit .challenge-send,
body:not(.race-control-active) .cockpit .route-summary button,
body:not(.race-control-active) .cockpit-top #open-settings,
body:not(.race-control-active) .rider-settings .settings-head button,
body:not(.race-control-active) .rider-settings .settings-options button,
body:not(.race-control-active) .rider-profile .display-name-form button,
body:not(.race-control-active) .rider-popup button,
body:not(.race-control-active) .rider-announcement button,
body:not(.race-control-active) .challenge-rejection-alert button,
body:not(.race-control-active) .navigation-actions button,
body:not(.race-control-active) .follow-rider,
body:not(.race-control-active) .maplibregl-ctrl-group button {
  background-color:var(--tc-button-color,#4f75a3)!important;
  border-color:var(--tc-button-color,#4f75a3)!important;
  color:#FFFFFF!important;
}

/* Desert Arcade interface foundation */
body,
body.map-dashboard-active,
body.map-navigation-active,
body.race-control-active {
  background-color:var(--tc-primary,#616699);
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--tc-primary,#616699),white 12%) 0%,var(--tc-primary,#616699) 52%,color-mix(in srgb,var(--tc-primary,#616699),black 12%) 100%);
}
body.rider-theme-dark,
body.rider-theme-dark.map-dashboard-active,
body.rider-theme-dark.map-navigation-active,
body.rider-theme-dark.race-control-active {
  background-color:color-mix(in srgb,var(--tc-primary,#616699),black 66%);
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--tc-primary,#616699),black 58%) 0%,color-mix(in srgb,var(--tc-primary,#616699),black 68%) 58%,color-mix(in srgb,var(--tc-primary,#616699),black 76%) 100%);
}
#maplibre-poc,
#race-control-map { background-color:var(--tc-primary,#616699); }
body.rider-theme-dark #maplibre-poc,
body.rider-theme-dark #race-control-map { background-color:color-mix(in srgb,var(--tc-primary,#616699),black 66%); }

/* Control event-theme editor */
.control-settings { width:min(94vw,680px); height:min(94dvh,920px); max-height:94dvh; padding:18px; overflow-y:auto; }
.control-settings .settings-head { margin-bottom:12px; }
.event-theme-form { display:grid; gap:12px; }
.theme-color-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.theme-color-fields label { display:grid; gap:5px; margin:0; font-size:11px; }
.theme-color-fields input[type='color'] { width:100%; height:44px; padding:3px; }
.control-theme-check { display:flex!important; flex-direction:row!important; align-items:center; gap:8px; }
.event-theme-preview { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px; border-radius:15px; color:#fff; box-shadow:inset 0 0 0 1px #ffffff66; }
.event-theme-preview > div { display:grid; grid-template-columns:auto 1fr; gap:3px 9px; align-items:center; }
.event-theme-preview .theme-preview-avatar { grid-row:1/3; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--preview-secondary,#2F9C95); font-size:24px; }
.event-theme-preview small { opacity:.85; }
.event-theme-preview button { background:var(--preview-accent,#120F23)!important; border-color:var(--preview-accent,#120F23)!important; }
.event-theme-actions { display:flex; gap:8px; flex-wrap:wrap; }
.event-theme-actions button { flex:1 1 190px; }
@media(max-width:520px){.theme-color-fields{grid-template-columns:1fr}.control-settings{width:96vw;height:96dvh;max-height:96dvh;padding:12px}.event-theme-preview{min-height:96px}}

/* Beta ride styles */
.ride-style-preview { display:grid; gap:4px; padding:12px; border-radius:12px; background:rgba(255,255,255,.34); }
.ride-style-preview span,.ride-style-note { font-size:12px; line-height:1.4; }
.ride-team-overview { margin-bottom:16px; }
.ride-team-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.ride-team-heading .label,.ride-team-heading h2 { margin:0; }
.ride-team-heading > span { max-width:360px; color:var(--muted); font-size:12px; text-align:right; }
.ride-team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.ride-team-card { padding:13px; border-left:6px solid var(--team-color); border-radius:12px; background:rgba(255,255,255,.3); }
.ride-team-card > div:first-child { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; }
.ride-team-card > div:first-child small { grid-column:2; }
.ride-team-swatch { grid-row:1/3; width:20px; height:38px; border-radius:7px; background:var(--team-color); }
.ride-team-card > p { min-height:32px; margin:10px 0; font-size:12px; line-height:1.35; }
.ride-team-card label { display:grid; gap:4px; margin:0; font-size:11px; }
.ride-team-card label select { min-width:0; }
.ride-team-card > div:nth-last-of-type(1) { display:flex; gap:7px; margin-top:8px; }
.ride-team-card > div:nth-last-of-type(1) button { flex:1; min-height:40px; padding:0 8px; }
.rider-team-badge { align-self:center; padding:5px 8px; border-radius:9px; background:var(--team-color); color:#fff; font-size:11px; font-weight:900; white-space:nowrap; box-shadow:0 2px 8px #17203333; }
@media(max-width:600px){.ride-team-heading{display:block}.ride-team-heading>span{display:block;margin-top:5px;text-align:left}.rider-team-badge{position:absolute;top:52px;left:7px}}