/* Femme Fatale Games — from the Figma .site export
   Palette
   --------
   pink      #dd1180  primary accent
   dark pink #820b44  hero sky, hover states
   black     #000000  page
   ink       #070707  blob / rocks
   panel     #131212  games band, dirt
   panel-2   #1c1b1b  dirt highlight
*/

:root {
  --pink: #dd1180;
  --dark-pink: #820b44;
  --ink: #070707;
  --panel: #131212;
  --white: #ffffff;

  --display: "Pirata One", "Bokor", cursive;
  --khmer: "Bokor", "Pirata One", cursive;
  --cond: "Bahnschrift", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Raleway", ui-sans-serif, system-ui, sans-serif;

  --measure: 1400px;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* topbar height: logo mark + vertical padding (used to fit the hero above the fold) */
  --header-h: calc(clamp(60px, 9.4vw, 135px) + 32px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #000;
  color: var(--white);
  font-family: var(--body);
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Trademark mark on the wordmarks. Sized off the line it sits on and lifted
   with a zero line-height superscript so it never grows the logo's box. */
.tm {
  font-size: 0.36em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.15em;
}

/* ---------- Header ---------- */

/* Overlaid on the hero's top band: breathing room without adding page height */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 16px clamp(12px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.logo-mark {
  display: block;
  height: clamp(60px, 9.4vw, 135px);
  width: auto;
}

.logo-text {
  font-family: var(--display);
  line-height: 0.9;
  white-space: nowrap;
}

.logo-line1 { display: block; font-size: clamp(19px, 3.4vw, 44px); }
.logo-line2 { display: block; font-size: clamp(15px, 2.7vw, 35px); }

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 5.5vw, 74px);
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(18px, 2.3vw, 30px);
}

.topnav > a { transition: color 0.15s ease; }
.topnav > a:hover,
.topnav > a:focus-visible { color: var(--pink); }

.btn-contact {
  display: inline-block;
  background: var(--pink);
  color: var(--white) !important;
  border-radius: 30px;
  padding: 0.15em 0.65em 0.25em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-contact:hover {
  background: var(--dark-pink);
  color: var(--pink) !important;
}

.btn-contact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dark-pink);
}

/* ---------- Hero ----------
   Layered so it can compress vertically on wide screens: pink sky flexes,
   clouds hang from the top, grass keeps its natural aspect at the bottom.
   Height: design ratio (64.7vw) capped to the space left under the header,
   so the grass is always above the fold. On phones 64.7vw is far below the
   viewport cap, so mobile keeps the design ratio untouched. */

.hero {
  position: relative;
  height: min(calc(64.7vw + var(--header-h)), 100vh);
  height: min(calc(64.7vw + var(--header-h)), 100svh);
  min-height: 340px;
  background: #000;
}

/* pink sky starts below the header band and ends at the ground line;
   roots hang into the black */
.hero-pink {
  position: absolute;
  inset: var(--header-h) 0 8.69vw 0;
  background: var(--dark-pink);
}

.cloud {
  position: absolute;
  top: 0;
  height: auto;
}

/* nudged past the edges so no pink sliver shows beside them */
.cloud-left { left: -10px; width: calc(31.8vw + 10px); }
.cloud-right { right: -10px; width: calc(35.3vw + 10px); }

.hero-grass {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* spans the pink sky (header band bottom → ground line), so the logo is
   centered in that space and may overlap the empty middle of the grass.
   1fr side columns keep the logo at true horizontal center even though
   "Coming" and "Soon" have different widths. */
.hero-content {
  position: absolute;
  inset: 0 4%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 6.5vw, 100px);
}

.hero-side:first-child { justify-self: end; }
.hero-side:last-child { justify-self: start; }

.hero-side {
  font-family: var(--display);
  font-size: clamp(26px, 6.3vw, 90px);
  color: var(--pink);
}

.hero-lal {
  height: min(38vw, 92%, 640px);
  width: auto;
}

/* ---------- Newsletter ---------- */

.updates {
  position: relative;
  /* pull the dirt up so the hero's roots hang over it, as in the design */
  margin-top: clamp(-93px, -6.6vw, 0px);
}

