/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f2f5f9;
  color: #333;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.modal-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
}

[hidden] {
  display: none !important;
}

ul, ol {
  list-style: none;
}

/* ===== CUSTOM FONT (iconfont style) ===== */
@font-face {
  font-family: "iconfont";
  src: url("data:font/woff2;base64,dummy") format("woff2");
}

/* ===== UTILITY ===== */
.container {
  width: 100%;
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.container-privacy-box {
  padding-top: 20px;
  padding-bottom: 40px;
  flex: 1;
  height: 100%;
   min-height: 100vh;
  background-image: url("assets/bg_background.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.container-box {
  padding-top: 20px;
  padding-bottom: 40px;
  background-image: url("assets/bg_background.png");
  background-repeat: repeat;
  background-position: top;
  background-size: contain;
}

@media (max-width: 767px) {
  .container-box {
    padding-top: 10px;
    
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  /* font-weight: 400;

  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif; */
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.09);
  height: 64px;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-left: 20px;
  padding-right: 20px;
  gap: 40px;
}

@media (max-width: 767px) {
  .header-main {
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  object-fit: contain;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.header-search-form {
  flex: 1;
  max-width: 240px;
  height: 40px;
  border-radius: 36px;
  background: #f2f5f9;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 580px) {
  .header-search-form {
    flex: initial;
    max-width: initial;
    height: initial;
    background: transparent;
  }
}

.header-search-form input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  font-size: 10px;
}

.header-search-form input::placeholder {
  color: #FFFFFF80;
  letter-spacing: 1px;
  font-size: 10px;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
}

.header-search-form button {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #4181ba;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}

@media (max-width: 580px) {
  .header-search-form input,
  .header-search-form .search-placeholder {
    display: none;
  }

  .header-search-form {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-search-form button {
    position: static;
    width: 40px;
    height: 40px;
  }

  .header-search-form.search-open {
    position: absolute;
    left: 16px;
    right: 66px;
    z-index: 2;
    width: auto;
    height: 40px;
    border-radius: 36px;
    background: #f2f5f9;
  }

  .header-search-form.search-open input {
    display: block;
  }

  .header-search-form.search-open button {
    position: absolute;
  }
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: #4181ba;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 1rem;
  border: none;
}

.icon-button:hover {
  background: #e4e9f0;
}

.icon-button .iconfont {
  font-size: inherit;
}

.language-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 36px;
  background: #f2f5f9;
  color: #333;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s;
  border: none;
}

.language-trigger:hover {
  background: #e4e9f0;
}

.language-trigger .iconfont {
  font-size: 1.2rem;
}

@media (max-width: 580px) {
  .language-trigger span:last-child {
    display: none;
  }
  .language-trigger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
  }
}

/* ===== MAIN CONTENT ===== */
.main-shell {
  padding: 20px 0 40px;
  min-height: 60vh;
  flex: 1;
}

.hero-banner {
  /* background: radial-gradient(circle at top left, rgba(105, 180, 255, 0.24), transparent 24%),
              linear-gradient(135deg, #0f172a 0%, #121a34 42%, #1f2a4b 100%);
  border-radius: 28px; */
  /* padding: 40px 32px; */
  /* color: #f8fbff; */
  margin-bottom: 28px;
}

/* .hero-banner .hero-copy { */
  /* max-width: 740px; */
/* } */

.hero-banner h1 {
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  font-size: clamp(35px, 4vw, 50px);
  line-height: 1.0;
  font-weight: 900;
  color: #E5E1E4;
  margin-bottom: 14px;
}

.hero-banner h1 span {
  display: inline-block;
  background: linear-gradient(90deg, #00F2FF, #DCB8FF);
  font-size: clamp(35px, 4vw, 50px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-banner p {
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;

  font-size: 20px;
  color: #B9CACB;
  letter-spacing: 0.5px;
  line-height: 1.4;
}


/* ===== HOME PAGE ===== */
.top-info-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .top-info-action {
    margin-bottom: 12px;
    align-items: center;
  }
}

.top-info-action dl {
  flex: 1;
  min-width: 1px;
}

.top-info-action dl dt {
  font-size: 1.4rem;
  font-weight: 900;
  color: #222;
}

.top-info-action dl dd {
  font-size: 1rem;
  color: #878e93;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .top-info-action dl dd {
    display: none;
  }
}

.view-toggle {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: linear-gradient(90deg, #5dcaff, #2f80e6);
  border-radius: 8px;
}

.view-toggle-inner {
  display: flex;
  background: #fff;
  border-radius: 6px;
  padding: 4px;
  gap: 6px;
}

.view-toggle a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: #4181ba;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.view-toggle a.active {
  background: linear-gradient(90deg, #4cc5ff, #2f80e6);
  color: #fff;
}

/* ===== CATEGORY STRIP ===== */
.category-strip {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 20px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

@media (max-width: 700px) {
  .category-strip {
    margin-bottom: 12px;
  }
}

/* Fade overlay on right side – shows when there's content to scroll */
.category-strip .strip-fade-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left, rgba(242,245,249,1), rgba(242,245,249,0));
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Fade overlay on left side – shows when scrolled to right */
.category-strip .strip-fade-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(242,245,249,1), rgba(242,245,249,0));
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 700px) {
  .category-strip .strip-fade-right,
  .category-strip .strip-fade-left {
    width: 24px;
  }
}

.category-strip-inner {
  display: flex;
  gap: 10px;
  padding: 6px 0 10px;
}

.category-strip.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.category-strip.dragging .category-pill {
  pointer-events: none;
}

.category-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  border-radius: 24px;
  border: 1px solid #d2dce5;
  background: #fff;
  color: #224565;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  box-shadow: none;
}

.category-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.category-pill:hover {
  background: #e4f2ff;
  border-color: #85c5ff;
}

.category-pill.active {
  background: linear-gradient(90deg, #4cc5ff, #2f80e6);
  border-color: #85c5ff;
  color: #fff;
  box-shadow: none;
}

.category-pill.active img {
  filter: brightness(100) grayscale(100%);
}

@media (max-width: 700px) {
  .category-pill {
    flex-direction: column;
    height: 66px;
    gap: 2px;
    padding: 10px 24px;
    border-radius: 16px;
    justify-content: center;
  }
}

/* ===== GAME GRID ===== */
.games-list {
  margin-top: 8px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .game-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.game-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.game-card .card-thumb {
  position: relative;
  width: 100%;
  height: 390px;
  overflow: hidden;
  background: #f5f5f5;
}

.game-card .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.game-card:hover .card-thumb img {
  transform: scale(1.08);
}

.game-card .card-blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4.06px);
  -webkit-backdrop-filter: blur(4.06px);
  pointer-events: none;
  z-index: 1;
}

.game-card .card-body {
  position: absolute;
  margin-bottom: 0px;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  
}

.meta-grid li strong {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-weight: 600;
}

.meta-grid li strong img {
    width: 20px;   /* અથવા 18px */
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.game-card .game-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category Badge at TOP of card */
.game-card .game-category {
  /* hidden by default, only show when it has data-category */
  display: none;
}
.game-card .game-category[data-category] {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: #fff;
}

.game-card .game-category[data-category="action"] { background: #D1BCFF; color: #6944b9;}
.game-card .game-category[data-category="adventure"] { background: #E1FDFF; color: #2fabb4;}
.game-card .game-category[data-category="casual"] { background: #F9FFA6; color: #5B5D00;}
.game-card .game-category[data-category="puzzle"] { background: #FFB4AB; color: #762626;}
.game-card .game-category[data-category="racing"] { background: #FBB5B5; color: #762626;}
.game-card .game-category[data-category="rpg"] { background: #B3FEFE; color: #045252;}
.game-card .game-category[data-category="role playing"] { background: #EEEFF5; color: #333B67;}
.game-card .game-category[data-category="simulation"] { background: #EEEFF5; color: #333B67;}
.game-card .game-category[data-category="strategy"] { background: #E1FDFF; color: #07555B;}

/* Game title in middle area */
.game-card .game-title {
  margin: 0px;
  padding-right: 4px;
}

/* Rating pill at top-right */
.game-card .game-rating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  /* background: rgba(255, 255, 255, 0.95); */
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  /* color: #111827; */
  /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); */
}
.game-card .game-rating .stars {
  display: inline-flex;
  gap: 2px;
  font-size: 0.84rem;
  color: #f59e0b;
}
.game-card .game-rating .stars span {
  font-size: 0.84rem;
}

.game-card .card-list-copy {
  display: none;
}

.game-card.is-hidden {
  display: none;
}

/* ===== LIST VIEW ===== */
.games-list.list-mode .game-grid {
  grid-template-columns: 1fr;
}

.games-list.list-mode .game-card {
  flex-direction: row;
  align-items: center;
  padding: 12px;
  gap: 12px;
}

.games-list.list-mode .game-card .card-thumb {
  width: 80px;
  height: 80px;
  aspect-ratio: 1;
  border-radius: 12px;
  flex-shrink: 0;
}

.games-list.list-mode .game-card .card-body {
  padding: 0;
  flex: 1;
}

.games-list.list-mode .game-card .game-title {
  font-size: 1rem;
}

.games-list.list-mode .game-card .card-list-copy {
  display: block;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .games-list.list-mode .game-card .card-thumb {
    width: 64px;
    height: 64px;
  }
}

/* ===== STARS ===== */
.stars {
  display: inline-flex;
  gap: 2px;
  color: #ddd;
}

.stars .filled {
  color: #ffbb32;
}

.stars .half {
  color: #ffbb32;
}

.stars .empty {
  color: #ddd;
}

/* ===== LOAD MORE ===== */
.load-more {
  display: block;
  width: 300px;
  height: 48px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, #4cc5ff, #2f80e6);
  border: none;
  border-radius: 30px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.load-more[hidden] {
  display: none;
}

.load-more:hover {
  box-shadow: 0 0 12px rgba(54, 160, 255, 0.5);
}

.load-more.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.empty-state h2 {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 8px;
}

.empty-state p {
  color: #999;
}

/* ===== DETAIL PAGE ===== */
.detail-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 1128px) {
  .detail-layout {
    grid-template-columns: 1fr 300px;
  }
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-card {
  background: #FFFFFF08;
  -webkit-backdrop-filter: blur(3.4px);
  backdrop-filter: blur(3.4px);
  border: 1px solid #FFFFFF33;

  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.detail-card h2{
    color: #00F2FF;
    font-size: 20px;
    font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
    margin-bottom: 10px;
  }

@media (max-width: 767px) {
  .detail-card {
    padding: 14px;
  }
}

.game-info {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.game-info .info-thumb {
  width: 80px;
  height: 80px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f5f5;
}

.game-info .info-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-info .info-content {
  flex: 1;
  min-width: 0;
}

.game-info h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;

}

.game-info .rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.game-info .rating-row .stars {
  font-size: 0.9rem;
}

.game-info .rating-row .rating-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
}

.game-info .game-summary {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .game-info {
    flex-direction: column;
  }

  .game-info .info-thumb {
    width: 100px;
    height: 100px;
  }
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.meta-grid li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #FFFFFF0F;
  border-radius: 8px;
}

.meta-grid li strong {
  font-size: 0.85rem;
  color: #fff;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  font-weight: 500;
  min-width: 70px;
}

.meta-grid li span {
  font-size: 0.85rem;
  color: #FFFFFF99;
  line-height: 1;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  font-weight: 500;
  text-align: right;
}

@media (max-width: 600px) {
  .meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== DESCRIPTION ===== */
.description-card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #00F2FF;
  margin-bottom: 12px;
}

.description-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  margin-bottom: 12px;
}

.rich-copy {
  color: #FFFFFF99;
  line-height: 1.7;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  font-size: 0.95rem;
}

.rich-copy h3 {
  font-size: 1.1rem;
  color: #333;
  margin: 16px 0 8px;
}

.rich-copy h3:first-child {
  margin-top: 0;
}

.rich-copy p {
  margin-bottom: 10px;
  color: #FFFFFFCC;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
}

.rich-copy.collapsed {
  max-height: 150px;
  overflow: hidden;
  position: relative;
}

.rich-copy.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* background: linear-gradient(transparent, #FFFFFF08); */
}

/* .read-more {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: #fff;

  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
} */

.read-more {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: none;
  cursor: pointer;

  font-size: 0.9rem;
  font-weight: 600;

  background: linear-gradient(90deg, #00F2FF, #DCB8FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.read-more:hover {
  text-decoration: underline;
}

/* ===== DOWNLOAD SECTION ===== */
.download-card h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #00F2FF;
  margin-bottom: 12px;
}

.verified {
  margin-bottom: 16px;
}

.verified dt {
  font-size: 0.9rem;
  color: #16b193;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.verified dd {
  font-size: 0.85rem;
  color: #FFFFFF99;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  line-height: 1.5;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.024%;
  padding: 12px 130px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 400;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
}

.download-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 130px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
}

.download-play-btn.primary {
  background: linear-gradient(90deg, #4cc5ff, #2f80e6);
  /* background: #FFFFFF0F; */
  color: #fff;
  
  box-shadow: 0 2px 8px rgba(44, 144, 230, 0.3); 
}

.download-play.primary:hover {
  box-shadow: 0 4px 16px rgba(44, 144, 230, 0.4);
  transform: translateY(-1px);
}

.download-btn.primary {
  /* background: linear-gradient(90deg, #4cc5ff, #2f80e6); */
  background: #FFFFFF0F;
 flex:1;
  /* color: #fff;
  
  box-shadow: 0 2px 8px rgba(44, 144, 230, 0.3); */
}

.download-btn img {
    margin-right: 8px;
}

.download-btn.primary:hover {
  box-shadow: 0 4px 16px rgba(44, 144, 230, 0.4);
  transform: translateY(-1px);
}

.download-btn.secondary {
  background: #FFFFFF0F;
 flex:1;
  /* color: #333;
  border: 1px solid #e0e4e8; */
}

.download-btn.secondary:hover {
  background: #FFFFFF99;
}

/* ===== PREVIEW STRIP ===== */
.preview-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.preview-strip img {
  width: 100%;
  aspect-ratio: 9 / 12;
  object-fit: cover;
  border-radius: 12px;
  background: #e8eef4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.preview-strip img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

@media (min-width: 768px) {
  .preview-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 400px) {
  .preview-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ===== LIGHTBOX ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  backdrop-filter: blur(4px);
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-image {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.4rem;
  color: #fff;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
  line-height: 1;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

@media (max-width: 600px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }

  .lightbox-close {
    top: 12px;
    right: 16px;
    font-size: 2rem;
  }
}

/* ===== SIDEBAR ===== */
.detail-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1128px) {
  .detail-aside {
    position: sticky;
    top: 1px;
    align-self: start;
  }
}

.ad-note {
  text-align: center;
  font-size: 0.75rem;
  color: #999;
  text-transform: lowercase;
}

.side-card {
  background: #FFFFFF08;
  -webkit-backdrop-filter: blur(3.4px);
  backdrop-filter: blur(3.4px);
  border: 1px solid #FFFFFF33;
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.side-card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff515b;
  display: inline-block;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hot-list a {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 5px;
  padding: 10px 10px 10px 20px;
  border-radius: 12px;
  background: #FFFFFF0F;
  transition: background 0.2s;
}

.hot-list a:hover {
  background: #FFFFFF24;
}

.hot-list img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 10px;
  background: #f0f0f0;
}

.hot-list .hot-info {
  flex: 1;
  min-width: 0;
}

.hot-list .hot-info strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-list .hot-info em {
  display: block;
  font-size: 0.8rem;
  color: #FFFFFF99;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  font-style: normal;
}

.hot-list .hot-info small {
  display: block;
  font-size: 0.75rem;
  color: #999;
  margin-top: 2px;
}

/* ===== RELATED SECTION ===== */
.related-section {
  margin-top: 32px;
}

.general-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.general-guide h2 {
  font-size: 1.3rem;
  font-weight: 900;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  line-height: 1;
  color: E5E1E4;
}

.general-guide .more-link {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
}

.general-guide .more-link:hover {
  color: #4181ba;
}

/* ===== FOOTER ===== */
.site-footer {
  background: #fff;
  border-top: none;
  padding: 24px 0;
  margin-top: 40px;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 36px;
}

.footer-nav {
  flex: 1;
  min-width: 1px;
  display: flex;
  align-items: center;
  gap: 6px 24px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .footer-nav {
    flex: initial;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    width: 100%;
  }

  .footer-nav a {
    flex: 1;
    text-align: center;
  }
}

.footer-nav a,
.footer-nav button {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}

.footer-nav a:hover,
.footer-nav button:hover {
  text-decoration: underline;
}

.footer-copy {
  width: 100%;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  margin-top: 8px;
}

.footer-language-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 24px;
  background-color: #4181ba;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.footer-language-btn:hover {
  background-color: #346fa3;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-overlay.active {
  display: flex;
}

.modal-panel {
  position: relative;
  width: min(400px, 100%);
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-panel.modal-small {
  width: min(360px, 100%);
  padding: 24px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f2f5f9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 1rem;
}

.modal-close:hover {
  background: #e4e9f0;
}

.modal-panel h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

/* ===== CONTACT FORM ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e0e4e8;
  background: #f8f8f8;
  color: #333;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4181ba;
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .submit-btn {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #4cc5ff, #2f80e6);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.contact-form .submit-btn:hover {
  opacity: 0.9;
}

.form-message {
  text-align: center;
  color: #16b193;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ===== LANGUAGE LIST ===== */
.language-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  margin-top: 8px;
}

.language-list a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #333;
  font-size: 0.9rem;
  transition: background 0.2s;
  border-bottom: 1px solid #eee;
}

.language-list a:hover {
  background: rgba(0, 0, 0, 0.05);
}

.language-list a.active {
  color: #4181ba;
  font-weight: 600;
}

.language-list a.active::after {
  content: " ✓";
  color: #4181ba;
}


/* ===== PAGE CARD ===== */
.page-card {
  /* background: #fff;
  border-radius: 16px;

  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */

   border: 1px solid #FFFFFF33;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(3.4px);
  backdrop-filter: blur(3.4px);
  background: #FFFFFF08;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.button-box {
  background: #FFFFFF0F;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  width: 100%;
}

.page-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  color: #00F2FF;
  margin-bottom: 10px;
}

.page-card p {
  color: #FFFFFF99;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  line-height: 1.7;
}

.primary-link {
  display: inline-block;
  margin-top: 12px;
  color: #4181ba;
  font-weight: 600;
}

.primary-link:hover {
  text-decoration: underline;
}

/* ===== DOWNLOAD PAGE ===== */
.download-page {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  border: 1px solid #FFFFFF33;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(3.4px);
  backdrop-filter: blur(3.4px);
  background: #FFFFFF08;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.download-page .download-thumb {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFFFFF24;
}

.download-page .download-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download-page .download-content {
  flex: 1;
  min-width: 250px;
}

.download-page .section-kicker {
  font-size: 0.85rem;
  color: #4181ba;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.download-page h1 {
  font-size: 1.8rem;
  color: #fff;
  font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 4px;
}

.download-page .download-content > p {
  color: #FFFFFF99;
  font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif;
  line-height: 1.6;
  margin-top: 0px;
  margin-bottom: 0px;
}
.button-box h2 {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif;
    background: linear-gradient(90deg, #00F2FF 0%, #DCB8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.download-actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
      width: 100%;

}


@media (max-width: 600px) {
  .download-page .download-thumb {
    width: 120px;
    height: 120px;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .game-grid {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .game-card .card-thumb {
    height: 280px;
  }

  .game-card .card-blur-overlay {
    height: 85px;
  }

  .game-card .card-body {
    padding: 6px 8px 8px;
    gap: 2px;
  }

  .game-card .game-title {
    font-size: 0.75rem;
  }

  .game-card .game-category {
    font-size: 0.65rem;
  }

  .game-card .game-rating {
    font-size: 0.65rem;
  }
}

@media (max-width: 420px) {
  .game-grid {
    gap: 6px;
  }

  .game-card .card-thumb {
    height: 200px;
  }

  .game-card .card-blur-overlay {
    height: 60px;
  }

  .game-card .card-body {
    padding: 4px 6px 6px;
  }

  .game-card .game-title {
    font-size: 0.65rem;
  }

  .game-card .game-category {
    font-size: 0.55rem;
  }

  .game-card .game-rating {
    font-size: 0.55rem;
  }

  .stars {
    display: none;
  }
}

/* ===== GAMEJUMPY DARK LIBRARY UI ===== */
:root {
  --gj-page: #08090f;
  --gj-panel: #0e1019;
  --gj-panel-soft: #141522;
  --gj-line: #252638;
  --gj-copy: #eceef8;
  --gj-muted: #898d9f;
  --gj-blue: #1898ff;
  --gj-cyan: #25e4d5;
}

body {
  background: var(--gj-page);
  color: var(--gj-copy);
}

.container { max-width: 1180px; }
.container-box { padding-top: 18px; padding-bottom: 28px; }
.main-shell { padding: 0; min-height: calc(100vh - 112px); }

.site-header {
  height: 60px;
  position: sticky;
  padding-left: 20px;
  background: #0b0c13;
  border-bottom: 1px solid #1c1e2c;
  box-shadow: none;
}

.menu-icon {
    width: 28px;   /* જરૂર મુજબ 20px, 24px, 28px */
    height: 28px;
    object-fit: contain;
    display: block;
}

.search-icon {
    width: 20px;   /* જરૂર મુજબ 20px, 24px, 28px */
    height: 20px;
    margin-left: 5px;
    object-fit: contain;
    display: block;
}

.header-main { height: 58px; max-width: 1180px; margin: 0 auto; padding: 0 20px; gap: 18px; }
.brand img { height: 45px; width: auto; }
.header-actions { gap: 10px; }

.header-search-form { backdrop-filter: blur(4.06px); -webkit-backdrop-filter: blur(4.06px); max-width: 245px; height: 30px; border-radius: 50px; background: #70707033; border: 1px solid #FFFFFF1A; }
.header-search-form input { padding: 0 35px 0 12px; color: #c7cad8; font-size: .72rem; }
.header-search-form input::placeholder { color: #6f7486; }
.header-search-form button { width: 32px; height: 30px; color: #8d92a4; font-size: .77rem; }
.icon-button { width: 30px; height: 30px;  }
.icon-button:hover { background: #23263a; }
.header-menu-wrap { position: relative; }
/* .menu-trigger { flex-direction: column; gap: 3px; }
.menu-trigger span { width: 14px; height: 1.5px;  border-radius: 2px; } */
.header-menu {
  backdrop-filter: blur(4.06px); -webkit-backdrop-filter: blur(4.06px);
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 150;
  width: 170px; padding: 8px; border: 1px solid #FFFFFF1A; border-radius: 16px;
  background: #70707033; box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.header-menu[hidden] { display: none; }
.header-menu .menu-title { padding: 8px 10px 7px; color: var(--gj-cyan); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.header-menu a, .header-menu button { display: block; width: 100%; padding: 9px 10px; font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif; border-radius: 4px; background: transparent; color: #B9CACB; font-size: .77rem; text-align: left; cursor: pointer; }
/* .header-menu a:hover, .header-menu button:hover { background: #24273a; color: #fff; } */

.top-info-action { margin: 0 0 12px; gap: 14px; align-items: center; }
.top-info-action dl dt { color: #f1f2f8; font-size: clamp(1.05rem, 2.5vw, 1.52rem); letter-spacing: -.035em; line-height: 1.1; }
.top-info-action dl dd { margin-top: 4px; color: #8c91a2; font-size: .76rem; }
.view-toggle { padding: 2px; border-radius: 4px; background: #202236; }
.view-toggle-inner { padding: 0; gap: 1px; background: transparent; border-radius: 3px; }
.view-toggle a { width: 25px; height: 25px; border-radius: 3px; color: #7e8497; font-size: .7rem; }
.view-toggle a.active { background: var(--gj-blue); color: #fff; }

.category-strip { margin-bottom: 35px; overflow: visible; }
.category-strip-inner { gap: 7px; padding: 0; flex-wrap: wrap; }
.category-strip .strip-fade-left, .category-strip .strip-fade-right { display: none; }
.category-pill { font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif; gap: 10px; padding: 6px 10px; border: 1px solid #292b3e; border-radius: 12px; background: #FFFFFF08; color: #FFFFFF; font-size: 15px; }
.category-pill img { width: 20px; height: px; }
.category-pill:hover { background: #202338; border-color: #3a3e57; }
.category-pill.active { background: #FFFFFF08; border-color: #FFFFFF; color: #eafbff; box-shadow: inset 0 0 0 1px rgba(37,228,213,.1); }

.games-list { margin-top: 0; }
.game-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; }
.game-card { position: relative; min-width: 0; border: 1px solid #252738; border-radius: 16px; background: #12141e; box-shadow: none; }
.game-card:hover { transform: translateY(-2px); border-color: #3b7798; box-shadow: 0 6px 16px rgba(0,0,0,.32); }
.game-card .card-thumb { height: 300px; background: #171a25; }
.game-card .card-thumb img { transition: transform .25s; }
.game-card .card-blur-overlay { height: 85px; background: rgba(0,0,0,.2); backdrop-filter: blur(4.06px); -webkit-backdrop-filter: blur(4.06px); }
.game-card .card-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 6px 7px 7px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 75px; gap: 1px; }
.game-card .game-title { font-family: "Liberation Serif Regular", "Liberation Serif", Georgia, serif; padding: 0px 10px 0px; color: #fff; font-size: 16px; font-weight: 50; margin: 0px; }
.game-card .game-category { display: none; }
.game-card .game-category[data-category] { 
  position: absolute; 
  top: 15px; 
  left: 15px; 
  z-index: 3; 
  padding: 4px 10px; 
  border-radius: 5px; 
  font-size: 0.55rem; 
  font-weight: 700; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  text-transform: uppercase; 
  letter-spacing: 0.04em; 
  line-height: 1.6; 
  color: #fff; 
}
.game-card .game-category[data-category="action"] { background: #D1BCFF; color: #6944b9; }
.game-card .game-category[data-category="adventure"] { background: #E1FDFF; color: #2fabb4; }
.game-card .game-category[data-category="casual"] { background: #F9FFA6; color: #5B5D00; }
.game-card .game-category[data-category="puzzle"] { background: #FFB4AB; color: #762626; }
.game-card .game-category[data-category="racing"] { background: #FBB5B5; color: #762626; }
.game-card .game-category[data-category="rpg"] { background: #B3FEFE; color: #045252; }
.game-card .game-category[data-category="role playing"] { background: #EEEFF5; color: #333B67; }
.game-card .game-category[data-category="simulation"] { background: #EEEFF5; color: #333B67; }
.game-card .game-category[data-category="strategy"] { background: #E1FDFF; color: #07555B; }
.game-card .game-rating { display: flex; align-items: center; gap: 4px; color: #fff; font-family: "Liberation Serif Bold", "Liberation Serif", Georgia, serif; font-size: 12px; }
.game-card .game-rating .stars { display: inline-flex; gap: 1px; font-size: .52rem; }
.game-card .game-rating .stars span { font-size: 12px; }
.stars { gap: 1px; font-size: 20px; }
.stars .filled, .stars .half { color: #f5b33c; }

.site-footer { margin-top: 0; padding: 17px 0; background: #0b0c13; border-top: 1px solid #1b1d2a; }
.footer-main { display: block; }
.footer-copy { margin: 0; color: #62687b; font-size: .66rem; }

.modal-overlay { background: rgba(1,2,6,.74); backdrop-filter: blur(4px); }
.modal-panel, .modal-panel.modal-small { border: 1px solid #2c3045; border-radius: 8px; background: #151722; box-shadow: 0 18px 45px rgba(0,0,0,.6); color: #edf0fa; }
.modal-panel h2 { color: #f0f2fa; }
.modal-close { background: #25283a; color: #eff1f9; }
.contact-form input, .contact-form textarea { border-color: #313548; background: #0e1018; color: #e5e8f1; }
.contact-form .submit-btn { border-radius: 5px; background: var(--gj-blue); }
.language-list a { color: #d4d7e2; border-color: #303344; }

@media (max-width: 768px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .header-main { padding-left: 12px; padding-right: 12px; }
  .brand img { height: 23px; }
  .category-strip { overflow-x: auto; scrollbar-width: none; }
  .category-strip-inner { flex-wrap: nowrap; padding-bottom: 2px; }
  .category-pill { flex-direction: row; height: auto; padding: 5px 9px; border-radius: 4px; }
  .top-info-action dl dd { display: block; }
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .game-card .card-thumb { height: 280px; }
  .game-card .card-blur-overlay { height: 85px; }
  .game-card .card-body { padding: 4px 5px 5px; }
  .game-card .game-title { font-size: .6rem; }
  .game-card .game-category, .game-card .game-rating { font-size: .55rem; }
}

@media (max-width: 420px) {
  .game-card .card-thumb { height: 200px; }
  .game-card .card-blur-overlay { height: 60px; }
  .game-card .game-title { font-size: .52rem; }
  .game-card .game-category, .game-card .game-rating { font-size: .48rem; }
  .stars { display: none; }
  .header-search-form { max-width: 145px; }
  .top-info-action dl dt { font-size: 1rem; }
  .top-info-action dl dd { font-size: .66rem; }
}