/* PROBEGOK V29 — UI Fix & Polish
   Fixes: stable bottom navigation, garage control overflow, larger roll hero art,
   responsive reveal typography and reliable profile/garage controls. */

:root{--nav-h:76px}

/* 1/6 + 6/6: clickable controls must always sit above decorative layers. */
#garage .section-head,.menu-grid,.service-grid{position:relative;z-index:4}
#garage .section-head .icon-btn,.menu-grid button,.service-grid button{pointer-events:auto!important;touch-action:manipulation;isolation:isolate}
#garageSettingsBtn{position:relative;z-index:6;flex:0 0 42px}

/* 2/6: never let garage controls leak outside their card/sheet. */
.car-card,.car-card .cardbody,.car-card .card-actions{min-width:0!important;max-width:100%!important}
.car-card .card-actions{width:100%!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;overflow:hidden!important}
.car-card .card-actions button{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:4px!important;padding-right:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.garage-card-flags{right:6px!important;max-width:calc(100% - 12px)!important;display:flex!important;justify-content:flex-end!important}
.garage-card-flags button{flex:0 0 27px!important;min-width:27px!important;max-width:27px!important;padding:0!important}
.garage-detail-quick{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%!important;overflow:hidden!important}
.garage-detail-quick button{min-width:0!important;max-width:100%!important;width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;padding-inline:6px!important;font-size:clamp(9px,2.8vw,12px)!important}
.garage-detail-actions{min-width:0!important;max-width:100%!important}
.garage-detail-actions button{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* 3/6: one invariant bottom navigation geometry on every tab. Do not animate the
   whole fixed element: transformed fixed bars are unstable in some Telegram WebViews. */
.app-shell{padding-bottom:calc(var(--nav-h) + max(12px,env(safe-area-inset-bottom)) + 14px)!important;transform:none!important}
.content{padding-bottom:calc(var(--nav-h) + max(12px,env(safe-area-inset-bottom)) + 16px)!important}
.bottom-nav.premium-nav{
  position:fixed!important;
  z-index:100!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  width:min(100%,720px)!important;
  height:calc(var(--nav-h) + max(10px,env(safe-area-inset-bottom)))!important;
  min-height:calc(var(--nav-h) + max(10px,env(safe-area-inset-bottom)))!important;
  padding:8px 8px max(10px,env(safe-area-inset-bottom))!important;
  transform:translate3d(-50%,0,0)!important;
  animation:none!important;
  opacity:1!important;
  margin:0!important;
  overflow:visible!important;
  backface-visibility:hidden;
}
.bottom-nav.premium-nav>button{min-width:0!important;min-height:54px!important;margin:0!important;padding:0 2px!important;transform-origin:center bottom}
body.on-roll-tab .bottom-nav.premium-nav{bottom:0!important;transform:translate3d(-50%,0,0)!important}

/* 4/6: final car in the roll result is a hero, not a thumbnail. */
#rollStage.hero-card{min-height:430px!important}
#rollStage .empty-hero{height:430px!important;min-height:430px!important}
#rollStage .car-hero{min-height:430px!important;padding-top:13px!important;padding-bottom:108px!important}
#rollStage .hero-car-stage{height:232px!important;margin-top:-3px!important;margin-left:-8px!important;margin-right:-8px!important}
#rollStage .hero-image{width:108%!important;max-width:none!important;max-height:232px!important;object-fit:contain!important}
#rollStage .v11-brand-stack{min-width:112px!important;max-width:124px!important;align-items:flex-end!important}
#rollStage .v11-brand-stack .hero-brand-logo,#rollStage .hero-brand-logo{width:auto!important;max-width:116px!important;height:66px!important;max-height:66px!important;object-fit:contain!important;opacity:1!important}
#rollStage .v11-hero-top{gap:12px!important}
#rollStage .v11-hero-top>div:first-child{min-width:0!important;flex:1 1 auto!important}

/* Reveal text must remain readable even for long country/class/rarity names. */
.reveal-card{width:min(92vw,470px)!important;min-height:420px!important;padding:26px 22px 46px!important;overflow:hidden!important}
.reveal-visual{width:100%!important;height:210px!important;min-height:210px!important;padding:5px 8px!important;overflow:hidden!important}
.reveal-logo{width:auto!important;max-width:min(86%,340px)!important;max-height:180px!important;object-fit:contain!important}
.reveal-flag{width:100%!important;height:205px!important;min-height:205px!important}
.reveal-flag-img{width:min(76vw,300px)!important;max-width:100%!important;max-height:190px!important}
.reveal-card h2{
  width:100%!important;
  max-width:100%!important;
  margin:15px 0 5px!important;
  padding:0 4px!important;
  font-size:clamp(22px,7.2vw,34px)!important;
  line-height:1.04!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
}
.reveal-wordmark,.reveal-class-word,.reveal-rarity{
  width:100%!important;
  max-width:100%!important;
  padding:0 6px!important;
  font-size:clamp(25px,8.8vw,50px)!important;
  line-height:.98!important;
  letter-spacing:-.02em!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
}
.reveal-card small{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Profile tiles must not be covered by a preceding animated layer. */
#more{position:relative!important;isolation:isolate}
#more .profile-card,#more .profile-collection-summary,#more .profile-showcase-mini{position:relative;z-index:1}
#more .group-title,#more .menu-grid{position:relative;z-index:3}
#more .menu-grid button{min-width:0!important;pointer-events:auto!important;touch-action:manipulation}

@media(max-width:430px){
  :root{--nav-h:74px}
  .bottom-nav.premium-nav{height:calc(var(--nav-h) + max(10px,env(safe-area-inset-bottom)))!important;min-height:calc(var(--nav-h) + max(10px,env(safe-area-inset-bottom)))!important}
  #rollStage.hero-card,#rollStage .empty-hero,#rollStage .car-hero{min-height:415px!important;height:auto!important}
  #rollStage .hero-car-stage{height:218px!important}
  #rollStage .hero-image{max-height:218px!important;width:112%!important}
  #rollStage .v11-brand-stack{min-width:96px!important;max-width:104px!important}
  #rollStage .v11-brand-stack .hero-brand-logo,#rollStage .hero-brand-logo{max-width:100px!important;height:58px!important;max-height:58px!important}
  .reveal-card{width:94vw!important;min-height:400px!important;padding:22px 16px 44px!important}
  .reveal-visual{height:195px!important;min-height:195px!important}
  .reveal-logo{max-width:90%!important;max-height:165px!important}
  .reveal-flag{height:190px!important;min-height:190px!important}
  .reveal-card h2{font-size:clamp(21px,7.6vw,31px)!important}
  .reveal-wordmark,.reveal-class-word,.reveal-rarity{font-size:clamp(24px,9vw,43px)!important}
}

@media(max-width:360px){
  #rollStage .v11-brand-stack{min-width:82px!important;max-width:90px!important}
  #rollStage .v11-brand-stack .hero-brand-logo,#rollStage .hero-brand-logo{max-width:88px!important;height:52px!important}
  .garage-detail-quick button{font-size:9px!important}
}

/* Referral panel added because the missing referral() handler used to break every data-open tile. */
.referral-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.referral-head small{color:#c79a34;font-size:8px;letter-spacing:.18em;font-weight:900}.referral-head h2{margin:4px 0}.referral-head p{margin:0;color:#7f8994;font-size:10px}.referral-head>b{min-width:46px;height:46px;border-radius:15px;display:grid;place-items:center;border:1px solid #735719;background:#171208;color:#ffdb67;font-size:17px}.referral-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin:11px 0}.referral-link input{min-width:0;width:100%;border:1px solid #303840;border-radius:11px;background:#0c1014;color:#cdd3da;padding:9px;font-size:9px}.referral-friends .listitem{align-items:center}