/* ============================================================================
   HOME PAGE  —  its own screen.

   Fully opaque, with its own artwork (the inline field scene in index.html) and nothing from
   the game showing through it. Uses the brand tokens from style.css.
   Layout, top to bottom: the logo, the two games, secondary actions,
   and the station strip. Everything stays inside the viewport and scrolls
   only on very short windows.
   ============================================================================ */

.home-page {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 20px);
  padding: clamp(14px, 3.4vh, 34px) 20px clamp(12px, 2.6vh, 26px);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--sky);
  color: var(--pine-ink);
}

/* The field behind everything: houses, hills and sky (an inline <svg> in index.html). */
.home-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- header */

.home-header {
  position: relative;
  flex: 0 0 auto;
  text-align: center;
}

.home-logo svg {
  display: block;
  aspect-ratio: 1316 / 300;
  width: min(1008px, 75.1vw, 102.6vh);
  height: auto;
  margin: 0 auto;
  user-select: none;
}

/* ----------------------------------------------------------------- games */

.home-modes {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 32px);
  width: 100%;
  padding: 10px 0 30px;
}

.mode-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: clamp(240px, 19vw, 340px);
  padding: 20px 22px 22px;
  border: 0;
  border-radius: 30px;
  font-family: var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

.mode-card:hover {
  transform: translateY(-6px);
}

.mode-card:active {
  transform: translateY(7px);
}

.mode-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(70px, 19vh, 190px);
}

.mode-name {
  margin-top: 4px;
  font: 900 clamp(30px, 4.4vh, 52px) / 1 var(--font-ui);
  letter-spacing: 0.14em;
}

.mode-sub {
  max-width: 24ch;
  font: 700 14px/1.35 var(--font-ui);
  text-wrap: balance;
}

.mode-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 24px;
  border-radius: 999px;
  font: 900 14px/1 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mode-play svg {
  width: 18px;
  height: 18px;
  transition: transform 0.12s ease-out;
}

.mode-card:hover .mode-play svg {
  transform: translateX(5px);
}

/* SKEET — the brand color, the main event */
.mode-card--skeet {
  background: var(--clay);
  color: var(--pine-ink);
  box-shadow: 0 11px 0 var(--clay-deep);
}

.mode-card--skeet:hover {
  box-shadow: 0 17px 0 var(--clay-deep);
}

.mode-card--skeet:active {
  box-shadow: 0 4px 0 var(--clay-deep);
}

.mode-card--skeet .mode-play {
  background: var(--pine);
  color: var(--cream);
}

/* TRAP — field green with sky-blue accents */
.mode-card--trap {
  background: var(--pine);
  color: var(--cream);
  box-shadow: 0 11px 0 var(--pine-deep);
}

.mode-card--trap:hover {
  box-shadow: 0 17px 0 var(--pine-deep);
}

.mode-card--trap:active {
  box-shadow: 0 4px 0 var(--pine-deep);
}

.mode-card--trap .mode-sub {
  color: var(--sand);
}

.mode-card--trap .mode-play {
  background: var(--clay);
  color: var(--pine-ink);
}

/* PRACTICE — cream, so it is a third colour beside the orange Skeet and the green Trap */
.mode-card--practice {
  background: var(--cream);
  color: var(--pine-ink);
  box-shadow: 0 11px 0 var(--sand-deep);
}

.mode-card--practice:hover {
  box-shadow: 0 17px 0 var(--sand-deep);
}

.mode-card--practice:active {
  box-shadow: 0 4px 0 var(--sand-deep);
}

.mode-card--practice .mode-sub {
  color: var(--pine);
}

.mode-card--practice .mode-play {
  background: var(--clay);
  color: var(--pine-ink);
}

/* COMPETITIVE — the darkest card: the same fixed rules for everyone */
.mode-card--competitive {
  background: var(--pine-ink);
  color: var(--cream);
  box-shadow: 0 11px 0 #061A10;
}

.mode-card--competitive:hover {
  box-shadow: 0 17px 0 #061A10;
}

.mode-card--competitive:active {
  box-shadow: 0 4px 0 #061A10;
}

/* a long word: it scales with the card so it never spills out */
.mode-card--competitive .mode-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(30px, 4.4vh, 52px); /* the same line height as the other cards, so all four cards are the same height */
  font-size: clamp(18px, 1.75vw, 32px);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mode-card--competitive .mode-sub {
  color: var(--sand);
}

.mode-card--competitive .mode-play {
  background: var(--clay);
  color: var(--pine-ink);
}

/* --------------------------------------------------------------- actions */

.home-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--pine-ink);
  font: 800 15px/1 var(--font-ui);
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--sand-deep);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.1s ease-out;
}

.action-pill svg {
  width: 22px;
  height: 22px;
}

.action-pill:hover {
  background: var(--sand-soft);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--sand-deep);
}

