.game-grid {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 12px;}

.game-card {display: flex; flex-direction: column; min-width: 0; height: 100%; border: 0; background: transparent; box-shadow: none;}

.card-img {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); background: #d9cfbb;}

.card-link {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}

.card-thumb-img {display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; transition: filter 0.15s ease, transform 0.15s ease;}

.game-card:hover .card-thumb-img {filter: contrast(1.06);}

.card-body {display: flex; flex: 1; flex-direction: column; gap: 4px; text-align: center; padding: 8px 1px 0;}

.card-title {margin: 0; color: var(--text); font-family: var(--head); font-size: 15px; font-weight: 700; line-height: 1.25;}

.card-title a {color: inherit; text-decoration: none;}

.card-title a:hover {color: var(--red);}

.game-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 1px; color: var(--muted); font-family: var(--head); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.35px; text-transform: uppercase; justify-content: center;}

.game-meta-separator {opacity: 0.6;}

.btn-play {display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 5px; border: 0; background: transparent; color: var(--red); font-family: var(--head); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none;}

.btn-play::before {content: "▶ "; font-size: 9px;}

.btn-play:hover {text-decoration: underline; text-underline-offset: 3px;}

body.dark .card-img {background: #0c0c0a;}

body.dark .btn-play {color: #ff5378;}

@media (max-width: 980px) {
  .game-grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
}

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

@media (max-width: 520px) {
  .game-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 9px;}

  .card-title {font-size: 14px;}

  .game-meta {font-size: 11px;}

  .btn-play {font-size: 11px;}
}

.pagination {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 42px;}

.pagination-pages {display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}

.pagination-number, .pagination-prev, .pagination-next {display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--surface); font-family: var(--body); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;}

.pagination-number {min-width: 36px; padding: 0 8px;}

.pagination-prev, .pagination-next {padding: 0 13px;}

.pagination-number:hover, .pagination-prev:hover, .pagination-next:hover {border-color: var(--line-dark); color: var(--red); background: var(--surface2);}

.pagination-number.is-current {border-color: var(--text); color: var(--surface); background: var(--text); cursor: default;}

.pagination-dots {display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 36px; color: var(--muted); font-size: 13px; line-height: 1;}

@media (max-width: 600px) {
  .pagination {gap: 8px; margin-top: 34px;}

  .pagination-prev, .pagination-next {padding: 0 10px;}
}

.taxonomy-filter {margin: 22px 0 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}

.taxonomy-filter-row {display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start;}

.taxonomy-filter-row + .taxonomy-filter-row {margin-top: 10px;}

.taxonomy-filter-label {padding-top: 3px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase;}

.taxonomy-filter-links {display: flex; flex-wrap: wrap; gap: 4px 16px;}

.taxonomy-filter-links a {position: relative; color: var(--text2); font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none;}

.taxonomy-filter-links a:hover {color: var(--red);}

.taxonomy-filter-links a.is-active {color: var(--text); font-weight: 700;}

.taxonomy-filter-links a.is-active::after {content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--red);}

@media (max-width: 640px) {
  .taxonomy-filter {margin: 18px 0 24px;}

  .taxonomy-filter-row {grid-template-columns: 1fr; gap: 5px;}

  .taxonomy-filter-row + .taxonomy-filter-row {margin-top: 14px;}

  .taxonomy-filter-label {padding-top: 0;}

  .taxonomy-filter-links {gap: 5px 14px;}

  .taxonomy-filter-links a {font-size: 13px;}
}

.home-intro {padding: 24px 0 26px; background: transparent; text-align: left;}

.home-intro h1 {margin: 0 0 9px; font-family: var(--head); font-size: clamp(27px, 3vw, 38px); line-height: 1.16; letter-spacing: -.025em;}

.home-intro p {max-width: 690px; margin: 0; color: var(--text2); font-size: 15px; line-height: 1.65;}

.home-collection {margin: 0 0 48px; padding: 0; background: transparent;}

.home-collection .platform-title, .home-guide .platform-title {margin: 0 0 8px; font-family: var(--head); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -.015em;}

.home-collection > p {max-width: 710px; margin: 0 0 20px; color: var(--text2); font-size: 14px; line-height: 1.6;}

.home-game-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none;}

.home-game-grid .home-game-card {display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; min-width: 0; height: auto; min-height: 170px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: none; transition: border-color .15s ease;}

.home-game-grid .card-img {display: block; width: 100%; height: 100%; min-height: 148px; aspect-ratio: auto; overflow: hidden; border: 0; border-radius: 2px; background: var(--surface2);}

