* { box-sizing: border-box; }

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20252c;
  background: #f7f2e7;
  --ink: #20252c;
  --paper: #fffaf0;
  --track: #e76543;
  --track-dark: #cf5538;
  --line: rgba(255, 248, 229, .92);
  --blue: #5479c6;
  --yellow: #f4c949;
}

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 6%, rgba(255,255,255,.8), transparent 24%),
    linear-gradient(#f9f5ec, #f1eadb);
}

button { font: inherit; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 82px 120px minmax(420px, 1fr) 116px;
  overflow: hidden;
}

.topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 36px 10px;
  background: rgba(255, 251, 243, .94);
  border-bottom: 1px solid rgba(51, 61, 74, .08);
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-title {
  font-size: clamp(30px, 3vw, 46px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.09em;
  transform: rotate(-2deg);
  text-shadow: 2px 2px 0 rgba(244,201,73,.85);
}
.brand-spark {
  color: #ee6b3f;
  font-size: 28px;
  transform: rotate(-18deg);
}

.today-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 800;
  color: #4c5870;
}
.today-total strong {
  color: #ec6841;
  font-size: clamp(28px, 2.7vw, 42px);
  letter-spacing: -.04em;
}
.tiny-bars { display: flex; align-items: end; gap: 3px; height: 22px; }
.tiny-bars i { width: 4px; border-radius: 4px; background: #53627a; }
.tiny-bars i:nth-child(1) { height: 7px; }
.tiny-bars i:nth-child(2) { height: 13px; }
.tiny-bars i:nth-child(3) { height: 20px; }

.bind-button {
  justify-self: end;
  border: 1.5px solid #7da0e4;
  background: #eef4ff;
  color: #273b65;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(84,121,198,.14);
}
.bind-button:hover { transform: translateY(-1px); }

.office-strip {
  position: relative;
  overflow: hidden;
  background: #f8f1e3;
  border-bottom: 2px solid rgba(40,49,60,.12);
}
.office-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: radial-gradient(#9e927e 0.7px, transparent 0.7px);
  background-size: 9px 9px;
}
.window {
  position: absolute;
  right: 9%;
  top: 14px;
  width: 34%;
  height: 100px;
  border: 5px solid #637b95;
  border-bottom: 0;
  background: #bfdbef;
  overflow: hidden;
}
.cloud {
  position: absolute;
  width: 54px;
  height: 16px;
  background: rgba(255,255,255,.78);
  border-radius: 999px;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.cloud::before { width: 24px; height: 24px; left: 8px; bottom: 3px; }
.cloud::after { width: 28px; height: 28px; left: 24px; bottom: 2px; }
.cloud-a { top: 18px; left: 30px; }
.cloud-b { top: 30px; right: 34px; transform: scale(.7); }
.building { position: absolute; bottom: 0; background: rgba(74,96,119,.34); }
.b1 { left: 18%; width: 34px; height: 44px; }
.b2 { left: 38%; width: 48px; height: 70px; }
.b3 { left: 62%; width: 42px; height: 50px; }
.b4 { right: 8%; width: 52px; height: 80px; }

.sticky-note {
  position: absolute;
  padding: 8px 12px;
  background: #fff0c8;
  border: 1px solid rgba(64,60,45,.12);
  box-shadow: 2px 3px 0 rgba(79,72,54,.08);
  font-size: 14px;
  line-height: 1.28;
  font-weight: 750;
  color: #586273;
  transform: rotate(-3deg);
}
.note-a { left: 28%; top: 18px; }
.note-b { left: 57%; top: 22px; transform: rotate(2deg); }
.plant, .sleepy-cat, .desk-cat {
  position: absolute;
  filter: saturate(.7);
  user-select: none;
}
.plant-left { left: 2%; bottom: -8px; font-size: 58px; transform: rotate(-8deg); }
.plant-right { right: 1%; bottom: -6px; font-size: 52px; }
.sleepy-cat { left: 11%; bottom: 4px; font-size: 42px; transform: rotate(-4deg); }
.race-stage {
  position: relative;
  min-height: 420px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)),
    var(--track);
  box-shadow:
    inset 0 9px 18px rgba(139,63,41,.12),
    inset 0 -8px 12px rgba(126,49,30,.09);
}

.race-stage::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .13;
  background-image:
    radial-gradient(rgba(255,255,255,.9) .7px, transparent .7px),
    radial-gradient(rgba(116,48,34,.8) .6px, transparent .6px);
  background-size: 10px 10px, 13px 13px;
  background-position: 0 0, 5px 5px;
}

