/* ==========================================================================
   Aethera VTT — public landing page (/vtt)
   Scoped, self-contained styling. Relies ONLY on the aurora CSS custom
   properties and primitives already defined in /styles.css
   (.card, .primary-btn, .ghost-btn, .eyebrow, .hero-actions,
   .app-shell.workspace-shell, .stack). Every class here is namespaced `vtt-`
   so it can never collide with, or be clobbered by, the shared stylesheet.

   CSP note: no inline styles/scripts anywhere on the page — all state and
   colour lives in these classes. The hero "screenshot" is live DOM, not an
   image; the only raster is the map behind the canvas (/vtt/hero-map.jpg).
   ========================================================================== */

.vtt-page {
  --vtt-mono: 'Roboto Mono', 'Courier New', monospace;
  --vtt-hairline: rgba(63, 160, 132, 0.25);
  --vtt-hairline-soft: rgba(143, 212, 182, 0.14);
}

/* keep long content from ever pushing the body sideways */
.vtt-page main { overflow-x: clip; }

/* ---- shared section header ------------------------------------------------ */
.vtt-section-head { max-width: 62ch; }
.vtt-section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  margin: 0.4rem 0 0.4rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.vtt-section-head p { margin: 0; color: var(--muted); }

.vtt-grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vtt-mono { font-family: var(--vtt-mono); }
.vtt-cmd { font-family: var(--vtt-mono); color: var(--accent); }
.vtt-you { color: var(--accent-blue); }

/* ==========================================================================
   HERO
   ========================================================================== */
.vtt-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.vtt-hero-copy h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0.7rem 0 0.9rem;
  text-wrap: balance;
}
.vtt-lede {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 1.35rem;
}
.vtt-trust { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; }
.vtt-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.72rem; color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vtt-hairline-soft);
}
.vtt-chip svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

/* ---- faux-UI tabletop mock (the hero visual) ----------------------------- */
.vtt-mock-wrap { overflow-x: auto; }
.vtt-mock {
  min-width: 440px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(95, 242, 182, 0.28);
  background: #060d0b;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(46, 201, 255, 0.06),
    0 0 60px -20px rgba(46, 201, 255, 0.22);
}

/* window title bar */
.vtt-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(180deg, #0d1815, #0a1310);
  border-bottom: 1px solid var(--border);
}
.vtt-dots { display: flex; gap: 0.35rem; }
.vtt-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.vtt-dot-r { background: #f43f5e; }
.vtt-dot-a { background: #f5b53f; }
.vtt-dot-g { background: #34d399; }
.vtt-scene { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.vtt-scene b { color: var(--text); font-weight: 600; }
.vtt-scene svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
.vtt-bar-spacer { flex: 1; }
.vtt-players { display: flex; align-items: center; }
.vtt-players i {
  width: 22px; height: 22px; border-radius: 50%; margin-left: -6px;
  border: 2px solid #0a1310; display: grid; place-items: center;
  font-size: 0.6rem; font-weight: 700; color: #04100c;
}
.vtt-live {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem;
  padding: 0.24rem 0.6rem; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #04100c; background: var(--accent-blue);
}
.vtt-live i { width: 6px; height: 6px; border-radius: 50%; background: #04100c; }

.vtt-body { display: flex; min-height: 340px; }

/* tool rail */
.vtt-rail {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.55rem 0.45rem;
  background: linear-gradient(180deg, #0b1512, #081210);
  border-right: 1px solid var(--border);
}
.vtt-tool {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.015);
}
.vtt-tool svg { width: 17px; height: 17px; }
.vtt-tool.is-active {
  color: #04100c;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  box-shadow: 0 4px 14px rgba(46, 201, 255, 0.32);
}
.vtt-tool-sep { height: 1px; margin: 0.15rem 0.4rem; background: var(--border); }

/* map canvas — real battle map behind a CSS grid + lighting + fog + tokens */
.vtt-canvas {
  position: relative; flex: 1; overflow: hidden;
  background-image:
    linear-gradient(135deg, rgba(6, 16, 12, 0.58), rgba(4, 11, 10, 0.7)),
    url('/vtt/hero-map.jpg');
  background-size: cover;
  background-position: center;
}
.vtt-canvas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 86% 14%, rgba(46, 201, 255, 0.12), transparent 42%),
    radial-gradient(circle at 8% 90%, rgba(95, 242, 182, 0.10), transparent 46%);
}
.vtt-cv-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 212, 182, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 212, 182, 0.12) 1px, transparent 1px);
  background-size: 34px 34px;
}
.vtt-cv-light {
  position: absolute; width: 220px; height: 220px; left: 44%; top: 30%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 224, 150, 0.22),
    rgba(95, 242, 182, 0.12) 40%, transparent 70%);
}
.vtt-cv-fog {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 78% 88%, transparent 40%, rgba(3, 6, 5, 0.85) 80%);
}
.vtt-cv-fog2 {
  position: absolute; left: 0; top: 0; width: 34%; height: 46%; pointer-events: none;
  background: linear-gradient(135deg, rgba(3, 7, 6, 0.92), rgba(3, 7, 6, 0.5) 60%, transparent);
}

