/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
outline: none!important;
}



:root {
    --text: #0f172a;
    --textalt: #f7f8f8;
    --white: #ffffff;
    --lightgrey: #fafafa;
    --border: #e2e8f0;
 		--sidenav: #5b6c86;
		--dblue: #137fec;
		--lblue: #e7f2fd;   
	--darkbg: #0d0f10;
		--llblue: #f8fafc;
		--skill: #f1f5f9;
		--ver: #eff6ff;	
		--avbg: #dcfce7;
		--avborder: #b4eac7;
		--bookbg: #fef3c7;
		--bookborder: #f6daa0;
		--booktext: #b45309;	
		--avtext: #16a34a;	
		--footborder:#1a2641;
		--textlight: #a5a5a5;
		--mblue: #3c97f3;
   --reddown: #ff6262;
--greenup:#3ddc84;
  --bordercopy: #222323;
  --red: #ef5350;
  --pokeblue: #3949c3;
  --pokeyellow: #f7d700;
--toastgreen: #188754;
--toastred: #dc3546;
--toastyellow: #fec107;

--bg: #08090a;
  --header: #090a0b;
  --inpbg: #090a0b;
  --line: #1e1e1e;

--cardbg: #161718;
}


/* 
==========================================================================
GLOBAL & WP SPECIFIC STYLES
==========================================================================
*/

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: none; 	
}

input, textarea, select {
    -webkit-border-radius:0; 
    border-radius:0;
    outline: none!important;
}

img,
audio,
video,
canvas {
	max-width: 100%;
}

html {
	min-height: 100%;
	overflow: -moz-scrollbars-vertical!important; 
}

::selection {
	background: var(--dblue);
	color: var(--white);
}

::-moz-selection {
	background: var(--dblue);
	color: var(--white);
}

::-webkit-selection {
	background: var(--dblue);
	color: var(--white);
}

.cf:before,.cf:after {content: " "; /* 1 */    display: table; /* 2 */}
.cf:after {clear: both;}
.cf {clear: both;}

strong, b {
	font-weight:bold;
}

em, i {
	font-style:italic;
}

p {
	margin: 0 0 20px 0;
}

a {
	color: var(--text);
	text-decoration: none;
}

a:hover {
	color: var(--pokeyellow);
	text-decoration: none;
}


/* 
==========================================================================
H & LINKS
==========================================================================
*/

h1 {
	font: 30px 'Figtree', Helvetica, Arial, sans-serif;	
	margin:0 0 20px 0;
	padding:0;
	color: var(--white);
}

h2 {
	font: 26px 'Figtree', Helvetica, Arial, sans-serif;	
	margin:0 0 20px 0;
	padding:0;
	color: var(--white);
}

h3 {
	font: 22px 'Figtree', Helvetica, Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
color: var(--white);
}

h4 {
	font: 20px 'Figtree', Helvetica, Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
color: var(--white);
}

h5 {
	font: 18px 'Figtree', Helvetica, Arial, sans-serif;
	margin:0 0 20px 0;
	padding:0;
color: var(--white);
}


/* 
==========================================================================
GENERAL
==========================================================================
*/

body {
	background: var(--darkbg);
	color: var(--textalt);
	font: 15px/1.45 'Figtree', Helvetica, Arial, sans-serif;
    font-variant-numeric: normal;
  	margin: 0;
  	-webkit-font-smoothing: antialiased;
  	overflow-x: hidden;
  
  	font-variant-numeric: tabular-nums;
}

.container {
	position: relative;
	padding: 0;
}

.inner {
	position: relative;
	width: 100%;
	max-width: 1550px;
	margin: 0 auto;
	padding: 0;
}

.inner-alt {
	position: relative;
	width: 100%;
	max-width: 1550px;
	margin: 0 auto;
	padding: 0 30px;
}

/* 
==========================================================================
HEADER
==========================================================================
*/

header {
  width: 100%;
  margin: 0;
  background: var(--header);
  border-bottom: 1px solid var(--bordercopy);
}




.header-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: center;
}