.track-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .24;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 190px,
      rgba(255,255,255,.45) 190px 194px,
      transparent 194px 330px
    );
  animation: trackFlow 5s linear infinite;
}

.lane {
  position: relative;
  z-index: 2;
  border-top: 3px solid var(--line);
  overflow: visible;
}
.lane:last-of-type { border-bottom: 3px solid var(--line); }

.lane-number {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  color: rgba(255,248,229,.88);
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 900;
  font-family: ui-rounded, system-ui, sans-serif;
  text-shadow: 1px 2px 0 rgba(134,55,38,.12);
}

.finish-mark {
  position: absolute;
  right: 5.5%;
  top: 0;
  z-index: 3;
  width: 22px;
  height: 100%;
  opacity: .78;
  background:
    repeating-linear-gradient(
      180deg,
      #fff7df 0 15px,
      transparent 15px 30px
    );
  transform: skewX(4deg);
}

.rider {
  --x: 50%;
  --scale: 1;
  --accent: #4c8ad9;
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 132px;
  height: 104px;
  transform: translate(-50%, -52%) scale(var(--scale));
  transform-origin: 50% 70%;
  transition: left 6.4s cubic-bezier(.22,.68,.28,1), filter .3s ease;
  z-index: 6;
}

.rider-motion {
  position: absolute;
  inset: 0;
  transform-origin: 50% 78%;
}

.rider-inner {
  position: absolute;
  inset: 0;
  animation: riderBob 1.1s ease-in-out infinite;
  animation-delay: var(--phase);
  transform-origin: 50% 75%;
}

.rider.is-sprinting .rider-motion { animation: sprintSurge 2.2s cubic-bezier(.2,.72,.26,1) both; }
.rider.is-wheelie .rider-motion { animation: wheeliePop 1.9s cubic-bezier(.22,.72,.22,1) both; }
.rider.is-bonking .rider-motion { animation: bonkSag 2.3s ease-in-out both; }
.rider.is-celebrating .rider-motion { animation: victoryHop 2s cubic-bezier(.2,.75,.22,1) both; }
.rider.is-tired .rider-inner { animation: tiredWobble .62s ease-in-out infinite; }
.rider.is-chill .rider-inner { animation-duration: 1.65s; }

.avatar-ring {
  position: absolute;
  z-index: 8;
  left: 51px;
  top: 0;
  width: 58px;
  height: 58px;
  border: 3px solid #fff9eb;
  border-radius: 50%;
  background: #dfe9f7;
  box-shadow: 0 2px 0 rgba(82,48,35,.22);
  overflow: hidden;
  transition: transform .24s ease, top .24s ease;
}
.avatar-ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rider.is-sprinting .avatar-ring {
  top: -12px;
  transform: rotate(-9deg) scale(1.08);
}
.rider.is-wheelie .avatar-ring {
  top: -5px;
  transform: rotate(-12deg) scale(1.05);
}
.rider.is-bonking .avatar-ring {
  top: 8px;
  transform: rotate(11deg) scale(.96);
}
.rider.is-celebrating .avatar-ring {
  top: -8px;
  transform: rotate(7deg) scale(1.08);
}

.body {
  position: absolute;
  z-index: 5;
  left: 59px;
  top: 50px;
  width: 37px;
  height: 24px;
  border-radius: 50% 50% 42% 42%;
  background: var(--accent);
  transform: rotate(9deg);
  border: 2px solid #27313c;
  transition: top .22s ease, transform .22s ease;
}
.rider.is-sprinting .body {
  top: 36px;
  transform: rotate(28deg) translateX(8px) scaleY(1.08);
}
.rider.is-wheelie .body {
  top: 45px;
  transform: rotate(-5deg) translateX(-2px);
}
.rider.is-bonking .body {
  top: 57px;
  transform: rotate(18deg) translateX(2px) scaleY(.9);
}
.rider.is-celebrating .body {
  top: 45px;
  transform: rotate(-8deg) translateY(-4px);
}

.arm {
  position: absolute;
  z-index: 6;
  top: 54px;
  left: 83px;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: #27313c;
  transform: rotate(23deg);
  transform-origin: left center;
}
.rider.is-sprinting .arm { top: 43px; transform: rotate(43deg) scaleX(1.16); }
.rider.is-wheelie .arm { top: 49px; transform: rotate(9deg) scaleX(1.08); }
.rider.is-bonking .arm { top: 63px; transform: rotate(30deg) scaleX(.92); }
.rider.is-celebrating .arm { top: 37px; transform: rotate(-62deg) scaleX(1.18); }

