/* Best Toilet Games — ink and paper are sampled straight from the logo file. */

:root {
  --ink: #201f1d;
  --ink-soft: #55534f;
  --ink-faint: #8b8985;
  --paper: #e9edee;
  --glaze: #fbfcfc;
  --grout: #c6cdce;
  --grout-deep: #aab3b5;
  --flush: #2f6fed;
  --flush-deep: #1c4fd1;
  --warn: #b4531a;

  --gap-grout: 5px;
  --radius: 10px;
  --shell: 1180px;
  --lift: 0 1px 2px rgba(32, 31, 29, 0.06), 0 8px 20px -6px rgba(32, 31, 29, 0.18);
  --lift-sm: 0 1px 1px rgba(32, 31, 29, 0.05), 0 3px 8px -2px rgba(32, 31, 29, 0.15);

  --font-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 2rem;
  --t-2xl: 2.75rem;
}

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

html { -webkit-text-size-adjust: 100%; }

/* the whole page is one wall of glazed bathroom tile — a real photographed
   ceramic-tile texture, tiled edge to edge; cards and chips sit on top of
   it like stickers */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  /* Two layers: a soft diagonal window-light wash over the whole page, and
     underneath it the ceramic tile photo repeated at a fixed 128px tile
     pitch so tiles stay the same size on every viewport (mockup scale) and
     scroll with the content. The texture is pre-flattened and seam-healed
     so the repeat is invisible. */
  background-image:
    linear-gradient(112deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 52%,
      rgba(255, 255, 255, 0.55) 66%,
      rgba(255, 255, 255, 0.1) 74%,
      rgba(255, 255, 255, 0.45) 82%,
      rgba(255, 255, 255, 0) 100%),
    url("/assets/tile-bg.webp");
  background-repeat: no-repeat, repeat;
  background-position: top center, top center;
  background-size: 100% 100%, 896px 896px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--ink); }

img, svg, iframe { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--flush);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- header ----------
   The logo is the loudest thing on the site, so the bar stays quiet:
   on the home page it carries nav only, since the hero holds the mark. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: 14px;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

/* the logo as a die-cut vinyl sticker slapped on the wall, slightly
   askew — it's also the way back home from a game page */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex: none;          /* the sticker keeps its size; the nav yields instead */
  transform: rotate(-5deg);
  transform-origin: 40% 60%;
  transition: transform 0.2s ease;
}

.brand:hover { transform: rotate(-2deg) scale(1.04); }

/* multiply keeps the mark clean whether the PNG has a background baked in
   or a transparent layer — as long as it sits on a light surface */
.brand__mark {
  height: 80px;
  width: auto;
  flex: none;          /* never let the flex row squeeze the sticker */
}

/* pinned to the top of the bar, not centred in it: the row is taller on
   pages that carry the logo sticker, and centring made the links jump
   between the home page and a game page */
.masthead nav {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-left: auto;
}

/* plain links on the wall — the logo sticker is the way back home,
   so the bar carries nothing but contact and the socials */
.masthead nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 10px 16px;
  transition: color 0.12s ease, background 0.12s ease;
}

.masthead nav a:hover { color: var(--flush); }

.masthead nav a.social {
  padding: 10px;
}

/* ---------- hero: the logo, at size ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 44px 0 40px;
}

/* a soft haze behind the logo and copy: pale grey in the middle, fully
   transparent at the edges, so the type sits on a calmer patch of wall
   without a visible box around it */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60px -14% -50px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 50% at 50% 52%,
      rgba(246, 248, 248, 0.96) 0%,
      rgba(246, 248, 248, 0.82) 38%,
      rgba(246, 248, 248, 0.4) 60%,
      rgba(246, 248, 248, 0) 78%);
}

/* the logo sticker, slapped on the wall a touch crooked */
.hero__mark {
  width: clamp(260px, 48vw, 460px);
  height: auto;
  transform: rotate(-3deg);
}

.hero__copy {
  display: grid;
  justify-items: center;
  margin-top: 10px;
}

.hero h1 {
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  max-width: 30ch;
  margin: 0;
  position: relative;
  padding-bottom: 14px;
  color: var(--ink);
}

.hero h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--flush);
}

.hero p {
  max-width: 46ch;
  margin: 14px 0 0;
  font-size: var(--t-md);
  font-weight: 500;
  color: #3a3936;
}

/* hand-drawn marker doodles scribbled on the wall, lifted from the mockup */
.doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.doodle--good {
  left: clamp(0px, 2vw, 40px);
  top: 46%;
  width: clamp(120px, 12vw, 160px);
  transform: rotate(-4deg);
}

