/* Update 8.14: the main menu - six wide banners stacked on the left (the user's pictures, assets/menu/home), the logo at the top right, over the menus' moving backdrop. */
.alpha-panel.home-panel{background:none}
.hm8{position:absolute;inset:0;overflow:hidden}
.hm8>.brand-mark.big{position:absolute;top:clamp(16px,3.4vh,42px);right:clamp(18px,2.8vw,64px);margin:0;z-index:2;filter:drop-shadow(0 4px 18px #000a)}
.hm8 .brand-mark.big .bm-icon{width:clamp(66px,6.2vw,124px);height:clamp(66px,6.2vw,124px)}
.hm8 .brand-mark.big .bm-text>b{font-size:clamp(35px,3.8vw,74px)}
.hm8 .brand-mark.big .bm-text>span{font-size:clamp(18px,1.9vw,38px)}
.hm8 .brand-mark.big .bm-text small{font-size:clamp(8px,.62vw,12px);letter-spacing:.27em}
/* the banners share the height of the screen: each one 5.18 times as wide as it is tall (the picture's own shape) */
.hm8-list{--gap:.6vh;--bh:calc((100vh - 6vh - 5*var(--gap))/6);--bw:min(56vw,calc(var(--bh)*5.18));position:absolute;left:clamp(10px,2vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--gap);width:var(--bw)}
.hm8-banner{position:relative;display:block;width:100%;aspect-ratio:2508/484;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;cursor:pointer;transition:transform .16s ease,filter .16s ease;-webkit-tap-highlight-color:transparent}
.hm8-img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* the title, on the blank band between the icon and the scene */
.hm8-title{position:absolute;left:21.5%;top:50%;transform:translateY(-52%);width:28%;display:flex;flex-direction:column;justify-content:center;gap:.04em;font:italic 900 calc(var(--k,4.2)*var(--bw)/100)/.96 "Arial Black","Segoe UI Black",Arial,sans-serif;letter-spacing:.012em;text-transform:uppercase;color:#fff;text-shadow:0 .08em 0 #0006,0 0 .45em #0007;white-space:nowrap;pointer-events:none}
.hm8-banner:hover,.hm8-banner:focus-visible{transform:translateX(1.3%) scale(1.025);filter:brightness(1.13) drop-shadow(0 0 .9vw #fff9);outline:none;z-index:1}
.hm8-banner:active{transform:translateX(.9%) scale(1.01)}
@media(max-width:760px){.hm8-list{width:92vw;--bw:92vw;--bh:auto;top:auto;bottom:2vh;transform:none;overflow:auto;max-height:78vh}}
/* (the generic .hm-tile card look of menu72.css - frame, rounded corners, dark fill, lime focus ring - is not wanted on a banner: the picture is its own button) */
.hm8 .hm8-banner.hm-tile,.hm8 .hm8-banner.hm-tile:is(:hover,:focus-visible,:active){overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;outline:none;container-type:normal}
.hm8 .hm8-banner.hm-tile:is(:hover,:focus-visible){transform:translateX(1.3%) scale(1.025);filter:brightness(1.13) drop-shadow(0 0 .9vw #fff9)}
.hm8 .hm8-banner.hm-tile:active{transform:translateX(.9%) scale(1.01)}
/* the big logo is at the top right: the small one of the header goes */
body[data-screen=MENU] #game>header .brand{display:none}