.bike {
  position: absolute;
  left: 18px;
  top: 57px;
  width: 100px;
  height: 45px;
  transform-origin: 45% 78%;
}
.rider.is-wheelie .bike { animation: bikeWheelie 1.9s ease-in-out both; }
.rider.is-bonking .bike { animation: bikeClunk 2.3s ease-in-out both; }
.rider.is-celebrating .bike { animation: bikeBounce 2s ease-in-out both; }
.wheel {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 34px;
  border: 4px solid #27313c;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(39,49,60,.35) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(39,49,60,.35) 48% 52%, transparent 53%);
  animation: wheelSpin var(--cadence) linear infinite;
  animation-delay: var(--phase);
}
.rider.is-sprinting .wheel { animation-duration: .23s; }
.rider.is-wheelie .wheel { animation-duration: .5s; }
.rider.is-bonking .wheel { animation-duration: 1.35s; }
.rider.is-celebrating .wheel { animation-duration: .42s; }
.rider.is-chill .wheel { animation-duration: 1.2s; }
.wheel.front { right: 4px; }
.wheel.back { left: 4px; }

.frame {
  position: absolute;
  left: 33px;
  bottom: 12px;
  width: 38px;
  height: 25px;
  transform: skewX(-14deg);
}
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--accent);
  clip-path: polygon(0 100%, 47% 0, 100% 100%, 0 100%);
}
.frame::after {
  transform: translateX(18px) scaleX(.68);
  opacity: .82;
}

.leg {
  position: absolute;
  z-index: 6;
  top: 65px;
  left: 71px;
  width: 5px;
  height: 31px;
  border-radius: 999px;
  background: #27313c;
  transform-origin: 50% 0;
  animation: pedalLeg .72s ease-in-out infinite;
}
.leg.leg-b { animation-delay: -.36s; }
.rider.is-sprinting .leg { animation-duration: .23s; height: 35px; top: 52px; }
.rider.is-wheelie .leg { animation-duration: .5s; }
.rider.is-bonking .leg { animation-duration: 1.35s; height: 27px; top: 69px; }
.rider.is-celebrating .leg { animation-duration: .42s; }
.rider.is-chill .leg { animation-duration: 1.2s; }
.name-chip {
  position: absolute;
  z-index: 12;
  left: 103px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  background: rgba(255,250,240,.93);
  color: #313946;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(88,48,34,.15);
}
.name-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.name-chip .tokens {
  color: #7a665e;
  font-weight: 700;
}

.effect-speed,
.effect-fire,
.effect-dust,
.effect-sweat,
.effect-music,
.effect-burst {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.effect-speed {
  opacity: 0;
  left: -82px;
  top: 45px;
  width: 95px;
  height: 42px;
  background:
    linear-gradient(180deg, transparent 4px, rgba(255,255,255,.84) 5px 8px, transparent 9px 18px,
    rgba(255,255,255,.64) 19px 22px, transparent 23px 31px, rgba(255,255,255,.5) 32px 34px, transparent 35px);
  clip-path: polygon(0 12%, 100% 0, 84% 100%, 0 82%);
}
.rider.is-fast .effect-speed,
.rider.is-sprinting .effect-speed { opacity: 1; animation: speedFlicker .22s steps(2) infinite; }

.effect-fire {
  opacity: 0;
  left: -45px;
  top: 58px;
  width: 74px;
  height: 37px;
}
.effect-fire::before,
.effect-fire::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  border-radius: 60% 10% 55% 50%;
  transform: rotate(45deg);
}
.effect-fire::before {
  width: 45px;
  height: 29px;
  background: #ff7a36;
  box-shadow: -20px 8px 0 -5px #ffb127;
}
.effect-fire::after {
  width: 28px;
  height: 18px;
  right: 8px;
  background: #ffd954;
}
.rider.is-burning .effect-fire,
.rider.is-sprinting.effect-heavy .effect-fire {
  opacity: 1;
  animation: flameFlicker .18s steps(2) infinite;
}

