/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  color-scheme: dark;
  --bg: #241a30;
  --bg-tile: #2b2038;
  --panel: #35273f;
  --panel-2: #3d2e4a;
  --line: #6b5484;
  --line-soft: #4c3a5e;
  --shadow: #170f20;
  --ink: #f0e4d0;
  --ink-dim: #bda9c9;
  --gold: #e8c46a;
  --tan: #c08d63;
  --rose: #ef8fa0;
  --crimson: #d0455f;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(240, 228, 208, 0.055) 1px, transparent 0);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
}

.wrap {
  max-width: 840px;
  margin: 0 auto;
  padding-block: 24px 48px;
  padding-left: 16px;
  padding-right: 16px;
}

a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover,
a:focus-visible { color: var(--rose); background: rgba(239, 143, 160, 0.12); }
a:visited { color: var(--tan); }
a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 18px 20px;
  margin-bottom: 28px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lang { white-space: nowrap; }
.lang b { color: var(--ink); }

.banner {
  display: block;
  width: calc(100% + 40px);
  margin: 0 -20px;
  height: 150px;
  object-fit: cover;
  object-position: 74% 92%;
  border-bottom: 2px solid var(--line);
  background: var(--panel-2);
}

.hero {
  border: 2px solid var(--line);
  box-shadow: 5px 5px 0 var(--shadow);
  background: var(--panel);
  padding: 0 20px 20px;
  margin-bottom: 28px;
}
.hero-inner {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.avatar {
  width: 104px;
  height: 104px;
  margin-top: -34px;
  border: 3px solid var(--line);
  background: var(--panel-2);
  image-rendering: auto;
  display: block;
}
.hero h1 {
  font-size: 27px;
  line-height: 1.15;
  margin: 14px 0 2px;
  letter-spacing: -0.5px;
}
.handle { color: var(--ink-dim); font-size: 13px; margin: 0; }
.tagline {
  margin: 14px 0 0;
  font-size: 17px;
  color: var(--ink);
}
.tagline::before { content: "> "; color: var(--gold); }
.facts {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.facts li::after { content: " ·"; color: var(--line); }
.facts li:last-child::after { content: ""; }

h2 {
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-soft);
}
h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  background: var(--rose);
  vertical-align: 1px;
}

h3 { font-size: 15px; margin: 0 0 4px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

blockquote {
  margin: 0 0 14px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--tan);
  color: var(--ink);
  font-style: normal;
}
blockquote cite { display: block; font-size: 12px; color: var(--ink-dim); font-style: normal; margin-top: 4px; }

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.game {
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
}
.game:hover { border-color: var(--line); }
.shot {
  display: block;
  aspect-ratio: 630 / 500;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-tile);
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.game p { font-size: 13.5px; color: var(--ink-dim); margin: 0; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.tags li {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
}
.game-link { font-size: 13px; margin-top: 4px; }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rows > li { border-left: 3px solid var(--line-soft); padding-left: 14px; }
.rows p { font-size: 13.5px; color: var(--ink-dim); margin: 0; }
.meta { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.4px; }
.wip { color: var(--rose); }

.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.links span { color: var(--ink-dim); font-size: 13px; }

.button-img { display: block; image-rendering: pixelated; border: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.button-row code {
  font-size: 11.5px;
  color: var(--ink-dim);
  background: var(--bg-tile);
  border: 1px solid var(--line-soft);
  padding: 4px 7px;
  overflow-x: auto;
  max-width: 100%;
}

footer {
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  border-top: 1px dashed var(--line-soft);
  padding-top: 16px;
}

.notfound { text-align: center; }
.notfound .code {
  font-size: 56px;
  letter-spacing: 6px;
  color: var(--crimson);
  margin: 0;
  line-height: 1;
}
.notfound img { width: 120px; border: 3px solid var(--line); margin: 18px 0 6px; }
.notfound .alt { color: var(--ink-dim); font-size: 13px; }

@media (max-width: 560px) {
  .hero h1 { font-size: 23px; }
  .banner { height: 100px; }
  .avatar { width: 84px; height: 84px; }
  .games { grid-template-columns: 1fr; }
}