/* Машина ребёнка с деталями */
.my-car { position: relative; display: inline-block; vertical-align: bottom; }
.my-car > img, .my-car > span { position: absolute; pointer-events: none; user-select: none; }
.my-car > .my-car-img { position: relative; display: block; height: auto; }
.mc-roof, .mc-spoiler { height: auto; }
.mc-sticker { height: auto; opacity: .95; }
.mc-rim { object-fit: contain; }
.mc-rim.flat, .mc-flat { transform: scaleY(.78) translateY(12%); }
.mc-flat { border-radius: 50%; background: radial-gradient(#9aa3ad 0 30%, #2f3b4c 31% 100%); }
.mc-hub { border-radius: 50%; background: radial-gradient(#c9d2dc 0 22%, #7d8896 23% 44%, #4a5563 45% 56%, transparent 57%); }
.mc-cap { border-radius: 50%; background: #d9dee5; border: 3px solid #2f3b4c; }
.mc-cap.open { background: #2f3b4c; transform: translateX(-40%) scaleX(.55); }

/* Главный экран автосалона */
.as-hub { position: absolute; inset: 120px 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.as-mycar { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 24px; font-weight: 900; color: #2f3b4c; animation: ctBob 3s ease-in-out infinite; }
.as-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; }
.as-menu5 { grid-template-columns: repeat(5, 1fr); }
.as-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 250px; padding: 12px 10px 16px; border-radius: 32px; background: #fff; box-shadow: var(--press); color: #2f3b4c; }
.as-card strong { font-size: 26px; font-weight: 900; }
.as-card > span { font-size: 17px; color: #6b7280; }
.as-card-pic { flex: 1; display: grid; place-items: center; grid-auto-flow: column; gap: 6px; }
.as-card-pic img { height: auto; max-height: 150px; object-fit: contain; }
.as-card.small { min-height: 130px; justify-content: center; }
.as-done { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; }
.as-workshop { position: absolute; inset: 120px 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.as-lift { position: relative; padding-bottom: 26px; }
.as-lift i { position: absolute; left: 10%; right: 10%; bottom: 0; height: 22px; border-radius: 10px; background: #ffc94a; box-shadow: 0 6px 0 #d9a534; }
.as-lot { position: absolute; left: 60px; right: 60px; top: 130px; height: 460px; border-radius: 40px; background: #7d8896; display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px; gap: 0; box-shadow: inset 0 0 0 8px #6a7482; }
.as-spot { position: relative; border-left: 6px dashed #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.as-spot:last-child { border-right: 6px dashed #fff; }
.as-parked { background: none; border-radius: 24px; padding: 8px; }
.as-parked.sel { background: rgba(255, 233, 168, .45); outline: 4px solid #ffc94a; }
.as-spot-name { color: #fff; font-size: 22px; font-weight: 900; }
.as-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 20px; font-weight: 900; background: rgba(255, 255, 255, .15); border-radius: 24px; padding: 20px 14px; }
.as-empty svg { width: 50px; height: 50px; }
.as-go { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; height: 96px; padding: 0 34px 0 22px; border-radius: 34px; background: var(--go, #3fb96f); box-shadow: 0 8px 0 var(--go-dark, #2c8e53); color: #fff; font-size: 30px; font-weight: 900; }
.as-go svg { width: 50px; height: 50px; }
.as-tuning { position: absolute; inset: 110px 30px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.as-tune-car { min-height: 250px; display: flex; align-items: flex-end; }
.as-wallet { position: absolute; right: 30px; top: 10px; display: flex; align-items: center; gap: 6px; font-size: 32px; font-weight: 900; }
.as-wallet svg { width: 40px; height: 40px; }
.as-parts { width: 100%; min-height: 0; }
.as-parts .hs-pic { height: 110px; }
.as-note { display: flex; flex-direction: column; align-items: center; gap: 20px; font-size: 28px; font-weight: 800; text-align: center; }
.as-trips { position: absolute; left: 30px; right: 30px; bottom: 30px; grid-template-columns: repeat(5, 1fr); }
.as-trip-car { position: absolute; left: 0; right: 0; top: 120px; display: flex; justify-content: center; animation: ctBob 3s ease-in-out infinite; }

/* Поездка */
.as-car { z-index: 3; }
.as-obj { position: absolute; display: grid; place-items: center; }
.as-obj img { height: auto; }
.as-coin { transition: transform .3s, opacity .3s; }
.as-coin.got { transform: translateY(-80px) scale(1.4); opacity: 0; }
.as-stop b { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 22px; background: #ff5a5f; color: #fff; font-size: 22px; }
.as-stop.ok { filter: drop-shadow(0 0 10px #3fb96f); }
.as-fuel-zone { position: absolute; background: rgba(255, 201, 74, .18); border: 4px dashed rgba(255, 201, 74, .8); border-radius: 18px; }
.as-park-spot { position: absolute; border: 6px dashed #fff; border-radius: 16px; display: grid; place-items: center; }
.as-park-spot b { font-size: 60px; color: rgba(255, 255, 255, .85); }
.as-park-spot.ok { background: rgba(63, 185, 111, .35); }
.as-wall { position: absolute; background: repeating-linear-gradient(45deg, #ff5a5f 0 16px, #fff 16px 32px); border-radius: 8px; }
.as-dest { z-index: 1; }
.as-hud { position: absolute; left: 400px; top: 620px; display: flex; gap: 20px; align-items: center; }
.as-coins { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 26px; background: #fff; box-shadow: var(--press-sm); font-size: 34px; font-weight: 900; }
.as-coins svg { width: 40px; height: 40px; }
.as-fuel { width: 260px; height: 34px; border-radius: 17px; background: #fff; box-shadow: var(--press-sm); overflow: hidden; }
.as-fuel i { display: block; height: 100%; background: linear-gradient(90deg, #ff6f5f, #ffc94a, #3fb96f); }

/* Дом добрых дел в новом стиле */
.hp-scene.is-art { background: linear-gradient(#dff2ff 0 38%, #bfe3a4 38% 74%, #d9c3a5 74%); }
.hp-house.is-art { left: 20px; top: 150px; width: 400px; height: 420px; background: none; border: 0; display: flex; align-items: flex-end; }
.hp-house.is-art img { width: 400px; height: auto; filter: drop-shadow(0 8px 8px rgba(47, 59, 76, .2)); }
.person-art { display: block; height: auto; width: 110px; }
.hp-person .person-art { width: 120px; }
.hp-scene.is-art .hp-person { left: 300px; top: 330px; }
.care-resident .person-art { width: 150px; margin: 0 auto; }