/* ==========================================================================
   Parla Games — brand stylesheet
   Black on white, pink accent. Rounded, geometric, quietly playful.
   ========================================================================== */

:root {
  /* Brand */
  --pink:        #FA0091;   /* sampled from the logo */
  --pink-deep:   #D1007A;
  --ink:         #0A0A0A;
  --paper:       #FFFFFF;

  /* Greys */
  --ink-70:      #4A4A4E;
  --ink-45:      #83838A;
  --ink-20:      #C9C9CE;
  --line:        #ECECEF;
  --tile:        #F3F3F5;
  --tile-2:      #E9E9EC;

  /* Dark surface (footer + legal header) */
  --night:       #0A0A0A;
  --night-70:    rgba(255, 255, 255, 0.62);
  --night-45:    rgba(255, 255, 255, 0.40);
  --night-line:  rgba(255, 255, 255, 0.10);

  /* Type */
  --display: "Gabarito", "Trebuchet MS", sans-serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rhythm */
  --cell: clamp(42px, 5.2vw, 68px);   /* puzzle grid cell — drives the background */
  --gutter: clamp(22px, 5vw, 64px);
  --maxw: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Jigsaw piece silhouette. 100×100 body inset in a 140×140 box, so the tabs
     have room to stick out. Top and right carry tabs, bottom and left carry
     the matching blanks. Declared once and masked onto every piece. */
  --piece: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath d='M20 20L57 20C55 15 50 12 55 6C60 0 80 0 85 6C90 12 85 15 83 20L120 20L120 57C125 55 128 50 134 55C140 60 140 80 134 85C128 90 125 85 120 83L120 120L83 120C85 115 90 112 85 106C80 100 60 100 55 106C50 112 55 115 57 120L20 120L20 83C25 85 28 90 34 85C40 80 40 60 34 55C28 50 25 55 20 57Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ============================================================== hero ===== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(48px, 8vh, 88px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* The grid the pieces snap to is invisible — it exists only in the script.
   Nothing is drawn behind the pieces. */

/* Drifting jigsaw pieces. They should register as texture, not as objects,
   so they are held just above the threshold of noticing. */
.hero__tiles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 47%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 47%, #000 45%, transparent 100%);
}

/* One jigsaw silhouette, reused by every piece as a CSS mask. Two tabs, two
   blanks; rotating it in 90° steps gives four orientations from one path. */
.tile {
  position: absolute;
  top: 0; left: 0;
  width: var(--cell);
  height: var(--cell);
  padding: 1px;

  --sc: 1;
  --rot: 0deg;
  --fade: 1;

  transform:
    translate3d(
      calc(var(--gx, 0px) + var(--x, 0) * var(--cell)),
      calc(var(--y, 0) * var(--cell)), 0)
    rotate(var(--rot))
    scale(var(--sc));
  transition: transform 1600ms var(--ease);

  opacity: 0;
  animation: tile-in 1200ms var(--ease) forwards;
  animation-delay: calc(420ms + var(--i, 0) * 90ms);
}

/* No shadows. A shadow is an edge, and an edge is the thing the eye lands on
   — the depth here comes from gradient and scale alone. */
.tile::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(158deg, #FAFAFC 0%, #F5F5F8 45%, #EFEFF4 100%);
  -webkit-mask-image: var(--piece);
          mask-image: var(--piece);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transform: rotate(var(--turn, 0deg));
}

/* the one piece carrying any brand colour, and only as a tint */
.tile[data-accent="1"]::after {
  background: linear-gradient(158deg,
    rgba(250, 0, 145, 0.10) 0%,
    rgba(250, 0, 145, 0.05) 50%,
    rgba(250, 0, 145, 0.085) 100%);
}

/* a second, cooler grey so the field isn't uniform */
.tile[data-accent="3"]::after {
  background: linear-gradient(158deg, #F6F6FA 0%, #F0F0F5 50%, #E9E9F0 100%);
}

/* three depth planes — scale and opacity only */
.tile[data-depth="back"]  { --sc: 0.80; --fade: 0.55; }
.tile[data-depth="mid"]   { --sc: 0.93; --fade: 0.8; }
.tile[data-depth="front"] { --sc: 1.06; --fade: 1; }

@keyframes tile-in { to { opacity: var(--fade); } }

/* Warm pink haze in the lower right, so the white isn't clinical */
.hero__glow {
  position: absolute;
  z-index: 0;
  right: -14vw;
  bottom: -20vh;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(250, 0, 145, 0.06) 0%, rgba(250, 0, 145, 0) 68%);
  pointer-events: none;
}

/* Fine grain so flat white reads as paper */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- content -- */

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* staggered page-load reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 800ms var(--ease) forwards;
}
.reveal:nth-child(1) { animation-delay:  60ms; }
.reveal:nth-child(2) { animation-delay: 180ms; }
.reveal:nth-child(3) { animation-delay: 300ms; }
.reveal:nth-child(4) { animation-delay: 400ms; }
.reveal:nth-child(5) { animation-delay: 500ms; }

@keyframes reveal { to { opacity: 1; transform: none; } }

/* wordmark */
.hero__logo {
  width: clamp(218px, 33vw, 352px);
  margin: 0 0 clamp(26px, 4.4vh, 42px);
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--pink);
}

.hero__lede {
  margin: clamp(16px, 2.6vh, 24px) auto 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.5vw, 17.5px);
  color: var(--ink-70);
  text-wrap: pretty;
}

/* -------------------------------------------------------- store buttons -- */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4.4vh, 42px);
}

/* Both badges are built from the same box, so they are always identical
   in height, radius and weight — the pair reads as one control. */
