/* GENERATED from story.dp.css by build-dp.cjs, do not edit */
/* Stop 3 "Nechaj sa viesť": the app's map screen rebuilt in the phone, driven by scroll (story.js).
   SOURCE FILE: values in dp of the app (screen 412 × 925 dp); `node build-dp.cjs` writes story.css.
   Every value comes from apps/mobile (design-system tokens, FormSheet, CelebrationModal, ActiveTripSheet, PlaceDetailScreen). */
.s3 .vis { position: relative; margin-top: 40px; height: 520vh; }
.s3 .stage { --pw: min(35.5vh, 78vw); position: sticky; top: 13vh; height: 80vh; display: grid; place-items: center; }
.s3 .phone { position: relative; z-index: 1; }
.s3 .scr { --dp: calc(100cqw / 412); --sh: 0 calc(6 * var(--dp)) calc(18 * var(--dp)) rgba(4, 47, 27, 0.22); position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.125); container-type: inline-size; background: #e6e2dc; font-family: var(--body); color: #4e070b; }
.s3 #smap { position: absolute; inset: 0; }
.s3 #smap canvas { outline: none; }
.s3 .maplibregl-ctrl { display: none; }
.s3 .scr > * { pointer-events: none; }
.s3 .scr .u { position: absolute; }
.s3 .scr ion-icon { display: block; flex: none; }
.s3 .scr b, .s3 .scr small, .s3 .scr em { font-style: normal; }
.s3 .scr i[data-g] { display: block; flex: none; width: 1em; height: 1em; }
.s3 .scr .yg { display: block; width: 100%; height: 100%; }

