/* Shared pixel-art skin for every HappyBiu shell page.
 *
 * Loaded last on every page that uses the g-shell body class (after the
 * shared base, shell, stage/legal and ad stylesheets). Game iframes keep
 * their own game-specific art and never load this file.
 *
 * Colours, spacing, radii and shadows all come from the pixel tokens in
 * assets/css/tokens.css. Pixel edges use --pixel-grid-size / --pixel-border-*.
 */

/* Palette remap ----------------------------------------------------------- */

.g-shell {
  --color-bg: var(--pixel-bg);
  --color-surface: var(--pixel-surface);
  --color-surface-2: var(--pixel-surface-2);
  --color-text: var(--pixel-ink);
  --color-text-muted: var(--pixel-muted);
  --color-border: var(--pixel-line);
  --color-brand-100: var(--pixel-brand-soft);
  --color-brand-500: var(--pixel-brand);
  --color-brand-600: var(--pixel-brand-strong);
  --color-on-brand: var(--pixel-on-brand);
  --color-focus: var(--pixel-focus);
  --color-wash: var(--pixel-brand-soft);

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 0;

  --shadow-sm: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  --shadow-md: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  --shadow-lg: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-shadow);

  background-color: var(--pixel-bg);
  background-image: conic-gradient(
    var(--pixel-bg-grid) 0 25%,
    transparent 0 50%,
    var(--pixel-bg-grid) 0 75%,
    transparent 0
  );
  background-size: calc(var(--pixel-grid-size) * 2) calc(var(--pixel-grid-size) * 2);
  color: var(--pixel-ink);
}

.g-shell ::selection {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
}

.g-shell :focus-visible {
  outline: var(--pixel-border-width) solid var(--pixel-focus);
  outline-offset: 3px;
  border-radius: 0;
}

/* Header ------------------------------------------------------------------ */

.g-shell .g-shell__header {
  border-bottom: 0;
  background-color: var(--pixel-surface);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pixel-brand) 0 calc(var(--pixel-grid-size) * 4),
    var(--pixel-accent) calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 8),
    var(--pixel-accent-2) calc(var(--pixel-grid-size) * 8) calc(var(--pixel-grid-size) * 12)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--pixel-border-width);
  box-shadow: 0 var(--pixel-border-width) 0 var(--pixel-line);
}

.g-shell .g-nav__link {
  border: var(--pixel-border-thin) solid transparent;
  color: var(--pixel-muted);
  font-family: var(--pixel-ui-font);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.g-shell .g-nav__link:hover,
.g-shell .g-nav__link.is-active {
  color: var(--pixel-ink);
  border-color: var(--pixel-line);
  background: var(--pixel-brand-soft);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-accent);
}

.g-shell .g-icon-btn {
  border: var(--pixel-border-width) solid var(--pixel-line);
  border-radius: 0;
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  transition:
    transform var(--duration-fast) steps(2, end),
    box-shadow var(--duration-fast) steps(2, end),
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.g-shell .g-icon {
  shape-rendering: crispEdges;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.g-shell .g-icon-btn:hover {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
  transform: translate(
    calc(var(--pixel-shadow-offset) * -0.5),
    calc(var(--pixel-shadow-offset) * -0.5)
  );
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-shadow);
}

.g-shell .g-icon-btn:active {
  transform: translate(var(--pixel-shadow-offset), var(--pixel-shadow-offset));
  box-shadow: 0 0 0 0 var(--pixel-shadow);
}

/* Buttons ----------------------------------------------------------------- */

.g-shell .g-btn {
  border: var(--pixel-border-width) solid var(--pixel-line);
  border-radius: 0;
  font-family: var(--pixel-ui-font);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  transition:
    transform var(--duration-fast) steps(2, end),
    box-shadow var(--duration-fast) steps(2, end),
    background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.g-shell .g-btn:hover {
  transform: translate(
    calc(var(--pixel-shadow-offset) * -0.5),
    calc(var(--pixel-shadow-offset) * -0.5)
  );
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-shadow);
}

.g-shell .g-btn:active {
  transform: translate(var(--pixel-shadow-offset), var(--pixel-shadow-offset));
  box-shadow: 0 0 0 0 var(--pixel-shadow);
}

.g-shell .g-btn--primary {
  color: var(--pixel-on-brand);
  background: var(--pixel-brand);
}

.g-shell .g-btn--primary:hover {
  color: var(--pixel-on-brand);
  background: var(--pixel-brand);
}

.g-shell .g-btn--ghost {
  color: var(--pixel-ink);
  background: var(--pixel-surface);
}

.g-shell .g-btn--ghost:hover {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
}

.g-shell .g-hero__actions .g-btn {
  font-size: var(--font-size-md);
}

/* Hero -------------------------------------------------------------------- */

.g-shell .g-hero {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background-color: var(--pixel-surface);
  background-image: conic-gradient(
    var(--pixel-surface-2) 0 25%,
    transparent 0 50%,
    var(--pixel-surface-2) 0 75%,
    transparent 0
  );
  background-size: calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 4);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--pixel-grid-size);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pixel-brand) 0 calc(var(--pixel-grid-size) * 4),
    var(--pixel-accent) calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 8),
    var(--pixel-accent-2) calc(var(--pixel-grid-size) * 8) calc(var(--pixel-grid-size) * 12)
  );
  pointer-events: none;
}

