/*
  Viridino Studios
  Layout switches at 900px (mobile below, desktop from 900px up).
  Sizes marked "fluid" grow smoothly from the mobile design (390px wide)
  to the desktop design (900px wide), so nothing jumps at the switch:
    clamp(MOBILE, calc(MOBILE + (DESKTOP - MOBILE) * (100vw - 390px) / 510), DESKTOP)
*/

:root {
  --ink: #111311;
  --ink-deep: #0d0f0e;
  --panel: #1e211e;
  --line: #2e312d;
  --ash: #a3a69c;
  --mist: #b3b6ac;
  --paper: #f1f0ea;
  --green: #3dbe83;
  --mint: #7fe7b5;
  --mint-text: #c8f0dc;

  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Side padding. On screens wider than the 1440px design, the padding grows
     instead of the content, so content stops at 1328px wide and stays centred.
     Backgrounds still run edge to edge. 100% is the width of the full-width
     parent (body, or the viewport for the fixed menu). */
  --content-max: 1328px;
  --pad-x: max(clamp(20px, 4vw, 56px), calc((100% - var(--content-max)) / 2));
  /* fluid: 64px -> 96px */
  --section-space: clamp(64px, calc(64px + 32 * (100vw - 390px) / 510), 96px);
  --edge-bar: 3px;
  --number-glow: 0 0 12px rgba(61, 190, 131, 0.8);
  --divider: linear-gradient(90deg, rgba(61, 190, 131, 0), rgba(61, 190, 131, 0.7) 50%, rgba(61, 190, 131, 0)) 1;
}

@media (min-width: 900px) {
  :root {
    --edge-bar: 4px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink-deep);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: linear-gradient(180deg, #0f2219 0%, #111311 12%, #111311 38%, #12261c 60%, #0d0f0e 80%, #0d0f0e 100%);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body {
    background: linear-gradient(180deg, #0f2219 0%, #111311 14%, #111311 40%, #12261c 62%, #0d0f0e 80%, #0d0f0e 100%);
  }
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--paper);
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

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

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.arrow {
  flex: none;
}

/* Shared text styles */

.label {
  font-family: var(--mono);
  /* fluid: 12px -> 13px */
  font-size: clamp(12px, calc(12px + 1 * (100vw - 390px) / 510), 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ash);
}

.num {
  color: var(--green);
  text-shadow: var(--number-glow);
}

.heading {
  font-weight: 800;
  /* fluid: 40px -> 43.2px, then the desktop clamp takes over */
  font-size: clamp(40px, calc(40px + 3.2 * (100vw - 390px) / 510), 43.2px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.green {
  color: var(--green);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, calc(8px + 2 * (100vw - 390px) / 510), 10px);
  font-family: var(--mono);
  /* fluid: 11px -> 12px */
  font-size: clamp(11px, calc(11px + 1 * (100vw - 390px) / 510), 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ash);
}

.status::before {
  content: "";
  flex: none;
  width: clamp(6px, calc(6px + 1 * (100vw - 390px) / 510), 7px);
  height: clamp(6px, calc(6px + 1 * (100vw - 390px) / 510), 7px);
  background: var(--green);
}

@media (min-width: 900px) {
  .heading {
    font-size: clamp(40px, 4.8vw, 69.12px);
  }
}

/* Image frame: 16:9 box with the green edge bar on the left */

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--edge-bar);
  background: var(--green);
}

.zoom img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .zoom:hover img {
    transform: scale(1.03);
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn-main {
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  background: linear-gradient(135deg, var(--mint), var(--green) 55%, #2a9566);
  color: #0f2219;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 12px 34px -10px rgba(61, 190, 131, 0.7);
}

.btn-main:hover {
  background: var(--paper);
}

.btn-store {
  border: 1px solid rgba(61, 190, 131, 0.4);
  background: linear-gradient(180deg, rgba(61, 190, 131, 0.22), rgba(61, 190, 131, 0.06));
  color: var(--mint-text);
}

.btn-store:hover {
  background: var(--green);
  color: var(--ink);
}

.btn-social {
  padding: 0 clamp(14px, calc(14px + 2 * (100vw - 390px) / 510), 16px);
  border: 1px solid rgba(241, 240, 234, 0.6);
  color: var(--paper);
}

.btn-social:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink-deep);
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad-x);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  object-position: 68% 72%;
}

