/* Redharth Play: same black-glass look as redharth.com. */

@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter-400.b626f68e9a.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter-600-900.2389c8e12b.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-400-700.99bb5b9dd7.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Brand (from redharth.com) */
  --bg: #07080b;
  --ink: #f1f2f6;
  --red: #ff353c;
  --muted: #9598a3;
  --soft: #c2c6d0;
  --line: #ffffff14;
  --glass-border: #ffffff29;
  --glass-fill: linear-gradient(125deg, #ffffff12, #ffffff04 45%, #ffffff08);
  --glass-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08, 0 12px 40px #0005;
  --display: "Space Grotesk", Arial, sans-serif;
  --body: Inter, Arial, sans-serif;

  --radius: 28px;
  --radius-small: 18px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-space: 104px;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-space);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 700px 1100px at 95% 35%, #1b101b45, transparent),
    radial-gradient(ellipse 900px 600px at 0% 0%, #6d102b22, transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--red);
  color: #fff;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.hero h1 > span,
.not-found h1 > span {
  display: block;
  white-space: nowrap;
}

h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

h3 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.red {
  color: var(--red);
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 100;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  line-height: 1.5;
  text-transform: uppercase;
}

.status-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px #ff353c88, 0 0 0 4px #ff353c14;
}

.lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.15rem;
}

/* Glass surfaces */

