@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+41, U+49, U+53-54, U+61, U+69, U+73-74, U+c2, U+ce, U+e2, U+ee, U+102-103, U+12c-12d,
    U+15c-15f, U+162-163, U+218-21b, U+302, U+306, U+326-327;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial scaled to Unbounded's width and vertical metrics, so the swap does not move the layout. */
@font-face {
  font-family: 'Unbounded Fallback';
  font-weight: 700 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 131.5%;
  ascent-override: 76%;
  descent-override: 19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --lobby: #141225;
  --lobby-lift: #1d1a33;
  --cream: #f4f2ec;
  --cream-soft: rgba(244, 242, 236, 0.78);
  --cream-muted: rgba(244, 242, 236, 0.62);
  --line: rgba(244, 242, 236, 0.14);
  --lavender: #b9aaff;
  --lavender-ink: #1a1430;

  --ball-bg: #0b0f1e;
  --ball-line: #23284a;
  --ruby: #ff4d6d;
  --tang: #ff9a3c;
  --lemon: #ffd93d;
  --mint: #2ee6a6;
  --sky: #3da5ff;
  --plum: #b07cff;

  --tank-bg: #0f110b;
  --tank-raise: #181b11;
  --tank-ink: #edefdf;
  --tank-line: rgba(237, 239, 223, 0.14);
  --amber: #ffc25e;

  --party-bg: #15161f;
  --party-line: #363a4d;
  --team-blue: #78b8ff;
  --team-pink: #ff8fc8;
  --team-amber: #ffc857;
  --team-mint: #7ee0c8;

  --font-display: 'Unbounded', 'Unbounded Fallback', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --pad-x: max(var(--gutter), calc((100% - 1280px) / 2));
  --measure: 62ch;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--lobby);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
dl {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

dd {
  margin: 0;
}

[lang='ar'] {
  font-family: 'Cairo', var(--font-body);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--lavender);
  color: var(--lavender-ink);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 16px;
}

/* Masthead */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px var(--pad-x);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--cream);
}

.wordmark span {
  color: var(--lavender);
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.jump a {
  display: inline-block;
  padding: 10px 0;
  color: var(--cream-soft);
  text-decoration: none;
}

.jump a:hover {
  color: var(--cream);
  text-decoration: underline;
}

/* Intro and lineup */

.intro {
  padding: clamp(40px, 8vw, 112px) var(--pad-x) clamp(56px, 9vw, 128px);
}

.intro h1 {
  max-width: 22ch;
  font-size: clamp(1.75rem, 2.6vw + 1rem, 3rem);
}

.lede {
  max-width: var(--measure);
  margin-top: 20px;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  color: var(--cream-soft);
}

.lineup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.6em;
  margin-top: clamp(40px, 6vw, 72px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 4.4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.lineup a {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  padding: 0.04em 0;
  text-decoration: none;
  border-radius: 0.12em;
}

.lineup .glyph {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  transition: transform 220ms var(--ease);
}

.lineup a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.lineup .fam-ball a:hover .glyph {
  transform: translateY(-0.12em);
}

.lineup .fam-tank a:hover .glyph {
  transform: rotate(-12deg);
}

.lineup .fam-party a:hover .glyph {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .lineup .glyph {
    transition: none;
  }
}

@media (max-width: 599px) {
  .lineup {
    font-size: min(8.4vw, 2.5rem);
  }
}

/* Family sections */

.family {
  padding: clamp(56px, 8vw, 112px) var(--pad-x);
  border-top: 1px solid var(--line);
}

.family-head {
  display: grid;
  gap: 16px 48px;
  align-items: baseline;
}

.family-head h2 {
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
}

.family-head p {
  max-width: var(--measure);
  font-size: 1.125rem;
  color: var(--cream-soft);
}

@media (min-width: 900px) {
  .family-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.game h3 {
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
}

.game > p {
  max-width: var(--measure);
  margin-top: 12px;
  color: var(--cream-soft);
}

.aside {
  max-width: var(--measure);
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--cream-muted);
}

.play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 160ms var(--ease);
}

.play:hover {
  text-decoration: none;
}

/* Ball races */

.family-ball {
  background: var(--ball-bg);
  border-top-color: var(--ball-line);
}

.posters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 12px;
  margin: clamp(32px, 5vw, 56px) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--ball-line) transparent;
}

.posters li {
  scroll-snap-align: start;
}

.posters a {
  display: block;
  border-radius: 14px;
}

.posters img {
  width: 100%;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  object-position: 50% 0;
  transition: border-color 160ms var(--ease);
  border-radius: 14px;
  border: 1px solid var(--ball-line);
  background: #121527;
}

.posters a:hover img {
  border-color: var(--sky);
}

