/* Kanaventure website (spec §2.9): the studio's theme. No scripts, no third-party requests.

   The studio pages use a neutral charcoal with the colours of the rope logo as accents and the
   device's own UI font. Each game brings its own theme for its own content (its card, its pages,
   its questions on the support page): assets/games/<game>.css sets the variables below inside
   .theme-<game>, so the shared components take on the game's colours and fonts there. */

:root {
  /* Studio palette */
  --bg: #0F1013;            /* the logo's backdrop */
  --bg-raised: #15171C;
  --surface: #1A1D23;
  --surface-2: #232730;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #F4F5F7;
  --muted: #A6ACB8;
  --heading: var(--text);
  --rope-pink: #FF2E93;     /* the rope's strands */
  --rope-orange: #FF6A1F;
  --rope-lime: #86F03C;
  --rope-blue: #2E9BFF;
  --rope: linear-gradient(90deg, var(--rope-pink), var(--rope-orange) 34%, var(--rope-lime) 66%, var(--rope-blue));
  --accent: #6CBBFF;        /* links */
  --accent-hover: #A5D5FF;
  --marker: var(--rope-blue);
  --focus: var(--rope-lime);

  /* Components (a game theme overrides these) */
  --btn-bg: #F4F5F7;
  --btn-text: #0F1013;
  --btn-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  --btn-hover: brightness(0.92);
  --ghost-line: var(--line-strong);
  --ghost-text: var(--text);
  --ghost-hover: rgba(255, 255, 255, 0.06);
  --badge-bg: rgba(46, 155, 255, 0.14);
  --badge-text: #9CCBFF;
  --title: var(--heading);
  --tagline: var(--muted);

  /* Type: the device's own UI font everywhere on the studio pages */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: var(--font-body);
  --display-weight: 800;
  --display-tracking: -0.025em;

  --radius: 18px;
  --wrap: 1120px;
  --gutter: max(16px, min(4vw, 32px));
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The studio's backdrop: soft glows in the rope's colours over a faint dot grid. */
  background:
    radial-gradient(900px 460px at 88% -140px, rgba(46, 155, 255, 0.18), transparent 70%),
    radial-gradient(760px 420px at 4% -100px, rgba(255, 46, 147, 0.14), transparent 70%),
    radial-gradient(700px 360px at 50% 105%, rgba(134, 240, 60, 0.06), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.3px) 0 0 / 24px 24px,
    var(--bg);
  color: var(--text);
  font: 17px/1.65 var(--font-body);
  overflow-wrap: break-word;
}

/* The rope's colours as a thin line across the top of every page. */
body::before { content: ""; display: block; height: 4px; background: var(--rope); }

main { flex: 1; }

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

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--text); color: var(--bg); padding: 0.5em 1em; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* Header and footer (always the studio's) */

.site-header { padding: 16px 0; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 1.35rem/1 var(--font-body); letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.brand img { height: 38px; width: auto; aspect-ratio: 5 / 3; object-fit: contain; }
.brand:hover { color: var(--text); }

.site-nav { display: flex; gap: 6px 26px; flex-wrap: wrap; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.98rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--rope-blue); }

.site-footer { margin-top: 80px; padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; }
.site-footer p { margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.site-footer p img { height: 22px; width: auto; aspect-ratio: 5 / 3; object-fit: contain; }
.site-footer nav { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

/* Type */

h1, h2, .display {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  line-height: 1.1; color: var(--heading);
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); margin: 0 0 0.35em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 0.6em; }
h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.08rem, 2.3vw, 1.25rem); color: var(--muted); max-width: 40em; }
.rope-text { background: var(--rope); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-block; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 1em; background: var(--rope); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sections */

.section { padding: 64px 0 8px; }
.hero { padding: 56px 0 24px; }

.studio-hero { padding: 88px 0 40px; }
.studio-hero h1 { font-size: clamp(2.6rem, 7.5vw, 4.8rem); max-width: 12em; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: start; }
.about p { color: var(--muted); }
.values { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.values li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
  display: flex; gap: 14px; align-items: center; font-weight: 600;
}
.values li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--rope-blue)); }
.values li:nth-child(1) { --dot: var(--rope-pink); }
.values li:nth-child(2) { --dot: var(--rope-orange); }
.values li:nth-child(3) { --dot: var(--rope-lime); }

