@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fredoka:wght@500;600&display=swap');

:root {
  color-scheme: dark;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --px: 5px; /* one goldfish pixel; whole pixels keep the pixel art crisp */
  /* midnight; the goldfish orange is 7.5:1 on --bg, so it's safe even for small text */
  --bg: #0b1a2c;
  --ink: #fbf3e6;
  --muted: #708fb5;
  --accent: #ff8c2b;
  --panel: #152a41;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }

.masthead { padding: 56px 20px 30px; text-align: center; }
.logo { display: block; width: calc(28 * var(--px)); height: calc(17 * var(--px)); margin: 0 auto 14px; }

/* fish.js wraps the logo in a button that says hi */
.fish {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.fish .logo { margin: 0; }
.fish:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
/* sits left of the fish with its tail at mouth height; the box-shadows draw a pixel border with notched corners */
.bubble {
  position: absolute;
  z-index: 1;
  right: calc(100% + 3 * var(--px));
  bottom: calc(2 * var(--px));
  width: max-content;
  max-width: calc(50vw - 50% - 4 * var(--px) - 16px);
  padding: 6px 12px;
  background: #fff;
  color: #26201d;
  font: 600 1rem/20px 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  text-align: center;
  box-shadow: 0 calc(-1 * var(--px)) #26201d, 0 var(--px) #26201d, calc(-1 * var(--px)) 0 #26201d, var(--px) 0 #26201d;
  transform-origin: right bottom;
  animation: bubble-in 140ms ease-out;
}
/* pixel tail; its first column paints over the bubble's border */
.bubble::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: var(--px);
  width: calc(3 * var(--px));
  height: calc(3 * var(--px));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v3H0zM1 1h1v1H1z'/%3E%3Cpath fill='%2326201d' d='M1 0h1v1H1zM2 1h1v1H2zM1 2h1v1H1z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@keyframes bubble-in { from { opacity: 0; transform: scale(.6); } }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wordmark {
  margin: 0;
  font-family: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--ink);
}
.wordmark span { color: var(--accent); }
.masthead p { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }
/* 40px tap targets around 20px icons */
.socials { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); transition: color 150ms ease; }
.socials a:focus-visible { color: var(--accent); outline: 3px solid var(--accent); outline-offset: 0; }

.games {
  width: min(100% - 40px, 960px);
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
  justify-content: center;
  gap: 28px 24px;
}
.game-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.coming-soon { margin: 24px 0 0; color: var(--muted); text-align: center; font-size: 1rem; }
.thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile, var(--panel));
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.title { margin-top: 12px; font: 600 1.2rem/1.2 'Fredoka', sans-serif; }
.game-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 14px; }

.not-found { display: block; text-align: center; padding: 24px 0 60px; }
.not-found h2 { font: 500 2rem/1.2 'Fredoka', sans-serif; }
.not-found p { font-size: 1rem; line-height: 1.6; }
.not-found a { display: inline-block; color: var(--accent); padding: 12px; text-underline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  a.game-card:hover .thumb img { transform: scale(1.03); }
  a.game-card:hover .title { color: var(--accent); }
  .socials a:hover { color: var(--accent); }
}
@media (max-width: 480px) {
  .masthead { padding-top: 40px; padding-bottom: 18px; }
  :root { --px: 4px; }
  .games { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  a.game-card:hover .thumb img { transform: none; }
  .bubble { animation: none; }
}