/* tokens */
.vtt-tok {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800;
  color: #04100c; transform: translate(-50%, -50%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}
.vtt-tok .vtt-tok-lbl {
  position: absolute; top: 106%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.6rem; font-weight: 600; color: var(--text);
  background: rgba(4, 10, 8, 0.75); padding: 1px 5px; border-radius: 4px;
}
.vtt-tok--you { left: 46%; top: 40%; outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.vtt-tok--ally { left: 62%; top: 58%; }
.vtt-tok--ally2 { left: 33%; top: 62%; }
.vtt-tok--foe { left: 70%; top: 34%; color: #fff; }

/* measure ruler */
.vtt-ruler {
  position: absolute; left: 46%; top: 40%; width: 118px; height: 2px;
  transform-origin: left center; transform: rotate(-19deg);
  background: repeating-linear-gradient(90deg, var(--accent-blue) 0 7px, transparent 7px 13px);
}
.vtt-ruler .vtt-ruler-chip {
  position: absolute; right: -6px; top: -22px;
  font-family: var(--vtt-mono); font-size: 0.62rem; font-weight: 700;
  color: #04100c; background: var(--accent-blue); padding: 1px 6px; border-radius: 5px;
}

/* initiative tracker */
.vtt-init {
  width: 152px; flex: none; padding: 0.6rem 0.55rem;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, #0b1512, #081109);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.vtt-init-h {
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.1rem;
}
.vtt-init-row {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.4rem; border-radius: 8px; font-size: 0.74rem;
  border: 1px solid transparent;
}
.vtt-init-row.is-current {
  background: rgba(46, 201, 255, 0.1);
  border-color: rgba(46, 201, 255, 0.35);
}
.vtt-init-row .vtt-av { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.vtt-init-row .vtt-nm { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtt-init-row .vtt-iv { font-family: var(--vtt-mono); color: var(--muted); font-weight: 700; }
.vtt-init-row.is-current .vtt-iv { color: var(--accent-blue); }

/* chat / dice strip */
.vtt-foot {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, #0a1310, #070f0c);
  padding: 0.55rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.vtt-chatline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; flex-wrap: wrap; }
.vtt-who { display: inline-flex; align-items: center; gap: 0.35rem; }
.vtt-who i { width: 15px; height: 15px; border-radius: 50%; }
.vtt-who b { color: var(--text); }
.vtt-chat-txt { color: var(--muted); }
.vtt-roll {
  font-family: var(--vtt-mono); font-size: 0.72rem; color: var(--accent);
  background: rgba(95, 242, 182, 0.08); border: 1px solid rgba(95, 242, 182, 0.25);
  padding: 1px 6px; border-radius: 5px;
}
.vtt-d20 {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--vtt-mono); font-weight: 700; font-size: 0.72rem; color: #04100c;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  padding: 1px 7px 1px 5px; border-radius: 5px;
}
.vtt-d20 svg { width: 12px; height: 12px; }
.vtt-chatbar { display: flex; align-items: center; gap: 0.5rem; }
.vtt-chatbar .vtt-inp {
  flex: 1; font-size: 0.75rem; color: rgba(143, 212, 182, 0.6);
  padding: 0.4rem 0.7rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
}
.vtt-chatbar .vtt-send {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #04100c;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
}
.vtt-chatbar .vtt-send svg { width: 15px; height: 15px; }

/* shared fill classes for tokens / avatars / badges (no inline styles) */
.vtt-fill-party { background: linear-gradient(135deg, #7ef7c4, #34d399); }
.vtt-fill-ally { background: linear-gradient(135deg, #8fe3ff, #2ec9ff); }
.vtt-fill-mage { background: linear-gradient(135deg, #c9a7ff, #7c5cff); }
.vtt-fill-foe { background: linear-gradient(135deg, #ff8a9c, #f43f5e); }

/* ==========================================================================
   FEATURE GRID
   ========================================================================== */
.vtt-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.vtt-feat {
  padding: 1.25rem; border-radius: 14px;
  border: 1px solid var(--vtt-hairline-soft);
  background: rgba(15, 23, 22, 0.5);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.vtt-feat:hover { border-color: rgba(46, 201, 255, 0.5); transform: translateY(-3px); background: rgba(17, 28, 26, 0.7); }
.vtt-feat-ico {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0.85rem;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(95, 242, 182, 0.1); border: 1px solid rgba(95, 242, 182, 0.22);
}
.vtt-feat-ico svg { width: 20px; height: 20px; }
.vtt-feat h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.vtt-feat p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ==========================================================================
   3-STEP STRIP
   ========================================================================== */
.vtt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.vtt-step {
  padding: 1.1rem 1.2rem; border-radius: 14px;
  border: 1px solid var(--vtt-hairline-soft); background: rgba(9, 16, 14, 0.5);
}
.vtt-step-n {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 0.7rem;
  display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: #04100c;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}
.vtt-step h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.vtt-step p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.vtt-steps-cta { display: flex; justify-content: center; margin-top: 1.5rem; }

/* ==========================================================================
   HOST vs PLAYER SPLIT
   ========================================================================== */
.vtt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.vtt-col-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.vtt-col-head h3 { margin: 0; font-size: 1.2rem; }
.vtt-col-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.vtt-col-ico svg { width: 18px; height: 18px; }
.vtt-col--gm .vtt-col-ico { color: var(--accent); background: rgba(95, 242, 182, 0.12); border: 1px solid rgba(95, 242, 182, 0.25); }
.vtt-col--pl .vtt-col-ico { color: var(--accent-blue); background: rgba(46, 201, 255, 0.12); border: 1px solid rgba(46, 201, 255, 0.25); }
.vtt-blist { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.7rem; }
.vtt-blist li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: var(--muted); }
.vtt-blist li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.vtt-blist li b { color: var(--text); font-weight: 600; }
.vtt-col--gm .vtt-blist li svg { color: var(--accent); }
.vtt-col--pl .vtt-blist li svg { color: var(--accent-blue); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.vtt-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.vtt-qa { border-bottom: 1px solid var(--vtt-hairline-soft); }
.vtt-qa summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 0.98rem;
  padding: 0.7rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vtt-qa summary::-webkit-details-marker { display: none; }
.vtt-qa summary .vtt-plus { color: var(--accent-blue); font-size: 1.1rem; flex: none; transition: transform .2s ease; }
.vtt-qa[open] summary .vtt-plus { transform: rotate(45deg); }
.vtt-qa p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }

/* ==========================================================================
   CLOSING CTA BAND
   ========================================================================== */
.vtt-closing { position: relative; overflow: hidden; text-align: center; border-color: rgba(95, 242, 182, 0.35); }
.vtt-closing::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 82% 12%, rgba(46, 201, 255, 0.2), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(95, 242, 182, 0.18), transparent 60%);
}
.vtt-closing > * { position: relative; }
.vtt-closing h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; text-wrap: balance; }
.vtt-closing p { color: var(--muted); margin: 0 auto 1.5rem; max-width: 48ch; }
.vtt-cta-row { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.vtt-tertiary {
  margin-top: 1.4rem; font-size: 0.83rem; color: var(--muted);
  display: flex; gap: 0.4rem 0.9rem; justify-content: center; flex-wrap: wrap; align-items: center;
}
.vtt-tertiary a { color: var(--accent-blue); border-bottom: 1px solid transparent; }
.vtt-tertiary a:hover { border-color: currentColor; }
.vtt-tertiary .vtt-sep { color: var(--border); }

/* ==========================================================================
   MOTION (respect reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .vtt-tok--you { animation: vtt-turnpulse 2.6s ease-in-out infinite; }
  @keyframes vtt-turnpulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 0 0 rgba(46,201,255,0.35); }
    50% { box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 0 0 7px rgba(46,201,255,0); }
  }
  .vtt-cv-light { animation: vtt-breathe 6s ease-in-out infinite; }
  @keyframes vtt-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .vtt-hero { grid-template-columns: 1fr; }
  .vtt-features { grid-template-columns: repeat(2, 1fr); }
  .vtt-steps { grid-template-columns: 1fr; }
  .vtt-split { grid-template-columns: 1fr; }
  .vtt-faq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vtt-features { grid-template-columns: 1fr; }
  .vtt-hero-copy .hero-actions .primary-btn,
  .vtt-hero-copy .hero-actions .ghost-btn { flex: 1; justify-content: center; text-align: center; }
}