/* Splash, then home. */

/* ---------- splash ---------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #000;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.7s ease;
}

.no-splash .splash {
  display: none;
}

.splash.leaving {
  transform: translateY(-100%);
}

.splash-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(86vw, 420px);
  padding: 34px 28px 30px;
  animation: card-in 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.splash.leaving .splash-card {
  transform: scale(0.6) rotate(-8deg);
}

@keyframes card-in {
  from { transform: scale(0.4) rotate(12deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.splash-by {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
}

.splash-logo {
  width: 100%;
  --ss-word: var(--white);
  --ss-horizon: var(--white);
  --ss-word-size: clamp(1.5rem, 6vw, 2.1rem);
}

.splash-skip {
  position: absolute;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.14);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- home layout ---------- */

.home {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display: grid;
  gap: 18px;
  grid-template-areas:
    "top"
    "pitch"
    "deck"
    "actions"
    "foot";
  align-content: start;
}

.hero {
  display: contents;
}

.top { grid-area: top; }
.pitch { grid-area: pitch; }
.table-spot { grid-area: deck; }
.actions { grid-area: actions; }
.foot { grid-area: foot; }

@media (min-width: 900px) {
  .home {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas:
      "top     deck"
      "pitch   deck"
      "actions deck"
      "foot    foot";
    align-content: center;
    column-gap: 40px;
    row-gap: 38px;
  }
}

.top {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .top {
    justify-content: flex-start;
  }
}

.top-logo {
  width: 150px;
  --ss-horizon: var(--cream);
}

/* ---------- the pitch ---------- */

.pitch {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
}

@media (min-width: 900px) {
  .pitch {
    justify-items: start;
    text-align: left;
  }
}

.headline {
  margin: 0;
  font-size: clamp(4rem, 17vw, 7.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.22em;
}

@media (min-width: 900px) {
  .headline {
    justify-content: flex-start;
  }
}

.headline > span {
  display: inline-block;
}

/* Each word its own candy colour, each with an outline a shade of itself. */
.headline .w1 .t3d { --g1: #ff6b5e; --g2: #e8332c; --edge: #7d120b; --deep: #4a0905; }
.headline .w2 .t3d { --g1: #ffffff; --g2: #9fe3ff; --edge: #0b4f86; --deep: #052c4d; }
.headline .w3 .t3d { --g1: #4a4a4a; --g2: #0a0a0a; --edge: #000000; --deep: #000000; }

.headline .w2 {
  white-space: nowrap;
}

/* Each word bounces gently, out of step with the next. */
.ready .headline > span {
  animation: word-bob 2.6s ease-in-out infinite;
}

.ready .headline .w2 { animation-delay: -0.9s; }
.ready .headline .w3 { animation-delay: -1.7s; }

@keyframes word-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.tagline {
  margin: 0;
  max-width: 34ch;
  font-size: 1.08rem;
  line-height: 1.45;
  opacity: 0.95;
}

.tagline strong {
  color: var(--yellow);
}

/* The two learn buttons are candy buttons (.gbtn) with a round icon. */
.howto {
  min-height: 58px;
  padding: 8px 22px 11px 10px;
  font-size: 1.3rem;
  text-transform: none;
}

/* How to play is plain white text beside the candy button, not a second one. */
.text-btn {
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.text-btn:hover,
.text-btn:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The two ways to learn, side by side; stacked when there is no room. */
.learn {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 22px;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .learn {
    justify-content: flex-start;
  }
}

.howto.try .play-dot {
  animation-delay: 0.9s;
}

.play-dot {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #f1ece2);
  color: var(--purple-deep);
  border: 0;
  box-shadow: inset 0 -3px 0 #c9bfa9;
  text-shadow: none;
  font-size: 1rem;
  padding-left: 3px;
  animation: ping 1.8s ease-out infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 201, 60, 0.7); }
  100% { box-shadow: 0 0 0 16px rgba(255, 201, 60, 0); }
}

/* ---------- the deck and bra! ---------- */

.table-spot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}

@media (min-width: 900px) {
  .table-spot {
    min-height: 520px;
  }
}

.deck {
  position: relative;
  width: clamp(150px, 42vw, 210px);
  aspect-ratio: 5 / 7;
}

/* The game's own classic deck (assets/cards, sliced from deck_classic.png). */
.dcard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(16, 42, 20, 0.35), 0 8px 16px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 110%;
  animation: shuffle 5.2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
  animation-delay: var(--d, 0s);
  -webkit-user-drag: none;
  user-select: none;
}

/* Where each card goes when the deck fans out. */
/* --sx/--sy step each card a little up and left, so the stack reads as a deck. */
.c1 { --fx: -70%; --fr: -26deg; --d: 0s;    --sx: 10px; --sy: 10px; }
.c2 { --fx: -38%; --fr: -14deg; --d: 0.05s; --sx: 8px;  --sy: 8px; }
.c3 { --fx: -8%;  --fr: -3deg;  --d: 0.1s;  --sx: 6px;  --sy: 6px; }
.c4 { --fx: 22%;  --fr: 8deg;   --d: 0.15s; --sx: 4px;  --sy: 4px; }
.c5 { --fx: 52%;  --fr: 19deg;  --d: 0.2s;  --sx: 2px;  --sy: 2px; }
.c6 { --fx: 82%;  --fr: 30deg;  --d: 0.25s; --sx: 0px;  --sy: 0px; }

/* Stacked, fanned, lifted and riffled back — on a loop. */
@keyframes shuffle {
  0%, 8% { transform: translate(var(--sx), var(--sy)) rotate(0deg); }
  30%, 55% { transform: translate(var(--fx), -6%) rotate(var(--fr)); }
  68% { transform: translate(calc(var(--fx) * 0.3), -22%) rotate(calc(var(--fr) * -0.6)); }
  80% { transform: translate(0, -4%) rotate(calc(var(--fr) * 0.2)); }
  100% { transform: translate(var(--sx), var(--sy)) rotate(0deg); }
}

.bra {
  position: absolute;
  left: 50%;
  bottom: 18%;
  z-index: 3;
  /* The green of .gbtn.green: go. */
  --hi: #8ef26a;
  --face: #4fcf2f;
  --lip: #2e9418;
  --ink-on: #1d6a0c;
  min-width: 170px;
  min-height: 74px;
  font-size: 2.6rem;
  border-radius: 999px;
  transform: translateX(-50%);
  animation: bra-wobble 2.2s ease-in-out infinite;
}

.bra:hover {
  transform: translateX(-50%) scale(1.08) rotate(-3deg);
  animation-play-state: paused;
}

.bra:active {
  transform: translateX(-50%) translateY(5px) scale(0.98);
}

@keyframes bra-wobble {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) scale(1); }
  50% { transform: translateX(-50%) rotate(3deg) scale(1.06); }
}

