body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #0e0e0e; color: #f2f2f2; }
header, footer { background: #1a1a1a; padding: 20px; text-align: center; }


h1, h2, h3, h4, h5 { color: #ff4081; margin-bottom: 10px; }
h4 {font-size:24px;}
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; }
nav a { background: #292929; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-size: 0.9em; cursor: pointer; }
nav a:hover { background: #ff4081; color: #000; }
nav div{margin: 8px;}
.container { padding: 10px; max-width: 1200px; margin: auto; text-align: justify;}

.img_top{display: block;margin-left: auto;margin-right: auto;}
header .top_h1{color: #ff4081;  display: block;font-size: 2em;font-weight: bold;margin-top: 0.67em;margin-bottom: 0.67em;}

@media (min-width:1000px){.flag{margin-left:3px!important}}
.flag{width:16px;height:11px;background:url(graphics/flags.png) no-repeat;margin-left:10px;display:inline-block}
.flag.flag-cz{background-position:-16px 0}
.flag.flag-de{background-position:-32px 0}
.flag.flag-dk{background-position:-48px 0}
.flag.flag-es{background-position:0 -11px}
.flag.flag-fr{background-position:-16px -11px}
.flag.flag-it{background-position:-32px -11px}
.flag.flag-nl{background-position:-48px -11px}
.flag.flag-pl{background-position:0 -22px}
.flag.flag-ru{background-position:-16px -22px}
.flag.flag-se{background-position:-32px -22px}
.flag.flag-tr{background-position:-48px -22px}
.flag.flag-en{background-position:0 -33px}


.top-games {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 12px;}
@media (max-width: 600px) {.top-games {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 300px) {.top-games {grid-template-columns: 1fr;}}
.game-card { background: #1f1f1f; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); display: none; }
.game-card img { width: 100%; height: auto; border-radius: 10px; }
.cta-buttons { text-align: center; margin: 30px 0; }
.cta-buttons a { background: #ff4081; color: #000; padding: 15px 25px; margin: 5px; display: inline-block; border-radius: 5px; font-weight: bold; text-decoration: none; }
.cta-buttons a:hover { background: #ff75a0; }
 
footer p { font-size: 0.9em; color: #aaa; }
ul { padding-left: 20px; }
@media (max-width: 600px) {
  h1 { font-size: 1.5em; }
  .cta-buttons a { padding: 12px 18px; font-size: 0.9em; }
  nav a { font-size: 0.8em; padding: 8px 12px; }
}
a {color: #ff4081;text-decoration: none;}
a:hover {color: #fff;text-decoration: underline;}




.link-button {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-block;
}

.link-button:hover {
  color: #fff;
  background-color: #ff4081;
  text-decoration: none;
}


/*==================================================================================================*/
/*
https://www.toptal.com/designers/htmlarrows/arrows/
*/
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 0.9em;
}

.breadcrumb-label {
  color: #aaa;
  white-space: nowrap;
}

.breadcrumb-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}

.breadcrumb-list li {
  background-color: #1f1f1f;
  padding: 6px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.breadcrumb-list li:not(:last-child)::after {
  content: '\2192';
  margin-left: 8px;
  color: #666;
}

.breadcrumb-list a {
  color: #ff4081;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-list a:hover {
  color: #fff;
}



/*==================================================================================================*/

.game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 30px 0;
}

.game-entry {
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.game-entry img {
  width: 70%;
  max-width: 70%;
  height: auto;
  object-fit: cover;
  margin:auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.game-info {
  padding: 15px;
  color: #f2f2f2;
}

.game-info h4 {
  color: #ff4081;
  margin-top: 0;
  font-size:18px;
}

.download-link {
  color: #ff4081;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

.download-link:hover {
  text-decoration: underline;
}
 
/* Desktop: 2 columns, image left, content right */
@media (min-width: 768px) {
  .game-grid {
    grid-template-columns: 1fr 1fr;
  }

  .game-entry {
    flex-direction: row;
  }

  .game-entry img {
    width: 180px;
    height: auto;
    margin:0;
    object-fit: cover;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
  }

  .game-info {
    padding: 20px;
  }
}



/*==================================================================================================*/
.pagination-nav {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.pagination {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.pagination li a {
  display: inline-block;
  background-color: #1f1f1f;
  color: #ff4081;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size:18px;
}

.pagination li a:hover {
  background-color: #ff4081;
  color: #000;
}

.pagination li a.current,
.pagination li a[aria-current="page"] {
  background-color: #ff4081;
  color: #000;
  pointer-events: none;
}


/*==================================================================================================*/

.new_box_200_horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 20px 0;
}

.new_box_200_horizontal a {
  flex: 0 1 calc(16.66% - 12px); /* ~6 banners per row on desktop */
  max-width: 200px;
  display: block;
  text-align: center;
}

.new_box_200_horizontal img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.new_box_200_horizontal img:hover {
  transform: scale(1.05);
}

/* ? Mobile: 2 banners per row */
@media screen and (max-width: 800px) {
  .new_box_200_horizontal a {
    flex: 0 1 calc(33% - 12px);
  }
}
/* ? Mobile: 2 banners per row */
@media screen and (max-width: 600px) {
  .new_box_200_horizontal a {
    flex: 0 1 calc(50% - 12px);
  }
}



/*==================================================================================================*/
.top_games{text-align:center !important;font-size: 16px;overflow: hidden;height:179px;}
.top_games span{display:block;margin-bottom:8px;overflow: hidden;height:47px;}
.top_games span span{display:inline;}
.top_games_item img{display:block;}
.top_games_item a{font-size: 14px;}
.top_games_item{display:inline-block;margin-top:5px;}
.star{position:relative;top:5px;display:inline;font-size:34px;color: yellow;margin:0 10px;}
@media (max-width:600px){.top_games{ height:315px;}}


/*==================================================================================================*/
.game-description {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1px 10px;
  background-color: #1a1a1a;
  color: #f2f2f2;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  border-radius: 12px;
  text-align: justify;
}

.game-description h1 {
  text-align: center;
  font-size: 2em;
  color: #ff4081;
  margin-bottom: 20px;
}

.download-button {
  display: block;
  width: fit-content;
  margin: 0 auto 30px auto;
  background: linear-gradient(to bottom, #ff79a1, #ff4081);
  color: #000;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease;
}

.download-button:hover {
  background: linear-gradient(to bottom, #ffb0c7, #ff4081);
}

.game-preview {
  text-align: center;
  margin-bottom: 25px;
}

.game-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.game-text h2 {
  font-size: 1.3em;
  color: #ff4081;
  margin-top: 30px;
  margin-bottom: 10px;
}

.game-text p {
  font-size: 1em;
  margin-bottom: 20px;
}

.game-text strong {
  color: #ff79a1;
}




/*==================================================================================================*/

.comments{width:85%;margin:0 auto 20px auto;}
.comments h3{text-align: center !important;font-size:20px;margin:0 auto 15px auto;display: block;}
.comments_item{border-bottom:1px solid #eaa466;padding:10px 0;}
.comments_item div{font-weight: bold;}
.comments_item span{font-style: italic;}

/*==================================================================================================*/

.navbar {display:block; padding-left:4px; width:100%;  border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
@media (max-width: 850px) {.navbar {display:none}}

/*==================================================================================================*/

.menu_mobile {
  overflow: hidden;
  background-color: #3d3d3d;
  display: none;
  width: 100%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-family: Arial, sans-serif;
}

.menu_mobile a,
.menu_mobile span {
  float: left;
  display: block;
  color: #ff4081;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.menu_mobile a:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}

.menu_mobile .icon {
  display: none;
}

/* Initial responsive hiding of items */
@media screen and (max-width: 850px) {
  .menu_mobile {
    display: none;
  }

  .menu_mobile a:not(:first-child) {
    display: none;
  }

  .menu_mobile a.icon {
    float: right;
    display: block;
  }
}

/* When menu is open (responsive mode) */
@media screen and (max-width: 850px) {
  .menu_mobile {
    display: block;
  }

  .menu_mobile.responsive {
    position: relative;
  }

  .menu_mobile.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .menu_mobile.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/*==================================================================================================*/

.blog nav {
  margin: 30px 0;
}

.blog nav span {
  display: block;
  font-weight: bold;
  color: #f2f2f2;
  margin-top: 13px;
  font-size: 1.1em;
}

.blog nav ol {
  list-style: decimal inside;
  padding-left: 0;
  margin: 0;
}

.blog nav li {
  margin: 12px 0; /* increased spacing */
  line-height: 1.6; /* more vertical breathing room */
}

.blog nav a {
  color: #ff4081;
  text-decoration: none;
  font-weight: normal;
  transition: color 0.2s ease;
}

.blog nav a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.blog span[id] {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #888888;
  margin-top: 10px;
  line-height: 1.3;
}

header{padding:5px 0 10px 0;margin-bottom:10px;}


.blog header {font-size:20px;}

/*==================================================================================================*/
 .xxx {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.xxx .game-card img {
  max-width: 100%;
  max-height: 200px; /* adjust as needed */
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* Exactly 3 per row by giving each card 1/3 of row width */
.xxx .game-card {
  flex: 0 0 calc(33.333% - 20px); /* 3 per row with gap */
  box-sizing: border-box;
}

/* Tablet: 2 per row */
@media screen and (max-width: 768px) {
  .xxx .game-card {
    flex: 0 0 calc(50% - 20px);
  }
}

/* Mobile: 1 per row */
@media screen and (max-width: 480px) {
  .xxx .game-card {
    flex: 0 0 100%;
  }
}


/*==================================================================================================*/

.game-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  padding: 20px 0;
  max-width: 880px;
  margin: 0 auto;
}

.game-gallery a {
  width: 160px;
  height: auto;
  flex: 0 0 auto;
  display: block;
  text-align: center;
  box-sizing: border-box;
}

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

/* Tablet and below - center and flexible layout */
@media (max-width: 1000px) {
  .game-gallery {
    justify-content: center;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Mobile - show 2 images per row */
@media (max-width: 600px) {
  .game-gallery a {
    width: calc(50% - 10px); /* Two per row with gap */
  }
}




/*==================================================================================================*/
.game-row-layout {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin: 30px 0;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* ?? Gallery = Fixed width */
.game-gallery-box {
  width: 450px; /* was 320–390px */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Exact width for 3 in a row */
.game-gallery-box img {
  width: 140px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* ?? Text + Button */
.game-content-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Header */
.game-content-box h4 {
  font-size: 1.8em;
  color: #ff4081;
  margin: 0 0 15px;
}

/* CTA button */
.cta-button {
  background-color: #ff4081;
  color: #000;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 20px;
  width: fit-content;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #ff75a0;
  color: #fff;
}

/* Paragraph */
.game-description {
  color: #f2f2f2;
  line-height: 1.6;
  margin: 0;     
}

@media (max-width: 768px) {
  .game-row-layout {
    flex-direction: column;
    align-items: center;
  }

  .game-gallery-box {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .game-gallery-box img {
    width: 30vw;       /* Each image takes ~30% of viewport width */
    max-width: 120px;  /* Prevents them from growing too big */
    height: auto;
    border-radius: 6px;
  }

  .game-content-box {
    width: 100%;
    padding-top: 20px;
    text-align: center;
  }

  .game-content-box h4 {
    font-size: 1.6em;
    margin-bottom: 15px;
  }

  .game-description {
    text-align: left;
    padding: 0 15px;       
    text-align: justify;
  }
  .cta-button {
    margin-left: auto;
    margin-right: auto;
  }  
}


.game_video{margin:15px auto 5px auto;display: block;width:100%; height: auto;background-color:#000000}
@media (min-width:600px){.game_video{width:90%;}}


.formInputText{font-weight:bolder;font-size:12px;height:23px;text-align:left;width:550px}
.formInputSubmit{font-weight:bolder;font-size:12px;height:23px;text-align:center}
.formInputTextArea{font-weight:bolder;font-size:12px;height:70px;text-align:left;width:320px}
.formLabelError{color:red;font-family:verdana;font-size:12px}