/* ==========================================================================
   Zammer! — styles. Theme tokens and shared components come from
   shared/style.css.

   One screen matters: the inside of a car. The street through the windshield
   on top, the dashboard under it, and the whole dashboard is the horn. The
   light changes with no transition at all: any easing would be time taken
   from the driver.
   ========================================================================== */

.zm { display: grid; gap: .65rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.zm-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.zm-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.zm-top > :last-child:not(:first-child) { margin-inline-start: auto; }
.zm-record { font-weight: 800; font-variant-numeric: tabular-nums; }
.zm-note { font-size: 1.05rem; font-weight: 700; text-align: center; }

/* ---------- Menu ---------- */

.zm-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }

.zm-garage { display: grid; gap: .5rem; max-width: 30rem; margin: 1.5rem auto 0; padding: .9rem 1rem 1rem; }
.zm-garage__title { font-size: 1.2rem; }
.zm-horns { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .5rem; }
.zm-horn { min-height: var(--tap); padding: .4rem .5rem; font-weight: 800; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; cursor: pointer; touch-action: manipulation; transition: transform .08s ease; }
.zm-horn:active { transform: translateY(2px); }
.zm-horn[aria-pressed="true"] { color: var(--ink); background: var(--sun); box-shadow: 0 3px 0 var(--line); }
.zm-best { font-weight: 800; }

.howto { max-width: 30rem; margin: 1rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 1rem; padding-inline-start: 1.4rem; list-style: decimal; }

.host--small .host__teta { width: 76px; }
.host--small .bubble { padding: .65rem .9rem; font-weight: 700; }

/* ---------- The car ---------- */

