/* ==========================================================================
   GamesYY / mobile template — layout-faithful rebuild (/m/)
   Keeps the original single-column scroll, vw-sized tiles, green chip bar
   and 3px green section underlines. Markup and CSS architecture are new.
   ========================================================================== */

:root {
  /* palette — sampled from /assets/m/css/style.css + per-page inline styles */
  --gbsm-shell: 1000px;
  --gbsm-ink: #333333;
  --gbsm-body: #888888;
  --gbsm-art-ink: #181a1b;
  --gbsm-art-body: #636772;
  --gbsm-page: #f6f6f6;
  --gbsm-surface: #ffffff;
  --gbsm-footer: #f7f7f7;
  --gbsm-line: #cccccc;
  --gbsm-line-soft: #dddddd;
  --gbsm-brand: #04c691;
  --gbsm-brand-lite: #15d8a2;
  --gbsm-accent: #fd7322;
  --gbsm-pill: #6cb222;
  --gbsm-grad: linear-gradient(-19deg, #04c691, #15d8a2);

  --gbsm-tile: 22vw;
  --gbsm-tile-sm: 19vw;
  --gbsm-tag-tile: 26vw;
  --gbsm-r-tile: 6px;
  --gbsm-r-card: 5px;
  --gbsm-r-chip: 8px;
}

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

html { scroll-behavior: smooth; }
body {
  max-width: var(--gbsm-shell);
  margin: 0 auto;
  background: var(--gbsm-surface);
  color: var(--gbsm-body);
  font: 13px/1.5 Arial, Helvetica, sans-serif;
}
img { display: block; border: 0; }
a { color: var(--gbsm-ink); text-decoration: none; }
/* original: a:hover { color:#333 } — the orange accent is applied only to
   specific descendants (segment labels, list titles), never to every link */
a:hover { color: #333; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 500; color: var(--gbsm-ink); line-height: 1.1; }
p { margin: 8px 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--gbsm-brand); outline-offset: 2px; }
.gbsm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- header chip bar
   Original #header is height:30px + overflow:hidden. Chips are floated: the
   ones that do not fit wrap to a hidden second row. The nav is FIXED — it must
   never scroll horizontally. */
.gbsm-header {
  height: 30px; margin: 0 auto; padding: 0;
  display: flex; align-items: flex-start; gap: 4px;
  background: var(--gbsm-surface);
  border-bottom: 1px solid #f1f3f4;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
  overflow: hidden;
}
.gbsm-brand { flex: 0 0 100px; width: 100px; height: 20px; padding: 5px 5px 0; }
.gbsm-brand img { width: 90px; height: 20px; }
/* chips wrap like the original floats; the hidden second row is clipped by the
   30px header, so neither axis produces a scrollable area */
.gbsm-chipbar {
  flex: 1 1 auto; min-width: 0; max-width: calc(100% - 104px);
  max-height: 27px; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px;
}
.gbsm-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  height: 24px; padding: 0 4px 3px 3px;
  border: 2px solid var(--gbsm-brand); border-radius: var(--gbsm-r-chip);
  color: #444; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.gbsm-chip img { width: 18px; height: 18px; border-radius: var(--gbsm-r-tile); }
.gbsm-chip:hover { background: var(--gbsm-grad); color: #fff; }

/* --------------------------------------------------------------- shell */
.gbsm-wrap { background: var(--gbsm-page); }

/* --------------------------------------------------------------- section heading
   Original: .box-block-title > .tit > span — title text only, NO `.more` link.
   m-style.css declares .more { float:right } but no served /m/ page uses it,
   so the rebuild deliberately renders no More link here. */
.gbsm-sectionhead {
  display: block;
  padding: 0 15px; line-height: 30px; overflow: hidden;
  color: #555; font-size: 1.1rem; background: var(--gbsm-surface);
  border-bottom: 3px solid var(--gbsm-page);
}
.gbsm-sectionhead > span {
  display: table; border-bottom: 3px solid var(--gbsm-brand);
  font: 700 14px/24px "GYDIN", "Roboto", sans-serif; color: var(--gbsm-ink);
}

.gbsm-listtitle {
  display: block; margin: 0 16px; padding: 0;
  border-bottom: 1px solid var(--gbsm-line);
  font-size: 18px; font-weight: 700; color: var(--gbsm-ink); text-align: left;
}
.gbsm-listtitle > span {
  display: table; border-bottom: 3px solid var(--gbsm-brand);
  font: 700 14px/24px "GYDIN", "Roboto", sans-serif; color: var(--gbsm-ink);
}

/* --------------------------------------------------------------- recommend strip
   Original .tags-scroll .bs-s: display:flex; width:100%; overflow-x:auto —
   the 5 icon links form a HORIZONTALLY SCROLLABLE strip. The outer .box is
   overflow:hidden, but the inner .bs-s owns the scroll. Only the TOP chip nav
   (.gbsm-header / .gbsm-chipbar) is fixed and never scrollable. */
.gbsm-scroller {
  display: flex; gap: 0; width: 100%;
  padding: 10px 15px 0; background: var(--gbsm-surface);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 3px solid var(--gbsm-page);
}
.gbsm-scroller::-webkit-scrollbar { display: none; }
/* original .recommend a: flex 0 0 19vw + 2vw right margin, 5 links;
   with 15px side padding the row is wider than the viewport, so swiping
   right reveals the rest of the last icon (it is no longer clipped away). */
.gbsm-scroller > a {
  flex: 0 0 var(--gbsm-tile-sm); width: var(--gbsm-tile-sm); margin-right: 2vw;
  text-align: center; color: var(--gbsm-ink);
}
.gbsm-scroller .gbsm-tile-card { border: 0; }
/* original .tags-scroll.recommend shows icons only — no name labels */
.gbsm-scroller .gbsm-tile-title { display: none; }
.gbsm-scroller img {
  width: 100%; border-radius: var(--gbsm-r-tile);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5); transition: all .3s;
}
/* original: .recommend a dt img:hover { transform: scale(1.05) } */
.gbsm-scroller > a:hover img { transform: scale(1.05); }

.gbsm-tile-title {
  display: inline-block; width: var(--gbsm-tile-sm); margin: .2rem 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9rem; font-weight: 700; line-height: 20px; color: var(--gbsm-ink); text-align: center;
}

/* --------------------------------------------------------------- segment grid
   original .segments .box-scroll .bs-s : flex-wrap:wrap, 4 columns x 3 rows,
   12 links per block. NOT a horizontal carousel. */
.gbsm-gridbox {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-content: flex-start; width: 100%; padding: 5px 15px;
  background: var(--gbsm-surface);
  border-bottom: 3px solid var(--gbsm-page);
  /* original .box-scroll is itself overflow-x:auto; keep the 4x3 wrap grid
     but let the section strip scroll horizontally when content is wider */
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.gbsm-gridbox > a {
  width: var(--gbsm-tile); margin: 0 0 5px; padding: 0;
  background: var(--gbsm-surface); color: var(--gbsm-ink);
  text-align: center; position: relative; overflow: hidden;
  transition: transform .3s;
}
/* original: .segments .box .box-scroll a:hover dl { background:#ececec; ... } */
.gbsm-tile-card { display: block; border: 3px solid var(--gbsm-surface); }
.gbsm-tile-card img { width: 100%; border-radius: var(--gbsm-r-tile); transition: all .3s; }
.gbsm-gridbox > a:hover .gbsm-tile-card {
  background: #ececec; border-radius: 6px; border: 5px solid #ececec;
}
/* original: .segments a:hover dd { color:#fd7322 } */
.gbsm-gridbox > a:hover .gbsm-tile-title { color: var(--gbsm-accent); }
/* original @media (max-width:1024px) overrides the hover block to white
   and adds the 1.02 scale on the whole link */
@media only screen and (max-width: 1024px) {
  .gbsm-gridbox > a:hover .gbsm-tile-card { background: #fff; border: 5px solid #fff; }
  .gbsm-gridbox > a:hover { transform: scale(1.02); }
  .gbsm-gridbox .gbsm-tile-title { width: 100%; }
}

/* #four-games > .wrap-games is an empty ad slot in the served markup */
.gbsm-featured { display: none; }

/* --------------------------------------------------------------- ad placeholder
   Original .m_ad100 > div contains only the ad tag (an <ins> with height:250px).
   Keep the slot EMPTY — the ad call code is injected when the site is built.
   No placeholder copy, no border, no background. */
.gbsm-ad { margin: 5px 2px 10px; text-align: center; }
.gbsm-ad__label { margin: 0; color: var(--gbsm-body); font-size: 12px; line-height: 15px; }
.gbsm-ad__slot { width: 100%; min-height: 250px; margin-bottom: 5px; }

/* --------------------------------------------------------------- LIST grid */
.gbsm-list { background: var(--gbsm-surface); padding-bottom: 10px; }
.gbsm-grid { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 5px 15px; }
.gbsm-grid__item {
  width: var(--gbsm-tile); margin: 0 0 .5rem; padding: 0;
  border: 5px solid var(--gbsm-surface); background: var(--gbsm-surface);
  overflow: hidden; position: relative; color: var(--gbsm-ink); text-align: center;
}
.gbsm-grid__item img { width: 100%; margin: 0 0 3px; border-radius: 10px; }
.gbsm-grid__item h6 {
  display: block; margin: 0 0 .25rem; font-size: 14px; line-height: 18px;
  color: var(--gbsm-ink); text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gbsm-grid__item:hover { background: #ececec; border-color: #ececec; border-radius: 10px; }
.gbsm-grid__item:hover h6 { color: var(--gbsm-accent); }

/* --------------------------------------------------------------- LANDING tag grid */
.gbsm-taggrid { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 10px 15px 20px; background: var(--gbsm-surface); }
.gbsm-tagcard {
  width: var(--gbsm-tag-tile); margin: 0 0 14px; border: 5px solid var(--gbsm-surface); text-align: center;
}
.gbsm-tagcard img { width: 100%; border-radius: var(--gbsm-r-tile); }
.gbsm-tagcard h6 {
  display: block; margin: .5rem 0; font-size: 14px; color: var(--gbsm-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gbsm-tagcard small { display: block; color: var(--gbsm-body); }
.gbsm-tagcard:hover { background: #ececec; border-color: #ececec; border-radius: 10px; }

/* --------------------------------------------------------------- GAME detail */
.gbsm-crumb { width: 100%; padding-left: 16px; line-height: 30px; background: var(--gbsm-surface); color: var(--gbsm-ink); font-weight: 500; }
.gbsm-crumb span { color: #000; font-weight: 500; }
.gbsm-detail {
  display: flex; width: 100%; margin: 5px auto; padding: 12px 0; background: var(--gbsm-surface);
}
.gbsm-detail__icon { width: 46%; padding-left: 8vw; }
.gbsm-detail__icon img { width: 100%; max-width: 100px; border-radius: var(--gbsm-r-tile); }
.gbsm-detail__facts { width: 50%; padding-right: 5vw; }
.gbsm-detail__facts table { width: 100%; border-collapse: collapse; }
.gbsm-detail__facts td { padding: 4px 0; font-size: 14px; color: #666; }
.gbsm-detail__facts td:last-child { text-align: right; color: var(--gbsm-ink); font-weight: 700; }

.gbsm-tagpills { padding: 6px 5vw 12px; background: var(--gbsm-surface); }
.gbsm-tagpills > p { margin: 0 0 6px; color: #666; }
.gbsm-tagpills a {
  display: inline-block; padding: 0 10px; margin: 5px 5px 0 0;
  border: 1px solid var(--gbsm-pill); border-radius: 20px; font-size: 14px; color: var(--gbsm-pill);
}
.gbsm-tagpills a:hover { background: var(--gbsm-pill); color: #fff; }

.gbsm-block {
  position: relative;
  width: 100%; padding: 2px 16px .5rem; margin-bottom: 4px;
  border-radius: var(--gbsm-r-card); background: var(--gbsm-surface);
  display: flex; flex-direction: column;
}
.gbsm-block__title { font-size: 15px; font-weight: 700; color: var(--gbsm-ink); margin: 8px 0; }
/* Editor's Review disclosure — CSS-first, no JS dependency.
   The source clips at 424px (.show-more { height: 424px }); max-height avoids
   the empty gap that a fixed height created when the copy was short. */
.gbsm-review__state {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.gbsm-review { max-height: 424px; overflow: hidden; }
.gbsm-review__state:checked ~ .gbsm-review,
.gbsm-review.is-open { max-height: none; }
.gbsm-review p { font-size: 15px; line-height: 1.6; color: #444; margin: 0 0 10px; text-indent: 2em; text-align: justify; }
.gbsm-more {
  display: block; width: calc(100% - 30px); height: 2.4rem; line-height: 2.4rem;
  margin: 8px 15px 5px; border: 0; border-radius: 10px;
  background: #e0e0e0; color: var(--gbsm-accent); font-size: 16px; font-weight: 600; text-align: center;
  cursor: pointer; user-select: none;
}
.gbsm-review__state:focus-visible ~ .gbsm-more {
  outline: 3px solid var(--gbsm-accent); outline-offset: 2px;
}
.gbsm-more__less { display: none; }
.gbsm-more__caret {
  display: inline-block; width: 7px; height: 7px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.gbsm-review__state:checked ~ .gbsm-more .gbsm-more__more { display: none; }
.gbsm-review__state:checked ~ .gbsm-more .gbsm-more__less { display: inline; }
.gbsm-review__state:checked ~ .gbsm-more .gbsm-more__caret { transform: translateY(2px) rotate(-135deg); }

/* --------------------------------------------------------------- screenshots
   Original: .screenshot > .box-block-title[Game Screenshot] + .owl-carousel
   (owlCarousel { items:1, margin:10, nav:true, loop:true }), with
   .owl-carousel .owl-item img { width:auto; max-width:100%; height:300px;
   margin:10px auto 0 }. Rebuilt as a native scroll-snap track: one centred
   shot per view, swipeable, with the same two grey nav buttons. */
.gbsm-shots { width: 100%; background: var(--gbsm-surface); }
.gbsm-shots__track {
  display: flex; gap: 10px; padding: 0 4vw;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gbsm-shots__track::-webkit-scrollbar { display: none; }
.gbsm-shots__item { flex: 0 0 100%; scroll-snap-align: center; text-align: center; }
.gbsm-shots__item img {
  display: block; width: auto; max-width: 100%; height: 300px;
  margin: 10px auto 0;
}
/* owl.theme.default: nav sits centred below the carousel */
.gbsm-shots__nav { margin-top: 10px; text-align: center; }
.gbsm-shots__nav button {
  color: #fff; font-size: 14px; line-height: 1.4; margin: 5px; padding: 4px 7px;
  background: #d6d6d6; border: 0; border-radius: 3px; cursor: pointer;
}
.gbsm-shots__nav button:hover { background: #869791; }

.gbsm-store {
  display: block; width: 100%; margin: .5rem auto; padding: 10px 16px;
  border-radius: 8px; background: var(--gbsm-grad); color: #fff; text-align: center; font-size: 16px; font-weight: 700;
}
.gbsm-store:hover { color: #fff; filter: brightness(.95); }
.gbsm-disclaimer { font-size: 12px; color: var(--gbsm-body); }

/* --------------------------------------------------------------- static PAGE */
.gbsm-page { display: flex; justify-content: center; box-sizing: border-box; background: var(--gbsm-surface); }
.gbsm-article {
  width: 100%; max-width: 981px; margin: 0; padding: 16px 16px;
  border-radius: var(--gbsm-r-card); background: var(--gbsm-surface);
  box-shadow: 0 1px 50px 0 rgba(21, 61, 108, .05), 0 2px 4px 0 rgba(79, 92, 151, .03);
}
.gbsm-article h1 { font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--gbsm-art-ink); margin: 0 0 20px; }
.gbsm-article h2 { font-size: 20px; font-weight: 600; color: var(--gbsm-art-ink); margin: 20px 0 10px; }
.gbsm-article .gbsm-article__meta { font-style: italic; color: var(--gbsm-art-ink); }
.gbsm-article p { font-size: 16px; line-height: 1.63; color: var(--gbsm-art-body); margin: 16px 0; }

/* --------------------------------------------------------------- footer */
.gbsm-footer { background: var(--gbsm-footer); }
.gbsm-footer__intro {
  width: 100%; padding: 1rem 4%; margin: 0 auto;
  background: var(--gbsm-surface); line-height: 24px; color: #555; border: 0;
}
.gbsm-footer__copy { padding: 16px 4%; margin: 0; text-align: center; color: var(--gbsm-body); }

/* --------------------------------------------------------------- tablet / desktop fallback */
@media only screen and (min-width: 676px) {
  .gbsm-grid__item, .gbsm-tagcard { width: 15vw; margin: 1rem 1rem 0; display: inline-block; }
  .gbsm-scroller > a, .gbsm-gridbox > a { flex-basis: 15vw; width: 15vw; }
}
@media only screen and (min-width: 767px) {
  .gbsm-detail__icon { width: 40%; padding-left: 10%; }
  .gbsm-detail__facts { width: 55%; text-align: center; }
  .gbsm-tile-title { width: 100%; }
  .gbsm-gridbox > a { margin-left: 0; }
}
@media only screen and (min-width: 1023px) {
  .gbsm-grid__item { width: 10.7vw; margin: 0 1rem; }
  .gbsm-scroller > a, .gbsm-gridbox > a { flex-basis: 10vw; width: 10vw; margin-left: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}