/* Bottom navigation, concept A: a slim stone rail, icons stand on it, the active one on a lit step.
   Art: /v2/art/nav-bar/. The old painted bar is only switched off, the buttons and menus are the game's own. */
@media(min-width:960px){
 html.gv-v2{--council-rail-height:116px!important}
 html.gv-v2 body #tabBar{background:linear-gradient(#07040c00,#07040cb8 34%,#07040ce6)!important}
 html.gv-v2 body #tabBar .tab-bar-inner{position:relative;display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;height:var(--council-rail-height)!important;padding:0 clamp(14px,2.6vw,40px)!important;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;overflow:visible!important}
 html.gv-v2 body #tabBar .tab-bar-inner:before{content:""!important;display:block!important;position:absolute!important;left:0;right:0;top:58px;height:24px;width:auto;box-sizing:border-box;border-style:solid;border-color:transparent;border-width:0 34px;border-image:url('/v2/art/nav-bar/rail.webp') 0 130 fill / 0 34px / 0 stretch;background:none!important;opacity:1;pointer-events:none;z-index:0}
 html.gv-v2 body #tabBar .tab-bar-inner:after{display:none!important}
 html.gv-v2 body #tabBar .tab-bar-inner .tab-divider{display:none!important}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control,html.gv-v2 body #tabBar .v2-nav-group{position:relative;display:block;width:auto;min-width:0;height:var(--council-rail-height)!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:1}
 html.gv-v2 body #tabBar .v2-nav-group>summary.gv-dock-control{height:var(--council-rail-height)!important;display:block;list-style:none;cursor:pointer}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control :is(.tab-icon-img,.gv-dock-event){display:block;position:absolute!important;left:50%;top:2px;width:60px!important;height:62px!important;margin:0 0 0 -30px!important;background-size:contain;background-position:center bottom;background-repeat:no-repeat;object-fit:contain;filter:drop-shadow(0 4px 5px #000b);transition:transform .18s ease-out,filter .18s ease-out;z-index:2}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control:hover :is(.tab-icon-img,.gv-dock-event){transform:translateY(-3px);filter:drop-shadow(0 4px 5px #000b) drop-shadow(0 0 10px #ffd98a77)}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control :is(.tab-label,summary>span:not(.nav-painted):not(.nav-reward-seal)),html.gv-v2 body #tabBar .v2-nav-group>summary>span:not(.nav-painted):not(.nav-reward-seal){position:absolute!important;left:0;right:0;top:80px;display:block;margin:0!important;padding:0 2px;font:700 clamp(11px,.92vw,15px)/1.05 var(--font-display,serif)!important;color:#f4e3c1!important;text-align:center;text-shadow:0 1px 4px #000!important;white-space:normal!important;max-width:none!important;overflow-wrap:normal}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control .arena-dock-clock{position:absolute!important;left:0;right:0;top:auto;bottom:0;margin:0!important;font:italic 700 12px/1.1 Georgia,serif!important;color:#f7c75f!important;text-align:center;background:none!important}
 /* A tab with a status line ("Gotowe", a timer): a two-line name must end above it */
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.gv-dock-control .tab-label.tab-label.tab-label,html.gv-v2 body #tabBar .v2-nav-group.v2-nav-group>summary>span.tab-label{top:74px!important;font-size:14px!important;line-height:13px!important}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control:has(.arena-dock-clock) .arena-dock-clock{bottom:1px}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.active{background:url('/v2/art/nav-bar/step.webp') center 52px/126px 25px no-repeat!important}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.active :is(.tab-icon-img,.gv-dock-event){top:-4px;filter:drop-shadow(0 0 12px #ffd98aaa) drop-shadow(0 4px 5px #000b)}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.active .tab-label{color:#ffe2a0!important}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control:is(.active,:hover){outline:0}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control:focus-visible{outline:2px solid #ffe2a0;outline-offset:-3px}
}
@media(min-width:960px) and (max-width:1365px){html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.gv-dock-control .tab-label.tab-label.tab-label,html.gv-v2 body #tabBar .v2-nav-group.v2-nav-group>summary>span.tab-label{font-size:11.5px!important;letter-spacing:0!important}
 html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control.gv-dock-control .arena-dock-clock{top:50px!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%);z-index:3;padding:1px 7px!important;border-radius:8px;background:#0b0712e0!important;box-shadow:0 0 0 1px #8a6a3f;white-space:nowrap;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){html.gv-v2 body #tabBar .tab-bar-inner .gv-dock-control :is(.tab-icon-img,.gv-dock-event){transition:none}}

html.gv-v2.gv-phone body #tabBar,html.gv-v2.gv-port-mobile body #tabBar{background:#0c0814!important;border:0!important;border-image:none!important;box-shadow:0 -8px 18px #0008!important}
html.gv-v2:is(.gv-phone,.gv-port-mobile) body #tabBar .mob-nav-bar{position:relative;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important}
html.gv-v2:is(.gv-phone,.gv-port-mobile) body #tabBar .mob-nav-bar:before{content:""!important;display:block!important;position:absolute!important;left:2px;right:2px;top:40px;height:14px;box-sizing:border-box;border-style:solid;border-color:transparent;border-width:0 16px;border-image:url('/v2/art/nav-bar/rail.webp') 0 130 fill / 0 16px / 0 stretch;background:none!important;pointer-events:none;z-index:0}
html.gv-v2:is(.gv-phone,.gv-port-mobile) body #tabBar .mob-nav-bar>*{position:relative;z-index:1;background:none!important}
html.gv-v2:is(.gv-phone,.gv-port-mobile) body #tabBar .mob-nav-bar>.active{background:url('/v2/art/nav-bar/step.webp') center 32px/62px 22px no-repeat!important}

/* Email verification: a window that pops up instead of a strip that takes a slice of every screen */
html.gv-v2 body #mainContent>.global-email-banner{position:fixed!important;left:50%;top:50%;z-index:880;box-sizing:border-box;display:block;width:min(520px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;margin:0!important;padding:46px 54px 36px!important;background:none!important;border:0!important;box-shadow:0 0 0 100vmax #05030a99!important;transform:translate(-50%,-50%);isolation:isolate;text-align:center;animation:gvEmailRise .42s cubic-bezier(.16,1,.3,1) both}
html.gv-v2 body #mainContent>.global-email-banner:before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-color:transparent;border-width:36px 24px 26px;border-image:url('/v2/art/rift-tears/window.webp') 46 30 34 fill / 36px 24px 26px / 0 stretch}
@keyframes gvEmailRise{from{opacity:0;transform:translate(-50%,-44%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%)}}
html.gv-v2 body #mainContent>.global-email-banner .global-email-content{gap:10px}
html.gv-v2 body #mainContent>.global-email-banner #globalEmailDismiss{top:18px!important;right:20px!important;width:40px;height:40px;padding:0!important;border:1px solid #d8ad62!important;border-radius:50%;background:#0b0712cc!important;color:#ffe2a0!important}
html.gv-v2 body #mainContent>.global-email-banner .global-email-title{font:700 clamp(23px,3vw,30px)/1.15 var(--font-display,serif);letter-spacing:.02em;color:#ffe2a0;text-shadow:0 0 16px #ffc14d55}
html.gv-v2 body #mainContent>.global-email-banner .global-email-reward{justify-content:center;font:italic 17px/1.3 Georgia,serif;color:#f4e8d5}
html.gv-v2 body #mainContent>.global-email-banner .global-email-btns{flex-direction:column;align-items:center;gap:10px;margin-top:8px;width:100%}
html.gv-v2 body #mainContent>.global-email-banner .global-email-btn{letter-spacing:.02em}
html.gv-v2 body #mainContent>.global-email-banner .global-email-btn-claim{box-sizing:border-box;width:min(320px,100%);min-height:60px;padding:6px 36px;border:0;border-radius:0;background:url('/v2/art/create-screen/begin-button.webp') center/100% 100% no-repeat;color:#2d1804;font:700 19px/1.05 var(--font-display,serif);animation:none}
html.gv-v2 body #mainContent>.global-email-banner .global-email-btn-resend{background:none;border:0;color:#d9c9b4;font:600 14px var(--font-body,sans-serif);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){html.gv-v2 body #mainContent>.global-email-banner{animation:none}}

/* Phone (Beraks 11.11): "Rift Haven" takes two lines and pushed its timer below the screen; the timer sits on the icon */
html.gv-v2:is(.gv-phone,.gv-port-mobile) body #tabBar .mob-nav-bar [data-city-nav] .arena-dock-clock:not([hidden]){position:absolute!important;left:50%!important;right:auto!important;top:30px!important;bottom:auto!important;transform:translateX(-50%);z-index:3;margin:0!important;padding:1px 6px!important;border-radius:8px;background:#0b0712e6!important;box-shadow:0 0 0 1px #8a6a3f;font-size:10.5px!important;line-height:1.2!important;white-space:nowrap}
