/* BananaGo · mobile / arcade — scoped presentation overrides. */
.app { padding-bottom:0; }
.app > main { height:100dvh; overflow-y:auto; overflow-x:hidden; scroll-padding-bottom:16px; padding-bottom:env(safe-area-inset-bottom); }
.app .home-header { align-items:center; gap:8px; }
.app .home-logo { width:min(58%,240px); min-width:0; }
.app .home-actions { flex-shrink:0; gap:6px; }
.app .round-action { width:42px; height:42px; border-radius:14px; }
.app .home-offline { min-height:60px; margin:10px 0 8px; padding:10px 14px; border-radius:17px; box-shadow:0 5px 12px #073b4920; }
.app .home-offline strong { font-size:17px; }
.app .home-hero { grid-template-columns:minmax(0,1fr) 35%; align-items:center; margin-top:0; gap:4px; }
.app .hero-copy { padding-top:0; }
.app .hero-copy h1 { font-size:clamp(28px,7.7vw,37px); line-height:1.02; letter-spacing:-1.5px; }
.app .hero-subtitle { font-size:12px; margin-top:8px; max-width:230px; }
.app .greeting { font-size:13px; }
.app .mascot-stage { height:184px; }
.app .mascot { width:136px; max-width:115%; right:0; }
.app .mascot--night { top:auto; bottom:0; right:8px; transform:scaleX(1.15); }
.app .sun-route { width:100%; margin:3px 0 8px; padding:6px 12px; border-radius:14px; }
.app .sun-route__curve { height:58px; }
.app .sun-route__marker { transform:scale(.75); }
.app .sun-route p { margin:3px 0 0; }
.app .banana-access-home-card { width:100%; margin:10px 0; padding:9px 10px; gap:8px; grid-template-columns:32px minmax(0,1fr) auto; border-radius:16px; box-shadow:none; }
.app .banana-access-home-card__icon { width:32px; height:36px; font-size:21px; border-radius:10px; }
.app .banana-access-home-card__copy > strong { font-size:12px; }
.app .banana-access-home-card__copy > small { font-size:10px; line-height:1.3; }
.app .banana-access-home-card > button { grid-column:auto; max-width:86px; min-height:40px; padding:0 8px; box-shadow:none; }
.app .universe-grid { gap:10px 8px; }
.app .universes__title--home { margin:12px auto; }
.app .universe img { width:clamp(76px,22vw,104px); height:clamp(76px,22vw,104px); }
.app .universe { scroll-margin-bottom:100px; }
.app .banana-defis-home { padding:12px 16px 20px; }
.app .banana-defis-cta { position:relative; display:flex; gap:12px; align-items:center; padding:12px; border-radius:22px; color:#07364f; background:linear-gradient(120deg,#fff6b8,#ffdb54); box-shadow:0 6px 16px #07364f18; overflow:hidden; }
.app .banana-defis-cta__mascot { flex:0 0 62px; }
.app .banana-defis-cta__mascot img { display:block; width:62px; height:86px; object-fit:contain; }
.app .banana-defis-cta__copy { display:grid; gap:5px; }
.app .banana-defis-cta__copy small { font-size:9px; font-weight:bold; letter-spacing:.5px; }
.app .banana-defis-cta__copy strong { font-size:20px; }
.app .banana-defis-cta__copy > span { font-size:12px; }
.app .banana-defis-cta__arrow { margin-left:auto; font-size:30px; }
.app[data-theme="night"] .banana-defis-cta { color:#fff; background:linear-gradient(120deg,#163653,#3b2864); border:1px solid #ffe16a60; }
.app .bottom-nav { display:none; }
.app .nav-banana { width:49px; height:49px; margin-top:0; border-width:3px; box-shadow:0 3px 0 #df9700; }
.app .bottom-nav .nav-item > small { font-size:10px; margin-top:4px; }
.app .bottom-nav .nav-item > span { font-size:20px!important; }

/* Exploration: a slim tropical rim leaves the whole map usable. */
.map-app:not([data-navigation="active"]) .map-topbar { gap:6px; flex-wrap:wrap; justify-content:flex-start; padding:8px 10px 4px; }
.map-app .map-topbar .topbar-button { flex:0 0 42px; width:42px; height:42px; }
.map-app .map-topbar .gps-test-toggle { flex:1 1 88px; min-width:0; padding:6px; min-height:42px; }
.map-app:not([data-navigation="active"]) .map-stage { margin:6px 10px 0; }
.map-app:not([data-navigation="active"]) .map-frame { width:100%; max-width:none; height:max(390px,calc(100dvh - 224px)); aspect-ratio:auto; overflow:hidden; border:3px solid #ffce36; border-radius:22px; box-shadow:0 8px 22px #082a3f35; background:#ffce36; }
.map-app:not([data-navigation="active"]) .map-frame-overlay { opacity:.85; }
.map-app:not([data-navigation="active"]) .map-viewport { z-index:651; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); border-radius:15px; }
.map-app:not([data-navigation="active"]) #map { inset:0; width:100%; height:100%; }
.map-app:not([data-navigation="active"]) .map-location-fab { z-index:700; top:18px; right:18px; width:44px; height:44px; }
.map-app .map-filter { min-width:74px; border-radius:17px; }
.map-app[data-theme="night"] .map-frame { border-color:#d9b349; }

/* Navigation HUD: full instruction width; controls have their own row. */
.map-app .navigation-panel { top:max(12px,env(safe-area-inset-top)); left:50%; width:min(calc(100vw - 24px),476px); max-width:none; padding:10px; border:2px solid #ffda42; border-radius:16px; background:#063a4e; box-shadow:0 3px 0 #f15c8b,0 8px 20px #041b3d40; animation:none; }
.map-app .navigation-panel::before { content:none!important; }
.map-app[data-theme="night"][data-navigation="active"] .navigation-panel { background:#151536; box-shadow:0 3px 0 #ed55bc,0 7px 22px #00e9e626; animation:none; }
.map-app .navigation-panel__main { grid-template-columns:52px minmax(0,1fr); padding-right:0; gap:10px; min-height:56px; }
.map-app .navigation-panel__arrow { width:50px; height:50px; font-size:34px; border:0; border-radius:9px; box-shadow:2px 2px 0 #eb5b88; }
.map-app .navigation-panel__instruction strong { font-family:inherit; font-size:18px; line-height:1.15; white-space:normal; overflow-wrap:anywhere; }
.map-app .navigation-panel__instruction small { font-size:11px; }
.map-app .navigation-panel__instruction span { font-size:11px; }
.map-app .navigation-panel__summary { min-height:48px; margin-top:8px; padding:7px 176px 0 0; border-top:1px solid #ffffff30; gap:9px; align-items:center; }
.map-app .navigation-panel__summary strong { font-size:13px; white-space:nowrap; }
.map-app .navigation-panel__summary small { font-size:8px; }
.map-app .navigation-panel__close,.map-app .navigation-panel__voice,.map-app .navigation-panel__theme,.map-app .navigation-panel__vision { top:auto; bottom:8px; width:40px; height:40px; border:1px solid #ffffff55; border-radius:10px; box-shadow:none; background:#ffffff10; }
.map-app .navigation-panel__close { right:8px; }
.map-app .navigation-panel__voice { right:52px; }
.map-app .navigation-panel__theme { right:96px; }
.map-app .navigation-panel__vision { right:140px; }
.map-app .navigation-panel__test { position:absolute; top:calc(100% + 10px); right:0; min-height:44px; margin:0; padding:8px 14px; border-radius:12px; }
.map-app .navigation-vision-menu { top:calc(100% + 8px); right:0; max-width:100%; z-index:30; }
.map-app[data-navigation="active"] .navigation-view-toggle { top:auto; bottom:max(18px,env(safe-area-inset-bottom)); left:14px; width:48px; min-height:48px; border-radius:12px; box-shadow:0 3px 0 #ef4275; }
.map-app[data-navigation="active"] .navigation-rotate-buttons { top:auto; bottom:max(78px,calc(env(safe-area-inset-bottom) + 60px)); left:14px; }
.map-app .navigation-3d-user,.map-app[data-theme="night"] .navigation-3d-user { width:clamp(64px,17vw,82px); }
.map-app .navigation-3d-car-turn { bottom:calc(100% + 10px); min-width:44px; padding:4px; border-width:2px; box-shadow:0 3px 0 #ef4275; }
.map-app .navigation-3d-car-turn strong { font-size:23px; }
.map-app[data-theme="night"][data-navigation="active"][data-navigation-view="3d"] .navigation-3d-map::before,
.map-app[data-theme="night"][data-navigation="active"][data-navigation-view="3d"] .navigation-3d-map::after { content:none; animation:none; }
.map-app .navigation-3d-destination-marker { filter:drop-shadow(0 3px 2px #081c3655); }
.map-app .navigation-panel[data-state="offroute"] { background:#713029; border-color:#ffbe72; }
.map-app .navigation-panel[data-state="recalculating"] { background:#12584e; }
.map-app[data-vision="contrast"] .navigation-panel { background:#080808; color:#fff; }
@media(max-width:350px) {
  .app .hero-copy h1 { font-size:26px; }
  .app .mascot-stage { height:160px; }
  .app .banana-access-home-card { grid-template-columns:minmax(0,1fr) auto; }
  .app .banana-access-home-card__icon { display:none; }
  .map-app .navigation-panel { padding:8px; }
  .map-app .navigation-panel__summary { padding-right:171px; gap:6px; }
  .map-app .navigation-panel__summary strong { font-size:11px; }
  .map-app .navigation-panel__instruction strong { font-size:16px; }
}
@media(min-width:501px) { .app .bottom-nav { bottom:0; } }
@media(min-width:700px) { .app > main { height:calc(100dvh - 44px); } }
@media(max-height:500px) and (orientation:landscape) {
  .map-app .navigation-panel { left:12px; transform:none; width:310px; }
  .map-app .navigation-3d-user { width:58px; }
}

.app .home-day{position:relative;z-index:8;display:flex;align-items:center;gap:10px;padding:14px;margin:10px 0;border-radius:19px;color:#fff;background:linear-gradient(115deg,#8052b8,#b03e85);box-shadow:0 4px 0 #5b347e}.home-day>span{font-size:24px}.home-day>div{flex:1}.home-day strong{display:block;font-size:19px}.home-day small{display:block;font-size:11px;margin-top:4px;line-height:1.4}