/*
    Final Tactics — placeholder landing page styles.

    Layout: nothing wraps the content.  Each element flows on the body
    directly; body is text-align: center, so everything sits centered on
    the page at the natural width of each line.  No max-width container.
*/

:root {
    --bg:        #000000;
    --text:      #e8e8ea;
    --text-mute: #9a9aa3;
}

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

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    padding: 2rem 1.25rem 4rem;
    text-align: center;
}

/* Burning logo — native <video> element playing tempFT.webm (with mp4
   fallback).  640x200 matches the encoded video's natural dimensions.
   Background is page-black so the logo's transparent / black edges
   blend seamlessly into the page even before the video loads. */
.logo {
    display: block;
    width: 640px;
    height: 200px;
    margin: 0 auto;
    background: var(--bg);
}

.title {
    font-size: 2.4rem;
    font-weight: 500;
    margin: -2.4rem 0 1.5rem 0;
    color: var(--text);
}

.tagline {
    font-size: 1rem;
    color: var(--text-mute);
    margin-bottom: 2rem;
}

.tagline .separator {
    color: var(--text-mute);
    margin: 0 0.4em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.tagline .domain {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--text-mute);
    transition: border-color 0.15s ease;
}

.tagline .domain:hover {
    border-bottom-color: var(--text);
}

.links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: center;
}

.links a {
    color: var(--text-mute);
    text-decoration: none;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
    transition: color 0.15s ease;
}

.links a:hover,
.links a:focus-visible {
    color: var(--text);
    outline: none;
}

.links a:focus-visible {
    outline: 1px dashed var(--text-mute);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Hit counter — pinned to the bottom-right of the viewport so it's always
   visible regardless of scroll, just above where the OS taskbar sits.
   Same monospace font and 0.9rem size as .links so it visually matches
   them.  White text (var(--text)) on the page's black background. */
.hit-counter {
    position: fixed;
    right: 8px;
    bottom: 6px;
    color: var(--text);
    background: var(--bg);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    z-index: 10;
    font-variant-numeric: tabular-nums;
    user-select: none;
}