/* Alpine Crawl - tablet-first layout (landscape), works on phones and desktops. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1726; color: #f2f4f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

/* HUD */
#hud { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 12px); pointer-events: none; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat { background: rgba(10, 18, 30, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px;
  padding: 9px 14px; font-weight: 700; font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-height: 40px; }
.stat:empty { display: none; }
.stat.pen { color: #ffb4a6; }
.tilt { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.tilt b { width: 22px; height: 2px; background: #9fd3ff; display: inline-block; border-radius: 2px; }
.tilt b.r { background: #ffd27a; }
.tilt.warn { color: #ffb4a6; }
.btns { display: flex; gap: 8px; pointer-events: auto; }
.btns button { min-width: 56px; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(10, 18, 30, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 700; font-size: 15px; letter-spacing: .05em; }
.btns button:active { background: rgba(60, 90, 130, .8); }
#sndBtn.off { opacity: .45; text-decoration: line-through; }
/* 1.6.4: the browser has stopped the sound (context suspended / interrupted for 1.5 s): the button pulses; a tap restarts it */
#sndBtn.stalled { animation: sndstall 1s ease-in-out infinite; box-shadow: 0 0 0 2px #ff9f1a; }
@keyframes sndstall { 50% { box-shadow: 0 0 0 6px rgba(255, 159, 26, .35); } }

/* lockers: like the switches on a transmitter, centred where both thumbs reach */
#lockers { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 16px); transform: translateX(-50%); display: flex; gap: 12px; }
.lock { width: 96px; height: 70px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(10, 18, 30, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 800; font-size: 13px; letter-spacing: .06em; line-height: 1.15; position: relative; }
.lock i { position: absolute; top: 8px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: #3a4a5c; }
.lock.on { border-color: #ffb21f; color: #ffd27a; background: rgba(70, 45, 5, .7); }
.lock.on i { background: #ffb21f; box-shadow: 0 0 10px #ffb21f; }
.lock.cruise { margin-left: 10px; }
.lock.cruise.on { border-color: #4fd1ff; color: #aee9ff; background: rgba(5, 45, 70, .7); }
.lock.cruise.on i { background: #4fd1ff; box-shadow: 0 0 10px #4fd1ff; }
#cruiseVal { font-variant-numeric: tabular-nums; }

/* control zones (hints) and the floating thumb knobs */
.zone { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 24px); pointer-events: none; opacity: .5; font-weight: 800; font-size: 13px;
  letter-spacing: .12em; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
#zoneL { left: calc(env(safe-area-inset-left) + 7vw); }
#zoneR { right: calc(env(safe-area-inset-right) + 7vw); line-height: 1.5; }
.knob { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.knob::before { content: ""; position: absolute; border: 2px solid rgba(255, 255, 255, .45); background: rgba(10, 18, 30, .25); border-radius: 40px; }
.knob.h::before { left: -95px; top: -26px; width: 190px; height: 52px; }
.knob.v::before { left: -26px; top: -110px; width: 52px; height: 220px; }
.knob i { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
#gateArrow { position: fixed; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none;
  clip-path: polygon(100% 50%, 20% 0, 40% 50%, 20% 100%); background-color: rgba(255, 190, 40, .95); }
#banner { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.pop { background: rgba(10, 18, 30, .7); padding: 10px 20px; border-radius: 14px; font-weight: 800; letter-spacing: .06em; font-size: 20px;
  animation: pop 1.6s ease forwards; white-space: nowrap; }
.pop.ok { color: #a8f0b4; } .pop.bad { color: #ffb4a6; }
@keyframes pop { 0% { opacity: 0; transform: translateY(8px) scale(.95); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* overlays */
.ov { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 20, .35); }
.ov[hidden], [hidden] { display: none !important; }
#start { background: linear-gradient(90deg, rgba(5, 10, 20, .78), rgba(5, 10, 20, .25) 60%, rgba(5, 10, 20, 0)); justify-content: flex-start; padding-left: calc(env(safe-area-inset-left) + 4vw); }
.card { background: rgba(10, 18, 30, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; padding: 26px 28px;
  max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
/* overlays fill the visible screen (100vh is taller than the visible area in iOS Safari): the card scrolls inside it */
.ov { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.card.small { max-width: 380px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
h1 { margin: 0; font-size: 44px; letter-spacing: .08em; font-weight: 900; background: linear-gradient(90deg, #fff, #ffcf8a); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: .08em; }
.sub { margin: 4px 0 18px; opacity: .75; font-weight: 700; letter-spacing: .14em; font-size: 13px; }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.howto div { background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.35; opacity: .92; }
.howto b { display: block; font-size: 13px; letter-spacing: .1em; color: #ffcf8a; margin-bottom: 3px; }
.track { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 14px; }
.go, .ghost { border: 0; border-radius: 14px; font-weight: 800; letter-spacing: .08em; min-height: 54px; padding: 0 22px; font-size: 17px; }
.go { width: 100%; background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; box-shadow: 0 6px 18px rgba(226, 98, 15, .45); }
.ghost { background: rgba(255, 255, 255, .1); }
.go:active, .ghost:active { transform: translateY(1px); filter: brightness(1.1); }
.keys { margin: 12px 0 0; font-size: 12px; opacity: .55; }
.res { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
.res td { padding: 6px 4px; } .res td:last-child { text-align: right; font-weight: 700; }
.res .tot td { border-top: 1px solid rgba(255, 255, 255, .25); font-size: 21px; font-weight: 900; color: #ffcf8a; }
.best { margin: 2px 0 6px; font-weight: 800; letter-spacing: .06em; color: #a8f0b4; }

/* difficulty selector */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 5px; margin-bottom: 12px; }
.levels button { border: 0; border-radius: 10px; min-height: 44px; background: transparent; font-weight: 800; letter-spacing: .1em; font-size: 14px; color: rgba(255, 255, 255, .7); }
.levels button.on { background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; }
.stat.lvl { color: #ffcf8a; font-size: 13px; display: flex; align-items: center; }

/* phase visibility */
body[data-phase="start"] #hud, body[data-phase="start"] #lockers, body[data-phase="start"] .zone { display: none; }
body[data-phase="done"] .zone, body[data-phase="done"] #lockers { display: none; }

/* phones in landscape */
@media (max-height: 500px) {
  .card { max-width: 780px; padding: 16px 18px; }
  .howto { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .howto div { padding: 7px 9px; font-size: 11px; line-height: 1.25; }
  .track { margin-bottom: 8px; }
  .stat { font-size: 14px; padding: 6px 10px; min-height: 32px; }
  .btns button { height: 40px; min-width: 46px; padding: 0 10px; font-size: 13px; }
  .lock { width: 78px; height: 52px; font-size: 11px; }
  #lockers { bottom: calc(env(safe-area-inset-bottom) + 8px); }
  h1 { font-size: 28px; } .sub { margin: 2px 0 8px; }
  .go, .ghost { min-height: 46px; font-size: 15px; }
  .keys { display: none; }
}
/* narrow screens (phones in portrait) */
@media (max-width: 620px) {
  .howto { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
  #start { justify-content: center; padding-left: 16px; }
  .stat.tilt { display: none; }
  .btns button { min-width: 44px; padding: 0 9px; }
}
@media (orientation: portrait) and (max-width: 620px) {
  #hud { flex-direction: column; gap: 8px; }
  .zone { bottom: calc(env(safe-area-inset-bottom) + 100px); }
}

/* tablets (iPad): everything a size up - thumbs, not mouse pointers */
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) {
  #hud { padding-top: calc(env(safe-area-inset-top) + 16px); padding-left: calc(env(safe-area-inset-left) + 18px); padding-right: calc(env(safe-area-inset-right) + 18px); }
  .stat { font-size: 23px; padding: 12px 18px; min-height: 54px; border-radius: 16px; }
  .stat.lvl { font-size: 17px; }
  .tilt { font-size: 20px; } .tilt b { width: 30px; height: 3px; }
  .btns { gap: 12px; }
  .btns button { min-width: 78px; height: 68px; padding: 0 20px; font-size: 19px; border-radius: 16px; }
  #lockers { gap: 18px; bottom: calc(env(safe-area-inset-bottom) + 22px); }
  .lock { width: 138px; height: 98px; font-size: 18px; border-radius: 22px; border-width: 3px; }
  .lock i { width: 15px; height: 15px; top: 12px; right: 13px; }
  .zone { font-size: 17px; bottom: calc(env(safe-area-inset-bottom) + 34px); }
  .knob.h::before { left: -130px; top: -36px; width: 260px; height: 72px; border-radius: 50px; }
  .knob.v::before { left: -36px; top: -150px; width: 72px; height: 300px; border-radius: 50px; }
  .knob i { left: -42px; top: -42px; width: 84px; height: 84px; }
  .pop { font-size: 26px; padding: 14px 26px; }
  .card { max-width: 680px; padding: 32px 36px; }
  h1 { font-size: 54px; } .sub { font-size: 15px; }
  .howto div { font-size: 15px; } .howto b { font-size: 15px; }
  .levels button { min-height: 58px; font-size: 17px; }
  .go, .ghost { min-height: 66px; font-size: 20px; }
  .card.small { max-width: 460px; }
  .res { font-size: 21px; } .res .tot td { font-size: 26px; }
}

/* VR (WebXR) */
.go.vr { margin-top: 10px; background: linear-gradient(180deg, #3d8bff, #1f5fd0); box-shadow: 0 6px 18px rgba(31, 95, 208, .45); }
.vrhint { margin: 10px 0 0; font-size: 13px; color: #ffd27a; }
body.in-vr #hud, body.in-vr #lockers, body.in-vr .zone { display: none; }

/* saved tracks, likes, leaderboards (P10) */
.trackinfo { margin: -6px 0 12px; font-size: 13px; line-height: 1.45; opacity: .9; }
.trackinfo b { color: #ffcf8a; letter-spacing: .06em; }
.saved { margin: 12px 0 0; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 10px 12px; }
.savedHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: .08em; margin-bottom: 6px; }
.savedHead b { color: #ffcf8a; } .savedHead span { opacity: .6; }
#savedList { list-style: none; margin: 0; padding: 0; max-height: 168px; overflow: auto; -webkit-overflow-scrolling: touch; }
#savedList button { width: 100%; display: grid; grid-template-columns: 54px 70px 52px 1fr; gap: 6px; align-items: center; text-align: left; border: 0; background: transparent;
  min-height: 42px; padding: 0 6px; border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
#savedList button:active, #savedList button.cur { background: rgba(255, 178, 31, .18); }
#savedList .lv { font-weight: 800; font-size: 11px; letter-spacing: .08em; opacity: .75; }
#savedList .lk { color: #ff9fb0; font-weight: 700; }
#savedList .bt { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onlinenote { margin: 10px 0 0; font-size: 12px; opacity: .6; }
.rate { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 10px; }
.rate .q { margin: 0; font-weight: 800; letter-spacing: .08em; }
.pname { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.pname input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25);
  color: #fff; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0; padding: 0 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row2 .go, .row2 .ghost { padding: 0 10px; }
.rate .sel { outline: 3px solid #ffb21f; }
.ratemsg { margin: 0; font-weight: 700; color: #a8f0b4; min-height: 1em; }
.ratemsg.bad { color: #ffb4a6; }
.board { margin: 0; padding: 0; list-style: none; font-size: 14px; font-variant-numeric: tabular-nums; text-align: left; }
.board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 3px 6px; border-radius: 8px; }
.board li.me { background: rgba(168, 240, 180, .18); }
.board li span:first-child { opacity: .6; }
@media (max-height: 500px) { #savedList { max-height: 120px; } .saved { margin-top: 8px; } .pname input { min-height: 38px; } }

/* piste markers for the levels (as on Alpine ski runs): blue = easy, red = medium, black = hard */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; vertical-align: -1px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); margin-right: 7px; }
.dot.easy { background: #1f6fe0; } .dot.medium { background: #e0262b; } .dot.hard { background: #111; }
#levels .dot { margin-right: 8px; }
.savedHead .dot { width: 9px; height: 9px; margin: 0 3px 0 6px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
/* icon buttons (share, new track) */
.icon { width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.icon svg { width: 24px; height: 24px; }
.icon:active { background: rgba(255, 255, 255, .22); }
.track { gap: 8px; } .track #seedNo { margin-right: 4px; }
/* HUD track tag: tap to share */
.stat.trk { pointer-events: auto; border: 0; color: inherit; display: inline-flex; align-items: center; gap: 0; font: inherit; font-weight: 700; cursor: pointer; }
.stat.trk svg { width: 18px; height: 18px; margin-left: 8px; opacity: .85; }
/* saved tracks: marker | number | likes | best driver + time (the name gets the room) */
#savedList button { grid-template-columns: 14px 62px 44px 1fr; }
#savedList .dot { margin: 0; }
#savedList .bt b { font-weight: 700; }
.lock.gear.on { border-color: #7fd0ff; color: #bfe6ff; background: rgba(10, 50, 80, .7); }
.lock.gear.on i { background: #7fd0ff; box-shadow: 0 0 10px #7fd0ff; }
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) { .stat.trk svg { width: 24px; height: 24px; } .dot { width: 15px; height: 15px; } }
#levels button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
@media (max-width: 620px) {
  #levels button { font-size: 13px; padding: 0 6px; letter-spacing: .04em; }
  #levels .dot { margin-right: 5px; width: 10px; height: 10px; }
  #lockers { gap: 8px; }
  .lock { width: 72px; height: 58px; font-size: 11px; }
}
/* track number entry */
.seedcard { max-width: 340px; text-align: center; }
#seedIn { width: 100%; box-sizing: border-box; font: inherit; font-size: 34px; font-weight: 800; letter-spacing: .3em; text-align: center; padding: 10px 0 10px .3em;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .3); color: #fff; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
#seedIn:focus { outline: none; border-color: #ffb21f; }
#seedIn.bad { border-color: #ff6b5a; }
#seedNo { cursor: pointer; text-decoration: underline dotted rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.levels.modes { grid-template-columns: 1fr 1fr; }
/* preview bar */
.row2.drv { grid-template-columns: 1fr 1.6fr; margin-bottom: 4px; }
#previewBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 18px); z-index: 30; display: flex; gap: 10px; align-items: center;
  background: rgba(10, 18, 30, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px; padding: 10px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
#previewBar[hidden] { display: none; }
#previewBar .pvt { font-weight: 700; letter-spacing: .06em; font-size: 14px; padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#previewBar .pvt b { color: #ffcf8a; }
#previewBar .go, #previewBar .ghost { min-height: 48px; padding: 0 18px; width: auto; margin: 0; }
body[data-phase="preview"] #hud, body[data-phase="preview"] #lockers, body[data-phase="preview"] .zone { display: none; }
/* controller setup */
#padSetup { margin-top: 8px; }
.padcard { max-width: 420px; text-align: center; }
.padcard .ask { font-size: 20px; font-weight: 800; letter-spacing: .03em; color: #ffcf8a; min-height: 2.6em; margin: 10px 0; }
.padcard .live { font: 12px ui-monospace, Menlo, monospace; opacity: .75; min-height: 1.4em; word-break: break-all; }
.padcard .row2 { margin: 8px 0; }
.padcard .small { min-height: 40px; font-size: 13px; width: 100%; }
/* controller setup / test */
.padcard .state { font-size: 14px; font-weight: 700; min-height: 1.4em; margin: 0 0 6px; opacity: .8; }
.padcard .state.listen { color: #9fe0ff; } .padcard .state.show { color: #a8f0b4; }
.padcard .got { font-size: 12px; line-height: 1.6; opacity: .75; } .padcard .got span { display: inline-block; margin: 0 8px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0; }
.row3 button:disabled { opacity: .35; }
.why { font-size: 12px; opacity: .6; margin: 6px 0 0; min-height: 1.2em; }
.padstart { margin-top: 10px; width: 100%; min-height: 40px; font-size: 13px; }
.padtest { max-width: 640px; }
.padtest h3 { font-size: 12px; letter-spacing: .1em; margin: 12px 0 6px; color: #ffcf8a; } .padtest h3 small { color: #aab; letter-spacing: 0; font-weight: 400; }
.ptb { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.ptb i { position: relative; height: 34px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; font-style: normal; }
.ptb i em { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 178, 31, .55); }
.ptb i.on { box-shadow: 0 0 0 2px #ffb21f inset; }
.ptb i b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.pta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font: 12px ui-monospace, Menlo, monospace; }
.pta span { display: flex; align-items: center; gap: 6px; } .pta i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); position: relative; }
.pta em { position: absolute; top: -3px; width: 4px; height: 14px; margin-left: -2px; background: #9fe0ff; border-radius: 2px; }
.ptg { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12px ui-monospace, Menlo, monospace; opacity: .9; }
.ptl { font: 11px ui-monospace, Menlo, monospace; background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 8px; max-height: 150px; overflow: auto; white-space: pre-wrap; margin: 0; }
.ptt { width: 100%; height: 120px; font: 11px ui-monospace, Menlo, monospace; margin-top: 8px; }
.ptb i.seen { background: rgba(255, 255, 255, .22); }
.live.bad { color: #ff8a7a; font-weight: 700; opacity: 1; }
.ptl { max-height: 220px; }
.levels.times { grid-template-columns: repeat(4, 1fr); }
.levels.times button { font-size: 12px; letter-spacing: .04em; }
#gl:focus { outline: none; }

/* ---- RC Wonderland (landing) and Basher Smasher ---- */
.card .back { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #9fc4ff; text-decoration: none; margin: -6px 0 8px; opacity: .85; }
.card .back:hover { opacity: 1; }
body.wonder { overflow: auto; background: radial-gradient(ellipse at 30% 0%, #23405e 0%, #0d1726 60%, #070c14 100%); min-height: 100vh; }
.wonderland { max-width: 1100px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px 30px; text-align: center; }
.wonderland h1 { font-size: clamp(34px, 7vw, 64px); letter-spacing: .08em; margin: 18px 0 4px; background: linear-gradient(90deg, #ffd27a, #ff8a3d 45%, #7fc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wonderland .sub { letter-spacing: .3em; opacity: .7; margin-bottom: 22px; }
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.game { display: flex; flex-direction: column; text-align: left; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; box-shadow: 0 16px 50px rgba(0, 0, 0, .45); transition: transform .15s, box-shadow .15s; }
.game:hover, .game:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(0, 0, 0, .55); }
.game img { width: 100%; height: auto; aspect-ratio: 720 / 452; object-fit: cover; display: block; }
.game .gtitle { font-size: 24px; font-weight: 800; letter-spacing: .08em; padding: 14px 18px 4px; }
.game .gtitle em { font-style: normal; font-size: 12px; vertical-align: 5px; background: #ff7a2f; border-radius: 6px; padding: 2px 7px; margin-left: 6px; letter-spacing: .1em; }
.game .gsub { padding: 0 18px 18px; opacity: .8; line-height: 1.45; font-size: 14px; }
.wonderland .foot { opacity: .5; font-size: 12px; margin-top: 22px; }
body.basher #zoneR span { line-height: 1.5; }
#fLaps { font-size: 13px; opacity: .85; margin: 6px 0 0; }
#bestNote { margin: 8px 0 0; font-size: 13px; }
html:has(body.wonder) { overflow: auto; height: auto; }
body.wonder { height: auto; }

.build-badge{position:fixed;right:max(7px,env(safe-area-inset-right));bottom:max(5px,env(safe-area-inset-bottom));z-index:40;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.42);letter-spacing:.04em;pointer-events:none}

/* Basher Smasher 0.9.6: big next-gate arrow at the screen edge, wrong-way warning, bonus counter */
body.basher #gateArrow { width: 104px; height: 104px; background-color: rgba(255, 196, 30, .97); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
#wrongWay { position: fixed; left: 50%; top: 13%; transform: translateX(-50%); pointer-events: none; padding: 12px 26px; border-radius: 16px;
  background: rgba(150, 10, 10, .82); color: #fff; font-weight: 900; font-size: clamp(18px, 3.8vw, 36px); letter-spacing: .08em; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .5); animation: wrongBlink 0.9s steps(2, start) infinite; }
@keyframes wrongBlink { 0% { opacity: 1; } 50% { opacity: .35; } }
.stat.bon { color: #a8f0b4; }
body.basher .stat.bon:empty, body.basher .stat.pen:empty { display: none; }
.pop.air { color: #ffe08a; font-size: 24px; }
body.basher .levels.dim { opacity: .4; }

/* 1.0: track map - in the start card on phones, top-right on larger screens, and while driving (both games) */
.trackmap { position: fixed; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 70px); width: 150px; height: 112px; z-index: 20;
  pointer-events: auto; cursor: pointer; background: rgba(10, 18, 30, .5); border-radius: 12px;   /* 1.2.8: tap = heading-up / north-up */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mapcard { display: block; width: 100%; height: 92px; margin: 6px 0 2px; background: rgba(255, 255, 255, .05); border-radius: 12px; }
body[data-phase="start"] .trackmap { display: none; }
@media (min-width: 900px) {
  .mapcard { display: none; }
  body[data-phase="start"] .trackmap { display: block; top: calc(env(safe-area-inset-top) + 18px); right: calc(env(safe-area-inset-right) + 18px); width: 240px; height: 180px; }
}
@media (max-height: 500px) { .trackmap { width: 120px; height: 88px; top: calc(env(safe-area-inset-top) + 56px); } }
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) { .trackmap { top: calc(env(safe-area-inset-top) + 92px); width: 190px; height: 140px; } }
body[data-phase="preview"] .trackmap { display: block; }
@media (orientation: portrait) and (max-width: 620px) { .trackmap { top: calc(env(safe-area-inset-top) + 118px); width: 128px; height: 150px; } }
body.fulltop .trackmap { display: none !important; }

/* 1.0.2: steering assistance slider (the stability knob) and the 'bowie' test field */
.assist { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-weight: 700; letter-spacing: .06em; font-size: 13px; }
.assist span { white-space: nowrap; color: #c9d4e3; }
.assist input { flex: 1; min-width: 80px; accent-color: #ff9a2e; height: 28px; }
.assist b { min-width: 48px; text-align: right; color: #ffcf8a; font-variant-numeric: tabular-nums; }
.dot.bowie { background: linear-gradient(135deg, #ff4fd8, #4fd8ff); border-color: #fff; }

/* 1.0.3: bowie freestyle - score in the HUD and big arcade achievements in the middle of the screen */
.stat.score b { color: #ffd23f; font-variant-numeric: tabular-nums; } .stat.score i { font-style: normal; color: #7ef0ff; margin-left: 6px; }
#achv { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 35; pointer-events: none; text-align: center;
  font-weight: 900; letter-spacing: .04em; transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), opacity .15s; white-space: nowrap; }
#achv.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#achv .an { font-size: clamp(34px, 7.5vw, 92px); line-height: 1; color: #ffd23f; -webkit-text-stroke: 2px #6b3a00; paint-order: stroke fill;
  text-shadow: 0 4px 0 #b4560b, 0 8px 24px rgba(0, 0, 0, .55); }
#achv .ax { font-size: clamp(14px, 2.4vw, 26px); color: #fff; text-shadow: 0 2px 6px #000; margin-top: 6px; }
#achv .ap { font-size: clamp(28px, 5.5vw, 64px); color: #7ef0ff; -webkit-text-stroke: 1.5px #06364a; paint-order: stroke fill; text-shadow: 0 4px 16px rgba(0, 0, 0, .6); margin-top: 4px; }
#achv .ac { font-size: clamp(14px, 2.2vw, 24px); color: #ff8bd8; text-shadow: 0 2px 6px #000; margin-top: 4px; }
#achv.mega .an { background: linear-gradient(90deg, #ff5ad8, #ffd23f, #5af0ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
#achv.crash .an { color: #ff4a3a; -webkit-text-stroke-color: #3a0000; text-shadow: 0 4px 0 #6a0a0a, 0 8px 24px rgba(0, 0, 0, .55); }
@media (orientation: portrait) and (max-width: 620px) { #achv { top: 40%; } }

/* 1.1 Trick Arena: the countdown turns red in the last 10 s */
#time.low { color: #ff5a4a; animation: lowpulse 0.5s ease-in-out infinite alternate; }
@keyframes lowpulse { from { transform: scale(1); } to { transform: scale(1.12); } }
/* 1.1: three modes in one row (Monster Mayhem: ARENA / FREE ROAM / TRACK) */
#modes:has(button:nth-child(3)) { grid-template-columns: repeat(3, 1fr); display: grid; }

/* ---- 1.1.1 arcade HUD (trick modes) ---------------------------------------------------------------------------- */
body.trick #gate, body.trick #time, body.trick #score, body.trick #lapTag, body.trick #pen, body.trick #bon { display: none; }
#arcade { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 900; letter-spacing: .04em; min-width: 200px; }
#aClock { font-size: clamp(40px, 7vw, 76px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 2px #0b1626; paint-order: stroke fill; text-shadow: 0 4px 0 #0b1626, 0 8px 22px rgba(0, 0, 0, .55); }
#aClock.low { color: #ff4a3a; -webkit-text-stroke-color: #3a0000; animation: clockpulse .5s ease-in-out infinite alternate; }
#aClock.out { color: #ff4a3a; -webkit-text-stroke-color: #3a0000; }
@keyframes clockpulse { from { transform: scale(1); } to { transform: scale(1.14); } }
#aScore { font-size: clamp(26px, 4.4vw, 48px); line-height: 1.05; color: #ffd23f; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1.5px #5a3200; paint-order: stroke fill; text-shadow: 0 3px 0 #5a3200, 0 6px 16px rgba(0, 0, 0, .5); }
#aScore.bump { animation: scorebump .35s ease-out; }
@keyframes scorebump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
#aCombo { margin-top: 4px; display: flex; align-items: center; gap: 8px; background: rgba(10, 18, 30, .55); border-radius: 999px; padding: 3px 12px 3px 8px; }
#aCombo b { font-size: clamp(20px, 3vw, 32px); color: #ff8bd8; -webkit-text-stroke: 1px #4a0636; paint-order: stroke fill; }
#aCombo.hot b { color: #ff5ad8; animation: clockpulse .35s ease-in-out infinite alternate; }
#aCombo span { font-size: 12px; color: #fff; opacity: .85; }
#aCombo i { display: block; width: 70px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
#aCombo u { display: block; height: 100%; background: linear-gradient(90deg, #ff5ad8, #ffd23f); text-decoration: none; }
#pops { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pop { animation: popin 2.1s ease-out forwards; line-height: 1.05; }
.pop b { display: block; font-size: clamp(20px, 3.4vw, 38px); color: #ffd23f; -webkit-text-stroke: 1.5px #6b3a00; paint-order: stroke fill; text-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
.pop em { display: block; font-style: normal; font-size: clamp(18px, 3vw, 32px); color: #7ef0ff; -webkit-text-stroke: 1px #06364a; paint-order: stroke fill; }
.pop span { display: block; font-size: clamp(11px, 1.6vw, 16px); color: #fff; text-shadow: 0 2px 6px #000; }
.pop span.pm { color: #ff8bd8; }
.pop.big b { font-size: clamp(24px, 4.2vw, 48px); }
.pop.mega b { font-size: clamp(28px, 5vw, 60px); background: linear-gradient(90deg, #ff5ad8, #ffd23f, #5af0ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; }
.pop.crash b { color: #ff4a3a; -webkit-text-stroke-color: #3a0000; }
@keyframes popin { 0% { opacity: 0; transform: translateY(18px) scale(.6); } 10% { opacity: 1; transform: translateY(0) scale(1.12); } 18% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-28px); } }
body.trick #achv { display: none; }
/* phones: the arcade block below the button row (the buttons and the map sit at the top) */
@media (max-width: 700px) and (orientation: portrait) { #arcade { top: calc(env(safe-area-inset-top) + 64px); left: 38%; } #aClock { font-size: 44px; } #aScore { font-size: 28px; } }
@media (max-height: 460px) { #arcade { top: calc(env(safe-area-inset-top) + 4px); } #aClock { font-size: 34px; } #aScore { font-size: 22px; } .pop b { font-size: 18px; } .pop em { font-size: 16px; } }
/* score screen */
#fTable tr.big td { text-align: center; padding: 4px 0 10px; }
.fscore { font-size: 54px; font-weight: 900; color: #ffd23f; font-variant-numeric: tabular-nums; -webkit-text-stroke: 1.5px #5a3200; paint-order: stroke fill; line-height: 1; }
.fscore.rec { animation: scorebump .5s ease-out 2; }
.fsub { font-size: 12px; letter-spacing: .2em; opacity: .7; }
.rec { color: #ffd23f; font-weight: 900; }

/* ---- 1.2.0 test track (test.html: body.basher.test; body.crawler while the crawler is driven) ------------------------- */
.testbtn { display: block; width: 100%; margin-top: 10px; text-align: center; text-decoration: none; box-sizing: border-box; }
a.testbtn { padding: 12px 0; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .3); color: inherit; font-weight: 800; letter-spacing: .08em; }
body.test #levels, body.test #modes, body.test #lapsSel, body.test #seedPick, body.test #newTrack, body.test #previewBtn, body.test #mapCard,
body.test #lapTag, body.test #gate, body.test #map, body.test #gateArrow, body.test #wrongWay, body.test.crawler .assist { display: none !important; }
#testBar { display: none; }
body.test #testBar { display: flex; position: fixed; right: calc(env(safe-area-inset-right) + 12px); top: calc(env(safe-area-inset-top) + 70px); gap: 8px; z-index: 20; pointer-events: auto; }
#testBar button { min-width: 64px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(10, 18, 30, .6); color: #ffcf8a; font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .06em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#testBar button:active { background: rgba(60, 90, 130, .8); }
body.test[data-phase="start"] #testBar, body.test[data-phase="preview"] #testBar, body.in-vr #testBar { display: none; }
body.basher:not(.crawler) #lockers { display: none; }
@media (max-width: 700px) and (orientation: portrait) { body.test #testBar { top: calc(env(safe-area-inset-top) + 112px); } }
@media (max-height: 460px) { body.test #testBar { top: calc(env(safe-area-inset-top) + 56px); } #testBar button { height: 34px; font-size: 12px; min-width: 54px; } }
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) { body.test #testBar { top: calc(env(safe-area-inset-top) + 100px); } #testBar button { height: 56px; font-size: 17px; min-width: 90px; border-radius: 16px; } }
@media (max-width: 700px) and (orientation: portrait) { body.test #arcade { top: calc(env(safe-area-inset-top) + 160px); left: 50%; } }

/* ---- 1.2.1 (T3) VR PREVIEW: both eye views on the screen, a slim bar on top; the map and the HUD stats step aside ---- */
#vrPrevBar { display: none; }
body.vrprev #vrPrevBar { display: flex; position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 6px); transform: translateX(-50%); z-index: 40; gap: 8px; align-items: center;
  background: rgba(10, 18, 30, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; padding: 6px 10px; color: #fff; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
body.vrprev #vrPrevBar button { min-height: 34px; padding: 4px 12px; font-size: 14px; }
body.vrprev #vrPrevBar .vphint { font-size: 11px; font-weight: 600; opacity: .7; letter-spacing: 0; }
body.vrprev #hud .stats, body.vrprev #map, body.vrprev #testBar, body.vrprev #arcade, body.vrprev #gateArrow, body.vrprev #wrongWay { display: none !important; }
body.vrprev canvas { cursor: grab; }
@media (max-width: 760px) { body.vrprev #vrPrevBar .vphint { display: none; } }

/* 1.2.6: loading progress - a bar and the step being worked on */
.lbar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; margin: 14px 0 8px; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb21f, #ffd36b); border-radius: 4px; transition: width .25s ease-out; }
.lstep { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; opacity: .75; min-height: 1.2em; }

/* 1.2.7: BOWIE - the hidden test track. Hidden until unlocked (bowie.js sets html.bowie-on); a fourth card on the landing page */
html:not(.bowie-on) .bowie-only { display: none !important; }
.bowiecard .gart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 720 / 452; width: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(135deg, #ff4fd8, #7a5cff 50%, #4fd8ff); }
.bowiecard .gart b { font-size: clamp(44px, 8vw, 76px); letter-spacing: .2em; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); padding-left: .2em; }
.bowiecard .gart i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .85); text-align: center; padding: 0 14px; }
.bowiecard .gtitle em { background: linear-gradient(90deg, #ff4fd8, #4fd8ff); }
html.bowie-on .bowiecard { animation: bowieIn .5s ease-out; }
@keyframes bowieIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.bowietoast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 50; padding: 12px 22px; border-radius: 14px; font-weight: 800; letter-spacing: .15em; color: #fff;
  background: linear-gradient(90deg, #ff4fd8, #4fd8ff); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

/* 1.2.8: the mini crawler has spools (always locked) and one gear - no lock or gear buttons for it */
body.test.mini #lockF, body.test.mini #lockR, body.test.mini #gearBtn { display: none; }

/* ---- 1.2.9 --------------------------------------------------------------------------------------------------------- */
/* GEAR and BRAKE are value buttons (LOW / HIGH, CRAWL / TRAIL / RACE): no on / off light, the value in amber */
.lock.val span { color: #ffd27a; }
/* battery 2S / 4S / 6S on one row */
#powerSel { grid-template-columns: repeat(3, 1fr); }
#powerSel button { letter-spacing: .03em; padding: 0 4px; }
/* scroll bars: thin and out of the way; the thumb shows only while scrolling (as on iPad Safari) */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scrolling, .scrolling * { scrollbar-color: rgba(255, 255, 255, .35) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); }
::-webkit-scrollbar-button { display: none; height: 0; }

/* 1.2.9: STABILITY (bashers) - the crawlers' car settings sit in the HUD, so does the bashers' stability management */
#bashBar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 16px); transform: translateX(-50%); display: flex; gap: 12px; z-index: 20; }
body.crawler #bashBar, body[data-phase="start"] #bashBar, body[data-phase="preview"] #bashBar, body[data-phase="done"] #bashBar, body.in-vr #bashBar, body.vrprev #bashBar { display: none; }
@media (max-height: 500px) { #bashBar { bottom: calc(env(safe-area-inset-bottom) + 8px); } }

/* 1.3.0 (A1) Adventure: menu, level cards, medals; the start card and the finish card's medal line in the games */
.advch { font-size: 15px; letter-spacing: .2em; margin: 22px 0 10px; text-align: left; }
.advch i { font-style: normal; opacity: .55; font-size: 11px; }
.advgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.advlvl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 0 10px; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .07); text-align: left; }
.advlvl img { width: 100%; height: auto; aspect-ratio: 360 / 226; object-fit: cover; margin-bottom: 4px; }
.advlvl b, .advlvl span { padding: 0 10px; }
.advlvl b { font-size: 14px; letter-spacing: .08em; }
.advlvl.locked { opacity: .45; filter: grayscale(.8); }
.advn { position: absolute; left: 8px; top: 8px; padding: 2px 9px !important; border-radius: 10px; background: rgba(0, 0, 0, .6); font-weight: 900; }
.advmed { position: absolute; right: 8px; top: 8px; width: 46px; height: 46px; padding: 0 !important; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.advmed.m3 { box-shadow: 0 0 0 2px rgba(255, 210, 122, .9), 0 2px 12px rgba(0, 0, 0, .4); }
.advmed.m2 { box-shadow: 0 0 0 2px rgba(223, 230, 238, .85), 0 2px 12px rgba(0, 0, 0, .4); }
.advmed.m1 { box-shadow: 0 0 0 2px rgba(224, 160, 112, .85), 0 2px 12px rgba(0, 0, 0, .4); }
.advlvl.locked .advmed { font-size: 22px; }
.advg, .advgoal, .advbest { font-size: 10px; letter-spacing: .08em; opacity: .8; }
.advbest { color: #ffd27a; opacity: 1; }
.advsoon { grid-column: 1 / -1; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .05); opacity: .6; font-size: 12px; }
.advback, .advlink { color: inherit; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.advmedal { font-weight: 900; letter-spacing: .12em; margin: 6px 0; }
.advmedal.m0 { color: #ff8a7a; }
.advmedal.m1 { color: #e0a070; } .advmedal.m2 { color: #dfe6ee; } .advmedal.m3 { color: #ffd27a; }
body.adv #newTrack, body.adv #seedPick, body.adv #shareStart, body.adv #levels, body.adv #lapsSel, body.adv #powerSel, body.adv #dpCar, body.adv #modes, body.adv #savedBox, body.adv #rate, body.adv #shareBtn, body.adv .bowie-only { display: none !important; }
/* 1.3.1: Adventure as a full-screen start page (look of the games' start cards) over the three trucks' picture */
body.advbody { background: linear-gradient(90deg, rgba(5, 10, 20, .88), rgba(5, 10, 20, .55) 70%, rgba(5, 10, 20, .4)), url(adventure-bg.jpg) center / cover fixed, #0d1726; }
.advpage { min-height: 100vh; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
.card.advcard { max-width: 1180px; margin: 0 auto; max-height: none; overflow: visible; text-align: left; }
.advcard .sub { margin-bottom: 8px; }
.advintro { margin: 0 0 6px; opacity: .8; font-size: 14px; line-height: 1.45; max-width: 720px; }
.advfoot { margin: 18px 0 0; opacity: .6; font-size: 12px; }
.advnote { color: #ffd27a; font-size: 12px; letter-spacing: .1em; }
/* 1.3.1: Adventure card on the landing page */
.advgame .gtitle em { background: linear-gradient(90deg, #ff8a3d, #7fc8ff); }
/* 1.3.1: tester notes (BOWIE): stars + comment on the level cards, COPY ALL on the landing page */
.advrev { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 79, 216, .08); border: 1px solid rgba(255, 79, 216, .35); text-align: left; }
.advrevh { font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .8; margin-bottom: 4px; }
.advstars button { background: none; border: 0; padding: 0 3px; font-size: 26px; line-height: 1.1; color: rgba(255, 255, 255, .28); cursor: pointer; }
.advstars button.on { color: #ffd27a; }
.advrev textarea { width: 100%; box-sizing: border-box; margin-top: 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; font: 14px/1.4 inherit; padding: 6px 8px; resize: vertical; user-select: text; -webkit-user-select: text; }
.advrevok { font-size: 10px; letter-spacing: .1em; opacity: .6; min-height: 12px; margin-top: 3px; }
.notes { max-width: 1100px; margin: 0 auto 30px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 79, 216, .06); border: 1px solid rgba(255, 79, 216, .3); text-align: left; color: #fff; }
.notes h2 { font-size: 18px; letter-spacing: .14em; }
.notes h2 em { font-style: normal; font-size: 11px; vertical-align: 3px; padding: 2px 7px; border-radius: 6px; background: linear-gradient(90deg, #ff4fd8, #4fd8ff); }
.notesub { opacity: .7; font-size: 13px; margin: 0 0 10px; }
.notes pre { white-space: pre-wrap; font-size: 13px; line-height: 1.45; background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 10px 12px; max-height: 320px; overflow: auto; user-select: text; -webkit-user-select: text; }
.notesrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notesrow button { width: auto; padding: 10px 18px; }
#notesOk { font-size: 12px; letter-spacing: .1em; opacity: .8; }
body.adv #start h1 { font-size: clamp(22px, 3.4vw, 34px); }
/* 1.3.2 (A2): Monster Mayhem has four modes (ARENA, FREE ROAM, TRACK, RALLY) - one row */
#modes:has(button:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
#modes:has(button:nth-child(4)) button { padding-left: 4px; padding-right: 4px; white-space: nowrap; }

/* 1.3.3 (A3): LONG - a ~1 km rally stage on tiled ground, in RALLY mode only */
#levels button.rallyonly { display: none !important; }
body.rallymode #levels button.rallyonly { display: flex !important; }
body.rallymode #levels { grid-template-columns: repeat(4, 1fr); }
.dot.long { background: linear-gradient(90deg, #111 50%, #ff8a3d 50%); }

/* 1.3.4: the car set-up of an Adventure level under its goal; the finish card's extra note on its own line */
.advsetup { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .85; color: #bfe3ff; }
#fBest .fnote { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-top: 4px; letter-spacing: .04em; }
#fBest .advmedal { display: block; }
.advlvl .advcar { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .75; color: #bfe3ff; }

/* 1.3.7 (A4): the long-trail levels (Adventure chapter 2) - the level colours with a mountain stripe */
.dot.trailEasy { background: linear-gradient(90deg, #1f6fe0 50%, #8fd06a 50%); }
.dot.trailMedium { background: linear-gradient(90deg, #e0262b 50%, #8fd06a 50%); }

/* 1.4.1: the reason a load stopped, under LOADING STOPPED AT ... */
.loadErr { display: inline-block; max-width: 30em; margin: 4px 0 6px; font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .7; font-family: ui-monospace, monospace; }

/* 1.4.2 (DP2): DIRT PIT - the landing card (drawn, no photo yet) and the car buttons on the start card */
.dirtcard .gart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 720 / 452; width: 100%;
  background: radial-gradient(ellipse at 50% 120%, #6b4426 0 38%, transparent 39%), radial-gradient(ellipse at 15% 110%, #7d5230 0 30%, transparent 31%), radial-gradient(ellipse at 88% 115%, #5e3b20 0 33%, transparent 34%), linear-gradient(180deg, #8fc6ff, #ffd8a0 70%); }
.dirtcard .gart b { font-size: clamp(40px, 7.5vw, 70px); letter-spacing: .16em; color: #fff; text-shadow: 0 6px 30px rgba(60, 30, 0, .55); padding-left: .16em; }
.dirtcard .gart i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); text-align: center; padding: 0 14px; }
.dirtcard .gtitle em { background: linear-gradient(90deg, #c9772f, #ffcf6b); }
#dpCar { margin-bottom: 10px; }

/* 1.4.3 (CR1): CARPET RACERS landing card (drawn) */
.carpetcard .gart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 720 / 452; width: 100%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 46px, rgba(0, 0, 0, .05) 46px 92px), radial-gradient(ellipse at 50% 55%, transparent 0 30%, #3fae3a 30.5% 32.5%, transparent 33%), radial-gradient(ellipse at 50% 55%, transparent 0 44%, #3fae3a 44.5% 46.5%, transparent 47%), linear-gradient(160deg, #1f6b22, #134a17); }
.carpetcard .gart b { font-size: clamp(34px, 6.5vw, 60px); letter-spacing: .12em; color: #fff; text-shadow: 0 6px 30px rgba(0, 30, 0, .6); padding-left: .12em; text-align: center; }
.carpetcard .gart i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .92); text-align: center; padding: 0 14px; }
.carpetcard .gtitle em { background: linear-gradient(90deg, #3fae3a, #b8f06b); }

/* 1.4.4: the tester-notes panel on every non-game page (BOWIE): landing, Adventure, the games' start cards */
#start .card .notes { margin: 16px 0 0; padding: 12px 12px; }
.notes pre.notesText { white-space: pre-wrap; font-size: 12px; line-height: 1.45; background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow: auto; user-select: text; -webkit-user-select: text; }
.notesgen { margin: 8px 0 10px; font-size: 12px; } .notesgen span { opacity: .6; }
.notesgen textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .3); color: #fff; padding: 8px; font: inherit; font-size: 13px; }

/* 1.4.6: SETTINGS (landing page, pad.js), the ? help panel and its button (ui.js) */
.settingsbtn { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; border: 0; border-radius: 12px; padding: 9px 14px; font-weight: 800; letter-spacing: .1em; font-size: 12px; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; }
.wonderland { position: relative; }
.padset .card, .helpov .card { max-width: 640px; text-align: left; max-height: 88vh; overflow: auto; }
.padset h3 { font-size: 12px; letter-spacing: .16em; opacity: .75; margin: 10px 0 4px; }
.padset .psinfo { font-size: 12px; opacity: .8; line-height: 1.45; }
.padset .live { font-family: ui-monospace, monospace; font-size: 11px; opacity: .85; }
.padset .ask { font-size: 18px; font-weight: 800; margin: 6px 0; }
.padset .state.show { color: #7ee08a; } .padset .state.still { opacity: .6; }
.padset .got span, .padset .psread span { display: inline-block; margin: 2px 8px 2px 0; font-size: 11px; opacity: .85; }
.padset .psread span.on { color: #ffcf6b; opacity: 1; font-weight: 800; }
.padset .row3, .padset .row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.padset .row2 { grid-template-columns: 1fr 1fr; }
.padset button { min-height: 42px; }
#psClose { width: 100%; }
.track .icon.help { font-weight: 900; font-size: 18px; line-height: 1; }
.helpov .helpbody .howto { margin-top: 6px; }

/* 1.4.8: the controller's highlight in menus (pad.js nav) */
.padfocus { outline: 3px solid #ffcf3f !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255, 207, 63, .25), 0 0 22px rgba(255, 207, 63, .45) !important; z-index: 1; }   /* 1.5.0: no position change - the absolutely placed SETTINGS button jumped into the page flow */
a.game.padfocus { transform: translateY(-3px) scale(1.02); }

/* 1.5.0: start cards - the how-to never shows on the card (ui.js moves it into the ? panel); ? at the right end of the
   toolbar; DRIVE narrow and right-aligned, PREVIEW just left of it */
#start .card > .howto, #start .card > p.keys { display: none; }
.helpov .howto, .helpov p.keys { display: grid; }
.helpov p.keys { display: block; }
.track #helpBtn { margin-left: auto; }
.row2.drv { display: flex; justify-content: flex-end; gap: 8px; }
.row2.drv > button { flex: 0 0 auto; width: auto !important; min-width: 150px; padding: 0 26px; }
.row2.drv > #previewBtn { min-width: 120px; }

/* 1.5.4: driving gauges (hud.js) - steering top left, throttle next to the mini map, progress at the top centre */
:root { --mapw: 150px; --maph: 112px; --mapt: 70px; --edge: 12px; }
@media (max-height: 500px) { :root { --mapw: 120px; --maph: 88px; --mapt: 56px; } }
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) { :root { --mapw: 190px; --maph: 140px; --mapt: 92px; --edge: 18px; } }
@media (orientation: portrait) and (max-width: 620px) { :root { --mapw: 128px; --maph: 150px; --mapt: 118px; } }
/* 1.6.7: GAME AREA pill (hud.js) - outside the game area: the way back in and the seconds left */
.garea { position: fixed; z-index: 21; left: 50%; top: calc(env(safe-area-inset-top) + 24%); transform: translateX(-50%); pointer-events: none; text-align: center;
  padding: 8px 22px 9px; border-radius: 18px; background: rgba(170, 16, 16, .86); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); white-space: nowrap; }
.garea b { display: block; font-weight: 900; font-size: clamp(13px, 2.4vw, 22px); letter-spacing: .08em; }
.garea span { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 3px; font-weight: 800; font-size: clamp(13px, 2.2vw, 20px); }
.garea i.arrow { display: inline-block; font-style: normal; font-size: 1.5em; line-height: 1; transition: transform .12s linear; }
.garea em { font-style: normal; }
.garea.back { background: rgba(170, 100, 16, .86); }
.garea[hidden] { display: none; }
body.vrprev .garea, body.in-vr .garea { display: none !important; }

/* 1.5.4: DEFAULT VIEW buttons in SETTINGS */
.psviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.psviews button.on { background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; }

/* 1.5.7: LOCK PAGE NAVIGATION in SETTINGS */
.pslock { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-weight: 800; letter-spacing: .08em; font-size: 12px; cursor: pointer; user-select: none; }
.pslock input { width: 18px; height: 18px; }

/* 1.6.0: the scroll reserve under the game pages (pad.js; touch devices with a controller) - the page gets a few hundred px of hidden
   scroll range, kept centred, so scroll / page commands from the controller are consumed by the page like in the viewer. Everything on
   the game pages is position: fixed, so nothing moves; a touch can still not scroll it (touch-action: none) */
html.padsink { overflow-y: auto !important; overscroll-behavior: none; touch-action: none; scrollbar-width: none; }
html.padsink::-webkit-scrollbar { display: none; }
html.padsink body { overflow: visible !important; }
#padSink { position: absolute; left: 0; top: 0; width: 1px; height: calc(100% + 800px); pointer-events: none; visibility: hidden; }
/* the 'controller lost the focus' notice (it lets taps through: the tap gives the focus back) */
#padLost { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 60; padding: 9px 18px; border-radius: 14px; pointer-events: none; white-space: nowrap;
  background: rgba(176, 32, 22, .94); color: #fff; font-weight: 800; letter-spacing: .07em; font-size: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 6px 22px rgba(0, 0, 0, .4); }
#padLost[hidden] { display: none; }
@media (max-width: 560px) { #padLost { font-size: 11.5px; padding: 7px 12px; } }
.psviews button.ghost.on { background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; }

/* 1.6.1: scroll handling / fullscreen controls in SETTINGS, live line in TEST */
.padset .row2 { grid-template-columns: 1fr 1fr; }
.pta u { text-decoration: none; min-width: 3.2em; text-align: right; }
.pstest .live { margin: 0 0 8px; font: 11px/1.5 ui-monospace, Menlo, monospace; opacity: .9; overflow-wrap: anywhere; }

/* 1.6.2 */
#psFocus { grid-template-columns: repeat(3, 1fr); }
#psFocus button.ghost.on { background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; }
.psdoss { margin: 0 0 8px; padding: 6px 8px; background: rgba(0, 0, 0, .3); border-radius: 8px; font: 10.5px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 110px; overflow: auto; }
/* 1.6.2: the SETTINGS dialog and the help panel stay above a highlighted tile / button (a grid item with z-index 1 painted over the dialog until the next frame moved the highlight) */
#padSet, #helpOv { z-index: 90; }

/* 1.6.3: compact SETTINGS dialog - labelled rows, no narration (the notes live in the chat), one screen on a tablet */
.padset .card { padding: 14px 18px 16px; max-width: 680px; }
.padset h2 { font-size: 18px; margin: 0 0 2px; }
.padset h2 small { font-size: 11px; letter-spacing: .12em; opacity: .7; margin-left: 8px; font-weight: 700; }
.padset h3 { font-size: 11px; margin: 8px 0 4px; }
.padset .live { margin: 0 0 4px; overflow-wrap: anywhere; }
.psrow { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.psrow > b { font-size: 11px; letter-spacing: .14em; opacity: .8; }
.padset .psviews { margin: 0; gap: 6px; }
.padset .psviews.five { grid-template-columns: repeat(5, 1fr); }
.padset .psviews button { min-height: 38px; padding: 0 4px; font-size: 12px; }
.padset .psviews .pslock { margin: 0; font-size: 11px; }
.padset .psrow .psviews > .pslock:only-child { grid-column: 1 / -1; }
.padset > .card > #psSect > .pslock { margin: 4px 0 6px; font-size: 13px; }
.padset .row3 button.ghost.on { background: linear-gradient(180deg, #ff9b2f, #e2620f); color: #fff; }   /* 1.6.4: DEFAULT / CUSTOM show the layout in use */
.padset .row3 { margin: 6px 0; }
.padset .row3 button { min-height: 40px; }
.padset #psClose { width: 100%; margin-top: 8px; min-height: 40px; }
.padset.busy #psSect { display: none; }
@media (max-width: 560px) { .psrow { grid-template-columns: 1fr; gap: 3px; } .padset .psviews.five { grid-template-columns: repeat(3, 1fr); } }
.padset .row3 button { font-size: 14px; }

/* 1.6.4: the pause menu has five buttons now - on a short screen (phone landscape) they sit in two columns, RESUME across the top */
@media (max-height: 520px) {
  #pauseOv .card.small { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; max-width: 520px; }
  #pauseOv .card.small h2 { grid-column: 1 / -1; margin: 0; }
  #pauseOv .card.small #resume, #pauseOv .card.small .why { grid-column: 1 / -1; }
  #pauseOv .card.small .why { margin: 0; min-height: 0; }
  #pauseOv .card.small button { min-height: 40px; }
}

/* 1.6.8: one HUD for every game. Stats in a fixed order (track, gate, lap, time, inclinometer / speed, ST, TH, then
   penalties / bonus / score), wrapping before the centred TR pill; buttons top right, the map under them as wide as
   the button group (hud.js sets --mapw / --maph / --mapt). Portrait: map top right, everything else flows left of it,
   TR a full row, ST / TH / inclinometer / speed hidden. */
:root { --trw: clamp(190px, 24vw, 340px); }
#hud > .stats { max-width: calc(50% - var(--trw) / 2 - 10px); }
#hud > .btns { flex-shrink: 0; }
.gpill { display: inline-flex; align-items: center; gap: .45em; }
.gpill .lb { font-size: .78em; opacity: .85; }
.gpill em { font-style: normal; font-size: .78em; min-width: 2.7em; text-align: right; }
.gpill .bar { position: relative; display: inline-block; width: 2.8em; height: .55em; border-radius: .3em; background: rgba(255, 255, 255, .14); overflow: hidden; }
.gpill .bar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: #e8f0fb; border-radius: .3em; }
.gpill .bar b.mid { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .55); }
.gpill.gst.full .bar i { background: #ffd27a; }
.gpill.gth .bar i { background: #ff9b2f; } .gpill.gth.rev .bar i { background: #ff6b5e; } .gpill.gth.full .bar i { background: #ffd27a; }
.gpill.gtr { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px); width: var(--trw); }
@media (min-width: 900px) and (min-height: 600px) and (pointer: coarse) { .gpill.gtr { top: calc(env(safe-area-inset-top) + 16px); } }
.gpill.gtr .bar { flex: 1; width: auto; overflow: visible; margin: 0 .5em 0 .4em; }
.gpill.gtr .bar i.fill { left: 0; background: linear-gradient(90deg, #ff9b2f, #ffcf6b); }
.gpill.gtr .bar b.dot { position: absolute; top: 50%; width: 1.05em; height: 1.05em; margin: -.525em 0 0 -.525em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(10, 18, 30, .7); }
.gpill.gtr .bar u.tick { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .7); }
.gpill.gtr .bar::after { content: ''; position: absolute; right: -2px; top: -.2em; bottom: -.2em; width: .45em; border-radius: 2px; background: repeating-linear-gradient(0deg, #fff 0 .19em, #111 .19em .38em); }
.gpill[hidden] { display: none !important; }
body[data-phase="start"] .gpill, body[data-phase="preview"] .gpill, body.in-vr .gpill, body.vrprev .gpill { display: none !important; }
body:not([data-phase="start"]) .trackmap { top: var(--mapt); right: calc(env(safe-area-inset-right) + var(--edge)); width: var(--mapw); height: var(--maph); }
/* portrait: the map top right, stats + buttons flow in rows left of it, TR a full row under them */
body.hudport #hud { flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: 8px; flex-direction: row;
  padding-right: calc(env(safe-area-inset-right) + var(--edge) + var(--mapw) + 8px); }
body.hudport.fulltop #hud, body.hudport.test #hud { padding-right: calc(env(safe-area-inset-right) + var(--edge)); }
body.hudport #hud > .stats, body.hudport #hud > .btns { display: contents; }
body.hudport #hud > .stats { max-width: none; }
body.hudport .gpill.gtr { position: static; transform: none; order: 1; flex: 1 1 100%; width: auto; }
body.hudport .gpill.gst, body.hudport .gpill.gth, body.hudport .stat.tilt, body.hudport #speed { display: none !important; }
body.hudport .garea { top: 34%; }   /* 1.6.8: below the taller portrait HUD */
/* 1.6.10 (C2): MAP button (next to the drive buttons) and the MAP view (mapview.js) */
.lock.mapb { border-color: rgba(120, 190, 255, .55); }
.lock.mapb span { color: #8fd0ff; }
body:not([data-phase="drive"]) #mapBtn { visibility: hidden; }
@media (max-width: 520px) { #lockers { gap: 6px; } #lockers .lock { width: calc((100vw - 52px) / 6); } }
body.mapview #hud, body.mapview #lockers, body.mapview .zone, body.mapview .trackmap, body.mapview #gateArrow, body.mapview .knob, body.mapview .garea, body.mapview #banner { display: none !important; }
.mapov { position: fixed; inset: 0; z-index: 30; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mapov:active { cursor: grabbing; }
.mapov .mvbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 20px); padding: 6px 8px; border-radius: 14px; background: rgba(10, 18, 30, .72); color: #fff; }
.mapov .mvbar b { font-weight: 900; letter-spacing: .1em; padding: 0 6px; }
.mapov .mvhelp { font-size: 12px; opacity: .75; }
.mapov .mvbar button { height: 40px; min-width: 64px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; }
.mapov .mvbar button { flex: none; width: auto; }
.mapov .mvbar button.mvgo { background: linear-gradient(180deg, #ff9b2f, #e2620f); }
.mapov .mvmk { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.mapov .mvcar svg { position: absolute; width: 44px; height: 48px; left: -22px; top: -26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.mapov .mvgoalr > *, .mapov .mvgoalr { box-sizing: border-box; }
.mapov .mvgoalr { margin: 0; border-radius: 50%; border: 3px solid #ffd27a; background: rgba(255, 210, 122, .22); translate: -50% -50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.mapov .mvgoal i, .mapov .mvgoal span, .mapov .mvstart span, .mapov .mvnext span { position: absolute; white-space: nowrap; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.mapov .mvgoal i { font-style: normal; font-size: 30px; left: -6px; top: -36px; color: #ffd27a; }
.mapov .mvgoal span { left: 12px; top: -30px; font-size: 14px; letter-spacing: .08em; }
.mapov .mvstart span { left: -22px; top: 8px; font-size: 11px; opacity: .9; }
.mapov .mvstart::before, .mapov .mvnext::before { content: ''; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #111; }
.mapov .mvnext::before { background: #ff9b2f; }
.mapov .mvnext span { left: 10px; top: -8px; font-size: 11px; }
.mapov .mvscale { position: absolute; left: calc(env(safe-area-inset-left) + 16px); bottom: calc(env(safe-area-inset-bottom) + 16px); color: #fff; font-weight: 800; font-size: 12px; text-shadow: 0 1px 2px #000; }
.mapov .mvscale i { display: block; height: 6px; border: 2px solid #fff; border-top: 0; margin-bottom: 3px; box-shadow: 0 1px 2px #000; }
.mapov [hidden] { display: none !important; }
@media (max-width: 700px) { .mapov .mvhelp { display: none; } }

body.summit .trackmap, body.summit .mapcard { display: none !important; }   /* 1.6.10: SUMMIT - the corner / start-card maps draw the line, which is hidden in this mode (the MAP view shows the ground) */
body.summit #previewBtn { display: none; }   /* 1.6.10: no line to preview in SUMMIT */
body.summit.hudport #hud { padding-right: calc(env(safe-area-inset-right) + var(--edge)); }   /* 1.6.10: no corner map in SUMMIT - the HUD takes the width */