.home-game-grid .card-link {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}

.home-game-grid .card-thumb-img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;}

.home-game-grid .home-card-no-image {display: flex; min-height: 148px; align-items: center; justify-content: center; padding: 10px; color: var(--muted); font-size: 12px; text-align: center;}

.home-game-grid .card-body {display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 0; padding: 3px 2px 3px 0; text-align: left;}

.home-game-grid .card-title {display: -webkit-box; width: 100%; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text); font: 700 16px/1.3 var(--head); letter-spacing: -.01em; overflow-wrap: anywhere;}

.home-game-grid .card-title a {color: inherit; text-decoration: none;}

.home-game-grid .card-title a:hover {color: var(--accent, var(--red));}

.home-game-grid .game-meta {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; color: var(--muted); font: 500 12px/1.4 var(--body); letter-spacing: 0; text-transform: none;}

.home-game-grid .home-card-description {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 0 12px; color: var(--text2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;}

.home-game-grid .btn-play {display: inline-flex; align-items: center; align-self: flex-end; min-height: 27px; margin: auto 0 0 auto; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--accent, var(--red)); font: 700 12px/1.4 var(--body); letter-spacing: 0; text-transform: none; text-decoration: none;}

.home-game-grid .btn-play::before {content: none;}

.home-game-grid .btn-play::after {content: " →"; margin-left: 5px;}

.home-game-grid .btn-play:hover {color: var(--text); text-decoration: underline; text-underline-offset: 3px;}

.home-game-grid a:focus-visible {outline: 2px solid var(--accent, var(--red)); outline-offset: 3px;}

.home-guide {max-width: 850px; margin: 10px 0 50px; padding: 26px 0 0; border-top: 1px solid var(--line); background: transparent;}

.home-guide p {margin: 0 0 14px; color: var(--text2); font-size: 14px; line-height: 1.7;}

.home-guide h3 {margin: 25px 0 8px; color: var(--text); font: 700 17px/1.35 var(--head);}

body.dark .home-game-grid .home-game-card {background: var(--surface); box-shadow: none;}

body.dark .home-game-grid .card-img {background: var(--surface2);}