.g-shell .g-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--pixel-border-thin) solid var(--pixel-line);
  color: var(--pixel-ink);
  background: var(--pixel-brand-soft);
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.16em;
}

.g-shell .g-eyebrow::before {
  content: "";
  width: var(--pixel-grid-size);
  height: var(--pixel-grid-size);
  background: var(--pixel-brand);
  box-shadow: var(--pixel-grid-size) var(--pixel-grid-size) 0 var(--pixel-accent-2);
}

.g-shell .g-hero h1 {
  font-family: var(--pixel-ui-font);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.055em;
}

.g-shell .g-text-gradient {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  padding: 0 var(--space-1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.g-shell .g-stats li {
  padding: var(--space-2) var(--space-3);
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-accent);
}

.g-shell .g-stats strong {
  font-family: var(--pixel-ui-font);
}

/* Hero carousel ----------------------------------------------------------- */

.g-shell .g-hero-carousel__viewport {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface-2);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand-strong);
}

.g-shell .g-feature-card {
  border: 0;
  background: var(--pixel-surface-2);
  box-shadow: none;
  transform: none;
}

.g-shell .g-feature-card:hover {
  transform: none;
  box-shadow: none;
}

.g-shell .g-feature-card img {
  transition: transform var(--duration-fast) steps(2, end);
}

.g-shell .g-feature-card:hover img {
  transform: scale(1.02);
}

.g-shell .g-feature-card__badge,
.g-shell .g-feature-card__play {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  border-radius: 0;
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: none;
}

.g-shell .g-feature-card__badge {
  color: var(--pixel-ink);
  background: var(--pixel-surface);
}

.g-shell .g-feature-card__play {
  color: var(--pixel-on-brand);
  background: var(--pixel-brand);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-accent);
}

.g-shell .g-hero-carousel__arrow,
.g-shell .g-hero-carousel__autoplay {
  color: var(--pixel-on-scrim);
  border-color: var(--pixel-line);
  background: var(--color-scrim);
}

.g-shell .g-hero-carousel__arrow:hover,
.g-shell .g-hero-carousel__autoplay:hover {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
}

/* Keep the vertically centred arrows in place on hover. The generic
 * .g-icon-btn:hover transform would otherwise drop translateY(-50%) and
 * make the arrow jump downward when the pointer enters it. */
.g-shell .g-hero-carousel__arrow:hover {
  transform: translateY(-50%);
}

.g-shell .g-hero-carousel__arrow:active {
  transform: translateY(-50%) translate(
    var(--pixel-shadow-offset),
    var(--pixel-shadow-offset)
  );
  box-shadow: 0 0 0 0 var(--pixel-shadow);
}

.g-shell .g-hero-carousel__dots {
  flex-wrap: wrap;
}

.g-shell .g-hero-carousel__dots button {
  flex: 0 0 var(--touch-target-min);
  width: var(--touch-target-min);
}

.g-shell .g-hero-carousel__dots span {
  width: var(--pixel-grid-size);
  height: var(--pixel-grid-size);
  border: var(--pixel-border-thin) solid var(--pixel-line);
  border-radius: 0;
  background: var(--pixel-surface);
}

.g-shell .g-hero-carousel__dots button:hover span {
  background: var(--pixel-brand-soft);
}

.g-shell .g-hero-carousel__dots button[aria-current="true"] span {
  background: var(--pixel-brand);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-accent);
  transform: none;
}

/* Sections ---------------------------------------------------------------- */

.g-shell .g-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.g-shell .g-section__title::before {
  content: "";
  flex: 0 0 auto;
  width: var(--space-3);
  height: var(--space-3);
  background: var(--pixel-brand);
  box-shadow: var(--space-1) var(--space-1) 0 var(--pixel-accent);
}

.g-shell .g-section__sub {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.02em;
}

/* Game cards -------------------------------------------------------------- */

