:root{--metal:#d9d9d9;--dark:#222;--line:#888;--blue:#1987bf;--panel:#efefef;--asphalt:#747474}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#20252a;color:#111}button,input{font:inherit}
body{background:radial-gradient(circle at 50% 20%,#3d454b 0,#24282d 55%,#15191d 100%)}
.topbar{height:46px;display:grid;grid-template-columns:auto 1fr auto auto auto;gap:8px;align-items:center;padding:5px 10px;background:linear-gradient(#2d91ca,#096596);border-bottom:2px solid #102e40;color:#fff;box-shadow:0 2px 5px #0008;position:relative;z-index:5}.brand{font-family:Consolas,monospace;font-weight:900;letter-spacing:4px;font-size:27px;text-shadow:2px 2px #123}.brand small{letter-spacing:1px;font:10px Arial}.flag{font-size:20px;margin-right:5px}.top-status{text-align:center;background:linear-gradient(#d7d7d7,#9e9e9e);color:#555;border:2px solid #555;border-radius:7px;padding:5px 15px;font-weight:bold;max-width:520px;justify-self:center;width:100%}.metal{border:2px solid #555;border-radius:6px;background:linear-gradient(#fff,#bababa);font-weight:bold;padding:5px 10px;color:#333;box-shadow:inset 0 1px #fff}
main{max-width:1600px;margin:auto;background:#292d30;min-height:calc(100vh - 46px)}.race-stage{position:relative;background:linear-gradient(#0d76ad 0,#42ace9 44%,#c9ebff 45%,#c9ebff 47%,#747474 47%,#747474 100%)}.road{height:425px;position:relative;overflow:hidden;background:linear-gradient(#46ace6 0 46%,#e1e0ce 46% 48%,var(--asphalt) 48% 96%,#e1e0ce 96% 98%,#4e743a 98%)}.road-dashes{position:absolute;left:0;right:0;top:71%;height:7px;background:repeating-linear-gradient(90deg,#eee 0 82px,transparent 82px 123px)}.camera-marker{position:absolute;left:50%;top:48%;bottom:2%;width:2px;background:#ffffff88}.curb{position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,#eee 0 32px,#d7d2bd 32px 64px)}.curb-top{top:46%}.curb-bottom{bottom:2%}.rider{position:absolute;width:44px;height:38px;transform:translate(-50%,-50%);transition:left .42s linear,top .42s linear;filter:drop-shadow(0 2px 1px #0009);z-index:2}.rider .bike{font-size:31px;line-height:31px;transform:scaleX(-1);display:block}.rider .jersey{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;left:17px;top:1px;box-shadow:0 0 0 1px #111}.rider .bib{position:absolute;left:35px;top:-6px;background:#fff;border:1px solid #222;border-radius:3px;font-size:9px;padding:1px 2px}.rider.focus{z-index:4}.rider.focus:after{content:'▼';position:absolute;left:14px;top:-22px;color:#ffe600;text-shadow:1px 1px #111}.rider.mine .bib{background:#ffe666}.race-overlay{position:absolute;z-index:4;left:8px;top:8px;width:360px;max-height:245px;overflow:auto}.panel{border:2px solid #555;background:linear-gradient(#f7f7f7,#d5d5d5);box-shadow:inset 0 0 0 1px #fff,2px 2px 0 #1118;border-radius:5px}.race-overlay h3{margin:6px 8px}.race-overlay table{width:100%;border-collapse:collapse;font-size:13px}.race-overlay td{padding:3px 6px;border-top:1px solid #aaa}.race-overlay .playerlink{cursor:pointer;text-decoration:underline}.race-footer{height:52px;background:#555;color:#fff;display:grid;grid-template-columns:180px 1fr 180px;align-items:center;padding:5px 12px;font-size:12px}.race-footer strong{font-size:15px}.progress-wrap{height:20px;border:2px solid #222;background:#eee;position:relative;border-radius:3px;overflow:hidden}.progress{height:100%;width:0;background:linear-gradient(90deg,#69c53c,#f4df36,#e84a3d)}.progress-wrap span{position:absolute;inset:1px;text-align:center;color:#111;font-weight:bold}.dashboard{display:grid;grid-template-columns:290px 1fr 370px;gap:8px;padding:8px;background:#2a2e31 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32"%3E%3Cfilter id="n"%3E%3CfeTurbulence baseFrequency=".8" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".08"/%3E%3C/svg%3E')}.events h2{font-size:16px;margin:0;padding:8px;border-bottom:2px solid #555}.event-grid{display:grid;grid-template-columns:1fr}.event-row{display:grid;grid-template-columns:38px 1fr;border-bottom:1px solid #777;font-weight:bold}.event-row b{background:#fff;padding:4px;text-align:center;border-right:1px solid #777}.event-row span{padding:4px}.e12 span{background:#9d35d0}.e11 span{background:#5a5cf0}.e10 span{background:#26aeda}.e9 span{background:#55d8c7}.e8 span{background:#9ddb83}.e7 span{background:#d1e769}.e6 span{background:#ffe875}.e5 span{background:#ffd042}.e4 span{background:#ffaf24}.e3 span{background:#ff7018}.e2 span{background:#f3362e}.middle-column{display:flex;flex-direction:column;gap:8px}.identity{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.identity strong{font-size:18px}.identity span{display:block;font-size:12px;color:#555}.join{background:linear-gradient(#8fd13b,#47a414);color:#fff;font-weight:900;border:2px solid #386a14;border-radius:7px;padding:8px 14px;text-shadow:1px 1px #333}.join:disabled{filter:grayscale(1);opacity:.6}.chain{height:18px;border-radius:10px;background:repeating-linear-gradient(90deg,#303236 0 16px,#73787b 16px 23px,#151515 23px 28px);border:3px solid #111}.chat{background:#202225;color:#ddd;overflow:hidden;flex:1;min-height:280px}.chat-log{height:250px;overflow:auto;padding:8px;font:13px Consolas,monospace}.chat-line{margin:2px 0}.chat-line .time{color:#7f8589}.chat-line .name{font-weight:bold}.chat-line.system{color:#ffd84b}.chat form{display:grid;grid-template-columns:auto 1fr auto;gap:5px;align-items:center;padding:6px;background:#444;border-top:2px solid #111}.chat input{min-width:0;background:#111;color:#fff;border:1px solid #aaa;padding:6px}.spectate{padding:7px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.spectate input{width:66px}.spectate button{padding:4px 7px}.controls{padding:8px;display:flex;flex-direction:column;gap:10px}.control-head{display:grid;grid-template-columns:1fr 1fr;gap:8px}.control-head>div{border:1px solid #666;padding:7px;background:#bfc2c4;text-align:center}.control-head span{font-size:12px;font-weight:bold}.dice-pair{display:flex;gap:8px;justify-content:center;margin-top:5px}.dice-pair b{width:46px;height:46px;display:grid;place-items:center;background:#fff;border:3px solid #222;border-radius:8px;font-size:24px}.bottle{display:block;margin:5px auto 0;font-size:22px;border:2px solid #123;background:#dff8ff;border-radius:8px;padding:4px 16px}.roll-zone{background:#064d24;border:8px ridge #8b5d17;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}.big-roll{font-size:18px;font-weight:900;padding:13px 20px;border-radius:8px;border:3px solid #6e0;background:linear-gradient(#fff851,#f59219);box-shadow:0 3px #522;cursor:pointer}.big-roll:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}.cooldown{width:85%;height:12px;background:#152;outline:1px solid #000;margin-top:10px}.cooldown div{height:100%;width:0;background:#ffd330}.mini-standings{overflow:auto;max-height:250px}.standing-row{display:grid;grid-template-columns:28px 34px 1fr 55px;gap:5px;padding:3px;border-bottom:1px solid #aaa;font-size:12px;align-items:center}.standing-row.me{background:#fff0a6}.standing-row .dot{width:12px;height:12px;border-radius:50%;display:inline-block}.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:20px}.hidden{display:none}.modal-card{position:relative;width:min(620px,95vw);max-height:90vh;overflow:auto;background:#e5e5e5;border:3px solid #444;border-radius:8px;padding:20px;box-shadow:0 20px 80px #000}.close{position:absolute;right:8px;top:6px;font-size:25px;border:0;background:transparent;cursor:pointer}.modal h2{margin-top:0}.modal form{display:grid;gap:8px}.modal label{font-weight:bold}.modal input{padding:8px}.tabs{display:flex;gap:5px;margin-bottom:10px}.tabs button{padding:6px 10px}.history{width:100%;border-collapse:collapse}.history th,.history td{border:1px solid #999;padding:5px}.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111;color:#fff;border:2px solid #ddd;padding:10px 16px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1}
@media(max-width:1000px){.topbar{grid-template-columns:1fr auto auto}.brand{font-size:20px}.top-status{grid-row:2;grid-column:1/-1}.topbar{height:auto}.dashboard{grid-template-columns:1fr}.events{order:2}.middle-column{order:1}.controls{order:3}.road{height:330px}.race-overlay{width:310px;max-height:180px}.race-footer{grid-template-columns:110px 1fr 110px}.chat-log{height:190px}}

.road-dashes{background-position-x:0}
.start-line,.finish-line{position:absolute;top:48%;bottom:2%;width:18px;z-index:1;display:none;border-left:2px solid #eee;border-right:2px solid #eee;transform:translateX(-50%)}
.start-line{background:repeating-linear-gradient(#fff 0 10px,#111 10px 20px)}
.finish-line{background:linear-gradient(45deg,#111 25%,transparent 25%) 0 0/10px 10px,linear-gradient(45deg,transparent 75%,#111 75%) 0 0/10px 10px,linear-gradient(45deg,transparent 75%,#111 75%) 5px -5px/10px 10px,linear-gradient(45deg,#111 25%,#fff 25%) 5px -5px/10px 10px}
.auto-roll{margin-bottom:7px}
.big-roll.ready{box-shadow:0 0 0 3px #8cff8c inset,0 0 12px #8cff8c}
.result-modal{position:fixed;inset:0;z-index:10000;background:#000c;display:grid;place-items:center;padding:14px}
.result-modal.hidden{display:none}
.result-card{width:min(680px,96vw);max-height:90vh;overflow:auto;background:#ececec;border:3px solid #444;border-radius:10px;padding:16px;box-shadow:0 25px 100px #000;color:#111}
.result-card h2{margin:0 0 12px;text-align:center}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.result-stats>div{background:#dfe4e7;border:1px solid #999;border-radius:6px;padding:10px;text-align:center}
.result-stats strong{display:block;font-size:30px}
.result-ranking{border:1px solid #999;background:#fff;max-height:46vh;overflow:auto;margin-bottom:12px}
.result-row{display:grid;grid-template-columns:38px 48px 1fr auto;gap:7px;padding:7px;border-bottom:1px solid #ddd;align-items:center}
.result-row.me{background:#fff0a6;font-weight:900}

.strategy-box{border:1px solid #666;background:#bfc2c4;padding:8px}
.strategy-box>strong{display:block;font-size:12px;margin-bottom:6px}
.strategy-buttons{display:flex;gap:5px}
.strategy-buttons button{flex:1;padding:6px 4px;font-size:11px}
.strategy-buttons button.active{background:linear-gradient(#fff27a,#dda21c);box-shadow:inset 0 0 0 2px #7c5a00}
.effort-line{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11px}
.effort-meter{flex:1;height:10px;background:#18201a;border:1px solid #555;overflow:hidden;border-radius:7px}
.effort-meter div{height:100%;width:50%;background:linear-gradient(90deg,#87ce49,#ffd94c)}
.strategy-box small{display:block;margin-top:5px;color:#333}

/* v0.7 arrivée fluide */
.finish-line{will-change:left}

/* v1.0: result modal appears immediately but lets the finish sweep remain visible behind */
.result-modal{background:rgba(0,0,0,.58)}

.dice-result-line{display:flex;align-items:center;gap:10px;margin-top:4px}
.dice-total{font-size:28px;min-width:30px;text-align:center}
.next-roll-info{font-size:12px;margin:5px 0;color:#222}

/* v1.1 */
.admin-controls{display:flex;gap:6px}
.admin-controls.hidden{display:none}
.admin-start{background:linear-gradient(#a9e56f,#65aa2f)}
.admin-finish{background:linear-gradient(#ffd86a,#dd8d19)}

.my-rank-badge{
  position:absolute;right:10px;top:10px;z-index:6;
  background:rgba(20,20,20,.82);color:#fff;border:2px solid #eee;
  border-radius:5px;padding:6px 10px;font-weight:900;font-size:14px;
  display:none;pointer-events:none
}

.race-overlay{max-height:none;overflow:visible;width:330px}
.race-overlay h3.clickable{cursor:pointer;user-select:none}
.race-overlay h3.clickable:hover{text-decoration:underline}
.race-overlay.expanded{width:360px}
.race-overlay table{background:#e4e4e4}

.middle-column{height:clamp(300px,calc(100vh - 540px),520px)}
.chat{min-height:0;display:flex;flex-direction:column}
.chat-log{height:auto;min-height:0;flex:1;overflow:auto}
.chat form{flex:0 0 auto}

.rider .jersey{top:-10px;left:13px}
.rider .bib{top:-10px}

@media(max-width:1000px){
  .middle-column{height:auto}
  .chat{min-height:280px}
  .chat-log{height:190px;flex:none}
  .race-overlay{max-height:none;overflow:visible}
}

/* v1.2 — top bar stays on one row on desktop */
.topbar{
  display:flex!important;
  grid-template-columns:none!important;
  height:46px;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.topbar .brand{flex:0 0 auto}
.topbar .top-status{
  flex:1 1 320px;
  min-width:220px;
  max-width:520px;
  margin:0 auto;
}
.topbar .admin-controls{flex:0 0 auto}
.topbar>#rulesBtn,.topbar>#profileBtn,.topbar>#authBtn{flex:0 0 auto}

/* Smooth movement now comes from requestAnimationFrame, not delayed CSS interpolation. */
.rider{transition:none!important}

/* Keep every rider comfortably inside the asphalt. */
.rider .jersey{
  top:-16px!important;
  left:15px!important;
  z-index:3;
}
.rider .bib{top:-13px!important}

/* Readable next-roll timer */
.next-roll-info{
  color:#fff!important;
  font-weight:700;
  text-shadow:0 1px 1px #000;
}
.next-roll-info b{color:#ffe15a!important}

/* Faster visual dash animation is driven by JS at 60 fps. */
.road-dashes{will-change:background-position}
.finish-line{will-change:left}

/* Result rows remain frozen when the background advances to a new race. */
.result-ranking{min-height:120px}

@media(max-width:1100px){
  .topbar{flex-wrap:wrap;height:auto}
  .topbar .top-status{order:10;flex-basis:100%;max-width:none}
}

/* v1.3 — speed/animation corrections */
.road-dashes{
  left:-123px!important;
  right:auto!important;
  width:calc(100% + 246px)!important;
  will-change:transform!important;
  background-position:0 0!important;
}

.roll-zone{
  min-height:112px!important;
  border-width:6px!important;
  gap:2px;
  padding:4px 0;
}
.big-roll{
  font-size:16px!important;
  padding:7px 16px!important;
  border-width:2px!important;
}
.auto-roll{margin-bottom:2px!important}
.cooldown{margin-top:5px!important;height:9px!important}
.next-roll-info{margin:2px 0!important;line-height:1.1}
.speed-info{
  color:#fff;
  margin:1px 0 2px;
  font-size:12px;
}
.speed-info b{color:#ffe15a}
.controls{gap:6px!important}
.strategy-box{padding:6px!important}
.effort-line{margin-top:5px!important}

/* v1.4 synchronization pass */
.road-dashes{
  left:0!important;
  right:0!important;
  width:auto!important;
  transform:none!important;
  will-change:background-position!important;
}
.rider{will-change:left,top}

/* Slightly more compact controls so effort/tactics stay visible. */
.roll-zone{min-height:96px!important;padding:2px 0!important}
.big-roll{padding:5px 14px!important;min-height:34px!important}
.control-head>div{padding:5px!important}
.controls{padding:6px!important}


/* v1.5 — finish/render rebuild */
.camera-marker{display:none!important}

/* Oversized repeating strip translated at 60 fps. This is deliberately NOT
   background-position because some Chromium builds visually coalesced it. */
.road-dashes{
  left:-123px!important;
  right:auto!important;
  width:calc(100% + 246px)!important;
  background-position:0 0!important;
  transform:translate3d(0,0,0)!important;
  will-change:transform!important;
  backface-visibility:hidden;
}

/* Riders should react directly to server interpolation; no CSS lag. */
.rider{transition:none!important;will-change:left,top}

/* Keep line under rider labels/markers when it approaches. */
.finish-line,.start-line{z-index:1!important}
.rider{z-index:3}
.rider.focus{z-index:5}


/* v1.6 — definitive road motion + coherent local finish */
.road-dashes{
  --road-x:0px;
  left:-123px!important;
  right:auto!important;
  width:calc(100% + 246px)!important;
  transform:translate3d(var(--road-x),0,0)!important;
  will-change:transform!important;
  backface-visibility:hidden;
}
.finish-line{z-index:2!important}


/* v1.7 — stable bottle hitbox / synchronized finish */
.bottle{
  position:relative;
  z-index:3;
  width:104px;
  min-height:44px;
  padding:5px 10px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
}
.bottle>*{pointer-events:none!important}
.bottle:disabled{cursor:not-allowed;opacity:.62}
.bottle-icon{font-size:22px;line-height:1}
#bottleLabel{font-size:18px;line-height:1;white-space:nowrap}

/* v1.8 — focus sans halo jaune */
.rider.focus{filter:drop-shadow(0 2px 1px #0009)!important}


/* v1.9 — persistent world-space road ===================================== */
/* The road is no longer time-scrolled. JS computes the exact pattern phase
   from camera world coordinates on every frame. */
.road-dashes{
  left:0!important;
  right:0!important;
  width:auto!important;
  transform:none!important;
  background-repeat:repeat-x!important;
  will-change:background-position!important;
}
.start-line,.finish-line{
  will-change:left;
}
/* Focus marker only: no lamp-like glow. */
.rider.focus{filter:none!important}


/* v1.9.1 — WORLD ROAD dash phase fix
   Legacy versions had `background-position:0 0!important`, which silently
   froze the v1.9 world-space dashes. The phase is now supplied through a CSS
   variable and consumed by an equally-important FINAL rule. */
.road-dashes{
  background-position:var(--world-dash-phase, 0px) 0!important;
  transform:none!important;
  will-change:background-position!important;
}


/* v2.0 — starting groups, teams, custom rider sprites =================== */
.topbar>#teamBtn{flex:0 0 auto}

.rider{
  width:44px!important;
  height:38px!important;
}
.rider .bike,
.rider .jersey{display:none!important}
.rider .bike-sprite{
  position:absolute;
  left:5px;
  top:2px;
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
}
.rider .bib{
  left:34px!important;
  top:-9px!important;
  min-width:18px;
  text-align:center;
  font-style:normal;
  font-weight:900;
  line-height:1.15;
  padding:1px 3px;
  box-shadow:0 1px 1px #0005;
}
.rider.focus:after{
  left:13px!important;
  top:-20px!important;
}
.rider.mine .bib{
  background:#ffe666;
  color:#111;
}

.profile-customizer{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  align-items:start;
  margin:10px 0 18px;
}
.profile-avatar-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px;
  border:1px solid #999;
  background:#fff;
  border-radius:6px;
}
.profile-avatar-box img{
  width:136px;
  height:136px;
  object-fit:contain;
  image-rendering:auto;
}
.profile-avatar-box small{color:#666;text-align:center}
#avatarForm label{
  display:grid;
  grid-template-columns:1fr 64px;
  align-items:center;
  gap:10px;
}
#avatarForm input[type=color],
.team-color-form input[type=color]{
  width:58px;
  height:36px;
  padding:2px;
  cursor:pointer;
}

.team-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.team-card{
  border:1px solid #999;
  background:#f7f7f7;
  border-radius:6px;
  padding:12px;
}
.team-card h3{margin-top:0}
.team-code-box{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  border:1px solid #888;
  background:#f8f8f8;
  padding:10px;
  border-radius:6px;
}
.team-code-box span{font-size:12px;color:#555}
.team-code-box strong{
  font:900 22px Consolas,monospace;
  letter-spacing:2px;
  background:#222;
  color:#fff;
  padding:5px 8px;
  border-radius:4px;
}
.team-bib-preview{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
}
.team-bib-preview b{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:25px;
  border:2px solid #222;
  border-radius:4px;
  font-size:14px;
}
.team-color-form{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px!important;
  margin-bottom:14px;
}
.team-color-form label{
  display:flex;
  align-items:center;
  gap:8px;
}
.team-members{
  border:1px solid #999;
  background:#fff;
  margin-bottom:12px;
}
.team-member{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 8px;
  border-bottom:1px solid #ddd;
}
.team-member:last-child{border-bottom:0}
.team-kick,.danger-btn{
  border:2px solid #762d2d;
  background:linear-gradient(#ffb0a8,#d55248);
  color:#491111;
  font-weight:900;
  border-radius:5px;
  padding:5px 9px;
  cursor:pointer;
}
.danger-btn{margin-top:4px}

@media(max-width:700px){
  .profile-customizer,.team-split{grid-template-columns:1fr}
  .profile-avatar-box img{width:102px;height:102px}
  .team-color-form{align-items:flex-start!important;flex-direction:column!important}
}


/* v2.1 — road depth + public career profiles =========================== */
/* Rider depth is assigned inline from lane in app.js. The focus arrow and
   bib stay in the cyclist's stacking context instead of overriding depth. */
.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 16px;
}
.profile-stats>div{
  min-width:0;
  padding:10px 8px;
  border:1px solid #999;
  border-radius:6px;
  background:linear-gradient(#fff,#d9d9d9);
  text-align:center;
  box-shadow:inset 0 1px #fff;
}
.profile-stats span{
  display:block;
  margin-bottom:4px;
  color:#555;
  font-size:12px;
  font-weight:800;
}
.profile-stats strong{
  display:block;
  color:#222;
  font-size:24px;
  line-height:1.05;
}
.public-team{margin:0 0 8px}
@media(max-width:560px){
  .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* v2.2 — stable public-player list ====================================== */
.race-players{
  padding:7px;
}
.race-players-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.race-players-head>span{
  color:#666;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.race-players-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px 7px;
  min-height:27px;
  align-items:center;
}
.race-player-row{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:3px 6px;
  border:1px solid #9a9a9a;
  border-radius:4px;
  background:#f5f5f5;
  cursor:pointer;
  font-size:12px;
}
.race-player-row:hover{background:#fff}
.race-player-bib{
  color:#555;
  font-weight:900;
  white-space:nowrap;
}
.race-player-name{
  display:flex;
  min-width:0;
  align-items:center;
  gap:5px;
}
.race-player-profile{
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#173f70;
  font:inherit;
  font-weight:900;
  text-decoration:underline;
  cursor:pointer;
  white-space:nowrap;
}
.race-player-profile:hover{color:#0a69b8}
.race-player-profile:focus-visible{
  outline:2px solid #0a69b8;
  outline-offset:2px;
  border-radius:2px;
}
.race-player-guest{
  font-weight:800;
  white-space:nowrap;
}
.race-player-team{
  color:#777;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.race-players-empty{
  color:#777;
  font-size:12px;
  font-style:italic;
}


/* v2.3 — MOBILE LAYOUT REWORK ==========================================
   Desktop remains untouched. Everything below only applies <= 700 px. */
@media(max-width:700px){

  .topbar{
    gap:6px!important;
    padding:6px 7px!important;
    justify-content:flex-start;
  }
  .topbar .brand{
    flex:1 1 auto!important;
    min-width:190px;
    font-size:19px!important;
  }
  .topbar .top-status{
    order:20!important;
    flex:1 0 100%!important;
    min-width:0!important;
    max-width:none!important;
    text-align:center;
  }
  .topbar button{
    padding:6px 9px;
    font-size:12px;
  }

  /* Closed by default on phone. Tap to reveal Top 10. */
  .race-overlay.mobile-collapsed{
    width:auto!important;
    min-width:205px;
    max-width:calc(100% - 20px);
    overflow:visible!important;
  }
  .race-overlay.mobile-collapsed h3{
    margin:5px 9px!important;
    white-space:nowrap;
  }
  .race-overlay.expanded{
    width:min(330px,calc(100% - 20px))!important;
    max-height:285px!important;
    overflow:auto!important;
  }

  .road{height:320px!important}
  .race-footer{
    grid-template-columns:92px minmax(0,1fr) 92px!important;
    gap:5px;
    padding:5px 7px!important;
    font-size:10px!important;
  }
  .race-footer strong{font-size:13px!important}

  /* Allows the middle-column children to be reordered with the controls. */
  .dashboard{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px!important;
  }
  .middle-column{
    display:contents!important;
  }

  /* Spectator: join card first. */
  .identity{
    order:10!important;
    min-height:62px;
  }
  .chain{display:none!important}

  /* Player: controls replace the join card. */
  .controls{
    order:10!important;
    display:none!important;
    padding:7px!important;
  }
  body.has-my-rider .identity{
    display:none!important;
  }
  body.has-my-rider .controls{
    display:flex!important;
  }

  .control-head{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .control-head>div{padding:5px!important}
  .dice-pair b{
    width:42px!important;
    height:42px!important;
    font-size:22px!important;
  }
  .roll-zone{min-height:108px!important}
  .strategy-box{padding:6px!important}

  /* Duplicate of the live ranking on mobile, so save vertical space. */
  .mini-standings{
    display:none!important;
  }

  /* Requested phone order. */
  .chat{
    order:20!important;
    min-height:215px!important;
  }
  .chat-log{height:165px!important}
  .spectate{order:30!important}
  .race-players{order:40!important}
  .events{order:50!important}

  .spectate strong{flex:1 0 100%}
  .spectate button{min-height:34px}
  .race-players-list{gap:5px!important}

  .events h2{
    font-size:15px!important;
    padding:7px!important;
  }
  .event-row{font-size:12px}
}

@media(max-width:390px){
  .topbar .brand{
    min-width:165px;
    font-size:17px!important;
    letter-spacing:2px!important;
  }
  .topbar button{
    padding:5px 7px;
    font-size:11px;
  }
  .race-overlay{
    left:6px!important;
    top:6px!important;
  }
  .road{height:300px!important}
  .identity{
    padding:7px 9px!important;
    gap:6px;
  }
  .identity strong{font-size:16px!important}
  .join{padding:8px 9px!important}
  .controls{padding:6px!important}
  .bottle{width:96px!important}
  .spectate{gap:5px!important}
  .spectate input{width:56px!important}
}


/* v2.3.1 — mobile previous-race drawer ================================ */
@media(max-width:700px){
  /* Always above bikes, bibs and focus arrow. Riders use the low depth range. */
  .race-overlay{
    z-index:35!important;
  }

  /* "Dernière course" closed state: title only. */
  .race-overlay.last-results-collapsed{
    width:auto!important;
    min-width:220px;
    max-width:calc(100% - 20px);
    max-height:none!important;
    overflow:visible!important;
  }
  .race-overlay.last-results-collapsed h3{
    margin:6px 10px!important;
    white-space:nowrap;
  }

  /* Open state: show the Top 10 result as a drawer above the peloton. */
  .race-overlay.last-results-expanded{
    width:min(360px,calc(100% - 20px))!important;
    max-height:320px!important;
    overflow:auto!important;
  }

  .race-overlay #lastRaceTitle.clickable{
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
  }
}


/* v2.4 — deterministic stacking on mobile and desktop =================
   Individual riders still use lane z-index 1..11 INSIDE this layer, while
   race tables are in a completely higher stacking context. */
#ridersLayer{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}
.race-overlay{
  z-index:100!important;
}

/* Rank badge is intentionally above the road but below opened tables. */
.my-rank-badge{
  z-index:50!important;
}


/* v2.4.1 — modal stacking fix =========================================
   Race overlays must stay above riders, but all real dialogs must stay above
   the race overlay so login/profile/team forms remain usable. */
.modal{
  z-index:1000!important;
}
.toast{
  z-index:1100!important;
}


/* v2.4.2 — team member public-profile links =========================== */
.team-member-identity{
  display:flex;
  align-items:center;
  min-width:0;
  gap:2px;
}
.team-member-profile{
  padding:0;
  border:0;
  background:transparent;
  color:#173f70;
  font:inherit;
  font-weight:800;
  text-align:left;
  text-decoration:underline;
  cursor:pointer;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.team-member-profile:hover{
  color:#0a69b8;
}
.team-member-profile:focus-visible{
  outline:2px solid #0a69b8;
  outline-offset:2px;
  border-radius:2px;
}
.team-owner-crown{
  flex:0 0 auto;
}


/* v2.4.4 — previous effective roll ====================================
   A slim read-only strip: enough information to decide whether a bottle is
   worthwhile, without stealing space from dice/tactics on phones. */
.previous-roll-hint{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  margin-top:-4px;
  border:1px solid #777;
  border-radius:4px;
  background:#d7d9da;
  color:#333;
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  text-align:center;
}
.previous-roll-hint.useful{
  background:#dff8ff;
  border-color:#47839a;
  color:#123c4a;
}

@media(max-width:700px){
  .previous-roll-hint{
    min-height:21px;
    padding:2px 6px;
    margin-top:-3px;
    font-size:11px;
  }
}

/* v2.5 — terrain profile, slopes and drafting ========================== */
.road.terrain-enabled{
  background:linear-gradient(#46ace6 0 54%,#b9dff0 54% 58%,#5f8d48 58% 100%)!important;
}
.road.terrain-enabled>.curb,
.road.terrain-enabled>.road-dashes{
  display:none!important;
}
.road-terrain-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.terrain-road-fill{
  fill:#747474;
  stroke:none;
}
.terrain-curb{
  fill:none;
  stroke:#e1e0ce;
  stroke-width:9;
  vector-effect:non-scaling-stroke;
}
.terrain-dashes{
  fill:none;
  stroke:#eee;
  stroke-width:6;
  stroke-linecap:butt;
  vector-effect:non-scaling-stroke;
}
.start-line,.finish-line{
  bottom:auto!important;
  transform-origin:center center;
  z-index:5!important;
}
.rider .bike-sprite{
  transform-origin:50% 58%;
  will-change:transform;
}
.race-conditions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:3px;
  min-height:18px;
  font-size:11px;
  color:#d8efe2;
}
#draftInfo.active{
  color:#8fffb4;
  font-weight:900;
}
.event-row small{
  float:right;
  opacity:.78;
  font-size:10px;
}
@media(max-width:700px){
  .race-conditions{
    font-size:10px;
    gap:2px 7px;
    min-height:15px;
    margin-top:1px;
  }
  .terrain-curb{stroke-width:7}
  .terrain-dashes{stroke-width:5}
}


/* v2.8 — stable slopes, protected joins, chat scrollback =============== */
.rider{
  transition:none!important;
  will-change:transform!important;
}
.rider .bike-sprite{
  transition:none!important;
}

.identity-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.join-bib-picker{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
}
.join-grid-open{
  padding:6px 9px;
  border:1px solid #555;
  border-radius:4px;
  background:linear-gradient(#f5f5f5,#c8c8c8);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.join-bib-choice{
  white-space:nowrap;
  color:#333!important;
  background:#fff;
  border:1px solid #777;
  border-radius:4px;
  padding:6px 8px;
}

.chat{
  min-height:360px!important;
}
.chat-log{
  height:315px!important;
  min-height:315px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.public-profile-head{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.public-profile-avatar{
  width:150px;
  min-height:150px;
  display:grid;
  place-items:center;
  border:1px solid #999;
  border-radius:6px;
  background:#fff;
}
.public-profile-avatar img{
  width:136px;
  height:136px;
  object-fit:contain;
}
.public-profile-summary{min-width:0}

@media(max-width:700px){
  .identity-actions{
    width:100%;
    justify-content:space-between;
  }
  .join-bib-picker{
    flex:1 1 100%;
    min-width:0;
  }
  .join-grid-open{
    flex:1 1 auto;
    min-width:0;
  }
  .join-bib-choice{
    flex:0 0 auto;
  }
  .chat{
    min-height:390px!important;
  }
  .chat-log{
    height:320px!important;
    min-height:320px!important;
  }
  .public-profile-head{
    grid-template-columns:112px minmax(0,1fr);
    gap:9px;
  }
  .public-profile-avatar{
    width:112px;
    min-height:112px;
  }
  .public-profile-avatar img{
    width:104px;
    height:104px;
  }
}


/* v2.9 — chat équipe, aspiration verrouillée, classements généraux */
.chat{min-height:300px!important}
.chat-log{height:255px!important;min-height:255px!important;flex:none!important}
.chat-locked input,.chat-locked button{opacity:.6;cursor:not-allowed}
.chat-line.team-message{color:#9ee7ff}
.chat-line .team-tag{display:inline-block;margin-right:3px;padding:0 4px;border:1px solid #55bcd9;border-radius:3px;color:#bff3ff;font-size:10px;font-weight:900}
.leaderboard-rule{font-size:12px;color:#555}
.leaderboard-wrap{overflow:auto;max-width:100%}
.general-leaderboard{width:100%;border-collapse:collapse;min-width:590px}
.general-leaderboard th,.general-leaderboard td{border:1px solid #999;padding:6px;text-align:center}
.general-leaderboard th:nth-child(2),.general-leaderboard td:nth-child(2){text-align:left}
.general-leaderboard tbody tr:nth-child(odd){background:#f7f7f7}
.general-leaderboard small{display:block;color:#666;font-size:10px;margin-top:2px}
.leaderboard-player-link{border:0;background:transparent;padding:0;color:#174a79;text-decoration:underline;font:inherit;font-weight:900;cursor:pointer;text-align:left}
.leaderboard-team-name{font-weight:900}
@media(max-width:700px){.chat{min-height:330px!important}.chat-log{height:260px!important;min-height:260px!important;flex:none!important}.topbar>#leaderboardsBtn{flex:0 0 auto}}


/* v2.9.2 — mobile overlay + bib picker ================================= */
.join-bib-picker.hidden{
  display:none!important;
}
@media(max-width:700px){
  .race-overlay.mobile-collapsed{
    width:auto!important;
    min-width:190px!important;
    max-width:calc(100% - 16px)!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .race-overlay.mobile-collapsed table{
    display:none!important;
  }
  .race-overlay #liveRankingTitle.clickable{
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
  }
}


/* v2.9.3 — player rider profile interaction ============================ */
.rider.human-controlled{
  pointer-events:auto;
}
.rider.profile-clickable{
  cursor:pointer;
}
.rider.profile-clickable:hover .bib{
  outline:2px solid #fff;
  outline-offset:1px;
}
.rider-hover-card{
  position:fixed;
  z-index:1300;
  width:max-content;
  min-width:180px;
  max-width:240px;
  padding:8px 10px;
  border:2px solid #333;
  border-radius:6px;
  background:rgba(20,24,28,.96);
  color:#fff;
  box-shadow:0 5px 18px #0008;
  font-size:12px;
  line-height:1.35;
  pointer-events:none;
}
.rider-hover-card.hidden{display:none!important}
.rider-hover-card strong{
  display:block;
  margin-bottom:4px;
  color:#ffe56a;
  font-size:14px;
}
.rider-hover-card small{
  display:block;
  margin-top:5px;
  color:#b8dfff;
}
.rider-hover-podiums{
  margin-top:3px;
  white-space:nowrap;
}
.rider-hover-guest{
  color:#aaa;
  font-style:italic;
  margin-bottom:2px;
}

@media(max-width:700px){
  /* Mobile has no useful hover; tap on a registered rider still opens profile. */
  .rider-hover-card{display:none!important}
}


/* v2.9.5 — contextual modal navigation ================================= */
.modal-back-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0 0 12px;
  padding:6px 10px;
  border:1px solid #666;
  border-radius:5px;
  background:linear-gradient(#fff,#d5d5d5);
  color:#222;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 1px 0 #fff inset;
}
.modal-back-btn:hover{
  background:linear-gradient(#fff,#c5d9ee);
}


/* v2.9.6 — shoe colors, mobile color editor, wider leaderboards ========= */
@media(min-width:860px){
  .modal.leaderboards-modal .modal-card{
    width:820px!important;
    min-width:820px!important;
  }
  .modal.leaderboards-modal .general-leaderboard{
    min-width:0!important;
  }
}

/* On mobile, replace the OS/browser color dialog with our own HSV editor.
   This preserves the CURRENT color values instead of opening custom sliders
   at zero on some Android/Samsung browsers. */
@media(max-width:700px){
  .mobile-native-color-input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  .mobile-color-swatch{
    width:58px;
    height:42px;
    padding:3px;
    border:2px solid #666;
    border-radius:4px;
    background:var(--mobile-swatch,#fff);
    box-shadow:inset 0 0 0 3px #eee;
    cursor:pointer;
  }
}

.mobile-color-editor{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:18px;
  background:#0009;
}
.mobile-color-editor.hidden{display:none!important}
.mobile-color-card{
  width:min(430px,94vw);
  max-height:92vh;
  overflow:auto;
  padding:20px;
  border-radius:18px;
  background:#f5f5f7;
  color:#111;
  box-shadow:0 16px 55px #0008;
}
.mobile-color-card h3{
  margin:0 0 14px;
  font-size:24px;
}
.mobile-color-preview{
  height:62px;
  margin-bottom:16px;
  border:2px solid #777;
  border-radius:8px;
}
.mobile-color-card label{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
  margin:12px 0;
  font-size:16px;
  font-weight:800;
}
.mobile-color-card label input[type=range]{
  grid-column:1 / -1;
  width:100%;
  margin:0;
  padding:0;
}
.mobile-color-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.mobile-color-actions button{
  padding:9px 16px;
  border:1px solid #777;
  border-radius:7px;
  font-weight:800;
}
#mobileColorApply{
  background:#2f7bdc;
  color:#fff;
}


/* v2.9.7 — single shoe color, desktop-like mobile picker, mobile standings */

/* The original mobile rule hides the controls copy. Once JS moves the same
   miniStandings node below the event grid, show it again as its own panel. */
@media(max-width:700px){
  .mini-standings.mobile-bottom-standings{
    display:block!important;
    order:60!important;
    max-height:300px!important;
    overflow:auto!important;
    background:linear-gradient(#f7f7f7,#d5d5d5);
  }
  .mini-standings.mobile-bottom-standings::before{
    content:'CLASSEMENT';
    display:block;
    padding:7px 8px;
    border-bottom:2px solid #555;
    font-size:15px;
    font-weight:900;
  }
}

/* Mobile picker inspired by the desktop/browser color selector:
   2D saturation/value square + hue strip + RGB fields. */
.mobile-color-card.desktop-like-picker{
  width:min(460px,94vw);
}
.mobile-sv-wrap{
  margin:8px 0 14px;
}
.mobile-sv-area{
  --picker-hue:#ff0000;
  position:relative;
  width:100%;
  aspect-ratio:1.75/1;
  min-height:170px;
  max-height:260px;
  overflow:hidden;
  border:1px solid #777;
  border-radius:5px;
  background:
    linear-gradient(to top,#000,transparent),
    linear-gradient(to right,#fff,transparent),
    var(--picker-hue);
  touch-action:none;
}
.mobile-sv-cursor{
  position:absolute;
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 2px #1118;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.mobile-hue-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin:8px 0 16px;
}
.mobile-hue-row .mobile-color-preview{
  display:block;
  width:44px;
  height:44px;
  margin:0;
  border:1px solid #666;
  border-radius:50%;
}
.mobile-hue-slider{
  width:100%;
  height:18px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #888;
  border-radius:2px;
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.mobile-hue-slider::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:26px;
  border:3px solid #fff;
  border-radius:9px;
  background:transparent;
  box-shadow:0 0 0 2px #333;
}
.mobile-hue-slider::-moz-range-thumb{
  width:14px;
  height:22px;
  border:3px solid #fff;
  border-radius:9px;
  background:transparent;
  box-shadow:0 0 0 2px #333;
}
.mobile-rgb-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:10px;
}
.mobile-rgb-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  text-align:center;
  font-size:12px;
  font-weight:800;
}
.mobile-rgb-grid input{
  min-width:0;
  width:100%;
  box-sizing:border-box;
  padding:8px 4px;
  text-align:center;
  font-size:16px;
  border:1px solid #aaa;
  background:#fff;
}


/* v3.0 — momentum / race dynamics ===================================== */
#momentumInfo{
  font-weight:800;
  transition:color .15s ease;
}
#momentumInfo.positive{color:#176b38}
#momentumInfo.negative{color:#9e2b25}

@media(max-width:700px){
  .race-conditions{
    gap:3px!important;
  }
  #momentumInfo{
    display:block;
    width:100%;
  }
}


/* v3.0.1 — stable controls / dice interaction ========================== */
button:not(:disabled),
a[href],
.clickable,
[role="button"]:not([aria-disabled="true"]),
.playerlink,
.leaderboard-player-link,
.team-member-profile{
  cursor:pointer!important;
}

.dice-card{
  position:relative;
}
.auto-icon-btn{
  position:absolute;
  top:5px;
  right:5px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:2px;
  border:1px solid #666;
  border-radius:4px;
  background:linear-gradient(#f8f8f8,#c9c9c9);
  box-shadow:inset 0 1px #fff,0 1px 1px #0005;
}
.auto-icon-btn img{
  display:block;
  width:18px;
  height:19px;
}
.auto-icon-btn.active{
  background:linear-gradient(#b7ea88,#69b43a);
  border-color:#3d7620;
  box-shadow:inset 0 2px 4px #24561188;
}
.auto-icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed!important;
}

.dice-click-zone{
  display:inline-block;
  border-radius:9px;
  padding:2px 4px;
  transition:background .12s ease,box-shadow .12s ease;
}
.dice-click-zone.manual-ready{
  cursor:pointer!important;
  background:#fff7a8;
  box-shadow:0 0 0 2px #b78000;
}
.dice-click-zone.manual-ready:hover{
  background:#fff08a;
}
.dice-click-zone.manual-wait{
  cursor:default;
}
.internal-roll-btn{
  display:none!important;
}

/* Fixed geometry: status refreshes can no longer move the tactic buttons. */
.roll-zone{
  height:118px!important;
  min-height:118px!important;
  max-height:118px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:4px 4px!important;
  gap:0!important;
  justify-content:center!important;
}
.race-conditions{
  width:96%!important;
  height:45px!important;
  min-height:45px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(3,15px)!important;
  gap:0!important;
  margin:1px auto!important;
  align-items:center!important;
}
.race-conditions>span{
  display:block!important;
  min-width:0!important;
  height:15px!important;
  line-height:15px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}
.speed-info,
.next-roll-info{
  height:15px!important;
  line-height:15px!important;
  margin:0!important;
}
.cooldown{
  flex:0 0 9px!important;
  margin-top:3px!important;
}
#momentumInfo{
  width:100%;
}

@media(max-width:700px){
  .roll-zone{
    height:116px!important;
    min-height:116px!important;
    max-height:116px!important;
  }
  .race-conditions{
    height:42px!important;
    min-height:42px!important;
    grid-template-rows:repeat(3,14px)!important;
    font-size:10px!important;
  }
  .race-conditions>span{
    height:14px!important;
    line-height:14px!important;
  }
  .auto-icon-btn{
    width:26px;
    height:26px;
    top:4px;
    right:4px;
  }
}


/* v3.0.3 — stop abandoned full-AI race ================================ */
#joinBtn.stop-ai-race{
  background:linear-gradient(#ffe89a,#e1b83f)!important;
  border-color:#765a00!important;
  color:#2d2400!important;
  cursor:pointer!important;
}
#joinBtn.stop-ai-race:hover{
  background:linear-gradient(#fff0b5,#edc84f)!important;
}


/* v3.0.5 — paginated rankings + team statistics ======================= */
.leaderboard-summary{
  margin:8px 0 5px;
  font-size:12px;
  color:#555;
  text-align:right;
}
.leaderboard-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:10px;
}
.leaderboard-pagination button{
  min-width:120px;
  padding:6px 10px;
}
.leaderboard-pagination strong{
  min-width:90px;
  text-align:center;
}
.leaderboard-tabs button.active{
  background:linear-gradient(#d7ecff,#99c6ef);
  font-weight:900;
}
.leaderboard-loading{
  padding:20px;
  text-align:center;
}

.team-modal-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:18px;
  align-items:start;
}
.team-modal-main{min-width:0}
.team-stats-panel{
  border:2px solid #777;
  border-radius:6px;
  background:linear-gradient(#fafafa,#d8d8d8);
  padding:12px;
}
.team-stats-panel h3{
  margin:0 0 10px;
  text-align:center;
}
.team-rank-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid #999;
  background:#fff;
}
.team-rank-card span{
  font-size:12px;
  font-weight:800;
}
.team-rank-card strong{
  font-size:24px;
}
.team-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.team-stats-grid>div{
  display:grid;
  gap:3px;
  padding:8px 5px;
  border:1px solid #aaa;
  background:#f8f8f8;
  text-align:center;
}
.team-stats-grid span{
  font-size:10px;
  font-weight:800;
  color:#555;
}
.team-stats-grid strong{
  font-size:18px;
}
.team-stats-note{
  margin:9px 0 0;
  color:#666;
  font-size:10px;
  text-align:center;
}

@media(min-width:920px){
  .modal.team-modal .modal-card{
    width:900px!important;
    max-width:calc(100vw - 40px)!important;
  }
}
@media(max-width:919px){
  .team-modal-layout{
    grid-template-columns:1fr;
  }
  .team-stats-panel{
    order:2;
  }
}
@media(max-width:700px){
  .leaderboard-pagination{
    gap:6px;
  }
  .leaderboard-pagination button{
    min-width:0;
    flex:1 1 0;
    padding:6px 4px;
  }
  .leaderboard-pagination strong{
    min-width:74px;
    font-size:11px;
  }
}


/* v3.0.6 — restricted skin tone palette ================================ */
.skin-tone-field{
  margin:0;
  padding:7px 8px 8px;
  border:1px solid #999;
  border-radius:4px;
}
.skin-tone-field legend{
  padding:0 4px;
  font-weight:800;
}
.skin-tone-options{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.skin-tone-choice{
  position:relative;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center;
  gap:3px!important;
  margin:0!important;
  cursor:pointer!important;
}
.skin-tone-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.skin-tone-swatch{
  display:block;
  width:42px;
  height:34px;
  box-sizing:border-box;
  border:2px solid #666;
  border-radius:5px;
  background:var(--skin-tone);
  box-shadow:inset 0 0 0 2px #fff8;
}
.skin-tone-choice input:checked + .skin-tone-swatch{
  border:3px solid #111;
  box-shadow:0 0 0 2px #f1c40f,inset 0 0 0 1px #fff8;
}
.skin-tone-choice small{
  font-size:9px;
  color:#666;
}
.skin-tone-choice:hover .skin-tone-swatch{
  transform:translateY(-1px);
}

@media(max-width:700px){
  .skin-tone-options{
    justify-content:space-between;
    gap:5px;
  }
  .skin-tone-swatch{
    width:40px;
    height:36px;
  }
}


/* v3.0.7 — skin popup, sleeves, historical team stats, draft guide ===== */
.skin-picker-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  font-weight:800;
  position:relative;
}
.skin-picker-wrap{position:relative}
.skin-palette-trigger{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:100px;
  padding:4px 7px;
}
.skin-palette-trigger>span{
  width:42px;
  height:30px;
  display:block;
  border:2px solid #666;
  border-radius:4px;
  background:var(--skin-tone);
  box-shadow:inset 0 0 0 2px #fff8;
}
.skin-palette-popover{
  position:absolute;
  z-index:25;
  top:calc(100% + 5px);
  right:0;
  width:310px;
  max-width:88vw;
  padding:8px;
  border:2px solid #555;
  border-radius:6px;
  background:#f5f5f5;
  box-shadow:0 7px 22px #0007;
}
.skin-palette-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
.skin-palette-option{
  min-width:0;
  padding:3px!important;
  border:2px solid #aaa;
  background:#fff;
  border-radius:4px;
}
.skin-palette-option>span{
  display:block;
  width:100%;
  aspect-ratio:1.15/1;
  background:var(--skin-tone);
  border:1px solid #777;
}
.skin-palette-option small{
  display:block;
  margin-top:2px;
  font-size:7px;
  line-height:1;
  color:#444;
  white-space:nowrap;
}
.skin-palette-option.selected{
  border-color:#111;
  box-shadow:0 0 0 2px #f1c40f;
}

.strategy-title-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin-bottom:6px;
  font-size:12px;
}
.strategy-title-row>strong{margin:0!important}
.strategy-title-sep{color:#555}
.draft-assist-toggle{
  display:inline-flex!important;
  align-items:center;
  gap:4px!important;
  margin:0!important;
  font-size:11px;
  font-weight:700!important;
  cursor:pointer!important;
}
.draft-assist-toggle input{
  width:15px;
  height:15px;
  margin:0;
  padding:0;
  cursor:pointer;
}
.draft-assist-zone{
  position:absolute;
  z-index:7;
  pointer-events:none;
  box-sizing:border-box;
  border:2px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.20);
  box-shadow:0 0 7px rgba(255,255,255,.30) inset;
  transform-origin:center center;
}
#ridersLayer{z-index:10!important}
.team-stat-wide{grid-column:1/-1}

@media(max-width:700px){
  .skin-palette-popover{
    position:fixed;
    left:50%;
    right:auto;
    top:50%;
    width:min(330px,92vw);
    transform:translate(-50%,-50%);
    z-index:1400;
  }
  .skin-palette-option small{font-size:6px}
  .strategy-title-row{font-size:11px;gap:3px}
  .draft-assist-toggle{font-size:10px}
}


/* v3.0.10 — visual MotoGP-style start grid ============================= */
.modal.start-grid-modal .modal-card{
  width:min(720px,96vw);
}
.start-grid-help{
  margin:0 0 8px;
  font-size:12px;
  color:#555;
}
.start-grid-direction{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:2px 3px 6px;
  font-size:11px;
  font-weight:900;
  color:#444;
}
.start-grid-board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(11,38px);
  gap:4px 10px;
  padding:8px;
  border:3px solid #404449;
  border-radius:7px;
  background:
    repeating-linear-gradient(
      to bottom,
      #777 0,
      #777 37px,
      #cfd2d4 37px,
      #cfd2d4 38px,
      #666 38px,
      #666 42px
    );
  overflow:hidden;
}
.start-grid-rider{
  min-width:0;
  height:34px;
  align-self:center;
  padding:4px 5px;
  border:2px solid #244f18;
  border-radius:5px;
  background:linear-gradient(#aee56b,#67ae36);
  color:#10220b;
  font-size:11px;
  font-weight:900;
  line-height:1.05;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.start-grid-rider.selected{
  outline:3px solid #ffe34f;
  outline-offset:1px;
  border-color:#111;
}
.start-grid-rider.occupied,
.start-grid-rider:disabled{
  opacity:.82;
  color:#555;
  border-color:#686868;
  background:linear-gradient(#e3e3e3,#bdbdbd);
  cursor:not-allowed;
  filter:none;
}
.start-grid-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.start-grid-footer small{
  color:#555;
  text-align:right;
}
.start-grid-footer button{
  flex:0 0 auto;
}

@media(max-width:700px){
  .modal.start-grid-modal{
    padding:8px;
  }
  .modal.start-grid-modal .modal-card{
    width:100%;
    max-width:100%;
    padding:14px 10px 12px;
  }
  .start-grid-direction{
    font-size:9px;
  }
  .start-grid-board{
    grid-template-rows:repeat(11,36px);
    gap:3px 5px;
    padding:5px;
  }
  .start-grid-rider{
    height:32px;
    padding:3px 2px;
    font-size:9px;
  }
  .start-grid-footer{
    align-items:stretch;
    flex-direction:column;
  }
  .start-grid-footer button{
    width:100%;
    min-height:44px;
  }
  .start-grid-footer small{
    text-align:center;
  }
}


/* v3.0.12 — username/password account management ======================= */
.auth-warning{
  margin:2px 0 4px;
  padding:8px 10px;
  border:1px solid #a48138;
  border-radius:4px;
  background:#fff4c9;
  color:#4a390f;
  font-size:11px;
  line-height:1.35;
}
.profile-security{
  margin:16px 0 12px;
  padding:12px;
  border:1px solid #9a9a9a;
  border-radius:6px;
  background:#d9dde0;
}
.profile-security h3{
  margin:0 0 10px;
}
.profile-security form{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
}
.profile-security form button{
  grid-column:1/-1;
}
.profile-security label{
  min-width:0;
}
.profile-security input{
  width:100%;
}

.modal.admin-account-modal .modal-card{
  width:min(720px,96vw);
}
.admin-account-card{
  display:grid;
  gap:12px;
}
.admin-account-card h3{
  margin:0;
}
.admin-account-help{
  margin:0;
  color:#555;
  font-size:12px;
}
.admin-user-search{
  grid-template-columns:1fr auto;
  align-items:end;
}
.admin-user-results{
  display:grid;
  gap:4px;
  max-height:220px;
  overflow:auto;
  padding:4px;
  border:1px solid #999;
  background:#f5f5f5;
}
.admin-user-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  text-align:left;
  border:1px solid #aaa;
  background:linear-gradient(#fff,#dedede);
  cursor:pointer;
}
.admin-user-row.selected{
  border:2px solid #245b86;
  background:#d7edff;
}
.admin-user-row small{
  color:#555;
}
.admin-no-users{
  margin:8px;
  text-align:center;
  color:#666;
}
.admin-password-reset{
  padding-top:10px;
  border-top:1px solid #aaa;
}
.admin-reset-result{
  display:grid;
  gap:6px;
  padding:10px;
  border:2px solid #4b7e39;
  border-radius:5px;
  background:#e8f8df;
}
.admin-reset-result code{
  display:block;
  padding:9px;
  border:1px solid #777;
  background:#fff;
  font-size:18px;
  font-weight:900;
  letter-spacing:1px;
  user-select:text;
}
.admin-reset-result small{
  color:#45533e;
}

@media(max-width:700px){
  .profile-security form{
    grid-template-columns:1fr;
  }
  .admin-user-search{
    grid-template-columns:1fr;
  }
  .admin-user-search button,
  .admin-password-reset button{
    min-height:44px;
  }
  .admin-user-row{
    align-items:flex-start;
    flex-direction:column;
  }
}