/* 2.5D touches: real depth on flat art using the browser's 3D transforms.
   Everything here is cheap for the tablet's graphics chip, and calm mode turns the movement off. */

/* Coins with thickness: four discs behind the face make a gold edge as the coin turns. */
.coin3d { position: relative; display: inline-block; width: 1.5em; height: 1.5em; transform-style: preserve-3d; animation: coinTurn 2.6s ease-in-out infinite; }
.coin3d .i { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(3px); }
.coin3d i { position: absolute; inset: 7%; border-radius: 50%; background: #c98f12; }
.coin3d i:nth-child(1) { transform: translateZ(-3px); background: #a87708; }
.coin3d i:nth-child(2) { transform: translateZ(-1px); }
.coin3d i:nth-child(3) { transform: translateZ(1px); }
.coin3d i:nth-child(4) { transform: translateZ(2.5px); background: #e0a91c; }
@keyframes coinTurn { 0%, 55% { transform: perspective(300px) rotateY(0deg); } 85%, 100% { transform: perspective(300px) rotateY(360deg); } }

/* Trophies turn slowly on their stand, catching the light. */
.celebrate .trophy, .stop.boss .i { animation: trophyTurn 3.2s ease-in-out infinite; transform-origin: 50% 80%; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
@keyframes trophyTurn { 0%, 100% { transform: perspective(500px) rotateY(-32deg); } 50% { transform: perspective(500px) rotateY(32deg); } }

body.calm .coin3d, body.calm .celebrate .trophy, body.calm .stop.boss .i { animation: none; }

/* Garage turntable: the car stands on a round showroom platform. Fitting a part or tapping
   the car spins the platform and swings the car round in 3D, then it settles back. */
[data-shop-car] { position: relative; perspective: 800px; }
[data-shop-car] svg { position: relative; z-index: 1; transform-origin: 50% 80%; }
[data-shop-car]::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 46%; z-index: 0; border-radius: 50%;
  background: conic-gradient(#efe8d8, #fffaf0 12%, #e2dac8 25%, #fffaf0 37%, #efe8d8 50%, #fffaf0 62%, #e2dac8 75%, #fffaf0 87%, #efe8d8);
  box-shadow: 0 0 0 5px #cfc6b2, 0 0 0 9px rgba(255, 255, 255, .5), 0 22px 26px rgba(28, 35, 51, .2);
  transform: rotateX(74deg) rotateZ(0deg);
}
[data-shop-car].pop::before { animation: tableSpin 1s cubic-bezier(.3, .7, .3, 1); }
[data-shop-car].pop:not(.bought) svg { animation: carSwing 1s cubic-bezier(.3, .7, .3, 1); }
@keyframes tableSpin { to { transform: rotateX(74deg) rotateZ(360deg); } }
@keyframes carSwing { 0% { transform: rotateY(0); } 40% { transform: rotateY(-38deg) translateY(-4px); } 75% { transform: rotateY(8deg); } 100% { transform: rotateY(0); } }
body.calm [data-shop-car].pop::before, body.calm [data-shop-car].pop svg { animation: none; }

/* Race depth: hazy mountains are drawn in the scenery; here, slow clouds at the back and a
   fence that rushes past in front of the cars as he drives. */
.road { isolation: isolate; }
.road-clouds { position: absolute; inset: 0 0 50% 0; pointer-events: none; z-index: -1; }
.road-clouds i { position: absolute; width: 90px; height: 26px; border-radius: 20px; background: rgba(255, 255, 255, .85); box-shadow: 30px -10px 0 -2px rgba(255, 255, 255, .85); animation: cloudDrift 46s linear infinite; }
.road-clouds i:nth-child(1) { top: 12%; left: 8%; }
.road-clouds i:nth-child(2) { top: 26%; left: 48%; transform: scale(.7); animation-duration: 64s; animation-delay: -20s; }
.road-clouds i:nth-child(3) { top: 6%; left: 78%; transform: scale(.55); animation-duration: 80s; animation-delay: -40s; }
@keyframes cloudDrift { from { translate: 0 0; } to { translate: -120vw 0; } }
.road-fg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to top, rgba(40, 70, 30, .55), rgba(40, 70, 30, 0) 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(96, 62, 30, .9) 46px 52px, transparent 52px 120px);
  filter: blur(1.2px);
}
body.calm .road-clouds i { animation: none; }

/* Road-trip map as a board game on a table: the ground leans back, the stops stand up
   like little signposts, and his next stop gives a gentle hop. Tapping still works,
   because the browser maps taps through the tilt. */
.trail { transform: perspective(1100px) rotateX(16deg); transform-origin: 50% 100%; transform-style: preserve-3d; }
.trail .stop { transform: translate(-50%, -50%) translateZ(24px) rotateX(-16deg); }
.trail .stop:active { transform: translate(-50%, -50%) translateZ(24px) rotateX(-16deg) scale(.95); }
body .trail .stop.here { animation: stopHop 2.4s ease-in-out infinite; }
@keyframes stopHop { 0%, 70%, 100% { transform: translate(-50%, -50%) translateZ(24px) rotateX(-16deg); } 80% { transform: translate(-50%, -62%) translateZ(24px) rotateX(-16deg); } 90% { transform: translate(-50%, -50%) translateZ(24px) rotateX(-16deg) scaleY(.94); } }
body.calm .trail .stop.here { animation: none; }

/* Cards and gates lean back under his finger, like pressing a real card, and pop forward on release. */
.gb-gate, .pk-card, .sb-chip { transition: transform .12s ease-out; }
.gb-gate:active { transform: perspective(420px) rotateX(22deg) translateY(2px) scale(.97); }
.sb-chip:active { transform: perspective(420px) rotateX(18deg) rotateY(-8deg) scale(.96); }
.pk-card:active:not(.up) { transform: perspective(600px) rotateX(14deg) scale(.97); }
body.calm .gb-gate:active, body.calm .sb-chip:active, body.calm .pk-card:active { transform: scale(.97); }

/* Pause button and menu */
.pause-btn { position: absolute; left: 10px; bottom: 10px; z-index: 6; width: 56px; height: 56px; }
.pause-bars { display: flex; gap: 6px; }
.pause-bars i { width: 7px; height: 22px; border-radius: 3px; background: var(--ink); }
.pause-menu { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(28, 35, 51, .55); }
.pause-menu[hidden] { display: none; }
.pause-card { width: min(440px, 92vw); padding: 18px 20px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: center; animation: pop .3s ease-out; }
.pause-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 6dvh, 2.2rem); }
.pause-row { display: flex; gap: 10px; }
.pause-row .btn { flex: 1; }
body.calm .pause-card { animation: none; }
@media (max-height: 430px) { .pause-card { gap: 8px; padding: 12px 16px; } .pause-btn { width: 48px; height: 48px; } }

/* Paused: wheels, fence and clouds stop too. */
.road.is-paused, .road.is-paused *, .road.is-paused::before, .road.is-paused::after, .road.is-paused *::before, .road.is-paused *::after { animation-play-state: paused !important; }