.effect-dust {
  left: 10px;
  top: 88px;
  width: 18px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,246,222,.9);
  box-shadow: -13px 5px 0 -2px rgba(255,246,222,.75), -24px 2px 0 -5px rgba(255,246,222,.65);
  animation: dustPop .9s ease-out infinite;
}

.effect-sweat {
  display: none;
  left: 98px;
  top: 2px;
  width: 9px;
  height: 15px;
  border-radius: 80% 20% 70% 30%;
  background: #77b8e9;
  transform: rotate(-35deg);
  box-shadow: 12px 8px 0 -2px #77b8e9;
}
.rider.is-tired .effect-sweat,
.rider.is-sprinting .effect-sweat,
.rider.is-bonking .effect-sweat { display: block; animation: sweatPop .8s ease-in-out infinite; }

.effect-music {
  display: none;
  left: 112px;
  top: -5px;
  color: #2d3037;
  font-size: 24px;
  font-weight: 900;
}
.rider.is-chill .effect-music { display: block; animation: musicFloat 1.5s ease-in-out infinite; }

.effect-burst {
  display: none;
  left: 105px;
  top: -25px;
  color: #252a30;
  font-weight: 950;
  font-size: 17px;
  transform: rotate(-5deg);
  white-space: nowrap;
}
.rider.is-sprinting .effect-burst,
.rider.is-wheelie .effect-burst,
.rider.is-bonking .effect-burst,
.rider.is-celebrating .effect-burst {
  display: block;
  animation: burstPop .32s cubic-bezier(.2,.85,.25,1.15) both;
}
.rider.is-wheelie .effect-burst { transform: rotate(6deg); }
.rider.is-bonking .effect-burst { top: -18px; transform: rotate(8deg); }
.rider.is-celebrating .effect-burst { top: -30px; transform: rotate(-8deg) scale(1.08); }

.desk-edge {
  position: relative;
  z-index: 12;
  background: #f5eee0;
  border-top: 2px solid rgba(63,68,73,.08);
  overflow: hidden;
}
.monitor {
  position: absolute;
  left: -22px;
  bottom: -22px;
  width: 190px;
  height: 105px;
  border: 8px solid #252d3b;
  background: #1c2532;
  transform: rotate(-5deg);
  border-radius: 8px;
}
.monitor::before {
  content: "const ride = true;  // work later";
  position: absolute;
  inset: 18px 14px;
  color: #75a4d4;
  font: 11px/1.5 ui-monospace, SFMono-Regular, monospace;
  opacity: .7;
}
.monitor span { display: none; }
.desk-note {
  position: absolute;
  left: 125px;
  top: 17px;
  padding: 8px 11px;
  background: #f8d969;
  color: #5a574d;
  font-weight: 800;
  transform: rotate(4deg);
  box-shadow: 2px 3px 0 rgba(67,62,47,.12);
}
.mug {
  position: absolute;
  left: 31%;
  bottom: 8px;
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #303948;
  color: #f4f1e8;
  border-radius: 4px 4px 14px 14px;
  font-weight: 900;
}
.mug::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 10px;
  width: 20px;
  height: 21px;
  border: 6px solid #303948;
  border-left: 0;
  border-radius: 0 16px 16px 0;
}
.chair {
  position: absolute;
  left: 50%;
  bottom: -65px;
  width: 220px;
  height: 115px;
  border-radius: 48% 48% 12% 12%;
  background: #27313d;
  transform: translateX(-50%);
  opacity: .94;
}
.desk-cat { right: 9%; bottom: -4px; font-size: 54px; transform: rotate(4deg); }