.header-bar,
.card,
.mini-card,
.controls div,
.feature,
.player {
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 52px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  font: 600 12px/1 var(--body);
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn > span {
  font-size: 16px;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}

.btn:hover > span {
  transform: translate(2px, -2px);
}

.btn-glass {
  border-color: #ffffff33;
  background: linear-gradient(125deg, #ffffff24, #ffffff08 50%, #ffffff13);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffff45, 0 12px 30px #0006;
  color: #fff;
}

.btn-glass:hover {
  box-shadow: inset 0 1px 0 #ffffff45, 0 12px 30px #0006, 0 8px 30px #ff353c30;
}

.btn-play {
  background: var(--red);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff55, 0 12px 34px #ff353c45;
}

.btn-play::before {
  content: "";
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.btn-play:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #ffffff55, 0 16px 44px #ff353c66;
}

/* Header */

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  margin-top: 14px;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
  padding: 0 12px 0 22px;
  border-radius: 26px;
  background: linear-gradient(115deg, #ffffff13, #ffffff05 40%, #ffffff0d);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}

/* The header steps aside while it would cover a game, and comes back once it
   doesn't (site.js). */
.site-header .header-bar {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-header.is-tucked .header-bar {
  transform: translateY(calc(-100% - 20px));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s 0.25s;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.brand:hover,
.brand:focus-visible {
  transform: scale(1.06);
}

.brand img {
  width: 36px;
  height: 36px;
}

.brand-type {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;
  color: #f5f6fa;
}

.brand-type {
  white-space: nowrap;
}

.brand-type > small {
  display: block;
  margin: 6px 0 0 2px;
  color: #a6a8b2;
  font-family: var(--body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 4.15px;
}

.site-nav {
  display: flex;
  gap: 6px;
}

.site-nav a {
  padding: 12px 20px;
  border-radius: 30px;
  color: #c6c8d1;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s, background 0.3s, box-shadow 0.3s;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #fff;
  background: #ffffff0d;
  box-shadow: inset 0 1px 0 #ffffff1a;
}

/* Footer */

.site-footer {
  margin-top: 96px;
  padding: 56px 0 28px;
  border-top: 1px solid var(--line);
  background: linear-gradient(#0a0b0f, #050608);
  overflow: hidden;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 48px;
}

.footer-top p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.footer-nav a {
  color: var(--soft);
  font-size: 14px;
  text-decoration: none;
}

.footer-nav a:hover {
  color: #fff;
}

/* "Made by" + REDHARTH. wordmark, sized to the footer and spun by site.js (as on redharth.com). */

.site-footer .wrap {
  container-type: inline-size;
}

.footer-brand {
  display: flex;
  align-items: baseline;
  width: max-content;
  max-width: 100%;
  margin: 40px 0 0;
  color: #fff;
  font-family: var(--display);
  /* "ARCADE GAMES NOW." measures 9.22em wide at this letter-spacing, so this fills the row. */
  font-size: clamp(28px, 10.8cqw, 190px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-reels {
  display: inline-flex;
  align-items: baseline;
  font: inherit;
  letter-spacing: -0.075em;
}

.footer-reel {
  position: relative;
  display: block;
  flex: none;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  letter-spacing: 0;
}

.footer-reel + .footer-reel {
  margin-left: -0.075em;
}

/* The gaps between the words don't spin. */
.footer-reel-gap {
  display: block;
  flex: none;
  width: 0.22em;
}

.footer-reel:nth-child(3) {
  margin-left: -0.035em;
}

.footer-reel-sizer {
  display: block;
  visibility: hidden;
}

.footer-reel-track {
  position: absolute;
  inset: 0 0 auto;
  will-change: transform;
}

.footer-brand[data-reel-state="settled"] .footer-reel-track {
  will-change: auto;
}

.footer-reel-cell {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}

.footer-stop {
  display: block;
  margin-left: -0.05em;
  color: var(--red);
  font: inherit;
  font-style: normal;
  line-height: 1;
}

/* One small credit to the studio under the wordmark. */
.footer-credit {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.footer-credit a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #ff353c88;
  text-underline-offset: 3px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.footer-bottom a {
  color: var(--soft);
  text-decoration: none;
}

/* Home */

.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 4vw, 48px);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.hero h1 {
  font-size: clamp(2.7rem, 4.6vw, 4.8rem);
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.hero h1 > span + span {
  margin-top: 6px;
}

.hero h1 .red {
  text-shadow: 0 0 50px #ff353c22;
}

.hero-text {
  max-width: 36ch;
  margin: 24px 0 32px;
  color: #9b9daa;
  font-size: 1.05rem;
}

.feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  text-decoration: none;
  box-shadow: var(--glass-shadow), 0 30px 80px #000a;
}

.feature-media {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}

.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Hover preview video, laid over the cover art (site.js adds it). */
.preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.preview-video.is-visible {
  opacity: 1;
}

.feature:hover img {
  transform: scale(1.03);
}

.feature-info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 96px clamp(18px, 3vw, 32px) clamp(18px, 3vw, 28px);
  background: linear-gradient(to top, #07080bf5 0%, #07080bdd 45%, transparent);
}

.feature-info .eyebrow {
  margin-bottom: 10px;
}

.feature-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-transform: uppercase;
}

.feature-tagline {
  max-width: 48ch;
  margin: 8px 0 18px;
  color: var(--soft);
}

.section {
  padding-top: 48px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.section-head h2 {
  margin: 0;
}

.section-head p {
  margin: 0;
  color: var(--muted);
}

/* Game cards */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #ff353c66;
  box-shadow: inset 0 1px 0 #ffffff3d, 0 25px 70px #0008, 0 0 60px #ff353c14;
}

.card-link {
  text-decoration: none;
}

.card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(ellipse at 48% 48%, #262331, #101014 65%);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-media img {
  transform: scale(1.04);
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 11px;
  border: 1px solid #ffffff2e;
  border-radius: 20px;
  background: #07080bcc;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.play-badge {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 8px #ffffff1a, 0 12px 34px #ff353c66;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.play-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
}

.card:hover .play-badge,
.card-link:focus-visible .play-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.card-body {
  padding: 20px 22px 10px;
}

.card-body h3 {
  margin: 0 0 8px;
}

.card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.card .tags {
  margin-top: auto;
  padding: 10px 22px 22px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 5px 11px;
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  background: #ffffff08;
  color: var(--soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Game page */

/* Game pages: the game, then one line of cover-art links to the other games,
   between two empty side zones of the same width. The side zones are room for
   side ads: a 160px "skyscraper" at the outer edge, kept 150px clear of the
   game as Google recommends for game pages. The ads only appear once AdSense is
   set up. The zones narrow on smaller screens, and the game gets the space. */
html:has(.player) {
  --game-gutter: clamp(16px, 2vw, 24px);
  /* One side zone: room for the ad plus the clear space next to it. */
  --rail-space: clamp(0px, (100vw - 1240px) / 2, 310px);
  /* The widest the game can be while, at 16:9, it still fits the screen's height. */
  --fit: calc((100svh - var(--header-space) - 76px) * 16 / 9);
  /* Only as wide as lets the game fit the screen's height: on big screens the
     game keeps growing, and on short ones it is never squashed. */
  --game-max: calc(var(--fit) + 248px + 2 * var(--rail-space) + 2 * var(--game-gutter));
}

.game-layout {
  display: grid;
  grid-template-columns: var(--rail-space) minmax(0, 1fr) 248px var(--rail-space);
  gap: 28px 0;
  padding-top: 28px;
}

/* The games list, 28px from the game. */
.game-side {
  padding-left: 28px;
}

.game-layout.wrap,
html:has(.player) .site-header .wrap {
  --gutter: var(--game-gutter);
  max-width: var(--game-max);
}

/* The header lines up with the game and the games list, not the empty side columns. */
html:has(.player) .site-header .wrap {
  padding: 0 calc(var(--gutter) + var(--rail-space));
}

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--header-space) - 76px);
  max-height: calc(100svh - var(--header-space) - 76px);
  min-height: 240px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--glass-shadow), 0 30px 80px #000a;
}

.player-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(1.05);
}

.player-start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  font: 600 clamp(1.3rem, 3vw, 2rem) / 1 var(--display);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px #000a;
  cursor: pointer;
}

.play-icon {
  position: relative;
  width: clamp(76px, 11vw, 104px);
  height: clamp(76px, 11vw, 104px);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 12px #ffffff17, inset 0 1px 0 #ffffff66, 0 16px 50px #ff353c70;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 17px 0 17px 27px;
  border-color: transparent transparent transparent #fff;
}

.player-start:hover .play-icon {
  transform: scale(1.06);
  box-shadow: 0 0 0 16px #ffffff1c, inset 0 1px 0 #ffffff66, 0 18px 60px #ff353c90;
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.player.is-playing .player-cover,
.player.is-playing .player-start {
  display: none;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.breadcrumb a {
  color: var(--soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb [aria-current] {
  color: var(--ink);
}

.player-bar {
  margin: 28px 0 12px;
}

.player-bar h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -0.06em;
}

.device-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 9px 16px;
  border: 1px solid #ff353c4d;
  border-radius: 20px;
  background: #ff353c12;
  color: #ffd0d1;
  font-size: 14px;
}

.game-info {
  max-width: 70ch;
  margin-top: 32px;
  color: #d4d6dd;
}

.game-info h2 {
  margin-top: 44px;
}

.steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 48px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.controls {
  display: grid;
  gap: 10px;
  margin: 0;
}

.controls div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-small);
}

.controls dt {
  color: var(--soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  line-height: 2;
  text-transform: uppercase;
}

.controls dd {
  margin: 0;
}

/* Features and tips: short lists with red markers, like the how-to-play steps. */
.features,
.tips {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li,
.tips li {
  position: relative;
  padding-left: 24px;
}

.features li::before,
.tips li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--red);
}

.screenshots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.screenshots img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-small);
  background: #000;
}

.faq h3 {
  margin: 26px 0 6px;
  color: var(--ink);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.faq p {
  margin: 0;
}

.related {
  margin-top: 14px;
  color: var(--muted);
}

.related a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #ff353c88;
  text-underline-offset: 3px;
}

.saves-note {
  margin-top: 32px;
  color: var(--muted);
  font-size: 14px;
}

.game-side h2 {
  font-size: 1.6rem;
}

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

.mini-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-small);
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mini-card:hover,
.mini-card:focus-visible {
  transform: scale(1.04);
  border-color: #ff353c99;
  box-shadow: var(--glass-shadow), 0 0 40px #ff353c22;
}

.mini-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Crawlable intro text on the home page */

.seo-intro {
  max-width: 72ch;
  margin-top: 80px;
  color: #c9ccd4;
}

.seo-intro h2 {
  margin-bottom: 18px;
}

.seo-list {
  margin: 0 0 16px;
  padding-left: 1.1em;
}

.seo-list li + li {
  margin-top: 6px;
}

.seo-list a {
  color: #fff;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

/* Ads: game pages only, always outside the game player, always labelled. */

.ad {
  text-align: center;
}

/* Under the game: a 728x90 space for a banner ad, left blank until AdSense is
   set up. Google recommends keeping ads at least 150px from a game, so nobody
   taps one by accident while playing. */
.banner-space {
  max-width: 728px;
  min-height: 90px;
  margin: 150px auto 0;
}

/* A 160x600 side ad at the outer edge of its zone. Not sticky: Google allows
   only one sticky ad on screen at a time, and never one on each side. */
.ad-rail {
  width: 160px;
}

.side-rail:last-child .ad-rail {
  margin-left: auto;
}

/* Room kept for the ad before it loads, so the page doesn't jump. */
.ad-rail ins {
  min-height: 600px;
}

.ad-banner ins {
  min-height: 90px;
}

.ad-label {
  display: block;
  margin-bottom: 8px;
  color: #6c707c;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Text pages */

.text-page {
  padding-top: 64px;
}

.prose {
  max-width: 72ch;
  color: #d4d6dd;
}

.prose h1 {
  color: var(--ink);
}

.prose h2 {
  margin-top: 48px;
  color: var(--ink);
}

.prose h3 {
  margin-top: 32px;
  color: var(--ink);
}

.prose a:not(.btn) {
  color: #fff;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.prose li + li {
  margin-top: 8px;
}

.prose .meta {
  color: var(--muted);
  font-size: 14px;
}

.not-found {
  padding-top: 64px;
}

.not-found h1 {
  font-size: clamp(3rem, 8vw, 6.4rem);
  letter-spacing: -0.075em;
}

.not-found .lede {
  max-width: 50ch;
}

.not-found .game-grid {
  margin-top: 56px;
}

/* Smaller screens */

/* Left side zone: under 1760px wide there is no room for a 160px ad plus
   150px clear of the game. */
@media (max-width: 1759px) {
  .side-rail:first-child .ad {
    display: none;
  }
}

/* Right side zone: the 248px games list already keeps its ad clear of the
   game, so it only needs room for the ad itself, from 1366px wide. */
@media (max-width: 1365px) {
  .side-rail:last-child .ad {
    display: none;
  }
}

/* No room for side columns: the game takes their space. */
@media (max-width: 1240px) {
  html:has(.player) {
    --rail-space: 0px;
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr) 248px;
  }

  .side-rail {
    display: none;
  }
}

@media (max-width: 1000px) {
  html:has(.player) {
    --game-max: calc(var(--fit) + 2 * var(--game-gutter));
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-side {
    padding-left: 0;
  }

  .mini-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* Phones and tablets held upright: a tall player, so games are playable in the page. */
@media (max-width: 1000px) and (orientation: portrait) {
  html:has(.player) {
    --game-max: none;
  }

  .player {
    aspect-ratio: auto;
    height: 78vh;
    height: min(78svh, 900px);
    max-height: none;
  }
}

@media (max-width: 800px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy .btn {
    display: none;
  }

  .hero-text {
    margin-bottom: 0;
  }

  .feature {
    aspect-ratio: auto;
  }

  .feature img {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .feature-info {
    position: static;
    padding-top: 20px;
    background: none;
  }
}

@media (max-width: 600px) {
  :root {
    --header-space: 92px;
  }

  .header-bar {
    height: 64px;
    padding: 0 8px 0 16px;
    border-radius: 22px;
  }

  .brand {
    gap: 10px;
  }

  .brand img {
    width: 31px;
    height: 31px;
  }

  .brand-type {
    font-size: 17px;
    letter-spacing: -0.5px;
  }

  .brand-type > small {
    font-size: 7px;
    letter-spacing: 3px;
  }

  .site-nav a {
    padding: 10px 12px;
  }

  /* About (2nd link) is in the footer; works for both the multi-page and one-file links. */
  .site-nav a:nth-child(2) {
    display: none;
  }

  .player {
    margin: 0 calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* Edge to edge like the game, so a 320x50 or 320x100 phone banner fits even
     on 320px-wide phones. */
  .banner-space {
    max-width: none;
    min-height: 100px;
    margin: 150px calc(var(--gutter) * -1) 0;
  }

  .controls div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Small phones: a tighter header so ARCADE GAMES NOW and the menu fit. */
@media (max-width: 420px) {
  .header-bar {
    padding: 0 6px 0 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 26px;
    height: 26px;
  }

  .brand-type {
    font-size: 15px;
  }

  .brand-type > small {
    margin-top: 4px;
    font-size: 6px;
    letter-spacing: 2.4px;
  }

  .site-nav {
    gap: 2px;
  }

  .site-nav a {
    padding: 8px;
    font-size: 12px;
  }
}

/* The smallest phones: the logo already goes to the games, so drop the Games link. */
@media (max-width: 370px) {
  .site-nav a:first-child {
    display: none;
  }
}

/* Short screens: the game may take the full height (Play scrolls it into view). */
@media (max-height: 540px) {
  html:has(.player) {
    --header-space: 0px;
  }
}

/* Phones held sideways: the game fills the screen, edge to edge. */
@media (max-width: 1000px) and (max-height: 540px) and (orientation: landscape) {
  html:has(.player) {
    --game-max: none;
  }

  .player {
    margin: 0 calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    aspect-ratio: auto;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}


/* Added by build-site.mjs: room for more ads. None is inside a game or within
   150px of one, and at most one is sticky at a time, only on computers (Google
   allows one sticky ad on screen, never mirrored, never on phones or tablets). */

/* A space AdSense has nothing for folds away, label and all. Until an ad is in
   it (or when an ad blocker stops it), the space stays but the label doesn't. */
.ad:has(ins[data-ad-status="unfilled"]),
.grid-ad:has(ins[data-ad-status="unfilled"]),
.grid-row-ad:has(ins[data-ad-status="unfilled"]) {
  display: none;
}

.ad:not(:has(ins[data-ad-status="filled"])) .ad-label {
  visibility: hidden;
}

/* Game pages: side zones sized for their ads instead of half the spare width
   each. From 1366px wide the right zone holds a 160px ad (the games list keeps
   it clear of the game); from 1760px the left zone holds one too, at its outer
   edge, 150px clear of the game. The game gets the rest, so on most screens it
   is as big as before or bigger. */
@media (min-width: 1241px) {
  html:has(.player) {
    --rail-left: 0px;
    --rail-right: 0px;
    --game-max: calc(var(--fit) + 248px + var(--rail-left) + var(--rail-right) + 2 * var(--game-gutter));
  }

  .game-layout {
    grid-template-columns: var(--rail-left) minmax(0, 1fr) 248px var(--rail-right);
  }

  html:has(.player) .site-header .wrap {
    padding: 0 calc(var(--gutter) + var(--rail-right)) 0 calc(var(--gutter) + var(--rail-left));
  }
}

@media (min-width: 1366px) {
  html:has(.player) {
    --rail-right: 200px;
  }
}

@media (min-width: 1760px) {
  html:has(.player) {
    --rail-left: 310px;
  }
}

@media (min-width: 1860px) {
  html:has(.player) {
    --rail-right: 310px;
  }
}

/* The right ad sits in the middle of its zone, clear of the games list and the
   scroll bar, and is the page's one sticky ad on computers. */
.side-rail:last-child .ad-rail {
  margin: 0 auto;
}

@media (min-width: 1366px) and (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .side-rail:last-child .ad-rail {
    position: sticky;
    top: 24px;
  }
}

/* A wider banner under the game where there is room (970x90). */
@media (min-width: 601px) {
  .banner-space {
    max-width: 970px;
  }
}

/* Banners between sections of the home and About pages. */
.page-ad {
  max-width: 970px;
  margin: 64px auto 0;
}

/* In the middle of a game's description, well below the game. */
.ad-inline {
  margin-top: 44px;
}

/* Phones and tablets get two of the three, keeping ads well under 30% of the
   page (the Better Ads Standards limit on phones). */
@media (max-width: 1000px) {
  .ad-inline-extra {
    display: none;
  }
}

/* "More to explore" ads at the end of a page. */
.ad-multiplex {
  margin-top: 64px;
}

/* Under the games list, next to the description, on screens with no right side
   ad (1001-1365px wide): there it is the page's sticky ad on computers, below
   the header. site.js keeps it 150px below the bottom of the game. */
.game-side .ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 28px;
}

.game-side .ad ins {
  min-height: 600px;
}

@media (max-width: 1000px), (min-width: 1366px) {
  .game-side .ad {
    display: none;
  }
}

@media (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .game-side .ad {
    position: sticky;
    top: 104px;
  }
}

/* Home page side ads, beside the content on wide screens: 40px clear of it,
   in the edge of the page's margin. The right one is sticky on computers. */
.page-home main {
  position: relative;
}

.home-rail {
  position: absolute;
  top: 28px;
  bottom: 0;
  width: 160px;
}

.home-rail-left {
  right: calc(50% + var(--wrap) / 2 - 8px);
}

.home-rail-right {
  left: calc(50% + var(--wrap) / 2 - 8px);
}

@media (max-width: 1639px) {
  .home-rail {
    display: none;
  }
}

@media (min-height: 700px) and (hover: hover) and (pointer: fine) {
  .home-rail-right .ad {
    position: sticky;
    top: 24px;
  }
}

/* Home page: in the games grid, ad cards fill the empty places in the last
   row and a full-width ad runs between rows, labelled and boxed apart from the
   game cards. The grid has three columns on computers (wider than 1000px),
   which is where they show; phones and tablets get none. */
.grid-ad,
.grid-row-ad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff05;
}

.grid-row-ad {
  grid-column: 1 / -1;
}

.grid-ad ins {
  min-height: 250px;
}

@media (max-width: 1000px) {
  .grid-ad,
  .grid-row-ad {
    display: none;
  }
}

/* Category links (home page, category pages): big enough to tap. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.chips a,
.chips span {
  padding: 11px 16px;
  border: 1px solid #ffffff1f;
  border-radius: 22px;
  background: #ffffff08;
  color: var(--soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s;
}

.chips a:hover,
.chips a:focus-visible {
  border-color: #ff353c99;
  color: #fff;
}

.chips [aria-current] {
  border-color: var(--red);
  background: #ff353c1a;
  color: #fff;
}

/* On phones the categories are one row that scrolls sideways. */
@media (max-width: 600px) {
  .chips {
    flex-wrap: nowrap;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chips a,
  .chips span {
    flex: none;
  }
}

/* Category pages */
.category-page {
  padding-top: 64px;
}

/* Category pages are short on phones: there they keep just the banner. */
@media (max-width: 1000px) {
  .category-page .ad-multiplex {
    display: none;
  }
}

.category-page .lede {
  max-width: 60ch;
}

.category-page .seo-intro {
  margin-top: 64px;
}

.seo-intro p a {
  color: #fff;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

.footer-categories {
  margin-top: 28px;
}