/* Small, purposeful motion for swipeable cards and the active navigation icon. */
.app-nav button[aria-current="page"] .nav-mark,
.app-nav button[aria-current="page"] .nav-symbol{animation:nav-settle .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes nav-settle{0%{transform:translateY(5px) scale(.82)}60%{transform:translateY(-2px) scale(1.09)}100%{transform:translateY(0) scale(1)}}
.view-start.is-current .hero-sun{animation:sun-drift 5s ease-in-out infinite alternate}
.view-start.is-current .hero-garda{animation:lake-drift 6s ease-in-out infinite alternate}
@keyframes sun-drift{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(8px) rotate(8deg)}}
@keyframes lake-drift{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-7px) rotate(2deg)}}
.home-action:active,.hero-cta:active,.app-nav button:active{filter:brightness(.96)}

@keyframes game-city-enter{from{opacity:.65;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes game-pin-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.5)}50%{box-shadow:0 0 0 7px rgba(255,215,0,0)}}
@keyframes game-mark-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.game-modes-hint{display:none}
.game-map .map-pin{transition:scale .2s ease,box-shadow .2s ease,background-color .2s ease;scale:1}
.game-map .map-pin.is-active{scale:1.07;box-shadow:0 8px 18px rgba(20,54,66,.23)}
.game-map .map-pin.is-active .pin-dot{animation:game-pin-pulse 2.3s ease-in-out infinite}
.game-detail.city-reveal{animation:game-city-enter .35s ease-out}
.app-view[data-view="gra"].is-current .game-mode.mode-ready img{animation:game-mark-float 5.5s ease-in-out infinite}
.game-mode.mode-ready{transition:transform .22s ease,box-shadow .22s ease}
.game-mode.mode-ready:active{scale:.985}
@media(hover:hover){
  .game-map .map-pin:hover{scale:1.1;box-shadow:0 8px 18px rgba(20,54,66,.22)}
  .game-mode.mode-ready:hover,.game-mode.mode-ready:focus-within{transform:translateY(-4px);box-shadow:0 15px 28px rgba(20,54,66,.14)}
}