.g-shell .g-game-card {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  transition:
    transform var(--duration-fast) steps(2, end),
    box-shadow var(--duration-fast) steps(2, end),
    border-color var(--duration-fast) var(--easing-standard);
}

.g-shell .g-game-card:hover {
  border-color: var(--pixel-brand-strong);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
  transform: translate(
    calc(var(--pixel-shadow-offset) * -0.5),
    calc(var(--pixel-shadow-offset) * -0.5)
  );
}

.g-shell .g-game-card__cover img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  transition: transform var(--duration-fast) steps(2, end);
}

.g-shell .g-game-card:hover .g-game-card__cover img {
  transform: scale(1.02);
}

.g-shell .g-game-card__title {
  font-family: var(--pixel-ui-font);
  letter-spacing: -0.01em;
}

.g-shell .g-game-card__hint {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.g-shell .g-tag,
.g-shell .g-tag-list li {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  border-radius: 0;
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-shell .g-tag {
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
}

.g-shell .g-tag-list li {
  color: var(--pixel-muted);
  background: var(--pixel-surface-2);
}

.g-shell .g-empty-note {
  border: var(--pixel-border-thin) dashed var(--pixel-line);
  background: var(--pixel-surface);
  font-family: var(--pixel-ui-font);
}

/* Feature blocks ---------------------------------------------------------- */

.g-shell .g-feature {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  transition:
    transform var(--duration-fast) steps(2, end),
    box-shadow var(--duration-fast) steps(2, end);
}

.g-shell .g-feature:hover {
  transform: translate(
    calc(var(--pixel-shadow-offset) * -0.5),
    calc(var(--pixel-shadow-offset) * -0.5)
  );
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-feature__num {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  color: var(--pixel-on-accent);
  background: var(--pixel-accent);
  box-shadow: var(--space-1) var(--space-1) 0 var(--pixel-brand);
  font-family: var(--pixel-ui-font);
}

.g-shell .g-feature h3 {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.01em;
}

/* Footer ------------------------------------------------------------------ */

.g-shell .g-shell__footer {
  border-top: var(--pixel-border-width) solid var(--pixel-line);
  background-color: var(--pixel-surface);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pixel-brand) 0 calc(var(--pixel-grid-size) * 4),
    var(--pixel-accent) calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 8),
    var(--pixel-accent-2) calc(var(--pixel-grid-size) * 8) calc(var(--pixel-grid-size) * 12)
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% var(--pixel-border-width);
  font-family: var(--pixel-ui-font);
}

.g-shell .g-footer-links > * + *::before {
  width: var(--pixel-border-width);
  height: var(--pixel-grid-size);
  background: var(--pixel-line);
}

.g-shell .g-footer-links > .g-link-btn {
  font-family: var(--pixel-ui-font);
}

/* Dialog and skip link ---------------------------------------------------- */

.g-shell .g-dialog {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand-strong);
}

.g-shell .g-dialog__body h2 {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.01em;
}

.g-shell .skip-link {
  border: var(--pixel-border-width) solid var(--pixel-line);
  border-radius: 0;
  color: var(--pixel-on-brand);
  background: var(--pixel-brand);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  font-family: var(--pixel-ui-font);
}

/* Game page: stage, overlays, info, sidebar ------------------------------- */

.g-shell .g-stage {
  gap: var(--space-4);
}

.g-shell .g-stage__hud {
  gap: var(--space-2) var(--space-3);
}

.g-shell .g-stage__hud-item {
  padding: var(--space-1) var(--space-2);
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-accent);
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.06em;
}

.g-shell .g-stage__hud-item strong {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-stage__frame-wrap {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--color-stage-bg);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-stage__frame-wrap:fullscreen {
  border: 0;
  box-shadow: none;
}

.g-shell .g-stage__loader {
  background-color: var(--color-stage-loader-bg);
  background-image: conic-gradient(
    var(--color-stage-bg) 0 25%,
    transparent 0 50%,
    var(--color-stage-bg) 0 75%,
    transparent 0
  );
  background-size: calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 4);
  font-family: var(--pixel-ui-font);
}