@media (min-width: 900px) {
  .bra {
    bottom: 14%;
  }
}

/* The deck throws its cards when bra! is pressed. */
.deck.burst .dcard {
  animation: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.6s ease;
  opacity: 0;
}

.deck.burst .c1 { transform: translate(-260%, -120%) rotate(-140deg); }
.deck.burst .c2 { transform: translate(-180%, -220%) rotate(-90deg); }
.deck.burst .c3 { transform: translate(-40%, -260%) rotate(-30deg); }
.deck.burst .c4 { transform: translate(60%, -260%) rotate(40deg); }
.deck.burst .c5 { transform: translate(190%, -200%) rotate(100deg); }
.deck.burst .c6 { transform: translate(260%, -100%) rotate(150deg); }

/* ---------- stores and the two talk buttons ---------- */

.actions {
  display: grid;
  gap: 30px;
  justify-items: center;
}

@media (min-width: 900px) {
  .actions {
    justify-items: start;
  }
}

/*
  Two by two at every width: the stores on one row, the two talk buttons on
  the next, in two equal columns that line up. On a narrow phone the labels
  shrink rather than the grid breaking into one column.
*/
.stores,
.talk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  width: min(100%, 460px);
}

.stores .gbtn,
.talk .gbtn {
  width: 100%;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-size: clamp(1rem, 4.4vw, 1.45rem);
}

.store svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.complain {
  --tilt: 2deg;
}

/* A sticker slapped on at an angle, as in the design. */
.contact {
  --tilt: -5deg;
}

.contact small {
  font-size: 0.6rem;
  font-style: italic;
}

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

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  font-size: 0.9rem;
  opacity: 0.8;
  padding-top: 8px;
}

.foot a {
  color: inherit;
}

/* Each item whole: on a phone the row wraps between them, never inside one. */
.foot > * {
  white-space: nowrap;
}

/* ---------- entrance, once the splash has gone ---------- */

.home > *,
.pitch > *,
.table-spot,
.actions > * {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
}

.ready .home > *,
.ready .pitch > *,
.ready .table-spot,
.ready .actions > * {
  animation: enter 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}

.ready .top { animation-delay: 0s; }
.ready .pitch > :nth-child(1) { animation-delay: 0.08s; }
.ready .pitch > :nth-child(2) { animation-delay: 0.18s; }
.ready .pitch > :nth-child(3) { animation-delay: 0.28s; }
.ready .table-spot { animation-delay: 0.22s; }
.ready .actions > :nth-child(1) { animation-delay: 0.38s; }
.ready .actions > :nth-child(2) { animation-delay: 0.48s; }
.ready .foot { animation-delay: 0.6s; }

/* The containers themselves are not animated, only their children. */
.ready .home > .hero,
.ready .home > .actions,
.home > .hero,
.home > .actions {
  opacity: 1;
  transform: none;
  animation: none;
}

.ready .pitch,
.pitch {
  opacity: 1;
  transform: none;
  animation: none;
}

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

/* ---------- the video ---------- */

.howto-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 3px solid var(--ink);
  background: var(--felt-deep);
}

/* ---------- on paper ---------- */

.paper .top-logo {
  --ss-horizon: var(--ink);
}

.paper .tagline strong {
  color: var(--red);
}

.paper .text-btn {
  color: var(--ink);
}

/*
  A green wash over the white, home only: the felt remembered, not repeated.
  Lighter in the middle where the headline sits, a little deeper at the edges.
  Raise the two alphas to make it greener.
*/
.paper .felt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(31, 154, 78, 0.10) 0%, rgba(18, 122, 58, 0.22) 100%);
}

/* The headline flat: outline kept, no drop shadow or extrusion under it. */
.headline .t3d::before {
  text-shadow: none;
}