/* ——— Speedy Town (js/theme.js): the same game in blue skies and racing colors ———
   Everything here is under html[data-theme="town"]; the palace look is the default. */

/* ——— Choosing a world (new player, and "Who's playing?") ——— */

.hero-mascots { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-bottom: -6px; }
.hero-mascots .hero-mascot { margin: 0; }
.hero-sub span { color: var(--ink-soft); opacity: 0.5; }

.world-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.world-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 14px;
  border: 4px solid #fff;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.2s var(--bounce), border-color 0.2s, background 0.2s;
}
.world-choice b { font-size: 21px; }
.world-choice small { font-size: 14px; line-height: 1.25; color: var(--ink-soft); }
.world-choice .mascot { pointer-events: none; }
.world-palace { background: linear-gradient(170deg, #fff, #ffe6f2); }
.world-town { background: linear-gradient(170deg, #fff, #e2f0ff); }
.world-choice:hover { transform: translateY(-3px); }
.world-palace[aria-pressed='true'] { border-color: #ff5fa2; transform: scale(1.04) rotate(-1.5deg); }
.world-town[aria-pressed='true'] { border-color: #3d8bff; transform: scale(1.04) rotate(1.5deg); }
@media (max-width: 520px) {
  .world-choice b { font-size: 17px; }
  .world-choice small { display: none; }
}

.profile-card { position: relative; }
.profile-world {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 20px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
}
.profile-card.card-town { background: linear-gradient(170deg, #fff 55%, #e4f0ff); }

/* ——— Speedy Town colors ——— */

html[data-theme='town'] {
  --ink: #22324a;
  --ink-soft: #5d6f8a;
  --outline: #2e3d57;
  --pink: #ff6a3d;
  --pink-deep: #dd4b20;
  --pink-soft: #ffe6dc;
  --lilac: #3d8bff;
  --lilac-deep: #246ad8;
  --lilac-soft: #e1edff;
  --mint: #2fbf71;
  --mint-deep: #1e9a58;
  --sky: #4fb3ff;
  --shadow: 0 12px 30px rgba(40, 80, 150, 0.16);
}
html[data-theme='town'] body { background: #e6f1ff; }
html[data-theme='town'] .sky { background: linear-gradient(180deg, #cfe8ff 0%, #e4f2ff 50%, #f0f9ea 100%); }
html[data-theme='town'] .sky-rainbow { display: none; }
html[data-theme='town'] .cloud { filter: drop-shadow(0 6px 0 rgba(120, 170, 220, 0.3)); }
html[data-theme='town'] .floater { opacity: 0.32; }

/* The world colors: Farm Roads is tractor red instead of pink. */
html[data-theme='town'] :is(.wt-meadow, .wp-meadow, .w-meadow, .sc-math) {
  --w: #ef5a3c; --w-deep: #c63f22; --w-soft: #ffd9cc; --w-bg: linear-gradient(140deg, #ffab8f, #ef5a3c);
}
html[data-theme='town'] .tile-pink { background: linear-gradient(140deg, #ffab8f, #ff6a3d); --d: #dd4b20; }
html[data-theme='town'] .lv-pink { --lv-bg: linear-gradient(170deg, #fff, #ffe6dc); --lv-d: #f6c2ae; }

/* The flashcard: a racing-number plate instead of a crown on top. */
html[data-theme='town'] .card {
  border-color: #cfe2fb;
  background:
    radial-gradient(circle at 8% 88%, #eef6ff 0 22px, transparent 23px),
    radial-gradient(circle at 94% 80%, #fff3e8 0 16px, transparent 17px),
    #fff;
  box-shadow: 0 10px 0 #b9d4f5, 0 22px 40px rgba(40, 80, 150, 0.2);
}
html[data-theme='town'] .card::before { content: '🏁'; }

html[data-theme='town'] .dot.pink,
html[data-theme='town'] .tf-dot { background: radial-gradient(circle at 34% 30%, #fff 0 12%, #ff8a5c 14% 100%); }
html[data-theme='town'] .chip.bloom { background: linear-gradient(180deg, #d9ecff, #bcdcff); color: #1d4f9a; box-shadow: 0 3px 0 #9cc4f0; }

/* ——— Speedy Town tap reactions (REACTIONS in js/living.js) ———
   The drawings mark their moving parts: .lp-wheel (spins on its own center),
   .lp-flash a/b (siren lamps), .lp-smoke (puffs), .lp-flame (rocket fire),
   .lp-rotor (a blade seen edge-on), .lp-spin, and .lp-arm (pivots where the
   drawing says, in viewBox units). The item's flip is on .room-item, so a
   flipped car drives the other way. */

svg .lp-wheel, svg .lp-spin, svg .lp-rotor, svg .lp-smoke, svg .lp-flame { transform-box: fill-box; transform-origin: 50% 50%; }
svg .lp-arm { transform-box: view-box; }
svg .lp-smoke, svg .lp-flame { opacity: 0; }

.room-items .room-item.lp-rx-drive > span,
.room-items .room-item.lp-rx-siren > span { animation: tn-drive 1.4s ease-in-out; }
.room-items .room-item.lp-rx-choo > span { animation: tn-drive 2.1s ease-in-out; }
.room-items .room-item.lp-rx-honk > span { transform-origin: 50% 100%; animation: tn-honk 0.8s var(--bounce); }
.room-items .room-item.lp-rx-fly > span { animation: tn-fly 2.3s ease-in-out; }
.room-items .room-item.lp-rx-launch > span { transform-origin: 50% 100%; animation: tn-launch 2.9s ease-in-out; }
.room-items .room-item.lp-rx-dig > span { animation: lp-squish 0.5s var(--bounce); }
.room-items .room-item.lp-rx-boat > span { transform-origin: 50% 90%; animation: tn-boat 1.9s ease-in-out; }

:is(.lp-rx-drive, .lp-rx-siren, .lp-rx-choo, .lp-rx-dig) .lp-wheel { animation: tn-roll 0.45s linear 3; }
.lp-rx-choo .lp-wheel { animation-iteration-count: 4; }
.lp-rx-siren .lp-flash.a { animation: tn-flash 0.28s steps(1) 7; }
.lp-rx-siren .lp-flash.b { animation: tn-flash 0.28s steps(1) 0.14s 7; }
:is(.lp-rx-choo, .lp-rx-boat, .lp-rx-launch) .lp-smoke { animation: tn-smoke 1.4s ease-out 2; }
:is(.lp-rx-choo, .lp-rx-boat, .lp-rx-launch) .lp-smoke:nth-of-type(2) { animation-delay: 0.3s; }
:is(.lp-rx-choo, .lp-rx-boat, .lp-rx-launch) .lp-smoke:nth-of-type(3) { animation-delay: 0.6s; }
.lp-rx-launch .lp-flame { animation: tn-flame 0.12s ease-in-out 22 alternate; }
.lp-rx-fly .lp-rotor { animation: tn-rotor 0.09s linear 26 alternate; }
:is(.lp-rx-fly, .lp-rx-spin) .lp-spin { animation: lp-spin 1.4s ease-in-out; }
.lp-rx-dig .lp-arm { animation: tn-dig 1.8s ease-in-out; }

@keyframes tn-drive { 0%, 100% { transform: none; } 40% { transform: translateX(14%); } 55% { transform: translateX(14%) rotate(-1.5deg); } }
@keyframes tn-honk { 0%, 100% { transform: none; } 25% { transform: scale(1.06, 0.92); } 50% { transform: translateY(-6%) scale(0.97, 1.04); } }
@keyframes tn-fly { 0%, 100% { transform: none; } 30% { transform: translate(6%, -22%) rotate(-6deg); } 55% { transform: translate(10%, -26%) rotate(2deg); } 80% { transform: translate(4%, -10%) rotate(-2deg); } }
@keyframes tn-launch {
  0%, 100% { transform: none; }
  6%, 14%, 22% { transform: translateX(-1.5%); } 10%, 18%, 26% { transform: translateX(1.5%); }
  45% { transform: translateY(-80%); } 60% { transform: translateY(-80%); } 85% { transform: translateY(-4%); }
}
@keyframes tn-boat { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg) translateY(-2%); } 45% { transform: rotate(3.5deg); } 70% { transform: rotate(-2deg) translateY(-1%); } }
@keyframes tn-roll { to { transform: rotate(360deg); } }
@keyframes tn-flash { 0% { opacity: 0.25; } 50% { opacity: 1; filter: brightness(1.5); } }
@keyframes tn-smoke { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(-60%) scale(1.5); } }
@keyframes tn-flame { 0% { opacity: 1; transform: scaleY(0.85); } 100% { opacity: 1; transform: scaleY(1.2); } }
@keyframes tn-rotor { from { transform: scaleX(1); } to { transform: scaleX(0.12); } }
@keyframes tn-dig { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-14deg); } }
@media (prefers-reduced-motion: reduce) {
  .room-items .room-item[class*='lp-rx-'] > span, svg [class^='lp-'] { animation: none !important; }
}

/* Zippy's propeller spins (js/zippy.js marks it .m-prop). */
.mascot .m-prop { transform-box: fill-box; transform-origin: 50% 50%; animation: tn-roll 0.5s linear infinite; }
.mascot[data-mood='joy'] .m-prop, .mascot[data-mood='wow'] .m-prop, .mascot.jump .m-prop { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) { .mascot .m-prop { animation: none; } }

/* ——— Speedy Town's wallpapers and floors (TOWN_WALLS, TOWN_FLOORS in js/catalog-town.js) ——— */

.wall-pegboard .wall {
  background:
    radial-gradient(circle, rgba(120, 80, 40, 0.35) 0 0.32cqw, transparent 0.42cqw) 0 0 / 2.6cqw 2.6cqw,
    linear-gradient(#e9c79b, #dcb383);
}
.wall-brick .wall {
  background:
    linear-gradient(#f0d9c4 0.35cqw, transparent 0) 0 0 / 100% 3cqw,
    linear-gradient(90deg, #f0d9c4 0.35cqw, transparent 0) 0 0 / 7cqw 6cqw,
    linear-gradient(90deg, #f0d9c4 0.35cqw, transparent 0) 3.5cqw 3cqw / 7cqw 6cqw,
    #d9694f;
}
.wall-firebrick .wall {
  background:
    linear-gradient(#ffe7a8 0 1.4cqw, #e5463b 1.4cqw 2.4cqw, transparent 2.4cqw) 0 62% / 100% 2.4cqw no-repeat,
    linear-gradient(#f7e2d5 0.35cqw, transparent 0) 0 0 / 100% 3cqw,
    linear-gradient(90deg, #f7e2d5 0.35cqw, transparent 0) 0 0 / 7cqw 6cqw,
    linear-gradient(90deg, #f7e2d5 0.35cqw, transparent 0) 3.5cqw 3cqw / 7cqw 6cqw,
    #c7463e;
}
.wall-blueprint .wall {
  background:
    linear-gradient(rgba(255, 255, 255, 0.28) 0.2cqw, transparent 0) 0 0 / 5cqw 5cqw,
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0.2cqw, transparent 0) 0 0 / 5cqw 5cqw,
    linear-gradient(rgba(255, 255, 255, 0.12) 0.12cqw, transparent 0) 0 0 / 1.25cqw 1.25cqw,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0.12cqw, transparent 0) 0 0 / 1.25cqw 1.25cqw,
    #2f6fc4;
}
.wall-ocean .wall {
  background:
    radial-gradient(ellipse at 50% 100%, #fff 0 30%, transparent 32%) 0 100% / 6cqw 2.4cqw repeat-x,
    radial-gradient(circle at 50% 120%, transparent 55%, rgba(255, 255, 255, 0.5) 56% 62%, transparent 63%) 0 0 / 8cqw 4cqw,
    linear-gradient(#bfe6ff 0 30%, #5fb6ea 30% 100%);
}
.wall-bluesky .wall {
  background:
    radial-gradient(ellipse, #fff 0 46%, transparent 48%) 2cqw 3cqw / 18cqw 8cqw,
    radial-gradient(ellipse, #fff 0 46%, transparent 48%) 11cqw 12cqw / 22cqw 9cqw,
    linear-gradient(#7cc3ff, #cfeaff);
}
.wall-checker .wall {
  background:
    conic-gradient(#2c3442 0 25%, #fff 0 50%, #2c3442 0 75%, #fff 0) 0 0 / 5cqw 5cqw;
}
.wall-galaxy .wall {
  background:
    radial-gradient(circle at 78% 26%, #ffcf6b 0 3cqw, transparent 3.2cqw),
    radial-gradient(circle, #fff 0 0.25cqw, transparent 0.35cqw) 0 0 / 6cqw 5cqw,
    radial-gradient(circle, #bfe0ff 0 0.2cqw, transparent 0.3cqw) 3cqw 2.5cqw / 6cqw 5cqw,
    linear-gradient(#141a46, #3a2f80);
}
.wall-skyline .wall {
  background:
    linear-gradient(transparent 55%, #5b6c8f 55%) 0 0 / 9cqw 100%,
    linear-gradient(transparent 38%, #6f82a8 38%) 4cqw 0 / 13cqw 100%,
    linear-gradient(transparent 66%, #8798bb 66%) 2cqw 0 / 7cqw 100%,
    linear-gradient(#ffd8a8, #ffeccc 60%);
  background-repeat: repeat-x;
}
.wall-camo .wall {
  background:
    radial-gradient(ellipse at 30% 40%, #3f6b3a 0 18%, transparent 20%) 0 0 / 12cqw 9cqw,
    radial-gradient(ellipse at 70% 70%, #7a6a3f 0 16%, transparent 18%) 4cqw 2cqw / 12cqw 9cqw,
    radial-gradient(ellipse at 50% 50%, #2d4a2b 0 14%, transparent 16%) 8cqw 5cqw / 12cqw 9cqw,
    #6f8f4e;
}
.floor-concrete .floor {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0.25cqw, transparent 0) 0 0 / 16cqw 100%,
    radial-gradient(circle, rgba(0, 0, 0, 0.06) 0 0.4cqw, transparent 0.5cqw) 0 0 / 3cqw 2.4cqw,
    linear-gradient(#c9ccd3, #b6bac3);
}
.floor-platform .floor {
  background:
    repeating-linear-gradient(90deg, #ffd23f 0 2cqw, #3a3f4b 2cqw 4cqw) 0 10% / 100% 1.3cqw no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0.25cqw, transparent 0) 0 0 / 8cqw 100%,
    #c9c3b8;
}
.floor-dirt .floor {
  background:
    radial-gradient(circle, rgba(90, 50, 20, 0.25) 0 0.5cqw, transparent 0.6cqw) 0 0 / 4cqw 3cqw,
    radial-gradient(circle, rgba(255, 240, 210, 0.35) 0 0.35cqw, transparent 0.45cqw) 2cqw 1.5cqw / 4cqw 3cqw,
    linear-gradient(#c8945d, #b07c47);
}
.floor-dock .floor {
  background:
    radial-gradient(circle, #6b4a2e 0 0.25cqw, transparent 0.35cqw) 1cqw 0.9cqw / 12cqw 2.6cqw,
    linear-gradient(rgba(80, 50, 20, 0.35) 0.25cqw, transparent 0) 0 0 / 100% 2.6cqw,
    repeating-linear-gradient(90deg, #c99360 0 24cqw, #bf8955 24cqw 48cqw);
}
.floor-runway .floor {
  background:
    repeating-linear-gradient(90deg, #fff 0 5cqw, transparent 5cqw 10cqw) 0 50% / 100% 0.9cqw no-repeat,
    linear-gradient(#fff, #fff) 0 6% / 100% 0.5cqw no-repeat,
    linear-gradient(#fff, #fff) 0 94% / 100% 0.5cqw no-repeat,
    #555c69;
}
.floor-roadmat .floor {
  background:
    repeating-linear-gradient(90deg, #ffe066 0 3cqw, transparent 3cqw 6cqw) 0 calc(50% - 0.2cqw) / 100% 0.45cqw no-repeat,
    linear-gradient(transparent 32%, #6b7280 32% 68%, transparent 68%),
    radial-gradient(circle at 20% 20%, #8fd27c 0 1.4cqw, transparent 1.5cqw) 0 0 / 14cqw 100%,
    #7fc76e;
}
.floor-asphalt .floor {
  background:
    conic-gradient(#2c3442 0 25%, #fff 0 50%, #2c3442 0 75%, #fff 0) 12% 0 / 2.4cqw 2.4cqw repeat-y,
    linear-gradient(#e44a3a 0 0.6cqw, #fff 0.6cqw 1.2cqw, transparent 1.2cqw) 0 0 / 2.4cqw 1.2cqw repeat-x,
    #4a515e;
  background-size: 2.4cqw 2.4cqw, 2.4cqw 1.2cqw, auto;
}
.floor-moon .floor {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 1.2cqw, transparent 1.3cqw) 0 0 / 11cqw 6cqw,
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 0.7cqw, transparent 0.8cqw) 5cqw 3cqw / 11cqw 6cqw,
    linear-gradient(#cfd2dc, #b4b8c6);
}
.floor-turf .floor {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0.35cqw, transparent 0) 0 0 / 14cqw 100%,
    repeating-linear-gradient(90deg, #5fbf5b 0 7cqw, #54b050 7cqw 14cqw);
}

/* ——— Room features ——— */

.feature.garagedoor {
  left: 26%;
  right: 26%;
  top: 8%;
  height: 54%;
  border: 1.2cqw solid #8a93a6;
  border-bottom: none;
  border-radius: 1.4cqw 1.4cqw 0 0;
  background:
    linear-gradient(#ffffff55 0.5cqw, transparent 0.5cqw) 0 0 / 100% 4cqw,
    linear-gradient(#e7ebf2, #c9d0dc);
  box-shadow: inset 0 -1cqw 0 rgba(0, 0, 0, 0.08), 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.12);
}
.feature.garagedoor::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  height: 16%;
  border-radius: 0.6cqw;
  background: linear-gradient(135deg, #f4fbff, #bfe3fb);
  box-shadow: inset 0 0 0 0.4cqw #8a93a6;
}
.lp-night .feature.garagedoor::before { background: linear-gradient(#ffe9a8, #ffd36b); }

/* ——— The pinks around the app, in Speedy Town's sky blues ——— */

html[data-theme='town'] :is(.profile-avatar.has-look, .tg-host) { background: radial-gradient(circle at 50% 60%, #fff 0 45%, #d8eaff 100%); }
html[data-theme='town'] .pp-avatar.has-look { background: #d8eaff; }
html[data-theme='town'] .dr-stage {
  background:
    radial-gradient(ellipse at 50% 92%, rgba(90, 150, 230, 0.4) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 40%, #fff 0 30%, transparent 60%),
    repeating-linear-gradient(90deg, #e2efff 0 24px, #d3e6ff 24px 48px);
  box-shadow: 0 9px 0 #c3d8f2, var(--shadow);
}
html[data-theme='town'] .piece-card { background: linear-gradient(#f3f8ff, #fff); }
html[data-theme='town'] .piece-card.wearing { background: linear-gradient(#ffe9df, #fff); }
html[data-theme='town'] .dressing-banner { background: linear-gradient(90deg, #eef6ff, #fff3e8); }
html[data-theme='town'] :is(.first-buy, .sp-specials) { background: linear-gradient(90deg, #fff6d6, #e4f0ff); }
html[data-theme='town'] .garden-banner { background: linear-gradient(90deg, #f0fff8, #eaf3ff); }
html[data-theme='town'] .bk-lesson { background: linear-gradient(180deg, #f2fcff, #eef5ff); }
html[data-theme='town'] .art-card { border-color: #cfe2fb; box-shadow: 0 6px 0 #b9d4f5; }
html[data-theme='town'] .chip.grow { background: #e6f1ff; color: #2a5ea8; }
html[data-theme='town'] :is(.adot) { background: radial-gradient(circle at 34% 30%, #fff 0 12%, #ff8a5c 14% 100%); }
html[data-theme='town'] .dot.gone { background: #ffe9df; }
html[data-theme='town'] :is(.bt-group, .array) { border-color: #dbe7f6; }
html[data-theme='town'] .option:nth-child(1) { --c: #ffe6dc; --cd: #f6bfa9; }
html[data-theme='town'] .choice { --kd: #b9d4f5; background: linear-gradient(180deg, #fff, #f3f8ff); }
html[data-theme='town'] :is(.rq-face, .rq-portrait) { background: radial-gradient(circle at 50% 40%, #fff 0 40%, #d8eaff 100%); }
html[data-theme='town'] .rq-card.done { background: linear-gradient(90deg, #eaf4ff, #fff); }
html[data-theme='town'] .rq-badge.done { background: #eaf4ff; }
html[data-theme='town'] .ab-slot.has { background: linear-gradient(#f3f8ff, #fff); }
html[data-theme='town'] .rc-stage { background: radial-gradient(circle at 50% 62%, #f6fbff 0%, #d6e9ff 55%, #cfe2ff 100%); box-shadow: 0 7px 0 #c3d8f2, var(--shadow); }
html[data-theme='town'] .rc-stage-royal { background: radial-gradient(circle at 50% 62%, #fffbe8 0%, #ffe9b8 50%, #ffb07a 120%); }
html[data-theme='town'] .rc-stage-wood { background: radial-gradient(circle at 50% 62%, #fff8ee 0%, #f3e3cc 60%, #d6e6ff 110%); }
/* The ribbon across a finished place is a checkered finish-line tape. */
html[data-theme='town'] .rq-band {
  background:
    conic-gradient(#2c3442 0 25%, #fff 0 50%, #2c3442 0 75%, #fff 0) 0 0 / 16px 16px;
}

/* ——— The town map: the HQ building around the place cards (js/castle-town.js) ——— */
/* The HQ building: a cream wall under the roof drawn by castle-town.js. */
html[data-theme='town'] .castle-body {
  border-color: #fff;
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(214, 170, 110, 0.18) 26px 28px),
    linear-gradient(#fff3d9, #ffe6bd);
  box-shadow: 0 10px 0 #e8c48e, var(--shadow);
}
html[data-theme='town'] .castle-body::before { display: none; }
html[data-theme='town'] .castle-floor + .castle-floor { border-top-color: #f25a4a; }
html[data-theme='town'] .castle-door {
  background: linear-gradient(90deg, #8fc2ff 0 49%, #4b8df0 49% 51%, #8fc2ff 51%);
  border-color: #fff;
}
html[data-theme='town'] .lp-scene:not(.lp-night) { background: linear-gradient(#a9d8ff, #dcefff 50%, #eef8e6); }
/* Bulbs on the string lights glow only at night. */
.lp-glowbulb { opacity: 0 !important; }
.lp-night .lp-glowbulb { opacity: 0.9 !important; }
/* The balloon bobs; the plane tows its banner across the sky. */
.lp-skytoys { position: absolute; inset: 0; }
.lp-balloon { position: absolute; left: 31%; top: 0.6%; width: clamp(30px, 5.5vw, 58px); animation: lp-balloon 5s ease-in-out infinite alternate; }
.lp-plane { position: absolute; left: 0; top: 3%; width: clamp(120px, 24vw, 240px); animation: lp-plane 28s linear infinite; }
.lp-balloon svg, .lp-plane svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes lp-balloon { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-14px) rotate(3deg); } }
@keyframes lp-plane { from { translate: -110% 0; } to { translate: calc(1010px + 10%) 0; } }
@media (prefers-reduced-motion: reduce) { .lp-balloon, .lp-plane { animation: none; } .lp-plane { left: 55%; } }
@media (prefers-reduced-motion: reduce) { .km-train { display: none; } }