/* Full-screen 3D map (show / edit / video / profile modes) — dark panels #292c29, green accents */
html.map-html, body.map-body { height: 100%; width: 100%; overflow: hidden; background: #0b1a17; }
body.map-body { position: relative; font-family: "Mulish", sans-serif; }
#viewDiv { position: absolute; inset: 0; }
#viewDiv.with-panel-left { left: var(--panel-width, 380px); }
#viewDiv.with-timeline { bottom: 96px; }
.esri-view .esri-view-surface--touch-none:focus::after { outline: none; }
.esri-ui-top-left, .esri-ui-bottom-right { display: none; }
.esri-ui .esri-attribution { font-size: 10px; opacity: 0.7; }
.esri-view { --calcite-color-brand: #1FA732; }

/* ---------- Top overlay ---------- */
.map-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-start;
  justify-content: space-between; padding: 12px 16px; pointer-events: none; gap: 12px;
}
.map-top > * { pointer-events: auto; }
.map-top.with-panel { left: var(--panel-width, 380px); }
.map-logo { background: rgba(255,255,255,0.9); border-radius: 12px; padding: 6px 10px; display: flex; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25); max-width: 180px; }
.map-logo img { max-height: 44px; max-width: 100%; }
.map-title { text-align: center; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.8); flex: 1; min-width: 0; }
.map-title h1 { font-size: clamp(16px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-title .sub { font-size: 13px; opacity: 0.95; font-weight: 500; }
.map-countdown {
  background: rgba(41,44,41,0.92); color: #fff; border-radius: 12px; padding: 8px 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 18px; min-width: 120px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.map-countdown small { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; }
.map-countdown.live { background: #1FA732; }
.map-countdown.finished { background: #555; }
.map-countdown a { color: #fff; }

/* ---------- Floating buttons ---------- */
.map-fabs { position: absolute; left: 16px; bottom: 32px; z-index: 20; display: flex; flex-direction: column; gap: 10px; }
.map-fabs.right { left: auto; right: 16px; }
.map-fabs.row { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: calc(100% - 32px); }
.fab-group { display: contents; }
.fab[hidden] { display: none; }
a.fab { text-decoration: none; }
.fab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 9999px; border: none; cursor: pointer;
  background: #1FA732; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: background 0.2s, transform 0.2s;
}
.fab:hover { background: #157a28; transform: translateY(-1px); }
.fab.dark { background: rgba(41,44,41,0.92); }
.fab.dark:hover { background: #111; }
.fab.round { width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 20px; }
.fab svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.fab .fab-icon { width: 18px; height: 18px; flex-shrink: 0; }
.fab select { background: transparent; color: #fff; border: none; font-weight: 600; outline: none; }
.fab select option { color: #000; }
.fab.round svg { width: 22px; height: 22px; }
.fab.round .fab-icon { width: 24px; height: 24px; }

/* ---------- Basemap picker ---------- */
.video-modal.basemap-modal { width: min(640px, calc(100vw - 32px)); }
.basemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; overflow-y: auto; }
.basemap-choice { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; font-size: 13px; }
.basemap-choice img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 8px; border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.basemap-choice:hover img { border-color: #ffffff80; transform: translateY(-1px); }
.basemap-choice.active img { border-color: #1FA732; }
.basemap-choice.active span { color: #fff; font-weight: 700; }

/* ---------- Side panels ---------- */
.panel {
  position: absolute; top: 0; bottom: 0; z-index: 25; width: var(--panel-width, 380px); background: #292c29; color: #e0e0e0;
  display: flex; flex-direction: column; box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}
.panel.left { left: 0; }
.panel.right { right: 0; left: auto; box-shadow: -4px 0 20px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform 0.3s ease; }
.panel.right.open { transform: translateX(0); }
.panel-header { padding: 14px 16px; border-bottom: 1px solid #ffffff3b; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-header h2 { font-size: 16px; font-weight: 700; }
.panel-header .tabs { display: flex; gap: 4px; }
.panel-header .panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel .btn.back { width: 34px; height: 34px; padding: 0; justify-content: center; flex-shrink: 0; background: #fff; border-color: #fff; color: #292c29; }
.panel .btn.back:hover { background: #1FA732; border-color: #1FA732; color: #fff; }
.panel .btn.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Edit / Profil / Race / Video header: back button styled like the map logo, then the page tabs. */
.panel-header.page-header { padding: 12px 16px 0; align-items: flex-end; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; }
.page-back {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 9px; border-radius: 12px;
  background: rgba(255,255,255,0.9); color: #1FA732; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: background 0.2s, transform 0.2s;
}
.page-back:hover { background: #fff; transform: translateX(-2px); }
.page-back:focus-visible { outline: 2px solid #1FA732; outline-offset: 2px; }
.page-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.page-tabs { display: flex; flex: 1; min-width: 0; align-self: stretch; align-items: flex-end; }
.page-tabs a {
  flex: 1; padding: 10px 2px 13px; margin-bottom: -1px; border-bottom: 3px solid transparent; text-align: center; white-space: nowrap;
  color: #b8b8b8; font-size: 14px; font-weight: 700; text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.page-tabs a:hover { color: #fff; }
.page-tabs a.active { color: #fff; border-bottom-color: #1FA732; }
.page-tabs a:focus-visible { outline: 2px solid #1FA732; outline-offset: -2px; border-radius: 6px; }
.panel-body { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.panel-footer { padding: 10px 16px; border-top: 1px solid #ffffff3b; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel .section { border: 1px solid #ffffff2a; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.panel .section > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #9fd9a8; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.panel label { font-size: 12px; color: #b8b8b8; font-weight: 500; }
.panel input[type="text"], .panel input[type="number"], .panel input[type="url"], .panel select, .panel textarea, .panel input[type="datetime-local"] {
  width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid #ffffff3b; background: #1e211e; color: #fff; font-size: 13px;
}
.panel input:focus, .panel select:focus { outline: none; border-color: #1FA732; }
.panel input[type="range"] { width: 100%; accent-color: #1FA732; }
.panel input[type="color"] { width: 36px; height: 28px; border: none; background: none; padding: 0; cursor: pointer; }
.panel .btn, .panel button.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9999px; border: 1px solid #ffffff3b; background: transparent; color: #e0e0e0;
  cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s;
}
.panel .btn:hover { border-color: #1FA732; color: #1FA732; }
.panel .btn.primary { background: #1FA732; border-color: #1FA732; color: #fff; }
.panel .btn.primary:hover { background: #157a28; }
.panel .btn.danger { border-color: #d64545; color: #ff8a8a; }
.panel .btn.danger:hover { background: #d64545; color: #fff; }
.panel .btn.sm { padding: 4px 10px; font-size: 12px; }
.panel .btn.icon-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
.panel .btn.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.panel .btn.active { background: #1FA732; color: #fff; border-color: #1FA732; }
.panel .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.panel .settings-total { margin-left: 8px; font-size: 12px; text-transform: none; letter-spacing: 0; color: #b8b8b8; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel .settings { display: flex; flex-direction: column; gap: 6px; }
.panel .setting-row { display: grid; grid-template-columns: 62px 1fr 1fr; gap: 6px; align-items: center; }
.panel .setting-name { font-size: 12px; color: #b8b8b8; font-weight: 600; white-space: nowrap; }
.panel .unit-input { display: flex; align-items: center; min-width: 0; border: 1px solid #ffffff3b; border-radius: 6px; background: #1e211e; color: #9a9a9a; font-size: 12px; overflow: hidden; }
.panel .unit-input:focus-within { border-color: #1FA732; }
.panel .unit-input em { font-style: normal; padding-left: 8px; white-space: nowrap; }
.panel .unit-input span { padding-right: 8px; }
.panel .unit-input input[type="number"] { flex: 1; min-width: 0; border: none; background: transparent; padding: 6px 4px 6px 8px; text-align: right; }
.panel .setting-row select { padding: 6px 8px; min-width: 0; }
.panel .list { display: flex; flex-direction: column; gap: 4px; }
.panel .item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: 13px;
}
.panel .item:hover { background: #ffffff10; }
.panel .item.selected { border-color: #1FA732; background: #1FA73220; }
.panel .item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel .item .meta { font-size: 11px; color: #9a9a9a; white-space: nowrap; }
.panel .item img { width: 22px; height: 22px; object-fit: contain; }
.panel .muted { color: #9a9a9a; font-size: 12px; }
.panel .status { font-size: 12px; color: #9fd9a8; }
.live-status { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 11px; color: #9fd9a8; cursor: pointer; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; }
.live-status:hover { color: #1FA732; }
.live-status[hidden] { display: none; }
.video-modal.offset-modal { width: min(440px, calc(100vw - 32px)); }
.offset-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow-y: auto; font-size: 13px; line-height: 1.5; }
.offset-body p { margin: 0; color: #c8c8c8; }
.offset-body strong { color: #fff; }
.offset-field { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.offset-field input { width: 80px; padding: 6px 8px; border: 1px solid #ffffff3b; border-radius: 6px; background: #1e201e; color: #e0e0e0; font: inherit; }
.offset-actions { display: flex; justify-content: flex-end; }
.offset-modal .btn { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 9999px; border: 1px solid #1FA732; background: #1FA732; color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.offset-modal .btn:hover { background: #157a28; }
.panel .icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.panel .icon-grid button { background: #1e211e; border: 1px solid #ffffff3b; border-radius: 8px; padding: 4px; cursor: pointer; }
.panel .icon-grid button:hover, .panel .icon-grid button.active { border-color: #1FA732; }
.panel .icon-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.panel .color-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .color-grid button { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #ffffff3b; cursor: pointer; }
.panel .color-grid button.active { border-color: #fff; }
.panel .intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.panel .intro-grid button { border: 2px solid #ffffff3b; border-radius: 8px; background: #1e211e; color: #ddd; cursor: pointer; padding: 6px; font-size: 12px; text-align: left; }
.panel .intro-grid button.active { border-color: #1FA732; }
.panel .intro-grid .thumb { height: 52px; border-radius: 6px; margin-bottom: 4px; }
.panel .picker-summary { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 1px solid #ffffff3b; border-radius: 8px; background: #1e211e; color: #e0e0e0; cursor: pointer; text-align: left; font-size: 13px; }
.panel .picker-summary:hover { border-color: #1FA732; }
.panel .picker-summary .thumb { width: 64px; height: 36px; border-radius: 6px; flex-shrink: 0; }
.panel .picker-summary .picker-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel .picker-summary .picker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel .picker-summary .picker-meta { font-size: 11px; color: #9a9a9a; }
.panel .picker-summary .music-thumb { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1FA732, #0f5a1b); color: #fff; font-size: 20px; }
.panel .warn { color: #ff8a8a; }

/* ---------- Intro / outro picker (<dialog>) ---------- */
.video-modal { margin: auto; inset: 0; border: 1px solid #ffffff3b; border-radius: 12px; padding: 0; width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #292c29; color: #e0e0e0; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.video-modal[open] { display: flex; flex-direction: column; }
.video-modal::backdrop { background: rgba(0,0,0,0.6); }
.video-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #ffffff3b; }
.video-modal-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.video-modal-close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #9a9a9a; }
.video-modal-close:hover { color: #fff; }
/* Edit: selected label / icon, beside the map so the element stays visible while it is edited */
.video-modal.selection-modal { inset: 80px 24px auto auto; margin: 0; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 110px); }
.selection-modal::backdrop { background: rgba(0,0,0,0.15); }
.selection-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; overflow-y: auto; }
@media (max-width: 900px) { .video-modal.selection-modal { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 70dvh; border-radius: 16px 16px 0 0; } }
.video-modal-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 16px 18px; min-height: 0; overflow: hidden; }
.video-modal-body .intro-grid { grid-template-columns: repeat(3, 1fr); align-content: start; overflow-y: auto; padding-right: 4px; }
.video-modal-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.video-modal-side .row { justify-content: flex-end; }
.video-modal-preview { aspect-ratio: 16/9; border-radius: 8px; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; }
.video-modal-preview iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-preview iframe[hidden] { display: none; }
.video-modal-preview .muted { padding: 16px; }
/* Camera styles offered behind "Recalculer automatiquement": one card per shot, description included. */
.video-modal.narrow { width: min(620px, calc(100vw - 32px)); }
.video-modal-body.column { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.mode-grid { display: flex; flex-direction: column; gap: 8px; }
.mode-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; cursor: pointer;
             border: 2px solid #ffffff3b; border-radius: 8px; background: #1e211e; color: #ddd; padding: 10px 12px; }
.mode-card:hover, .mode-card:focus-visible { border-color: #9a9a9a; }
.mode-card.active { border-color: #1FA732; }
.mode-card strong { font-size: 14px; }
.mode-card span { grid-column: 1; font-size: 12px; color: #9a9a9a; }
.mode-card em { grid-row: 1; grid-column: 2; font-style: normal; font-size: 12px; color: #9a9a9a; white-space: nowrap; }
/* Camera style picked on the upload form. */
.camera-mode { display: flex; align-items: center; gap: 8px; }
.camera-mode span { font-weight: 600; white-space: nowrap; }

.music-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; }
.music-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border: 2px solid #ffffff1f; border-radius: 8px; background: #1e211e; }
.music-row:hover { border-color: #ffffff3b; }
.music-row.active { border-color: #1FA732; background: #1FA73218; }
.music-row .music-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 4px; border: 0; background: none; color: #e0e0e0; cursor: pointer; text-align: left; }
.music-row .music-title { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-row .music-credits { font-size: 11px; color: #9a9a9a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-row .music-duration { font-size: 12px; color: #b8b8b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.music-row .music-duration.warn { color: #ff8a8a; }
.music-row .music-play { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid #ffffff3b; background: transparent; color: #e0e0e0; cursor: pointer; font-size: 11px; }
.music-row .music-play::before { content: "▶"; }
.music-row.playing .music-play { background: #1FA732; border-color: #1FA732; color: #fff; }
.music-row.playing .music-play::before { content: "❚❚"; }
.music-row .music-play:hover { border-color: #1FA732; }
.music-modal-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.video-modal audio { width: 100%; }
@media (max-width: 760px) {
  .video-modal-body { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; }
  .video-modal-body .intro-grid { grid-template-columns: repeat(2, 1fr); overflow: visible; order: 2; }
}
.panel .close-mobile { display: none; }
.panel select.auto-width { width: auto; }
.panel input.offset-input { width: 70px; }
.panel table { width: 100%; font-size: 12px; border-collapse: collapse; }
.panel th, .panel td { padding: 6px 4px; border-bottom: 1px solid #ffffff1a; text-align: left; }
.panel .panel-toggle { display: none; }

/* ---------- Ranking panel ---------- */
.ranking-toggle { position: absolute; right: 16px; top: 72px; z-index: 24; }
.ranking-hidden .ranking-toggle, .ranking-hidden .panel.ranking { display: none; }
.ranking .rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #ffffff1a; font-size: 13px; }
.ranking .rank-row .pos { font-weight: 700; color: #9fd9a8; }
.ranking .rank-row .who { display: flex; flex-direction: column; min-width: 0; }
.ranking .rank-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .rank-row .retard { font-variant-numeric: tabular-nums; font-size: 12px; color: #aaa; }
.ranking .rank-row .state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.ranking .rank-row .seen { display: flex; align-items: center; }
.ranking .rank-row .follow {
  width: 26px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid #ffffff3b; background: transparent; color: #bbb; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ranking .rank-row .follow svg { width: 14px; height: 14px; fill: currentColor; }
.ranking .rank-row .follow:hover { border-color: #1FA732; color: #1FA732; }
.ranking .rank-row .follow.active { background: #1FA732; border-color: #1FA732; color: #fff; }
.ranking .rank-row .lastseen { font-size: 10px; line-height: 1.3; padding: 0 5px; border-radius: 9999px; color: #fff; display: inline-block; }
.ranking .lastseen.green { background: #1FA732; } .ranking .lastseen.orange { background: #e6a100; } .ranking .lastseen.red { background: #d64545; }
.ranking .signal { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; margin-right: 4px; }
.ranking .signal i { display: block; width: 3px; background: #444; }
.ranking .signal i.on { background: #1FA732; }
.ranking .batt { display: inline-block; width: 22px; height: 10px; border: 1px solid #aaa; border-radius: 2px; position: relative; margin-right: 4px; vertical-align: middle; }
.ranking .batt i { position: absolute; left: 1px; top: 1px; bottom: 1px; background: #1FA732; }
.ranking .batt.low i { background: #d64545; }

/* ---------- Replay bar (finished race) ---------- */
:root { --replay-height: 72px; }
.replay-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--replay-height); z-index: 26; background: #292c29; color: #e0e0e0;
  display: flex; align-items: center; gap: 14px; padding: 0 16px; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.replay-bar[hidden] { display: none; }
.replay-play {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: #1FA732; color: #fff; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.replay-play:hover { background: #17912a; }
.replay-play svg { width: 22px; height: 22px; fill: currentColor; }
.replay-clock { display: flex; flex-direction: column; min-width: 104px; font-variant-numeric: tabular-nums; }
.replay-clock strong { font-size: 20px; color: #fff; line-height: 1.1; }
.replay-clock small { font-size: 12px; color: #9fd9a8; }
.replay-track { position: relative; flex: 1; min-width: 0; padding-bottom: 14px; }
.replay-track input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0 0; border-radius: 3px; cursor: pointer; display: block;
  background: linear-gradient(to right, #1FA732 var(--progress, 0%), #ffffff33 var(--progress, 0%));
}
.replay-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #1FA732; }
.replay-track input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #1FA732; }
.replay-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; font-size: 10px; color: #9a9a9a; font-variant-numeric: tabular-nums; }
.replay-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.replay-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.replay-side button, .replay-side select {
  background: transparent; border: 1px solid #ffffff3b; color: #fff; border-radius: 9999px; padding: 5px 10px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.replay-side button:hover, .replay-side select:hover { border-color: #1FA732; color: #1FA732; }
.replay-side select option { color: #000; }
body.replaying .map-fabs { bottom: calc(var(--replay-height) + 20px); }
body.replaying .panel.ranking { bottom: var(--replay-height); }
.ranking .lastseen.grey { background: #6b6b6b; }
.ranking .lastseen.arrived { background: #fff; color: #111; }
.ranking .rank-row[data-id] { cursor: pointer; }
.ranking .rank-row[data-id]:hover { background: #ffffff0f; }

/* ---------- Timeline (video mode + replay) ---------- */
.timeline {
  position: absolute; left: var(--panel-width, 380px); right: 0; bottom: 0; height: 96px; z-index: 25; background: #292c29; color: #e0e0e0;
  display: flex; flex-direction: column; padding: 8px 16px; gap: 6px; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.timeline.full { left: 0; }
.timeline .segments { position: relative; height: 14px; border-radius: 4px; overflow: hidden; display: flex; background: #111; }
.timeline .segments div { height: 100%; }
.timeline .keyframes { position: relative; height: 8px; }
.timeline .keyframes i { position: absolute; top: 0; width: 2px; height: 8px; background: #fff; margin-left: -1px; }
.timeline .keyframes i.pre { background: #9fd9a8; }
.timeline input[type="range"] { width: 100%; accent-color: #1FA732; margin: 0; }
.timeline .controls { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.timeline .controls button { background: transparent; border: 1px solid #ffffff3b; color: #fff; border-radius: 9999px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.timeline .controls button:hover { border-color: #1FA732; color: #1FA732; }
.timeline .controls button.rec { display: inline-flex; align-items: center; gap: 6px; background: #d63a3a; border-color: #d63a3a; color: #fff; font-weight: 700; }
.timeline .controls button.rec:hover { background: #b82e2e; border-color: #b82e2e; color: #fff; }
.timeline .controls .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.timeline .controls button.with-icon { display: inline-flex; align-items: center; gap: 5px; }
.timeline .controls button.with-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.timeline .controls button:disabled { opacity: 0.35; cursor: default; border-color: #ffffff3b; color: #fff; }
.timeline .controls button.primary { background: #1FA732; border-color: #1FA732; width: 36px; height: 36px; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.timeline .controls button.primary:hover { background: #17912a; border-color: #17912a; color: #fff; }
.timeline .controls button.primary svg { width: 18px; height: 18px; fill: #fff; display: block; }

.timeline .counter { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; min-width: 110px; text-align: center; }
.timeline .counter small { color: #9a9a9a; font-weight: 500; }

/* ---------- Profile overlay ---------- */
.profile-overlay { position: absolute; inset: 0; z-index: 40; background: #f2f2f5; display: flex; flex-direction: column; }
.profile-overlay .toolbar { display: flex; gap: 8px; padding: 10px 16px; background: #292c29; color: #fff; align-items: center; flex-wrap: wrap; }
.profile-overlay .toolbar .spacer { flex: 1; }
.profile-overlay .canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 0; }
.profile-overlay canvas { max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.2); border-radius: 8px; }
.profile-overlay .toolbar button, .profile-overlay .toolbar a {
  background: transparent; border: 1px solid #ffffff3b; color: #fff; border-radius: 9999px; padding: 6px 12px; cursor: pointer; font-size: 13px; text-decoration: none; font-weight: 600;
}
.profile-overlay .toolbar button.active { background: #1FA732; border-color: #1FA732; }
.profile-overlay .toolbar button:hover, .profile-overlay .toolbar a:hover { border-color: #1FA732; }

/* ---------- Share modal ---------- */
.video-modal.share-modal { width: min(360px, calc(100vw - 32px)); }
.share-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; overflow-y: auto; }
.share-qr { background: #fff; border-radius: 8px; padding: 12px; }
.share-qr svg { display: block; width: 100%; height: auto; }
.share-body input { width: 100%; font-size: 12px; padding: 8px; border: 1px solid #ffffff3b; border-radius: 6px; background: #1e201e; color: #e0e0e0; }
.share-body .muted { margin: 0; font-size: 12px; color: #9a9a9a; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-modal .btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; border: 1px solid #ffffff3b;
  background: transparent; color: #e0e0e0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none;
}
.share-modal .btn:hover { border-color: #1FA732; color: #1FA732; }
.share-modal .btn.primary { background: #1FA732; border-color: #1FA732; color: #fff; }
.share-modal .btn.primary:hover { background: #157a28; }

/* ---------- Loader ---------- */
.map-loader { position: absolute; inset: 0; z-index: 50; background: var(--gradient-hero); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity 0.6s; }
.map-loader.hide { opacity: 0; pointer-events: none; }
.map-loader img { width: 80px; }
.spinner { width: 28px; height: 28px; border: 3px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Race panel (dates, categories, QR codes, sharing) ---------- */
.panel-header { flex-wrap: wrap; }
.panel .btn .count { margin-left: 2px; padding: 0 6px; border-radius: 9999px; background: #ffffff26; font-size: 11px; line-height: 16px; }
.panel form.button_to { display: inline-flex; margin: 0; }
.panel .checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #e0e0e0; cursor: pointer; }
.panel .checkbox input { width: 16px; height: 16px; accent-color: #1FA732; flex-shrink: 0; }
.panel input[type="file"] { width: 100%; font-size: 12px; color: #b8b8b8; }
.panel input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border-radius: 9999px; border: 1px solid #ffffff3b; background: transparent; color: #e0e0e0; font: inherit; font-weight: 600; cursor: pointer;
}
.panel input[type="file"]::file-selector-button:hover { border-color: #1FA732; color: #1FA732; }
.panel .thumb-preview { display: block; margin-top: 8px; max-width: 100%; max-height: 160px; border-radius: 8px; object-fit: contain; }
.panel .qr-box { align-self: flex-start; width: 180px; padding: 8px; border-radius: 10px; background: #fff; line-height: 0; }
.panel .qr-box svg { width: 100%; height: auto; }
.panel .category-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid #ffffff1f; }
.panel .category-row .row { justify-content: space-between; }
.panel .category-form { display: flex; gap: 6px; align-items: center; }
.panel .category-form input[type="number"] { flex: 0 0 56px; width: 56px; }
.panel .category-form input[type="text"] { flex: 1; min-width: 0; }
.panel .category-form .btn { flex-shrink: 0; }
.race-badge { padding: 2px 8px; border-radius: 9999px; font-size: 11px; letter-spacing: 0; text-transform: none; background: #ffffff26; color: #e0e0e0; }
.race-badge.live { background: #1FA732; color: #fff; }
.race-badge.before { background: #e08a1e; color: #fff; }

/* ---------- Tablet: narrower side panels ---------- */
@media (max-width: 1200px) and (min-width: 901px) {
  :root { --panel-width: 320px; }
  .map-logo { max-width: 130px; }
}

/* ---------- Mobile: panels become bottom sheets ---------- */
@media (max-width: 900px) {
  :root { --panel-width: 0px; }
  #viewDiv.with-panel-left { left: 0; }
  :root { --timeline-height: 104px; --sheet-peek: 48px; }
  .panel, .panel.left, .panel.right {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 60vh; height: 60dvh; max-height: calc(100% - 64px);
    transform: translateY(calc(100% - var(--sheet-peek))); transition: transform 0.3s ease;
    border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,0.4); padding-bottom: env(safe-area-inset-bottom);
  }
  .panel.open { transform: translateY(0); }
  .panel.above-timeline { bottom: var(--timeline-height); max-height: calc(100% - var(--timeline-height) - 64px); }
  .panel .panel-toggle {
    display: block; position: absolute; top: 0; left: 0; right: 0; height: 18px; width: 100%; background: transparent; border: none; cursor: pointer; z-index: 1;
  }
  .panel .panel-toggle::before { content: ""; display: block; margin: 6px auto 0; width: 48px; height: 5px; border-radius: 3px; background: #888; }
  /* Draggable sheet (sheet_controller.js): the height follows the finger instead of open/closed. */
  .panel.sheet { height: var(--sheet-h, 50dvh); transform: none; transition: none; overflow: hidden; }
  .panel.sheet.sheet-animate { transition: height 0.25s ease; }
  .panel.sheet .panel-toggle { height: 24px; touch-action: none; cursor: grab; }
  .panel.sheet .panel-toggle::before { margin-top: 8px; width: 44px; background: #9a9a9a; }
  .panel.sheet.sheet-dragging { user-select: none; }
  .panel.sheet.sheet-dragging .panel-toggle { cursor: grabbing; }
  .panel.sheet.sheet-dragging .panel-toggle::before { background: #1FA732; }
  .panel.sheet .panel-header { touch-action: none; padding-top: 22px; flex-shrink: 0; }
  .panel-header { padding: 16px 12px 8px; min-height: var(--sheet-peek); flex-wrap: wrap; }
  .panel-header h2 { font-size: 15px; }
  .panel-body { padding: 10px 12px; }
  .panel-footer { padding: 8px 12px; }
  .panel .btn { padding: 8px 12px; }
  .panel .btn.sm { padding: 6px 10px; }
  .panel input[type="text"], .panel input[type="number"], .panel input[type="url"], .panel select, .panel textarea, .panel input[type="datetime-local"] { font-size: 16px; }
  .panel .grid3 { grid-template-columns: 1fr 1fr; }
  .panel .icon-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }

  .timeline { left: 0; height: var(--timeline-height); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  #viewDiv.with-timeline { bottom: var(--timeline-height); }
  .timeline .controls { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .timeline .controls::-webkit-scrollbar { display: none; }
  .timeline .controls button { flex-shrink: 0; padding: 6px 10px; white-space: nowrap; }
  .timeline .controls button.primary { padding: 0; }
  .timeline .counter { flex-shrink: 0; min-width: 0; font-size: 13px; white-space: nowrap; }

  .map-top { padding: 8px; gap: 8px; align-items: center; }
  .map-top.with-panel { left: 0; }
  .map-logo { max-width: 96px; padding: 4px 6px; flex-shrink: 0; } .map-logo img { max-height: 28px; }
  .map-title h1 { font-size: 15px; }
  .map-title .sub { font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .map-countdown { font-size: 14px; min-width: 0; padding: 6px 10px; flex-shrink: 0; }
  .map-countdown small { font-size: 10px; }
  .map-fabs { bottom: calc(var(--ranking-h, var(--sheet-peek)) + 12px); left: 8px; gap: 8px; }
  .fab { padding: 8px 12px; font-size: 13px; }
  .fab.round { width: 42px; height: 42px; padding: 0; }
  .basemap-grid { gap: 8px; padding: 12px; }
  .basemap-choice { font-size: 12px; }
  .ranking-toggle { display: none; }
  :root { --replay-height: 92px; }
  .replay-bar { flex-wrap: wrap; height: var(--replay-height); gap: 4px 10px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); align-content: center; }
  .replay-track { order: -1; flex: 1 0 100%; }
  .replay-track input[type="range"] { margin-top: 6px; }
  .replay-play { width: 38px; height: 38px; }
  .replay-clock { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
  .replay-clock strong { font-size: 17px; }
  body.replaying .map-fabs { bottom: calc(var(--replay-height) + var(--ranking-h, var(--sheet-peek)) + 12px); }
  body.replaying .panel.ranking { bottom: var(--replay-height); max-height: calc(100% - var(--replay-height) - 64px); }
  .profile-overlay .toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .profile-overlay .toolbar::-webkit-scrollbar { display: none; }
  .profile-overlay .toolbar button, .profile-overlay .toolbar a { flex-shrink: 0; white-space: nowrap; }
  .profile-overlay .toolbar .spacer { flex: 0 0 8px; }
  .profile-overlay .canvas-wrap { padding: 8px; }
}

@media (max-width: 420px) {
  .map-logo { max-width: 72px; }
}

/* Profile overlay next to the Profil page panel */
.profile-overlay.with-panel { left: var(--panel-width, 380px); }
@media (max-width: 900px) { .profile-overlay.with-panel { left: 0; bottom: var(--sheet-peek); } }

/* ---------- Profile pane: Réglages / Éléments sub-tabs ---------- */
.panel .subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: #1e211e; border: 1px solid #ffffff2a; }
.panel .subtabs button, .panel .subtabs a {
  display: inline-flex; text-decoration: none; text-align: center; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: none; border-radius: 7px;
  background: transparent; color: #b8b8b8; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.panel .subtabs button:hover, .panel .subtabs a:hover { color: #fff; }
.panel .subtabs button.active, .panel .subtabs a.active { background: #1FA732; color: #fff; }
.panel .subtabs .count:empty { display: none; }
.panel .subtabs .count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; background: #ffffff1f; }
.panel .subpane { display: flex; flex-direction: column; gap: 14px; }
.panel .subpane[hidden] { display: none; }
.panel .profile-element .swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #ffffff3b; flex-shrink: 0; margin: 0 4px; }
.panel .profile-element .eye {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: #9fd9a8; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.panel .profile-element:hover .eye { background: #ffffff14; }
.panel .profile-element.is-hidden .eye { color: #8a8a8a; }
.panel .profile-element.is-hidden .name, .panel .profile-element.is-hidden .meta, .panel .profile-element.is-hidden img,
.panel .profile-element.is-hidden .swatch { opacity: 0.45; }
.panel .profile-element.is-hidden .name { text-decoration: line-through; }

/* ---------- Race page: the side panel of the other pages, categories and QR codes in place of the map ---------- */
body.workspace-body { min-height: 100vh; background: #1e211e; font-family: "Mulish", sans-serif; color: #e0e0e0; }
body.workspace-body .flash { top: 16px; }
.race-page .panel.race-side { position: fixed; }
.panel.race-main {
  position: fixed; top: 0; bottom: 0; right: 0; left: var(--panel-width, 380px); z-index: 1; width: auto; overflow-y: auto;
  gap: 16px; padding: 20px 24px calc(48px + env(safe-area-inset-bottom)); background: #1e211e; box-shadow: none;
}
/* two datetime pickers do not fit side by side in the 380px panel */
.race-side .grid2.dates { grid-template-columns: minmax(0, 1fr); }
.race-main-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.race-main-head h1 { font-size: 20px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-main-head span { font-size: 13px; color: #9a9a9a; }
.race-main .section { background: #292c29; padding: 14px 16px; gap: 10px; }
.race-main .section > h3 { justify-content: flex-start; gap: 8px; }
.race-main .category-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.race-main .category-row .category-form { flex: 1 1 320px; max-width: 560px; }
.race-main .category-row > .row { margin-left: auto; }
.race-main .category-form.new { max-width: 560px; }
.race-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 16px; align-items: start; }
.race-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.race-page .col .btn, .race-page .col form.button_to, .race-page .col form.button_to .btn { width: 100%; justify-content: center; }
.race-page .qr-split { display: flex; gap: 14px; align-items: flex-start; }
.race-page .qr-split .qr-box { flex: 0 0 148px; width: 148px; }
.race-page .qr-split > .col { flex: 1; min-width: 0; }
.race-page .qr-split > .col .row .btn { width: auto; }
.race-page .qr-split > .col form.button_to { align-self: flex-start; width: auto; }
.race-page .qr-split > .col form.button_to .btn { width: auto; }
.race-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #ffffff10; font-weight: 700; font-size: 15px; color: #fff; }
.race-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #9a9a9a; flex-shrink: 0; }
.race-status.live .dot { background: #1FA732; box-shadow: 0 0 0 4px #1FA73240; }
.race-status.before .dot { background: #e08a1e; }
.race-status.finished .dot { background: #d64545; }

@media (max-width: 1100px) {
  .race-qr-grid, .race-top-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Mobile: no bottom sheet here, the panel and the main part follow each other in the page. */
@media (max-width: 900px) {
  .race-page .panel.race-side, .race-page .panel.race-main {
    position: static; width: auto; height: auto; max-height: none; transform: none; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .race-page .race-side .panel-body { overflow: visible; }
  .race-page .panel.race-main { padding: 16px 12px calc(32px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .race-page .qr-split { flex-direction: column; }
  .race-page .qr-split .qr-box { flex-basis: auto; width: 180px; }
  .race-page .grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Race › Catégories: competitors modal ---------- */
.race-page .competitors-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.competitors-modal { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.competitors-modal .muted { color: #9a9a9a; font-size: 13px; font-weight: 500; }
.competitors-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px; }
.competitors-empty { padding: 16px 0; line-height: 1.5; }
.competitors-head, .competitor-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
.competitors-head { padding: 4px 42px 4px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #9fd9a8; }
.competitors-list { display: flex; flex-direction: column; }
.competitor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ffffff1f; }
.competitor-row:last-child { border-bottom: none; }
.competitor-meta { grid-column: 1 / -1; font-size: 12px; color: #9a9a9a; display: flex; align-items: center; gap: 6px; }
.competitor-meta .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #1FA732; box-shadow: 0 0 0 3px #1FA73240; }
.competitor-phone { font-size: 13px; color: #e0e0e0; padding: 7px 10px; border: 1px dashed #ffffff3b; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.competitors-modal input[type="text"], .competitors-modal select {
  width: 100%; min-width: 0; padding: 7px 10px; border-radius: 6px; border: 1px solid #ffffff3b; background: #1e211e; color: #fff; font: inherit; font-size: 13px;
}
.competitors-modal input:focus, .competitors-modal select:focus { outline: none; border-color: #1FA732; }
.competitors-modal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; border: 1px solid #ffffff3b;
  background: transparent; color: #e0e0e0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.competitors-modal .btn:hover { border-color: #1FA732; color: #1FA732; }
.competitors-modal .btn.primary { background: #1FA732; border-color: #1FA732; color: #fff; }
.competitors-modal .btn.primary:hover { background: #157a28; }
.competitors-modal .btn.danger { border-color: #d64545; color: #ff8a8a; }
.competitors-modal .btn.danger:hover { background: #d64545; color: #fff; }
.competitors-modal .btn.icon { width: 34px; height: 30px; padding: 0; }
.competitors-modal form.button_to { margin: 0; }
.competitors-add { padding: 12px 18px 16px; border-top: 1px solid #ffffff3b; background: #242724; border-radius: 0 0 12px 12px; }
.competitors-add .competitor-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) auto; }

@media (max-width: 640px) {
  .competitors-head { display: none; }
  .competitor-form, .competitors-add .competitor-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .competitor-form input[type="text"] { grid-column: 1 / -1; }
  .competitor-form .btn, .competitors-add .competitor-form select { grid-column: 1 / -1; }
  .competitor-row { align-items: start; }
  .competitors-body { padding: 4px 14px; }
  .competitors-add { padding: 10px 14px 14px; }
}
.competitors-modal:focus { outline: none; }

/* ---------- Magnetisation test page (/traces/:id/test) ---------- */
.magnet-panel { bottom: var(--replay-height); --panel-width: 420px; }
.magnet-panel .panel-header select { max-width: 180px; padding: 4px 8px; }
.magnet-options { display: flex; flex-direction: column; gap: 4px; }
.magnet-options .checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e0e0e0; }
.magnet-options .swatch.old { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff8c00; border: 1px solid #000; }
.magnet-legend { line-height: 1.5; }
.magnet-legend .c-ok { color: #1fa732; } .magnet-legend .c-skip { color: #ff9600; }
.magnet-legend .c-tele { color: #ff6b6b; } .magnet-legend .c-late { color: #4da3ff; }
.magnet-stats { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.magnet-stats .selected-info { color: #ffe066; }
.magnet-log-section { flex: 1; min-height: 200px; }
.magnet-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; font-size: 12px; font-variant-numeric: tabular-nums; }
.magnet-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 2px 8px; padding: 4px 6px; border-left: 3px solid #1fa732; border-bottom: 1px solid #ffffff14; cursor: pointer; }
.magnet-row:hover { background: #ffffff10; }
.magnet-row.selected { background: #ffe06622; }
.magnet-row.skipped { border-left-color: #ff9600; } .magnet-row.teleport { border-left-color: #d64545; }
.magnet-row.late { border-left-color: #007aff; } .magnet-row.before, .magnet-row.after, .magnet-row.ignored { border-left-color: #777; }
.magnet-row .time { color: #9a9a9a; }
.magnet-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.magnet-row .status { color: #b8b8b8; text-align: right; }
.magnet-row .values { grid-column: 2 / 4; color: #e0e0e0; }
.magnet-row .old { grid-column: 2 / 4; color: #ff8c00; }
.magnet-row .flags { grid-column: 2 / 4; color: #4da3ff; }
@media (max-width: 899px) {
  .magnet-panel { --panel-width: 100%; top: auto; height: 45%; }
}
@media (min-width: 900px) {
  body:has(.magnet-panel) .map-top { right: 420px; }
}
.magnet-ranking-section { flex-shrink: 0; }
.magnet-ranking { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.magnet-rank-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #9fd9a8; padding: 8px 4px 2px; }
.magnet-rank { display: grid; grid-template-columns: 24px 1fr auto 54px; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid #ffffff14; cursor: pointer; }
.magnet-rank:hover { background: #ffffff10; }
.magnet-rank.selected { background: #ffe06622; }
.magnet-rank .pos { font-weight: 700; color: #9fd9a8; }
.magnet-rank .name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.magnet-rank .name small { font-weight: 400; color: #9a9a9a; margin-left: 6px; }
.magnet-rank .retard.warn { color: #ff9600; }
.magnet-rank .age { font-size: 11px; text-align: right; }
.magnet-rank .age.green { color: #1fa732; } .magnet-rank .age.orange { color: #ff9600; } .magnet-rank .age.red { color: #ff6b6b; }
.magnet-calc { font-size: 12px; line-height: 1.5; border-top: 1px solid #ffffff2a; padding-top: 8px; }
.magnet-calc ol { margin: 4px 0 0 18px; padding: 0; }
.magnet-calc .warn { color: #ff9600; margin-top: 4px; }
.magnet-view select { flex: 1; min-width: 0; padding: 4px 8px; }
.magnet-view .offset-input { width: 64px; padding: 4px 6px; }
.magnet-rank .age.arrived { color: #111; background: #fff; border-radius: 4px; padding: 0 4px; text-align: center; }
.magnet-row.finished { border-left-color: #fff; } .magnet-row.arrived { border-left-color: #555; opacity: 0.6; }
.magnet-apply .warn { color: #ff9600; font-size: 12px; }
.magnet-apply form { display: inline; }

/* ---------- Video › Export: resolution / intro / outro / export in place of the map ---------- */
.video-workspace { display: contents; }
.panel.video-export {
  left: var(--panel-width, 380px); right: 0; z-index: 31; width: auto; overflow-y: auto; gap: 16px;
  padding: 20px 24px calc(48px + env(safe-area-inset-bottom)); background: #1e211e; box-shadow: none;
}
.panel.video-export[hidden] { display: none; }
.video-export-head h1 { font-size: 20px; font-weight: 800; color: #fff; }
.video-export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.video-export .section { background: #292c29; padding: 14px 16px; gap: 10px; }
.video-export-grid > .span-2 { grid-column: 1 / -1; }
body.video-exporting .timeline { display: none; }
@media (max-width: 1100px) {
  .video-export-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .panel.video-export, .panel.video-export.left { left: 0; top: 0; bottom: 0; height: auto; max-height: none; transform: none; border-radius: 0; box-shadow: none; z-index: 24; padding: 16px 12px 60dvh; }
  body.video-exporting .panel.above-timeline { bottom: 0; max-height: calc(100% - 64px); }
}

/* ---------- Video › Export: Free / Pro modes ---------- */
.video-export-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1100px; }
.panel .subtabs.export-modes { min-width: 240px; }
.panel .subtabs.export-modes[hidden] { display: none; }
.panel .subtabs.export-modes button:disabled { opacity: 0.45; cursor: not-allowed; }
.panel .subtabs.export-modes .soon { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 9999px; background: #ffffff1f; }
.export-mode[hidden] { display: none; }
.export-mode .free-points { margin: 0; padding-left: 18px; color: #b8b8b8; font-size: 13px; line-height: 1.6; }

/* ---------- Free export recording page (traces#record, render layout) ---------- */
.record-page { position: fixed; inset: 0; background: #000; color: #e0e0e0; font: 13px/1.4 system-ui, sans-serif; }
.record-bar {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px 14px;
  background: #1e211e; border-bottom: 1px solid #ffffff2a; min-height: 60px; box-sizing: border-box;
}
.record-bar strong { color: #fff; }
.record-status { flex: 1 1 280px; color: #b8b8b8; }
.record-actions { display: flex; gap: 8px; }
.record-bar .btn {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9999px; border: 1px solid #ffffff3b; background: transparent;
  color: #e0e0e0; cursor: pointer; font-size: 13px; font-weight: 600;
}
.record-bar .btn:hover { border-color: #1FA732; color: #1FA732; }
.record-bar .btn.primary { background: #1FA732; border-color: #1FA732; color: #fff; }
.record-bar .btn:disabled { opacity: 0.45; cursor: default; }
.record-bar .btn[hidden] { display: none; }
.record-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff14; }
.record-progress span { display: block; height: 100%; width: 0; background: #1FA732; transition: width 0.3s; }
.record-stage { position: relative; transform-origin: 0 0; overflow: hidden; }

/* ---------- Free export: the record page framed in place of the export form ---------- */
.video-recorder { display: flex; flex: 1 1 auto; min-height: 420px; max-width: 1100px; }
.video-recorder[hidden] { display: none; }
.video-recorder iframe { flex: 1 1 auto; width: 100%; min-height: 420px; border: 1px solid #ffffff2a; border-radius: 10px; background: #000; }

/* ------------------------------------------------------------ Musique IA (traces#musicgen) */
.music-ai-link { font-size: 12px; color: #9fd9a8; text-decoration: underline dotted; text-underline-offset: 3px; }
.music-ai-link:hover { color: #1FA732; }
.music-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.style-chip { position: relative; cursor: pointer; }
.style-chip input { position: absolute; opacity: 0; pointer-events: none; }
.style-chip span { display: inline-block; padding: 5px 12px; border-radius: 9999px; border: 1px solid #ffffff3b; font-size: 12px; font-weight: 600; color: #e0e0e0; transition: all 0.2s; }
.style-chip:hover span { border-color: #1FA732; }
.style-chip input:checked + span { background: #1FA732; border-color: #1FA732; color: #fff; }
.style-chip input:focus-visible + span { outline: 2px solid #9fd9a8; outline-offset: 2px; }
.musicgen-page .race-main .section > h3 .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.music-timeline { position: relative; height: 44px; border-radius: 8px; background: #1e211e; overflow: hidden; }
.music-block { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; border-right: 1px solid #1e211e; overflow: hidden; }
.music-block span { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-block.intro, .music-block.outro { background: #5a5f5a; }
.music-block.dive { background: #3a6ea5; }
.music-block.climb { background: #d9791a; }
.music-block.descent { background: #2a5fd0; }
.music-block.flat { background: #1FA732; }
.music-block.finish { background: #6fbf7c; }
.music-peak { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.music-peak::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
.music-peak.main { width: 3px; background: #ffd400; }
.music-peak.main::before { border-top-color: #ffd400; }
/* zoom effect: the impact at the end of the zoom in, the reverse whoosh at the start of the zoom out */
.music-fx { position: absolute; bottom: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 0 2px #1e211e; }
.music-axis { display: flex; justify-content: space-between; font-size: 11px; color: #9a9a9a; font-variant-numeric: tabular-nums; }
.music-events { display: flex; flex-direction: column; gap: 4px; }
.music-event { display: grid; grid-template-columns: 12px 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.music-event .time { color: #b8b8b8; font-variant-numeric: tabular-nums; }
.music-event .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-event .meta { font-size: 11px; color: #9a9a9a; }
.music-event .dot { width: 10px; height: 10px; border-radius: 50%; background: #5a5f5a; }
.music-event .dot.dive { background: #3a6ea5; }
.music-event .dot.climb { background: #d9791a; }
.music-event .dot.descent { background: #2a5fd0; }
.music-event .dot.flat { background: #1FA732; }
.music-event .dot.finish { background: #6fbf7c; }
.music-event .dot.fx { background: #00d4ff; box-shadow: 0 0 0 3px #00d4ff40; }
.music-event .dot.peak { background: #fff; border-radius: 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.music-event .dot.peak.main { background: #ffd400; }
.music-prompt { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ffffff3b; background: #1e211e; color: #fff; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.prompt-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.music-prompt:focus { outline: none; border-color: #1FA732; }
@media (max-width: 640px) {
  .music-event { grid-template-columns: 12px 84px minmax(0, 1fr); }
  .music-event .meta { grid-column: 3; }
}