/*
 * Villains landing page styles.
 *
 * Design intent — match the app's dark surface + brand red. The
 * Villains app uses #0E0E0E-ish backgrounds, white-90% text, and
 * #B00020 as the accent (Material Design "error red"). This page
 * mirrors those values so a tester landing here recognizes the
 * product instantly when they open the .dmg.
 */

:root {
    --bg: #0c0c0d;
    --surface: #18181b;
    --text: rgba(255, 255, 255, 0.92);
    --text-soft: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.32);
    --accent: #b00020;
    --accent-hover: #c11231;
    --border: rgba(255, 255, 255, 0.08);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    width: 100%;
    /* Wider than a single-column page so the two-column hero has
       room. Features grid below uses the same constraint, giving
       three feature cards ~320px each at this width. */
    max-width: 1040px;
    margin: 0 auto;
    padding: 72px 32px 48px;
}

/* ─── Hero ───────────────────────────────────────────────────────
 *
 * Two-column on desktop (≥860px), single-column on mobile.
 * Mobile order matches the HTML — copy first, preview second.
 * Desktop centers vertically so the preview card aligns visually
 * with the CTA button rather than top-flushing.
 */

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    /* Mobile-default: centered text since the column is full width.
       Overridden to left-align inside .hero-copy at desktop width. */
    text-align: center;
    /* Tightened from the original 56px bottom padding so hero
       flows directly into the feature row without a sparse
       mid-page gap. */
    padding: 16px 0 24px;
}

@media (min-width: 860px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
        align-items: center;
        text-align: left;
    }
}

/* Right-side container — positions the product preview card.
   Centered in mobile single-column flow; left-aligned on desktop
   so the card anchors near the copy instead of floating to the
   far edge of a wide column. */
.hero-preview {
    display: flex;
    justify-content: center;
}

@media (min-width: 860px) {
    .hero-preview {
        justify-content: flex-start;
    }
}

/* Logo PNG. Native asset is high-res (~960px @3x); the browser
   downsamples for Retina sharpness. Slightly tighter at 280px to
   sit within the desktop column without dominating the column's
   text below. */
.logo {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px;
}

@media (min-width: 860px) {
    .logo {
        margin: 0 0 24px;
    }
}

/* Visually hidden but exposed to screen readers + SEO. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.headline {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.2;
}

.subhead {
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--text-soft);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.45;
}

/* Early-access badge — small, capped, accent-tinted. Sits between
   subhead and CTA as the third tier of typographic weight: louder
   than legal/footer copy, quieter than headline + CTA. Uses a thin
   border + matching accent text rather than a filled pill so it
   reads as a label, not a button.
   `display: block` + `width: fit-content` + `margin: 0 auto` keeps
   the pill on its own line directly above the download CTA — at
   wide viewports inline-block could let it sit side-by-side with
   the button, which would make the badge feel like a competing
   action rather than a contextual label. */
.badge {
    display: block;
    width: fit-content;
    /* Mobile: centered (parent text-align: center + margin auto).
       Desktop: left-aligned via override below. */
    margin: 0 auto 20px;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(176, 0, 32, 0.08);
    border: 1px solid rgba(176, 0, 32, 0.35);
    border-radius: 999px;
}

.download {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.05s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 8px 24px rgba(176, 0, 32, 0.25);
}

.download:hover {
    background: var(--accent-hover);
}

.download:active {
    transform: translateY(1px);
}

.download-label {
    font-size: 15px;
}