.action-pill:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--sand-deep);
}

/* ---------------------------------------------------------------- footer */
/* Just an empty space now (the STATIONS strip used to be here). It is kept at exactly the size the strip
   took, so everything else on the page stays where it was. */

.home-foot {
  flex: 0 0 auto;
  height: 50px;
}

/* ------------------------------------------------- clays flying across */
/* Pure CSS: the outer element glides across, the inner one rises and falls,
   so each clay follows an arc. Hidden screens don't animate at all. */

.home-fly {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fly {
  position: absolute;
  left: 0;
  pointer-events: auto; /* you can shoot these: click one and it breaks (src/homeClays.js) */
  cursor: crosshair;
  will-change: transform;
  animation: fly-x var(--dur) linear var(--delay) infinite;
}

/* A clay is small and moving, so its clickable area is a little bigger than it looks. */
.fly::before {
  content: "";
  position: absolute;
  inset: -18px;
}

.fly.is-broken {
  visibility: hidden;
  pointer-events: none;
}

.fly-arc {
  display: block;
  animation: fly-y var(--dur) ease-in-out var(--delay) infinite;
}

.fly svg {
  display: block;
  width: var(--size);
  height: calc(var(--size) / 2);
}

/* Lanes sit in the open sky, below the logo, so they aren't hidden behind it. */
.fly--1 { top: 29%; --size: 72px; --dur: 15s; --delay: -4s; }
.fly--2 { top: 52%; --size: 50px; --dur: 21s; --delay: -13s; }
.fly--3 { top: 40%; --size: 60px; --dur: 18s; --delay: -9s; }

@keyframes fly-x {
  0%   { transform: translateX(-12vw); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(112vw); opacity: 0; }
}

@keyframes fly-y {
  0%   { transform: translateY(46px) rotate(-10deg); }
  45%  { transform: translateY(-56px) rotate(2deg); }
  100% { transform: translateY(80px) rotate(12deg); }
}

/* ------------------------------------------------------------ small screens */

/* On short windows the empty space at the bottom makes way, and the game cards are a little tighter. */
@media (max-height: 780px) {
  .home-foot {
    display: none;
  }

  .mode-card {
    padding-top: 16px;
    padding-bottom: 18px;
  }
}

@media (max-height: 640px) {
  .mode-art {
    display: none;
  }

}

/* Four cards do not fit one row on a narrow window: two and two, never three and one. */
@media (min-width: 701px) and (max-width: 1120px) {
  .home-modes {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
  }

  .mode-card {
    width: min(calc(50% - 14px), 340px);
  }
}

@media (max-width: 700px) {
  .home-logo svg {
    width: 86.1vw;
  }

  .home-foot {
    height: 44px;
  }

  .home-page {
    gap: 12px;
  }

  .home-modes {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 24px;
  }

  .mode-card {
    width: min(100%, 360px);
  }

  .mode-art {
    max-height: 120px;
  }

}

/* SkeetLabs needs a mouse (it captures the pointer to aim) and a keyboard. */
.home-note {
  display: none;
  position: relative;
  margin-top: 4px;
  padding: 9px 18px;
  background: var(--cream);
  color: var(--pine-ink);
  border-radius: 999px;
  font: 800 13px/1.3 var(--font-ui);
  text-align: center;
}

@media (hover: none) and (pointer: coarse) {
  .home-note {
    display: block;
  }
}


/* ------------------------------------------------ pieces of a broken clay */
/* Drawn in front of everything, but never in the way of a click. */

.home-debris {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.debris {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.debris svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The flash where the clay cracked: a cream ring that swells and fades. */
.debris-pop {
  position: absolute;
  border-radius: 50%;
  border: 5px solid var(--cream);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0.95;
  animation: debris-pop 0.34s ease-out forwards;
}

@keyframes debris-pop {
  to {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
    border-width: 1px;
  }
}

/* With "reduce motion" on there is nothing flying, so nothing to shoot. */
@media (prefers-reduced-motion: reduce) {
  .home-fly,
  .home-debris {
    display: none;
  }
}

/* A phone on its side is wide but very short: the logo shrinks and the four games sit in one row, so nothing needs scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
  .home-page {
    gap: 6px;
    padding: 8px 16px 10px;
  }
  .home-logo svg {
    width: min(52vw, 82vh);
  }
  .home-modes {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: none;
    gap: 10px;
    padding: 2px 0 8px;
  }
  .mode-card {
    width: calc(25% - 8px);
    max-width: none;
    padding: 12px 8px 14px;
    border-radius: 22px;
    gap: 4px;
  }
  .mode-art,
  .mode-sub {
    display: none;
  }
  .mode-name {
    font-size: 22px;
    letter-spacing: 0.1em;
  }
  .mode-play {
    margin-top: 4px;
    padding: 9px 14px;
    font-size: 12px;
  }
}