.header-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-col li {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-col nav a {
	color: var(--white);
	font-weight: 500;
}

.header-col nav a:hover {
	color: var(--pokeyellow);
}

.hcr {
	text-align: right;
}

.hcm {
	text-align: center;
}


.logo {
	display: block;
    width: 120px;
    height: auto;
    margin: 0;  
}

.mob-logo {
  display: none;
    width: 35px;
    height: 35px;
    margin: 0;  
}


.logo img {
	display: block;
    width: 100%;
    height: auto;
    margin: 0;  
}

.home-hero {
	padding: 75px 0;
}

.home-hero .inner {
	padding: 0 30px;
}

.home-intro {
	max-width: 600px;
	padding: 0 0 0 5px;
}

.home-intro h1 {
	font-size: 45px;
	font-weight: 900;
	line-height: 50px;
	margin: 0 0 15px 0;
}

.home-intro p {
	font-size: 20px;
	font-weight: 400;
	line-height: 25px;
	margin: 0;
}

.home-search {
	display: block;
	margin: 35px 0 25px 0;
}

.search-bar {
	display: block;
	position: relative;
	width: 100%;
border: 1px solid var(--bordercopy);
  background: var(--inpbg);
	padding: 5px 10px;
	border-radius: 0;
  display: grid;
  grid-template-columns: auto 30px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: stretch;
  align-items: center;
}

.search-inp {
  color: var(--white);
  background: var(--inpbg);
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  padding: 10px 0 10px 10px;
  border: 0;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-search-inp {
  color: var(--white);
  background: var(--inpbg);
  font: 18px 'Figtree', Helvetica, Arial, sans-serif;
  padding: 15px 0 15px 15px;
  border: 0;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.search-btn {
  width: 20px;
  height: 20px !important;
  display: block;
  background: none !important;
  border: 0;
  cursor: pointer;
  padding: 0 !important;
}

.search-btn img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.pop-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pop-search h5 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	padding: 0 0 0 5px;
}

.pop-but {
	background: var(--dblue);
	padding: 10px 20px;
	color: var(--white);
	border-radius: 25px;
}

.pop-but:hover {
	background: var(--text);
	color: var(--white);
}

.pop-term {
	background: var(--white);
	padding: 10px 20px;
	color: var(--textalt);
	border-radius: 25px;
	border: 1px solid var(--border);
	font-weight: 600;
}

.user-card {
  display: block;
  padding: 20px 25px;
  background: var(--white);
  position: relative;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.user-card h3 {
  font: 20px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 3px 0;
  padding: 0;
  color: var(--text);
  font-weight: 700;
}

.user-card h5 {
  font: 15px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--textlight);
  font-weight: 400;
}

.user-bio {
	margin: 15px 0;
}

.search-page-main {
  margin: 50px auto;
}

.search-page-main h2 {
  font: 20px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 15px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}

.user-img {
	width: 60px;
	height: 60px;
}

.user-img img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 50%;
}

.user-ver {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
	background: var(--ver);
	color: var(--dblue);
	font-size: 14px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 8px;
	vertical-align: middle;
}

.user-ver img {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: -2px 5px 0 0;
	vertical-align: middle;
}

.user-skills {
	display: block;
	border-bottom: 1px solid var(--bg);
	padding: 0 0 15px 0;
}

.user-skill {
	background: var(--skill);
	padding: 5px 12px;
	color: var(--textalt);
	border-radius: 10px;	
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	margin: 0 5px 5px 0;	
}

.view-but {
	display: inline-block;
	margin: 20px 0 0 0;
	background: var(--llblue);
	padding: 6px 20px;
	color: var(--dblue);
	border-radius: 10px;
	font-weight: 600;
	border: 1px solid var(--border);
}

.view-but:hover {
	border: 1px solid var(--textalt);
	background: var(--textalt);
	color: var(--white);
}

.user-av {
  position: absolute;
  right: 20px;
  bottom: 25px;
}

.av-no {
  background: var(--bookbg);
  border: 1px solid var(--bookborder);
  padding: 2px 10px;
  color: var(--booktext);
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
}

.av-yes {
  background: var(--avbg);
  border: 1px solid var(--avborder);
  padding: 2px 10px;
  color: var(--avtext);
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
}

.log-but {
  border: 2px solid var(--pokeyellow);
  background: var(--pokeyellow);
  padding: 8px 30px;
  color: var(--text);
  border-radius: 25px;
  font-weight: 600;
}

.log-but:hover {
	border: 2px solid var(--text);
	background: var(--text);
	color: var(--white);
}


.sign-but {
	border: 2px solid var(--text);
	background: var(--text);
	padding: 8px 30px;
	color: var(--white);
	border-radius: 25px;
	font-weight: 600;
	margin: 0 0 0 10px;
}

.sign-but:hover {
	border: 2px solid var(--pokeyellow);
	background: var(--pokeyellow);
	color: var(--text);
}

/* 
==========================================================================
FOOTER
==========================================================================
*/


footer {
  background: var(--header);
  padding: 50px 0 30px 0;
  margin: 50px 0 0 0;
  border-top: 1px solid var(--bordercopy);
}


.foot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: start;
  margin: 0 auto;
    color: var(--white);
}

.footlogo {
  width: 120px;
  margin: 0 0 10px 0;
}

.footlogo img {
  height: 100%;
  width: auto;
  display: block;
  margin: 0;
}

.foot-icons img {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin: 0 5px 0 0;
}

.fgc1 p {
font-size: 14px;
  margin: 0 0 0 2px;
  font-weight: 400;
  color: var(--textlight);
}


.foot-col h5 {
  font: 16px 'Figtree', Helvetica , Arial, sans-serif;
  margin: 0 0 10px 0;
  font-weight: 700;
  padding: 0;
  color: var(--white);
}


