@charset "UTF-8";
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #292e2a;
  background: #f5f5f2;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #a56245; outline-offset: 4px; }
.shell { width: min(100% - 4rem, 66rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: .75rem; z-index: 1; padding: .6rem .8rem; background: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid #e1e3dc; background: #fafaf8; }
.header-inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -.035rem; }
.brand img { display: block; }
.brand > span { margin-left: .5rem; padding-left: 1rem; border-left: 1px solid #d7dad1; font-size: .75rem; font-weight: 400; letter-spacing: .025rem; color: #696f64; }
.header-help { display: flex; align-items: center; min-height: 2.75rem; color: #626a5e; font-size: .8125rem; text-underline-offset: .3rem; }
.header-help:hover { color: #292e2a; text-decoration: underline; }
.page-heading { padding-block: 3rem 2rem; }
h1 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -.05rem; line-height: 1.4; }
.page-heading p { margin: .7rem 0 0; font-size: .875rem; color: #656d60; line-height: 1.8; }
.game-list { display: grid; gap: .75rem; }
.list-heading { display: flex; justify-content: space-between; padding: 0 1.25rem .25rem; color: #687060; font-size: .75rem; line-height: 1.7; }
.list-heading > span:last-child { width: 13rem; }
.game-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 13rem; align-items: center; gap: 1.75rem; padding: 1.125rem 1.25rem; background: #fff; border: 1px solid #e0e3da; border-radius: .5rem; transition: border-color 160ms ease; }
.game-row:focus-within { border-color: #a9b09e; }
.game-cover { display: block; width: 9rem; height: 5.625rem; object-fit: cover; border-radius: .25rem; background: #e7e9e2; }
.cover-rust { object-position: 65% center; }
.cover-poe { object-position: 82% center; }
.cover-hunt { object-position: 66% center; }
.cover-pubg { object-position: 52% center; }
.cover-eft { object-position: center; }
.game-info { min-width: 0; }
.game-info h2 { margin: 0; font-size: 1.2rem; line-height: 1.5; font-weight: 600; }
.game-info h2 span { margin-left: .55rem; font-size: .8125rem; font-weight: 400; color: #626c5c; }
.game-info p { margin: .5rem 0 0; color: #687060; font-size: .8125rem; line-height: 1.75; }
.platforms { display: flex; gap: .5rem; }
.platforms a { display: inline-flex; justify-content: space-between; align-items: center; gap: .7rem; width: 6.25rem; min-height: 2.75rem; padding: .6rem .8rem; border: 1px solid #d4d9cd; border-radius: .25rem; background: #fafbf8; font-size: .8125rem; line-height: 1.5; transition: background-color 160ms ease, border-color 160ms ease; }
.platforms a > span { font-size: .875rem; color: #77816d; }
.platforms a:hover { background: #eef1e8; border-color: #a1ae93; }
.platforms a:active { background: #e2e8d9; border-color: #859775; }
.help-note { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.75rem; margin-top: 2rem; padding: 1.5rem 1.25rem 2.75rem; border-top: 1px solid #dde1d5; }
.help-note h2 { margin: .1rem 0 0; font-size: .8125rem; font-weight: 500; }
.help-note p { margin: 0; color: #656d60; font-size: .75rem; line-height: 2; }
@media (max-width: 800px) {
  .shell { width: calc(100% - 3rem); }
  .game-row { grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem 1.25rem; padding: 1.1rem; }
  .game-cover { width: 7rem; height: 5rem; grid-row: span 2; }
  .game-info h2 { font-size: 1.0625rem; }
  .game-info p { margin-top: .2rem; }
  .platforms { grid-column: 2; }
  .list-heading { padding-inline: 1.1rem; }
  .list-heading > span:last-child { display: none; }
  .help-note { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; padding-inline: 1.1rem; }
}
@media (max-width: 480px) {
  .shell { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 4.25rem; }
  .brand { font-size: 1.1rem; }
  .brand > span { display: none; }
  .brand img { width: 27px; height: 27px; }
  .page-heading { padding-block: 2rem 1.5rem; }
  h1 { font-size: 1.65rem; }
  .page-heading p { font-size: .8125rem; }
  .game-row { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .game-cover { width: 5rem; height: 4.75rem; grid-row: auto; }
  .game-info h2 { font-size: 1.0625rem; }
  .game-info h2 span { display: block; margin: .15rem 0 0; font-size: .7rem; }
  .game-info p { font-size: .75rem; line-height: 1.7; }
  .platforms { grid-column: 1 / -1; gap: .6rem; }
  .platforms a { flex: 1; width: auto; padding-inline: .9rem; }
  .help-note { grid-template-columns: 1fr; gap: .65rem; margin-top: 1.5rem; padding: 1.25rem 0 2rem; }
  .help-note p { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .game-row, .platforms a { transition: none; }
}