/* One navigation and footer for the homepage and every CMS page. */
.sitenav {position: relative; z-index: 100;}
/* The theme makes every <header> sticky at z-index 100, so page title blocks slid over the fixed navigation. Keep them in normal flow beneath it. */
.forever-auth-page header:not(.sitenav), .forever-shared-page header:not(.sitenav) {position: relative; top: auto; z-index: auto;}
.forever-auth-page .footer-wrapper, .forever-shared-page .footer-wrapper {position: relative; background-color: transparent; color: #fff; font: 14.4px/1.5 "Open Sans", Arial, Helvetica, sans-serif;}
.forever-auth-page .footer-wrapper blz-social-section, .forever-shared-page .footer-wrapper blz-social-section {color: #fff; font-size: 14.4px;}
.forever-auth-page .footer-wrapper h2, .forever-shared-page .footer-wrapper h2 {margin: .83em 0; color: #fcedcf; font-weight: 700;}
.forever-auth-page .body > .page, .forever-shared-page .body > .page {display: flex; flex-direction: column; min-height: 100vh;}
.forever-auth-page .body > .page > main, .forever-shared-page .body > .page > main {flex: 1 0 auto;}

/* Shared account dropdown and user/settings/logout icons. */
#forever-header-account {flex: 0 0 auto;}
#forever-header-logout::part(text),
#forever-header-logout::part(icon),
#forever-header-logout::part(nav-link-content) {color: #ff5c62 !important;}
#forever-header-logout::part(icon) {opacity: 1;}
/* Keep the single play button centered beneath the masthead logo and text. */
.section.masthead blz-button-group[slot=cta]{display:flex;justify-content:center;align-items:center;width:100%;margin-inline:auto}

/* Use a black radial glow behind the homepage masthead content. */
.section.masthead blz-masthead::part(main-content){background-image:radial-gradient(rgba(0,0,0,.8) 0%,transparent 70%,transparent 100%)!important;filter:drop-shadow(0 0 .75rem #000)!important}

/* Give the homepage play action more visual weight. */
.section.masthead blz-button-group[slot=cta] blz-button{min-width:220px;font-size:22px}
.section.masthead blz-button-group[slot=cta] blz-button::part(button){min-height:64px;padding:16px 40px}
.section.masthead blz-icon-group[slot=cta]{display:none}

/* Discord community invitation. */
.forever-discord-community{position:relative;z-index:1;max-width:1200px;margin:24px auto 56px;padding:0 32px;box-sizing:border-box}
.forever-discord-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 36px;position:relative;overflow:hidden;color:#ebedf2eb!important;background:radial-gradient(circle at 12%,#5865f22e 0%,#5865f200 45%),linear-gradient(135deg,#121420f5 0%,#0c0e16f5 100%);border:1px solid #5865f238;border-radius:3px;box-shadow:0 6px 20px #00000073,inset 0 1px #ffffff0a;text-decoration:none!important;transition:box-shadow .3s,border-color .3s}
.forever-discord-main{display:flex;align-items:center;gap:28px;position:relative;z-index:2}
.forever-discord-icon{display:flex;align-items:center;justify-content:center;flex:0 0 78px;height:78px;border-radius:6px;background:linear-gradient(135deg,#5865f2,#4752c4);box-shadow:0 8px 24px #5865f273,inset 0 1px #ffffff2e;transition:transform .35s,box-shadow .3s}
.forever-discord-icon img{width:46px;height:46px;filter:brightness(0) invert(1) drop-shadow(0 2px 4px #0000004d)}
.forever-discord-copy{font:500 20px/28px Arial,Helvetica,sans-serif;text-transform:uppercase}
.forever-discord-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:#7983f5;font:700 13px/20px Arial,Helvetica,sans-serif;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:2;padding-left:16px}
.forever-discord-cta svg{transition:transform .3s}
.forever-discord-border{position:absolute;inset:0;border-radius:3px;padding:1px;pointer-events:none;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;background:conic-gradient(from 180deg,#5865f200 0deg,#5865f28c 90deg,#7983f5d9 180deg,#5865f28c 270deg,#5865f200 360deg)}
.forever-discord-banner:hover{border-color:#5865f266;box-shadow:0 10px 28px #0000008c,0 0 32px #5865f22e,inset 0 1px #ffffff0f}
.forever-discord-banner:hover .forever-discord-icon{transform:translateY(-2px) rotate(-4deg)}
.forever-discord-banner:hover .forever-discord-cta{color:#fff}
.forever-discord-banner:hover .forever-discord-cta svg{transform:translateX(6px)}
.forever-discord-banner:focus-visible{outline:2px solid #7983f5;outline-offset:3px}
@media(max-width:700px){.forever-discord-community{padding:0 18px;margin:-200px auto 64px}.forever-discord-banner{flex-direction:column;text-align:center;padding:16px;gap:10px}.forever-discord-main{flex-direction:column;gap:10px}.forever-discord-icon{flex:0 0 auto;width:44px;height:44px}.forever-discord-icon img{width:26px;height:26px}.forever-discord-copy{font-size:14px;line-height:20px}.forever-discord-cta{padding-left:0;font-size:12px}}

/* The FAQ sits in the comparison group, whose top padding was made for the removed collection section. Below 700px a 40px gap keeps its title out of the shadow at the top of the group. */
@media(max-width:700px){.section-group.comparison{padding-top:40px!important}}
/* The carousel keeps every tab in one row, so the section was as tall as the tallest tab. The tabs that are not selected
   collapse at every width, and the section fits the selected tab. */
.section.features blz-carousel-beta [slot=slide].carousel-slide--inactive{height:0!important;overflow:hidden!important}
/* Touch browsers paint a blue highlight over whatever is tapped. The site has its own states, so it is turned off everywhere. */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}

/* The home "Ver todo" button needs room above the features section, which overlaps the bottom 140px of its group. */
.section.news .fn-news-home-more{padding-bottom:110px}

/* The FAQ paints above the background layers of its group, so its title is never covered by them. */
.section.forever-faq{position:relative;z-index:1}
@media(min-width:960px){.section.news .fn-news-home-more{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){.forever-discord-banner,.forever-discord-icon,.forever-discord-cta svg{transition:none}}
/* Equal spacing above and below the footer social icons. */
.footer-wrapper blz-social-section { padding: 40px; }
.footer-wrapper blz-social-section blz-icon-group[slot="icons"] { margin-top: 15px !important; }

/* The masthead logo link is exactly as large as the logo, so its hover and click area matches it. */
/* Outside margin keeps breathing room around the desktop logo without enlarging its hover area. */
#blz-nav-wow-site-image-logo {padding-left:0;margin:0 18px;}
#blz-nav-wow-site-image-logo::part(icon),
#blz-nav-wow-site-icon::part(icon) {margin-right:0;}
#blz-nav-wow-site-icon::part(nav-link-content),
#blz-nav-wow-site-image-logo::part(nav-link-content) {padding:0;}
/* Smaller logos: the desktop masthead logo and the home hero. The mobile header icon keeps its size. */
#blz-nav-wow-site-image-logo::part(icon) {width:69px !important;height:69px !important;}
blz-image[slot="logo"] {width:262px !important;height:auto !important;}
/* On mobile the Play now button sits a little lower, so it does not crowd the text above it. */
@media (max-width: 600px) { blz-button-group[slot="cta"] {margin-top:24px !important;} }
/* On mobile the menu button is 56 px wide, so the account button matches it and the logo sits in the middle of the screen. */
@media (max-width: 959.98px) { #forever-header-guest {width:56px !important;min-width:56px !important;} }
/* Header over the artwork: the same brown as the login pages, with the translucency kept. */
.sitenav blz-nav{--navbar-background-color:rgba(46,30,22,0.8);}
/* On mobile the header is opaque; the translucent brown is only for the desktop header over the artwork. */
@media (max-width: 959.98px) { .sitenav blz-nav{--navbar-background-color:#2e1e16;} }
/* Log in and Register match the reference buttons: dark brown and red, white border and bold text in sentence case. */
#forever-header-login::part(nav-link-content){background:#1a120d;border:1px solid #fff;border-radius:4px;transition:background-color .2s ease,transform .2s ease;}
#forever-header-register::part(nav-link-content){background:#b5260f;border:1px solid #fff;border-radius:4px;transition:background-color .2s ease,transform .2s ease;}
/* Hover: the background lightens and the button lifts slightly. */
#forever-header-login:hover::part(nav-link-content){background:#3a2a20;transform:translateY(-1px);}
#forever-header-register:hover::part(nav-link-content){background:#d63a1d;transform:translateY(-1px);}
#forever-header-login::part(text),#forever-header-register::part(text){color:#fff;font-weight:700;text-transform:none;}
/* Mobile (below the navbar's 960px breakpoint): Log in and Register live in the user menu, and the menu is hidden on desktop. */
@media (max-width: 959.98px) { #forever-header-login, #forever-header-register { display: none !important; } }
@media (min-width: 960px) { #forever-header-guest { display: none !important; } }
/* The mobile user menu uses the same Log in and Register buttons as the desktop header. */
#forever-header-guest-login::part(nav-link-content){background:#1a120d;border:1px solid #fff;border-radius:4px;transition:background-color .2s ease,transform .2s ease;}
#forever-header-guest-register::part(nav-link-content){background:#b5260f;border:1px solid #fff;border-radius:4px;transition:background-color .2s ease,transform .2s ease;}
#forever-header-guest-login:hover::part(nav-link-content){background:#3a2a20;transform:translateY(-1px);}
#forever-header-guest-register:hover::part(nav-link-content){background:#d63a1d;transform:translateY(-1px);}
#forever-header-guest-login::part(text),#forever-header-guest-register::part(text){color:#fff;font-weight:700;text-transform:none;}
/* Both buttons share one width, with a gap between them. */
#forever-header-guest-login,#forever-header-guest-register{display:block;width:100%;}
#forever-header-guest-login{margin-bottom:10px;}
#forever-header-guest-login::part(nav-link-content),#forever-header-guest-register::part(nav-link-content){box-sizing:border-box;width:100%;}

/* Home "Juega ahora" button: garnet background with the texture kept, yellow border and yellow text. */
blz-button[href$="/play"] {background-color:#7b1020;border:2px solid #f7b90a;color:#f7b90a;}
blz-button[href$="/play"]::part(content) {color:#f7b90a;}

/* On mobile the home Play button fits its text instead of stretching across the masthead. */
@media (max-width: 959.98px) { blz-button[href$="/play"] {width:auto;min-width:0;} }