/* Fish! landing page — built on the Vega / Sheliak token layer (VRChat brand system) */

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

:root {
  /* Surfaces */
  --bg:          #07090C;
  --surface-1:   #0D1117;
  --surface-2:   #151B23;
  --surface-3:   #1C242E;

  /* Text */
  --text-1:      #EEF3F6;
  --text-2:      #A8B8C4;
  --text-3:      #526070;

  /* Brand — teal */
  --teal:        #00C48A;
  --teal-hi:     #00E5A0;
  --teal-lo:     #009E70;
  --teal-text:   #00E5A0;

  /* Brand — purple */
  --purple:      #9933FF;

  /* Brand — pink */
  --pink:        #FF1A75;

  /* Semantic */
  --error:      #F04455;
  --error-text: #FF8594;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-mid:    rgba(255,255,255,0.13);
  --border-strong: rgba(255,255,255,0.22);
  --border-teal:   rgba(0,196,138,0.35);
  --border-error:  rgba(240,68,85,0.35);

  /* Shadows / glows */
  --shadow-md: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 60px rgba(0,0,0,0.6);
  --glow-teal: 0 0 0 1px rgba(0,196,138,0.35), 0 0 20px rgba(0,196,138,0.3);

  /* Gradients */
  --grad-spectrum: linear-gradient(135deg, #7A19DD 0%, #CC0058 40%, #FF7A00 70%, #F0D800 85%, #00C48A 100%);
  --grad-brand:    linear-gradient(135deg, #00C48A 0%, #9933FF 100%);
  --grad-cosmos:   radial-gradient(ellipse at 20% 0%, rgba(153,51,255,0.28) 0%, #0D1117 50%, #07090C 100%);

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 9999px;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms;

  /* Fonts */
  --font-display: 'Exo 2', system-ui, sans-serif;
  --font-ui:      'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}

@media (min-width: 860px) {
  .container { max-width: 680px; }
}

/* ── Focus / motion ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal-hi);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  background: rgba(7,9,12,0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand-mark { display: flex; align-items: center; gap: var(--s-2); }
.brand-mark img { width: 22px; height: 22px; }
.brand-mark .brand-name {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 17px; color: var(--text-1); letter-spacing: 0;
}

.header-play {
  padding: 9px 18px; font-size: 13px;
}

/* ── Hero ── */
.hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  background: #0D1117 url('assets/hero-bg.webp') center 30%/cover no-repeat;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,9,12,0.55) 0%, rgba(7,9,12,0.72) 55%, var(--bg) 100%),
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,0.5) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,0.35) 0, transparent 60%),
    radial-gradient(2px 2px at 62% 38%, rgba(255,255,255,0.3) 0, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-text);
  margin-bottom: var(--s-4);
}

.hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(64px, 18vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 0%, var(--text-1) 55%, var(--teal-hi) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--s-4);
}

.hero-sub {
  font-size: 16px; line-height: 1.65; color: var(--text-2);
  max-width: 420px; margin-bottom: var(--s-6);
}

.hero-sub strong { color: var(--text-1); font-weight: 600; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 16px 28px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; user-select: none; line-height: 1.2;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast) var(--ease-spring);
}

.btn--accent {
  background: var(--teal); color: #07090C; border-color: var(--teal);
  box-shadow: var(--glow-teal);
}
.btn--accent:hover { background: var(--teal-hi); border-color: var(--teal-hi); transform: translateY(-1px); }
.btn--accent:active { background: var(--teal-lo); transform: scale(0.97); }

.btn--outline {
  background: transparent; color: var(--text-1); border-color: var(--border-strong);
}
.btn--outline:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.btn--outline:active { transform: scale(0.97); }

.btn--block { width: 100%; }

.btn--lg { padding: 18px 32px; font-size: 17px; }

.cta-micro {
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  letter-spacing: 0.02em;
}

.store-row {
  display: flex; flex-direction: column; gap: var(--s-3);
  width: 100%; max-width: 340px;
  margin-top: var(--s-5);
}

@media (min-width: 480px) {
  .store-row { flex-direction: row; }
}

.store-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 12px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border-mid); background: rgba(255,255,255,0.04);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.store-btn:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.08); color: var(--text-1); }

/* ── Section shell ── */
.section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.section-eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s-3);
}
.section-title {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(28px, 6vw, 36px);
  line-height: 1.1; margin-bottom: var(--s-3); color: var(--text-1);
}
.section-lead {
  font-size: 15px; color: var(--text-2); max-width: 480px; margin-bottom: var(--s-6);
}

/* ── Feature grid ── */
.feature-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

.feature-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.feature-card:hover { border-color: var(--border-teal); transform: translateY(-2px); }

.feature-icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(0,196,138,0.1); border: 1px solid var(--border-teal);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-text); margin-bottom: var(--s-4);
}
.feature-icon svg { width: 20px; height: 20px; }