.foot-col a {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.foot-col a:hover {
  color: var(--dblue);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.fgc1 {
  padding: 0 75px 0 0;
  align-self: center;
}

.colophon {
  margin: 30px auto 0 auto;
  padding: 30px 0 0 0;
border-top: 1px solid var(--bordercopy);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

.colophon p {
    margin: 0;
}

.colophon a {
  color: var(--white);
  text-decoration: none;
    transition:all 0.3s;
}

.colophon a:hover {
  color: var(--dblue);
  text-decoration: none;
    transition:all 0.3s;
}

.colo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  justify-items: stretch;
  align-items: center;
}

.coleft {
text-align:left;
}

.coright {
text-align:right;
}


.coright span {
  display: inline-block;
color: var(--red);
margin: 0 5px;
}

.coright img {
  width: 100px;
  height: auto;
  display: inline-block;
  margin: -2px 0 0 5px;
  padding: 0;
  vertical-align: middle;
}

.coright span {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.inner-footer {
	position: relative;
	width: 100%;
	max-width: 1550px;
	margin: 0 auto;
	padding: 0 30px;
}


/* 
==========================================================================
MEDIA QUERIES
==========================================================================
*/



@media screen and (max-width: 1000px) {

.three-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.inner-alt {
  padding: 0 15px;
}

footer {
  margin: 50px 0 0 0;
}

.inner-footer {
	padding: 0 15px;
}

.home-hero {
  padding: 50px 0;
}

}


@media screen and (max-width: 950px) {

.foot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.fgc1 {
  padding: 0 35px 0 0;
  align-self: center;
}

}

@media screen and (max-width: 750px) {
.three-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.pop-search {
  display: none;
}

  .home-hero {
    padding: 30px 0 30px 0;
  }

.home-intro {
  max-width: unset;
  padding: 0 20px;
  text-align: center;
}

.home-intro h1 {
  font-size: 40px;
  font-weight: 900;
  line-height: 45px;
}

.home-intro p {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}

.home-hero .inner {
  padding: 0 15px;
}

}


@media screen and (max-width: 700px) {

.analytics-grid-alt {
  display: grid;
  grid-template-columns: auto!important;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
  margin-bottom: 20px;
}

.foot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.footlogo {
    width: 120px;
    margin: 0 auto 10px auto;
}

.fgc2,
.fgc3,
.fgc4 {
  display: none;
}

.fgc1 {
    padding: 0 10px 20px 10px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
  }

footer {
  padding: 20px 0;
}

.colophon {
  margin: 0 auto;
  padding: 20px 0 0 0;
}
}

@media screen and (max-width: 600px) {
.log-but,
.sign-but {
	display: none;
}
}

@media screen and (max-width: 580px) {
.colo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 0;
  grid-row-gap: 5px;
  justify-items: stretch;
  align-items: center;
}

.coleft,
.coright {
  text-align: center;
}
}



@media screen and (max-width: 480px) {

}


@media screen and (max-width: 320px) {

 .container {
	min-width:240px;
	width:100%;
 }
 
}



@media screen and (max-width: 1050px) {

.hcr {
  text-align: right;
  margin: 0 60px 0 0;
}
	


 .nav-button {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 35px;
    right: 20px;
  }
	
.nav-wrapper .nav-buttons {
  top: 6px;
  right: 12px;
}	
	
}


.search-col-main-grid {
width: 100%;
  display: grid;
  grid-template-columns: 260px auto;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.filters {
  width: 260px;
  color: #f4f1e8;

}

.filter-group {
  margin-bottom: 15px;
}

.filter-label {
  display: block;
  margin: 0 0 5px 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--textlight);
}

.console-pills,
.sort-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.console-pills input,
.sort-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.console-pills label,
.sort-toggle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--sidenav);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.console-pills input:checked + label,
.sort-toggle input:checked + label {
  background: var(--pokeyellow);
  color: var(--text);

}

.console-pills label:hover,
.sort-toggle label:hover {
  background: #383838;
}

select {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--bordercopy);
  border-radius: 0;
  background: var(--inpbg);
  color: var(--white);
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.filter-actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

button {
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  height: 40px;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
}


.btn-go {
  background: var(--red);
  color: var(--white);
    font: 16px 'Figtree', Helvetica, Arial, sans-serif;
    cursor: pointer;
     font-weight: 600;
    margin: 0;
    border: 0;
    padding: 10px 20px;
  text-align: center;
}

.btn-res {
  background: var(--sidenav);
  color: var(--white);
    font: 16px 'Figtree', Helvetica, Arial, sans-serif;
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    border: 0;
 padding: 10px 20px;
  text-align: center;   
}

.btn-go:hover,
.btn-res:hover {
  background: var(--pokeblue);
  color: var(--white);
}


.game-card-head {
  position: relative;
  height: 230px;
  padding: 15px;
  overflow: hidden;
}

.game-card-head::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url(../images/game.jpg) center/cover;

    filter: blur(10px);
    transform: scale(1.08);
}


.g2::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url(../images/game2.jpg) center/cover;

    filter: blur(10px);
    transform: scale(1.08);
}


.game-main-img {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);  
  width: 100%;
    height: 100%;
}

.game-main-img img {
  display: block;
  margin: 0 auto;
width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
  }

.card-no {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  background: var(--red);
  padding: 2px 5px;
  font-size: 13px;
}

  .game-card-content {
  
  background: var(--cardbg);
  padding: 15px 15px;
  color: var(--white);
}

.game-card-content h3 {
  font-size: 16px;
  color: var(--textalt);
  font-weight: 500;
  margin: 0 0 3px 0;
}

.game-card-content h5 {
  font-size: 14px;
  color: var(--textlight);
  font-weight: 400;
  margin: 0;
}

.era-yellow {
  color: var(--pokeyellow) !important;
  font-weight: 600 !important;
  margin: 0 0 2px 0 !important;
}

header {
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;

}

.inner-alt,
.header-grid,
.header-col,
.hcm,
.main-nav,
.nav-list {
  height: 100%;
}