.store {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 208px;
  padding: 11px 24px 11px 19px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms var(--ease);
}

/* pink wipe from the left on hover */
.store::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}

.store > * { position: relative; z-index: 1; }

.store:hover,
.store:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pink);
  box-shadow: 0 12px 28px -14px rgba(250, 0, 145, 0.7);
}

.store:hover::before,
.store:focus-visible::before { transform: scaleX(1); }

.store:active { transform: translateY(0); }

.store__icon {
  width: 23px;
  height: 23px;
  fill: currentColor;
  flex: none;
}

.store__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-align: left;
}

.store__kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.68;
}

.store__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  margin-top: 5px;
}

/* quiet contact line under the badges */
.aside {
  margin: clamp(18px, 2.6vh, 26px) 0 0;
  font-size: 14.5px;
  color: var(--ink-45);
}

.aside a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.aside a:hover,
.aside a:focus-visible { color: var(--pink); border-color: var(--pink); }

/* ============================================================== footer === */

.footer {
  position: relative;
  z-index: 2;
  background: var(--night);
  color: var(--night-70);
  padding: clamp(52px, 8vw, 84px) var(--gutter) 0;
}

.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 64px);
}

.footer__logo { width: 146px; margin-bottom: 22px; }

.footer__blurb {
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

.footer__place {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-45);
}

.footer__heading {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.footer__list a {
  position: relative;
  display: inline-block;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--night-70);
  transition: color 220ms var(--ease);
}

.footer__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease);
}

.footer__list a:hover,
.footer__list a:focus-visible { color: #fff; }

.footer__list a:hover::after,
.footer__list a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer__bar {
  max-width: var(--maxw);
  margin: clamp(40px, 6vw, 62px) auto 0;
  padding: 22px 0 26px;
  border-top: 1px solid var(--night-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--night-45);
}

.footer__bar-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer__bar-mark img { width: 13px; opacity: 0.9; }

/* ============================================================== legal ==== */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 56px) var(--gutter) clamp(64px, 10vw, 104px);
}

.legal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 clamp(36px, 7vw, 64px);
}

.legal__top img { width: 116px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-decoration: none;
  transition: color 200ms var(--ease), gap 250ms var(--ease);
}

.back:hover { color: var(--pink); gap: 12px; }

.legal h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(31px, 5.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 12px;
}

.legal__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 clamp(34px, 5vw, 52px);
  padding-bottom: clamp(26px, 4vw, 38px);
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: clamp(38px, 5vw, 52px) 0 12px;
  scroll-margin-top: 24px;
}

.legal h2::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--pink);
  margin-bottom: 16px;
}

.legal h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  margin: 26px 0 8px;
}

.legal p,
.legal li {
  color: var(--ink-70);
  font-size: 15.5px;
  line-height: 1.72;
}

.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--pink); }

.legal a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: 3px; }
.legal a:hover { color: var(--pink); }

.legal strong { color: var(--ink); font-weight: 600; }

.legal__note {
  margin-top: clamp(44px, 6vw, 64px);
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink);
  border-radius: 4px 14px 14px 4px;
  background: #FCFCFD;
}

.legal__note p { margin: 0; font-size: 14.5px; }

/* ========================================================== responsive === */

@media (max-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero { min-height: 100svh; padding-top: 68px; padding-bottom: 72px; }
  .actions { width: 100%; }
  .store { flex: 1 1 100%; justify-content: center; min-width: 0; }
  .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer__bar { justify-content: flex-start; }
}

/* ===================================================== reduced motion ==== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tile { opacity: var(--fade); }
}

/* ==================================================== legal: extras ===== */

/* plain-English summary at the top of each document */
.summary {
  margin: 0 0 clamp(34px, 5vw, 48px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #FCFCFD;
}

.summary h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 14px;
}

.summary h2::before { display: none; }

.summary ul { margin: 0; padding-left: 18px; }
.summary li { font-size: 15px; margin-bottom: 9px; }
.summary li:last-child { margin-bottom: 0; }
.summary p:last-child { margin-bottom: 0; }

/* table of contents */
.toc {
  margin: 0 0 clamp(34px, 5vw, 48px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 16px;
}

.toc h2::before { display: none; }

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 34px;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 8px;
  font-size: 14.5px;
  break-inside: avoid;
}

.toc li::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-20);
}

.toc a {
  text-decoration: none;
  color: var(--ink-70);
  transition: color 180ms var(--ease);
}

.toc a:hover { color: var(--pink); }

/* data tables */
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0 8px;
  font-size: 14.5px;
}

.legal th {
  text-align: left;
  vertical-align: bottom;
  padding: 0 14px 10px 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal td {
  vertical-align: top;
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-70);
  line-height: 1.55;
}

.legal th:last-child, .legal td:last-child { padding-right: 0; }
.legal td strong { color: var(--ink); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }

/* region-specific block */
.region {
  margin: 26px 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 4px 14px 14px 4px;
}

.region > :first-child { margin-top: 0; }
.region > :last-child { margin-bottom: 0; }

.region h3 { margin-top: 0; }

/* the one clause people should not miss */
.flag {
  margin: 26px 0;
  padding: 20px 24px;
  border: 1px solid rgba(250, 0, 145, 0.28);
  border-left: 3px solid var(--pink);
  border-radius: 4px 14px 14px 4px;
  background: rgba(250, 0, 145, 0.028);
}

.flag > :first-child { margin-top: 0; }
.flag > :last-child { margin-bottom: 0; }

/* all-caps blocks that US terms conventionally require */
.legal .caps {
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0.005em;
}

.legal code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--tile);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (max-width: 560px) {
  .toc ol { columns: 1; }
}