@media (min-width: 900px) {
  .posters {
    grid-auto-columns: minmax(0, 1fr);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.games-two {
  display: grid;
  gap: 40px 48px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 760px) {
  .games-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .games-two {
    grid-template-rows: repeat(4, auto);
  }

  .games-two .game {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }

  .games-two .play {
    justify-self: start;
  }
}

.family-ball .game {
  padding-top: 20px;
  border-top: 3px solid var(--ruby);
}

.family-ball .game + .game {
  border-top-color: var(--sky);
}

.ways {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.ways li {
  position: relative;
  padding-left: 22px;
  color: var(--cream-soft);
}

.ways li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lemon);
}

.ways li:nth-child(2)::before {
  background: var(--mint);
}

.ways li:nth-child(3)::before {
  background: var(--tang);
}

.ways li:nth-child(4)::before {
  background: var(--plum);
}

.family-ball .play {
  background: var(--sky);
  color: var(--ball-bg);
}

.family-ball .play:hover {
  background: #6dbbff;
}

/* Tanks */

.family-tank {
  background: var(--tank-bg);
  color: var(--tank-ink);
  border-top-color: var(--tank-line);
}

.family-tank .family-head p,
.family-tank .game > p {
  color: rgba(237, 239, 223, 0.8);
}

.family-tank .aside {
  color: #a9ae97;
}

.tank-body {
  display: grid;
  gap: 32px 48px;
  margin-top: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .tank-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--tank-line);
  background: var(--tank-raise);
}

.modes {
  margin-top: 20px;
  border-top: 1px solid var(--tank-line);
}

.modes > div {
  display: grid;
  gap: 2px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tank-line);
}

@media (min-width: 520px) {
  .modes > div {
    grid-template-columns: 9.5em minmax(0, 1fr);
  }
}

.modes dt {
  font-weight: 700;
  color: var(--amber);
}

.modes dd {
  color: rgba(237, 239, 223, 0.8);
}

.family-tank .play {
  background: var(--amber);
  color: var(--tank-bg);
}

.family-tank .play:hover {
  background: #ffd38b;
}

.family-tank :focus-visible {
  outline-color: var(--amber);
}

/* Party games */

.family-party {
  background: var(--party-bg);
  border-top-color: var(--party-line);
}

.party-list {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--party-line);
}

.party-list > li {
  display: grid;
  gap: 12px 48px;
  padding: 24px 0;
  border-bottom: 1px solid var(--party-line);
}

@media (min-width: 900px) {
  .party-list > li {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: baseline;
  }
}

.party-game h3 {
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
}

.party-list > li:nth-child(1) h3 {
  color: var(--team-blue);
}

.party-list > li:nth-child(2) h3 {
  color: var(--team-pink);
}

.party-list > li:nth-child(3) h3 {
  color: var(--team-amber);
}

.party-list > li:nth-child(4) h3 {
  color: var(--team-mint);
}

.party-list > li:nth-child(5) h3 {
  color: var(--lavender);
}

.party-game p {
  max-width: 48ch;
  margin-top: 8px;
  color: var(--cream-soft);
}

.names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--cream-muted);
}

.names li[lang='ar'] {
  font-size: 1.0625rem;
}

.names .code {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 1px 5px;
  border: 1px solid var(--party-line);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: 0.1em;
  color: var(--cream-muted);
}

.family-party .play {
  background: var(--lavender);
  color: var(--lavender-ink);
}

.family-party .play:hover {
  background: #d3c9ff;
}

/* Free */

.free {
  padding: clamp(56px, 8vw, 112px) var(--pad-x);
  border-top: 1px solid var(--line);
}

.free h2 {
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem);
}

.terms {
  display: grid;
  gap: 28px 48px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 760px) {
  .terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.terms dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0;
  word-spacing: 0.12em;
}

.terms dd {
  max-width: 52ch;
  margin-top: 8px;
  color: var(--cream-soft);
}

/* Footer */

.site-foot {
  display: grid;
  gap: 16px;
  padding: 40px var(--pad-x) 48px;
  border-top: 1px solid var(--line);
  background: var(--lobby-lift);
  font-size: 0.9375rem;
  color: var(--cream-muted);
}

.wordmark-small {
  font-size: 1.125rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.foot-links a {
  display: inline-block;
  padding: 8px 0;
  color: var(--cream-soft);
}

/* Not found */

.missing {
  min-height: 60vh;
  padding: clamp(56px, 10vw, 128px) var(--pad-x);
}

.missing h1 {
  font-size: clamp(2rem, 3.4vw + 1rem, 3.75rem);
}

.missing p {
  max-width: var(--measure);
  margin-top: 16px;
  color: var(--cream-soft);
}

.missing .play {
  background: var(--lavender);
  color: var(--lavender-ink);
}