.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 50px;
  align-items: stretch;
}

.header-col {
  display: flex;
  align-items: center;
}

.hcm {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.main-nav {
  display: flex;
  align-items: stretch;
  background: transparent;
  padding: 0;
  text-align: left;
}

.nav-list {
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.nav-list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}


.nav-list > li > a:hover {
opacity: 0.7;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

.has-dropdown:hover > a::after {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 0px;
  width: 90px;
  height: 5px;
  background: #fff;
}

.mega-menu,
.simple-menu {
  position: absolute;
  top: 100%;
  left: -15px;
  background: var(--cardbg);
  width: max-content;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 350ms ease, transform 350ms ease, visibility 350ms ease;
  z-index: 999;
}

.has-dropdown:hover > .mega-menu,
.simple-dropdown:hover > .simple-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-menu {
  display: flex;
  align-items: stretch;
  min-width: 360px;
}

.mega-sidebar {
  background: var(--bordercopy);
  padding: 25px;
  min-width: 180px;
}

.mega-sidebar a,
.mega-col a,
.simple-menu a {
  display: block;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mega-sidebar a {
  font-size: 15px;
  margin-bottom: 12px;
}

.mega-sidebar a.active,
.mega-sidebar a:hover {
  color: var(--pokeyellow);
}

.mega-content {
  padding: 25px;
}

.mega-panel {
  display: none;
  gap: 40px;
}

.mega-panel.active {
  display: flex;
  animation: megaPanelFade 0.5s ease-in-out;
}

@keyframes megaPanelFade {
  from {
    opacity: 0;
    transform: translateX(0px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mega-col {
  min-width: 150px;
}

.mega-col h4 {
  color: var(--red);
  font-size: 12px;
  margin: 0 0 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.mega-col a,
.simple-menu a {
  font-size: 14px;
  margin-bottom: 8px;
}

.mega-sidebar a:last-child,
.mega-col a:last-child,
.simple-menu a:last-child {
  margin-bottom: 0;
}

.mega-col a:hover,
.simple-menu a:hover,
.nav-list > li > a:hover {
  color: var(--pokeyellow);
}

.simple-menu {
  display: block;
  padding: 26px 32px;
  min-width: 220px;
}


@media screen and (max-width: 1000px) {
  .main-nav {
    display: none;
  }

  .nav-button {
    display: block;
  }

  .nav-wrapper {
    background: #181928;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 450ms ease, visibility 450ms ease;
    overflow-y: auto;
    padding: 80px 0 30px;
  }

  body.nav-visible .nav-wrapper {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: 0;
    width: 34px;
    height: 34px;
    padding: 0;
  }

  .mobile-menu,
  .mobile-sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-menu > li {
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .mobile-menu a,
  .mobile-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 15px 22px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    font: 700 16px 'Figtree', Helvetica, Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    line-height: 1.25;
  }

  .mobile-has-children > button {
    position: relative;
    padding-right: 50px;
  }

  .mobile-has-children > button::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-has-children.is-open > button::after {
    content: "−";
  }

  .mobile-sub-menu,
  .mobile-third-level {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 450ms ease;
  }

  .mobile-sub-menu > *,
  .mobile-third-level > * {
    min-height: 0;
  }

  .mobile-has-children.is-open > .mobile-sub-menu,
  .mobile-has-children.is-open > .mobile-third-level {
    grid-template-rows: 1fr;
  }

  .mobile-sub-menu {
    background: #11111f;
  }

  .mobile-sub-menu > li {
    overflow: hidden;
  }

  .mobile-sub-menu > li > a,
  .mobile-sub-menu > li > button {
    min-height: 56px;
    padding: 16px 22px 16px 36px;
    border-top: 1px solid rgba(19,127,236,.75);
    color: #fff;
  }

  .mobile-third-level {
    background: #090a14;
  }

  .mobile-third-inner {
    padding: 14px 36px 22px 52px;
  }

  .mobile-third-level h4 {
    margin: 18px 0 8px;
    color: var(--pokeyellow);
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-third-level a {
    min-height: 0;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 600;
  }
}

@media screen and (min-width: 1001px) {
  .nav-wrapper,
  .nav-button {
    display: none;
  }
}


/* ==========================================================================
   CLEAN MOBILE NAVIGATION OVERRIDES
   Keeps the desktop nav untouched and replaces old mobile nav behaviour.
   ========================================================================== */

.nav-button {
  display: none;
  cursor: pointer;
}

.nav-button img {
  display: block;
  width: 25px;
  height: auto;
}

.nav-wrapper {
  display: none;
}

body.nav-visible {
  overflow: hidden;
}

@media screen and (max-width: 1000px) {
  .main-nav {
    display: none !important;
  }

  .nav-button {
    display: block !important;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 28px;
    right: 20px;
    z-index: 1000;
  }

  .hcr {
    text-align: right;
    margin: 0 60px 0 0;
  }

  .nav-wrapper {
    display: block !important;
    background: #181928 !important;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    padding: 80px 0 30px !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 999999;
    transform: translateX(100%);
    visibility: hidden;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 450ms ease, visibility 450ms ease;
  }

  body.nav-visible .nav-wrapper {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-close {
    position: absolute;
    top: 28px;
    right: 20px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
  }

  .mobile-close img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-nav,
  .mobile-menu,
  .mobile-sub-menu {
    width: 100%;
  }

  .mobile-menu,
  .mobile-sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-menu li,
  .mobile-sub-menu li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
  }

  .mobile-menu > li {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-menu > li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-menu a,
  .mobile-menu button {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 16px 22px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #fff;
    font: 700 16px 'Figtree', Helvetica, Arial, sans-serif;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
  }

  .mobile-menu a:hover,
  .mobile-menu button:hover {
    color: #137fec;
    background: transparent;
  }

  .mobile-has-children > button {
    position: relative;
    padding-right: 52px;
  }

  .mobile-has-children > button::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-has-children.is-open > button::after {
    content: "-";
  }

  .mobile-sub-menu,
  .mobile-third-level {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 650ms ease;
  }

  .mobile-has-children.is-open > .mobile-sub-menu {
    max-height: 2400px;
  }

  .mobile-has-children.is-open > .mobile-third-level {
    max-height: 1400px;
  }

  .mobile-sub-menu {
    background: #11111f;
  }

  .mobile-sub-menu > li > a,
  .mobile-sub-menu > li > button {
    min-height: 58px;
    padding: 17px 22px 17px 36px;
    border-top: 1px solid rgba(19, 127, 236, 0.75);
    color: #fff;
  }

  .mobile-third-level {
    background: #090a14;
  }

  .mobile-third-inner {
    padding: 14px 36px 22px 52px;
  }

  .mobile-third-level h4 {
    margin: 18px 0 8px;
    padding: 0;
    color: var(--pokeyellow);
    font: 800 13px/1.2 'Figtree', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
  }

  .mobile-third-level a {
    min-height: 0;
    padding: 8px 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: 0;
  }

  .mobile-third-level a:hover {
    color: #137fec;
  }

.search-col-main-grid {
width: 100%;
  display: grid;
  grid-template-columns: 200px auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.filters {
  width: 200px;

}

}

@media screen and (min-width: 1001px) {
  .nav-wrapper,
  .nav-button {
    display: none !important;
  }
}

@media screen and (max-width: 850px) {
.search-col-main-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.filters {
  width: 100%;
}

#filterForm {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-items: stretch;
  align-items: inital;
}

.search-page-main {
  margin: 30px auto;
}

}


.filter-toggle {
  display: none;
}

@media screen and (max-width: 850px) {
  .search-col-main-grid {
    grid-template-columns: auto;
    gap: 15px;
  }

  .filters {
    width: 100%;
    padding: 0;
  }

  .filter-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    background: var(--header);
    border: 1px solid var(--line);
    color: var(--white);
    font: 600 15px 'Figtree', Helvetica, Arial, sans-serif;
    border-radius: 0px;
    cursor: pointer;
  }

  .filters.is-open .filter-toggle span {
    transform: rotate(45deg);
  }

  .filter-toggle span {
    font-size: 22px;
    transition: transform 250ms ease;
  }

  #filterForm {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-height: 0;
    
    margin-top: 0;
    opacity: 0;
    transition:
      max-height 500ms ease,
      opacity 250ms ease,
      margin-top 250ms ease;
  }

  .filters.is-open #filterForm {
    max-height: 800px;
    opacity: 1;
    margin-top: 18px;
  }

  .filter-group {
    margin: 0;
    padding: 0 10px;
  }

  .filter-actions {
    margin: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    align-self: end;
  }

  select,
  .filter-actions button {
    width: 100%;
  }
}

@media screen and (max-width: 650px) {
  #filterForm {
    grid-template-columns: 1fr 1fr;
  }

  .filter-actions {
    grid-column: span 2;
  }
}

@media screen and (max-width: 480px) {
  #filterForm {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    grid-column: auto;
  }
}

.game-card-item {
    position: relative;
  display: block;
  height: 100%;
  background: var(--cardbg);
    transition: all 0.2s ease-in-out;
    transform: translateY(0px);
    width: 100%;
   
}

.game-card-item:hover {
    position: relative;
  display: block;
  height: 100%;
  background: var(--cardbg);
    transition: all 0.2s ease-in-out;
    transform: translateY(0px);
}




.user-pro-head {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin: -1px 15px 0 0;
}

.user-pro-head img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 50%;
}

.apexcharts-subtitle-text {
  display: none;
}


.inp-txt {
color: var(--white);
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  padding: 10px;
  outline: none;
  border: 1px solid var(--bordercopy);
  background: var(--inpbg);
}


.btn-save {
background: var(--avtext);
  color: var(--white);
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  cursor: pointer;
  font-weight: 600;
  margin: 0;
  border: 0;
  padding: 10px 20px;
  text-align: center;
}

.btn-save:hover {
background: var(--sidenav);
  color: var(--white);
  font: 16px 'Figtree', Helvetica, Arial, sans-serif;
  cursor: pointer;
  font-weight: 600;
  margin: 0;
  border: 0;
  padding: 10px 20px;
  text-align: center;
}

.ad-nav {
  background: var(--pokeyellow);
  text-align: center;
  padding: 10px;
}

.ad-nav li {
  display: inline-block;
  margin: 0 15px;
}

.ad-nav-link {
  font-weight: 700;
  color: var(--text);
}

.ad-nav-link:hover {
  font-weight: 700;
  color: var(--pokeblue);
}

.shome-hero {
  position: relative;
  height: 400px;
  width: 100%;

}

.shome-hero-inner {
  text-align: center;
  display: block;
  max-width: 900px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  left: 0;
  right: 0;
}


.home-search {
  display: block;
  margin: 0 auto;
}

.shome-hero-inner h1 {
  font: 50px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}

.shome-hero-inner p {
  margin: 0 0 30px 0;
  font-size: 18px;
padding: 0 15px;
}

.shome-inners {
  padding: 0 20px;
}


.shome-hero::before {
  content: "";
  background: rgba(0,0,0,0.8);
  position: absolute;
  width: 100%;
  height: 100%;
}

.top-item-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: start;
  margin: 0 auto;
}

.pokedex-sprite {
  margin: 18px 0;
  max-width: 180px;
}
.pokedex-sprite img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}


.glossy {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px; 
    width: 100%;
}

.glossy img {
    display: block;
    width: 100%;
    height: auto;
     border-radius: 10px;
filter: contrast(120%) brightness(90%);
transform: scale(1.02);
    transform-origin: center;
}

.glossy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            165deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.25) 15%,
            rgba(255,255,255,0) 40%,
            rgba(255,255,255,0) 100%
        );
          box-shadow:
        inset 0 0 12px rgba(255,255,255,.15),
        inset 0 0 35px rgba(0,0,0,.18);
}

