.mini-app { --city-card-surface:radial-gradient(ellipse 65% 150% at 108% 42%,#ffffff2e 0%,#ffffff18 36%,#ffffff08 66%,#ffffff00 88%),linear-gradient(108deg,#e00000 0%,#e31818 62%,#e93636 100%); --city-card-shadow:inset -12px 0 36px 1px #ffffff16,inset 0 1px 0 #ffffff44,0 7px 22px #c20c2114; }
/* Compact cards with genuine transparent PNGs. Type never follows the artwork. */
.mini-app .journey-hero,body.mini-compact .journey-hero {
 display:block; position:relative; isolation:isolate; overflow:hidden; min-height:0;
 padding:16px 18px; border-radius:22px;
 background:var(--city-card-surface);
 box-shadow:var(--city-card-shadow);
}
.mini-app .journey-hero::before { display:none; }
.mini-app .journey-hero .hero-copy,body.mini-compact .journey-hero .hero-copy {
 position:relative; width:auto; max-width:calc(100% - 106px); min-width:0; z-index:3;
}
.mini-app .journey-hero .hero-greeting { display:block; margin:0 0 6px; color:#fff; font-size:10px; line-height:1.3; }
.mini-app .journey-hero .hero-status-line { color:#fff; font-size:10px; margin-bottom:7px; line-height:1.3; }
.mini-app .journey-hero h1,body.mini-compact .journey-hero h1 {
 max-width:100%; margin:0; color:#fff; font-size:25px; line-height:1.08; letter-spacing:-.65px;
}
.mini-app .journey-hero .hero-route { max-width:100%; color:#fff; font-size:11px; line-height:1.35; margin:7px 0 9px; }
.mini-app .journey-hero .hero-bottom { position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:7px; min-height:30px; align-items:center; }
.mini-app .journey-hero .hero-profile { color:#b50000; background:#fff; border-color:#ffe3e8; font-size:9px; padding:6px 8px; }
.mini-app .journey-hero .hero-open { color:#a80000; background:#fff; border:1px solid #ffe3e8; border-radius:99px; padding:5px 9px; min-height:30px; font-size:10px; }
.mini-app .hero-art-stage {
 position:absolute; right:8px; top:11px; width:112px; height:126px; min-width:0;
 overflow:hidden; contain:paint; z-index:2;
}
body.mini-compact .hero-art-stage .hero-city,.mini-app .hero-art-stage .hero-city {
 position:absolute; inset:9px 8px; width:auto; height:auto; opacity:1; color:#fff;
 animation:none; margin:0; overflow:hidden;
}
.mini-app .hero-art-stage .hero-city > .city-illustration {
 display:block; width:100%; height:100%; mask-image:none; -webkit-mask-image:none; filter:none;
}
.mini-app .hero-city-name { display:none; }
.mini-app .hero-road {
 position:absolute; left:-4%; top:25%; width:108%; height:125px; z-index:0;
 pointer-events:none; overflow:hidden; opacity:.27;
}
.mini-app .road-bed { stroke:#a90000; stroke-width:23; stroke-linecap:round; opacity:.22; }
.mini-app .road-edge { stroke:#fff; stroke-width:24; stroke-linecap:round; opacity:.16; }
.mini-app .road-center { stroke:#fff; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:7 9; opacity:.7; }
body.mini-compact .journey-art {
 height:130px; margin:8px 0 14px; padding:6px 6px 0; gap:14px; border-radius:18px;
 overflow:hidden; contain:paint; color:#fff;
 background:var(--city-card-surface);
 box-shadow:var(--city-card-shadow);
}
body.mini-compact .journey-art-place { padding:0 3px 11px; z-index:2; min-width:0; }
body.mini-compact .journey-art-place > span { position:relative; z-index:3; color:#fff; font-size:11px; font-weight:650; line-height:1.3; padding:2px 3px; }
body.mini-compact .journey-art .journey-art-place .journey-art-picture {
 left:10%; bottom:39px; width:80%; height:77px; color:#fff; overflow:hidden;
}
body.mini-compact .journey-art-picture > .city-illustration { width:100%; height:100%; }
body.mini-compact .journey-art .journey-art-connection { left:-3%; bottom:14px; width:106%; height:80px; opacity:1; stroke:none; stroke-dasharray:none; }
.mini-app .city-art-layer { opacity:1; }
.mini-app .city-choice-art { display:flex; align-items:center; justify-content:center; width:72px; height:60px; left:10px; bottom:12px; border-radius:13px; opacity:1; overflow:hidden; color:#fff; background:linear-gradient(125deg,#e00000,#ed3636); }
.mini-app .city-choice-art > .city-illustration { display:block; width:88%; height:88%; flex:0 0 auto; margin:auto; filter:none; }
.mini-app .city-choices button { padding-left:96px; }
body.mini-compact .city-choice-art { width:64px; height:57px; left:9px; bottom:11px; }
body.mini-compact .city-choices button { padding-left:85px; }
.mini-app .hero-city[data-mini-motion],body.mini-compact .journey-art-picture[data-mini-motion] {
 transform:translate3d(var(--mini-motion-x,0px),var(--mini-motion-y,0px),0) rotate(var(--mini-motion-rotate,0deg)) scale(var(--mini-motion-scale,1));
 transform-origin:50% 50%; will-change:transform;
}
.publication-settings-list b { font-weight:550; }
.publication-settings-help { color:#63565f; font-size:12px; line-height:1.5; margin:11px 0 18px; }
.mini-app .hero-art-stage:has(.city-illustration[data-city-primary="pines"]) { top:0; bottom:0; right:0; width:118px; height:auto; }
.mini-app .hero-art-stage:has(.city-illustration--divnogorsk) { right:4px; top:4px; width:126px; height:140px; }
/* Tall figures use the full first-card height, with gentler bounded motion. */
.mini-app .hero-art-stage:has(.city-illustration[data-city-primary="atomMan"]) {
 top:0; bottom:0; right:0; width:118px; height:auto;
}
body.mini-compact .hero-art-stage:has(.city-illustration[data-city-primary="pines"]) .hero-city,
.mini-app .hero-art-stage:has(.city-illustration[data-city-primary="pines"]) .hero-city,
body.mini-compact .hero-art-stage:has(.city-illustration[data-city-primary="atomMan"]) .hero-city,
.mini-app .hero-art-stage:has(.city-illustration[data-city-primary="atomMan"]) .hero-city {
 inset:8px 5px;
 transform:translate3d(calc(var(--mini-motion-x,0px)*.3),calc(var(--mini-motion-y,0px)*.3),0) rotate(calc(var(--mini-motion-rotate,0deg)*.4)) scale(calc(1 + (var(--mini-motion-scale,1) - 1)*.25));
}
@media(max-width:360px) {
 .mini-app .journey-hero,body.mini-compact .journey-hero { padding:15px 16px; }
 .mini-app .journey-hero .hero-copy,body.mini-compact .journey-hero .hero-copy { max-width:calc(100% - 86px); }
 .mini-app .journey-hero h1,body.mini-compact .journey-hero h1 { font-size:23px; }
 .mini-app .hero-art-stage { right:4px; top:10px; width:94px; height:122px; }
 .mini-app .hero-art-stage:has(.city-illustration[data-city-primary="pines"]),
 .mini-app .hero-art-stage:has(.city-illustration[data-city-primary="atomMan"]) { width:110px; }
 .mini-app .hero-art-stage:has(.city-illustration--divnogorsk) { right:2px; top:5px; width:106px; height:130px; }
 body.mini-compact .journey-art { height:124px; gap:6px; }
 body.mini-compact .journey-art .journey-art-place .journey-art-picture { height:70px; }
 body.mini-compact .journey-art-place > span { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .mini-app .hero-city[data-mini-motion],body.mini-compact .journey-art-picture[data-mini-motion] { transform:none!important; will-change:auto; }
}

/* Messenger badges belong at the bottom of every signed-in page. */
.footer-messengers { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.footer-messengers img { display:block; width:24px; height:24px; }

/* Custom road-status tiles replace platform emoji without moving the copy. */
.conditions-widget .conditions-indicator.road-status { display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; margin-top:1px; border-radius:10px; border:1px solid #e6dce2; background:linear-gradient(145deg,#faf5f7,#eee6ec); color:#876879; box-shadow:inset 0 1px 0 #ffffffb3; }
.conditions-widget .road-status svg { display:block; width:25px; height:25px; }
.conditions-widget .road-status--clear { color:#317a61; border-color:#d5e8df; background:linear-gradient(145deg,#f0faf5,#dcefe4); }
.conditions-widget .road-status--busy { color:#a66b28; border-color:#f1dfc4; background:linear-gradient(145deg,#fff9ef,#f6e9cf); }
.conditions-widget .road-status--heavy { color:#b52e47; border-color:#f1d5dd; background:linear-gradient(145deg,#fff2f5,#f5dce4); }

/* Site-only route: actual button and city bounds define its available corridor. */
.mini-app .hero-travel-road { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; }
.mini-app .hero-travel-road[hidden] { display:none; }
.mini-app .has-travel-road > .hero-road { display:none; }
.hero-travel-shoulder { stroke:#ffffff40; stroke-width:24; stroke-linecap:round; }
.hero-travel-surface { stroke:#bd1731; stroke-width:17; stroke-linecap:round; }
.hero-travel-dashes { stroke:#fff4f0; stroke-width:1.4; stroke-dasharray:10 11; }
.hero-road-car { fill:#fff; stroke:#982235; stroke-width:1.5; offset-distance:0%; offset-rotate:auto; animation:hero-journey-drive 14s ease-in-out infinite alternate; }
.hero-travel-road[data-paused="true"] .hero-road-car { animation-play-state:paused; }
@keyframes hero-journey-drive { from { offset-distance:0%; } to { offset-distance:100%; } }
.mini-app:not(.mini-compact) .journey-hero.hero-road-stacked { padding-bottom:58px; }
.mini-app .hero-road-stacked .hero-art-stage:has([data-city-primary="atomMan"]),
.mini-app .hero-road-stacked .hero-art-stage:has([data-city-primary="pines"]) { bottom:56px; }
@media(prefers-reduced-motion:reduce) { .hero-road-car { animation:none!important; offset-distance:47%; } }

/* The rounded phone surface shows through the header corners. */
.mini-app .app-header { background:transparent; border-radius:inherit; }
body.mini-compact .hero-road { mask-image:linear-gradient(to right,transparent,#000 8%,#000 88%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 88%,transparent); }
/* All navigation actions share geometry in active and inactive states. */
.mini-app .app-tabs > button { box-sizing:border-box; height:52px; min-height:52px; padding:12px 8px; font-weight:600; }
.mini-app .app-tabs > button .app-icon { stroke-width:1.8; }
body.mini-compact .app-tabs > button { height:52px; min-height:52px; padding:7px 3px; font-weight:600; }
@media(max-width:650px) { .mini-app .app-tabs > button { padding:7px 3px; } }
.service-footer { max-width:900px; margin:28px auto; padding:0 16px; }
.service-footer .service-notice { max-width:68em; margin:15px auto 0; color:#766574; font-size:11px; line-height:1.65; text-wrap:pretty; }