/* Buttons */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.5em; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--btn-shadow); }
.btn-primary:hover { color: var(--btn-text); filter: var(--btn-hover); }
.btn-ghost { border: 2px solid var(--ghost-line); color: var(--ghost-text); }
.btn-ghost:hover { color: var(--ghost-text); background: var(--ghost-hover); }
.btn-soon { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.btn-soon small { font-weight: 600; color: var(--accent); }

/* Game cards (home): the card's colours and fonts come from the game's theme. */

.games { display: grid; gap: 20px; }
.game-card {
  display: grid; grid-template-columns: 1.15fr 1fr;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.game-card .art img { width: 100%; height: 100%; object-fit: cover; }
.game-card .body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.game-card .title { display: flex; align-items: center; gap: 16px; margin-bottom: 0.6em; }
.game-card .title img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.game-card h3 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: 2.3rem; line-height: 1; margin: 0; color: var(--title);
}
.tagline { font-family: var(--font-display); color: var(--tagline); font-size: 1.3rem; line-height: 1.2; margin: 0.15em 0 0; }
.badge {
  display: inline-block; align-self: flex-start; margin-bottom: 1em; padding: 0.25em 0.8em; border-radius: 999px;
  background: var(--badge-bg); color: var(--badge-text); font-size: 0.85rem; font-weight: 700;
}

.next-game {
  padding: 22px 26px; border: 2px dashed var(--line-strong); border-radius: 22px;
  color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.next-game strong { color: var(--text); font-size: 1.15rem; }

/* A game's own page, between the studio's header and footer */

.game-zone { background: var(--bg); color: var(--text); padding-bottom: 72px; }
.game-zone + .site-footer { margin-top: 0; }

/* Game page */

.game-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.game-hero .icon { width: 148px; height: 148px; border-radius: 34px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); }
.game-hero h1 { color: var(--title); margin: 0; }
.game-hero .tagline { font-size: 1.6rem; }
.game-hero + .lead { margin-top: 1.4em; }

.screens {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px 0 0; padding: 0; list-style: none;
}
.screens figure { margin: 0; }
.screens img { width: 100%; border-radius: 26px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
.screens figcaption { text-align: center; color: var(--muted); font-size: 0.95rem; margin-top: 12px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.features li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.features h3 { color: var(--heading); }
.features p { margin: 0; color: var(--muted); }

.link-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; }

/* Legal and support pages */

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); }
.prose h2 { font-size: clamp(1.45rem, 3.6vw, 1.85rem); margin-top: 1.8em; scroll-margin-top: 16px; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--marker); }
.prose strong { color: var(--text); }
.updated { color: var(--muted); font-size: 0.95rem; }

.callout {
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--marker);
  border-radius: 16px; padding: 18px 22px; margin: 1.4em 0;
}
.callout ul { margin: 0; }

.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 22px; margin: 1.4em 0; }
.toc p { margin: 0 0 0.4em; font-weight: 700; }
.toc ol { margin: 0; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; margin: 0.2em 0; }

.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; margin: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style-position: outside; }
.faq summary::marker { color: var(--marker); }
.faq details > *:last-child { margin-bottom: 16px; }

.contact-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px; margin: 1.4em 0;
}
.contact-card p { margin: 0; }
.contact-card .email { font-size: 1.15rem; font-weight: 700; }

/* Narrow screens */

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .studio-hero { padding: 56px 0 24px; }
  .about { grid-template-columns: 1fr; }
  .game-card { grid-template-columns: 1fr; }
  .game-card .art img { aspect-ratio: 16 / 10; }
  .game-hero { grid-template-columns: 1fr; gap: 18px; }
  .game-hero .icon { width: 112px; height: 112px; border-radius: 26px; }
  .screens {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
  }
  .screens li { scroll-snap-align: start; }
  .toc ol { columns: 1; }
  .btn { width: 100%; }
  .actions { flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a { transition: filter 0.15s, background-color 0.15s, color 0.15s; }
}