/* Cara Drives (drive.html, docs/100): what it has that Cara Runs (css/run.css) does not: its canvas, the drive's HUD
   (the place, the clock, the speedometer, the postcard, the Fun drive's score), the touch pedals and steering slider,
   the title's car, mode and hour pickers, the settings, photo mode. */

#drive-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.drive-body { overscroll-behavior: none; --callh: 0px; }

/* the top left: where you are, the hour, the distance; the Fun drive's score and tokens */
.dhud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); display: grid; gap: 3px; justify-items: start; max-width: calc(100vw - 32px - 230px); }
.dhud__place { font: 700 clamp(1.05rem, 3.4vw, 1.35rem)/1.15 var(--font-display); letter-spacing: 0.04em; color: #fff7ea; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.dhud__line { font: 600 0.88rem/1.25 var(--font-body); color: #ffe2b8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); font-variant-numeric: tabular-nums; }
.dhud__km { margin-left: 6px; color: rgba(255, 255, 255, 0.82); }
.dhud__fun { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dhud__fun[hidden] { display: none; }
.dhud__score { font: 900 clamp(1.5rem, 5vw, 2.1rem)/1 var(--font-display); letter-spacing: 0.03em; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.dhud__score.is-double { color: #ffe08a; }
.dhud__score.is-double::after { content: '×2'; margin-left: 4px; font-size: 0.5em; vertical-align: super; color: #d68aff; }
.dhud__tokens { padding: 4px 12px 4px 6px; font-size: 1rem; }
.dhud__tokens .rhud__jade { width: 18px; height: 18px; }
.dhud__challenge { margin-top: 4px; padding: 5px 12px; border-radius: 10px; background: rgba(8, 20, 14, 0.66); border: 1px solid rgba(255, 210, 150, 0.35); font: 600 0.85rem/1.3 var(--font-body); color: #ffe2b8; max-width: 260px; }
.dhud__challenge b { color: #9dffd0; }

/* the buttons: wrapping onto a second row on a narrow screen */
.dhud__right { flex-wrap: wrap; justify-content: flex-end; max-width: min(400px, calc(100vw - 32px)); gap: 6px; }
.dhud__right .is-on { border-color: #9dffd0; box-shadow: 0 0 0 2px rgba(157, 255, 208, 0.45); }
.dhud__powers { top: calc(max(14px, env(safe-area-inset-top)) + 54px); }
.dhud .dhud__banner { top: 22%; font-size: clamp(1.2rem, 4.4vw, 1.9rem); background: rgba(8, 20, 14, 0.55); border: 1px solid rgba(255, 210, 150, 0.3); }
.rhud__banner.is-place { background: none; border: 0; font: 700 italic clamp(1.4rem, 5vw, 2.4rem)/1.2 var(--font-display); letter-spacing: 0.08em; color: #fff7ea; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); animation: dplace 4s ease-out forwards; }
.rhud__banner.is-power { background: linear-gradient(90deg, rgba(20, 120, 70, 0.8), rgba(63, 240, 144, 0.7)); }
.rhud__banner.is-stunt { background: linear-gradient(90deg, rgba(220, 150, 20, 0.85), rgba(255, 220, 110, 0.85)); color: #3a2200; text-shadow: none; }
@keyframes dplace { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 15% { opacity: 1; transform: translateX(-50%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
.dtoast { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: rgba(8, 20, 14, 0.74); border: 1px solid rgba(255, 255, 255, 0.18); font: 600 0.95rem/1.25 var(--font-body); color: #fff; white-space: nowrap; animation: rp-in 0.25s ease-out; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

/* the speedometer: bottom right, above the pedals on a touch screen */
.dspeedo { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: 2px; padding: 8px 14px 8px 16px; border-radius: 18px; background: rgba(8, 20, 14, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dspeedo__num b { font: 900 clamp(2rem, 6vw, 2.7rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.dspeedo__num small { margin-left: 5px; font: 700 0.78rem/1 var(--font-body); color: rgba(255, 255, 255, 0.75); }
.dspeedo__row { display: flex; gap: 6px; align-items: center; font: 800 0.78rem/1 var(--font-body); }
.dspeedo__gear { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #ffe2b8; font-variant-numeric: tabular-nums; }
.dspeedo__tag { padding: 3px 7px; border-radius: 6px; background: rgba(63, 240, 144, 0.22); color: #9dffd0; letter-spacing: 0.06em; }
.dspeedo__tag i { font-style: normal; color: #fff; }
.dspeedo__tag--auto { background: rgba(122, 208, 255, 0.24); color: #bfe6ff; }
.dspeedo__tag[hidden] { display: none; }
.dspeedo__ind { min-width: 1.6em; color: #ffb030; font-size: 1rem; text-shadow: 0 0 8px rgba(255, 170, 40, 0.8); }

/* a postcard, sliding in at the bottom middle */
.dcard { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); margin: 0; width: min(300px, 70vw); transform: translateX(-50%) rotate(-2deg); padding: 8px 8px 10px; border-radius: 6px; background: #fbf6ea; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: #2a1c10; animation: dcard 7s ease-out forwards; }
.dcard img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.dcard figcaption { display: grid; gap: 1px; margin-top: 6px; font: 600 0.82rem/1.25 var(--font-body); }
.dcard figcaption b { font: 700 italic 1rem/1.15 var(--font-display); color: #8a3a1a; }
@keyframes dcard { 0% { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(-6deg); } 8% { opacity: 1; transform: translateX(-50%) rotate(-2deg); } 85% { opacity: 1; transform: translateX(-50%) rotate(-2deg); } 100% { opacity: 0; transform: translateX(-50%) translateY(30px) rotate(2deg); } }

/* touch: the steering slider (bottom left, lifted above the call card while it shows) and the pedals (bottom right) */
.dsteer, .dpedals { display: none; }
.drive-touch .dsteer { display: block; }
.drive-touch .dpedals { display: flex; }
.dsteer { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--callh)); width: min(300px, 46vw); height: 76px; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.dsteer__track { position: absolute; left: 0; right: 0; top: 50%; height: 34px; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(8, 20, 14, 0.42); border: 2px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.6); font: 800 1rem/1 var(--font-body); }
.dsteer__knob { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 164, 88, 0.62); border: 2px solid #ffd48f; font-size: 1.9rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.dsteer.is-held .dsteer__knob { background: rgba(255, 164, 88, 0.85); }
.dpedals { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.dpedals__row, .dpedals__small { display: flex; gap: 10px; align-items: flex-end; }
.dpedals__small { gap: 6px; }
.dpedal, .dpad { pointer-events: auto; display: grid; place-items: center; align-content: center; padding: 0; color: #fff; touch-action: none; -webkit-tap-highlight-color: transparent; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(8, 20, 14, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.dpedal { width: 76px; height: 96px; border-radius: 18px; font: 800 1.5rem/1 var(--font-body); }
.dpedal small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; margin-top: 3px; }
.dpedal--go { height: 118px; background: rgba(31, 138, 82, 0.55); }
.dpedal--brake { background: rgba(160, 50, 40, 0.5); }
.dpad { width: 44px; height: 44px; border-radius: 12px; font: 700 1.15rem/1 var(--font-body); }
.dpedal.is-held, .dpad.is-held { background: rgba(255, 164, 88, 0.62); border-color: #ffd48f; }
.dpad.is-on { border-color: #ffb030; box-shadow: 0 0 10px rgba(255, 170, 40, 0.6); }
/* the speedometer moves up out of the pedals' way on a touch screen */
.drive-touch .dspeedo { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 182px); padding: 6px 10px; }
.drive-touch .dspeedo__num b { font-size: 1.7rem; }
/* (the hint and the postcard keep clear of the controls) */
.drive-touch .dhud .rhud__hint { bottom: auto; top: 44%; }
.drive-touch .dcard { bottom: auto; top: 30%; width: min(240px, 56vw); }

/* the title: a compact Play tab */
.dtitle { padding-top: 20px; }
.dtitle .rlogo { font-size: clamp(2.2rem, 10vw, 3.6rem); }
.dcars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dcar { display: grid; gap: 3px; justify-items: center; padding: 7px 4px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.dcar:hover, .dcar:focus-visible { border-color: #ffbe6e; outline: none; }
.dcar[aria-checked="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.1); box-shadow: 0 0 0 1px #9dffd0 inset; }
.dcar i { width: 44px; height: 18px; border-radius: 9px 12px 4px 4px; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25), 0 6px 0 -3px #1b1c1f; }
.dcar b { font-size: 0.8rem; line-height: 1.15; }
.dcar small { font-size: 0.66rem; color: var(--muted); line-height: 1.15; }
.dchoices { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.dseg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.dseg button { flex: 1; min-width: 0; padding: 7px 4px; border: 0; border-radius: 9px; background: transparent; color: #dfe8df; font: 700 0.84rem/1.15 var(--font-body); cursor: pointer; }
.dseg button small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--muted); }
.dseg button[aria-checked="true"] { background: linear-gradient(135deg, #ffa458, #f06a1e); color: #1f0d03; }
.dseg--hours { margin-top: 8px; }
.dseg--hours button { font-size: 0.78rem; }
.dtoggle { padding: 7px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: rgba(223, 232, 223, 0.75); font: 700 0.84rem/1.15 var(--font-body); cursor: pointer; white-space: nowrap; }
.dtoggle[aria-pressed="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.16); color: #fff; box-shadow: 0 0 0 1px #9dffd0 inset; }
.dtitle .ractions { margin-top: 12px; gap: 8px; }
.dhead { margin: 14px 0 6px; font: 700 0.78rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: #ffe0b4; text-align: left; }
.dhead small { text-transform: none; letter-spacing: 0; font-family: var(--font-body); color: var(--muted); font-weight: 600; }
.dstamps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dstamp { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 2px dashed rgba(255, 255, 255, 0.2); display: grid; place-items: end center; font: 600 0.62rem/1.1 var(--font-body); color: var(--muted); text-align: center; padding: 3px; }
.dstamp.is-got { border: 3px solid #fbf6ea; background-size: cover; background-position: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }

/* settings */
.dsettings { text-align: left; }
.dplaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dplaces button { padding: 8px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: #dfe8df; font: 700 0.84rem/1.2 var(--font-body); cursor: pointer; }
.dplaces button[aria-checked="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.12); color: #fff; box-shadow: 0 0 0 1px #9dffd0 inset; }
.dsettings__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* photo mode */
.dphoto { position: fixed; inset: auto 0 max(18px, env(safe-area-inset-bottom)) 0; z-index: 9; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.dphoto__hint { margin: 0; padding: 5px 14px; border-radius: 999px; background: rgba(8, 20, 14, 0.6); font: 600 0.85rem/1.3 var(--font-body); color: #fff; }
.dphoto__bar { display: flex; gap: 10px; pointer-events: auto; }
.dphoto__bar .gbtn { width: auto; }
.drive-photo-on #drive-canvas { cursor: grab; }

/* narrow screens */
@media (max-width: 640px) {
  .dcars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcar { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 6px 8px; column-gap: 8px; }
  .dcar i { grid-row: span 2; width: 34px; height: 15px; }
  .dcar small { display: none; }
  .dhud__left { max-width: calc(100vw - 32px - 150px); }
  .dhud__right { max-width: 150px; }
  .dhud__powers { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 250px); }
  .dsettings__row { grid-template-columns: 1fr; }
  .dplaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dstamps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* (the pedals keep clear of the call card's corner on a phone) */
  .dpad { width: 38px; height: 38px; font-size: 1rem; }
  .dpedal { width: 70px; }
}
@media (max-width: 400px) { .dseg--hours button { font-size: 0.7rem; padding: 7px 2px; } .dtoggle { padding: 7px 8px; } }
/* a phone on its side: smaller controls, the speedometer beside the pedals */
@media (max-height: 460px) {
  .dpedal { width: 64px; height: 76px; }
  .dpedal--go { height: 92px; }
  .dpad { width: 38px; height: 38px; font-size: 1rem; }
  .drive-touch .dspeedo { bottom: max(14px, env(safe-area-inset-bottom)); right: calc(max(14px, env(safe-area-inset-right)) + 186px); }
  .dsteer { width: min(260px, 34vw); height: 64px; }
  .dsteer__knob { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 1.5rem; }
  .dhud__right { max-width: 260px; }
  .dhud__powers { top: calc(max(14px, env(safe-area-inset-top)) + 4px); bottom: auto; }
  .drive-touch .dcard { top: 12%; width: min(200px, 30vw); }
}
@media (prefers-reduced-motion: reduce) { .dcard, .rhud__banner.is-place { animation: none; } }
/* (docked as a pill in the top-right corner while a screen is up, the call keeps clear of the HUD's buttons) */
body:has(.mcall.is-docked:not([hidden])) .dhud__right { top: calc(max(14px, env(safe-area-inset-top)) + 50px); }