/* ═══════════════════════════════════════════════════════════════
   TERMS AND CONDITIONS
   Aesthetic: Black Mirror — cold, futuristic, unrelenting
   One continuous wall of text. No escape. No breaks.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600&display=swap');

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

body {
    background: #000;
    color: #c8c8c8;
    font-family: 'Share Tech Mono', monospace;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.hidden { display: none !important; }

/* ── Name screen ────────────────────────────────────────────── */
#name-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 50;
}

#name-box {
    text-align: center;
    max-width: 480px;
    width: 90vw;
    padding: 56px 40px;
    border: 1px solid #111;
}

.doc-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.55rem, 1.2vw, 0.65rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 20px;
}

.doc-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: #666;
    margin-bottom: 40px;
    font-weight: 300;
    letter-spacing: 0.1em;
}

#name-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #222;
    color: #e8e8e8;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    text-align: center;
    padding: 12px 0;
    outline: none;
    margin-bottom: 36px;
    letter-spacing: 0.08em;
}

#name-input::placeholder { color: #222; }

#name-submit, #again-btn {
    background: transparent;
    border: 1px solid #222;
    color: #555;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 14px 40px;
    cursor: pointer;
    transition: all 0.3s;
}

#name-submit:hover, #again-btn:hover {
    border-color: #555;
    color: #c8c8c8;
}

/* ── Terms screen ───────────────────────────────────────────── */
#terms-screen {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

#terms-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    padding: 0 6vw;
}

#terms-header {
    padding: 18px 0 0;
    border-bottom: 1px solid #111;
}

#doc-version {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: #222;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

/* Accept bar */
#accept-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #111;
    background: #000;
}

#timer-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

#timer-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #666;
}

#timer-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 400;
    color: #555;
    transition: color 0.3s;
    min-width: 2ch;
}

#timer-count.urgent { color: #ff1111; }

#accept-instruction {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Hand status — large and bright ─────────────────────────── */
#hand-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.15em;
    color: #aaa;
    text-transform: uppercase;
}

/* Terms body — one unbroken wall of text */
#terms-body {
    flex: 1;
    overflow-y: scroll;
    padding: 28px 0 0;
    color: #444;
    scrollbar-width: none;
    -ms-overflow-style: none;
    pointer-events: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    line-height: 1.9;
    letter-spacing: 0.03em;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

#terms-body::-webkit-scrollbar { display: none; }

#terms-body p {
    display: inline;
    margin: 0;
    padding: 0;
}

#terms-body p::after { content: ' '; }

#terms-body .personal { color: #cc2200; }

/* Scanline CRT effect */
#terms-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 99;
}

/* ── Reveal screen ──────────────────────────────────────────── */
#reveal-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 50;
}

#reveal-box {
    text-align: center;
    max-width: 700px;
    width: 90vw;
    padding: 64px 48px;
}

#reveal-box .doc-label {
    color: #666;
    margin-bottom: 48px;
}

#reveal-clause {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.1rem, 2.8vw, 1.6rem);
    color: #e8e8e8;
    line-height: 1.9;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 48px;
    min-height: 80px;
}

#reveal-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 48px;
}

/* ── p5 canvas ───────────────────────────────────────────────── */
canvas {
    position: fixed;
    top: 0; left: 0;
    z-index: 1;
    pointer-events: none;
}

#arc-canvas {
    position: static;
    pointer-events: none;
}

/* ── Status ─────────────────────────────────────────────────── */
#status {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #222;
    z-index: 100;
}

.loading { color: #666; }
.ready   { color: #222; }
.error   { color: #ff1111; }

@media (max-width: 600px) {
    #terms-container { padding: 0 20px; }
    #reveal-box { padding: 40px 20px; }
}