/* Fur Fury website — one stylesheet for every page.
   The landing page is the game's own sky (assets/sky.js) with the logo on
   it; the text pages sit on a still version of that sky. Ink is the cat's
   outline color, orange is Theme.mascotCatColor. */

@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/Rubik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/Rubik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #261d3b;
  --sky-top: #4fb8e8;
  --sky-bottom: #82d7f5;
  --text: #261d3b;
  --text-soft: #4b4466;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-border: rgba(38, 29, 59, 0.12);
  --orange: #ff992e;
  --link: #b8560a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #0a1028;
    --sky-bottom: #1e2143;
    --text: #f4f1ff;
    --text-soft: #c4bfdc;
    --surface: rgba(24, 26, 60, 0.9);
    --surface-border: rgba(255, 255, 255, 0.10);
    --link: #ffb25e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { background: var(--sky-top); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Rubik", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)) fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); font-weight: 700; }
a:hover { text-decoration-thickness: 2px; }

/* --- Moving between pages ---------------------------------------------- */

/* A cross-page view transition. The sky is its own layer that switches
   straight to the new page's canvas (sky.js has already drawn it picking
   up where the old one left off). The rest of the page leaves quickly and
   the new page settles in a moment later, fading in as it rises a few
   pixels, so the two never sit on top of each other half-faded. The
   language switch has its own layer too, so it glides to its new spot. */
@view-transition { navigation: auto; }
.sky { view-transition-name: sky; }
.lang-picker { view-transition-name: lang-picker; }
::view-transition-old(sky) { display: none; }
::view-transition-new(sky) { animation: none; }

::view-transition-old(root) {
  animation: page-leave 0.18s ease-in both;
}
::view-transition-new(root) {
  animation: page-enter 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s both;
}
::view-transition-group(lang-picker) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* On the text pages the parts every page shares stay put: the name, the
   page links (only the underline moves), and the white card, which eases
   to the new page's height while just its text crossfades. The card's
   snapshots are pinned to the top at their own size instead of being
   stretched to the card's in-between height. */
.topbar .home { view-transition-name: brand; }
.page-links { view-transition-name: page-links; }
.page { view-transition-name: page-content; }
.page-bg { view-transition-name: page-bg; }
::view-transition-group(brand),
::view-transition-group(page-links),
::view-transition-group(page-content),
::view-transition-group(page-bg) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
}
::view-transition-old(page-content),
::view-transition-new(page-content) {
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: top center;
}
::view-transition-old(page-content) {
  animation: content-out 0.16s ease-in both;
}
::view-transition-new(page-content) {
  animation: content-in 0.32s ease-out 0.08s both;
}
@keyframes content-out { to { opacity: 0; } }
@keyframes content-in { from { opacity: 0; } }

/* Between two text pages the card is drawn by the transition itself: its
   layer gets the card's look and simply resizes from the old page's card to
   the new one's, with the snapshots hidden. A snapshot stretched to the
   in-between size would squash its corners, and two crossfading ones dim
   in the middle, which read as a flicker. To or from the landing page,
   which has no card, the default fade applies. */
html:active-view-transition-type(text-pages)::view-transition-group(page-bg) {
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--surface-border), 0 20px 40px -24px rgba(20, 10, 50, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html:active-view-transition-type(text-pages)::view-transition-old(page-bg),
html:active-view-transition-type(text-pages)::view-transition-new(page-bg) {
  display: none;
}

@keyframes page-leave {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
}

/* Browsers without cross-page transitions (and every first visit) get the
   same arrival: the head script adds .page-enter unless a view transition
   is already handling it. */
.page-enter .stage,
.page-enter .wrap,
.page-enter .site-footer {
  animation: page-enter 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .page-enter .stage,
  .page-enter .wrap,
  .page-enter .site-footer { animation: none; }
}

/* --- Landing page ------------------------------------------------------ */

.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* the dawn the sky starts on, until the first frame paints */
  background: linear-gradient(180deg, #5c7ca6, #ff9e6d);
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 72px 16px 24px; /* clear of the language picker */
  text-align: center;
}
.stage h1 { margin: 0; line-height: 0; }
.logo {
  /* Shrinks on short screens too, so the whole stage fits without scrolling. */
  width: min(620px, 88vw, 64vh);
  width: min(620px, 88vw, 64svh);
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(20, 10, 40, 0.25));
}
/* White with the cat's ink outline, like the game's own banners, so it
   reads on every hour of the sky. */
