/* VELVETROT motion layer: shared by every game (see motion-fx.mjs). */
:root{--fx-ease-out:cubic-bezier(0.23,1,0.32,1);--fx-copper:#e9b783}

/* Flight layer and "+N" badge */
.fx-layer{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;color:inherit}
.fx-ghost{position:fixed!important;margin:0!important;max-width:none!important;max-height:none!important;transform-origin:center;pointer-events:none;box-shadow:0 18px 40px #0009;border-radius:4px;overflow:hidden;will-change:transform,opacity;z-index:1}
.fx-ghost-paper{background:linear-gradient(#efe7d6,#e2d6bd);background-image:repeating-linear-gradient(0deg,transparent 0 13px,#c9bca1 13px 14px),linear-gradient(#efe7d6,#e2d6bd)}
.fx-badge{position:fixed;transform-origin:left bottom;padding:3px 8px;border-radius:999px;background:var(--fx-copper);color:#1a1c1c;font:800 13px/1.2 Manrope,Arial,sans-serif;box-shadow:0 4px 14px #0007;white-space:nowrap}

/* Press feedback. The independent `scale` property composes with each game's own transforms (pins, centring). */
button:not(:disabled){transition:scale 140ms var(--fx-ease-out)}
button:not(:disabled):active{scale:.97}

/* Living map: a slow sheen sweeps across, and a warm glow breathes. Pointer-transparent, clipped by the map frame. */
.city-layer::after,.map .world::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
 background:linear-gradient(105deg,transparent 42%,#ffe6c21f 49%,#fff3df30 50%,#ffe6c21f 51%,transparent 58%) no-repeat;background-size:300% 100%;
 animation:fx-sheen 11s linear infinite}
.city-layer::before,.map .world::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(ellipse 55% 45% at 50% 45%,#ffb86b26,transparent 70%);animation:fx-breathe 7s ease-in-out infinite}
.city-layer>.city-pin,.city-layer>.map-marker,.map .world>.marker,.city-layer>button{z-index:2}
@keyframes fx-sheen{0%,62%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes fx-breathe{0%,100%{opacity:.35}50%{opacity:1}}

/* Places still to visit pulse softly so the eye finds them. */
.city-pin:not(.done):not(.locked)>span,.map-marker:not(.visited):not(.locked),.map .marker{animation:fx-ping 2.8s var(--fx-ease-out) infinite}
@keyframes fx-ping{0%{outline:2px solid #ffd6a08c;outline-offset:0}80%,100%{outline:2px solid #ffd6a000;outline-offset:11px}}

/* Fine film grain over everything, so dark screens never look flat. */
html::after{content:'';position:fixed;inset:-50%;z-index:2147483000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:fx-grain .9s steps(5) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

@media (prefers-reduced-motion:reduce){
 .city-layer::after,.map .world::after,.city-layer::before,.map .world::before,html::after,
 .city-pin>span,.map-marker,.map .marker{animation:none}
 button:not(:disabled):active{scale:none}
}