.doodle--toilet {
  right: clamp(0px, 2vw, 40px);
  top: 44%;
  width: clamp(60px, 6.5vw, 84px);
}

.doodle--play {
  right: 8px;
  bottom: 100%;
  width: 88px;
  margin-bottom: 2px;
}

.doodle--soon {
  position: static;
  width: 78%;
  max-width: 220px;
}

/* ---------- scribbles on a game page ----------
   Three per page, chosen by the game's slug. Each slot is a spot on the wall
   with its own side, height, size and tilt — deliberately not mirrored, so
   the wall reads as scribbled on over time rather than laid out. */
.stage-wrap {
  position: relative;
}

.doodle--slot { width: clamp(60px, 6.4vw, 92px); }

/* around the title */
.doodle--head-left  { left: 1%;  top: 26%; width: clamp(96px, 9.4vw, 132px); transform: rotate(-5deg); }
.doodle--head-right { right: 3%; top: 0;   width: clamp(52px, 5.4vw, 72px);  transform: rotate(5deg); }
.doodle--head-low   { right: 8%; top: 44%; width: clamp(56px, 5.8vw, 78px);  transform: rotate(-9deg); }

/* on the bare wall either side of the game */
.doodle--stage-left-high  { left: 2%;  top: 4%;  width: clamp(66px, 6.8vw, 94px); transform: rotate(6deg); }
.doodle--stage-left-low   { left: 7%;  top: 56%; width: clamp(58px, 6vw, 82px);   transform: rotate(-8deg); }
.doodle--stage-right-high { right: 0;  top: 16%; width: clamp(70px, 7.2vw, 98px); transform: rotate(-4deg); }
.doodle--stage-right-low  { right: 5%; top: 63%; width: clamp(62px, 6.4vw, 88px); transform: rotate(7deg); }

/* A landscape game fills most of the column, leaving only a narrow strip of
   wall: every slot beside it pins to the outer edge and shrinks, or it would
   land on the panel. */
.stage-wrap--landscape .doodle--slot { width: clamp(52px, 5vw, 72px); }
.stage-wrap--landscape .doodle--stage-left-high  { left: 0;  top: auto; bottom: 14%; }
.stage-wrap--landscape .doodle--stage-left-low   { left: 0;  top: 56%; }
.stage-wrap--landscape .doodle--stage-right-high { right: 0; top: auto; bottom: 8%; }
.stage-wrap--landscape .doodle--stage-right-low  { right: 0; top: 62%; }

/* in the pager's top padding, arrow landing on the previous / next links */
.doodle--pager-right { top: 2px; right: 4px; bottom: auto; width: 84px; transform: rotate(2deg); }

/* ---------- the tile wall ----------
   Grout is the grid background showing through the gaps, so the games
   read as a run of glazed wall tiles rather than a stack of cards. */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
  margin-bottom: 60px;
}

/* Each game is one glossy ceramic tile: a thick white glazed rim with a
   bevelled edge, the key art recessed into it, and a heavy soft shadow
   lifting it off the wall (see the mockup). */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 12px;
  background: #ffffff;
  background-image: linear-gradient(160deg, #ffffff 0%, #f5f7f8 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(32, 31, 29, 0.06),
    0 1px 2px rgba(32, 31, 29, 0.08),
    0 10px 18px -6px rgba(32, 31, 29, 0.28),
    0 26px 40px -18px rgba(32, 31, 29, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 0 rgba(32, 31, 29, 0.06),
    0 2px 4px rgba(32, 31, 29, 0.1),
    0 16px 26px -8px rgba(32, 31, 29, 0.32),
    0 34px 50px -20px rgba(32, 31, 29, 0.34);
}

/* the empty "more games soon" tile: same rim, nothing glazed in yet */
.tile--soon {
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background-image: linear-gradient(160deg, #f6f8f9 0%, #edf0f1 100%);
}

.tile--soon:hover { transform: none; }

.tile__art {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  overflow: hidden;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(32, 31, 29, 0.12),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* keep the recessed-edge shading above the image */
.tile__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

.tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--glaze);
  color: var(--ink);
}

.tile__flag--dev { background: var(--warn); color: #fff; }
.tile__flag--store { background: var(--ink); color: var(--paper); }

.tile__body {
  padding: 12px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.tile__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: -0.02em;
}

.tile__title a { text-decoration: none; color: inherit; }

/* stretched hit area — the whole tile is the link */
.tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tile__line {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.tile__cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #fff;
  background: var(--flush);
  border-radius: 8px;
  padding: 11px 16px;
  box-shadow: 0 3px 0 var(--flush-deep);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.tile__cta svg { width: 13px; height: 13px; fill: currentColor; }

.tile__cta:hover { background: var(--flush-deep); }

.tile__cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--flush-deep);
}


/* ---------- game page ---------- */

.game-head {
  position: relative;
  isolation: isolate;
  padding: 36px 0 24px;
  text-align: center;
  display: grid;
  justify-items: center;
}

/* same soft near-white haze as the home hero, so the title and blurb
   read cleanly over the tile photo */
.game-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50px -12% -30px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 58% at 50% 50%,
      rgba(246, 248, 248, 0.96) 0%,
      rgba(246, 248, 248, 0.82) 38%,
      rgba(246, 248, 248, 0.4) 62%,
      rgba(246, 248, 248, 0) 80%);
}