.nav {
  display: none;
}

.menu-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(241, 240, 234, 0.25);
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--paper);
}

@media (min-width: 900px) {
  .topbar {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .brand {
    gap: 12px;
    font-size: 16px;
  }

  .brand img {
    width: 36px;
    height: 36px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .nav a {
    padding: 12px 0;
    transition: color 0.15s;
  }

  .nav a:hover {
    color: var(--green);
  }

  .menu-button {
    display: none;
  }
}

/* ---------- Mobile menu ---------- */

.menu {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 12px var(--pad-x) 28px;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line);
}

.menu[hidden] {
  display: none;
}

.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
}

.menu-close {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(241, 240, 234, 0.25);
  color: var(--paper);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  border-top: 1px solid var(--line);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.menu-links li:last-child a {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .menu {
    display: none;
  }
}

/* ---------- Intro ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Fills the window exactly. svh is the window height with a phone's browser
     bars showing, so the intro doesn't jump when they hide while scrolling.
     If the window is too short for the text, the intro grows to fit it. */
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, calc(120px + 40 * (100vw - 390px) / 510), 160px) var(--pad-x) clamp(44px, calc(44px + 20 * (100vw - 390px) / 510), 64px);
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  filter: url(#gm-hero);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* The glow is 90% of the width at 390px and 55% at 900px; this px
     form keeps it continuous across the switch. */
  background:
    radial-gradient(clamp(351px, calc(351px + 144 * (100vw - 390px) / 510), 495px) 40% at 50% 100%, rgba(61, 190, 131, 0.5), rgba(61, 190, 131, 0) 75%),
    linear-gradient(to top, #10201a 3%, rgba(16, 32, 26, 0.2) 55%, rgba(16, 32, 26, 0.6) 100%);
}

.glow-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(61, 190, 131, 0), var(--mint) 50%, rgba(61, 190, 131, 0));
  box-shadow: 0 0 clamp(20px, calc(20px + 4 * (100vw - 390px) / 510), 24px) 2px rgba(61, 190, 131, 0.7);
}

.hero .glow-line {
  bottom: 0;
}

.hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, calc(18px + 10 * (100vw - 390px) / 510), 28px);
}

.hero h1 {
  font-weight: 800;
  /* fluid: 76px -> 108px, then the desktop clamp takes over */
  font-size: clamp(76px, calc(76px + 32 * (100vw - 390px) / 510), 108px);
  line-height: 0.86;
  letter-spacing: -0.055em;
}

.hero h1 .dot {
  color: var(--green);
  text-shadow: 0 0 clamp(24px, calc(24px + 4 * (100vw - 390px) / 510), 28px) rgba(61, 190, 131, 0.9);
}

.tagline {
  font-size: clamp(19px, calc(19px + 1 * (100vw - 390px) / 510), 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tagline .green {
  font-weight: 600;
}

@media (min-width: 900px) {
  .hero-img {
    object-position: center 55%;
  }

  .hero-overlay {
    background:
      radial-gradient(55% 40% at 50% 100%, rgba(61, 190, 131, 0.5), rgba(61, 190, 131, 0) 75%),
      linear-gradient(to top, #10201a 2%, rgba(16, 32, 26, 0.15) 55%, rgba(16, 32, 26, 0.6) 100%);
  }

  .hero h1 {
    font-size: clamp(64px, 12vw, 172.8px);
  }

  .tagline {
    font-size: clamp(20px, 2vw, 28.8px);
    line-height: 1.25;
    letter-spacing: -0.015em;
  }

  .tagline br {
    display: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section-space) var(--pad-x) 0;
}

.section + .section.divided {
  margin-top: var(--section-space);
  border-top: 1px solid;
  border-image: var(--divider);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(14px + 6 * (100vw - 390px) / 510), 20px);
}

.section-body {
  margin-top: clamp(28px, calc(28px + 20 * (100vw - 390px) / 510), 48px);
}

/* ---------- 01 Latest game ---------- */

.latest {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(20px + 12 * (100vw - 390px) / 510), 32px);
}

.latest-frame {
  box-shadow: 0 36px 80px -36px rgba(61, 190, 131, 0.6);
}

.latest-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  /* fluid row gap: 12px -> 32px (only used while the two blocks are stacked) */
  gap: clamp(12px, calc(12px + 20 * (100vw - 390px) / 510), 32px) 64px;
  /* fluid: 4px -> 0 */
  margin-top: clamp(0px, calc(4px - 4 * (100vw - 390px) / 510), 4px);
}

