/* Sabun Games — bathroom tiles, soap and bubbles */
@font-face {
  font-family: "Bagel Fat One";
  src: url("/fonts/bagel-fat-one.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("/fonts/lexend.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
:root {
  --ink: #1D2B53;
  --tile: #CDEBE8;
  --grout: #B3DCD8;
  --pink: #FF6FA3;
  --lemon: #FFE45C;
  --foam: #FFFFFF;
  --text: #1D2B53;
  --muted: #45557F;

  --display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;

  --tile-size: 72px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--tile);
  /* bathroom tile grid */
  background-image:
    linear-gradient(var(--grout) 3px, transparent 3px),
    linear-gradient(90deg, var(--grout) 3px, transparent 3px);
  background-size: var(--tile-size) var(--tile-size);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--foam); padding: .6rem 1rem; border-radius: 10px;
}
.skip:focus { top: 1rem; }

/* header */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  max-width: 1200px; margin: 0 auto;
}
.top__logo img { width: clamp(120px, 18vw, 170px); height: auto; }
.top__nav { display: flex; gap: clamp(.75rem, 3vw, 2rem); }
.top__nav a {
  text-decoration: none; font-weight: 500;
  padding: .25rem .1rem; border-bottom: 3px solid transparent;
}
.top__nav a:hover { border-bottom-color: var(--pink); }

/* hero */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 820px);
  display: grid; place-items: center;
  padding: 2rem 1rem 5rem;
}
.hero__inner { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.hero__mark {
  width: clamp(130px, 22vw, 220px); height: auto; margin: 0 auto -.5rem;
  animation: wobble 5s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.hero__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  line-height: .9; letter-spacing: -.02em;
  margin: 0; color: var(--ink);
  text-shadow: 6px 6px 0 var(--pink);
}
.hero__slogan {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  margin: 1.1rem 0 0; color: var(--foam);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
  display: inline-block; transform: rotate(-2deg); letter-spacing: .01em;
}
.hero__hint { margin: 1.5rem 0 0; color: var(--muted); font-size: .95rem; }

.popcount {
  position: absolute; z-index: 2; right: clamp(1rem, 4vw, 2.5rem); bottom: 1.25rem; margin: 0;
  background: var(--foam); border: 3px solid var(--ink); border-radius: 999px;
  padding: .3rem .9rem; font-size: .9rem; font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
}
.popcount span { font-weight: 700; font-variant-numeric: tabular-nums; }

/* bubbles */
.bubbles { position: absolute; inset: 0; z-index: 1; }
.bubble {
  position: absolute; top: 0; left: 0;
  border-radius: 50%; border: 2px solid rgba(29, 43, 83, .55);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 9%, transparent 11%),
    radial-gradient(circle at 70% 75%, rgba(255,111,163,.35), transparent 45%),
    radial-gradient(circle at 25% 80%, rgba(255,228,92,.35), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(120,180,255,.35), transparent 45%),
    rgba(255,255,255,.18);
  cursor: pointer; padding: 0;
  will-change: transform;
}
.bubble:focus-visible { outline-offset: 2px; border-radius: 50%; }
.bubble.is-popped { animation: pop .22s ease-out forwards; pointer-events: none; }

/* sections */
.section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; margin: 0 0 .6rem;
}
.section-lede { margin: 0 0 2.2rem; max-width: 48ch; color: var(--muted); }

.games, .contact {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
}

.games__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.game {
  position: relative;
  border: 4px solid var(--ink); border-radius: 34px 26px 38px 22px;
  padding: 2.4rem 1.6rem 1.8rem;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .2s ease;
}
.game:nth-child(1) { transform: rotate(-1.5deg); }
.game:nth-child(2) { transform: rotate(1deg) translateY(1rem); }
.game:nth-child(3) { transform: rotate(-.5deg); }
.game--pink  { background: var(--pink); }
.game--lemon { background: var(--lemon); }
.game--foam  { background: var(--foam); }
.game__status {
  position: absolute; top: -1rem; left: 1.2rem;
  background: var(--ink); color: var(--foam);
  font-size: .85rem; font-weight: 500;
  padding: .25rem .8rem; border-radius: 999px;
}
.game__title { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin: 0 0 .6rem; }
.game p { margin: 0; }

.about { background: var(--ink); color: var(--foam); }
.about__inner {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem);
}
.about p { max-width: 60ch; font-size: 1.15rem; margin: 0 0 1.1rem; }
.about strong { color: var(--lemon); }
.about .section-title { color: var(--pink); }

.contact { text-align: center; }
.contact .section-lede { margin-left: auto; margin-right: auto; }
.button {
  display: inline-block; text-decoration: none;
  font-weight: 700; font-size: 1.05rem;
  background: var(--lemon); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 999px;
  padding: .85rem 1.6rem; box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  overflow-wrap: anywhere;
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }

.foot {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 2rem 1rem 2.5rem; color: var(--muted); font-size: .95rem;
}
.foot p { margin: 0; }

@keyframes wobble {
  0%, 100% { transform: rotate(0) scale(1, 1); }
  25% { transform: rotate(-4deg) scale(1.03, .97); }
  60% { transform: rotate(3deg) scale(.97, 1.03); }
}
@keyframes pop {
  60% { transform: scale(1.35); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 560px) {
  .top { flex-direction: column; }
  .game:nth-child(2) { transform: rotate(1deg); }
  .hero__slogan { -webkit-text-stroke-width: 1px; text-shadow: 2px 2px 0 var(--ink); letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; }
  .game, .button { transition: none; }
}