/* ==========================================================================
   Chess It Out -- landing pages (standard + standoff)
   ==========================================================================
   The old fixed `nav-container` top bar is gone; navigation and the
   sign-in/sign-out controls now live in the off-canvas sidebar
   (sidebar.css + _sidebar.html), so the hero can use the full viewport.

   Buttons, cards and form controls come from components.css. The only colour
   literals in this file are the seven social-network brand colours, which are
   fixed by the networks themselves.
   ========================================================================== */

body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

.container-all {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    /* Room for the floating burger, which is 2.75rem at 0.75rem inset. */
    padding: calc(var(--burger-size) + var(--space-6)) var(--space-5) var(--space-6);
}

/* --------------------------------------------------------------- hero --- */

.hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);

    width: 100%;
    max-width: 46rem;
    padding: var(--space-6);

    text-align: center;
    /* Eine Stufe heller als die Seite -- die Quick-Rules-Karte darin ist hell. */
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------- masthead - */
/* Same logo + wordmark as .sidebar-brand in sidebar.css, sized up for the
   top of the hero card (_brand_header.html). */

.hero-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text);
}

.hero-brand:hover {
    color: var(--text);
    text-decoration: none;
}

.hero-brand-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    flex: none;
}

.hero-brand-text {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--accent);
    text-align: left;
}

.hero-brand-sub {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.section-title {
    display: block;
    padding: 0;

    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ------------------------------------------------------- quick rules ---- */
/* The "how to play" card on both landing pages (_quick_rules.html). The
   standoff page uses the exact same markup, so it inherits all of this. */

.quick-rules {
    width: 100%;
    padding: var(--space-5);

    text-align: left;
    /* Dieselbe helle Flaeche wie das Vote-Control im Spiel. Die Textfarben
       darunter sind deshalb die dunklen Varianten -- die hellen waeren hier
       nicht zu lesen. */
    background-color: var(--vote-surface);
    color: var(--text-on-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.quick-rules-title {
    margin: 0 0 var(--space-4);

    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-on-light-muted);
}

/* Prose above the steps -- the standoff page pipes its intro text in here. */
.quick-rules-intro {
    margin: 0 0 var(--space-4);

    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    text-align: center;
    white-space: pre-line;
    color: var(--text-on-light-muted);
}

/* Only when there's a steps list below the intro to separate it from --
   standoff has no steps, so it gets no divider either. */
.quick-rules-intro.has-divider {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.quick-rules-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-rules-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* The numbered coin. Fixed size so multi-line steps stay aligned. */
.quick-rules-step {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;

    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--accent);

    background-color: var(--accent-soft);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-full);
}

.quick-rules-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.quick-rules-lead {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--text-on-light);
}

.quick-rules-detail {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-on-light-muted);
}

.quick-rules-more {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);

    font-size: var(--fs-sm);
    text-align: center;
}

/* Gold traegt auf der hellen Karte nicht -- weder als Schrift noch als Linie
   (beides landet bei 1.1:1). Der Link ist deshalb dunkel mit dunkler
   Unterstreichung; die Akzentfarbe steckt in der Nummernmuenze daneben. */
.quick-rules-more a {
    color: var(--text-on-light);
    text-decoration: none;
    border-bottom: 2px solid var(--text-on-light-muted);
    transition: border-color var(--transition), color var(--transition);
}

.quick-rules-more a:hover {
    border-bottom-color: var(--text-on-light);
}

/* ---------------------------------------------------------------- CTA --- */

.cta-grid {
    display: grid;
    /* Feste zwei Spalten, nicht auto-fit: sonst legt der Browser auf breiten
       Karten drei Spalten an, und die untere Reihe stuende links statt mittig.
       Die Breite ist gedeckelt und zentriert, damit die Knoepfe nicht ueber die
       ganze Karte laufen. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
}

#play-btn,
#quick-btn,
#invite-btn {
    min-height: 3.25rem;
    font-size: var(--fs-lg);
}

/* Eigene Zeile ueber den beiden anderen -- aber genauso breit wie sie: der Knopf
   belegt beide Spalten und bekommt daraus die Breite einer einzelnen (halbe
   Zeile minus halber Abstand), mittig gesetzt. */
#quick-btn {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-4)) / 2);
}

/* ------------------------------------------------------------- rating --- */

.rating-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);

    width: 100%;
    padding: var(--space-4);

    text-align: center;
    background-color: var(--accent-soft);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
}

.rating-panel:has(.rating-value:empty) {
    display: none;
}

/* Die Zahl kommt erst mit dem Socket ('set landing page'). Ohne reservierte Hoehe
   waere der goldene Kasten bis dahin nur ein schmaler Streifen und alles darunter
   ruckte beim Eintreffen nach unten -- darum steht die Zeilenhoehe schon vorher. */
.rating-value {
    min-height: calc(var(--fs-2xl) * var(--lh-tight));
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Aus, bis feststeht, ob es ueberhaupt eine letzte Partie gibt -- landing.js
   schaltet die Zeile dann auf inline-flex. Frueher stand hier flex, also erst eine
   leere Zeile und gleich darauf display:none: ein zweites Ruecken. */
.rating-details {
    display: none;
    align-items: baseline;
    gap: var(--space-2);
    min-height: calc(var(--fs-sm) * var(--lh-normal));
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- footer --- */

.footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);

    padding: var(--space-6) var(--space-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.footer a {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
}

.footer a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}

/* -------------------------------------------------------------- share --- */

.share-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.share-text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    color: var(--text);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    text-decoration: none;

    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition);
}

.share-button:hover {
    color: var(--text);
    border-color: var(--border-strong);
    text-decoration: none;
}

.share-button:focus-visible {
    box-shadow: var(--ring);
}

.share-button .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* The seven fixed network colours -- the one deliberate exception to
   "no literals outside theme.css". They surface on hover only, so the row
   reads as one set of controls at rest. */
.share-button.facebook:hover  { background-color: #1877F2; border-color: #1877F2; color: #fff; }
.share-button.twitter:hover   { background-color: #000000; border-color: #000000; color: #fff; }
.share-button.whatsapp:hover  { background-color: #25D366; border-color: #25D366; color: #fff; }
.share-button.reddit:hover    { background-color: #FF4500; border-color: #FF4500; color: #fff; }
.share-button.telegram:hover  { background-color: #24A1DE; border-color: #24A1DE; color: #fff; }
.share-button.email:hover     { background-color: #EA4335; border-color: #EA4335; color: #fff; }

.text-link {
    color: var(--accent);
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 768px) {
    .hero-card {
        gap: var(--space-4);
        padding: var(--space-5) var(--space-4);
    }

    .section-title {
        font-size: var(--fs-xl);
    }

    .hero-brand-logo {
        width: 2.75rem;
        height: 2.75rem;
    }

    .hero-brand-text {
        font-size: var(--fs-xl);
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

    /* Einspaltig: dann ist "eine Spalte breit" die volle Breite. */
    #quick-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .footer {
        padding: var(--space-5) var(--space-4);
    }
}