/* trip stops on the map: photo pins (48 white frame, radius 14, category badge 24 overhanging by 8) and the GPS puck */
.s3 .ppin { position: relative; width: calc(56 * var(--dp)); height: calc(56 * var(--dp)); }
.s3 .ppin .fr { position: absolute; left: 0; top: 0; width: calc(48 * var(--dp)); height: calc(48 * var(--dp)); border-radius: calc(14 * var(--dp)); background: #fff; padding: calc(3 * var(--dp)); box-shadow: var(--sh); }
.s3 .ppin .fr img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(11 * var(--dp)); display: block; }
.s3 .ppin .bg { position: absolute; left: calc(32 * var(--dp)); top: calc(32 * var(--dp)); width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); border-radius: 0; }
.s3 .ppin.next .fr { background: #4ec46e; }
.s3 .ppin .vc { position: absolute; left: calc(31 * var(--dp)); top: calc(7 * var(--dp)); width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); border-radius: 0; display: none; }
.s3 .ppin.done .vc { display: block; }
.s3 .gps { width: calc(14 * var(--dp)); height: calc(14 * var(--dp)); border-radius: 50%; background: #042f1b; box-shadow: 0 0 0 calc(3 * var(--dp)) #fff, 0 0 0 calc(8 * var(--dp)) rgba(78, 196, 110, 0.28); }

/* status bar */
.s3 .stat { position: absolute; left: 0; right: 0; top: 0; height: calc(44 * var(--dp)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(28 * var(--dp)); font: 600 calc(15 * var(--dp))/1 var(--body); color: #111; }
.s3 .stat span { display: flex; gap: calc(5 * var(--dp)); font-size: calc(15 * var(--dp)); }
.s3 .stat.w { color: #fff; }

/* top overlay: search row, quick-filter chips, navigation controls (walk/bike/car + locate, shown during a run) */
.s3 .top { left: 0; right: 0; top: calc(56 * var(--dp)); padding: 0 calc(20 * var(--dp)); }
.s3 .srow { display: flex; gap: calc(10 * var(--dp)); align-items: center; }
.s3 .sbar { flex: 1; height: calc(48 * var(--dp)); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--dp)) #e8d9cb, var(--sh); display: flex; align-items: center; gap: calc(8 * var(--dp)); padding: 0 calc(16 * var(--dp)); font: 400 calc(15 * var(--dp))/calc(22 * var(--dp)) var(--body); color: #7f6152; white-space: nowrap; }
.s3 .sbar i[data-g] { font-size: calc(20 * var(--dp)); }
.s3 .filt { width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); flex: none; border-radius: 50%; background: #4ec46e; color: #042f1b; display: grid; place-items: center; font-size: calc(24 * var(--dp)); box-shadow: var(--sh); }
.s3 .chips { margin: calc(10 * var(--dp)) calc(-20 * var(--dp)) 0; padding: 0 calc(20 * var(--dp)); display: flex; gap: calc(8 * var(--dp)); white-space: nowrap; }
.s3 .chips span { flex: none; height: calc(36 * var(--dp)); border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--dp)) #e8d9cb, var(--sh); display: inline-flex; align-items: center; gap: calc(4 * var(--dp)); padding: 0 calc(12 * var(--dp)); font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #4e070b; }
.s3 .chips span.im { padding-left: calc(6 * var(--dp)); }
.s3 .chips img { width: calc(22 * var(--dp)); height: calc(22 * var(--dp)); border-radius: 0; }
.s3 .chips i[data-g] { font-size: calc(16 * var(--dp)); }
.s3 .ctl { margin-top: calc(12 * var(--dp)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(12 * var(--dp)); }
.s3 .ctl .grp { width: calc(44 * var(--dp)); padding: calc(4 * var(--dp)) 0; border-radius: 999px; background: #fff; box-shadow: var(--sh); display: grid; justify-items: center; }
.s3 .ctl .grp s { display: block; width: calc(32 * var(--dp)); height: 1px; background: #e8d9cb; }
.s3 .ctl .grp b { width: calc(36 * var(--dp)); height: calc(36 * var(--dp)); margin: calc(4 * var(--dp)) 0; border-radius: 50%; display: grid; place-items: center; font-size: calc(20 * var(--dp)); color: #7f6152; }
.s3 .ctl .grp b.on { background: #e7ec48; color: #042f1b; }
.s3 .ctl .one { width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: calc(24 * var(--dp)); color: #042f1b; box-shadow: var(--sh); }

/* floating tab bar */
.s3 .tabs { left: calc(20 * var(--dp)); right: calc(20 * var(--dp)); bottom: calc(44 * var(--dp)); height: calc(64 * var(--dp)); border-radius: 999px; background: #042f1b; padding: 0 calc(8 * var(--dp)); display: flex; align-items: center; justify-content: space-around; box-shadow: var(--sh); }
.s3 .tabs span { display: grid; justify-items: center; gap: calc(2 * var(--dp)); min-width: calc(44 * var(--dp)); font: 500 calc(10 * var(--dp))/calc(12 * var(--dp)) var(--body); color: #fff; opacity: 0.6; }
.s3 .tabs i[data-g] { font-size: calc(24 * var(--dp)); }
.s3 .tabs .on { color: #4ec46e; opacity: 1; }
.s3 .attr { left: calc(8 * var(--dp)); bottom: calc(6 * var(--dp)); font: 400 calc(9 * var(--dp))/1 var(--body); color: rgba(0, 0, 0, 0.5); }

/* shared bits */
.s3 .grab { display: block; width: calc(40 * var(--dp)); height: calc(4 * var(--dp)); border-radius: 999px; background: #e8d9cb; }
.s3 .btn { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--dp)); height: calc(48 * var(--dp)); padding: 0 calc(24 * var(--dp)); border-radius: 999px; font: 600 calc(15 * var(--dp))/calc(20 * var(--dp)) var(--body); white-space: nowrap; }
.s3 .btn i[data-g] { font-size: calc(20 * var(--dp)); }
.s3 .btn.p { background: #f4842d; color: #4e070b; box-shadow: inset 0 0 0 calc(1.5 * var(--dp)) #f4842d; }

/* active-trip card (ActiveTripSheet, collapsed) */
.s3 .tcard { left: calc(12 * var(--dp)); right: calc(12 * var(--dp)); bottom: calc(132 * var(--dp)); background: #fff; border-radius: calc(24 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)) calc(12 * var(--dp)); box-shadow: var(--sh); }
.s3 .tcard .grab { margin: calc(4 * var(--dp)) auto; }
.s3 .tcard .row { display: flex; gap: calc(12 * var(--dp)); align-items: center; margin-top: calc(4 * var(--dp)); }
.s3 .tcard .thumbs { position: relative; width: calc(64 * var(--dp)); height: calc(64 * var(--dp)); flex: none; border-radius: calc(14 * var(--dp)); overflow: hidden; background: #f4ebdf; }
.s3 .tcard .thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 0; transition: opacity 0.3s ease; }
.s3 .tcard .thumbs img.on { opacity: 1; }
.s3 .tcard .txt { flex: 1; min-width: 0; display: grid; gap: calc(4 * var(--dp)); }
.s3 .tcard .kick { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #7f6152; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3 .tcard .name { font: 700 calc(16 * var(--dp))/calc(20 * var(--dp)) var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3 .tcard .pills { display: flex; gap: calc(6 * var(--dp)); }
.s3 .tcard .np { display: inline-flex; align-items: center; gap: calc(4 * var(--dp)); height: calc(22 * var(--dp)); padding: 0 calc(8 * var(--dp)); border-radius: 999px; font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); white-space: nowrap; }
.s3 .tcard .np i[data-g] { font-size: calc(12 * var(--dp)); }
.s3 .tcard .np.d { background: #e7ec48; color: #042f1b; }
.s3 .tcard .np.t { background: #f4ebdf; color: #4e070b; }
.s3 .tcard .prog { display: flex; align-items: center; gap: calc(10 * var(--dp)); margin-top: calc(12 * var(--dp)); }
.s3 .tcard .bar { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(4 * var(--dp)); }
.s3 .tcard .bar i { position: relative; height: calc(8 * var(--dp)); border-radius: 999px; background: #f4ebdf; overflow: hidden; }
.s3 .tcard .bar i.cur { box-shadow: inset 0 0 0 calc(2 * var(--dp)) #042f1b; }
.s3 .tcard .bar i.on { background: #4ec46e; }
.s3 .tcard .count { font: 700 calc(16 * var(--dp))/calc(20 * var(--dp)) var(--display); white-space: nowrap; }
.s3 .tcard .count span { color: #7f6152; }
.s3 .tcard .acts { display: flex; align-items: center; gap: calc(10 * var(--dp)); margin-top: calc(12 * var(--dp)); }
.s3 .tcard .cam { width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); flex: none; border-radius: 50%; background: #e7ec48; color: #042f1b; display: grid; place-items: center; font-size: calc(24 * var(--dp)); }
.s3 .tcard .pause { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--dp)); height: calc(40 * var(--dp)); padding: 0 calc(16 * var(--dp)); border-radius: 999px; box-shadow: inset 0 0 0 calc(1.5 * var(--dp)) #4e070b; font: 600 calc(15 * var(--dp))/calc(20 * var(--dp)) var(--body); white-space: nowrap; }
.s3 .tcard .pause i[data-g] { font-size: calc(20 * var(--dp)); }
.s3 .tcard .up { width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); display: grid; place-items: center; font-size: calc(24 * var(--dp)); color: #042f1b; }

/* modals: scrim + bottom sheets that cover the tab bar */
.s3 .scrim { inset: 0; background: rgba(4, 47, 27, 0.45); opacity: 0; }
.s3 .sheet { left: 0; right: 0; bottom: 0; visibility: hidden; }

/* CelebrationModal (place discovered / trip completed) */
.s3 .cel { background: #fbf1e6; border-radius: calc(24 * var(--dp)) calc(24 * var(--dp)) 0 0; padding: calc(58 * var(--dp)) calc(20 * var(--dp)) calc(56 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--dp)); }
.s3 .cel .grab { position: absolute; top: calc(8 * var(--dp)); left: 50%; translate: -50% 0; }
.s3 .cel .masc { position: absolute; top: calc(-64 * var(--dp)); left: 50%; translate: -50% 0; width: calc(130 * var(--dp)); height: calc(110 * var(--dp)); object-fit: contain; border-radius: 0; }
.s3 .cel .hl { font: 800 calc(26 * var(--dp))/calc(32 * var(--dp)) var(--display); letter-spacing: calc(-0.5 * var(--dp)); text-align: center; }
.s3 .cel .cap2 { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #7f6152; text-align: center; }
.s3 .ptsp { display: inline-flex; align-items: center; gap: calc(6 * var(--dp)); height: calc(40 * var(--dp)); padding: 0 calc(16 * var(--dp)); border-radius: 999px; background: #e7ec48; color: #042f1b; }
.s3 .ptsp i[data-g] { font-size: calc(20 * var(--dp)); }
.s3 .ptsp b { font: 700 calc(20 * var(--dp))/calc(26 * var(--dp)) var(--display); }
.s3 .prow { align-self: stretch; display: flex; align-items: center; gap: calc(12 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)) calc(8 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(20 * var(--dp)); background: #fff; }
.s3 .prow img { width: calc(72 * var(--dp)); height: calc(72 * var(--dp)); flex: none; object-fit: cover; border-radius: calc(14 * var(--dp)); }
.s3 .prow div { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--dp)); }
.s3 .prow b { font: 700 calc(16 * var(--dp))/calc(20 * var(--dp)) var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3 .prow small { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #7f6152; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3 .prow i[data-g] { font-size: calc(18 * var(--dp)); color: #7f6152; }
.s3 .cel .btn { align-self: stretch; padding: 0 calc(12 * var(--dp)); }

/* RewardSummary: points pill + forest level card with the onForest bar (existing green, gained lime) */
.s3 .rs { align-self: stretch; display: grid; gap: calc(12 * var(--dp)); justify-items: center; }
.s3 .rs .pl { display: flex; gap: calc(8 * var(--dp)); justify-content: center; }
.s3 .rs .pp { padding: calc(4 * var(--dp)) calc(8 * var(--dp)); border-radius: 999px; background: #e7ec48; color: #042f1b; font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); }
.s3 .rs .lc { justify-self: stretch; background: #042f1b; border-radius: calc(20 * var(--dp)); padding: calc(18 * var(--dp)); }
.s3 .rs .tr { display: flex; align-items: center; justify-content: space-between; }
.s3 .rs .lvl { display: inline-flex; align-items: center; gap: calc(6 * var(--dp)); height: calc(30 * var(--dp)); padding: 0 calc(12 * var(--dp)); border-radius: 999px; background: #e7ec48; color: #042f1b; }
.s3 .rs .lvl i[data-g] { font-size: calc(15 * var(--dp)); }
.s3 .rs .lvl b { font: 600 calc(13 * var(--dp))/calc(18 * var(--dp)) var(--body); }
.s3 .rs .tot b { font: 800 calc(20 * var(--dp))/calc(24 * var(--dp)) var(--display); color: #fff; }
.s3 .rs .tot span { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: rgba(255, 255, 255, 0.7); }
.s3 .rs .bar { display: flex; margin-top: calc(12 * var(--dp)); height: calc(8 * var(--dp)); border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.s3 .rs .bar i { display: block; height: 100%; }
.s3 .rs .bar .ex { background: #4ec46e; }
.s3 .rs .bar .ga { background: #e7ec48; border-radius: 0 999px 999px 0; transform-origin: 0 50%; }


/* finish: the big waving Yabu jumps out of the phone (lives in .phone, outside the clipped screen); the app sheet's own small mascot is hidden */
.s3 .cel.fin .masc { display: none; }
.s3 .bigyabu { position: absolute; z-index: 3; left: 50%; bottom: 27%; width: calc(var(--pw) * 1.15); max-width: none; height: auto; translate: -50% 0; transform-origin: 50% 90%; border-radius: 0; object-fit: contain; visibility: hidden; pointer-events: none; }
.webconf { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.webconf i { position: absolute; border-radius: 2px; }

/* confetti over the finish */
.s3 .confetti { inset: 0; overflow: hidden; }
.s3 .confetti i { position: absolute; top: -4%; border-radius: 2px; opacity: 0; }

@media (max-width: 820px) {
  .s3 .vis { height: 460vh; }
  .s3 .stage { --pw: min(33vh, 68vw); top: 12vh; height: 80vh; }
}