.g-shell .g-stage__loader-text {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.g-shell .g-spinner {
  border-radius: 0;
  border-width: var(--space-1);
  animation: g-spin 800ms steps(8, end) infinite;
}

.g-shell .g-stage__overlay {
  background: var(--color-scrim);
  backdrop-filter: none;
}

.g-shell .g-overlay-card {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-overlay-card__title,
.g-shell .g-overlay-card__score {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-game-head h1 {
  font-family: var(--pixel-ui-font);
  letter-spacing: -0.04em;
}

.g-shell .g-game-head__desc {
  color: var(--pixel-muted);
}

.g-shell .g-game-head__meta {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-game-head__meta span {
  padding: var(--space-1) var(--space-2);
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-shell .g-game-info {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
}

.g-shell .g-game-info h2,
.g-shell .g-game-info h3 {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-side__title {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.g-shell .g-mini-card {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
  transition:
    transform var(--duration-fast) steps(2, end),
    box-shadow var(--duration-fast) steps(2, end),
    border-color var(--duration-fast) var(--easing-standard);
}

.g-shell .g-mini-card:hover {
  border-color: var(--pixel-brand-strong);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
  transform: translate(
    calc(var(--pixel-shadow-offset) * -0.5),
    calc(var(--pixel-shadow-offset) * -0.5)
  );
}

.g-shell .g-mini-card img {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  border-radius: 0;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

.g-shell .g-mini-card__name {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-mini-card__meta {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-shell .g-side__note {
  border: var(--pixel-border-thin) dashed var(--pixel-line);
  background: var(--pixel-surface);
  font-family: var(--pixel-ui-font);
}

/* Legal pages ------------------------------------------------------------- */

.g-shell .g-legal {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-legal h1,
.g-shell .g-legal h2,
.g-shell .g-legal h3 {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-legal__meta {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-shell .g-legal__lead {
  color: var(--pixel-muted);
}

.g-shell .g-legal__toc,
.g-shell .g-legal__contact {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface-2);
}

.g-shell .g-legal__toc h2,
.g-shell .g-legal__contact strong {
  font-family: var(--pixel-ui-font);
}

.g-shell .g-table-wrap {
  border: var(--pixel-border-thin) solid var(--pixel-line);
}

.g-shell .g-legal th {
  background: var(--pixel-surface-2);
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* About page -------------------------------------------------------------- */

.g-shell .g-about__header {
  border: var(--pixel-border-width) solid var(--pixel-line);
  background-color: var(--pixel-surface);
  background-image: conic-gradient(
    var(--pixel-surface-2) 0 25%,
    transparent 0 50%,
    var(--pixel-surface-2) 0 75%,
    transparent 0
  );
  background-size: calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 4);
  box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-brand);
}

.g-shell .g-about__header h1 {
  font-family: var(--pixel-ui-font);
  letter-spacing: -0.04em;
}

.g-shell .g-about__facts {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface-2);
}

.g-shell .g-about__facts h3 {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-shell .g-about__back {
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Ad slots ---------------------------------------------------------------- */

.g-shell .g-ad-slot {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  background: var(--pixel-surface-2);
}

.g-shell .g-ad-slot__label {
  color: var(--pixel-muted);
  font-family: var(--pixel-ui-font);
  letter-spacing: 0.08em;
}

.g-shell .g-ad-slot__close {
  border: var(--pixel-border-thin) solid var(--pixel-line);
  color: var(--pixel-ink);
  background: var(--pixel-surface);
  box-shadow: var(--pixel-shadow-offset) var(--pixel-shadow-offset) 0 var(--pixel-shadow);
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .g-shell .g-nav {
    border-bottom: var(--pixel-border-width) solid var(--pixel-line);
    background-color: var(--pixel-surface);
    background-image: conic-gradient(
      var(--pixel-surface-2) 0 25%,
      transparent 0 50%,
      var(--pixel-surface-2) 0 75%,
      transparent 0
    );
    background-size: calc(var(--pixel-grid-size) * 4) calc(var(--pixel-grid-size) * 4);
    box-shadow: var(--pixel-shadow-offset-lg) var(--pixel-shadow-offset-lg) 0 var(--pixel-shadow);
  }

  .g-shell .g-shell__footer {
    background-position: 0 0;
  }

  .g-shell .g-footer-links > * + * {
    border-top: var(--pixel-border-thin) solid var(--pixel-line);
  }
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .g-shell .g-icon-btn:hover,
  .g-shell .g-icon-btn:active,
  .g-shell .g-btn:hover,
  .g-shell .g-btn:active,
  .g-shell .g-game-card:hover,
  .g-shell .g-feature:hover,
  .g-shell .g-mini-card:hover,
  .g-shell .g-game-card:hover .g-game-card__cover img,
  .g-shell .g-feature-card:hover img {
    transform: none;
  }

  .g-shell .g-hero-carousel__dots button[aria-current="true"] span {
    transform: none;
  }
}

@media print {
  .g-shell .g-legal,
  .g-shell .g-legal__toc,
  .g-shell .g-legal__contact,
  .g-shell .g-table-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .g-shell .g-legal {
    max-width: none;
    padding: 0;
  }
}