.game-head h1 { font-size: clamp(1.9rem, 5vw, var(--t-2xl)); max-width: 16ch; }

.game-head p {
  margin: 14px 0 0;
  font-size: var(--t-md);
  font-weight: 500;
  color: #3a3936;
  max-width: 56ch;
}

/* The dark panel is a passe-partout around the game, so it is only as wide
   as the game plus its border — a phone game in a shell-wide panel left
   huge black margins either side. */
.stage {
  --frame-w: 380px;
  --stage-pad: 18px;
  width: 100%;
  max-width: calc(var(--frame-w) + 2 * var(--stage-pad));
  margin-inline: auto;
  background: var(--ink);
  border-radius: var(--radius);
  padding: var(--stage-pad);
  display: grid;
  place-items: center;
}

.stage--landscape { --frame-w: 900px; }

/* the frame is the shape of the game, not the shape of the page */
.stage__frame {
  width: 100%;
  max-width: var(--frame-w);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}

.stage__frame--landscape { aspect-ratio: 16 / 9; }

.stage__frame iframe { width: 100%; height: 100%; border: 0; }

.stage__bar {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 14px;
}

.stage__bar button {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 15px;
  cursor: pointer;
}

.stage__bar button:hover { background: #fff; }
.stage__bar svg { width: 14px; height: 14px; fill: currentColor; }

.stage--empty {
  max-width: 100%;
  min-height: 300px;
  color: var(--paper);
  text-align: center;
  padding: 52px 24px;
}

.stage--empty p { max-width: 38ch; margin: 0 auto 22px; color: var(--grout); }

/* store buttons under the stage */

.getit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 22px 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: var(--t-base);
  text-decoration: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.btn:hover { background: var(--flush); border-color: var(--flush); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }

/* next / previous game */

.pager {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-grout);
  /* the roomy top edge is where the "play more" scribble lives */
  padding: 88px 0 60px;
}

.pager a {
  flex: 1 1 220px;
  background: var(--glaze);
  border: 1px solid var(--grout);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
}

.pager a:hover { border-color: var(--ink); }
.pager span { display: block; font-size: var(--t-xs); color: var(--ink-faint); }
.pager b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-md); letter-spacing: -0.02em; }
.pager .pager__next { text-align: right; }

/* ---------- simple text page ---------- */

.prose { max-width: 60ch; padding: 30px 0 70px; }
.prose h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.prose p { color: var(--ink-soft); }
.prose a { font-weight: 600; }

/* ---------- footer ---------- */

.foot {
  padding: 30px 0 50px;
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

.foot__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.foot .foot__mark { height: 25px; width: auto; mix-blend-mode: multiply; margin-right: 4px; }

/* plain text + bare icons, like the mockup: no chips or buttons down here */
.foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 4px;
}

.foot a.social { padding: 6px; }
.foot a.social svg { width: 16px; height: 16px; }
.foot a:hover { color: var(--flush); }
.foot__end { margin-left: auto; color: var(--ink-faint); font-weight: 600; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .doodle--good, .doodle--toilet, .doodle--slot { display: none; }
  .pager { padding-top: 40px; }
}

@media (max-width: 620px) {
  .brand__mark { height: 56px; }
  .masthead nav { gap: 6px; }
  .masthead nav a { padding: 9px 11px; }
  .masthead nav a.social { padding: 9px; }
  .hero { padding: 26px 0 30px; }
  .doodle--play { display: none; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
  .tile { padding: 8px 8px 10px; }
  .tile__body { padding: 10px 4px 2px; }
  .tile__line { display: none; }
  .stage { --stage-pad: 10px; }
  .foot__end { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.social {
  display: inline-flex;
  align-items: center;
}