body.dark .home-game-grid .btn-play {color: #83c996; background: transparent; border: 0;}

@media (max-width: 980px) {
  .home-game-grid {grid-template-columns: minmax(0,1fr);}

  .home-game-grid .home-game-card {grid-template-columns: 190px minmax(0,1fr); min-height: 160px;}
}

@media (max-width: 600px) {
  .home-intro {padding: 16px 0 21px;}

  .home-intro p {font-size: 14px;}

  .home-collection {margin-bottom: 35px;}

  .home-game-grid {gap: 10px;}

  .home-game-grid .home-game-card {grid-template-columns: minmax(0, 39%) minmax(0,1fr); gap: 11px; min-height: 142px; padding: 8px;}

  .home-game-grid .card-img {min-height: 126px;}

  .home-game-grid .card-title {font-size: 15px;}

  .home-game-grid .game-meta {margin-top: 5px; font-size: 11px;}

  .home-game-grid .home-card-description {margin: 7px 0 5px; font-size: 12px; -webkit-line-clamp: 2;}

  .home-game-grid .btn-play {font-size: 12px;}
}

@media (max-width: 370px) {
  .home-game-grid .home-game-card {grid-template-columns: 110px minmax(0,1fr); gap: 9px;}

  .home-game-grid .card-img {min-height: 120px;}

  .home-game-grid .home-card-description {-webkit-line-clamp: 2;}
}

@media (prefers-reduced-motion: reduce) {
  .home-game-grid .home-game-card {transition: none;}
}

.home-game-grid {gap: 17px;}

.home-game-grid .home-game-card {border: 2px solid var(--ui-strong-border, var(--line-dark)); border-radius: 2px; padding: 12px; gap: 14px; min-height: 180px; background: var(--surface); box-shadow: 3px 3px 0 var(--ui-shadow, #07100e); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;}

.home-game-grid .card-img {border: 1px solid var(--line-dark); border-radius: 0; min-height: 150px; background: var(--surface2);}

.home-game-grid .card-thumb-img {transition: none;}

.home-game-grid .card-title {font-size: 17px; font-weight: 700; line-height: 1.32; letter-spacing: -.02em;}

.home-game-grid .game-meta {font-size: 12px; margin-top: 7px;}

.home-game-grid .home-card-description {margin: 9px 0 12px; font-size: 13px; line-height: 1.55;}

.home-game-grid .btn-play {min-height: 31px; align-self: flex-end; margin: auto 0 0 auto; padding: 6px 10px; border: 1px solid var(--ui-strong-border, var(--line-dark)); border-radius: 0; background: var(--surface2); color: var(--text); font: 700 12px/1.35 var(--head); text-decoration: none;}

.home-game-grid .btn-play::after {content: " →"; margin-left: 3px;}

.home-game-grid .btn-play:hover {color: var(--bg); background: var(--accent); border-color: var(--accent); text-decoration: none;}

body.dark .home-game-grid .btn-play {color: var(--text); background: var(--surface2); border: 1px solid var(--ui-strong-border);}

body.dark .home-game-grid .btn-play:hover {color: #071b14; background: var(--accent); border-color: var(--accent);}

.pagination-number, .pagination-prev, .pagination-next {border: 1px solid var(--ui-strong-border, var(--line-dark)); border-radius: 0; box-shadow: 2px 2px 0 var(--ui-shadow, #07100e); font-family: var(--head);}

.pagination-number:hover, .pagination-prev:hover, .pagination-next:hover {border-color: var(--accent); color: var(--accent);}

.pagination-number.is-current {background: var(--accent); color: var(--surface); border-color: var(--accent); box-shadow: none;}

@media (max-width: 600px) {
  .home-game-grid {gap: 13px;}

  .home-game-grid .home-game-card {padding: 9px; gap: 11px; min-height: 148px; box-shadow: 2px 2px 0 var(--ui-shadow);}

  .home-game-grid .card-img {min-height: 126px;}

  .home-game-grid .card-title {font-size: 15px;}

  .home-game-grid .btn-play {font-size: 11px; min-height: 28px; padding: 4px 7px;}
}

@media (prefers-reduced-motion: reduce) {
  .home-game-grid .home-game-card {transition: none;}
}

.card-img, .home-game-grid .card-img {position: relative; border: 3px solid #101b17; border-radius: 12px 4px 10px 4px; background: var(--surface2); box-shadow: 3px 3px 0 #15803d, 6px 6px 0 #101b17; transition: transform .16s ease, box-shadow .16s ease;}

.home-game-grid .home-game-card {padding-right: 17px; padding-bottom: 17px;}

body.dark .card-img, body.dark .home-game-grid .card-img {background: var(--surface2);}

@media (hover: hover) and (pointer: fine) {
  .game-card:hover .card-img {transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #15803d, 7px 7px 0 #101b17;}
}

@media (max-width: 600px) {
  .card-img, .home-game-grid .card-img {border-width: 2px; border-radius: 7px 3px 6px 3px; box-shadow: 2px 2px 0 #15803d, 4px 4px 0 #101b17;}

  .home-game-grid .home-game-card {padding-right: 12px; padding-bottom: 12px;}
}

@media (prefers-reduced-motion: reduce) {
  .card-img, .home-game-grid .card-img {transition: none;}

  .game-card:hover .card-img {transform: none;}
}

.card-title {font-size: 16px; line-height: 1.4;}

.game-meta {font-size: 13px; line-height: 1.5;}

.home-intro p {font-size: 16px; line-height: 1.7;}

.home-list-header .home-section-intro {font-size: 15px; line-height: 1.65;}

.home-game-count {font-size: 13px;}

.home-game-grid .card-title {font-size: 18px; line-height: 1.4;}

.home-game-grid .game-meta {font-size: 13px; line-height: 1.5;}

.home-game-grid .home-card-description {font-size: 15px; line-height: 1.6;}

.home-game-grid .btn-play {font-size: 13px; min-height: 34px;}

.taxonomy-filter-label {font-size: 13px;}

.taxonomy-filter-links a {font-size: 15px;}

.pagination-number, .pagination-prev, .pagination-next {font-size: 14px;}

@media (max-width: 600px) {
  .card-title {font-size: 15px;}

  .game-meta {font-size: 12px;}

  .home-intro p {font-size: 15px;}

  .home-list-header .home-section-intro {font-size: 14px;}

  .home-game-grid .card-title {font-size: 16px; line-height: 1.35;}

  .home-game-grid .game-meta {font-size: 12px;}

  .home-game-grid .home-card-description {font-size: 13px; line-height: 1.55;}

  .home-game-grid .btn-play {font-size: 12px; min-height: 32px;}

  .taxonomy-filter-links a {font-size: 14px;}
}