:root{color-scheme:dark;--ink:#201e19;--paper:#f1e8cf;--muted:#a5a18e;--accent:#e2a838;--line:#454238;font-family:Arial,Helvetica,sans-serif;background:var(--ink);color:var(--paper)}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;padding:11px 16px;transition:background .16s, border-color .16s}button:hover{background:#39362c;border-color:#7a725d}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:active{transform:translateY(1px)}.hidden{display:none!important}#game-shell{flex:1;min-height:0;position:relative;overflow:hidden;background:#b4ad92}#game{display:block;width:100%;height:100%;outline:none;touch-action:none}.hud{position:absolute;top:22px;left:28px;display:flex;align-items:center;gap:0;pointer-events:none;background:#201e19ed;border:1px solid #e1d8bb30;box-shadow:0 3px 16px #201e1925}.hud>div{padding:14px 23px;border-right:1px solid var(--line)}.hud small{display:block;font-size:9px;letter-spacing:1.7px;color:var(--muted);margin-bottom:7px}.hud strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.hud strong span{font-size:14px;color:var(--muted)}.hud button{pointer-events:auto;border:0;align-self:stretch;font-size:18px;padding:20px}.track-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#201e1940}.track-progress>span{display:block;height:100%;background:var(--accent);width:0}.bottom-bar{height:62px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:16px;z-index:5}.keys{display:flex;gap:22px;color:#c9c3ad;font-size:10px;align-items:center}.keys>span{white-space:nowrap;display:flex;align-items:center;gap:4px}kbd{font:10px ui-monospace,monospace;display:inline-flex;justify-content:center;align-items:center;min-width:21px;min-height:20px;padding:2px 4px;border:1px solid #625e50;border-bottom-width:2px;border-radius:3px;color:var(--paper);background:#2f2c24}.footer-actions{display:flex;gap:15px}.footer-actions button{font-size:10px;border:0;padding:7px 0;white-space:nowrap}.footer-actions kbd{margin-left:5px}#handling-button[aria-pressed="true"]{color:var(--accent)}.center-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(500px,calc(100% - 40px));padding:42px;background:#201e19f5;box-shadow:0 20px 100px #17171055;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #e8debd30}.eyebrow{font-size:9px;letter-spacing:2.5px;font-weight:600;color:var(--accent)}h1{font-size:44px;font-weight:600;line-height:1.07;letter-spacing:-1.6px;margin:20px 0}p{font-size:13px;color:#cbc5b1;line-height:1.75;margin:5px 0 20px;max-width:65ch}.center-message .primary{margin-top:10px;align-self:stretch}.primary{background:var(--accent);border-color:var(--accent);color:#211e17;text-align:left;font-weight:600;padding:17px 20px;font-size:13px;display:flex;align-items:center;justify-content:space-between}.primary:hover{background:#efbc55;border-color:#efbc55}.primary span{font-size:21px}.center-message>small{font-size:8px;letter-spacing:1px;margin-top:19px;color:var(--muted)}.center-message>button:not(.primary){border:0;font-size:12px;margin-top:15px;padding-left:0}.intro{left:28px;transform:translateY(-50%);width:420px;background:#201e19ed}.intro h1{font-size:42px}#toast{position:absolute;top:35px;right:30px;background:var(--accent);color:#211e17;font-size:12px;padding:12px 18px;opacity:0;transition:opacity .3s;pointer-events:none}#toast.visible{opacity:1}.crash-message{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);padding:22px 28px;background:#201e19ee;min-width:360px;display:grid;gap:9px;border:1px solid #e2a83870}.crash-message strong{font-size:18px;font-weight:500}.crash-message>span{font-size:11px;color:var(--muted)}.crash-auto{font-size:10px;letter-spacing:.4px;color:var(--accent)}.crash-message button{font-size:11px;color:var(--accent);margin-top:5px;text-align:left;padding:10px 12px}.crash-message button span{margin-left:20px;color:var(--paper)}.chooser{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:#24221dee;padding:32px;overflow:auto;box-shadow:-20px 0 60px #201e1960;z-index:10;backdrop-filter:blur(12px)}.chooser-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.chooser h2{font-size:35px;font-weight:500;margin:10px 0 0;letter-spacing:-1px}.chooser-heading>button{padding:8px 11px}.track-choice{display:flex;align-items:center;width:100%;text-align:left;padding:16px 0;border:0;border-bottom:1px solid var(--line);gap:18px}.track-choice img{width:110px;height:62px;object-fit:cover}.track-choice strong{display:block;font-size:15px;font-weight:500;margin-bottom:7px}.track-choice small{font-size:10px;color:var(--muted)}.track-choice .choice-index{font-size:12px;color:var(--accent);margin-left:auto}.track-choice.selected{color:var(--accent)}.bike-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bike-choice{padding:0;background:#e9dbb7;border:2px solid transparent;overflow:hidden}.bike-choice img{display:block;width:100%;height:auto}.bike-choice.selected{border-color:var(--accent);box-shadow:0 0 0 2px #24221d,0 0 0 3px var(--accent)}.chooser-note{font-size:11px;color:var(--muted);margin:22px 0;line-height:1.7}.help-panel{position:fixed;right:30px;bottom:80px;width:min(460px,calc(100% - 40px));padding:30px;background:#24221df7;border:1px solid var(--line);z-index:30;box-shadow:0 20px 80px #0005}.help-panel>button{float:right;border:0;padding:0 0 10px 10px}.help-panel h2{font-size:25px;line-height:1.1;margin:0 0 20px}.help-panel p{font-size:12px}.help-panel .technical-note{border-top:1px solid var(--line);padding-top:15px;font-size:10px;color:var(--muted);margin-bottom:0}#touch-controls{position:absolute;bottom:20px;left:20px;right:20px;display:none;justify-content:space-between;pointer-events:none}#touch-controls>div{display:flex;gap:10px}#touch-controls button{width:58px;height:54px;background:#201e19bb;font-size:25px;touch-action:none;user-select:none;pointer-events:auto;border-color:#d7cfa580}#touch-controls button.held{background:var(--accent);color:var(--ink)}
@media(max-width:1365px){.keys>.hop-key{display:none}.footer-actions{gap:12px}}@media(max-width:960px){.keys{gap:14px}.footer-actions{gap:10px}}@media(pointer:coarse){#touch-controls{display:flex}.keys{display:none}.crash-message{bottom:90px}}@media(max-width:900px){.keys{gap:12px}.keys>span:nth-last-child(-n+2){display:none}.bottom-bar{padding:0 18px;height:48px}.hud{top:16px;left:16px}.hud>div{padding:12px 16px}.hud strong{font-size:19px}.hud small{font-size:8px}.intro{left:16px}.footer-actions{gap:12px}}@media(max-width:600px){.hud{top:12px;left:12px}.hud>div{padding:10px 14px}.hud strong{font-size:17px}.checkpoint-stat{display:none}.hud small{font-size:7px;letter-spacing:1px}.hud button{padding:15px}.intro{width:calc(100% - 32px);padding:28px}.intro h1,h1{font-size:34px}.center-message{padding:28px}.center-message>small{font-size:7px}.bottom-bar{justify-content:flex-end}.keys{display:none}.crash-message{min-width:0;width:calc(100% - 32px);padding:20px}.chooser{padding:24px}.help-panel{right:20px;bottom:64px}.bike-choices{gap:8px}#toast{top:auto;bottom:90px;right:20px;font-size:11px}}


.balance-stat{min-width:110px}.balance-gauge{position:relative;width:76px;height:3px;margin:12px 0 7px;background:var(--line)}.balance-gauge::after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:7px;background:var(--muted)}.balance-gauge>span{position:absolute;left:50%;top:-4px;width:5px;height:11px;background:var(--accent);transform:translateX(-50%);z-index:1}#rider-posture{display:block;font-size:9px;color:var(--paper);line-height:12px}.hud .balance-stat{padding-top:11px;padding-bottom:9px}@media(max-width:760px){.hud .checkpoint-stat{display:none}}@media(max-width:600px){.balance-stat{min-width:88px}.balance-gauge{width:58px;margin-top:10px}.hud .balance-stat{padding-top:10px;padding-bottom:8px}}
.crash-message{top:112px;bottom:auto;right:28px;left:auto;transform:none}@media(max-width:600px){.crash-message{top:96px;right:16px;left:16px;width:auto}}
/* Run analysis and playback controls, inspired by the Trials 2 manual. */
.run-info{position:absolute;left:28px;top:110px;display:flex;gap:18px;background:#201e19dc;padding:9px 13px;border:1px solid #e1d8bb30;pointer-events:none;font-size:10px;color:var(--muted)}.run-info strong{font:12px ui-monospace,monospace;color:var(--paper);margin-left:5px}.footer-actions button:disabled{opacity:.35;cursor:default}.footer-actions button[aria-pressed=true]{color:var(--accent)}.replay-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:12px;background:#201e19f5;border:1px solid var(--line);z-index:8}.replay-controls button{padding:9px 11px;font-size:11px;white-space:nowrap}.replay-controls input{flex:1;min-width:40px;accent-color:var(--accent)}.replay-controls input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#replay-position{font:12px ui-monospace,monospace}.replay-keys{display:flex;gap:3px}.replay-keys .held{background:var(--accent);color:var(--ink);border-color:var(--accent)}@media(max-width:1100px){.keys>span:nth-last-child(-n+2){display:none}}@media(max-width:900px){.run-info{left:16px;top:100px}.keys>span:nth-child(3){display:none}}@media(max-width:600px){.run-info{left:12px;top:90px;gap:10px;padding:8px 10px;font-size:9px}.run-info strong{font-size:11px;margin-left:3px}.replay-controls{flex-wrap:wrap;gap:8px;bottom:12px}.replay-controls input{flex-basis:50%;min-width:100px}.replay-keys{margin-left:auto}.replay-controls #close-replay{margin-left:auto}.footer-actions{gap:15px}}
.workshop{width:min(640px,100%)}.ws-course{display:flex;gap:8px;margin-bottom:14px}.ws-course select,.ws-course input,.ws-add select{flex:1;font:inherit;font-size:12px;background:#2f2c24;color:var(--paper);border:1px solid var(--line);padding:9px}.ws-preview-box{margin:0 0 14px;border:1px solid var(--line);background:#201e19}.ws-preview{display:block;width:100%;height:auto}.ws-meta{display:block;padding:6px 10px;font-size:10px;color:var(--muted)}.ws-error{color:#e06a4e;font-size:12px}.ws-elements{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ws-elements li{border:1px solid var(--line);padding:10px 12px;background:#2a2721}.ws-head{display:flex;align-items:center;gap:10px}.ws-head strong{font-size:13px;font-weight:500;flex:1}.ws-num{font:12px ui-monospace,monospace;color:var(--accent)}.ws-tools{display:flex;gap:4px}.ws-tools button{padding:3px 8px;font-size:12px}.ws-tools .ws-play{color:var(--accent)}.ws-tools button:disabled{opacity:.3;cursor:default}.ws-params{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px}.ws-params label{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);letter-spacing:.4px}.ws-params input{width:68px;font:12px ui-monospace,monospace;background:#1e1c17;color:var(--paper);border:1px solid var(--line);padding:5px 6px}.ws-add{display:flex;gap:8px;margin:14px 0}.ws-actions{display:flex;flex-wrap:wrap;gap:8px}.ws-actions .primary{flex:1 1 100%}.ws-actions button{font-size:12px}.element-stat strong{color:var(--accent)}.element-results{margin:0 0 16px;padding:0;list-style:none;max-height:180px;overflow:auto;font:11px/1.8 ui-monospace,monospace;color:#cbc5b1;align-self:stretch}.element-results .faulted{color:#e08a5e}.element-results .record{color:var(--accent)}

.coach{position:absolute;right:24px;top:92px;max-width:min(560px,calc(100% - 48px));background:#201e19e6;border:1px solid var(--line);border-left:3px solid var(--accent);padding:10px 14px;display:grid;gap:5px;z-index:3;pointer-events:none;font-size:13px;line-height:1.4}.coach small{font-size:9px;letter-spacing:1.6px;color:var(--muted)}.coach small span{color:var(--accent);letter-spacing:.4px}
.medal{font-weight:600;border:1px solid var(--line);padding:10px 14px;margin:6px auto;max-width:520px}.medal.medal-or{border-color:#e2b838;color:#f4d46a}.medal.medal-argent{border-color:#b9c0c6;color:#dfe5ea}.medal.medal-bronze{border-color:#b07a45;color:#d9a06a}
.level-choices{display:grid;gap:8px}.level-choice.locked{opacity:.45;cursor:not-allowed}.level-choice.locked:hover{background:transparent}.medal-badge{min-width:54px;text-align:center}.medal-badge.medal-or{color:#f4d46a}.medal-badge.medal-argent{color:#dfe5ea}.medal-badge.medal-bronze{color:#d9a06a}
@media (max-width:700px){.coach{top:auto;bottom:150px;right:12px;left:12px;font-size:12px}}

.decor-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.decor-level{display:grid;gap:4px;text-align:left;padding:12px 14px}.decor-level strong{font-weight:500;font-size:14px}.decor-level small{font-size:10px;color:var(--muted)}
.decor-seed{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:11px;color:var(--muted)}.decor-seed input,.decor-seed select{font:inherit;font-size:12px;background:#2f2c24;color:var(--paper);border:1px solid var(--line);padding:8px;width:92px}.decor-seed button{font-size:11px;padding:8px 12px;margin-left:auto}
.decor-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.decor-theme{display:grid;gap:5px;text-align:left;padding:12px 14px;align-content:start}.decor-theme strong{font-weight:500;font-size:15px}.decor-theme small{font-size:10px;color:var(--muted);line-height:1.4}.decor-theme.selected{border-color:var(--accent);color:var(--accent)}
.terrain-editor{position:absolute;inset:0;z-index:12;background:#201e19f8;padding:22px 28px;display:flex;flex-direction:column;gap:10px}.terrain-editor .chooser-heading{margin-bottom:2px}.terrain-editor h2{font-size:28px;font-weight:500;margin:8px 0 0}
.te-toolbar,.te-footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.te-toolbar button,.te-footer button{font-size:12px;padding:8px 12px}.te-toolbar select,.te-footer select,.te-footer input{font:inherit;font-size:12px;background:#2f2c24;color:var(--paper);border:1px solid var(--line);padding:8px}.te-footer input{width:220px}.te-footer .primary{padding:9px 16px}
.te-view{flex:1;min-height:200px;overflow:auto;border:1px solid var(--line);background:#141310}.te-canvas{display:block;cursor:crosshair;touch-action:none}.te-status{font-size:11px;color:var(--muted);margin:0;max-width:none}.te-sep{width:1px;height:22px;background:var(--line);margin:0 4px}.te-toolbar button.selected{border-color:var(--accent);color:var(--accent)}.te-check{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)}
.bike-choice .bike-stats{display:block;padding:6px 8px 8px;font-size:10px;line-height:1.45;color:#3b3527;text-align:left}#element.short{color:#ff9b73}
/* Menu du haut. Les modes sont des plaques numéro de moto, vissées un peu de travers ; survolée,
   une plaque fait une roue arrière (elle pivote sur son coin arrière), pressée, elle s'écrase
   comme une suspension. La plaque du mode du circuit en cours est orange feu, celle de la moto
   porte son numéro. Couleurs et lettrage d'après l'écran titre de Trials Legends. Police Saira
   (OFL, assets/fonts), variable en largeur et en graisse. */
@font-face{font-family:Saira;src:url(assets/fonts/saira-latin-standard-normal.woff2) format('woff2-variations');font-weight:100 900;font-stretch:50% 125%;font-style:normal;font-display:swap}
/* Wordmark only: Saira Italic fixed at weight 900, width 58 %, letters of TrialUp and digits (3 KB instead of 116 KB; built
   from saira-latin-standard-italic.woff2, OFL). Other italics are synthesized from Saira. */
@font-face{font-family:'TrialUp Wordmark';src:url(assets/fonts/saira-wordmark.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap}
.topbar{--plate:#f3e2a6;--plate-ink:#1d1a14;--fire:#ee6a1f;--flame:#ffc21a;height:88px;flex:none;display:flex;align-items:center;gap:26px;padding:0 24px 0 28px;border-bottom:1px solid var(--line);z-index:5;font-family:Saira,Arial,Helvetica,sans-serif}
.wordmark{display:grid;justify-items:start;flex:none;color:var(--paper);text-decoration:none;line-height:1;white-space:nowrap}
.wm-trials{font-family:'TrialUp Wordmark',Saira,system-ui,sans-serif;font-size:39px;font-weight:900;font-stretch:58%;font-style:italic;text-transform:uppercase;color:var(--fire);line-height:.8;letter-spacing:.01em}
.wm-up{color:var(--flame)}
.wm-legends{font-size:13.5px;font-weight:800;font-stretch:112%;font-style:italic;text-transform:uppercase;letter-spacing:.3em;margin-top:3px}
.wordmark small{font-size:11px;font-weight:500;color:var(--muted);margin-top:4px}
.track-heading{border-left:1px solid var(--line);padding-left:22px;display:grid;gap:2px;min-width:0}
.track-heading>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-heading strong{font-size:19px;font-weight:650;font-stretch:85%;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.topbar nav{display:flex;align-items:center;gap:9px;margin-left:auto}
.plate{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;min-width:44px;padding:2px 14px 0 11px;border:0;border-radius:10px;background:var(--plate);color:var(--plate-ink);font-size:15.5px;font-weight:750;font-stretch:86%;box-shadow:inset 0 -3px 0 rgba(29,26,20,.17),0 3px 0 #0b0a07;transform:rotate(var(--tilt,0deg));transform-origin:8% 100%;transition:transform .34s cubic-bezier(.3,1.8,.45,1),background .15s}
.plate:nth-child(odd){--tilt:-1.8deg}.plate:nth-child(even){--tilt:1.3deg}.plate:nth-child(3n){--tilt:-.5deg}
.plate::before,.plate::after{content:'';position:absolute;top:5px;width:4px;height:4px;border-radius:50%;background:rgba(29,26,20,.42);box-shadow:0 1px 0 rgba(255,255,255,.55)}
.plate::before{left:6px}.plate::after{right:6px}
.plate svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.plate svg .fill{fill:currentColor;stroke:none}
.plate:hover{background:var(--flame);border:0;transform:rotate(-8deg) translateY(-2px)}
.plate:active{transform:rotate(var(--tilt,0deg)) translateY(2px) scale(1.04,.88);transition-duration:.07s}
.plate[aria-current="true"]{background:var(--fire)}
.plate:focus-visible{outline:2px solid var(--flame);outline-offset:4px}
.plate-number{padding:2px 13px 0 10px}
.plate-number b{font-family:'TrialUp Wordmark',Saira,system-ui,sans-serif;font-size:31px;font-weight:900;font-stretch:58%;font-style:italic;line-height:1;margin-top:-2px}
.topbar-tools{display:flex;gap:8px;flex:none}
.bolt{display:grid;place-items:center;width:40px;height:40px;padding:0;border:2px solid var(--line);border-radius:50%;background:#2a2720;color:var(--paper);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.bolt:hover{background:#2a2720;border-color:var(--flame);color:var(--flame)}
.bolt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bolt .on,.bolt[aria-pressed="true"] .off{display:none}.bolt[aria-pressed="true"] .on{display:inline}
@media(max-width:1380px){.topbar{gap:20px}.topbar nav{gap:7px}.plate{gap:5px;padding:2px 10px 0 8px;font-size:14.5px}.plate svg{width:20px;height:20px}}
@media(max-width:1180px){.topbar .plate:not(.plate-number) .plate-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.plate{padding:2px 10px 0}.topbar nav{gap:8px}}
@media(max-width:900px){.topbar{height:72px;gap:16px;padding:0 16px}.wm-trials{font-size:29px}.wm-legends{font-size:11px}.wordmark small{display:none}.track-heading{padding-left:16px}.track-heading strong{font-size:16px}.plate-number .plate-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:600px){.topbar{height:auto;flex-wrap:wrap;row-gap:10px;padding:10px 14px 12px}.track-heading{display:none}.topbar-tools{margin-left:auto}.topbar nav{order:3;flex-basis:100%;margin:0;justify-content:space-between;gap:6px}.plate{flex:1;max-width:52px;min-width:0;height:40px;padding:2px 0 0}.plate svg{width:20px;height:20px}.plate-number b{font-size:27px}.bolt{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.plate{transition:background .15s}.plate:hover,.plate:active{transform:rotate(var(--tilt,0deg))}}
/* En course (body.riding) : le tableau de bord se resserre sur une ligne fine (temps, fautes,
   drapeau, poids), les figures et le panneau d'élément attendent la pause ; seule reste l'alerte
   « moto pas garantie ». L'altitude, la valeur du jeu, reste en grand en tête du tableau de bord. Si la moto passe dessous malgré
   la caméra, il s'efface (body.hud-dodge). */
.hud,.run-info{transition:opacity .2s}
body.hud-dodge .hud,body.hud-dodge .run-info,body.hud-dodge .coach{opacity:.14}
/* En course, le conseil tient sur une ligne, sur la rangée du tableau de bord ou juste dessous
   (game.js placeCoach), hors de la trajectoire ; le conseil complet revient en pause. */
.riding .coach{top:12px;bottom:auto;right:12px;left:auto;max-width:none;display:block;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:1.35;transition:opacity .2s}
.riding .coach small{display:none}
@media(max-width:600px){.riding .coach{font-size:12px;padding:6px 10px;right:12px}}
.riding .hud{top:12px;left:12px;background:#201e19cc;box-shadow:none}
.riding .hud>div{display:flex;align-items:baseline;gap:6px;padding:7px 13px}
.riding .hud small{display:inline;margin:0;font-size:10px;letter-spacing:.4px}
.riding .hud .time-stat small,.riding .hud .checkpoint-stat small,.riding .hud .balance-stat small,.riding #rider-posture{display:none}
.riding .hud strong{font-size:17px}
.riding .hud strong span{font-size:11px}
.riding .hud .checkpoint-stat{display:flex}
.riding #checkpoint::before{content:'⚑ ';font-size:13px;color:var(--muted)}
.riding .hud .balance-stat{min-width:0;align-self:stretch;align-items:center;padding:0 13px}
.riding .balance-gauge{width:56px;margin:0}
.riding .hud button{padding:6px 13px;font-size:14px}
.riding .run-info{top:56px;left:12px;padding:6px 10px;background:#201e19cc}
.riding .run-info .feature{display:none}
@media(max-width:600px){.riding .hud>div{padding:6px 9px}.riding .hud .checkpoint-stat{display:none}.riding .hud .balance-stat{padding:0 9px}.riding .balance-gauge{width:44px}.riding .run-info{top:52px}}
/* Altitude : la valeur du jeu (Expédition, Montagne, Ascension), première case du tableau de bord,
   en grand, en course comme en pause ; record et sommet dessous, orange au record. */
.hud .altitude-stat{display:flex;flex-direction:column;justify-content:center;padding:10px 24px 10px 22px;background:#2a2720;border-right:2px solid var(--accent)}
.hud .altitude-stat small{color:var(--accent);margin-bottom:3px}
.hud .altitude-stat strong{font-size:46px;line-height:1;font-weight:600;letter-spacing:-1.5px}
.hud .altitude-stat strong span{font-size:20px;margin-left:4px;letter-spacing:0;color:var(--muted);font-weight:500}
.altitude-best{display:block;margin-top:6px;font:10px ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.altitude-stat.record strong,.altitude-stat.record .altitude-best{color:var(--accent)}
.riding .hud .altitude-stat{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:7px 20px 7px 15px}
.riding .hud .altitude-stat small{display:block;font-size:9px;letter-spacing:1.4px;margin-bottom:2px}
.riding .hud .altitude-stat strong{font-size:40px}
.riding .hud .altitude-stat strong span{font-size:17px}
.riding .hud .altitude-best{margin-top:3px;font-size:9px}
@media(max-width:600px),(max-height:500px){.hud .altitude-stat,.riding .hud .altitude-stat{padding:6px 12px}.hud .altitude-stat strong,.riding .hud .altitude-stat strong{font-size:28px;letter-spacing:-.5px}.hud .altitude-stat strong span,.riding .hud .altitude-stat strong span{font-size:13px}.altitude-best,.riding .hud .altitude-best{font-size:8px;white-space:normal;max-width:92px;line-height:1.25}}
@media(max-width:600px){body:not(.riding) .hud .balance-stat{display:none}}
/* Montagne sans fin: the two climbs at the top of the Montagne chooser. */
.endless-row{grid-template-columns:1fr 1fr}.decor-level.endless-choice{background:#e2a838;border-color:#e2a838;color:#211e17}.decor-level.endless-choice small{color:#3b3222}.decor-level.endless-choice:hover{background:#efbc55}.endless-record{margin:4px 0 14px;color:var(--paper)}
.decor-level.resume-choice{grid-column:1/-1;background:#f3e2a6;border-color:#f3e2a6}.decor-level.resume-choice strong{font-size:17px}
@media(max-width:600px){.endless-row{grid-template-columns:1fr}}
@media(max-width:600px){.riding .hud .faults-stat small{display:none}.riding .hud .faults-stat strong::before{content:'✕ ';font-size:11px;color:var(--muted)}}
@media(max-width:420px){.riding .hud>div{padding:6px 7px}.riding .hud .time-stat strong{font-size:15px}.riding .balance-gauge{width:30px}.riding .hud .altitude-best{max-width:80px}}
/* Help about the modes shown only with ?dev (game.js). */
body:not(.dev) .dev-only{display:none}
/* Montagne menu: pseudo and standing of the day (game.js updateDayBoard). */
.hat-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.hat-row button{flex:1 1 auto;padding:8px 10px;background:#1d1b17;border:1px solid var(--line);color:#cbc5b1;font:inherit;font-size:12px;cursor:pointer}.hat-row button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}.hat-row button:disabled{opacity:.45;cursor:default;border-style:dashed}
.day-pseudo{width:100%;margin:6px 0 10px;padding:10px 12px;background:#1d1b17;border:1px solid var(--line);color:var(--paper);font:inherit;font-size:12px}.day-board{font-size:12px;color:#cbc5b1;margin-bottom:18px}.day-board strong{display:block;color:var(--accent);font-weight:600;margin-bottom:6px}.day-board ol{margin:0;padding-left:20px;line-height:1.7}.day-board li.me{color:var(--accent)}.day-board small{color:var(--muted)}
/* Touch controls: big pads, about a fifth of the short side of the screen (up to 116 px), four in a row on a narrow phone. */
@media(pointer:coarse){:root{--pad:clamp(64px,min(21vmin,calc((100vw - 72px)/4)),116px)}#touch-controls{bottom:max(14px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}#touch-controls>div{gap:14px}#touch-controls button{width:var(--pad);height:calc(var(--pad)*.9);font-size:calc(var(--pad)*.42);border-width:2px;border-radius:6px}.crash-message{bottom:calc(var(--pad)*.9 + 34px)}}
@media(pointer:coarse) and (max-width:600px){#toast{bottom:calc(var(--pad)*.9 + 34px)}}
/* Sur le papier : plus d'encadrés sur le jeu. Tableau de bord, accueil, pause, chute et conseil
   sont du texte à l'encre posé sur le dessin, avec un halo couleur papier pour rester lisibles
   par-dessus les traits ; un voile dégradé (sans bord) derrière les blocs de texte. */
:root{--paper-bg:#f4f1e8;--on-paper:#23211d;--on-paper-soft:#6f6a5c;--on-paper-accent:#9a5a0c;--halo:0 0 1px #f4f1e8,0 0 5px #f4f1e8,0 0 10px #f4f1e8}
.hud,.riding .hud{background:none;border:0;box-shadow:none;color:var(--on-paper);text-shadow:var(--halo);gap:28px;align-items:flex-start}
.hud>div,.riding .hud>div{border:0;padding:0}
.hud small{color:var(--on-paper-soft);letter-spacing:1.6px}
.hud strong span{color:var(--on-paper-soft)}
.hud .altitude-stat,.riding .hud .altitude-stat{background:none;border:0;padding:0}
.hud .altitude-stat small{color:var(--on-paper-accent)}
.hud .altitude-stat strong span,.altitude-best{color:var(--on-paper-soft)}
.altitude-stat.record strong,.altitude-stat.record .altitude-best{color:var(--on-paper-accent)}
.hud>div:not(.altitude-stat){padding-top:6px}
.hud button,.riding .hud button{color:var(--on-paper);padding:4px 8px;font-size:16px;align-self:flex-start;margin-top:2px;border:1px solid #23211d40;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;background:#f4f1e8aa}
.hud button:hover{background:#23211d14;border-color:#23211d80}
.balance-gauge{background:#23211d40}.balance-gauge::after{background:var(--on-paper-soft)}.balance-gauge>span{background:var(--accent);box-shadow:0 0 0 1px #9a5a0c80}
#rider-posture{color:var(--on-paper-soft);font-size:11px}
.riding .hud{gap:22px;align-items:center}
.riding .hud>div{padding:0}
.riding .hud .balance-stat{padding:0}
.riding #checkpoint::before,.riding .hud .faults-stat strong::before{color:var(--on-paper-soft)}
.run-info,.riding .run-info{background:none;border:0;padding:0;color:var(--on-paper-soft);text-shadow:var(--halo)}
.run-info strong{color:var(--on-paper)}
.coach,.riding .coach{background:none;border:0;border-left:2px solid var(--accent);padding:2px 0 2px 10px;color:var(--on-paper);text-shadow:var(--halo)}
.coach small{color:var(--on-paper-soft)}.coach small span{color:var(--on-paper-accent)}
/* Accueil, chargement, pause, arrivée : du texte, un voile papier derrière, pas de carte. */
.center-message{background:none;border:0;box-shadow:none;padding:0;color:var(--on-paper);isolation:isolate}
/* Avant le départ, en pause, à l'arrivée : le dessin s'efface derrière le texte (body.waiting). */
body.waiting #game-shell{background:var(--paper-bg)}
#game{transition:opacity .25s}
body.waiting #game{opacity:.2}
.center-message h1{color:var(--on-paper);margin:14px 0 16px}
.center-message .eyebrow{color:var(--on-paper-accent)}
.center-message p{color:#4a463c}
.center-message>small{color:var(--on-paper-soft)}
.center-message>button:not(.primary){color:var(--on-paper);text-decoration:underline;text-decoration-color:#23211d55;text-underline-offset:4px}
.center-message>button:not(.primary):hover{background:none;text-decoration-color:var(--on-paper)}
.center-message .primary{align-self:flex-start;min-width:250px;padding:14px 18px;gap:24px}
.intro{top:auto;bottom:clamp(20px,7vh,72px);left:28px;transform:none;width:min(440px,calc(100% - 56px));background:none}
.intro h1{font-size:clamp(26px,min(5.4vh,9vw),44px);line-height:1.04;letter-spacing:-1.2px}
.intro p{margin-bottom:22px}
@media(max-height:620px){.intro h1{font-size:26px;margin:8px 0 10px}.intro p{margin-bottom:12px;line-height:1.5}.intro>small{display:none}}
@media(max-width:900px){.intro{left:16px;width:calc(100% - 32px)}}
@media(pointer:coarse){.intro{bottom:calc(var(--pad)*.9 + 40px)}}
/* Chute : en haut à droite, du texte et une action. */
.crash-message{background:none;border:0;padding:0;min-width:0;color:var(--on-paper);text-shadow:var(--halo);isolation:isolate;gap:6px}
.crash-message::before{content:"";position:absolute;inset:-40px -60px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#f4f1e8e6 50%,#f4f1e800)}
.crash-message>span{color:var(--on-paper-soft)}
.crash-auto{color:var(--on-paper-accent)}
.crash-message button{color:var(--on-paper);border:1px solid #23211d55;background:#f4f1e8cc;text-shadow:none;padding:9px 12px;justify-self:start}
.crash-message button:hover{background:#23211d14;border-color:var(--on-paper)}
.crash-message button span{color:var(--on-paper-accent)}
@media(max-width:600px){.crash-message{padding:0}}
/* Flèches tactiles : papier translucide et trait d'encre, comme le dessin. */
#touch-controls button{background:#f4f1e8b8;color:var(--on-paper);border-color:#23211dcc}
#touch-controls button.held{background:var(--accent);color:var(--on-paper);border-color:var(--on-paper)}
/* Figures de Trials 2 (en l'air, flips, wheeling, exp) et ligne d'élément : sous ?dev seulement. */
body:not(.dev) .run-info{display:none!important}
/* Même place du tableau de bord avant le départ et en course. */
.riding .hud{top:18px;left:28px}
@media(max-width:900px){.hud,.riding .hud{top:16px;left:16px}}
@media(max-width:600px){.hud,.riding .hud{top:12px;left:12px}}
/* Le conseil n'apparaît qu'en course (le complet reste sous ?dev). */
body:not(.dev):not(.riding) .coach{display:none!important}
/* Pause et reprise après une chute : encadrés sombres, pour ne pas se mêler au décor. */
#pause,#finish{background:#201e19f5;border:1px solid #e8debd30;box-shadow:0 20px 100px #17171055;padding:42px;color:var(--paper)}
#pause::before,#finish::before{content:none}
#pause h1,#finish h1{color:var(--paper)}
#pause .eyebrow,#finish .eyebrow{color:var(--accent)}
#pause p,#finish p{color:#cbc5b1}
#pause>button:not(.primary),#finish>button:not(.primary){color:var(--paper);text-decoration-color:#f1e8cf55}
#pause>button:not(.primary):hover,#finish>button:not(.primary):hover{text-decoration-color:var(--paper)}
@media(max-width:600px){#pause,#finish{padding:28px}}
#crash{background:#201e19ee;border:1px solid #e2a83870;padding:22px 28px;min-width:360px;color:var(--paper);text-shadow:none;gap:9px}
#crash::before{content:none}
#crash>span{color:var(--muted)}
#crash .crash-auto{color:var(--accent)}
#crash button{color:var(--accent);background:transparent;border:1px solid var(--line);padding:10px 12px}
#crash button:hover{background:#39362c;border-color:#7a725d}
#crash button span{color:var(--paper)}
@media(max-width:600px){#crash{min-width:0;padding:20px}}
/* Accueil, pause, arrivée et reprise : une seule place, à droite juste sous le tableau de bord
   (game.js measureHud pose --below-hud), même largeur. La caméra garde le pilote à gauche du centre. */
#intro,#pause,#finish,#crash{position:absolute;top:var(--below-hud,200px);right:28px;left:auto;bottom:auto;transform:none;width:min(420px,calc(100% - 56px));min-width:0;margin:0}
@media(max-width:900px){#intro,#pause,#finish,#crash{right:16px;width:min(420px,calc(100% - 32px))}}
@media(max-width:600px){#intro,#pause,#finish,#crash{left:12px;right:12px;width:auto}}
/* iOS : un appui long ouvrait la loupe de sélection ou le menu (copier, rechercher…), un double appui
   zoomait la page. Pas de sélection ni de menu d'appui long dans le jeu (sauf les champs de saisie),
   pas de zoom au double appui ; les flèches et le dessin ne laissent passer aucun geste du navigateur. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#touch-controls,#touch-controls *,#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
/* Language button (i18n.js): FR / EN, in the top bar next to the sound button. */
.bolt.lang{font:700 12px/1 Saira,system-ui,sans-serif;letter-spacing:.5px}

/* Up Up Rider : logo dans la barre du haut (deux chevrons sur une roue à crampons, Archivo Black, OFL, assets/fonts). */
@font-face{font-family:'Archivo Black';src:url(assets/fonts/archivo-black-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
.wordmark{grid-template-columns:auto auto;column-gap:11px;align-items:center}
.wm-icon{grid-row:1/3;width:44px;height:42px;color:var(--paper)}
.wm-name{font-family:'Archivo Black',Saira,system-ui,sans-serif;font-size:25px;line-height:1;text-transform:uppercase;letter-spacing:-.4px;color:var(--paper);align-self:end}
.wm-name .wm-up{color:#e8904a}
.wordmark small{margin-top:3px;align-self:start}
/* Écrans étroits : logo resserré sur deux lignes (UP UP au-dessus de RIDER) ; au téléphone la barre tient sur
   une seule rangée, le bouton Montagne à côté des outils. */
@media(max-width:900px){.wm-name{font-size:17px;line-height:.98;align-self:center}.wm-name .wm-up{display:block}.wm-icon{width:36px;height:34px}}
@media(max-width:600px){.topbar{flex-wrap:nowrap;gap:10px;padding:8px 12px}.topbar nav{order:0;flex-basis:auto;margin:0 0 0 auto;justify-content:flex-end}.topbar-tools{margin-left:0;gap:6px}.plate{flex:none;width:46px;max-width:none}}
/* Bandeau : un fond papier léger le garde lisible quand le décor passe derrière. Montagne sans fin : zone,
   chemin jusqu'au prochain camp, record du joueur et record du jour en clair (game.js updateHud). */
.hud,.riding .hud{background:#f4f1e8db;padding:10px 16px 10px 14px;text-shadow:none}
.hud .altitude-stat small{display:flex;align-items:center}
.zone-chip{margin-left:8px;padding:1px 8px;border:1px solid currentColor;border-radius:9px;font-weight:600;letter-spacing:1px;color:var(--on-paper)}
.climb-next{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12px;color:var(--on-paper);white-space:nowrap}
.climb-bar{position:relative;width:96px;height:5px;background:#23211d26;border-radius:3px;overflow:hidden;flex:none}
.climb-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--on-paper-accent);border-radius:3px;transition:width .2s}
.hud.climbing .altitude-best{display:none}
.hud .record-stat,.hud .day-stat,.riding .hud .record-stat,.riding .hud .day-stat{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.hud .record-stat small,.hud .day-stat small,.riding .hud .record-stat small,.riding .hud .day-stat small{display:block;font-size:9px;letter-spacing:1.4px}
.hud .record-stat strong,.hud .day-stat strong,.riding .hud .record-stat strong,.riding .hud .day-stat strong{font-size:22px}
.record-stat.record strong{color:var(--on-paper-accent)}
.day-who{display:block;font-size:11px;color:var(--on-paper-soft);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Téléphone en portrait : le bandeau prend la largeur, sur quatre rangées : ALTITUDE et la zone, le chiffre en
   grand (pause à droite, jauge du pilote en roulant), la barre jusqu'au prochain camp, puis temps, fautes,
   votre record et record du jour. */
@media(max-width:600px){.hud,.riding .hud{left:8px;right:8px;top:8px;display:grid;grid-template-columns:auto auto auto auto;justify-content:space-between;column-gap:14px;row-gap:4px;align-items:start;padding:8px 12px 9px}.hud .altitude-stat,.riding .hud .altitude-stat{display:contents}.hud .altitude-stat small,.riding .hud .altitude-stat small{grid-area:1/1/2/4;display:flex;font-size:11px}.hud .altitude-stat strong,.riding .hud .altitude-stat strong{grid-area:2/1/3/3;font-size:42px;letter-spacing:-1px;line-height:1}.hud .altitude-stat strong span,.riding .hud .altitude-stat strong span{font-size:18px}.hud #pause-button{grid-area:1/4/3/5;justify-self:end;margin:0}.hud .balance-stat,.riding .hud .balance-stat{grid-area:2/3/3/4;align-self:center;justify-self:end}.climb-next{grid-area:3/1/4/5;display:flex;font-size:13px;margin:0 0 4px}.climb-bar{display:block;flex:1;width:auto;height:6px}.hud.climbing .altitude-best{display:none}.hud .time-stat,.riding .hud .time-stat{grid-area:4/1}.hud .faults-stat,.riding .hud .faults-stat{grid-area:4/2}.hud .record-stat,.riding .hud .record-stat{grid-area:4/3}.hud .day-stat,.riding .hud .day-stat{grid-area:4/4}.hud>div.time-stat,.hud>div.faults-stat,.hud>div.record-stat,.hud>div.day-stat,.riding .hud>div.time-stat,.riding .hud>div.faults-stat,.riding .hud>div.record-stat,.riding .hud>div.day-stat{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0}.hud>div.record-stat.hidden,.hud>div.day-stat.hidden{display:none}.hud .time-stat small,.hud .faults-stat small,.hud .record-stat small,.hud .day-stat small,.riding .hud .time-stat small,.riding .hud .faults-stat small,.riding .hud .record-stat small,.riding .hud .day-stat small{display:block;font-size:9.5px;letter-spacing:1px;white-space:nowrap}.hud .time-stat strong,.hud .faults-stat strong,.hud .record-stat strong,.hud .day-stat strong,.riding .hud .time-stat strong,.riding .hud .faults-stat strong,.riding .hud .record-stat strong,.riding .hud .day-stat strong{font-size:17px;white-space:nowrap}.riding .hud .faults-stat strong::before{content:none}.day-who{display:none}}
/* Le bandeau ne dépasse jamais l'écran : colonnes qui se partagent la largeur, tailles qui suivent celle de
   l'écran (vérifié de 320 à 414 px avec une altitude et des records à quatre chiffres), libellés longs sur deux lignes. */
@media(max-width:600px){.hud,.riding .hud{grid-template-columns:minmax(0,1.45fr) minmax(0,.7fr) minmax(0,1.2fr) minmax(0,1.25fr);justify-content:stretch;column-gap:clamp(6px,2.4vw,14px);box-sizing:border-box;max-width:calc(100% - 16px);align-items:end}.hud .altitude-stat small,.riding .hud .altitude-stat small{align-self:start}.hud .altitude-stat strong,.riding .hud .altitude-stat strong{font-size:clamp(32px,10.8vw,42px);white-space:nowrap;align-self:start}.hud #pause-button{align-self:start}.climb-next{min-width:0}.climb-bar{min-width:24px}#climb-next-text{white-space:nowrap}.hud .time-stat strong,.hud .faults-stat strong,.hud .record-stat strong,.hud .day-stat strong,.riding .hud .time-stat strong,.riding .hud .faults-stat strong,.riding .hud .record-stat strong,.riding .hud .day-stat strong{font-size:clamp(13px,4.3vw,17px)}.hud .time-stat small,.hud .faults-stat small,.hud .record-stat small,.hud .day-stat small,.riding .hud .time-stat small,.riding .hud .faults-stat small,.riding .hud .record-stat small,.riding .hud .day-stat small{font-size:clamp(8px,2.35vw,9.5px);letter-spacing:.6px;white-space:normal;line-height:1.15}.hud>div.time-stat,.hud>div.faults-stat,.hud>div.record-stat,.hud>div.day-stat,.riding .hud>div.time-stat,.riding .hud>div.faults-stat,.riding .hud>div.record-stat,.riding .hud>div.day-stat{min-width:0}}
/* Entre les deux (téléphone couché, petite tablette) : la rangée du grand écran, resserrée. */
@media(min-width:601px) and (max-width:900px){.hud .record-stat,.hud .day-stat,.riding .hud .record-stat,.riding .hud .day-stat,.climb-next{display:flex}.hud.climbing .altitude-best{display:none}.hud,.riding .hud{gap:16px;padding:6px 12px}.hud .record-stat strong,.hud .day-stat strong,.riding .hud .record-stat strong,.riding .hud .day-stat strong{font-size:17px}.day-who{display:none}.hud .altitude-stat strong,.riding .hud .altitude-stat strong{font-size:32px}}

/* « Waouh ! » (game.js wow) : un salto posé, un passage dur franchi. Une petite étiquette sous le HUD, hors de la piste, 1,3 s. */
.wow{position:absolute;left:50%;top:calc(var(--below-hud,150px) - 10px);transform:translate(-50%,0);display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;z-index:4;white-space:nowrap;background:#f4f1e8e6;border:2px solid #23211d;border-radius:999px;padding:4px 14px 4px 12px}
.wow strong{font-family:'Archivo Black',Saira,system-ui,sans-serif;font-size:clamp(15px,2.2vw,20px);line-height:1;color:#b5561c}
.wow span{font-family:'Archivo Black',Saira,system-ui,sans-serif;font-size:clamp(12px,1.7vw,15px);line-height:1;color:#23211d}
.wow.show{animation:wow-pop 1.3s ease-out both}
@keyframes wow-pop{0%{opacity:0;transform:translate(-50%,8px) scale(.9)}14%{opacity:1;transform:translate(-50%,0) scale(1.05)}24%{transform:translate(-50%,0) scale(1)}72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
@media(prefers-reduced-motion:reduce){.wow.show{animation:wow-fade 1.3s both}@keyframes wow-fade{0%,100%{opacity:0}14%,72%{opacity:1}}}
/* Départ au téléphone (body.waiting) : l'essentiel seulement. En haut les deux records, en bas une carte
   papier avec la devise et le bouton ; ni compteurs à zéro, ni flèches tactiles, ni texte d'aide avant de rouler. */
@media(max-width:600px){body.waiting #touch-controls{display:none}body.waiting .hud,body.waiting.riding .hud{grid-template-columns:1fr 1fr;row-gap:0;align-items:start}body.waiting .hud .altitude-stat small,body.waiting .hud .altitude-stat strong,body.waiting .hud .climb-next,body.waiting .hud .time-stat,body.waiting .hud .faults-stat,body.waiting .hud .balance-stat,body.waiting .hud #pause-button{display:none}body.waiting .hud .record-stat{grid-area:1/1}body.waiting .hud .day-stat{grid-area:1/2}body.waiting .hud .record-stat strong,body.waiting .hud .day-stat strong{font-size:22px}body.waiting .hud .record-stat small,body.waiting .hud .day-stat small{font-size:10px;white-space:nowrap}body.waiting .hud .day-who{display:block;font-size:11px}body.waiting #intro{top:auto;bottom:18px;background:#f4f1e8f2;padding:18px 16px 16px;border:1px solid #23211d26}body.waiting #intro .eyebrow,body.waiting #intro p,body.waiting #intro>small{display:none}body.waiting #intro h1{font-size:26px;line-height:1.08;margin:0 0 14px}body.waiting #intro .primary{width:100%;min-width:0;justify-content:space-between;padding:16px 18px;font-size:17px}}
/* Commandes tactiles pour gaucher : les deux groupes échangés (gaz et frein à gauche, poids à droite). Le bouton
   de choix n'apparaît que sur écran tactile. */
body.left-handed #touch-controls{flex-direction:row-reverse}
.hand-button{display:none}
@media(pointer:coarse){.center-message>.hand-button{display:block;margin-top:10px;padding:10px 0;font-size:14px;text-align:left}}
/* Téléphone en portrait, en roulant : temps, fautes et records juste au-dessus des flèches tactiles (game.js placeStats). */
.hud-low{position:absolute;left:14px;right:14px;bottom:12px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.7fr) minmax(0,1.2fr) minmax(0,1.25fr);column-gap:clamp(6px,2.4vw,14px);align-items:end;padding:6px 12px;background:#f4f1e8db;color:var(--on-paper);pointer-events:none;z-index:1}
@media(pointer:coarse){.hud-low{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--pad)*.9 + 8px)}}
.hud-low>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.hud-low small{font-size:clamp(8px,2.35vw,9.5px);letter-spacing:.6px;color:var(--on-paper-soft);line-height:1.15}
.hud-low strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(13px,4.3vw,17px);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-low .day-who{display:none}
/* Départ, pause et arrivée : les actions secondaires sont de vrais boutons, à la largeur du bouton principal
   (elles étaient des liens soulignés). Le choix gaucher / droitier porte une double flèche. */
#intro>button:not(.primary),#pause>button:not(.primary),#finish>button:not(.primary){align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:0;margin-top:10px;padding:13px 18px;border:1.5px solid currentColor;border-radius:0;background:transparent;font-size:15px;font-weight:600;text-decoration:none;text-align:left}
#intro>button:not(.primary):not(.hand-button),#pause>button:not(.primary):not(.hand-button),#finish>button:not(.primary):not(.hand-button){display:flex}
#pause>button:not(.primary):hover,#finish>button:not(.primary):hover{background:#f1e8cf1f}
#intro>button:not(.primary):hover{background:#23211d14}
#pause .primary,#finish .primary{width:100%;min-width:0;justify-content:space-between}
.hand-button::after{content:'⇄';font-size:18px;line-height:1}
@media(pointer:coarse){#intro>.hand-button,#pause>.hand-button{display:flex}}
/* La barre du bandeau va du dernier camp au prochain (plus loin si un record est proche) : remplie jusqu'au pilote, un trait fin
   au prochain camp, un trait encre à votre record, un trait orange coiffé d'un losange au record du jour. Au
   téléphone les deux records ne sont plus que ces repères et leur légende ; temps et fautes restent seuls en bas. */
.climb-bar{overflow:visible;height:6px}
.climb-bar .mark{position:absolute;top:50%;width:3px;height:16px;margin:-8px 0 0 -1.5px;border-radius:1px;background:var(--on-paper)}
.climb-bar .mark.day{background:#b5561c}
.climb-bar .mark.day::before{content:'';position:absolute;left:50%;top:-5px;width:7px;height:7px;margin-left:-3.5px;background:#b5561c;transform:rotate(45deg)}
.climb-bar .mark.camp{width:1.5px;height:10px;margin:-5px 0 0 -.75px;background:#23211d80}
.climb-legend{display:none;gap:14px;margin-top:6px;font-size:12px;color:var(--on-paper);white-space:nowrap}
.climb-legend .lg{display:flex;align-items:center;gap:6px}
.climb-legend .lg i{position:relative;width:3px;height:12px;border-radius:1px;background:var(--on-paper);flex:none}
.climb-legend .lg.day i{background:#b5561c;margin-left:3px}
.climb-legend .lg.day i::before{content:'';position:absolute;left:50%;top:-4px;width:6px;height:6px;margin-left:-3px;background:#b5561c;transform:rotate(45deg)}
@media(min-width:601px){.climb-bar{width:150px}}
@media(max-width:600px){.hud>div.record-stat,.hud>div.day-stat,.riding .hud>div.record-stat,.riding .hud>div.day-stat{display:none}body.waiting .hud>div.record-stat,body.waiting .hud>div.day-stat{display:flex}body.waiting .climb-legend{display:none}.climb-legend{display:flex;grid-area:4/1/5/5}.climb-next{margin:4px 0 0}.hud-low{grid-template-columns:auto auto;justify-content:start;column-gap:22px}}
/* Aide : huit cartes animées (la commande, les touches qui s'allument, ce que fait la moto), puis tout le détail replié. */
.help-cards{right:50%;bottom:50%;transform:translate(50%,50%);width:min(860px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 28px 22px}
.hgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;clear:both}
.hc{background:#f4f1e8;color:#23211d;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hc h3{margin:0;font-size:15px;line-height:1.15}
.help-cards .hc p{margin:0;font-size:12px;line-height:1.35;color:#4a463c}
.hs{width:100%;height:auto;display:block;overflow:hidden;background:#ece8dc}
.hs *{fill:none;stroke:#23211d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hs .hg{stroke-width:1.5}.hs .hw path{stroke-width:1}.hs .hr circle{fill:#f4f1e8}.hs .hflag{stroke:#b5561c}
.hb,.hr,.hw{transform-box:view-box}
.hw{transform-origin:var(--x) 48px}.hr{transform-origin:52px 31px}
.hkeys{display:flex;align-items:center;gap:5px;min-height:28px}
.hk{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:1.5px solid #23211d;border-radius:5px;background:#fff;font:600 13px/1 system-ui,sans-serif;color:#23211d}
.hor{font-size:11px;color:#6f6a5c}
.help-legal{margin:14px 0 0;font-size:12px;text-align:right}.help-legal a{color:inherit;opacity:.7}
.portal #fullscreen-button{display:none!important}
.help-cards .hnote{font-size:13px;margin:12px 0 0;color:#cbc5b1}
.hmore{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.hmore summary{cursor:pointer;font-size:13px;color:var(--accent)}.hmore p{margin:10px 0 0}
@media(max-width:900px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.help-cards{inset:0;right:0;bottom:0;transform:none;width:auto;max-height:none;padding:16px 14px}.hgrid{gap:8px}}
@media(prefers-reduced-motion:no-preference){
.hk-a,.hk-b,.hk-hold,.hk-tap,.hk-tap2{animation:2.6s linear infinite}
.hk-a{animation-name:hk-on}.hk-hold{animation-name:hk-hold}.hk-tap{animation-name:hk-tap}.hk-tap2{animation-name:hk-tap2}.hk-b{animation-name:hk-off}
@keyframes hk-on{0%,8%,72%,100%{background:#fff}12%,68%{background:#e2a838}}
@keyframes hk-off{0%,100%{background:#fff}}
@keyframes hk-hold{0%,4%,92%,100%{background:#fff}8%,88%{background:#e2a838}}
@keyframes hk-tap{0%,10%,20%,100%{background:#fff}12%,18%{background:#e2a838}}
@keyframes hk-tap2{0%,24%,34%,100%{background:#fff}26%,32%{background:#e2a838}}
.hc-backhop .hk-tap{animation-name:hk-tap2}
.hc-hop .hk-a{animation-name:hk-off}
.hc .hb,.hc .hr,.hc .hw{animation:2.6s infinite}
.hc-gas .hb{animation-name:hb-gas;animation-timing-function:linear}.hc-gas .hw{animation:hw-spin .5s linear infinite}
@keyframes hb-gas{0%{transform:translateX(-46px)}100%{transform:translateX(62px)}}
@keyframes hw-spin{to{transform:rotate(360deg)}}
.hc-brake .hb{animation-name:hb-brake;animation-timing-function:ease-out}.hc-brake .hw{animation-name:hw-brake;animation-timing-function:ease-out}
@keyframes hb-brake{0%{transform:translateX(-50px)}12%{transform:translateX(-30px)}45%,100%{transform:translateX(4px)}}
@keyframes hw-brake{0%{transform:rotate(0)}12%{transform:rotate(200deg)}45%,100%{transform:rotate(420deg)}}
.hc-back .hb{transform-origin:38px 48px;animation-name:hb-back}.hc-back .hr{animation-name:hr-back}
@keyframes hb-back{0%,8%,80%,100%{transform:rotate(0)}30%,66%{transform:rotate(-24deg)}}
@keyframes hr-back{0%,6%,82%,100%{transform:rotate(0)}18%,66%{transform:rotate(-22deg)}}
.hc-front .hb{transform-origin:38px 48px;animation-name:hb-front}.hc-front .hr{animation-name:hr-front}
@keyframes hb-front{0%,10%{transform:rotate(-24deg)}34%,100%{transform:rotate(0)}}
@keyframes hr-front{0%,8%,84%,100%{transform:rotate(0)}22%,68%{transform:rotate(26deg)}}
.hc-hop .hb{transform-origin:56px 58px;animation-name:hb-hop}
@keyframes hb-hop{0%,34%,74%,100%{transform:translateY(0) scale(.72)}54%{transform:translateY(-14px) scale(.72);animation-timing-function:ease-in}34%{animation-timing-function:ease-out}}
@keyframes hr-hop{0%,26%,60%,100%{transform:scaleY(1)}34%{transform:scaleY(.8)}46%{transform:scaleY(1.08)}}
.hc-backhop .hb{animation-name:hb-backhop}
@keyframes hb-backhop{0%,34%{transform:translate(14px,0)}48%{transform:translate(4px,-10px)}62%,100%{transform:translate(-8px,0)}}
.hc-air .hb{transform-origin:56px 36px;animation-name:hb-air;animation-timing-function:linear}
@keyframes hb-air{0%{transform:translateY(10px) rotate(0) scale(.6)}14%{transform:translateY(-5px) rotate(0) scale(.6)}70%{transform:translateY(-5px) rotate(-360deg) scale(.6)}84%,100%{transform:translateY(10px) rotate(-360deg) scale(.6)}}
.hc-back2flag .hb{transform-origin:38px 48px;animation-name:hb-flag}
@keyframes hb-flag{0%,10%{transform:translateX(34px) rotate(0);opacity:1}24%,56%{transform:translateX(46px) rotate(-115deg);opacity:1}64%{transform:translateX(46px) rotate(-115deg);opacity:0}66%{transform:translateX(0) rotate(0);opacity:0}76%,100%{transform:translateX(0) rotate(0);opacity:1}}
.hc-back2flag .hk-a{animation-name:hk-flag}@keyframes hk-flag{0%,54%,64%,100%{background:#fff}56%,62%{background:#e2a838}}
}

/* HUD épuré : plus de jauge de poids du pilote ; « Camp N dans X m » prend sa place, à droite du grand chiffre.
   Grand écran : toutes les cases sur le même modèle, libellé au-dessus, valeur dessous, alignées en haut. */
.hud .balance-stat{display:none!important}
#climb-next-text{font-size:12px;color:var(--on-paper);white-space:nowrap}
.climb-next.hidden~.climb-legend,body.waiting .climb-legend{display:none}
.climb-next .climb-bar{flex:1;width:auto;min-width:150px}
@media(min-width:601px){
.hud,.riding .hud{align-items:flex-start;gap:26px}
.hud .altitude-stat,.riding .hud .altitude-stat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:end;padding:0}
.hud .altitude-stat>small,.hud .altitude-stat>.climb-next,.hud .altitude-stat>.altitude-best{grid-column:1/3}
#climb-next-text{grid-column:2;justify-self:end;padding-bottom:6px}
.climb-legend{display:none}
.hud>div:not(.altitude-stat),.riding .hud>div:not(.altitude-stat){display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:1px 0 0}
.hud>div.hidden,.riding .hud>div.hidden,.hud .balance-stat,.riding .hud .balance-stat{display:none}
.hud>div:not(.altitude-stat) small,.riding .hud>div:not(.altitude-stat) small{display:block;margin:0;font-size:9px;letter-spacing:1.4px;line-height:14px}
.hud>div:not(.altitude-stat) strong,.riding .hud>div:not(.altitude-stat) strong{font-size:22px;line-height:1.1}
.riding #checkpoint::before,.riding .hud .faults-stat strong::before{content:none}
.hud button,.riding .hud button{margin-top:12px}
}
@media(max-width:600px){.climb-next .climb-bar{min-width:24px}#climb-next-text{grid-area:2/2/3/5;justify-self:end;align-self:end;padding-bottom:7px;font-size:clamp(11px,3.3vw,13px)}}

/* Les anciens modes et outils (Ascension, Décors, Expédition, Atelier, Image, Circuits, conduite, saut, conseil,
   debug) ne sont ni visibles ni atteignables hors de la copie locale ouverte avec ?dev : la classe no-dev est
   posée sur <html> par index.html avant le premier affichage, donc rien n'apparaît le temps du chargement. */
.no-dev #ascension-button,.no-dev #decors-button,.no-dev #expedition-button,.no-dev #workshop-button,.no-dev #image-button,.no-dev #tracks-button,
.no-dev #handling-button,.no-dev #hop-button,.no-dev #coach-button,.no-dev #debug-button,.no-dev #workshop,.no-dev #terrain-editor{display:none!important}

/* Téléphone, en roulant : votre record, le record du jour, le temps et les fautes au-dessus des touches (game.js placeStats) ;
   la légende « Vous / Jour » sous la barre devient inutile, les repères restent sur la barre. */
@media(max-width:600px){.hud-low{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:clamp(6px,2.4vw,14px)}body.low-stats .climb-legend{display:none}.hud-low>div.hidden{display:none}}

/* Grand écran, en roulant : records, temps, fautes et tronçon en bas à gauche de l'image (game.js placeStats). */
@media(min-width:601px){.hud-low{left:14px;right:auto;bottom:12px;display:flex;gap:28px;align-items:flex-start;padding:8px 18px 9px 16px}
.hud-low>div{gap:3px}.hud-low>div.hidden{display:none}
.hud-low small{font-size:9px;letter-spacing:1.4px;line-height:14px}.hud-low strong{font-size:22px;line-height:1.1}.hud-low strong span{font-size:13px;color:var(--on-paper-soft)}}

/* Départ, pause, arrivée, chute : toujours au-dessus du reste (bande du bas, touches tactiles, « Waouh »).
   En pause et à l'arrivée, les touches tactiles, le « Waouh » et le conseil sont rangés ; au téléphone la bande
   du bas aussi, et le panneau défile s'il est plus haut que l'écran. */
#intro,#pause,#finish,#crash{z-index:6}
body.paused #touch-controls,body.paused #wow,body.paused #coach{display:none}
@media(max-width:600px){body.paused .hud-low{display:none}#intro,#pause,#finish{max-height:calc(100% - var(--below-hud,200px) - 10px);overflow-y:auto}}

/* Plus de conseils de pilotage en jeu (copie locale avec ?dev seulement). Grand écran : le bandeau (altitude, niveau,
   prochain camp, barre) est centré en haut. */
.no-dev #coach{display:none!important}
@media(min-width:601px){.hud,.riding .hud{left:50%;right:auto;transform:translateX(-50%)}}

/* Grand écran, écran de départ : seulement votre record et le record du jour. Le bandeau centré garde sa largeur
   naturelle (centré avec left:50 %, il se repliait sur la moitié de l'écran et coupait « 138 m » en deux lignes). */
@media(min-width:601px){.hud,.riding .hud{width:max-content;max-width:calc(100% - 24px)}.hud strong,.hud small,.zone-chip{white-space:nowrap}
body.waiting .hud>div.altitude-stat,body.waiting .hud>div.time-stat,body.waiting .hud>div.faults-stat,body.waiting .hud>div.checkpoint-stat,body.waiting .hud>button{display:none}
body.waiting .hud{gap:40px}}

/* Écran de départ : pas de « Camp N dans X m » (au téléphone il restait seul sous les records). */
body.waiting #climb-next-text{display:none}

/* En roulant, les deux bandeaux échangent leur place (game.js placeStats, body.low-stats) : records, temps, fautes,
   tronçon et bouton pause en haut, centrés ; altitude, niveau, prochain camp et barre en bas, centrés (au téléphone,
   juste au-dessus des touches). */
.hud-low button{pointer-events:auto;color:var(--on-paper);font-size:16px;line-height:1;border:1px solid #23211d40;border-radius:50%;width:34px;height:34px;padding:0;display:grid;place-items:center;background:#f4f1e8aa;align-self:center;cursor:pointer}
body.low-stats .hud-low{top:12px;bottom:auto}
body.low-stats .hud,body.low-stats.riding .hud{top:auto;bottom:12px}
@media(min-width:601px){body.low-stats .hud-low{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);align-items:center}}
@media(max-width:600px){body.low-stats .hud-low{top:8px;left:8px;right:8px;grid-template-columns:repeat(4,auto) 34px;align-items:center}
body.paused .hud-low{display:grid}body.paused.low-stats .hud{display:none}}
@media(pointer:coarse){body.low-stats .hud,body.low-stats.riding .hud{bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--pad)*.9 + 8px)}}
@media(pointer:coarse) and (max-width:600px){body.low-stats .hud-low{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}}
/* Race between friends (race.js): the panel of the room, on paper like the other boxes, and the countdown. */
.race-panel{position:absolute;left:12px;top:var(--below-hud,150px);z-index:8;width:232px;max-width:calc(100vw - 24px);background:#f4f1e8ee;color:#23211d;border:2px solid #23211d;border-radius:10px;padding:8px 10px;font-size:12px}
.race-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.race-head button{padding:0 6px;border:0;color:#23211d;font-size:14px}.race-head button:hover{background:none}
.race-panel ol{list-style:none;margin:6px 0;padding:0}.race-panel li{display:flex;align-items:center;gap:6px;padding:2px 0}.race-panel li i{flex:none;width:9px;height:9px;border-radius:50%}.race-panel li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-panel li b{font:600 11px ui-monospace,monospace}
.race-panel p{margin:4px 0;color:#6f6a5c}.race-panel button{font-size:11px;padding:6px 9px;border-color:#23211d;color:#23211d}.race-panel button:hover{background:#e6e0cc;border-color:#23211d}.race-panel button.primary{background:#e2a838;border-color:#23211d}
#race-actions{display:grid;gap:5px;margin-bottom:6px}.race-foot{display:flex;gap:5px}.race-foot button{flex:1}
.race-panel.compact #race-actions,.race-panel.compact .race-foot{display:none}.race-panel.compact #race-fold{transform:rotate(-90deg)}.race-panel.compact{width:190px}.race-panel.compact ol{margin-bottom:0}
.race-count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;font:900 96px/1 system-ui,sans-serif;color:#23211d;text-shadow:0 0 2px #f4f1e8,0 0 12px #f4f1e8,0 0 24px #f4f1e8;white-space:nowrap}
.race-row{grid-template-columns:1fr 1fr;margin-bottom:12px}.race-row:empty{display:none}.race-join{display:grid;grid-template-columns:1fr auto;gap:6px;align-content:start;border:1px solid var(--line);padding:10px 12px}.race-join strong{grid-column:1/-1;font-size:13px}.race-join input{min-width:0;font:600 14px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;background:#1d1b17;color:var(--paper);border:1px solid var(--line);padding:8px}.race-join button{font-size:12px;padding:8px 12px}@media(max-width:600px){.race-row{grid-template-columns:1fr}}
@media(max-width:600px){.race-panel{left:8px;top:58px;width:176px;font-size:11px;padding:6px 8px}.race-panel.compact{width:150px;font-size:10px;background:#f4f1e8cc}.race-panel li b{font-size:10px}.race-count{font-size:72px;top:42%}body.paused .race-panel.compact{display:none}}
/* En roulant, sur tous les écrans : tout en haut, loin des pouces, une bande sombre porte l'altitude, le prochain camp
   et la ligne de montée avec ses repères : vous, votre record, le record du jour et, en course entre amis, un point par
   adversaire (game.js updateHud) ; juste dessous, la ligne des chiffres (temps, fautes, tronçon, pause).
   --dash : hauteur de la bande (measureHud). Sur un téléphone, droit ou couché, l'en-tête et la barre du bas s'effacent
   pendant qu'on roule (ils reviennent à la pause) ; couché, la bande tient sur une seule ligne. */
.climb-bar .peer{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1.5px solid #f4f1e8;transition:left .3s linear}
.climb-bar i::after{content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:inherit}
body.low-stats .hud,body.low-stats.riding .hud{left:0;right:0;top:0;bottom:auto;width:auto;max-width:none;transform:none;--on-paper:#f1e8cf;--on-paper-soft:#a5a18e;--on-paper-accent:#e8904a;background:#201e19;color:var(--on-paper);text-shadow:none;display:grid;grid-template-columns:auto auto 1fr;gap:0;column-gap:10px;row-gap:7px;align-items:center;justify-content:stretch;padding:calc(8px + env(safe-area-inset-top)) max(14px,calc(50% - 380px)) 9px}
body.low-stats .hud .altitude-stat,body.low-stats.riding .hud .altitude-stat{display:contents}
body.low-stats .hud .altitude-stat strong,body.low-stats.riding .hud .altitude-stat strong{grid-area:1/1;font-size:26px;letter-spacing:-.5px;line-height:1;align-self:center;white-space:nowrap}
body.low-stats .hud .altitude-stat strong span,body.low-stats.riding .hud .altitude-stat strong span{font-size:13px}
body.low-stats .hud .altitude-stat small,body.low-stats.riding .hud .altitude-stat small{grid-area:1/2;display:flex;align-self:center;font-size:10px;margin:0}
body.low-stats .hud .altitude-stat small>span{display:none}body.low-stats .hud .zone-chip{margin-left:0}
body.low-stats #climb-next-text{grid-area:1/3;justify-self:end;align-self:center;padding:0;font-size:12px}
body.low-stats #climb-next{grid-area:2/1/3/4;display:flex;margin:3px 5px 2px;min-width:0}
body.low-stats .climb-next .climb-bar{display:block;flex:1;width:auto;min-width:24px;background:#f1e8cf33}body.low-stats .climb-bar .mark.camp{background:#f1e8cf99}
body.low-stats .climb-bar .mark.day,body.low-stats .climb-bar .mark.day::before,body.low-stats .climb-legend .lg.day i,body.low-stats .climb-legend .lg.day i::before{background:#e2a838}
body.low-stats .climb-bar .peer{border-color:#201e19;box-shadow:0 0 0 1px #f1e8cf}
body.low-stats #climb-legend{display:flex;grid-area:3/1/4/4;margin:0;font-size:11px;color:var(--on-paper-soft)}
body.low-stats #climb-next.hidden~#climb-legend{display:none}
body.low-stats .hud .balance-stat,body.low-stats .altitude-best{display:none}
body.low-stats .hud-low{top:calc(var(--dash,84px) + 8px);bottom:auto}
@media(pointer:coarse){body.low-stats .hud,body.low-stats.riding .hud{bottom:auto}}
@media(max-width:600px){
body.riding .topbar,body.riding .bottom-bar{display:none}
body.low-stats .hud-low{top:calc(var(--dash,84px) + 4px);grid-template-columns:auto auto 1fr 34px;column-gap:14px;justify-content:stretch;align-items:center;padding:2px 8px 2px 10px;background:#f4f1e8cc}
body.low-stats .hud-low>div.record-stat,body.low-stats .hud-low>div.day-stat{display:none}
body.low-stats .hud-low>div.checkpoint-stat{display:flex;flex-direction:row;align-items:baseline;gap:5px;justify-self:end}
body.low-stats .hud-low small{display:none}body.low-stats .hud-low .checkpoint-stat small{display:inline;font-size:9px}
body.low-stats .hud-low .checkpoint-stat strong span{display:none}
body.low-stats .hud-low .faults-stat strong::before{content:'✕ ';font-size:11px;color:var(--on-paper-soft)}
.race-panel,.race-panel.compact{top:48px}body.low-stats .race-panel,body.low-stats .race-panel.compact{top:calc(var(--dash,84px) + 46px)}
}
body.hud-dodge.low-stats .hud{opacity:1}
@media(max-height:500px){
body.riding .topbar,body.riding .bottom-bar{display:none}
body.low-stats .hud,body.low-stats.riding .hud{grid-template-columns:auto auto 1fr auto;row-gap:0;column-gap:14px;padding:calc(5px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left))}
body.low-stats .hud .altitude-stat strong,body.low-stats.riding .hud .altitude-stat strong{font-size:22px}
body.low-stats #climb-next{grid-area:1/3;margin:0 6px}body.low-stats #climb-next-text{grid-area:1/4}
body.low-stats #climb-legend{display:none}
body.low-stats .hud-low{top:calc(var(--dash,40px) + 4px)}
}
/* Manette dans les menus : le bouton désigné (game.js padMark). */
.pad-focus,.pad-focus:focus{outline:3px solid #ee6a1f!important;outline-offset:3px;box-shadow:0 0 0 6px #ee6a1f40}
/* Ordinateur, en roulant : une seule barre. L'en-tête et la barre du bas s'effacent (ils reviennent à la pause) ; la
   bande garde le nom du jeu, l'altitude, la ligne de montée et le prochain camp ; le temps, les fautes et la pause
   viennent à sa droite. Les records ne sont plus que les repères de la ligne. */
@media(min-width:601px){
body.riding .topbar,body.riding .bottom-bar{display:none}
body.riding.low-stats .hud{grid-template-columns:auto auto auto auto 1fr auto;column-gap:14px;row-gap:0;padding:10px 236px 10px 20px}
body.riding.low-stats .hud::before{content:'UP UP';grid-area:1/1;color:#e8904a}
body.riding.low-stats .hud::after{content:'RIDER';grid-area:1/2;margin:0 18px 0 -8px}
body.riding.low-stats .hud::before,body.riding.low-stats .hud::after{font-family:'Archivo Black',Saira,system-ui,sans-serif;font-size:19px;line-height:1;letter-spacing:-.3px;align-self:center}
body.riding.low-stats .hud .altitude-stat strong{grid-area:1/3}body.riding.low-stats .hud .altitude-stat small{grid-area:1/4}
body.riding.low-stats #climb-next{grid-area:1/5;margin:0 8px}body.riding.low-stats #climb-next-text{grid-area:1/6}
body.riding.low-stats #climb-legend{display:none}
body.riding.low-stats .hud-low{top:0;right:16px;left:auto;bottom:auto;transform:none;width:auto;max-width:none;height:var(--dash,46px);display:flex;gap:18px;align-items:center;padding:0;background:none;border:0;box-shadow:none;--on-paper:#f1e8cf;--on-paper-soft:#a5a18e;color:var(--on-paper);text-shadow:none}
body.riding.low-stats .hud-low>div.record-stat,body.riding.low-stats .hud-low>div.day-stat,body.riding.low-stats .hud-low>div.checkpoint-stat,body.riding.low-stats .hud-low small{display:none}
body.riding.low-stats .hud-low strong{font-size:18px;color:var(--on-paper)}
body.riding.low-stats .hud-low .faults-stat strong::before{content:'✕ ';font-size:11px;color:var(--on-paper-soft)}
body.riding.low-stats .hud-low button{width:30px;height:30px;font-size:14px;color:#f1e8cf;background:none;border-color:#f1e8cf66}
}
/* Téléphone couché, en roulant : la même barre unique, sans le nom du jeu (la ligne de montée garde la largeur). */
@media(min-width:601px) and (max-height:500px){
body.riding.low-stats .hud{grid-template-columns:auto auto 1fr auto;column-gap:12px;padding:calc(6px + env(safe-area-inset-top)) calc(214px + env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left))}
body.riding.low-stats .hud::before,body.riding.low-stats .hud::after{display:none}
body.riding.low-stats .hud .altitude-stat strong{grid-area:1/1}body.riding.low-stats .hud .altitude-stat small{grid-area:1/2}
body.riding.low-stats #climb-next{grid-area:1/3}body.riding.low-stats #climb-next-text{grid-area:1/4}
body.riding.low-stats .hud-low{top:0;right:max(12px,env(safe-area-inset-right));gap:14px}
body.riding.low-stats .hud-low strong{font-size:16px}
}
/* Manette : le bouton de réglage n'apparaît qu'une fois une manette vue ; le panneau, une ligne par action. */
.pad-button{display:none}body.has-pad .center-message>.pad-button{display:block}
.pad-list{display:grid;gap:6px;margin:0 0 12px}.pad-list button{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:#1d1b17;font-size:14px;text-align:left}
.pad-list button strong{min-width:44px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;text-align:center;font:600 13px ui-monospace,monospace;color:var(--accent)}
.pad-list button.learning{border-color:var(--accent)}.pad-list button.learning strong{border-style:dashed;color:var(--paper);font-weight:400}
/* Code d'un salon : les chiffres à l'écran, pour la manette et le tactile. */
.race-keys{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.race-join .race-keys button{padding:8px 0;font:600 14px ui-monospace,monospace}
.race-join input{letter-spacing:.3em;grid-column:1/-1}.race-join .race-keys .race-ok{background:var(--accent);color:#201e19;border-color:var(--accent)}