/* The three large Home actions lead into a shared five-destination dock. */
.app-shell>.bottom-nav{display:none}
.app-shell:not(.home-mode)>#champion-nav.image-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto;flex-shrink:0;gap:0;padding:0 0 env(safe-area-inset-bottom,0px);margin:0;border:0;background:#102344;box-shadow:none;isolation:isolate;z-index:4}
.app-shell.home-mode>#champion-nav{display:none}
#champion-nav.image-navigation>button.active:after{content:'';position:absolute;bottom:4px;left:35%;right:35%;height:3px;background:#f2fcff;border-radius:3px;box-shadow:0 0 5px #b9eaff;pointer-events:none}
.shop-view{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7592b8 transparent;padding-bottom:18px}
.shop-view #trail-shop{padding:15px 12px;border:1px solid #5e7faa;border-radius:14px;background:linear-gradient(145deg,#294b78,#142d50);box-shadow:inset 0 1px #bdd8ed33,0 3px #08152b}
.shop-view .trail-shop-heading h2{font:26px 'Lilita One',sans-serif;color:#fff0c6;text-shadow:0 2px #101e38;margin:7px 0}
.shop-view .trail-shop-heading p,.shop-view .menu-fineprint{color:#b5cdeb;line-height:1.6}
.shop-view .menu-fineprint{font-size:9px;text-align:center;margin:16px 0 0}
.shop-view .shop-category-tabs{top:0;background:#122c50f5}
.shop-view .shop-done{margin-bottom:3px}
@media(max-height:640px){.app-shell:not(.home-mode)>#champion-nav.image-navigation{max-height:62px}#champion-nav.image-navigation>.navigation-art{max-height:62px;object-fit:fill}}
/* Dock overlay, laid over the bar art in its own pixel coordinates (2133×343).
   The art's painted Profile glow is covered by a plain cell that shows the player's picture,
   and a gold highlight follows the screen that is actually open. */
#champion-nav.image-navigation{container-type:inline-size}
#champion-nav.image-navigation>.dock-layer{grid-area:1 / 1 / 2 / 6;position:relative;pointer-events:none;z-index:1}
#champion-nav.image-navigation>button{z-index:2}
#champion-nav.image-navigation>button.active:after{display:none}
.dock-profile{position:absolute;left:58.6%;width:20.72%;top:4.66%;height:90.7%;background:linear-gradient(180deg,#0e388a,#0c3276 3%,#0b2c68 9%,#08265c 30%,#062255 85%,#06265e 100%)}
.dock-profile:before{content:'';position:absolute;left:4.98%;right:5.43%;top:9.3%;bottom:11.6%;border-radius:8% / 13%;background:linear-gradient(180deg,#3d85e8 0,#17499f 6%,#123d87 20%,#0d2d68 50%,#0a2a62 85%,#0e499c 96%,#114b95 100%);box-shadow:0 0 0 .14cqw #031536,inset 0 0 0 .1cqw #194ea1}
.dock-profile-art{position:absolute;left:50%;top:10%;width:9.6cqw;height:9.6cqw;transform:translateX(-50%);filter:drop-shadow(0 .15cqw 0 #031536)}

.dock-profile b{position:absolute;left:0;right:0;top:63%;text-align:center;font:400 2.95cqw/1 'Lilita One',sans-serif;letter-spacing:.06cqw;color:#f2f7ff;-webkit-text-stroke:.28cqw #0a1838;paint-order:stroke fill;text-shadow:0 .2cqw 0 #0a1838}
.dock-highlight{position:absolute;top:13.1%;height:72%;border-radius:8% / 13%;border:.22cqw solid #ffd76a;background:#ffb4241f;box-shadow:0 0 1.2cqw #ffb21e,inset 0 0 1cqw #ffb21e66;opacity:0;transition:left .2s ease,width .2s ease,opacity .2s ease;z-index:1}
#champion-nav[data-route=shop] .dock-highlight{left:1.69%;width:18.85%;opacity:1}
#champion-nav[data-route=fighters] .dock-highlight{left:21.61%;width:18.57%;opacity:1}
#champion-nav[data-route=arena] .dock-highlight{left:41.16%;width:17.44%;opacity:1}
#champion-nav[data-route=profile] .dock-highlight{left:59.63%;width:18.57%;opacity:1}
#champion-nav[data-route=rewards] .dock-highlight{left:79.32%;width:18.94%;opacity:1}
.reduce-motion .dock-highlight{transition:none}
/* One shared top bar on every inner screen: Shop and Profile use it too instead of their own mastheads. */
.app-shell.shop-mode>.topbar,.app-shell.profile-mode>.topbar{display:flex;position:relative;z-index:2;background:linear-gradient(180deg,#14284fee,#0e1f42e6)}
.shop-mode .shop-masthead{display:none}
.profile-mode #profile-content{padding-top:10px}

/* ===== Bottom bar v2 (owner art, all tabs unselected). Positions are % of the 1957x293 art. ===== */
.app-shell:not(.home-mode)>#champion-nav.image-navigation{grid-template-columns:23.3% 17.9% 17.4% 18.1% 23.3%;overflow:visible;background:#0a1430}
#champion-nav.image-navigation>.dock-layer{overflow:visible}
/* Selected tab: gold frame with a warm glow and a crown on top, sliding between tabs. */
.dock-highlight{top:10.6%;height:78.5%;border-radius:13% / 17%;border:.55cqw solid #ffd76a;background:radial-gradient(ellipse at 50% 35%,#ffd25a40,#ffb42418 60%,transparent);box-shadow:0 0 0 .3cqw #8a5a12,0 0 2cqw #ffb21ecc,inset 0 0 1.6cqw #ffcf5a88}
.dock-crown{position:absolute;left:50%;top:-4.6cqw;width:6.4cqw;height:5.1cqw;transform:translateX(-50%);filter:drop-shadow(0 .3cqw 0 #6b3508) drop-shadow(0 .4cqw .6cqw #0009)}
#champion-nav[data-route=shop] .dock-highlight{left:5.52%;width:17.27%}
#champion-nav[data-route=fighters] .dock-highlight{left:23.76%;width:17.02%}
#champion-nav[data-route=arena] .dock-highlight{left:41.70%;width:16.45%}
#champion-nav[data-route=profile] .dock-highlight{left:59.07%;width:17.07%}
#champion-nav[data-route=rewards] .dock-highlight{left:77.16%;width:17.27%}
/* Profile tab: the player's own picture sits on the tile (the bar art's placeholder ball was painted out); the painted label stays. */
.dock-profile{left:63.87%;width:7.66%;top:17%;height:45%}
.dock-profile:before,.dock-profile b{display:none}
.dock-profile-art{left:50%;top:44%;width:8.2cqw;height:8.2cqw;transform:translate(-50%,-50%)}