.latest-title-block {
  flex: 1 1 520px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(12px + 2 * (100vw - 390px) / 510), 14px);
}

.latest-title-block .status {
  font-size: clamp(12px, calc(12px + 1 * (100vw - 390px) / 510), 13px);
  color: var(--mist);
}

.latest h2 {
  font-weight: 800;
  /* fluid: 44px -> 63px, then the desktop clamp takes over */
  font-size: clamp(44px, calc(44px + 19 * (100vw - 390px) / 510), 63px);
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.latest-copy {
  /* Capped at 440px at every width so lines stay readable on tablets. */
  flex: 0 1 440px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(12px + 2 * (100vw - 390px) / 510), 14px);
}

.hook {
  /* fluid: 6px -> 0 */
  margin-top: clamp(0px, calc(6px - 6 * (100vw - 390px) / 510), 6px);
  font-size: clamp(19px, calc(19px + 3 * (100vw - 390px) / 510), 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.body-text {
  font-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 510), 17px);
  line-height: 1.6;
  color: var(--mist);
}

.latest .btn-main {
  display: flex;
  margin-top: 8px;
}

@media (min-width: 900px) {
  .latest-frame {
    box-shadow: 0 60px 140px -60px rgba(61, 190, 131, 0.55);
  }

  .latest h2 {
    font-size: clamp(52px, 7vw, 100.8px);
    line-height: 0.9;
  }

  .latest .btn-main {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
  }
}

/* ---------- 02 Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(12px, calc(12px + 12 * (100vw - 390px) / 510), 24px);
}

.member {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, calc(16px + 8 * (100vw - 390px) / 510), 24px);
  padding: clamp(12px, calc(12px + 4 * (100vw - 390px) / 510), 16px);
  background: linear-gradient(150deg, #22432f 0%, #182a20 45%, #141815 100%);
}

.member .frame {
  flex: none;
  /* fluid: 104px -> 200px */
  width: clamp(104px, calc(104px + 96 * (100vw - 390px) / 510), 200px);
  aspect-ratio: 1 / 1;
}

.member .frame img {
  object-position: 50% 30%;
}

.member-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: clamp(4px, calc(4px + 4 * (100vw - 390px) / 510), 8px) clamp(0px, calc(8 * (100vw - 390px) / 510), 8px) clamp(4px, calc(4px + 4 * (100vw - 390px) / 510), 8px) 0;
}

.member h3 {
  font-weight: 800;
  /* fluid: 24px -> 32px */
  font-size: clamp(24px, calc(24px + 8 * (100vw - 390px) / 510), 32px);
  line-height: 1;
  letter-spacing: -0.035em;
}

@media (min-width: 900px) {
  .member h3 {
    letter-spacing: -0.04em;
  }
}

/* ---------- 03 More games ---------- */

.games-grid {
  --games-gap: clamp(16px, calc(16px + 16 * (100vw - 390px) / 510), 32px);
  display: grid;
  /* One column on phones, two as soon as each card can be at least 300px
     wide (from about 680px), never more than two. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - var(--games-gap)) / 2))), 1fr));
  gap: var(--games-gap);
}

.game {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(10px + 4 * (100vw - 390px) / 510), 14px);
  padding: clamp(12px, calc(12px + 4 * (100vw - 390px) / 510), 16px) clamp(12px, calc(12px + 4 * (100vw - 390px) / 510), 16px) clamp(20px, calc(20px + 4 * (100vw - 390px) / 510), 24px);
  background: linear-gradient(180deg, #17261e 0%, rgba(20, 24, 21, 0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(61, 190, 131, 0.18);
}

.game .frame {
  margin-bottom: 6px;
}

.game h3 {
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 34.56px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.game p {
  max-width: 560px;
  font-size: clamp(15px, calc(15px + 1 * (100vw - 390px) / 510), 16px);
  line-height: 1.55;
  color: var(--mist);
}

@media (min-width: 900px) {
  .game p {
    line-height: 1.6;
  }
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game .links {
  /* Keeps the buttons at the bottom so neighbouring cards line up. */
  margin-top: auto;
  padding-top: 6px;
}