@media(max-width:650px){
  .game-modes-hint{display:block;font-size:12px;font-weight:800;color:#315bc9;margin-top:3px}
  .view-start .gesture-hint{display:block;max-width:115px;text-align:right;font-size:12px;line-height:1.25;color:#315bc9;font-weight:800}
  .motion-carousel{scroll-padding-inline:0 18px;-webkit-overflow-scrolling:touch}
  .app-view .discover .experience-cards,.app-view .plan-inspirations .experience-cards{align-items:flex-start}
  .app-view .discover .experience-card,.app-view .plan-inspirations .experience-card{flex:0 0 min(72vw,300px);min-height:0;height:auto;align-self:flex-start}
  .app-view .discover .experience-card .experience-body,.app-view .plan-inspirations .experience-card .experience-body{flex:0 1 auto}
  .motion-carousel > *{--motion-scale:1;--motion-y:0px;--motion-opacity:1;transform:translate3d(0,var(--motion-y),0) scale(var(--motion-scale));opacity:var(--motion-opacity);transition:transform .18s ease-out,opacity .18s ease-out,box-shadow .22s ease;transform-origin:center center}
  .motion-carousel > *:focus-within{--motion-scale:1!important;--motion-y:0px!important;--motion-opacity:1!important}
  .motion-carousel > *:active{--motion-scale:.975!important}
  .app-view[data-view="odkrywaj"].is-current .motion-carousel > .experience-card{animation:none}
  .motion-carousel > .experience-card:hover,.motion-carousel > .trip-card:hover,.motion-carousel > .home-action:hover{transform:translate3d(0,var(--motion-y),0) scale(var(--motion-scale))}
  .motion-carousel > .experience-card.is-swipe-focus,.motion-carousel > .trip-card.is-swipe-focus,.motion-carousel > .home-action.is-swipe-focus,.motion-carousel > .today-event.is-swipe-focus{box-shadow:0 12px 26px rgba(20,54,66,.12)}
  .motion-carousel.is-peeking > *{animation:card-peek .95s ease-in-out both}
  @keyframes card-peek{0%,100%{transform:translate3d(0,var(--motion-y),0) scale(var(--motion-scale))}48%{transform:translate3d(-32px,var(--motion-y),0) scale(var(--motion-scale))}}
}
@media(prefers-reduced-motion:reduce){
  .game-map .map-pin.is-active .pin-dot,.game-detail.city-reveal,.app-view[data-view="gra"].is-current .game-mode.mode-ready img{animation:none}
  .game-map .map-pin,.game-mode.mode-ready{transition:none}
  .app-nav button[aria-current="page"] .nav-mark,.app-nav button[aria-current="page"] .nav-symbol,.view-start.is-current .hero-sun,.view-start.is-current .hero-garda{animation:none}
  .motion-carousel > *{transition:none;transform:none!important;opacity:1!important;animation:none!important}
}

/* Tropiciele: distinct actions and a more visible card response. */
.game-mode.mode-tracker{isolation:isolate;transform-origin:center 60%;border-color:#e2cb64;transition:transform .32s cubic-bezier(.2,.85,.25,1),box-shadow .32s ease,border-color .32s ease}
.game-mode.mode-tracker:before{content:"";position:absolute;inset:-45% -70%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.52) 50%,transparent 58%);transform:translateX(-65%) rotate(-10deg);opacity:0;transition:transform .6s ease,opacity .3s ease}
.game-mode.mode-tracker .mode-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;margin-top:auto;position:relative;z-index:1}
.game-mode.mode-tracker .mode-action{min-height:47px;margin:0;padding:9px 11px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:9px;text-decoration:none;font:800 12px/1.2 'Plus Jakarta Sans',sans-serif;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;color:var(--ink)}
.game-mode.mode-tracker .mode-action-primary{background:var(--ink);border:2px solid var(--ink);color:#fff}
.game-mode.mode-tracker .mode-action-paper{background:#fff;border:2px solid var(--ink)}
.game-mode.mode-tracker .mode-action:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.game-mode.mode-tracker .mode-action:active{transform:scale(.95)}
@keyframes game-mark-jump{0%{transform:translateY(0) rotate(-3deg) scale(1)}45%{transform:translateY(-13px) rotate(12deg) scale(1.15)}100%{transform:translateY(-7px) rotate(4deg) scale(1.09)}}
@media(hover:hover){
  .game-mode.mode-tracker:hover,.game-mode.mode-tracker:focus-within{transform:translateY(-10px) scale(1.025);box-shadow:0 23px 42px rgba(20,54,66,.23);border-color:#d3ae16}
  .game-mode.mode-tracker:hover:before,.game-mode.mode-tracker:focus-within:before{transform:translateX(70%) rotate(-10deg);opacity:1}
  .app-view[data-view="gra"].is-current .game-mode.mode-tracker:hover img,.app-view[data-view="gra"].is-current .game-mode.mode-tracker:focus-within img{animation:game-mark-jump .65s cubic-bezier(.2,.8,.2,1) both}
  .game-mode.mode-tracker .mode-action:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,54,66,.22)}
  .game-mode.mode-tracker .mode-action-primary:hover{background:#244b58}
}
@media(max-width:650px){
  .game-mode.mode-tracker .mode-actions{grid-template-columns:1fr;gap:8px}
  .game-mode.mode-tracker .mode-action{min-height:44px;font-size:13px}
  .motion-carousel > .game-mode.mode-tracker.is-swipe-focus{transform:translate3d(0,-7px,0) scale(1.025);box-shadow:0 16px 32px rgba(20,54,66,.22);border-color:#d3ae16}
  .motion-carousel > .game-mode.mode-tracker.is-touching{transform:translate3d(0,-1px,0) scale(.975);box-shadow:0 6px 15px rgba(20,54,66,.17)}
  .app-view[data-view="gra"].is-current .game-mode.mode-tracker.is-swipe-focus img{animation:game-mark-jump .65s cubic-bezier(.2,.8,.2,1) both}
}
@media(prefers-reduced-motion:reduce){
  .game-mode.mode-tracker,.game-mode.mode-tracker .mode-action,.game-mode.mode-tracker:before{transition:none}
  .game-mode.mode-tracker:hover,.game-mode.mode-tracker:focus-within,.motion-carousel > .game-mode.mode-tracker.is-swipe-focus,.motion-carousel > .game-mode.mode-tracker.is-touching{transform:none;scale:1}
  .game-mode.mode-tracker:before{display:none}
  .app-view[data-view="gra"].is-current .game-mode.mode-tracker:hover img,.app-view[data-view="gra"].is-current .game-mode.mode-tracker:focus-within img,.app-view[data-view="gra"].is-current .game-mode.mode-tracker.is-swipe-focus img{animation:none}
}

/* Keep the desktop destinations grouped at the center of the bar. */
.app-nav{gap:8px}
.app-nav button{width:115px;flex:0 0 115px}
@media(max-width:650px){.app-nav{gap:0;justify-content:space-around}.app-nav button{width:20%;flex:0 0 20%;font-size:12px}}
@media(max-width:370px){.app-nav button{font-size:11px}}
