:root {
	--light-bg:		 	#f0f0f0;
	--light-text:	   	#333;
	--lighter-text:	 	#ecf0f1;
	--dark-bg:		  	#2c2c2c;
	--dark-text:			#ecf0f1;
	--accent-color:	 	#4a4a4a;
	--zoom-btn-bg:	  	#555;
	--hover-bg:		 	#444;
	--border-radius:		10px;
	--transition-time:  	0.4s;
}

/* Webkit-based browsers */
::-webkit-scrollbar {
	width:			 	12px;
	height:				12px;
}

::-webkit-scrollbar-thumb {
	background-color:  	#4a4a4a;
	border:				2px solid #ffffff;
	border-radius:	 	10px;
	box-shadow:			0px 3px 2px -3px #555, inset 0 0 4px #000, inset 0 0 3px 3px #000000b3;
}

.dark-mode ::-webkit-scrollbar-thumb {
	background-color: #999;
	box-shadow: 0px 3px 2px -3px #999, inset 0 0 4px #000, inset 0 0 3px 3px #FFF;
}

::-webkit-scrollbar-thumb:active {
	background-color:  	#2c2c2c;
}

::-webkit-scrollbar-track {
	background-color:  	transparent;
	border:				1px solid #ffffff;
	box-shadow:			0px 3px 2px -3px #555, inset 0 0 4px #000, inset 0 0 3px 3px #000000b3;
}

::-webkit-scrollbar-track:active {
	background-color:  	transparent;
}

/* Firefox */
* {
	scrollbar-width:   	thin;
	scrollbar-color:   	#4a4a4a transparent;
}

.dark-mode * {
	scrollbar-color: #999 transparent;
}

/* Internet Explorer and Edge */
* {
	-ms-overflow-style:	none; /* Disable scrollbar styling */
}

body::-webkit-scrollbar {
	display:		   	none; /* Hide the default scrollbar */
}

.scrollbar-style.secondary {
	scrollbar-color:   	#555 transparent;
}
.scrollbar-style.secondary::-webkit-scrollbar-thumb:active {
	background-color:  	#444;
}

/* Applies to text selection across browsers */
::selection {
	background-color:  	#A9A9A9;
	color:			 	#FFFFFF;
}

/* Specific for Mozilla Firefox */
::-moz-selection {
	background-color:  	#A9A9A9;
	color:			 	#FFFFFF;
}

/* Mobile Browsers */
body {
	-webkit-overflow-scrolling:	touch; /* Smooth scrolling on mobile devices */
}

body::-webkit-scrollbar-track {
	background:			transparent;
}

/* Styling for other elements */
.scrollbar-style {
	scrollbar-width:   	thin;
	scrollbar-color:   	var(--scroll-p-thumb-bg) var(--scroll-p-track-bg);
}

.hide {
	display:	   	none;
}

.homepage {
	background: url('../images/bg.jpg') no-repeat top center fixed;
	background-size: 100% 100%;
	background-color: #180202 !important;
}

#dialog_bg{
	width: 100%; height: 100%; opacity: 0.8; top: 0; bottom: 0; left: 0; right: 0; background-color: #180202 !important;
}

#diablog_info {
	top: 25%; left: 20%; display: none; opacity: 1; background-color: #180202 !important;
}

/* New dialog and form utility classes (Section 1) */
.dialog-cave,
.dialog-char {
	padding: 15px;
	height: 450px;
	overflow-y: auto;
	background-color: #180202 !important;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 45% 60%;
	font-weight: bold;
	color: #FFFFFF;
}

.dialog-class,
.dialog_gameshop {
	position: absolute;
	top: 5%;
	left: 20%;
	opacity: 1;
	background-color: #180202 !important;
	z-index: 1000;
	color: #FFFFFF;
	width: 735px;
}

.dialog-reg {
	position: absolute;
	width: 700px;
	height: 328px;
	top: 25%;
	left: 20%;
	opacity: 1;
	background: #180202 url('../images/bg2.jpg') no-repeat center center;
	background-size: 100% 100%;
	font-weight: bold;
	z-index: 1000;
	color: #FFFFFF;
}

.form-reg {
	margin: 15px;
}

.form-reg div.spacer {
    height: 186px;
}