.glossy::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -150%;
    width: 60%;
    height: 140%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform: skewX(-25deg);
    transition: left .8s ease;
}

.glossy:hover::before {
    left: 160%;
}

.price-change {
  text-align: right;
  font-size: 30px;
  font-weight: 800;
  margin: 0;
}

.price-change-txt {
  text-align: right;
  font-size: 12px;
  color: var(--lightgrey);
  margin: -5px 0 0 0;
}

.price-up .price-arrow,
.price-up {
    color: #1ee87d;
}

.price-down .price-arrow,
.price-down {
    color: #ff4d4d;
}

.price-arrow {
    font-size: 20px;
}

.single-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 350px auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: start;
  margin: 0 0 25px 0;
}

.single-card-header {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: center;
  margin: 0 0 20px 0;
}

.sing-car-no {
    color: var(--textlight);
}

.single-card-header h1 {
  font: 26px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 5px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}

.single-card-header h5 {
  font: 15px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--pokeyellow);
  text-transform: uppercase;
  font-weight: 600;
}

.scard-pb {
    text-align: right;
}




.single-card-grid-alt {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-items: stretch;
  align-items: start;
  margin: 0 0 25px 0;
}

.single-card-col {
  display: block;
}

.single-card-col h1 {
  font: 35px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 5px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}

