/*
 * custom-dark.css — pokemon.blakehenstock.com
 *
 * Minimal dark industrial theme for the Preact client.
 * Loaded last (except sim-types/utilichart/battle-search/font-awesome,
 * which get doubled-specificity selectors where needed).
 *
 * Scope discipline:
 *  - Everything is keyed on `.dark` (html.dark before load, body.dark once
 *    the Preact client takes over) so the stock light theme stays intact.
 *  - Only colors, borders, shadows, radii and small responsive-safety rules.
 *    No layout metrics are changed: the client's pixel-tuned absolute
 *    layouts (tabbar, battle field, teambuilder grids) are preserved.
 *  - The ≤700px "narrow mode" nav drawer (scroll-snap document paging) is
 *    intentional client behavior and is left alone.
 */

html.dark,
html.dark body,
body.dark {
	--c-page: #0a0c0f;
	--c-panel: #0e1217;
	--c-raised: #141a21;
	--c-hover: #1b232c;
	--c-sunken: #0b0f13;
	--c-line: #232b35;
	--c-line-2: #34404d;
	--c-text: #d3dae3;
	--c-muted: #8c97a5;
	--c-faint: #5d6873;
	--c-accent: #3e9bf4;
	--c-accent-fill: #1f6feb;
	--c-accent-edge: #2b5d9e;
	--c-accent-dim: rgba(62, 155, 244, 0.12);
	--font-ui: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/*********************************************************
 * Base: background, typography, selection, scrollbars
 *********************************************************/

/* Root overflow contract — desktop only: below 701px the client widens the
   document on purpose (swipeable nav drawer), so the root must stay
   scrollable there. */
@media (min-width: 701px) {
	html, body {
		overflow-x: clip;
	}
}

html.dark body,
body.dark {
	background: var(--c-page) !important;
	background-image: none !important;
	color: var(--c-text);
	font-family: var(--font-ui);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* the client hardcodes Verdana in many component rules; align UI chrome */
.dark .button,
.dark .textbox,
.dark .select,
.dark .team,
.dark .userlist li,
.dark .userlist li button,
.dark .chatbox .textbox,
.dark .movebutton,
.dark .switchmenu button,
.dark .chooser button,
.dark .folder .selectFolder,
.dark .battle,
.dark .battle-log,
.dark .battle-log-add {
	font-family: var(--font-ui);
}

.dark ::selection {
	background: rgba(62, 155, 244, 0.35);
}

.dark .battle-log,
.dark .chat-log,
.dark .ladder,
.dark .statbar,
.dark .setstats,
.dark .movebutton small.pp {
	font-variant-numeric: tabular-nums;
}

.dark {
	scrollbar-color: #333d49 transparent;
}
.dark ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.dark ::-webkit-scrollbar-track {
	background: transparent;
}
.dark ::-webkit-scrollbar-thumb {
	background: #333d49;
	border-radius: 6px;
	border: 2px solid rgba(0, 0, 0, 0);
	background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb:hover {
	background: #44505f;
	border: 2px solid rgba(0, 0, 0, 0);
	background-clip: content-box;
}

/* links: one cool accent, no purple */
.dark a,
.dark .ilink,
.dark summary:hover:has(a:hover) span.ilink {
	color: var(--c-accent);
}
.dark a:where(:hover),
.dark .ilink:hover {
	color: #7dbcf8;
}
.dark a:where(:visited),
.dark .ilink.yours {
	color: #7fa3c9;
}
.dark a:where(:visited:hover),
.dark .ilink.yours:hover {
	color: #a7c4e2;
}

.dark hr {
	border: 0;
	border-top: 1px solid var(--c-line);
}

/*********************************************************
 * Header / tab bar
 *********************************************************/

.dark .header {
	background: var(--c-page);
	box-shadow: none;
}
.dark .header-vertical {
	background: #0c1015;
	border-right: 1px solid var(--c-line);
}
.dark .mini-header,
.dark .maintabbarbottom,
.dark .tabbar:after {
	background: var(--c-panel);
	border-color: var(--c-line);
	color: var(--c-text);
	box-shadow: none;
}
.dark .maintabbarbottom {
	border-bottom-color: var(--c-line);
}
.dark .header-vertical .maintabbarbottom {
	background: var(--c-panel);
	border-color: var(--c-line);
}
.dark .mini-header-right,
.dark .mini-header-left {
	border-color: var(--c-line);
}
.dark .mini-header-left.notifying {
	color: var(--c-accent);
}

.dark .tabbar {
	text-shadow: none;
}
.dark .tabbar .button,
.dark .header-vertical .tablist .button {
	background: #11161c;
	border-color: var(--c-line);
	color: var(--c-muted);
	box-shadow: none;
	text-shadow: none;
}
/* generic .dark .button sets a 4px radius below; tabs must stay square at
   the seam so they meet the panel edge cleanly */
.dark .tabbar .button {
	border-radius: 4px 4px 0 0;
}
.dark .tabbar li:first-child .button,
.dark .tabbar li.home-li .button,
.dark .tabbar li.home-li + li .button {
	border-top-left-radius: 4px;
}
.dark .tabbar li:last-child .button,
.dark .tabbar li.home-li .button {
	border-top-right-radius: 4px;
}
.dark .header .overflow .button {
	border-radius: 0;
}
.dark .tabbar .button:hover,
.dark .header-vertical .tablist .button:hover {
	background: var(--c-hover);
	border-color: var(--c-line-2);
	color: var(--c-text);
	box-shadow: none;
}
.dark .tabbar .button.cur,
.dark .tabbar .button.cur:hover,
.dark .tabbar .button.cur:active {
	background: var(--c-panel);
	border-color: var(--c-line);
	color: var(--c-text);
	box-shadow: inset 0 2px 0 var(--c-accent);
}
.dark .header-vertical .tablist .button.cur,
.dark .header-vertical .tablist .button.cur:hover,
.dark .header-vertical .tablist .button.cur:active {
	background: var(--c-panel);
	border-color: var(--c-line);
	color: var(--c-text);
	box-shadow: inset 2px 0 0 var(--c-accent);
}
.dark .tabbar .button.notifying,
.dark .header-vertical .tablist .button.notifying {
	box-shadow: inset 0 2px 0 var(--c-accent-edge);
}

.dark .mini-header i.text,
.dark .tablist i.text,
.dark .tabbar .button i.text {
	border-color: var(--c-line-2);
	color: var(--c-muted);
}

.dark .userbar .username {
	color: var(--c-text);
	text-shadow: none;
}
.dark .mini-header-right {
	color: var(--c-text);
	text-shadow: none;
}

.dark .notification-badge {
	background: var(--c-accent-fill);
}

/*********************************************************
 * Generic controls: buttons, textboxes, selects, checkboxes
 *********************************************************/

.dark .button {
	background: var(--c-raised);
	border: 1px solid #2a3340;
	border-radius: 4px;
	box-shadow: none;
	text-shadow: none;
	color: var(--c-text);
}
.dark .button:hover {
	background: var(--c-hover);
	border-color: var(--c-line-2);
}
.dark .button:active {
	background: var(--c-sunken);
	border-color: var(--c-line-2);
	box-shadow: none;
}
.dark .button option,
.dark .button optgroup {
	background: var(--c-raised);
	color: var(--c-text);
}
.dark .button:focus-visible,
.dark .textbox:focus-visible {
	outline: 1px solid var(--c-accent);
	outline-offset: 1px;
}

.dark .button.notifying {
	background: #1a3a5f;
	border-color: var(--c-accent-edge);
	color: #cfe5fc;
}
.dark .button.notifying:hover {
	background: #214a79;
	border-color: var(--c-accent);
}
.dark .button.notifying:active {
	background: #16314f;
	border-color: var(--c-accent-edge);
}
.dark .button.alt-notifying {
	background: #233141;
	border-color: #3a4f68;
	color: #c4d6ea;
}
.dark .button.alt-notifying:hover {
	background: #2b3c50;
	border-color: #4a648a;
}
.dark .button.alt-notifying:active {
	background: #1d2936;
	border-color: #3a4f68;
}
.dark .button.subtle-notifying {
	color: var(--c-accent);
}

.dark .button.disabled,
.dark .button.disabled:hover,
.dark .button.disabled:active,
.dark .button:disabled,
.dark .button:disabled:hover,
.dark .button:disabled:active {
	background: #10141a;
	border-color: #1d242d;
	box-shadow: none;
	color: var(--c-faint);
}
.dark .button.cur,
.dark .button.cur:hover,
.dark .button.cur:disabled,
.dark .button.cur:disabled:hover {
	background: var(--c-sunken);
	border-color: var(--c-line-2);
	box-shadow: none;
	color: var(--c-text);
}

.dark .textbox {
	background: var(--c-sunken);
	border: 1px solid #2a3340;
	border-radius: 4px;
	box-shadow: none;
	color: var(--c-text);
}
.dark .textbox:hover {
	background: var(--c-sunken);
	border-color: var(--c-line-2);
	box-shadow: none;
}
.dark .textbox:focus {
	background: var(--c-sunken);
	border-color: var(--c-accent-edge);
	outline: none;
	box-shadow: 0 0 0 1px var(--c-accent-edge);
}
.dark .textbox.disabled,
.dark .textbox:disabled {
	opacity: 1;
	background: #10141a;
	color: var(--c-faint);
	border-color: #1d242d;
	box-shadow: none;
}
.dark pre.textbox.textbox-empty[placeholder]:before {
	color: var(--c-faint);
}

.dark .checkbox:hover {
	background: var(--c-hover);
	color: var(--c-text);
}

/* format / team dropdown buttons (main menu, battle forms) */
.dark .select,
.dark .team {
	border: 1px solid #2a3340;
	border-radius: 4px;
	box-shadow: none;
	background: var(--c-raised);
	color: var(--c-text);
}
.dark .select:hover,
.dark .select:hover .team,
.dark a.team:hover,
.dark button.team:hover {
	border-color: var(--c-line-2);
	background: var(--c-hover);
	color: var(--c-text);
}
.dark .select:active,
.dark .select:active .team,
.dark a.team:active,
.dark button.team:active {
	border-color: var(--c-line-2);
	background: var(--c-sunken);
	box-shadow: none;
}
.dark .select:focus,
.dark .team:focus {
	outline: none;
	border-color: var(--c-accent-edge);
	box-shadow: 0 0 0 1px var(--c-accent-edge);
}
.dark .select:disabled {
	border-color: #1d242d;
	background: #10141a;
	color: var(--c-muted);
	box-shadow: none;
}
.dark .select:disabled .team,
.dark .select:disabled:hover .team,
.dark .select:disabled:active .team {
	border-color: transparent;
}
.dark .select:before {
	color: var(--c-muted);
}
.dark .select:disabled:before {
	color: var(--c-faint);
}
.dark .teamselect:disabled strong {
	color: var(--c-muted);
}

/* tables (ladder, etc.) */
.dark .ladder table,
.dark .ladder td,
.dark .ladder th,
.dark .table,
.dark .table td,
.dark .table th {
	border-color: var(--c-line);
}
.dark .ladder th,
.dark .table th {
	background: var(--c-raised);
	color: var(--c-text);
}

.dark .blocklink {
	background: #11161c;
	border-color: var(--c-line);
	border-radius: 4px;
	color: #aebccb;
	box-shadow: none;
	text-shadow: none;
}
.dark .blocklink:hover,
.dark .blocklink.cur {
	background: var(--c-hover);
	border-color: var(--c-line-2);
	color: var(--c-text);
}
.dark .blocklink:active,
.dark .blocklink.cur {
	background: var(--c-sunken);
}

.dark .message-log h2 {
	background: var(--c-raised);
	border-color: var(--c-line);
}

/*********************************************************
 * Rooms / panels
 *********************************************************/

.dark .ps-room {
	border-color: var(--c-line);
}
.dark .ps-room.ps-room-light,
.dark .ps-room-light,
.dark .tournament-box,
.dark .tournament-status,
.dark .tournament-toggle,
.dark .pm-log-add {
	background: var(--c-panel);
	color: var(--c-text);
}
.dark .ps-room.ps-room-opaque {
	background: var(--c-panel);
	color: var(--c-text);
}
.dark .tournament-wrapper {
	border-bottom-color: var(--c-line);
}
.dark .tournament-status {
	border-right-color: var(--c-line);
}
.dark .tournament-box {
	border-color: var(--c-line);
}
.dark .tournament-title:hover {
	background: var(--c-hover);
}
.dark .tournament-tools {
	border-top-color: var(--c-line);
}

.dark .mainmessage {
	background: var(--c-raised);
	border: 1px solid var(--c-line);
	border-radius: 6px;
	color: var(--c-text);
}

/*********************************************************
 * Main menu
 *********************************************************/

.dark .menugroup {
	background: var(--c-panel);
	border: 1px solid var(--c-line);
	border-radius: 6px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	color: var(--c-text);
	text-shadow: none;
}

/* flatten every colored mainmenu gradient into one quiet surface */
.dark .mainmenu.button,
.dark .button.mainmenu1,
.dark .button.mainmenu2,
.dark .button.mainmenu3,
.dark .button.mainmenu4,
.dark .button.mainmenu5,
.dark .button.mainmenu6,
.dark .button.mainmenu7 {
	background: var(--c-raised);
	border-color: #2a3340;
	color: var(--c-text);
	text-shadow: none;
	box-shadow: none;
}
.dark .mainmenu.button:hover,
.dark .button.mainmenu1:hover,
.dark .button.mainmenu2:hover,
.dark .button.mainmenu3:hover,
.dark .button.mainmenu4:hover,
.dark .button.mainmenu5:hover,
.dark .button.mainmenu6:hover,
.dark .button.mainmenu7:hover {
	background: var(--c-hover);
	border-color: var(--c-line-2);
}
.dark .mainmenu.button:active,
.dark .button.mainmenu1:active,
.dark .button.mainmenu2:active,
.dark .button.mainmenu3:active,
.dark .button.mainmenu4:active,
.dark .button.mainmenu5:active,
.dark .button.mainmenu6:active,
.dark .button.mainmenu7:active {
	background: var(--c-sunken);
	border-color: var(--c-line-2);
	box-shadow: none;
}
.dark .mainmenu.button.disabled,
.dark .mainmenu.button.disabled:hover,
.dark .mainmenu.button.disabled:active {
	background: #10141a;
	border-color: #1d242d;
	color: var(--c-faint);
	box-shadow: none;
}

/* the one accent: the Battle! button */
.dark .mainmenu.button.big,
.dark .mainmenu.button.big.mainmenu1 {
	background: var(--c-accent-fill);
	border-color: var(--c-accent-edge);
	color: #ffffff;
}
.dark .mainmenu.button.big:hover {
	background: #2f7ef0;
	border-color: var(--c-accent);
}
.dark .mainmenu.button.big:active {
	background: #1a5fd0;
}
.dark .mainmenu.button.big.disabled,
.dark .mainmenu.button.big.disabled:hover {
	background: #10141a;
	border-color: #1d242d;
	color: var(--c-faint);
}

.dark .mainmenu-footer {
	color: var(--c-muted);
	text-shadow: none;
}
.dark .mainmenu-footer small {
	color: var(--c-muted);
}
.dark .mainmenu-footer a,
.dark .mainmenu-footer button {
	color: #6fa6dd;
	text-shadow: none;
}
.dark .mainmenu-footer a:hover,
.dark .mainmenu-footer button:hover {
	color: #9cc4ec;
}

/*********************************************************
 * Mini-windows (news, PMs, challenges)
 *********************************************************/

.dark .mini-window-header {
	background: var(--c-raised);
	color: var(--c-muted);
	border-color: var(--c-line);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.dark .mini-window-header:hover {
	color: var(--c-text);
}
.dark .mini-window-header.notifying {
	background: #1a3a5f;
	border-color: var(--c-accent-edge);
	color: #cfe5fc;
}
.dark .mini-window-header.notifying:hover {
	background: #214a79;
}
.dark .mini-window .mini-window-contents,
.dark .mini-window-body {
	border-color: var(--c-line);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.dark .mini-window-body {
	background: var(--c-panel);
	color: var(--c-text);
	backdrop-filter: none;
}
.dark .mini-window.focused .mini-window-header,
.dark .mini-window.focused .mini-window-header:hover {
	background: var(--c-hover);
	color: var(--c-text);
}
.dark .mini-window.focused .mini-window-header,
.dark .mini-window.focused .mini-window-body,
.dark .mini-window.focused .mini-window-contents {
	border-color: var(--c-line-2);
}
.dark .newsentry + .newsentry {
	border-top-color: var(--c-line);
}
.dark .unread {
	background: var(--c-accent-dim);
}

.dark .pm-window h3 {
	background: var(--c-raised);
	color: var(--c-muted);
	border-color: var(--c-line);
}
.dark .pm-window h3:hover {
	background: var(--c-hover);
	color: var(--c-text);
}
.dark .pm-log {
	border-color: var(--c-line);
}

.dark .challenge {
	border: 1px solid #8a5a2e;
	background: #1d150c;
	color: #e3bc8d;
	border-radius: 4px;
}
.dark .challenge.outgoing {
	border: 1px solid var(--c-accent-edge);
	background: #0e1726;
	color: #9fc3ef;
}

/*********************************************************
 * Popups / dialogs
 *********************************************************/

.dark .ps-overlay {
	background: rgba(4, 7, 11, 0.6);
}
.dark .ps-popup {
	background: #11161d;
	color: var(--c-text);
	border: 1px solid #2c3642;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.dark p.or {
	color: var(--c-muted);
}
.dark p.or:before,
.dark p.or:after {
	border-bottom-color: var(--c-line-2);
}
.dark .options h3 {
	color: var(--c-accent);
}
.dark .options .star {
	color: var(--c-faint);
}
.dark .options .star:hover {
	color: var(--c-accent);
}

.dark .avatarlist button:hover,
.dark .avatarlist button.cur:hover,
.dark .formlist button:hover,
.dark .formlist button.cur:hover,
.dark .bglist button:hover,
.dark .bglist button.cur:hover {
	border-color: var(--c-line-2);
	background-color: var(--c-hover);
	box-shadow: none;
}
.dark .avatarlist button.cur,
.dark .formlist button.cur,
.dark .bglist button.cur {
	border-color: var(--c-accent-edge);
}
.dark .volume em {
	color: var(--c-muted);
}

/*********************************************************
 * Chat
 *********************************************************/

.dark .chat-log,
.dark .readable-bg {
	background: var(--c-panel);
	color: var(--c-text);
	backdrop-filter: none;
}
.dark .chat-log-add {
	border-top-color: var(--c-line);
}
.dark .chat.mine {
	background: rgba(255, 255, 255, 0.035);
}
.dark .highlighted {
	background: var(--c-accent-dim);
}

.dark .userlist strong,
.dark .userlist span {
	text-shadow: none;
}
.dark .userlist li button:hover {
	background: var(--c-hover);
}
.dark .userlist li button:active {
	background: var(--c-sunken);
}
.dark .userlist-maximized {
	background: #0c1015;
	color: var(--c-text);
}
.dark .userlist-minimized {
	background: var(--c-raised);
	color: var(--c-accent);
}
.dark .userlist-minimized .userlist-count:hover,
.dark .userlist-maximized .userlist-count:hover {
	background: var(--c-hover);
}
.dark .chat-log.hasuserlist {
	border-left-color: var(--c-line);
}

/*********************************************************
 * Battle
 *********************************************************/

.dark .battle,
.dark .battle-log,
.dark .battle-log-add {
	border-color: var(--c-line);
}
.dark .battle-log {
	background: var(--c-panel);
	color: var(--c-text);
}
.dark .battle-log-add {
	background: var(--c-panel);
	color: var(--c-text);
}

.dark .moveselect,
.dark .switchselect,
.dark .shiftselect {
	color: var(--c-muted);
}
.dark .moveselect button,
.dark .switchselect button {
	color: var(--c-muted);
}
.dark .whatdo,
.dark .battle-controls .whatdo {
	color: var(--c-muted);
}
.dark .battle-controls .whatdo small {
	border-color: var(--c-line-2);
}

.dark .movebutton,
.dark .switchmenu button {
	background: var(--c-raised);
	border: 1px solid #2a3340;
	border-radius: 4px;
	box-shadow: none;
	text-shadow: none;
	color: var(--c-text);
}
.dark .movebutton:hover,
.dark .switchmenu button:hover {
	background: var(--c-hover);
	border-color: var(--c-line-2);
}
.dark .movebutton:active,
.dark .movebutton.pressed,
.dark .switchmenu button:active,
.dark .switchmenu button.pressed {
	background: var(--c-sunken);
}
.dark .movebutton small,
.dark .switchmenu button small {
	color: var(--c-muted);
}
.dark .movebutton.disabled,
.dark .movebutton:disabled,
.dark .switchmenu button.disabled,
.dark .switchmenu button:disabled {
	background: #10141a !important;
	border-color: #1d242d !important;
	box-shadow: none !important;
	color: var(--c-faint) !important;
	opacity: 1;
}
.dark .movebutton.disabled small,
.dark .movebutton:disabled small,
.dark .switchmenu button.disabled small,
.dark .switchmenu button:disabled small {
	color: var(--c-faint);
}
.dark .switchmenu button .hpbar {
	border-color: var(--c-line-2);
	background: var(--c-sunken);
}

.dark .megaevo {
	color: var(--c-text);
	border-color: var(--c-line-2);
	border-radius: 4px;
}
.dark .megaevo:hover {
	color: #ffffff;
	background: var(--c-hover);
	border-color: var(--c-accent-edge);
}

.dark .chooser {
	background: var(--c-raised);
	border-color: var(--c-line);
	color: var(--c-text);
}
.dark .chooser em {
	background: #11161c;
	border-right-color: var(--c-line);
	color: var(--c-muted);
}
.dark .chooser button {
	color: var(--c-text);
}
.dark .chooser button:hover {
	border-color: var(--c-line-2);
	background: var(--c-hover);
	color: var(--c-text);
}
.dark .chooser button.sel,
.dark .chooser button.sel:hover {
	border-color: var(--c-accent-edge);
	background: var(--c-accent-dim);
	color: var(--c-text);
}

/* battle tooltips (rendered into #tooltipwrapper, body-scoped) */
.dark #tooltipwrapper .tooltip {
	background: rgba(17, 22, 29, 0.96);
	border: 1px solid var(--c-line-2);
	border-radius: 4px;
	color: var(--c-text);
}
.dark #tooltipwrapper .tooltip h2 {
	border-bottom-color: var(--c-line);
	color: var(--c-text);
}
.dark #tooltipwrapper .tooltip p.tooltip-section {
	border-top-color: var(--c-line);
}
.dark #tooltipwrapper.tooltip-locked .tooltip {
	border-color: var(--c-accent-edge);
	background: #11161d;
}

/*********************************************************
 * Teambuilder
 *********************************************************/

.dark .folderpane {
	border-left-color: var(--c-panel);
}
.dark .folderlist .foldersep:before,
.dark .folderlistafter:before,
.dark .folderlistbefore:before,
.dark .folderpane h3,
.dark .folderpane .text,
.dark .folder .selectFolder,
.dark .folderhack1,
.dark .folderhack2 {
	background: #11161c;
	color: var(--c-text);
	border-right-color: var(--c-line);
}
.dark .folderpane h3,
.dark .folderpane .text {
	color: var(--c-muted);
}
.dark .folderpane i {
	color: var(--c-muted);
}
.dark .folder .selectFolder:hover {
	background: var(--c-hover);
}
.dark .folder .selectFolder.active,
.dark .folder .selectFolder:active {
	background: var(--c-accent-dim);
	color: var(--c-text);
}
.dark .folder.cur .selectFolder,
.dark .folder.cur .selectFolder:hover,
.dark .folder.cur .selectFolder:active {
	background: transparent;
	color: var(--c-text);
	border-top-color: var(--c-line);
	border-bottom-color: var(--c-line);
	border-left-color: var(--c-line);
}

.dark .teamname .textbox {
	font-family: var(--font-ui);
}
.dark .teaminnertextbox {
	border-color: var(--c-accent-edge);
	box-shadow: 0 0 0 1px rgba(62, 155, 244, 0.35);
}

.dark .searchresults,
.dark .team-focus-editor {
	background: var(--c-panel);
}
.dark .searchresults {
	border-color: var(--c-line);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.dark .setdetails,
.dark .setstats {
	background: #11161c;
	border-color: #2a3340;
	border-radius: 4px;
	box-shadow: none;
	color: var(--c-text);
}
.dark .setdetails:hover,
.dark .setstats:hover {
	background: var(--c-hover);
	border-color: var(--c-line-2);
	box-shadow: none;
}
.dark .setdetails:active,
.dark .setstats:active {
	background: var(--c-sunken);
	border-color: var(--c-accent-edge);
	box-shadow: none;
}
.dark .statrow .statrow-head em {
	color: var(--c-muted);
}

.dark .sample-sets {
	border-color: var(--c-line);
}

/* search/dex result lists: battle-search.css loads after this file, so use
   doubled (html./body.) prefixes to win the cascade */
html.dark .dexlist h3, body.dark .dexlist h3,
html.dark .dexentry h3, body.dark .dexentry h3,
html.dark .resultheader h3, body.dark .resultheader h3,
html.dark .utilichart h3, body.dark .utilichart h3 {
	background: var(--c-raised);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-right: none;
	text-shadow: none;
	box-shadow: none;
}
html.dark .dexlist .result a.hover, body.dark .dexlist .result a.hover,
html.dark .dexlist .result a:hover, body.dark .dexlist .result a:hover,
html.dark .teambuilder-results .result a.hover, body.dark .teambuilder-results .result a.hover,
html.dark .teambuilder-results .result a:hover, body.dark .teambuilder-results .result a:hover {
	border-color: var(--c-line-2);
	background: var(--c-hover);
	color: #ffffff;
}
html.dark .dexlist .result a.cur, body.dark .dexlist .result a.cur,
html.dark .teambuilder-results .result a.cur, body.dark .teambuilder-results .result a.cur {
	border-color: var(--c-accent-edge);
	background: var(--c-accent-dim);
}
html.dark .dexlist .result a.cur:hover, body.dark .dexlist .result a.cur:hover,
html.dark .dexlist .result a.cur.hover, body.dark .dexlist .result a.cur.hover,
html.dark .teambuilder-results .result a.cur:hover, body.dark .teambuilder-results .result a.cur:hover {
	border-color: var(--c-accent-edge);
	background: var(--c-hover);
	color: #ffffff;
}

/*********************************************************
 * Responsive refinements (no-ops at the design's home widths)
 *********************************************************/

/* phones: popups must never exceed the screen */
@media (max-width: 380px) {
	.ps-overlay .ps-popup {
		max-width: calc(100vw - 16px);
	}
}
.dark .ps-popup {
	max-width: calc(100vw - 8px);
	box-sizing: border-box;
}

/* small phones: keep room padding tight so 320px content fits */
@media (max-width: 360px) {
	.mini-window {
		width: auto;
		max-width: 312px;
	}
}

/*********************************************************
 * Move buttons: per-type dark variants
 * (sim-types.css loads after this file and styles .movemenu
 * button.type-X with light gradients; these doubled-prefix rules
 * out-specify it while keeping each type hue readable as a tint)
 *********************************************************/

html.dark .movemenu button.type-Normal, body.dark .movemenu button.type-Normal {
	background: hsl(60, 14%, 12%);
	border-color: hsl(60, 22%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Normal small, body.dark .movemenu button.type-Normal small {
	color: hsl(60, 32%, 62%);
}
html.dark .movemenu button.type-Normal:hover, body.dark .movemenu button.type-Normal:hover {
	background: hsl(60, 14%, 17%);
	border-color: hsl(60, 26%, 38%);
}
html.dark .movemenu button.type-Normal:active, body.dark .movemenu button.type-Normal:active,
html.dark .movemenu button.type-Normal.pressed, body.dark .movemenu button.type-Normal.pressed {
	background: hsl(60, 14%, 9%);
	border-color: hsl(60, 26%, 38%);
}
html.dark .movemenu button.type-Fighting, body.dark .movemenu button.type-Fighting {
	background: hsl(3, 40%, 12%);
	border-color: hsl(3, 48%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Fighting small, body.dark .movemenu button.type-Fighting small {
	color: hsl(3, 58%, 62%);
}
html.dark .movemenu button.type-Fighting:hover, body.dark .movemenu button.type-Fighting:hover {
	background: hsl(3, 40%, 17%);
	border-color: hsl(3, 52%, 38%);
}
html.dark .movemenu button.type-Fighting:active, body.dark .movemenu button.type-Fighting:active,
html.dark .movemenu button.type-Fighting.pressed, body.dark .movemenu button.type-Fighting.pressed {
	background: hsl(3, 40%, 9%);
	border-color: hsl(3, 52%, 38%);
}
html.dark .movemenu button.type-Flying, body.dark .movemenu button.type-Flying {
	background: hsl(255, 20%, 12%);
	border-color: hsl(255, 28%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Flying small, body.dark .movemenu button.type-Flying small {
	color: hsl(255, 38%, 62%);
}
html.dark .movemenu button.type-Flying:hover, body.dark .movemenu button.type-Flying:hover {
	background: hsl(255, 20%, 17%);
	border-color: hsl(255, 32%, 38%);
}
html.dark .movemenu button.type-Flying:active, body.dark .movemenu button.type-Flying:active,
html.dark .movemenu button.type-Flying.pressed, body.dark .movemenu button.type-Flying.pressed {
	background: hsl(255, 20%, 9%);
	border-color: hsl(255, 32%, 38%);
}
html.dark .movemenu button.type-Poison, body.dark .movemenu button.type-Poison {
	background: hsl(300, 30%, 12%);
	border-color: hsl(300, 38%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Poison small, body.dark .movemenu button.type-Poison small {
	color: hsl(300, 48%, 62%);
}
html.dark .movemenu button.type-Poison:hover, body.dark .movemenu button.type-Poison:hover {
	background: hsl(300, 30%, 17%);
	border-color: hsl(300, 42%, 38%);
}
html.dark .movemenu button.type-Poison:active, body.dark .movemenu button.type-Poison:active,
html.dark .movemenu button.type-Poison.pressed, body.dark .movemenu button.type-Poison.pressed {
	background: hsl(300, 30%, 9%);
	border-color: hsl(300, 42%, 38%);
}
html.dark .movemenu button.type-Ground, body.dark .movemenu button.type-Ground {
	background: hsl(44, 27%, 12%);
	border-color: hsl(44, 35%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Ground small, body.dark .movemenu button.type-Ground small {
	color: hsl(44, 45%, 62%);
}
html.dark .movemenu button.type-Ground:hover, body.dark .movemenu button.type-Ground:hover {
	background: hsl(44, 27%, 17%);
	border-color: hsl(44, 39%, 38%);
}
html.dark .movemenu button.type-Ground:active, body.dark .movemenu button.type-Ground:active,
html.dark .movemenu button.type-Ground.pressed, body.dark .movemenu button.type-Ground.pressed {
	background: hsl(44, 27%, 9%);
	border-color: hsl(44, 39%, 38%);
}
html.dark .movemenu button.type-Rock, body.dark .movemenu button.type-Rock {
	background: hsl(49, 35%, 12%);
	border-color: hsl(49, 43%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Rock small, body.dark .movemenu button.type-Rock small {
	color: hsl(49, 53%, 62%);
}
html.dark .movemenu button.type-Rock:hover, body.dark .movemenu button.type-Rock:hover {
	background: hsl(49, 35%, 17%);
	border-color: hsl(49, 47%, 38%);
}
html.dark .movemenu button.type-Rock:active, body.dark .movemenu button.type-Rock:active,
html.dark .movemenu button.type-Rock.pressed, body.dark .movemenu button.type-Rock.pressed {
	background: hsl(49, 35%, 9%);
	border-color: hsl(49, 47%, 38%);
}
html.dark .movemenu button.type-Bug, body.dark .movemenu button.type-Bug {
	background: hsl(66, 42%, 12%);
	border-color: hsl(66, 50%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Bug small, body.dark .movemenu button.type-Bug small {
	color: hsl(66, 60%, 62%);
}
html.dark .movemenu button.type-Bug:hover, body.dark .movemenu button.type-Bug:hover {
	background: hsl(66, 42%, 17%);
	border-color: hsl(66, 54%, 38%);
}
html.dark .movemenu button.type-Bug:active, body.dark .movemenu button.type-Bug:active,
html.dark .movemenu button.type-Bug.pressed, body.dark .movemenu button.type-Bug.pressed {
	background: hsl(66, 42%, 9%);
	border-color: hsl(66, 54%, 38%);
}
html.dark .movemenu button.type-Ghost, body.dark .movemenu button.type-Ghost {
	background: hsl(262, 21%, 12%);
	border-color: hsl(262, 29%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Ghost small, body.dark .movemenu button.type-Ghost small {
	color: hsl(262, 39%, 62%);
}
html.dark .movemenu button.type-Ghost:hover, body.dark .movemenu button.type-Ghost:hover {
	background: hsl(262, 21%, 17%);
	border-color: hsl(262, 33%, 38%);
}
html.dark .movemenu button.type-Ghost:active, body.dark .movemenu button.type-Ghost:active,
html.dark .movemenu button.type-Ghost.pressed, body.dark .movemenu button.type-Ghost.pressed {
	background: hsl(262, 21%, 9%);
	border-color: hsl(262, 33%, 38%);
}
html.dark .movemenu button.type-Steel, body.dark .movemenu button.type-Steel {
	background: hsl(240, 12%, 12%);
	border-color: hsl(240, 20%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Steel small, body.dark .movemenu button.type-Steel small {
	color: hsl(240, 30%, 62%);
}
html.dark .movemenu button.type-Steel:hover, body.dark .movemenu button.type-Steel:hover {
	background: hsl(240, 12%, 17%);
	border-color: hsl(240, 24%, 38%);
}
html.dark .movemenu button.type-Steel:active, body.dark .movemenu button.type-Steel:active,
html.dark .movemenu button.type-Steel.pressed, body.dark .movemenu button.type-Steel.pressed {
	background: hsl(240, 12%, 9%);
	border-color: hsl(240, 24%, 38%);
}
html.dark .movemenu button.type-Fire, body.dark .movemenu button.type-Fire {
	background: hsl(25, 40%, 12%);
	border-color: hsl(25, 48%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Fire small, body.dark .movemenu button.type-Fire small {
	color: hsl(25, 58%, 62%);
}
html.dark .movemenu button.type-Fire:hover, body.dark .movemenu button.type-Fire:hover {
	background: hsl(25, 40%, 17%);
	border-color: hsl(25, 52%, 38%);
}
html.dark .movemenu button.type-Fire:active, body.dark .movemenu button.type-Fire:active,
html.dark .movemenu button.type-Fire.pressed, body.dark .movemenu button.type-Fire.pressed {
	background: hsl(25, 40%, 9%);
	border-color: hsl(25, 52%, 38%);
}
html.dark .movemenu button.type-Water, body.dark .movemenu button.type-Water {
	background: hsl(222, 29%, 12%);
	border-color: hsl(222, 37%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Water small, body.dark .movemenu button.type-Water small {
	color: hsl(222, 47%, 62%);
}
html.dark .movemenu button.type-Water:hover, body.dark .movemenu button.type-Water:hover {
	background: hsl(222, 29%, 17%);
	border-color: hsl(222, 41%, 38%);
}
html.dark .movemenu button.type-Water:active, body.dark .movemenu button.type-Water:active,
html.dark .movemenu button.type-Water.pressed, body.dark .movemenu button.type-Water.pressed {
	background: hsl(222, 29%, 9%);
	border-color: hsl(222, 41%, 38%);
}
html.dark .movemenu button.type-Grass, body.dark .movemenu button.type-Grass {
	background: hsl(100, 30%, 12%);
	border-color: hsl(100, 38%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Grass small, body.dark .movemenu button.type-Grass small {
	color: hsl(100, 48%, 62%);
}
html.dark .movemenu button.type-Grass:hover, body.dark .movemenu button.type-Grass:hover {
	background: hsl(100, 30%, 17%);
	border-color: hsl(100, 42%, 38%);
}
html.dark .movemenu button.type-Grass:active, body.dark .movemenu button.type-Grass:active,
html.dark .movemenu button.type-Grass.pressed, body.dark .movemenu button.type-Grass.pressed {
	background: hsl(100, 30%, 9%);
	border-color: hsl(100, 42%, 38%);
}
html.dark .movemenu button.type-Electric, body.dark .movemenu button.type-Electric {
	background: hsl(48, 41%, 12%);
	border-color: hsl(48, 49%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Electric small, body.dark .movemenu button.type-Electric small {
	color: hsl(48, 59%, 62%);
}
html.dark .movemenu button.type-Electric:hover, body.dark .movemenu button.type-Electric:hover {
	background: hsl(48, 41%, 17%);
	border-color: hsl(48, 53%, 38%);
}
html.dark .movemenu button.type-Electric:active, body.dark .movemenu button.type-Electric:active,
html.dark .movemenu button.type-Electric.pressed, body.dark .movemenu button.type-Electric.pressed {
	background: hsl(48, 41%, 9%);
	border-color: hsl(48, 53%, 38%);
}
html.dark .movemenu button.type-Psychic, body.dark .movemenu button.type-Psychic {
	background: hsl(342, 33%, 12%);
	border-color: hsl(342, 41%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Psychic small, body.dark .movemenu button.type-Psychic small {
	color: hsl(342, 51%, 62%);
}
html.dark .movemenu button.type-Psychic:hover, body.dark .movemenu button.type-Psychic:hover {
	background: hsl(342, 33%, 17%);
	border-color: hsl(342, 45%, 38%);
}
html.dark .movemenu button.type-Psychic:active, body.dark .movemenu button.type-Psychic:active,
html.dark .movemenu button.type-Psychic.pressed, body.dark .movemenu button.type-Psychic.pressed {
	background: hsl(342, 33%, 9%);
	border-color: hsl(342, 45%, 38%);
}
html.dark .movemenu button.type-Ice, body.dark .movemenu button.type-Ice {
	background: hsl(180, 15%, 12%);
	border-color: hsl(180, 23%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Ice small, body.dark .movemenu button.type-Ice small {
	color: hsl(180, 33%, 62%);
}
html.dark .movemenu button.type-Ice:hover, body.dark .movemenu button.type-Ice:hover {
	background: hsl(180, 15%, 17%);
	border-color: hsl(180, 27%, 38%);
}
html.dark .movemenu button.type-Ice:active, body.dark .movemenu button.type-Ice:active,
html.dark .movemenu button.type-Ice.pressed, body.dark .movemenu button.type-Ice.pressed {
	background: hsl(180, 15%, 9%);
	border-color: hsl(180, 27%, 38%);
}
html.dark .movemenu button.type-Dragon, body.dark .movemenu button.type-Dragon {
	background: hsl(257, 39%, 12%);
	border-color: hsl(257, 47%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Dragon small, body.dark .movemenu button.type-Dragon small {
	color: hsl(257, 57%, 62%);
}
html.dark .movemenu button.type-Dragon:hover, body.dark .movemenu button.type-Dragon:hover {
	background: hsl(257, 39%, 17%);
	border-color: hsl(257, 51%, 38%);
}
html.dark .movemenu button.type-Dragon:active, body.dark .movemenu button.type-Dragon:active,
html.dark .movemenu button.type-Dragon.pressed, body.dark .movemenu button.type-Dragon.pressed {
	background: hsl(257, 39%, 9%);
	border-color: hsl(257, 51%, 38%);
}
html.dark .movemenu button.type-Dark, body.dark .movemenu button.type-Dark {
	background: hsl(24, 18%, 12%);
	border-color: hsl(24, 26%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Dark small, body.dark .movemenu button.type-Dark small {
	color: hsl(24, 36%, 62%);
}
html.dark .movemenu button.type-Dark:hover, body.dark .movemenu button.type-Dark:hover {
	background: hsl(24, 18%, 17%);
	border-color: hsl(24, 30%, 38%);
}
html.dark .movemenu button.type-Dark:active, body.dark .movemenu button.type-Dark:active,
html.dark .movemenu button.type-Dark.pressed, body.dark .movemenu button.type-Dark.pressed {
	background: hsl(24, 18%, 9%);
	border-color: hsl(24, 30%, 38%);
}
html.dark .movemenu button.type-Fairy, body.dark .movemenu button.type-Fairy {
	background: hsl(310, 41%, 12%);
	border-color: hsl(310, 49%, 27%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Fairy small, body.dark .movemenu button.type-Fairy small {
	color: hsl(310, 59%, 62%);
}
html.dark .movemenu button.type-Fairy:hover, body.dark .movemenu button.type-Fairy:hover {
	background: hsl(310, 41%, 17%);
	border-color: hsl(310, 53%, 38%);
}
html.dark .movemenu button.type-Fairy:active, body.dark .movemenu button.type-Fairy:active,
html.dark .movemenu button.type-Fairy.pressed, body.dark .movemenu button.type-Fairy.pressed {
	background: hsl(310, 41%, 9%);
	border-color: hsl(310, 53%, 38%);
}
html.dark .movemenu button.type-Stellar, body.dark .movemenu button.type-Stellar {
	background: linear-gradient(90deg, hsl(330, 40%, 14%), hsl(126, 30%, 12%), hsl(231, 45%, 15%));
	border-color: hsl(231, 35%, 35%);
	color: var(--c-text);
}
html.dark .movemenu button.type-Stellar small, body.dark .movemenu button.type-Stellar small {
	color: hsl(231, 70%, 74%);
}
html.dark .movemenu button.type-Stellar:hover, body.dark .movemenu button.type-Stellar:hover {
	background: linear-gradient(90deg, hsl(330, 40%, 19%), hsl(126, 30%, 16%), hsl(231, 45%, 20%));
	border-color: hsl(231, 45%, 45%);
}
html.dark .movemenu button.type-Stellar:active, body.dark .movemenu button.type-Stellar:active,
html.dark .movemenu button.type-Stellar.pressed, body.dark .movemenu button.type-Stellar.pressed {
	background: linear-gradient(90deg, hsl(330, 40%, 11%), hsl(126, 30%, 9%), hsl(231, 45%, 12%));
}