/* The car is a picture, so it never mirrors. Its width follows the height of the screen. */
.zm-car { --car: #17151b; width: min(100%, 36vh * 1.58); width: min(100%, 36dvh * 1.58); margin-inline: auto; overflow: hidden; direction: ltr; background: var(--car); border: 3px solid var(--line); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--line); }
.zm-scene { position: relative; aspect-ratio: 300 / 190; overflow: hidden; }
.zm-street, .zm-street svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* .zm-ink is an outline with no fill of its own; .zm-line is the same outline around a shape that brings its fill. */
.zm-ink, .zm-line { stroke: #17141c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.zm-ink { fill: none; }
.zm-sky { fill: #f08a5d; }
.zm-glow { fill: #f9b868; }
.zm-sun { fill: #ffe08a; }
.zm-sea { fill: #2c6a8a; }
.zm-wall-a { fill: #3d3852; }
.zm-wall-b { fill: #524b6b; }
.zm-tank { fill: #8d93a6; }
.zm-win { fill: #ffd76a; }
.zm-wire { fill: none; stroke: #17141c; stroke-width: 1.2; }
.zm-road { fill: #4b4a52; }
.zm-paint { fill: #f2ead8; }
.zm-frame { fill: #17151b; }
.zm-shade { fill: #000; opacity: .25; }

.zm-pole, .zm-box { fill: #1d1a22; }
.zm-lamp { stroke: #08070b; stroke-width: 2; }
.zm-lamp--red { fill: #4a1c18; }
.zm-lamp--amber { fill: #4a3a12; }
.zm-lamp--green { fill: #163d22; }
.zm-halo { display: none; opacity: .4; }
.zm-halo--red { fill: #ff4533; }
.zm-halo--amber { fill: #ffb92e; }
.zm-halo--green { fill: #3be37a; }
.zm-arrow { fill: none; stroke: #163d22; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

.zm-scene[data-light="red"] .zm-lamp--red { fill: #ff4533; }
.zm-scene[data-light="amber"] .zm-lamp--amber { fill: #ffb92e; }
.zm-scene[data-light="green"] .zm-lamp--green { fill: #3be37a; }
.zm-scene[data-light="red"] .zm-halo--red,
.zm-scene[data-light="amber"] .zm-halo--amber,
.zm-scene[data-light="green"] .zm-halo--green { display: inline; }
.zm-scene[data-arrow="on"] .zm-arrow { stroke: #3be37a; }
/* A power cut takes the windows with it. */
.zm-scene[data-light="off"] .zm-win { fill: #2a2740; }

.zm-stand { fill: #f2ead8; }
.zm-glove { fill: #fff; }
.zm-sleeve { fill: none; stroke: #9fc3d8; stroke-width: 6; stroke-linecap: round; }
.zm-swish { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.zm-scene[data-cop="none"] .zm-cop,
.zm-scene[data-cop="stop"] .zm-arms--wave,
.zm-scene[data-cop="wave"] .zm-arms--stop { display: none; }

.zm-caption { position: absolute; inset: auto 0 0; display: grid; place-items: center; min-height: 1.9em; margin: 0; padding: .1rem 1.4rem; font-size: .9rem; font-weight: 800; line-height: 1.25; text-align: center; color: #fff; background: rgb(12 11 16 / .72); }

/* The mirror shows the cars behind: whoever is out. */
.zm-mirror { position: absolute; top: 4%; left: 34%; width: 32%; height: 15%; }
.zm-mirror__glass { display: flex; align-items: center; justify-content: center; gap: .1rem; height: 100%; overflow: hidden; font-size: clamp(.8rem, 3.6vw, 1.1rem); line-height: 1; background: #7c93a6; border: 3px solid #08070b; border-radius: 8px 8px 12px 12px; }
.zm-mirror__glass span { display: inline-block; }
.zm-beads { position: absolute; top: 96%; left: 50%; width: 16%; margin-left: -8%; transform-origin: 50% 0; animation: zm-swing 3.2s ease-in-out infinite; }
.zm-beads svg { display: block; width: 100%; height: auto; }
@keyframes zm-swing {
  0%, 100% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
}

/* The other drivers, on the top of the dashboard. */
.zm-drivers { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .45rem .4rem .1rem; }
.zm-driver { display: grid; justify-items: center; width: 3.7rem; padding: .1rem .2rem .15rem; line-height: 1.2; color: #f7ecd6; background: #2b2833; border: 2px solid #08070b; border-radius: 10px; }
.zm-driver.is-you { border-color: var(--sun); }
.zm-driver__face { font-size: 1.3rem; line-height: 1.15; }
.zm-driver__name { max-width: 100%; overflow: hidden; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.zm-driver__mark { font-size: .78rem; font-weight: 900; white-space: nowrap; }
.zm-driver--hit { color: var(--ink); background: #3be37a; }
.zm-driver--early { color: #fff; background: var(--tomato); }
html[lang="ar"] .zm-driver__name { font-size: .8rem; }

/* The dashboard: the display, and the top of the wheel. All of it honks. */
.zm-dash { display: grid; justify-items: center; gap: .5rem; width: 100%; padding: .5rem .8rem 0; font: inherit; color: #f7ecd6; background: var(--car); border: 0; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.zm-dash:focus-visible { outline-offset: -4px; }
.zm-lcd { display: grid; justify-items: center; align-content: center; gap: .05rem; width: min(100%, 15rem); min-height: 4.2rem; padding: .3rem .8rem .4rem; text-align: center; color: #b9f7c7; background: #0f2a1c; border: 2px solid #08070b; border-radius: 10px; box-shadow: inset 0 2px 6px rgb(0 0 0 / .5); }
.zm-lcd__big { font-size: clamp(1.5rem, 7.5vw, 2.1rem); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zm-lcd__small { font-size: .85rem; font-weight: 700; line-height: 1.25; opacity: .85; }
.zm-lcd--bad { color: #ffc9c0; background: #3d1310; }
.zm-lcd--back { color: #d8d3e6; background: #25222e; }
.zm-lcd--back .zm-lcd__big { font-size: 1.15rem; }
html[lang="ar"] .zm-lcd__big { line-height: 1.4; }
.zm-wheel { display: block; width: min(100%, 17rem); }
.zm-wheel svg { display: block; width: 100%; height: auto; }
.zm-hub { fill: #2b2833; stroke: #08070b; stroke-width: 3; }
.zm-hornicon { fill: var(--sun); }
.zm-hornwave { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; }
.zm-dash:active .zm-hub { fill: #4a4558; }

/* A short screen (a small phone with the browser's bars showing): a smaller wheel, so the horn stays on the screen. */
@media (max-height: 640px) {
  .zm-car { width: min(100%, 31vh * 1.58); width: min(100%, 31dvh * 1.58); }
  .zm-wheel { width: min(100%, 12rem); }
  .zm-lcd { min-height: 3.6rem; }
}

/* ---------- The photo finish ---------- */

.zm-lesson { padding: .5rem .9rem; font-weight: 800; text-align: center; background: var(--surface-2); border: 3px dashed var(--line); border-radius: 14px 16px 13px 17px; }
.zm-finish { display: grid; gap: .4rem; }
.zm-finish__row { position: relative; display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: .45rem .8rem .6rem; overflow: hidden; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.zm-finish__row:first-child.is-hit { color: var(--ink); background: var(--sun); }
.zm-finish__row.is-you { border-width: 4px; }
.zm-finish__face { font-size: 1.6rem; line-height: 1; }
.zm-finish__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.zm-finish__who small { font-weight: 700; color: var(--tomato); }
.zm-finish__time { font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.zm-finish__out { padding: 0 .5rem; font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--tomato); border: 2px solid var(--line); border-radius: 999px; transform: rotate(-4deg); }
/* The bar under each driver is as long as the time they took. */
.zm-finish__bar { position: absolute; inset: auto auto 0 0; width: var(--w); height: 5px; background: var(--olive); }
[dir="rtl"] .zm-finish__bar { inset: auto 0 0 auto; }
.zm-finish__row:not(.is-hit) .zm-finish__bar { background: var(--tomato); opacity: .5; }
.zm-finish__row.is-out { opacity: .8; border-style: dashed; }
.zm-newbest { padding: .4rem .9rem; font-weight: 900; text-align: center; color: #fff; background: var(--olive); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.zm-next { display: grid; gap: .3rem; text-align: center; font-weight: 700; }
.zm-end { justify-self: center; }
@media (prefers-color-scheme: dark) {
  .zm-finish__who small { color: #ff8a75; }
  .zm-finish__row:first-child.is-hit small { color: var(--tomato); }
}

/* ---------- The final standings ---------- */

.zm-board { display: grid; gap: .4rem; }
.zm-board__row { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: .5rem .8rem; background: var(--surface); border: 3px solid var(--line); border-radius: 14px 16px 13px 17px; }
.zm-board__row:first-child { background: var(--sun); color: var(--ink); }
.zm-board__row:first-child small { color: var(--ink); }
.zm-board__place { min-width: 1.4rem; font-size: 1.4rem; font-weight: 900; text-align: center; }
.zm-board__face { font-size: 1.6rem; line-height: 1; }
.zm-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.zm-board__who small { font-weight: 700; color: var(--muted); }