.updates-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* The dirt art scales with the viewport width but the content inside it is
   clamped, so anchoring the stack to a fixed % from the top left it drifting
   further and further above a growing field of empty dirt on wide screens.
   Inset to the dirt's actual top/bottom edges within the SVG box (it carries
   ~13.5% of empty space up top for the hero's roots to hang into) and center
   the stack in that space, so the balance holds at any width. */
.updates-content {
  position: absolute;
  inset: 13.5% 0 6.2% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 28px);
  text-align: center;
}

.updates-title {
  margin: 0;
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(22px, 4vw, 54px);
  color: var(--pink);
}

.updates-form {
  position: relative;
  width: clamp(230px, 34vw, 460px);
}

.updates-form input {
  width: 100%;
  height: clamp(38px, 4.2vw, 56px);
  border: 0;
  border-radius: 8px;
  background: rgba(221, 17, 128, 0.75);
  color: var(--white);
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 21px);
  padding: 0 3em 0 0.9em;
}

.updates-form input::placeholder { color: var(--white); opacity: 0.6; }

.updates-form input:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.updates-form button {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  display: flex;
}

.updates-form button img { height: clamp(16px, 2vw, 26px); width: auto; }
.updates-form button:hover { filter: brightness(1.3); }
.updates-form button:disabled { opacity: 0.5; cursor: progress; }

/* ---------- Standalone pages (unsubscribe) ---------- */

/* No graveyard art here — these are utility pages, so they borrow the type and
   colour of the site and nothing else. */
.standalone {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 8vw, 96px) clamp(16px, 5vw, 48px);
}

.standalone-inner {
  width: 100%;
  max-width: 30em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}

.standalone-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1;
  color: var(--pink);
}

.standalone-lead {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--white);
}

.standalone-back a {
  font-family: var(--body);
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--pink);
}

/* Turnstile spinner. Collapsed to nothing until a challenge is actually
   running, then it opens to its own row and pushes the rest of the column
   apart instead of covering it. Height is collapsed rather than display:none
   so the widget stays rendered and measurable the whole time — Turnstile
   doesn't reliably start inside a hidden box. app.js toggles .is-active. */
#turnstile-box {
  display: flex;
  justify-content: center;
  height: 0;
  overflow: hidden;
  transition: height 0.18s ease;
}

#turnstile-box.is-active { height: 74px; }

/* The widget won't render narrower than 300px, which is wider than the form
   gets on small phones. Scale it down there so it can't force a sideways
   scroll on the page. */
@media (max-width: 360px) {
  #turnstile-box:not(:empty) {
    transform: scale(0.82);
    transform-origin: center top;
  }
}

/* Honeypot. Kept out of the layout and off the tab order without display:none,
   which some bots know to skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.updates-social {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
}

.updates-social a { display: flex; transition: filter 0.15s ease; }
.updates-social a:hover { filter: brightness(1.35); }
.updates-social img { height: clamp(20px, 2.4vw, 32px); width: auto; }

.updates-note {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--pink);
}

.updates-note.is-error { color: #ff8fbe; }

/* ---------- About ---------- */

.about {
  position: relative;
  padding: clamp(24px, 4vw, 60px) clamp(12px, 3vw, 48px);
  background: url("/assets/about-rocks.svg") center / 100% 100% no-repeat;
}

.about-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 90px);
  flex-wrap: wrap;
}

.about-logo {
  position: relative;
  width: clamp(200px, 34vw, 485px);
}

.about-logo img { display: block; width: 100%; height: auto; }

.about-logo-text {
  position: absolute;
  left: 27%;
  top: 66%;
  font-family: var(--khmer);
  line-height: 1;
  white-space: nowrap;
}

.about-line1 { display: block; font-size: clamp(20px, 3.8vw, 49px); }
.about-line2 { display: block; font-size: clamp(16px, 3.1vw, 40px); margin-left: 1.6em; }

.blurb {
  position: relative;
  width: clamp(260px, 39vw, 550px);
  container-type: inline-size;
}

.blurb-bg { display: block; width: 100%; height: auto; }

.bubble {
  position: absolute;
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 4.9cqw;
  line-height: 1.33;
  color: var(--white);
}

.bubble .indent { margin-left: 1.2em; }