.pair-dialog {
  width: min(520px, calc(100vw - 28px));
  border: 0;
  padding: 0;
  background: transparent;
}
.pair-dialog::backdrop { background: rgba(32,37,44,.28); backdrop-filter: blur(3px); }
.dialog-card {
  position: relative;
  padding: 28px;
  border: 2px solid #20252c;
  border-radius: 22px;
  background: #fffaf0;
  box-shadow: 8px 8px 0 rgba(32,37,44,.18);
}
.dialog-close {
  position: absolute; right: 14px; top: 12px;
  border: 0; background: transparent; font-size: 28px; cursor: pointer;
}
.dialog-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #e66b43; }
.dialog-card h2 { margin: 0 0 10px; font-size: 28px; }
.dialog-copy { color: #66707b; line-height: 1.6; }
.dialog-primary {
  border: 2px solid #20252c; border-radius: 999px; padding: 11px 16px;
  background: #f3cf4d; font-weight: 900; cursor: pointer;
}
.pairing-result { margin-top: 18px; padding: 16px; border-radius: 14px; background: #20252c; color: #fff; }
.pairing-result code { font-size: 28px; font-weight: 950; color: #f6d65d; letter-spacing: .08em; }
.pairing-result pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #c9d7f4; font-size: 12px; }

.login-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: #f7f2e7;
}
.login-card { text-align: center; font-size: 16px; color: #4b5360; }
.mini-bike { font-size: 46px; animation: miniRide .75s ease-in-out infinite; }
.retry-button {
  margin-top: 16px; border: 1.5px solid #53627a; border-radius: 999px;
  background: #fff; padding: 10px 16px; cursor: pointer; font-weight: 800;
}
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 60;
  transform: translateX(-50%);
  padding: 10px 14px; border-radius: 999px;
  background: rgba(32,37,44,.92); color: #fff; font-size: 13px;
}

.hidden { display: none !important; }

@keyframes trackFlow { to { background-position-x: -330px; } }
@keyframes riderBob { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-3px) rotate(.7deg); } }
@keyframes sprintSurge {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  14% { transform: translate(3px,-3px) rotate(-1.5deg); }
  36% { transform: translate(12px,-6px) rotate(-3deg); }
  68% { transform: translate(18px,-4px) rotate(-2deg); }
  86% { transform: translate(7px,-1px) rotate(.8deg); }
}
@keyframes wheeliePop {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(2px,-3px) rotate(-2deg); }
  42%,62% { transform: translate(8px,-10px) rotate(-10deg); }
  78% { transform: translate(5px,-5px) rotate(-5deg); }
}
@keyframes bonkSag {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  18% { transform: translate(-2px,3px) rotate(2deg); }
  42% { transform: translate(-4px,8px) rotate(4deg); }
  60% { transform: translate(1px,5px) rotate(-2deg); }
  78% { transform: translate(-2px,7px) rotate(3deg); }
}
@keyframes victoryHop {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(3px,-3px) rotate(-2deg); }
  40% { transform: translate(7px,-13px) rotate(4deg); }
  58% { transform: translate(10px,-5px) rotate(-3deg); }
  76% { transform: translate(8px,-10px) rotate(3deg); }
}
@keyframes sprintJolt { 0% { transform: translate(-2px,-2px) rotate(-1deg); } 100% { transform: translate(3px,1px) rotate(1.5deg); } }
@keyframes tiredWobble { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(2px); } }
@keyframes bikeWheelie { 0%,100% { transform: rotate(0deg); } 42%,62% { transform: rotate(-9deg); } }
@keyframes bikeClunk { 0%,100% { transform: translateY(0) rotate(0); } 42% { transform: translateY(3px) rotate(2deg); } 60% { transform: translateY(1px) rotate(-1deg); } }
@keyframes bikeBounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 58% { transform: translateY(1px); } 76% { transform: translateY(-3px); } }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
@keyframes pedalLeg { 0%,100% { transform: rotate(36deg); } 50% { transform: rotate(-38deg); } }
@keyframes speedFlicker { 50% { transform: translateX(-8px) scaleX(1.15); opacity: .72; } }
@keyframes flameFlicker { 50% { transform: scaleX(1.18) scaleY(.85) translateX(-6px); } }
@keyframes dustPop { 0% { opacity: .8; transform: scale(.55) translate(5px,0); } 100% { opacity: 0; transform: scale(1.3) translate(-22px,-8px); } }
@keyframes sweatPop { 50% { transform: translate(5px,-8px) rotate(-35deg) scale(.8); opacity: .55; } }
@keyframes musicFloat { 50% { transform: translate(8px,-9px) rotate(12deg); } }
@keyframes burstPop { from { transform: scale(.5) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(-5deg); opacity: 1; } }
@keyframes miniRide { 50% { transform: translateY(-4px) rotate(-3deg); } }

@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { min-height: 780px; grid-template-rows: 72px 92px 480px 100px; }
  .topbar { grid-template-columns: 1fr auto; padding: 10px 16px; }
  .today-total { display: none; }
  .brand-title { font-size: 34px; }
  .office-strip { opacity: .9; }
  .sticky-note, .sleepy-cat { display: none; }
  .window { right: 4%; width: 52%; }
  .lane-number { left: 10px; font-size: 34px; }
  .rider { --scale: .82; }
  .finish-mark { right: 2%; }
}