.download-meta {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

.instructions {
    margin: 24px auto 0;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
}

.instructions strong {
    color: var(--text);
    font-weight: 600;
}

/* Desktop two-column overrides — flush-left every element in the
   .hero-copy column. Mobile keeps centered alignment via the
   defaults above (margin: 0 auto + parent text-align: center). */
@media (min-width: 860px) {
    .hero-copy .badge {
        margin-left: 0;
        margin-right: auto;
    }

    .hero-copy .instructions {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ─── Product preview ─────────────────────────────────────────────
 *
 * CSS-rendered recreation of the Villains sidebar. Lives in the
 * right column of the hero on desktop; stacks below the copy on
 * mobile. No external image file — everything below is markup +
 * CSS, which keeps brand colors / fonts perfectly aligned with the
 * rest of the page and avoids shipping any real player names
 * captured from CWG.
 */

/* Outer card — rounded, subtle border, soft drop shadow. Narrow
   max-width matches the typical Villains sidebar dimensions users
   actually run; wider previews introduce too much horizontal
   deadspace between player names and the stats pill. */
.preview-card {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* ─── Sidebar mock ────────────────────────────────────────────────
 *
 * The visible recreation of the Villains sidebar. All sizing and
 * colors are tuned to match the running app at native scale; if a
 * real product screenshot were dropped next to this it should read
 * as the same product. Three table groups (tournament, PLO ring,
 * NLHE ring) demonstrate the variety of game-type rails, emoji
 * avatars, color flags, phrase tags, and ring stats the sidebar
 * surfaces in real use.
 */

.sb-mock {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
    background: #0c0c0d;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    user-select: none;
}

/* Title bar — wordmark left, icons right. */
.sb-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
}

/* Logo image rendered in the sidebar's title bar. Native asset is
   high-res; we constrain the height so the title bar stays compact
   regardless of the logo's intrinsic dimensions. */
.sb-mark {
    height: 18px;
    width: auto;
    display: block;
}

.sb-icons {
    display: flex;
    gap: 12px;
}

.sb-icon {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
}

/* Table card header strip. Game-type rail + label + count. The
   header background is tinted with the rail color at 8% so each
   table reads as a coherent block at a glance. */
.sb-table-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    margin-top: 4px;
}

.sb-rail {
    display: inline-block;
    width: 2px;
    height: 12px;
    border-radius: 1px;
}

.sb-table-label {
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", "Menlo", monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.sb-chev-down {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1;
}

/* Game-type variants — values pulled from the app's
   AccentNLHE / AccentPLO / AccentTournament color assets. */
.sb-tournament {
    background: rgba(37, 99, 235, 0.10);
}
.sb-tournament .sb-rail { background: #2563eb; }

.sb-plo {
    background: rgba(6, 182, 212, 0.10);
}
.sb-plo .sb-rail { background: #06b6d4; }

.sb-nlhe {
    background: rgba(34, 197, 94, 0.10);
}
.sb-nlhe .sb-rail { background: #22c55e; }

/* Player row — avatar, name (+ optional phrase tag below), and an
   optional mini-stats column for ring games. The middle name block
   uses `min-width: 0` so the name truncates with ellipsis instead
   of pushing the stats pill off-row at narrow widths; the pill
   itself is `flex-shrink: 0` so it never compresses. */
.sb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

/* Avatar — three variants:
   - .emoji  : selected villain-type glyph rendered at a comfortable
               14px so the emoji is the primary identity signal.
   - .flag-* : color-flagged player without an emoji type — the dot
               is the identity signal.
   - .dot    : neither — neutral gray placeholder. */
.sb-avatar {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.sb-avatar.emoji { background: transparent; }
.sb-avatar.dot {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
    margin-left: 7px;
    margin-right: 7px;
    background: rgba(255, 255, 255, 0.22);
}
.sb-avatar.flag-red,
.sb-avatar.flag-yellow,
.sb-avatar.flag-green,
.sb-avatar.flag-blue {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
    margin-left: 6px;
    margin-right: 6px;
}
.sb-avatar.flag-red    { background: #b00020; }
.sb-avatar.flag-yellow { background: #ffd700; }
.sb-avatar.flag-green  { background: #22c55e; }
.sb-avatar.flag-blue   { background: #2563eb; }

.sb-name-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sb-row .sb-name {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phrase-tag pill that hangs underneath the player name when the
   user has assigned one. Faint background + soft text so it reads
   as metadata, not a primary visual element. */
.sb-tag {
    align-self: flex-start;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

/* Stats pill — tabular-friendly monospace numerals on a slightly
   raised dark surface, matching the running app's look. Tabular-
   nums keeps "12 / 8" and "54 / 17" the same width visually so
   the column reads as a clean vertical line. */
.sb-mini-stats {
    flex-shrink: 0;
    font-size: 10.5px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ─── Expanded player card (inside the sidebar mock) ─────────────
 *
 * Recreates the running app's expanded `PlayerDetailView` block:
 * stats pills, full villain-type catalog row, full phrase-tag
 * catalog row, flag picker, and note rail. Only ONE expanded card
 * appears in the mock — chosen as the centerpiece showing the
 * product's depth without making the whole sidebar feel cluttered.
 */

.sb-expanded {
    margin: 8px;
    padding: 12px 14px;
    background: #18181b;
    border-radius: 10px;
}

.sb-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Initial-letter avatar — the expanded card always uses a colored
   circle with the player's first letter overlaid in white,
   regardless of which villain-type emoji is selected. The fill
   color comes from the player's flag color (or gray when no flag
   is set), mirroring `editedPlayer.colorIndicator?.color` in the
   running app's `PlayerDetailView`. */
.sb-avatar-init {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.sb-avatar-init.flag-bg-red    { background: #B00020; }
.sb-avatar-init.flag-bg-yellow { background: #FFD700; color: #0c0c0d; }
.sb-avatar-init.flag-bg-green  { background: #38944D; }

.sb-row-head .sb-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.sb-chev {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* VPIP / PFR / HANDS pill row. Three equal-width cells with bold
   primary number + small all-caps label underneath. */
.sb-stats {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.sb-stat {
    flex: 1;
    background: #0c0c0d;
    border-radius: 6px;
    padding: 6px 0;
    text-align: center;
}

.sb-stat strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
}

.sb-stat small {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

/* Emoji catalog row — selected chip is saturated full color,
   others are desaturated + dimmed (filter: saturate(0) +
   opacity 0.45) matching the app's selection feedback. */
.sb-emoji-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.sb-emoji {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    background: #0c0c0d;
    filter: saturate(0);
    opacity: 0.45;
}

.sb-emoji.on {
    background: rgba(255, 255, 255, 0.12);
    filter: none;
    opacity: 1;
}

/* Phrase-tag catalog row. Text-only chips; selected has a
   brighter background + bright text. */
.sb-phrase-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sb-phrase {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 500;
    background: #0c0c0d;
    color: rgba(255, 255, 255, 0.45);
}

.sb-phrase.on {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

/* Flag color picker. Three default-enabled colors (red, yellow,
   green) using the running app's exact hex values from
   `Player.swift`. Selected gets a white outer ring matching the
   `colorIndicator == pc ? 2 : 0` line-width override in the app. */
.sb-flag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sb-flag-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 2px;
}

.sb-flag {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.85;
}

.sb-flag.on {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75);
    opacity: 1;
}

/* Note input area — left accent rail (red/accent color) + body
   text. Mirrors the `RoundedRectangle` + `TextField` pair in the
   app's expanded card. */
.sb-note {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: #0c0c0d;
    border-radius: 6px;
    padding: 8px 8px 8px 0;
}

.sb-note-rail {
    width: 2px;
    background: rgba(176, 0, 32, 0.6);
    border-radius: 1px;
    margin-left: 4px;
}

.sb-note-text {
    font-size: 10.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
}

/* ─── Features ────────────────────────────────────────────────── */

.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* Tightened to 8px after the two-column hero refactor. The
       hero's own bottom padding (24px) plus this 8px gives ~32px
       of separation — tight enough that the page reads as one
       continuous flow (hero → features → footer), loose enough
       that the feature row doesn't crowd the install note above. */
    padding-top: 8px;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 22px;
}

.feature h2 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.feature p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-soft);
}

/* ─── Footer ──────────────────────────────────────────────────── */

footer {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 32px 48px;
    text-align: center;
    border-top: 1px solid var(--border);
}

/* Non-affiliation disclaimer. Slightly larger than copyright so it
   stays legible — it's load-bearing IP-protection copy — but still
   muted enough that it reads as legal context rather than a warning.
   Constrained width keeps it from running corner-to-corner; centered
   with the rest of the footer. */
.disclaimer {
    margin: 0 auto 16px;
    max-width: 460px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-muted);
}

.copyright,
.legal {
    margin: 6px 0;
    font-size: 11px;
    color: var(--text-muted);
}

.legal a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}

.legal a:hover {
    color: var(--text);
}

.legal .dot {
    margin: 0 8px;
    color: var(--text-muted);
}

/* ─── Legal pages (privacy / terms) ───────────────────────────── */

.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 32px 64px;
}

.legal-page h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
}

.legal-page .effective {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 0 32px;
}

.legal-page h2 {
    font-size: 18px;
    margin: 32px 0 12px;
}

.legal-page p,
.legal-page li {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.65;
}

.legal-page a {
    color: var(--text);
}

.legal-page .back {
    display: inline-block;
    margin-top: 40px;
    color: var(--text-soft);
    font-size: 13px;
    text-decoration: none;
}

.legal-page .back:hover {
    color: var(--text);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (min-width: 640px) {
    .features {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 480px) {
    main {
        padding: 56px 20px 40px;
    }

    .logo {
        width: 240px;
    }

    .headline {
        font-size: 19px;
    }

    .subhead {
        font-size: 14px;
    }
}