.reg-required {
	height: 200px;
	font-weight: bold;
	color: #FFFFFF;
}

.reg-fieldset-left { float: left; }
.reg-fieldset-right { float: right; margin-left: 18px; }

.input-medium { width: 185px; box-sizing: border-box; }
.select-medium { width: 185px; box-sizing: border-box; }
.input-tiny { width: 53px; box-sizing: border-box; }
.input-smallwide { width: 65px; box-sizing: border-box; }
.input-short { width: 40px; box-sizing: border-box; }

.label-tos { color: #FFFFFF; }
.btn-transparent-small { height: 22px; background-color: transparent; border: 0; outline: 0; color: #FFFFFF; font-weight: bold; }

.dialog-account {
	position: absolute;
	width: 608px;
	height: 280px;
	top: 25%;
	left: 22%;
	opacity: 1;
	background-color: #180202 !important;
	font-weight: bold;
	z-index: 1000;
	color: #FFFFFF;
}

.account-tab { color: #FFFFFF; position: absolute; width: 100%; height: 96%; text-align: center; }
.account-inner { 
    position: absolute;
    right: 50px;
}
.fieldset-white { color: #FFFFFF; }
.label-dob { float: left; display: block; }


/* Per-character background images (keeps same visuals as before) */
#dialog_cave { background-image: url('../images/cave.png'); background-size: 45% 60%; }
#dialog_monk { background-image: url('../images/gear/monk-70.png'); }
#dialog_assassin { background-image: url('../images/gear/assassin-70.png'); }
#dialog_fairy { background-image: url('../images/gear/fairy-70.png'); }
#dialog_wizards { background-image: url('../images/gear/fwizard-70.png'); }
#dialog_tamer { background-image: url('../images/gear/tamer-70.png'); }

/* Header / Explore / Service bar styles (Section 2) */
.social-media-fixed {
	position: fixed;
	left: 0;
	top: 40%;
	width: 34px;
	height: 250px;
	display: block;
	z-index: 9;
}

.header-plate-bg {
	background: url('../images/menubg.png') no-repeat left center;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.service-logged { padding: 0 15px 7px; color: #FFFFFF; }
.text-capitalize { text-transform: capitalize; }
.input-login { margin: 5px 2px; }
.btn-login { height:22px; background: url('../images/login.png') no-repeat left center; background-size: 100% 100%; border: 0; outline: 0; color:#FFFFFF; }
.btn-link-small { padding:0 3px 4px; text-align: center; }
.service-welcome-padded { padding: 0 15px 7px; }

.explore-menu-bg { background: #100000; opacity: 0.9; }
.explore-primary-opaque { opacity: 1; filter: alpha(opacity=100); }
.app-preview { background: url('../images/screenshots/1.jpg') repeat 0 0; background-size: 100% 100%; width: 140px; height: 80px; display:inline-block; }
.app-tagline-light { text-align: center; color: #FFFFFF; border-color: #FFFFFF; background: none; display:inline-block; vertical-align: middle; padding: 6px 8px; }

.explore-secondary { list-style: none; margin: 0; padding: 0; }
.explore-secondary center { display: block; }
.explore-secondary .explore-game { display: inline-block; }
.explore-game-wide { width: 109px; }
.explore-game-with-border { border-left: 1px solid #FFFFFF; }
.explore-game-link { display: block; width: 60px; height: 48px; background-size: auto; text-decoration: none; color: inherit; }
.explore-game-link.monk { background: url('../images/gear/80set.png') no-repeat left 51% top 0 transparent; }
.explore-game-link.assassin { background: url('../images/gear/80set.png') no-repeat left 0 top 0 transparent; width: 70px }
.explore-game-link.fairy { background: url('../images/gear/80set.png') no-repeat left 100% top 0 transparent; width: 60px }
.explore-game-link.wizards { background: url('../images/gear/80set.png') no-repeat left 77% top 0 transparent; width: 60px }
.explore-game-link.tamer { background: url('../images/gear/80set.png') no-repeat left 22% top 0 transparent; width: 60px }
/* per-item background positions copied from original inline styles */
.explore-secondary center li:nth-child(1) a { background-position: 51% 0; }
.explore-secondary center li:nth-child(2) a { background-position: 0 0; }
.explore-secondary center li:nth-child(3) a { background-position: 100% 0; }
.explore-secondary center li:nth-child(4) a { background-position: 77% 0; }
.explore-secondary center li:nth-child(5) a { background-position: 22% 0; }
.explore-secondary center li:nth-child(6) a { background-image: url('../images/cave.png'); background-position: center 18%; background-size: 55% 65%; }

.explore-cave { width: 60px; height: 48px; }

/* Sidebar expansion tile used by players custom menu */
.sidebar-expansion {
	background: url('images/gear/80set.png') no-repeat left 0 bottom 0 transparent;
	background-size: 100% 80%;
	display: block;
	width: 140px;
	height: 80px;
}

.plate-logged-out-bg { background: url('../images/charcard-neutral.png') no-repeat 0 0; }
.card-portrait-bg { background: url('../images/download.png') no-repeat 50% 50%; background-size: 100% 100%; opacity: 0.8; border: 1px solid #100000; display: inline-block; width: 48px; height: 48px; vertical-align: middle; }
.download-cta { color: #FFFFFF; text-shadow: 2px 2px #000000; }

/* Content / Slideshow / Sidebar / Footer (Section 3) */
.content-bg { background-color: #100000 !important; }
.slide-bg { background-image: url('../images/bg.gif'); background-size: 100% 100%; opacity: 0.8; filter: alpha(opacity=80); width: 100%; height: 240px; display: block; }

.right-sidebar { width: 305px; position: relative; float: right; box-sizing: border-box; }
.sidebar-module { display: block; }
.sidebar-title-wide { width: 200px; display: block; }
.trending-topics-pad { margin-bottom: 20px; padding-left: 17px; padding-right: 17px; }
.no-border { border-bottom: none; }
.sotd-bg { background-image: url('../images/screenshots/1.jpg'); background-size: 100% 100%; }
.caption-opaque { background: #100000; opacity: 0.9; }

.left-content { float: left; background: none; }

.column h3 { margin-left: 0; }
.column h3.ageoftalisman { margin-left: 10px; }
.column ul { padding-left: 10px; }
.column h3[style], .column h3 { padding-left: 23px; }

.footer-bg { background-color: #100000 !important; }

.game-shop { z-index: 999999999; box-shadow: 0 0 8px #F63; display: none; opacity: 0.9; background-color: #100000; position: absolute; height: 500px; width: 350px; bottom: 35px; left: 18px; }
.game-shop h3 { line-height: 65px; height: 65px; overflow: hidden; font-size: 18px; padding: 0 6px; text-align: left; color: #FFFFFF; text-indent: 32px; font-family: 'Segoe UI','Arial'; }
.game-shop .close-link { cursor: pointer; overflow: hidden; display: block; float: right; width: 45px; text-indent: -999px; background: url('../images/cdk_ico.png') no-repeat 1px 24px; opacity: 0.6; }
.game-shop .char-icons input[type="image"] { width: 45px; height: 45px; }
.form-inline-select { width: 125px; }
.game-shop .radio-inline { margin-right: 15px; }

/* Footer tweaks */
.footer-heading { 
	padding-left: 23px; 
	background-image: url('../images/footer.gif');
	background-repeat: no-repeat;
	background-size: auto;
	display: block;
	min-height: 20px;
}
.footer-heading-ranks { background-position: 2px -150px; }
.footer-heading-account { background-position: 0 -200px; }
.footer-heading-support { background-position: 0 -250px; }
.footer-heading-donate { background-position: 2px -50px; }

.trending-topics li { list-style: none; }

/* Account helper/util classes */
.account-helpers { width: 300px; }
.icon-large { width:125px; height:125px; margin-right:15px; }
.fieldset-white { color: #FFFFFF; }
.account-controls { float: left; width: 200px; margin-left: 25px; }
.clickable { cursor: pointer; }

/* Dialog full (screens, guide, ranks, guilds) */
.dialog-full { background-color: #000; width: 75%; height: 80%; top: 10%; left: 10%; bottom: 10%; right: 10%; opacity: 1; font-weight: bold; position: absolute; z-index: 1000; color: #FFFFFF; }
.dialog-inner { color:#FFFFFF; position: absolute; width: 100%; height: 80%; }
.dialog-inner-screenshots { text-align: center; }
.screenshots-highlights { height: 5%; width: 90%; margin: 0 auto; }
.screenshots-box { 
	display: flex; height: 80%; width: 90%; margin: 0 auto; justify-content: center; align-items: center; 
}
.screenshots-img { 
	outline: none; border: none; display: block;
	height: 100%; aspect-ratio: 1 / 0.7; object-fit: cover; 
}

/* Screenshots slider */
.screenshots-slider { border: 1px solid #FF6633; height: 21%; width: 90%; overflow: hidden; overflow-y: auto; margin: 0 auto; }
.screenshot-thumb { width: 150px; height: 90%; border: 1px solid #FF6633; margin: 5px 2px; display: inline-block; }

/* Guide dialog styles */
.guide-highlights { text-shadow: 0 1px 8px #FF6633; height: 5%; width: 90%; margin: 0 auto; }
.guide-box { display: flex; height: 85%; width: 90%; margin: 0 auto; justify-content: center; align-items: center; }
.guide-img { height: 100%; outline: none; border: none; display: block; aspect-ratio: 1 / 0.7; object-fit: cover;}
.guide-nav { position: absolute; top: 35%; height: 100px; width: 56px; }
.guide-nav-prev { left: -9px; background-image: url('../images/sprite.png'); background-position: -94px -436px; }
.guide-nav-next { right: -9px; background-image: url('../images/sprite.png'); background-position: -165px -436px; }
.guide-details { border: 1px solid #FF6633; background-color: #FFF; color: #000; height: 16%; width: 90%; margin: 0 auto; }

/* Ranks dialog layout */
.ranks-header { width: 100%; height: 25px; margin-bottom: 20px; display: flex; }
.ranks-col { flex: 1; text-align: center; }
.ranks-link { display: inline-block; padding: 3px 0 3px 24px; background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; }
.ranks-link-monk { background-image: url('../images/classes/Monk.png'); }
.ranks-link-assassin { background-image: url('../images/classes/Assassin.png'); }
.ranks-link-fairy { background-image: url('../images/classes/Fairy.png'); }
.ranks-link-wiz { background-image: url('../images/classes/Wiz.png'); }
.ranks-link-tamer { background-image: url('../images/classes/Tamer.png'); }

/* Player list helpers */
.player-level { float: right; width: 40px; text-align: right; }
.player-guild { float: right; margin-right: 6px; text-align: right; }

/* Article helpers */
.article-image { width: 140px; height: 80px; display: inline-block; vertical-align: middle; overflow: hidden; }
.article-image-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-title { color: #FFFFFF !important; }

/* Icon helpers returned by getStyling() */
.icon-facebook { background: url('images/blog_icons.gif') repeat -16px -40px transparent; width: 16px; height: 16px; display:inline-block; }
.icon-twitter { background: url('images/blog_icons.gif') repeat -16px -70px transparent; width: 16px; height: 16px; display:inline-block; }
.icon-direct { background: url('images/download.png') no-repeat center bottom transparent; background-size:15px 15px; width: 15px; height: 15px; display:inline-block; }
.icon-mega { background: url('images/mega.png') no-repeat center bottom transparent; background-size:15px 15px; width: 15px; height: 15px; display:inline-block; }



/* Utility classes added by refactor */
.visible { display: block; }
.content-top-bg { background: url('../images/home-top.png') no-repeat 0 0 transparent; }
.content-bot-no-bg { background: none; }
.status-online { color: #00FF00; }
.spacer-25 { height: 25px; }
.sidebar-title-wide { width: 200px; display:block; }
.col-spacer { text-align:left; float:left; width:15px; }
.col-name { float:left; text-align:left; color:#FFFFFF; }
.col-lv, .col-members { float:right; width:55px; text-align:center; color:#FFFFFF; }
.list-pad { padding: 17px; }
.list-roman { list-style-type: upper-roman; padding: 17px; }
.link-viewall { float:right; text-align:center; }
.left-content-no-bg { float:left; background:none; }
.mb-10 { margin-bottom: 10px; display:block; }
.mb-15 { margin-bottom: 15px; }
.section-divider { border-bottom: 1px solid #271B15; margin: 0 15px; padding: 8px 0; }
.control-box { border: 1px solid #FFFFFF; border-radius: 4px; padding: 8px; }
.class-icons { width: 245px; height: 50px; }
.class-icon { width: 45px; height: 45px; }
.mr-15 { margin-right: 15px; }
.select-125 { width: 125px; box-sizing: border-box; }
.mb-8 { margin-bottom: 8px; }
.label-white { color: #FFFFFF; }

/* Additional utility classes */
.col-name-alt { float: left; text-align: left; }

.online { color:#00FF00; }
.offline { color:#FF0000; }

/* Ranks / Top Guild styles (used by middleware-generated lists) */
.rank-row { display: flex; width: 100%; height: 18px; border-bottom: 1px solid #271B15; color: #71401F; align-items: center; box-sizing: border-box; }
.rank-row .col { box-sizing: border-box; }
.rank-row .col-index { width: 5%; padding-left: 12px; }
.rank-row .col-name { width: 20%; padding-left: 12px; }
.rank-row .col-level { width: 20%; text-align: center; }
.rank-row .col-class { width: 20%; text-align: center; padding-left: 12px; }
.rank-row .col-guild { width: 25%; text-align: center; padding-left: 12px; }
.rank-row .col-boss { width: 25%; }
.rank-row .col-members { width: 25%; text-align: center; }

.ranks-name-link { padding: 3px 0; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.class-icon { width: 20px; height: 20px; margin-right: 6px; display: inline-block; vertical-align: middle; }

.top-guild-item { position: relative; }
.top-guild-meta { float: right; display: flex; gap: 8px; align-items: center; }
.top-guild-meta a { text-align: right; display: inline-block; color: inherit; text-decoration: none; }
.top-guild-meta .top-guild-level { width: 55px; }

/* Ranks / Guilds list helpers */
.rrow { list-style: none; margin: 0; padding: 0; }
.rrow-scroll { max-height: 360px; overflow-y: auto; width: 90%; margin: 0 auto; padding: 0 6px; box-sizing: border-box; }

.ranks-subheader { display: flex; width: 90%; margin: 0 auto 8px; }
.ranks-subcol { padding: 6px 8px; box-sizing: border-box; color: #FFFFFF; }
.ranks-subcol-name { flex: 2; text-align: left; padding-left: 12px; }
.ranks-subcol-level { width: 20%; text-align: center; }
.ranks-subcol-class { width: 20%; text-align: center; }
.ranks-subcol-guild { width: 25%; text-align: center; }

.guilds-subheader { display: flex; width: 90%; margin: 0 auto 8px; }
.guilds-subcol { padding: 6px 8px; box-sizing: border-box; color: #FFFFFF; }
.guilds-subcol-name { flex: 2; text-align: left; padding-left: 12px; }
.guilds-subcol-leader { flex: 1; text-align: center; }
.guilds-subcol-members { width: 25%; text-align: center; }
.guilds-subcol-level { width: 25%; text-align: center; }

/* Dialog inner modifier helpers */
.dialog-inner-contact,
.dialog-inner-guide,
.dialog-inner-guilds,
.dialog-inner-ranks {
	padding: 12px 8px; box-sizing: border-box; text-align: center; color: #FFFFFF;
}

/* Ranks header modifier helpers (keeps parity with .ranks-col) */
.ranks-col-monk,
.ranks-col-assassin,
.ranks-col-fairy,
.ranks-col-wiz,
.ranks-col-tamer {
	flex: 1; text-align: center;
}

.service-explore-pos { position: relative; }

/* PVPSHOP dialog styles (moved from inline) */
#dialog_pvpshop { 
	background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(10,10,10,0.95) 100%);
	color: #fff;
	padding: 16px;
	border-radius: 8px;
	width: 680px;
	max-width: 95%;
	box-sizing: border-box;
}

#dialog_pvpshop .pvpshop-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
#dialog_pvpshop .pvpshop-title { font-size:18px; font-weight:700; }
#dialog_pvpshop .pvpshop-items { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
#dialog_pvpshop .pvpshop-items li { 
	background: linear-gradient(180deg,#1b1b1b,#0f0f0f);
	border: 1px solid #333; 
	padding: 8px 10px; 
	width: 150px; 
	box-sizing: border-box; 
	cursor: pointer; 
	border-radius:6px; 
	display:flex; 
	flex-direction:column; 
	gap:6px; 
}
#dialog_pvpshop .pvpshop-items li .item-name { font-weight:600; font-size:14px; }
#dialog_pvpshop .pvpshop-items li .item-meta { font-size:12px; color:#ccc; }
#dialog_pvpshop .pvpshop-items li.selected { outline: 2px solid #FF6633; box-shadow:0 2px 8px rgba(255,102,51,0.12); }

#dialog_pvpshop .pvpshop-cart { margin-top:14px; border-top:1px dashed #333; padding-top:12px; display:flex; gap:12px; align-items:flex-start; }
#dialog_pvpshop .pvpshop-cart .cart-items { list-style:none; margin:0; padding:0; width:60%; max-height:180px; overflow:auto; }
#dialog_pvpshop .pvpshop-cart .cart-items li { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,0.03); }
#dialog_pvpshop .pvpshop-cart .cart-summary { width:40%; box-sizing:border-box; }
#dialog_pvpshop .pvpshop-cart .cart-total { font-weight:700; margin-bottom:8px; }
#dialog_pvpshop .pvpshop-cart .btn { display:inline-block; padding:8px 12px; background:#FF6633; color:#fff; border-radius:6px; text-decoration:none; cursor:pointer; }

/* Small responsive tweaks */
@media (max-width:720px){
	#dialog_pvpshop { width: 95%; padding:12px; }
	#dialog_pvpshop .pvpshop-cart { flex-direction:column; }
	#dialog_pvpshop .pvpshop-cart .cart-summary { width:100%; }
}

#dialog_gameshop .gameshop-body { padding: 12px; }
#dialog_gameshop .gameshop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#dialog_gameshop .article-wrapper { text-align:center; display: flex;  margin: 0 auto; flex-direction: column; align-items: center; }

.gameshop-body { padding: 12px; }
.gameshop-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#FFFFFF; }
.gameshop-items { display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; max-height: 370px; overflow-y: auto; }
.gameshop-items li { width: 220px; background: rgba(255,255,255,0.02); border:1px solid #271B15; padding:8px; box-sizing:border-box; border-radius:4px; }
.gameshop-items li { position: relative; overflow: hidden; }
.gameshop-meta { display:inline-block; vertical-align: top; margin-left:8px; max-width:120px; color:#FFFFFF; }
.gameshop-add { margin-top:8px; }
.gameshop-add .btn { background:#FF6633; color:#fff; border:0; padding:6px 8px; border-radius:3px; cursor:pointer; }
.gameshop-cart { position: relative; margin-top:12px; border:1px solid #FF6633; padding:8px; background:#0b0b0b; color:#fff; border-radius:4px; }
.gameshop-cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.gameshop-cart-list { max-height:220px; overflow-y:auto; padding:0; margin:0; list-style:none; }
.gameshop-cart-item { display:flex; justify-content:space-between; align-items:center; padding:6px; border-bottom:1px solid rgba(255,102,51,0.08); }
.gameshop-cart-item .meta { flex:1; }
.gameshop-cart-item .controls { display:flex; gap:6px; align-items:center; }
.gameshop-qty { min-width:36px; text-align:center; background:#111; border:1px solid #333; color:#fff; padding:4px 6px; border-radius:3px; }
.gameshop-btn { background:transparent; border:1px solid #FF6633; color:#FF6633; padding:4px 6px; border-radius:3px; cursor:pointer; }
.gameshop-remove { color:#ff4444; border-color:#ff4444; }
.gameshop-total { text-align:right; font-weight:700; margin-top:8px; }

/* small responsive adjustments */
@media (max-width:720px){
	.gameshop-items li { width: 100%; }
	.gameshop-cart-list { max-height: 160px; }
}

/* Price overlay across the item on hover using data-price attribute */
.gameshop-items li::after {
	content: attr(data-price) " points";
	position: absolute;
	top: 5%;
	left: 0;
	right: 0;
	padding: 8px 10px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border-top: 1px solid rgba(255,102,51,0.25);
	transform: translateY(100%);
	transition: transform 170ms ease, opacity 170ms ease;
	opacity: 0;
	text-align: center;
	font-weight: 700;
}
.gameshop-items li:hover::after { transform: translateY(0); opacity: 1; }

#imageInput {
	position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}