/* ---------- 04 FAQ ---------- */

.faq {
  display: flex;
  flex-wrap: wrap;
  /* fluid row gap: 24px -> 40px */
  gap: clamp(24px, calc(24px + 16 * (100vw - 390px) / 510), 40px) 64px;
}

.faq-intro {
  flex: 1 1 320px;
}

.faq-intro p:last-child {
  max-width: 320px;
  font-size: clamp(15px, calc(15px + 1 * (100vw - 390px) / 510), 16px);
  line-height: 1.6;
  color: var(--ash);
}

.faq-list {
  flex: 999 1 640px;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, calc(16px + 8 * (100vw - 390px) / 510), 24px);
  /* fluid: 80px -> 88px (44px touch target plus the padding, as in the designs) */
  min-height: clamp(80px, calc(80px + 8 * (100vw - 390px) / 510), 88px);
  padding: clamp(18px, calc(18px + 4 * (100vw - 390px) / 510), 22px) 0;
  font-size: clamp(17px, calc(17px + 3 * (100vw - 390px) / 510), 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-plus {
  flex: none;
  width: clamp(16px, calc(16px + 2 * (100vw - 390px) / 510), 18px);
  height: clamp(16px, calc(16px + 2 * (100vw - 390px) / 510), 18px);
  transition: transform 0.2s;
}

details[open] .faq-plus {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 680px;
  padding: 0 clamp(28px, calc(28px + 20 * (100vw - 390px) / 510), 48px) clamp(20px, calc(20px + 4 * (100vw - 390px) / 510), 24px) 0;
  font-size: clamp(15px, calc(15px + 1 * (100vw - 390px) / 510), 16px);
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- 05 Contact ---------- */

.footer {
  position: relative;
  overflow: hidden;
  /* fluid: 80px -> 112px */
  margin-top: clamp(80px, calc(80px + 32 * (100vw - 390px) / 510), 112px);
  padding: clamp(48px, calc(48px + 24 * (100vw - 390px) / 510), 72px) var(--pad-x) clamp(24px, calc(24px + 8 * (100vw - 390px) / 510), 32px);
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(61, 190, 131, 0.32), rgba(61, 190, 131, 0) 65%),
    var(--ink-deep);
}

.footer .glow-line {
  top: 0;
}

.footer-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(36px, calc(36px + 4 * (100vw - 390px) / 510), 40px);
}

.contact {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, calc(14px + 2 * (100vw - 390px) / 510), 16px);
  min-width: 0;
  max-width: 100%;
}

.mail {
  font-weight: 800;
  /* fluid: 23px -> 39.6px, then the desktop clamp takes over */
  font-size: clamp(23px, calc(23px + 16.6 * (100vw - 390px) / 510), 39.6px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.mail:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(36px, calc(36px + 28 * (100vw - 390px) / 510), 64px);
  padding-top: clamp(16px, calc(16px + 4 * (100vw - 390px) / 510), 20px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(11px, calc(11px + 1 * (100vw - 390px) / 510), 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ash);
}

.footer-bottom a {
  padding: 4px 0;
  color: var(--ash);
}

.footer-bottom a:hover {
  color: var(--paper);
}

@media (min-width: 900px) {
  .footer {
    background:
      radial-gradient(70% 120% at 50% 0%, rgba(61, 190, 131, 0.32), rgba(61, 190, 131, 0) 65%),
      var(--ink-deep);
  }

  .mail {
    font-size: clamp(30px, 4.4vw, 63.36px);
    line-height: 1;
    letter-spacing: -0.04em;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .zoom:hover img {
    transform: none;
  }
}