.feature-card h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: 17px;
  color: var(--text-1); margin-bottom: var(--s-2);
}
.feature-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ── Steps ── */
.steps {
  display: flex; flex-direction: column; gap: var(--s-6);
  position: relative;
}
.step { display: flex; gap: var(--s-4); align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--teal-text);
}
.step h3 { font-family: var(--font-ui); font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--text-1); }
.step p { font-size: 14px; color: var(--text-2); }

/* ── Community ── */
.community-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
}
@media (min-width: 640px) {
  .community-grid { grid-template-columns: 1fr 1fr; }
}
.community-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.community-card:hover { border-color: var(--border-mid); background: var(--surface-2); }
.community-card .cc-label { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--text-1); margin-bottom: 2px; }
.community-card .cc-sub { font-size: 13px; color: var(--text-3); }
.community-card .cc-arrow { color: var(--text-3); flex-shrink: 0; }

.disclaimer {
  margin-top: var(--s-5); font-size: 13px; color: var(--text-3); line-height: 1.6;
}

/* ── Final CTA band ── */
.cta-band {
  position: relative;
  padding: var(--s-8) 0;
  background: var(--grad-brand);
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,12,0.15) 0%, rgba(7,9,12,0.55) 100%);
}
.cta-band-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(30px, 6vw, 44px); color: #fff; margin-bottom: var(--s-3); line-height: 1.05;
}
.cta-band p { color: rgba(255,255,255,0.85); margin-bottom: var(--s-6); max-width: 380px; font-size: 15px; }
.cta-band .btn--accent { background: #07090C; color: #fff; border-color: #07090C; box-shadow: var(--shadow-lg); }
.cta-band .btn--accent:hover { background: #000; }

.qr-block {
  display: none;
  margin-top: var(--s-7);
  flex-direction: column; align-items: center; gap: var(--s-3);
}
@media (min-width: 720px) {
  .qr-block { display: flex; }
}
.qr-card {
  background: #fff; border-radius: var(--r-md); padding: var(--s-3);
  width: 132px; height: 132px;
  box-shadow: var(--shadow-lg);
}
.qr-card img { width: 100%; height: 100%; }
.qr-block span {
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}

/* ── Key art / media card ── */
.media-card {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); margin-bottom: var(--s-3);
}
.media-card img, .media-card video { width: 100%; height: auto; display: block; }
.media-caption {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  margin-bottom: var(--s-6);
}

/* ── Screenshot gallery ── */
.gallery {
  display: flex; gap: var(--s-3); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-2); margin: 0 calc(var(--s-5) * -1); padding-left: var(--s-5); padding-right: var(--s-5);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery figure {
  flex: 0 0 auto; width: 78%; max-width: 320px; scroll-snap-align: start;
}
@media (min-width: 640px) {
  .gallery figure { width: 42%; max-width: 300px; }
}
.gallery img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border);
  margin-bottom: var(--s-2);
}
.gallery figcaption {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
}

/* ── Signup form ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

.signup-form {
  display: flex; flex-direction: column; gap: var(--s-3);
  max-width: 420px;
}
@media (min-width: 480px) {
  .signup-form { flex-direction: row; }
}

.signup-input {
  flex: 1; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-mid);
  color: var(--text-1); font-family: var(--font-ui); font-size: 15px;
}
.signup-input::placeholder { color: var(--text-3); }
.signup-input:focus { outline: none; border-color: var(--border-teal); box-shadow: var(--glow-teal); }
.signup-input:invalid:not(:placeholder-shown) { border-color: var(--border-error); }

.signup-note {
  margin-top: var(--s-3); font-size: 13px; min-height: 1.4em;
  color: var(--text-3);
}
.signup-note[data-state="ok"] { color: var(--teal-text); }
.signup-note[data-state="error"] { color: var(--error-text); }

/* ── Post-click prompt (non-blocking) ── */
.post-cta-sheet {
  position: fixed; left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  max-width: 400px; margin: 0 auto;
  background: var(--surface-2); border: 1px solid var(--border-mid);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  transform: translateY(calc(100% + 32px));
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 500;
}
.post-cta-sheet.is-visible { transform: translateY(0); }

