/* ==========================================================================
   Launch banner — "opening soon" notice, floating on the left edge.
   ==========================================================================
   The index does not scroll and the blog does, so this is fixed rather than
   placed in the flow: one partial, identical behaviour on both. It collapses
   into a tab on the left edge and the choice is remembered in localStorage,
   so a visitor who closed it never gets the panel opening itself again.

   The left edge also keeps it clear of the index's section dots, which are
   pinned to the right. Below the drawer (z-index 120) and above the header
   (50): the drawer must always cover it.

   It is a small bubble, not a column: it floats over the hero rather than
   moving it, so the space it takes is the space it covers. Where it sits
   depends on what the hero is doing at that width — beside the title from
   1440px up, which is where the hero's own two panels live, it drops to the
   bottom corner; below that the hero panels are under the buttons and the
   bubble keeps the middle of the left edge.
   ========================================================================== */

:root { --launch-width: 176px; }

.launch-banner {
    position: fixed;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    /* The tab comes first in the DOM so focus reaches it before the panel;
       on this edge it belongs to the right of the panel. */
    flex-direction: row-reverse;
    align-items: stretch;
    font-family: "Manrope", sans-serif;
    /* The panel slides out to the left; the tab stays on screen. */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 100vw;
}

.launch-banner[data-state="closed"] {
    transform: translateY(-50%) translateX(calc(-0.9rem - var(--launch-width, 176px)));
}

/* --------------------------------------------------------- the edge tab */

.launch-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 34px;
    padding: 0.8rem 0;
    flex-shrink: 0;
    align-self: center;
    cursor: pointer;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-left: none;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.97) 0%, rgba(12, 12, 16, 0.97) 100%);
    color: #d4af37;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.launch-tab:hover { color: #f0d074; border-color: rgba(212, 175, 55, 0.8); }

.launch-tab-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

.launch-tab .material-symbols-outlined { font-size: 20px; }

/* The tab pulses only while the panel is shut: an open panel already speaks. */
.launch-banner[data-state="closed"] .launch-tab { animation: launch-tab-pulse 2.4s ease-in-out infinite; }

@keyframes launch-tab-pulse {
    0%, 100% { box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55); }
    50%      { box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55), 0 0 16px rgba(212, 175, 55, 0.45); }
}

/* ------------------------------------------------------------- the panel */

.launch-panel {
    position: relative;
    width: var(--launch-width, 176px);
    max-width: calc(100vw - 3.4rem);
    padding: 0.85rem 0.8rem 0.9rem;
    background: rgba(12, 12, 16, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    color: #d1d1d6;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.launch-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 18px;
    color: #71717a;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.launch-close:hover { color: #d4af37; }

.launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 0.4rem;
}

.launch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
    animation: launch-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes launch-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

.launch-title {
    font-family: "Noto Serif", serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 0.4rem;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.launch-text {
    font-size: 0.72rem;
    line-height: 1.5;
    color: #a1a1aa;
    margin: 0 0 0.45rem;
}

/* The offer is the reason the panel exists, so it gets its own frame. */
.launch-perk {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.75rem 0.65rem;
    margin-bottom: 0.9rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.launch-perk .material-symbols-outlined {
    font-size: 20px;
    color: #d4af37;
    flex-shrink: 0;
}

.launch-perk p { margin: 0; font-size: 0.75rem; line-height: 1.55; color: #d1d1d6; }
.launch-perk strong { color: #d4af37; font-weight: 700; }

.launch-note {
    font-size: 0.65rem;
    line-height: 1.45;
    color: #71717a;
    margin: 0 0 0.7rem;
}

/* Stacked: at this width two buttons side by side break their labels over
   three lines each, which is taller than stacking them in the first place. */
.launch-actions { display: flex; flex-direction: column; gap: 0.35rem; }

.launch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.4rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 1px solid #3a3a40;
    border-radius: 10px;
    color: #d1d1d6;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.launch-btn:hover { border-color: rgba(212, 175, 55, 0.7); color: #fff; }
.launch-btn .material-symbols-outlined { font-size: 14px; }

.launch-btn-discord {
    border-color: rgba(88, 101, 242, 0.6);
    background: rgba(88, 101, 242, 0.16);
    color: #c7ccff;
}

.launch-btn-discord:hover { background: rgba(88, 101, 242, 0.3); border-color: #5865f2; color: #fff; }

.launch-btn-register {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
}

.launch-btn-register:hover { background: rgba(212, 175, 55, 0.24); color: #fff; }

/* A dead link is worse than no link: without a Discord URL the button is a
   disabled placeholder rather than an anchor that goes nowhere. */
.launch-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* --------------------------------------------------------------- phones */

/* The middle of the left edge is where the hero's own two panels live — beside
   the title on a wide screen, in a row under the buttons on a narrower one. So
   on every screen that shows them the bubble gives up that band and takes the
   bottom corner, above the pinned footer. Below 1024px it keeps the middle,
   where it opens shut: only the tab is on screen until it is asked for. */
@media (min-width: 1024px) {
    .launch-banner {
        top: auto;
        bottom: 3.25rem;
        transform: none;
    }

    .launch-banner[data-state="closed"] {
        transform: translateX(calc(-0.9rem - var(--launch-width, 176px)));
    }
}

@media (max-width: 767px) {
    :root { --launch-width: 168px; }

    .launch-banner {
        /* Flush to the edge and clear of the footer pinned to the bottom of
           the index: on a phone every pixel of the tab is a pixel off the
           hero's own panels. */
        left: 0;
        top: auto;
        bottom: 3.5rem;
        transform: none;
    }

    .launch-banner[data-state="closed"] { transform: translateX(calc(-1 * var(--launch-width, 168px))); }

    /* Flush to the edge, so the only rounded side is the tab's. */
    .launch-panel { max-height: calc(100dvh - 12rem); border-radius: 0; }
    .launch-tab { width: 28px; }
    .launch-tab-text { font-size: 9px; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
    .launch-banner,
    .launch-tab,
    .launch-dot { transition: none; animation: none; }
}

/* ==========================================================================
   The same notice, inline in the servers section of the index.
   ========================================================================== */

.launch-inline {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 62rem;
    margin: 0 auto 0.5rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(34, 197, 94, 0.08) 100%);
    border: 1px solid rgba(212, 175, 55, 0.32);
    text-align: left;
}

.launch-inline-icon { font-size: 22px; color: #d4af37; flex-shrink: 0; }

.launch-inline-body { flex: 1 1 18rem; min-width: 0; }

.launch-inline-title {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 0.2rem;
}

.launch-inline-text { font-size: 0.75rem; line-height: 1.5; color: #a1a1aa; margin: 0; }
.launch-inline-text strong { color: #d4af37; }

.launch-inline-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.launch-inline-actions .launch-btn { padding: 0.5rem 0.85rem; }

@media (max-width: 767px) {
    .launch-inline { padding: 0.65rem 0.8rem; gap: 0.6rem; }
    .launch-inline-actions { width: 100%; }
    .launch-inline-actions .launch-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   "How to play" section: the strip above the steps, and the two chips that
   say which step works today and which one waits for launch day.
   -------------------------------------------------------------------------- */

.launch-inline-gs { margin-bottom: 0.85rem; }

.gs-card-tag {
    margin-top: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.gs-card-tag .material-symbols-outlined { font-size: 13px; }

.gs-card-tag-open {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.gs-card-tag-wait {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #e3c765;
}