/*
 * loup-garou.app's home (the owner's call, 2026-10-12, in the spirit of the store's feature image):
 * the app's red, the wolf faint and fixed high on the window, and apart from it, centred on the
 * window, « Loup Garou », the tagline and the stores' own badges; the legal texts small at the foot.
 * The colours and the type are the app's (`src/theme`): `homeRed`, moon, Griffy and Lato.
 */

@font-face {
  font-family: 'Griffy';
  src: url('/fonts/Griffy_400Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato_400Regular.ttf') format('truetype');
  font-display: swap;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  background: #34090a;
}

/*
 * Three rows: the middle one holds the content, the last the legal links at the foot, and the
 * first as much room as the last, so the content is centred on the window whatever the links take
 * (a row never shrinks under its content: on a short window the content rises, never under them).
 */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right))
    env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  color: #fff;
  font-family: Lato, system-ui, sans-serif;
}

/* The app's `homeRed`, held to the window: a fixed layer, which iOS Safari draws (it ignores a fixed background). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom right, #a01d1e, #34090a);
}

/*
 * The wolf, fixed on the window and placed by it alone, nothing else placed from it: its top a
 * tenth of the way down, 58 % of the width, never more than 40 % of the height nor 260 px, so it
 * always ends above the window's middle.
 */
.wolf {
  position: fixed;
  top: 10vh;
  top: 10svh;
  left: 50%;
  width: min(58vw, 40vh, 260px);
  width: min(58vw, 40svh, 260px);
  height: auto;
  transform: translateX(-50%);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}

/*
 * A notice the browser client sent the player here with (« Cette partie n'existe plus »): the app's
 * toast (`src/components/Toast.tsx`), a night panel floating at the top of the window, content-sized
 * and centred, coming down from above its height in 300 ms and going back up, a fade alone with
 * reduced motion.
 */
.notice {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 20px);
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: min(420px, calc(100vw - 40px));
  margin: 0;
  padding: 10px 20px;
  border: 1px solid rgba(247, 231, 179, 0.5);
  border-radius: 10px;
  background: linear-gradient(to bottom right, #2e0053, #000f3a);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 2px 9px rgba(0, 0, 0, 0.19);
  color: #f7e7b3;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transform: translateX(-50%);
  animation: notice-in 300ms ease both;
}

.notice.leaving {
  animation: notice-out 300ms ease both;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translate(-50%, -100px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes notice-out {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -100px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes notice-in {
    from {
      opacity: 0;
      transform: translateX(-50%);
    }
    to {
      opacity: 1;
      transform: translateX(-50%);
    }
  }
  @keyframes notice-out {
    from {
      opacity: 1;
      transform: translateX(-50%);
    }
    to {
      opacity: 0;
      transform: translateX(-50%);
    }
  }
}

main {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  text-align: center;
}

/* « Loup Garou » measures 5.03 em of Griffy: 5.6 leaves its swashes room on one line. */
h1 {
  margin: 0;
  font-family: Griffy, serif;
  font-weight: normal;
  font-size: clamp(40px, calc((100vw - 32px) / 5.6), 64px);
  line-height: 1.25;
  text-shadow: 0 0 10px #410b0b;
}

/* The trailing tracking is balanced by as much on the left, so the line stays centred. */
.tagline {
  margin: 10px 0 0;
  padding-left: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f7e7b3;
}

.public {
  max-width: 300px;
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 22px;
}

/*
 * The stores' own badges, both 48 px high on the screen (past Apple's 40 px minimum, and a 44 px
 * target): Google's PNG carries its own clear space, 41 of its 250 px on every side, drawn and
 * taken back by a negative margin. A quarter of their height between two.
 */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.public:not([hidden]) + .badges {
  margin-top: 30px;
}

.badges a {
  display: block;
  height: 48px;
}

.badges img {
  display: block;
  height: 48px;
}

.badges .play a {
  width: 161.14px;
}

.badges .play img {
  width: 184.57px;
  height: 71.43px;
  margin: -11.71px;
}

.open-app {
  margin-top: 10px;
  padding: 12px 8px;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  opacity: 0.6;
  text-decoration: none;
}

/* The legal texts, small and faded, never underlined (the owner's call): each a 44 px target. */
footer {
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  padding-bottom: 10px;
}

footer a {
  padding: 13px 5px;
  font-size: 13px;
  line-height: 18px;
  color: #fff;
  opacity: 0.6;
  text-decoration: none;
}

.open-app:hover,
footer a:hover {
  opacity: 0.8;
}

a:focus-visible {
  outline: 2px solid #f7e7b3;
  outline-offset: 2px;
}