.single-card-col h5 {
  font: 15px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 0 2px;
  padding: 0;
  color: var(--pokeyellow);
  text-transform: uppercase;
  font-weight: 700;
}


.price-change-block {

}



@media screen and (max-width: 750px) {


.single-card-grid,
.single-card-grid-alt {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: start;
  margin: 0 0 25px 0;
}
}

.apexcharts-canvas,
.chart-panel {
  width: 100%!important;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
    max-width: 100%;
    overflow: hidden;
    border: 0!important;
}

#historyChart {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.apexcharts-canvas,
.apexcharts-svg {
    max-width: 100% !important;
}

.chart-panel {
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

.single-card-item {
  background: var(--darkbg);
  padding: 25px 30px;
  width: 100%;
  display: block;
  position: relative;
  border-radius: 0;
  margin: 0 0 20px 0;
  border: 1px solid var(--bordercopy);
}

.single-card-item h2 {
  font: 18px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 20px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}



@media screen and (max-width: 600px) {
.user-pro-head {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin: -1px 5px 0 0;
}
}


.col-profile-side .search-col-nav-list a {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

.col-profile-side {
  width: 100%;
  display: grid;
  grid-template-columns: 150px auto;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

@media screen and (max-width: 700px) {
.col-profile-side {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.shome-hero-inner h1 {
  font: 40px 'Figtree', Helvetica, Arial, sans-serif;
  margin: 0 0 10px 0;
  padding: 0;
  color: var(--white);
  font-weight: 700;
}


}


.profile-side-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: #aeb2b8;
  flex: 0 0 15px;
}

.profile-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 5px;
  color: var(--textalt)!important;
  text-decoration: none;
  font-size: 14px;
  transition: background .16s ease,color .16s ease;

}

.profile-side-link:hover {
  color: var(--pokeyellow)!important;
  transition: background .16s ease,color .16s ease;

}


.analytics-kpi, .analytics-panel {
  background: var(--darkbg)!important;
  color: #fff!important;
  border: 1px solid var(--bordercopy)!important;
  padding: 20px!important;
  text-align: center!important;
height: 100%!important;
  align-content: center!important;
  border-radius:0!important;
}

.analytics-panel h2 {
  margin: 0!important;
  font-size: 18px!important;
}

.analytics-kpis {
  display: grid!important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 15px!important;
  margin-bottom: 20px!important;
}

.analytics-range button {
  border: 1px solid var(--bordercopy)!important;
  background: var(--bg)!important;
  color: var(--white)!important;
  padding: 6px 14px!important;
  cursor: pointer!important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: auto !important;
  border-radius:0!important;
}
.analytics-range button.active {
  background: var(--pokeyellow)!important;
  color: var(--text)!important;
  border-color: var(--pokeyellow)!important;
}

.analytics-kpi span {
  display: block!important;
  color: var(--textlight)!important;
  font-size: 13px!important;
  margin-bottom: 3px!important;
  border-radius:0!important;
}


.notification-settings, .notification-card {
  background: var(--bg)!important;
  border: 1px solid var(--bordercopy)!important;
  color: var(--white)!important;
border-radius:0!important;
}

.user-list-filters {
  display: grid!important;
  grid-template-columns: 1fr 1.2fr 1.2fr 0.8fr 0.5fr auto !important;
  gap: 20px!important;
  align-items: last baseline!important;
  margin: 0 0 20px!important;
  padding: 20px!important;
  background: var(--bg)!important;
  border: 1px solid var(--bordercopy)!important;
  color: var(--white)!important;
border-radius:0!important;
}

.user-card {
  background: var(--darkbg)!important;
  border: 1px solid var(--bordercopy)!important;
  color: var(--white)!important;
border-radius:0!important;
  overflow: hidden!important;
}

.percent-pill {
  display: flex!important;
  flex-direction: column;!important;
  gap: 5px!important;
  min-width: 0!important;
  padding: 10px!important;
  border-radius: 0!important;
  background: var(--darkbg)!important;
  border: 1px solid var(--bordercopy)!important;  
}

.holding-box {
  padding: 5px!important;
  border-radius: 0!important;
  background: var(--darkbg)!important;
  border: 1px solid var(--bordercopy)!important;  
  font-size: 14px!important; 
}


.btn-view, .btn-remove {
  font: 15px 'Figtree', Helvetica, Arial, sans-serif!important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  cursor: pointer!important;
  padding: 8px 16px !important;
}

.user-list-filter-actions button, .user-list-filter-actions a,
.user-card-actions a, .user-card-actions button {
  font: 15px 'Figtree', Helvetica, Arial, sans-serif!important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  cursor: pointer!important;
  padding: 8px 16px !important;
}

.user-list-filter input[type='search'], 
.user-list-filter input[type='text'], 
.user-list-filter select {
  width: 100%;
  font: 16px 'Figtree', Helvetica, Arial, sans-serif!important;
  height: auto !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  cursor: pointer!important;
  padding: 8px 16px !important;  
    background: var(--darkbg)!important;
  border: 1px solid var(--bordercopy)!important;
  height: 46px!important;
}

.pokedex-card {
  min-width: 0;
  padding: 20px!important;
  border-radius: 0!important;
  background: var(--darkbg)!important;
  text-align: center!important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease!important;
  border: 1px solid var(--bordercopy)!important;
}

.home-era-item {
  position: relative;
  text-align: center;
   background: var(--darkbg)!important;
border: 1px solid var(--bordercopy)!important;
}

.home-featured-panel {
   background: var(--darkbg)!important;
border: 1px solid var(--bordercopy)!important;
}

.notification-wrapper {
  margin-right: 20px!important;
}

@media screen and (max-width: 980px) {

.col-profile-side {
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-column-gap: 0;
  grid-row-gap: 0;
  justify-items: stretch;
  align-items: inital;
  margin: 15px auto;
}

.pside {
display:none;
}

}


.apexcharts-legend-text {
  padding-left:  0px!important;
  margin-left: 0px!important;
}

.card-list-actions {
  display: block!important;
  margin: 20px 0 0!important;
}


.card-list-button {
  border: 0!important;
  border-radius: 12px!important;
  padding: 11px 15px!important;
  font: 600 15px 'Figtree',sans-serif!important;
  cursor: pointer!important;
  background: var(--pokeyellow)!important;
  color: var(--text)!important;
  height: auto !important;
  margin: 0 0 15px 0;
  display: block;
  width: 100%;
}


.watch-list-button {
  border: 0!important;
  border-radius: 12px!important;
  padding: 11px 15px!important;
  font: 600 15px 'Figtree',sans-serif!important;
  cursor: pointer!important;
  background: var(--white)!important;
  color: var(--text)!important;
  height: auto !important;
  margin: 0 0 15px 0;
  display: block;
  width: 100%;
}

.card-list-button:hover,
.watch-list-button:hover {
    background: var(--pokeblue)!important;
  color: var(--white)!important;
}

@media screen and (max-width: 900px) {

.card-ebay-marketplaces, .card-ebay-section-tabs {
  display: grid!important;
  gap: 8px!important;
  overflow-x: auto;
  padding-bottom: 4px;
  grid-template-columns: auto auto!important;
}

}


@media screen and (max-width: 500px) {
.logo {
  display: none; 
}

.mob-logo {
  display: block; 
}
}

@media screen and (max-width: 400px) {

.card-ebay-marketplaces, .card-ebay-section-tabs {
  display: grid!important;
  gap: 8px!important;
  overflow-x: auto;
  padding-bottom: 4px;
  grid-template-columns: auto!important;
}

}

img {
    opacity: 0;
    filter: blur(8px);
    transition: opacity .3s ease, filter .3s ease;
}

img.img-loaded {
    opacity: 1;
    filter: blur(0);
}

@media screen and (max-width: 400px) {
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto!important;
  column-gap: 25px!important;
  align-items: stretch;
}
}


.results .card img,
.scan-page .card img,
.scan-page .results img {
    opacity: 1!important;
  filter: blur(0px)!important;
}

.scan-page .viewer video, 
.scan-page .viewer img, 
.scan-page .viewer canvas {
  width: 100%!important;
  height: 100%!important;
  object-fit: contain!important;
  display: revert-layer !important;
}

.scan-page .viewer {
  position: relative!important;

  background: var(--bg)!important;
  overflow: hidden;
  padding: 20px!important;
}


.price-summary-main {
  font-size: 16px!important;
  font-weight: 700!important;
}

.price-summary-price {
  color: var(--white)!important;
}

.price-summary-change {
  font-size: 13px!important;
  font-weight: 600!important;
}

.price-summary-arrow {
  font-size: 12px!important;
  margin: -2px 2px 0 0!important;
  display: inline-block!important;
  vertical-align: middle!important;
}

@media screen and (max-width: 1000px) {
  .blur1, .blur2 {
    width: 200px!important;
    height: 200px!important;
    filter: blur(75px)!important;
  }
}


.header-search-panel-inner .header-search-submit {
    padding: 15px !important;
  }



.pt-intro-block {
position: relative;
  display: block;
  margin: 0 0 20px 0;
  border-bottom: 1px solid var(--bordercopy);
  padding: 0 0 15px 0;
}

.pt-intro-block h1 {
  display: block;
  margin: 0 0 3px 3px!important;
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  text-transform: capitalize;
}

.pt-intro-block p {
  display: block;
  margin: 0 0 0 3px;
  font-size: 15px;
  font-weight: 400;
  color: var(--textlight)!important;
}

@media screen and (max-width: 680px) {

.single-card-header {
  width: 100%;
  display: grid;
  grid-template-columns: auto!important;
  grid-column-gap: 0!important;
  grid-row-gap: 5px!important;
  justify-items: stretch;
  align-items: center;
  margin: 0 0 20px 5px!important;
}

.scard-pb {
  text-align: left!important;
}
}


@media screen and (max-width: 550px) {

.single-card-header h1 {
  font: 22px 'Figtree', Helvetica, Arial, sans-serif!important;
  margin: 0 0 5px 0!important;
  padding: 0!important;
  color: var(--white)!important;
  font-weight: 700!important;
}

}


.pscan-bubble {
  display: none;
}

@media screen and (max-width: 550px) {


.pscan-bubble {
  display: block;
background: var(--pokeyellow);
  position: fixed;
width: 50px;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.8);
  z-index: 9;
    height: 50px;
    display: block;
    padding: 12px;
    border-radius: 50%;
}

.pscan-bubble:hover,
.pscan-bubble:focus{
background: var(--textlight);

}


.pscan-bubble svg {
display: inline-block;
  width: 100%;
  height: auto;
  margin: 1px 0 0 0;
  vertical-align: middle;
}



}



