:root {
  color-scheme: light;
  background: #fff;
  color: #000;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main { padding: 40px 24px 0; }

.title {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 10 / 1;
  margin: 0 auto;
  overflow: hidden;
}

.title img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translateY(-54.2%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  width: min(1040px, 100%);
  margin: 64px auto 0;
}

.game-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 36px) / 3);
  aspect-ratio: 2200 / 1000;
  overflow: hidden;
  border: 4.4px solid #000;
  border-radius: 10px;
  background: #fff;
  transition: transform 180ms ease;
}

.game-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.game-button[href^="games/human-art-generator/"] img {
  object-fit: cover;
  transform: scale(1.1);
}


.game-button[href="games/vs/"] img,
.game-button[href^="games/volume-control/"] img {
  object-fit: cover;
}

.game-button[href^="games/learn-how-to-walk/"] img,
.game-button[href^="games/sell-me-this/"] img {
  object-fit: cover;
}

.game-button[href^="games/find-a-font/"] {
  padding: 0;
  background: #fff29c;
}
.game-button[href^="games/find-a-font/"] img {
  object-fit: cover;
  transform: scale(1.015);
}

.game-button:hover,
.game-button:focus-visible { transform: scale(1.05); }

.game-button:focus-visible {
  outline: 3px solid #252f34;
  outline-offset: 4px;
}

.mailbox-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  height: 260px;
  margin-top: auto;
  overflow: hidden;
}

.mailbox {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  margin: 0 0 -20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}


.mailbox[data-open="true"] { transform: scale(1.06); }

.mailbox:focus-visible {
  outline: 2px solid #d6d6d6;
  outline-offset: -3px;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .game-button { width: calc((100% - 18px) / 2); }
}

@media (max-width: 600px) {
  main { padding: 32px 20px 0; }
  .games { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-button, .mailbox { transition: none; }
  .game-button:hover, .game-button:focus-visible { transform: none; }
  .mailbox[data-open="true"] { transform: none; }
}


.earth-tile {
  position: relative;
  isolation: isolate;
  background: #000;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.earth-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 7% 15%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 30% 24%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 87% 21%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 76% 29%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 13% 69%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 30% 65%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 77% 78%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 88% 63%, #fff 0 1.5px, transparent 2px);
  pointer-events: none;
}
.earth-tile earth-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 38%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.earth-tile-title {
  position: relative;
  z-index: 2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.mailbox { display: block; }


/* Compact game rows. */
.games {
  row-gap: 18px;
  margin-top: 64px;
  isolation: isolate;
}
.game-card {
  position: relative;
  isolation: isolate;
  width: calc((100% - 36px) / 3);
  min-width: 0;
  z-index: 0;
}
.game-card:hover, .game-card:focus-within { z-index: 10; }
.game-card > .game-button { position: relative; z-index: 1; width: 100%; }
@media (max-width: 900px) {
  .game-card { width: calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
  .games { margin-top: 40px; gap: 12px; }
  .game-card { width: calc((100% - 12px) / 2); container-type: inline-size; }
  /* Match the desktop 4.4px outline at its 334.7px card width. */
  .game-card > .game-button { border-width: 2.2px; border-width: 1.315cqw; }
  .earth-tile-title { font-size: clamp(11px, 3.1vw, 18px); }
}

/* Support link, kept within the device's safe area. */
.donate-button {
  position: fixed;
  z-index: 30;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #ffdd00;
  color: #000;
  font: 600 14px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
  box-shadow: 0 3px 0 #000;
  transition: transform 180ms ease, background 180ms ease;
}
.donate-button:hover { transform: translateY(-3px); background: #ffe737; }
.donate-button:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
.donate-button .donate-cup { display: block; flex-shrink: 0; width: 26px; height: 32px; object-fit: contain; border-radius: 4px; }
@media (max-width: 600px) {
  .donate-button { width: 48px; padding: 10px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .donate-button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .donate-button { transition: none; }
  .donate-button:hover { transform: none; }
}

.mailbox-model { position: absolute; inset: 0; pointer-events: none; }
.mailbox-model canvas { display: block; width: 100%; height: 100%; }

/* The person rests on the top of the support button, without intercepting clicks. */
.donate-person {
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 20px);
  width: 144px;
  height: 144px;
  transform: translateX(-50%);
  pointer-events: none;
}
.donate-person canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .donate-button .donate-person { display: none; }
}

.game-button[href^="games/cursor-wars/"] { padding: 0; background: #dc4330; }
.game-button[href^="games/cursor-wars/"] img { object-fit: cover; transform: scale(1.015); }

/* The previous website, opposite the support button. */
.old-site-button {
  position: fixed;
  z-index: 30;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font: 600 14px/1.2 Arial, Helvetica, sans-serif;
  text-decoration: none;
  box-shadow: 0 3px 0 #000;
  transition: transform 180ms ease, background 180ms ease;
}
.old-site-button:hover { transform: translateY(-3px); background: #f5f5f5; }
.old-site-button:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
@media (max-width: 600px) {
  .old-site-button { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .old-site-button { transition: none; }
  .old-site-button:hover { transform: none; }
}