.tagline {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  -webkit-text-stroke: 0.22em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 10px rgba(20, 10, 40, 0.25);
}
.badge {
  margin: 8px 0 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 20px -6px rgba(20, 10, 40, 0.45);
}

/* --- Top bar and language picker (every page) ------------------------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  /* The name and the page links share a text baseline, though their
     sizes differ; the cat and the language switch are centered on it. */
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
}
.landing .topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  max-width: none;
}
.topbar .home {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 1.3rem;
  text-shadow: 0 1px 3px rgba(20, 10, 40, 0.6);
}
.topbar .home img {
  /* Centered on the capital letters, not on the line box (whose middle
     is lower, since it leaves room for descenders): sit the cat's bottom
     on the text baseline, then move it down by half its height minus half
     Rubik's cap height (0.7em). */
  align-self: baseline;
  transform: translateY(calc(50% - 0.35em));
  /* The same amount taken back from above, so the bar keeps its height. */
  margin-top: calc(0.35em - 20px);
  filter: drop-shadow(0 2px 4px rgba(20, 10, 40, 0.3));
}
.topbar .lang-picker { align-self: center; }

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-left: 8px;
}
.page-links a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(20, 10, 40, 0.7), 0 0 8px rgba(20, 10, 40, 0.35);
  text-decoration: none;
}
.page-links a:hover { color: #fff; }
.page-links a[aria-current="page"] {
  color: #fff;
  /* An underline rather than a border, so it doesn't change the link's
     height and push its text off the shared baseline. */
  text-decoration: underline 2px rgba(255, 255, 255, 0.85);
  text-underline-offset: 6px;
}

/* On a phone the links get their own row under the name and switch. */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  .page-links { order: 3; flex-basis: 100%; flex-wrap: nowrap; gap: 12px; margin-left: 0; justify-content: space-between; }
  .page-links a { font-size: 0.88rem; white-space: nowrap; }
}

/* A two-segment switch; the current language is the filled one. */
.lang-picker {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: rgba(38, 29, 59, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lang-picker a {
  min-width: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
}
.lang-picker a:hover { color: #fff; }
.lang-picker a[aria-current="page"] {
  background: #fff;
  color: var(--ink);
}

/* --- Text pages (privacy, support, credits, legal notice) -------------- */

.wrap {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
}

.page {
  position: relative;
  isolation: isolate;
  margin: 0 0 24px;
  padding: 28px clamp(18px, 4vw, 44px) 36px;
}
/* The card itself, as its own element behind the text, so a page change
   can keep it on screen while only the text changes. */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 20px 40px -24px rgba(20, 10, 50, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.page h1, .page h2, .page h3 { font-weight: 700; line-height: 1.15; }
.page h1 { font-size: clamp(2rem, 6vw, 2.6rem); margin: 4px 0 4px; }
.page h2 { font-size: 1.4rem; margin: 32px 0 6px; }
.page h3 { font-size: 1.08rem; margin: 22px 0 4px; }
.page p, .page li { color: var(--text-soft); }
.page ul { padding-left: 1.2em; }
.page address { font-style: normal; color: var(--text); }
.meta { color: var(--text-soft); font-size: 0.95rem; margin: 0; }
.callout {
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: 14px;
  border-left: 5px solid var(--orange);
  background: rgba(255, 153, 46, 0.12);
}
.callout p { margin: 0; color: var(--text); }
.page .credits { list-style: none; padding: 0; }
.credits li { margin: 0 0 12px; }
.credits strong { color: var(--text); }

/* --- Footer (every page) ----------------------------------------------- */

.site-footer {
  position: relative;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 10, 40, 0.7), 0 0 8px rgba(20, 10, 40, 0.35);
}
/* The landing page fills the screen with the stage, and the footer
   follows it in the flow rather than being pinned over it, so on a short
   screen the page scrolls instead of the footer covering the badge. */
body.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.landing .stage { flex: 1; min-height: 0; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-bottom: 4px;
}
.site-footer a { color: #fff; font-weight: 700; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0; opacity: 0.9; }
.site-footer p a { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 2px; }