/* Reality Glitch — style.css */

/* ====== CSS Variables ====== */
:root {
    --bg-primary:   #0a0a0a;
    --bg-secondary: #111111;
    --bg-card:      #141414;
    --border:       #1e1e1e;
    --border-hover: #333333;
    --accent:       #ff4444;
    --accent-hover: #ff6666;
    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-muted:   #444444;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --max-width:    900px;
}

/* ====== Reset ====== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ====== Scan-line overlay ====== */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: var(--accent-hover); }

/* ====== Progress bar ====== */
.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent);
    z-index: 200;
    transition: width 0.1s linear;
    box-shadow: 0 0 6px var(--accent);
}

/* ====== Header ====== */
.header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ====== Glitch logo ====== */
.logo {
    font-size: 1.4em;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
}

.logo span { color: var(--text-muted); }

.logo:hover { animation: glitch 0.4s steps(1) forwards; }

@keyframes glitch {
    0%   { text-shadow: none; clip-path: none; }
    20%  { text-shadow: -2px 0 #00ffff; clip-path: inset(10% 0 80% 0); transform: translate(-2px, 0); }
    40%  { text-shadow:  2px 0 #ff0055; clip-path: inset(60% 0 20% 0); transform: translate(2px, 0); }
    60%  { text-shadow: -2px 0 #00ffff; clip-path: inset(30% 0 50% 0); transform: translate(-1px, 0); }
    80%  { text-shadow:  2px 0 #ff0055; clip-path: inset(50% 0 30% 0); transform: translate(1px, 0); }
    100% { text-shadow: none; clip-path: none; transform: none; }
}

.site-title {
    color: var(--text-secondary);
    font-size: 0.9em;
    letter-spacing: 1px;
}

.nav-links {
    margin-left: auto;
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: var(--text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav-links a:hover { color: var(--accent); }

/* ====== Categories tabs ====== */
.categories {
    max-width: var(--max-width);
    margin: 20px auto 0;
    padding: 0 20px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.cat-tab {
    background: var(--bg-card);
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--border);
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cat-tab:hover {
    background: #1e1e1e;
    color: var(--text-primary);
    border-color: var(--border-hover);
}
.cat-tab.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 700;
}

/* ====== Date bar ====== */
.date-bar {
    max-width: var(--max-width);
    margin: 14px auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-label {
    color: var(--text-muted);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.date-value {
    color: var(--accent);
    font-weight: 700;
    font-size: 1em;
}

/* ====== Digest content ====== */
.content {
    max-width: var(--max-width);
    margin: 20px auto;
    padding: 0 20px;
    flex: 1;
}

.digest-text {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 28px 32px;
    font-size: 0.93em;
    line-height: 1.85;
    word-wrap: break-word;
    letter-spacing: 0.2px;
    color: #cccccc;
}

.digest-text p {
    margin-bottom: 1.4em;
}
.digest-text p:last-child { margin-bottom: 0; }

.digest-meta {
    margin-top: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72em;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ====== Share buttons ====== */
.share-btns {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.share-btn {
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.72em;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border: 1px solid var(--border-hover);
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}
.share-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.share-tg:hover  { border-color: #26a4e2; color: #26a4e2; }
.share-tw:hover  { border-color: #e0e0e0; color: #e0e0e0; }
.share-copy      { background: transparent; }
.share-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ====== Pending category tab ====== */
.cat-tab.cat-pending {
    opacity: 0.45;
    border-style: dashed;
}
.cat-tab.cat-pending:hover {
    opacity: 0.7;
}
.cat-tab.cat-pending.active {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--text-muted);
    border-style: dashed;
    opacity: 0.7;
}

/* ====== Pending state (digest preparing) ====== */
.pending-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}
.pending-state h2 {
    font-size: 1.4em;
    color: var(--text-secondary);
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.pending-state p {
    font-size: 0.85em;
    margin-top: 6px;
}
.pending-state .pending-hint {
    color: var(--accent);
    opacity: 0.5;
    font-size: 0.75em;
    margin-top: 20px;
    letter-spacing: 3px;
}
.pending-icon {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-hover);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: pending-spin 1.2s linear infinite;
}
@keyframes pending-spin {
    to { transform: rotate(360deg); }
}

/* ====== Empty state ====== */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}
.empty-state h2 {
    font-size: 1.4em;
    color: #333;
    margin-bottom: 10px;
}
.empty-state p { font-size: 0.85em; }

/* ====== Archive ====== */
.archive-list {
    max-width: var(--max-width);
    margin: 28px auto;
    padding: 0 20px;
}

.archive-day {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.archive-day:hover { border-color: var(--border-hover); }

.archive-date {
    font-size: 1em;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
}

.archive-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.archive-cat {
    background: var(--bg-card);
    color: var(--text-secondary);
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.archive-cat:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ====== Footer ====== */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: 28px 20px;
    text-align: center;
    margin-top: auto;
}

.donate-block {
    max-width: 480px;
    margin: 0 auto;
}
.donate-block p {
    color: var(--text-muted);
    font-size: 0.78em;
    margin-bottom: 12px;
}

.donate-btn {
    display: inline-block;
    background: var(--accent);
    color: #000;
    padding: 9px 22px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.15s;
}
.donate-btn:hover { background: var(--accent-hover); color: #000; }

.footer-copy {
    color: var(--text-muted);
    font-size: 0.68em;
    margin-top: 14px;
}

/* ====== Responsive: tablet 900px ====== */
@media (max-width: 900px) {
    .header-inner { padding: 0 16px; }
    .site-title { display: none; }
    .content, .categories, .date-bar, .archive-list { padding: 0 16px; }
    .digest-text { padding: 20px 22px; }
}

/* ====== Responsive: mobile 600px ====== */
@media (max-width: 600px) {
    .header-inner {
        padding: 0 12px;
        gap: 12px;
    }
    .logo { font-size: 1.1em; letter-spacing: 2px; }
    .nav-links { gap: 12px; }
    .nav-links a { font-size: 0.75em; }

    .categories { padding: 0 12px; gap: 5px; }
    .cat-tab { padding: 6px 10px; font-size: 0.72em; }

    .content, .date-bar, .archive-list { padding: 0 12px; }

    .digest-text { padding: 14px 16px; font-size: 0.87em; line-height: 1.75; }

    .digest-meta { gap: 10px; }
    .share-btns { margin-left: 0; width: 100%; justify-content: flex-start; }

    .archive-day { padding: 14px 16px; }
}