.post-cta-dismiss {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: transparent; border: none; color: var(--text-3);
  font-size: 14px; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.post-cta-dismiss:hover { background: rgba(255,255,255,0.08); color: var(--text-1); }

.post-cta-heading {
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  color: var(--text-1); margin-bottom: 4px; padding-right: var(--s-6);
}
.post-cta-sub { font-size: 13px; color: var(--text-2); margin-bottom: var(--s-4); }

.post-cta-sheet .signup-form { flex-direction: row; max-width: none; margin-bottom: var(--s-2); }
.post-cta-sheet .signup-input { font-size: 14px; padding: 12px 14px; }
.post-cta-sheet .btn { padding: 12px 18px; font-size: 14px; }

.post-cta-nothanks {
  display: block; margin: 0 auto; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.post-cta-nothanks:hover { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .post-cta-sheet { transition: none; }
}

/* ── Footer ── */
.site-footer {
  padding-top: var(--s-7); padding-bottom: var(--s-8);
  border-top: 1px solid var(--border);
}
.footer-mark { margin-bottom: var(--s-5); }
.footer-mark img { height: 22px; width: auto; }
.footer-desc { font-size: 13px; color: var(--text-3); line-height: 1.7; max-width: 440px; margin-bottom: var(--s-5); }
.footer-links { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.footer-links a { font-size: 13px; font-weight: 600; color: var(--text-2); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--teal-text); }
.footer-legal { font-size: 12px; color: var(--text-3); line-height: 1.7; }


/* ══ LINE capture (JP variant) ═══════════════════════════════════════════
   Replaces the email winback block. Play stays the primary CTA everywhere;
   LINE exists to catch the visitor who can't act right now — overwhelmingly
   a JP mobile user who tapped an X ad without VRChat installed. */
.btn--line { background:#06C755; border-color:#06C755; color:#fff; }
.btn--line:hover { background:#05B34C; border-color:#05B34C; transform:translateY(-1px); }
.btn--line:active { background:#049E43; transform:scale(0.97); }
.btn--line svg { flex-shrink:0; }

.line-block { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4); }
.line-steps { display:flex; flex-wrap:wrap; gap:var(--s-2); padding:0; margin:0; list-style:none; }
.line-step {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--text-2);
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);
  border-radius:999px; padding:7px 14px;
}
.line-step b { color:var(--text-1); }
.line-step-n {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; background:#06C755; color:#fff;
  font-size:10px; font-weight:700; flex-shrink:0;
}
.line-note { font-size:11.5px; line-height:1.7; color:var(--text-3); max-width:52ch; }
.line-note a { color:var(--text-2); }

/* Desktop QR — a LINE friend-add link opened in a PC browser renders only a QR,
   so without this the desktop path dead-ends. */
.line-qr { display:none; align-items:center; gap:var(--s-4); }
@media (min-width:900px) { .line-qr { display:flex; } }
.line-qr-card { width:104px; height:104px; padding:8px; background:#fff; border-radius:10px; flex-shrink:0; }
.line-qr-card svg { display:block; width:100%; height:100%; }
.line-qr span { font-size:12.5px; color:var(--text-3); }

/* Sticky mobile bar — Play primary, LINE as the compact escape hatch. */
.sticky-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:var(--s-2); align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg,rgba(7,9,12,0) 0%,rgba(7,9,12,0.93) 34%,rgba(7,9,12,0.98) 100%);
  transform:translateY(115%); transition:transform .32s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.sticky-bar.is-visible { transform:none; pointer-events:auto; }
.sticky-bar .btn { flex:1; justify-content:center; }
.sticky-bar .btn--line { flex:0 0 auto; padding-left:16px; padding-right:16px; }
@media (min-width:760px) { .sticky-bar { display:none; } }
body.has-sticky { padding-bottom:76px; }
@media (min-width:760px) { body.has-sticky { padding-bottom:0; } }
@media (prefers-reduced-motion: reduce) { .sticky-bar { transition:none; } }


/* ══ JP localisation ═════════════════════════════════════════════════════
   Noto Sans JP ahead of the latin stack for kana/kanji; auto-phrase wraps
   Japanese on phrase boundaries instead of mid-word, which matters most on
   the narrow mobile widths this test's traffic actually arrives on. */
:root { --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
body, .btn, input, button, select, textarea {
  font-family: "Space Grotesk", var(--font-jp), sans-serif;
}
body {
  word-break: auto-phrase;
  line-break: strict;
  text-spacing-trim: trim-start;
}
.hero-title, .section-title, .cta-band h2 { font-family: "Exo 2", var(--font-jp), sans-serif; }


/* Post-click sheet now stacks two CTAs (store fallback + LINE) rather than a form. */
.post-cta-sheet .btn { width: 100%; justify-content: center; margin-bottom: var(--s-2); }
.post-cta-sheet .btn--line { gap: 8px; }
.post-cta-sheet .btn:last-of-type { margin-bottom: var(--s-3); }


/* ══ Platform-conditional content ════════════════════════════════════════
   Mobile cannot deep-link into a VRChat world — the world page's "Launch World"
   is desktop-only (verified on device 2026-08-21). So mobile and desktop get
   genuinely different CTAs and different join instructions, rather than one
   promise that is false on half the traffic. body[data-platform] is set by
   getPlatform() in script.js before first paint of these blocks. */
.only-mobile, .only-desktop { display: none; }
body[data-platform="ios"] .only-mobile,
body[data-platform="android"] .only-mobile { display: revert; }
body[data-platform="desktop"] .only-desktop { display: revert; }
/* buttons need their flex display back, not `revert` to inline */
body[data-platform="ios"] a.only-mobile,
body[data-platform="android"] a.only-mobile,
body[data-platform="desktop"] a.only-desktop { display: inline-flex; }

.search-token {
  display: inline-block; font-family: "DM Mono", monospace; font-weight: 500;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px; padding: 1px 8px; letter-spacing: 0.06em;
}