.debug {
  display: none!important;
}


@media screen and (max-width: 800px) {

.scan-page {
  padding: 10px 0!important;
}

.scan-panel {
  background: #121416!important;
  border: 0!important;
  padding: 0!important;
}

.status,
.actions {
  margin: 20px!important;
}

.scan-page .results {
  margin: 0 auto 20px auto!important;
  padding: 20px!important;
}

.scan-panel h2 {
  font: 20px 'Figtree', Helvetica, Arial, sans-serif!important;
  margin: 0 auto!important;
  padding: 0!important;
  color: var(--white)!important;
  text-align: center!important;
  text-transform: capitalize!important;
}
}

.game-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 25px auto;
}

@media(max-width:1200px){

.game-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 25px auto;
}
}

@media(max-width:1050px){

.game-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 25px auto;
}
}

@media(max-width:600px){

.game-card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  justify-items: stretch;
  align-items: inital;
  margin: 25px auto;
}
}


.search-card-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 7px;
}

.search-card-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 10, 0.82);
    color: var(--white);
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: 0.18s ease;
}

.search-card-icon:hover {
    transform: translateY(-1px);
    background: var(--pokeyellow);
    border-color: var(--pokeyellow);
    color: var(--bg);
}
.search-card-icon.active {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}
.search-card-icon.collection-active {
    background: var(--pokeyellow);
    border-color: var(--pokeyellow);
    color: var(--bg);
    width: 34px;
    height: 34px;
}

.search-card-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-card-icon.active svg {
    fill: currentColor;
}


@media(max-width:600px){
.user-list-filters {
  display: grid!important;
  grid-template-columns: auto auto !important;
  gap: 20px!important;
  align-items: last baseline!important;
  margin: 0 0 20px!important;
  padding: 20px!important;
  background: var(--bg)!important;
  border: 1px solid var(--bordercopy)!important;
  color: var(--white)!important;
border-radius:0!important;
}
}

@media(max-width:420px){
.user-list-filters {
  display: grid!important;
  grid-template-columns: auto !important;
  gap: 20px!important;
  align-items: last baseline!important;
  margin: 0 0 20px!important;
  padding: 20px!important;
  background: var(--bg)!important;
  border: 1px solid var(--bordercopy)!important;
  color: var(--white)!important;
border-radius:0!important;
}
}