.bubble-1 { left: 21.6%; top: 30.5%; }
.bubble-2 { left: 48.5%; top: 53%; }
.bubble-3 { left: 12.4%; top: 70%; }

/* ---------- Games ---------- */

.games {
  position: relative;
  margin-top: clamp(20px, 3vw, 44px);
  padding: clamp(40px, 5.5vw, 78px) 16px clamp(28px, 4vw, 56px);
  background: url("/assets/games-bg.svg") center / 100% 100% no-repeat;
}

.games-title {
  margin: 0 0 clamp(8px, 1.5vw, 22px);
  text-align: center;
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(24px, 3.1vw, 40px);
  text-transform: uppercase;
}

.carousel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
}

@media (min-width: 768px) { .carousel-stage { min-height: 14rem; } }
@media (min-width: 1024px) { .carousel-stage { min-height: 17rem; } }

.card {
  position: absolute;
  width: 11rem;
  aspect-ratio: 10 / 7;
  border-radius: 1rem;
  border: 2px solid var(--white);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.35);
  transition: transform 0.5s var(--spring);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .card { width: 18rem; border-radius: 1.5rem; border-width: 4px; }
}

@media (min-width: 1024px) {
  .card { width: 22rem; }
}

.card-mystery {
  background: var(--dark-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.card-mystery span {
  font-family: var(--display);
  font-size: clamp(4rem, 9vw, 8rem);
  color: var(--pink);
  text-shadow: 0 4px 0 rgb(0 0 0 / 0.35);
}

/* Same voice as the About chat bubbles: Raleway Medium 27px white.
   All blurbs are stacked in one grid cell so the container is always as
   tall as the tallest blurb — no layout shift when switching. */
.carousel-desc {
  display: grid;
  margin: 1.4rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(16px, 2.1vw, 27px);
  line-height: 1.33;
  color: var(--white);
  padding: 0 16px;
}

.carousel-desc p {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
}

.carousel-desc p.active { visibility: visible; }

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.carousel-btn {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgb(243 244 246);
  border: 1px solid rgb(229 231 235);
  color: rgb(55 65 81);
  cursor: pointer;
  transition: background 0.2s;
}

.carousel-btn:hover { background: rgb(229 231 235); }
.carousel-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.carousel-btn svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  margin-top: clamp(30px, 5vw, 80px);
  padding: 0 16px clamp(16px, 2vw, 28px);
  text-align: center;
  background: url("/assets/bedrock.svg") bottom center / 100% auto no-repeat;
}

.social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5.5vw, 80px);
}

.social-label {
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(26px, 3.9vw, 50px);
  color: var(--pink);
}

.social-row a { display: flex; transition: filter 0.15s ease; }
.social-row a:hover { filter: brightness(1.35); }
.social-row img { height: clamp(28px, 4vw, 53px); width: auto; }

.email-row {
  margin: clamp(14px, 2vw, 26px) 0 0;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 57px);
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(20px, 3.1vw, 40px);
  color: var(--pink);
}

.email-row a:hover { text-decoration: underline; }

.to-top {
  margin-top: clamp(60px, 10vw, 150px);
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: var(--pink);
  border: 4px solid var(--pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.to-top svg { width: 27px; height: 16px; }
.to-top:hover { background: var(--dark-pink); }
.to-top:focus-visible { outline: none; border-color: var(--dark-pink); }

.footer-legal {
  margin: clamp(20px, 4vw, 56px) 0 0;
  font-family: var(--cond);
  font-weight: 300;
  font-size: 14px;
  color: #6b6b6b;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; justify-content: center; padding-top: 8px; }
  .topnav { padding-bottom: 12px; }
}

@media (max-width: 320px) {
  .topnav { gap: 12px; font-size: 16px; }
}

/* ---------- 404 ---------- */

.error-page {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.error-code {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(90px, 20vw, 200px);
  color: var(--pink);
  line-height: 1;
}

.error-lead {
  margin: 12px 0 6px;
  font-family: var(--cond);
  font-weight: 300;
  font-size: clamp(22px, 4vw, 36px);
}

.error-copy {
  margin: 0 0 28px;
  font-family: var(--body);
  font-weight: 500;
  color: #bdbdbd;
}

.error-page .btn-contact { font-family: var(--cond); font-size: 22px; padding: 0.3em 1em 0.4em; }