*, *::before, *::after {
    box-sizing: border-box;
}

body
{
	background-color: #000000;
	background-image: url("/images/black_scales.png");
	background-repeat: repeat;
	//background-size: cover;
	font-size: 10pt !important;
}

mark {
  background-color: #2196F3 !important;
  color: white !important;               
  padding: 2px 4px;  
  /*border-radius: 2px;*/        
  font-weight: bold;       
}

img.demo
{
	width: 178px;
	height: 100px;
	object-fit: cover;
}
.navBg
{
	background: rgb(39,41,48);
	background: radial-gradient(circle, rgba(39,41,48,1) 0%, rgba(15,15,15,1) 100%);
	color: #fff;
}

img.crop-center{
	width: 149px;
    height: 70px;
	object-fit: cover;
}

.rlsBadges
{
	width: 14px;
	height: 70px;
	writing-mode: sideways-lr;
	font-size: 7pt;
	display: flex;
	align-items: center;
	justify-content:center;
}

.rlsMoCover
{
	position:absolute;
	left:-250px;
	top: -330px;
	text-align: justify;
}

.breathing {
    display: inline-block;
    border-radius: 3px;
    margin-top: 3px;
    height: 12px;
    width: 12px;
    background-color: #9e9e9e;
    animation: breathe 1.5s ease-in-out infinite;
}

@keyframes breathe {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
}

/*################
topreleases#######
##################*/

/* Äußerer Bereich: enthält Pfeile und Scrollbereich */
.topgames-outer-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* volle Breite */
}

/* Innerer Bereich: Feste Breite für Covers */
.topgames-inner-wrapper {
  width: 1000px;
  overflow: hidden;
  position: relative;
}

.toprlsblock {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;       /* kannst du gern behalten */
  scroll-behavior: smooth;
  scrollbar-width: thin;    /* falls du die schmalen Scrollbars willst */
  scrollbar-color: #2196f3 #ffffff5e;
}

.toprls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.toprls a {
  scroll-snap-align: start;
}

/* Cover-Bilder */
.toprls img {
  /*width: 125px;*/
  width: 143px;
  height: auto;
  padding: 0 2px;
  flex: 0 0 auto;
  transition: 0.2s;
}

.toprls img:hover {
  filter: brightness(1.2);
}

.scroll-left,
.scroll-right {
  width: 50px;
  height: 174px;
  color: #2196f3;
  font-size: 32px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;

  border: none !important;      /* Border komplett weg */
  outline: none !important;     /* Outline komplett weg */
}

/* Radialer Verlauf für linken Pfeil */
.scroll-left {
  background: radial-gradient(
    circle at left center,
    rgba(33, 150, 243, 0.15),
    rgba(33, 150, 243, 0) 80%
  );
}

/* Radialer Verlauf für rechten Pfeil */
.scroll-right {
  background: radial-gradient(
    circle at right center,
    rgba(33, 150, 243, 0.15),
    rgba(33, 150, 243, 0) 80%
  );
}

.scroll-left:hover,
.scroll-right:hover {
  background: rgba(33, 150, 243, 0.3);
  color: white;
}

.scroll-left:disabled,
.scroll-right:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*################
Gamelist##########
##################*/

.mgame {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 0;
	text-align:left;
    background-color: #f1f1f1;
    align-items: center;
	transition: 0.2s;
}

.mgame:hover {
	filter: brightness(1.2);
}

.mgame li:first-child {
    width:149px;
	height:70px;
}

.mgame li:first-child img{
    width:149px;
}

.mgame li:last-child {
    display: flex;
    margin: 0 8px;
    gap: 20px;
    text-align: center;
}

.mtitel {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.minfo {
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/*################
badged#######
##################*/

.mbadges {
    width: 63px;
    background-color: #2196F3;
    font-size: 10px;
    color: #fff;
    transform: rotate(-0.25turn);
}


@media only screen and (max-width: 600px) {
	
.mgame {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mgame li:last-child {
    display: none;
}

/*
.w3-tiny {
	display:none;
}
*/

.comments a {
    text-decoration: underline;
}

.comments a:hover {
    text-decoration: none;
}

/* ── Release-Accordion ───────────────────────── */
.acc-arrow {
    transition: transform .15s;
    opacity: .6;
}

.acc-arrow.open {
    transform: rotate(180deg);
}