/* Dark mode for the classic shell (html.pm-dark, cookie pm_theme=dark). js/pm-dark.js darkens every stylesheet the page
   uses and the colours written in the markup on its own; this file holds the frame (page background, header, menu, the
   content and rail panels, footer, bottom bar), where images and the lime surfaces need a hand. Selectors start with
   "html.pm-dark body" so they beat the script's converted copies (html.pm-dark + the original selector). */
html.pm-dark { color-scheme: dark; }
html.pm-dark:not(z-pmd):not(z-pmd) { background: linear-gradient(rgba(5, 12, 7, 0.8), rgba(5, 12, 7, 0.8)), #0b130e url(../images/bg.jpg) left top repeat; }
html.pm-dark body { background: linear-gradient(rgba(5, 12, 7, 0.66), rgba(5, 12, 7, 0.66)), url(../images/bg_image.png) center top no-repeat; color: #dfe7dc; }

/* while a stylesheet's dark copy is built (its first visit after a change) the page waits instead of flashing light;
   the animation shows it anyway after 1.5 s */
html.pm-dark-wait body { opacity: 0; animation: pmd-show 0s 1.5s forwards; }
@keyframes pmd-show { to { opacity: 1; } }

/* header and menu */
html.pm-dark body .header-bg2 { background: linear-gradient(rgba(3, 12, 6, 0.5), rgba(3, 12, 6, 0.5)), url(../images/header.jpg) left top repeat-y; border-color: #2c5418; }
html.pm-dark body .nav-sm-blue, html.pm-dark body .sm-blue { background: linear-gradient(180deg, #1f4a1d 0%, #143519 100%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
html.pm-dark body .sm-blue > li > a:hover, html.pm-dark body .sm-blue > li > a:focus, html.pm-dark body .sm-blue > li > a:active,
html.pm-dark body .sm-blue > li > a.highlighted { background: linear-gradient(180deg, #3b7c27 0%, #2a601d 100%); color: #e6f5b8; }
@media (max-width: 767px) {
	html.pm-dark body .sm-blue > li > a { background: transparent; }
	html.pm-dark body .nav-sm-blue { background: linear-gradient(180deg, #1f4a1d 0%, #143519 100%); }
	/* the open menu lying over the page (shell-mobile.css); the three bars / X are drawn as white backgrounds, which the
	   script would turn dark */
	html.pm-dark body #main-menu-state:checked ~ #main-menu { background: linear-gradient(180deg, #1f4a1d 0%, #143519 100%); }
	html.pm-dark body .nav-box-m .main-menu-btn .main-menu-btn-icon, html.pm-dark body .nav-box-m .main-menu-btn .main-menu-btn-icon::before,
	html.pm-dark body .nav-box-m .main-menu-btn .main-menu-btn-icon::after { background: #fff; }
}

/* the dark mode switch in the quick buttons (img/menu_dark.svg, a glossy dark green ball like its neighbours), glowing when on */
.pm-dark-btn { display: inline-block; margin: 0 2px 0 0; padding: 0; border: 0; background: none; line-height: 0; vertical-align: middle; cursor: pointer; }
.pm-dark-btn img { width: 30px; height: 30px; }
.pm-dark-btn:hover img { filter: brightness(1.15); }
html.pm-dark .pm-dark-btn img { filter: drop-shadow(0 0 3px rgba(255, 226, 122, 0.95)); }
html.pm-dark .pm-dark-btn:hover img { filter: drop-shadow(0 0 3px rgba(255, 226, 122, 0.95)) brightness(1.15); }

/* the content panel and the rails: the lime surfaces become the shell's green-black, the green tabs a shade darker */
html.pm-dark body .panel-primary3 { background: #111a14; border-color: #2c4f22; }
html.pm-dark body .panel-primary4 { background: #121c15; border-color: #2c4f22; }
html.pm-dark body .side_forum { background: #121c15; box-shadow: inset 0 0 0 1px #2c4f22; }   /* the forums' rail (side_forum.asp) */
html.pm-dark body .panel-primary3 > .panel-heading, html.pm-dark body .panel-primary4 > .panel-heading { background-color: #3f7d16; border-color: #3f7d16; }
html.pm-dark body .panel-primary4 > .panel-body h2, html.pm-dark body .panel-primary3 > .panel-body h2 { border-bottom-color: #2f5a22; color: #e6eee3; }
html.pm-dark body .panel-primary3 > .panel-body p, html.pm-dark body .panel-primary4 > .panel-body p { color: #dfe7dc; }
html.pm-dark body .scrollable-container-x, html.pm-dark body .panel-body { scrollbar-color: #3f7d16 #151f18; }
html.pm-dark body .scrollable-container-x::-webkit-scrollbar-track, html.pm-dark body .panel-body::-webkit-scrollbar-track { background: #151f18; }
html.pm-dark body .scrollable-container-x::-webkit-scrollbar-thumb, html.pm-dark body .panel-body::-webkit-scrollbar-thumb { background-color: #3f7d16; border-color: #151f18; }

/* footer and the bottom bar of shortcuts */
html.pm-dark body .foot-copy { background: #13261a; color: #7f9a74; box-shadow: inset 0 1px 0 #2c4f22; }
html.pm-dark body .foot-copy a, html.pm-dark body .foot-copy strong { color: #b9de7a; }
/* (the bar's colour is the player's choice, written inline by navbar.asp: kept, under a dark shade) */
html.pm-dark body #nav_menu_default { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.62)) !important; border-color: #050a06 !important; }

/* the player card (ver_jogador.asp) keeps its tier colours (js/pm-dark.js leaves them), except bronze: a dark bronze */
html.pm-dark body .vj-card--bronze { --c1: #6e4a2e; --c2: #4b301d; --c3: #2f1d11; color: #f6e6d4; box-shadow: inset 0 0 0 1px rgba(214, 156, 110, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4); }
html.pm-dark body .vj-card--bronze::after { background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%); }
html.pm-dark body .vj-card--bronze .vj-card__foot, html.pm-dark body .vj-card--bronze .vj-card__nt { background: rgba(0, 0, 0, 0.22); border-top-color: rgba(255, 255, 255, 0.08); }
html.pm-dark body .vj-card--bronze .vj-card__nt b { color: #f6e6d4; }
html.pm-dark body .vj-card--bronze .vj-card__nt i { color: #d9b896; }

/* the live center's frame is drawn with another site's stylesheet, which the script cannot read: the frame is inverted
   as a whole and js/pm-dark.js turns its pictures back */
html.pm-dark body #live-center-frame { filter: invert(0.9) hue-rotate(180deg); }