/* Vireofeed — style.css */

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

:root {
    --bg-base:       #0f0f0f;
    --bg-surface:    #1a1a1a;
    --bg-surface-2:  #222222;
    --bg-ad:         #1a1a16;
    --border:        #2a2a2a;
    --border-ad:     #27271f;
    --text-primary:  #e8e8e8;
    --text-secondary:#aaaaaa;
    --text-muted:    #666666;
    --accent:        #7ec98f;
    --accent-dim:    #1a2a1e;
    --radius-card:   12px;
    --radius-sm:     6px;
    --topbar-h:      52px;
    --filterbar-h:   auto;
}

html { scroll-behavior: smooth; }

body {
    background:  var(--bg-base);
    color:       var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size:   15px;
    line-height: 1.6;
    min-height:  100vh;
}

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

/* ---- Topbar ---- */
.topbar {
    position:      sticky;
    top:           0;
    z-index:       100;
    height:        var(--topbar-h);
    background:    var(--bg-base);
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    padding:       0 20px;
}

.logo {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size:   22px;
    color:       var(--text-primary);
    display:     flex;
    align-items: center;
    gap:         9px;
    letter-spacing: -0.3px;
    text-decoration: none;
}

.logo-mark {
    width:         28px;
    height:        28px;
    flex-shrink:   0;
    border-radius: 4px;
    object-fit:    contain;
}

/* ---- Filter bar ---- */
.filter-bar {
    background:    var(--bg-base);
    border-bottom: 1px solid var(--border);
    padding:       12px 20px;
    display:       flex;
    align-items:   center;
    flex-wrap:     wrap;
    gap:           6px;
    position:      sticky;
    top:           var(--topbar-h);
    z-index:       90;
}

.filter-label {
    font-size:      11px;
    font-weight:    600;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right:   4px;
    flex-shrink:    0;
}

.cat-toggle {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     6px 11px;
    border:      1px solid var(--border);
    border-radius: var(--radius-sm);
    background:  var(--bg-surface);
    cursor:      pointer;
    user-select: none;
    transition:  border-color 0.15s, background 0.15s;
}

.cat-toggle:hover { border-color: #444; }

.cat-toggle.active {
    border-color: var(--accent);
    background:   var(--accent-dim);
}

.cat-toggle input[type="checkbox"] { display: none; }

.cat-toggle .cat-icon {
    width:      20px;
    height:     20px;
    flex-shrink: 0;
    border-radius: 3px;
    object-fit: contain;
}

/* Placeholder coloured squares until real PNGs exist */
.cat-toggle .cat-icon.placeholder { border-radius: 3px; }
.cat-icon-fact    { background: #2a3a4a; }
.cat-icon-quote   { background: #2a2a3a; }
.cat-icon-riddle  { background: #3a2a3a; }
.cat-icon-history { background: #3a3020; }
.cat-icon-animal  { background: #1e3020; }

.cat-toggle .cat-name {
    font-size:   12px;
    font-weight: 500;
    color:       var(--text-muted);
    transition:  color 0.15s;
}

.cat-toggle.active .cat-name { color: var(--text-primary); }

.checkmark {
    width:         13px;
    height:        13px;
    border:        1px solid #444;
    border-radius: 3px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    border-color 0.15s, background 0.15s;
}

.cat-toggle.active .checkmark {
    border-color: var(--accent);
    background:   var(--accent);
}

.checkmark svg { display: none; }
.cat-toggle.active .checkmark svg { display: block; }

/* ---- Feed ---- */
.feed {
    max-width: 680px;
    margin:    0 auto;
    padding:   20px 16px 60px;
    display:   flex;
    flex-direction: column;
    gap:       12px;
}

/* ---- Cards ---- */
.card {
    background:    var(--bg-surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-card);
    padding:       18px 20px;
    display:       flex;
    flex-direction: column;
    gap:           12px;
    animation:     card-in 0.2s ease;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.card-icon {
    width:       26px;
    height:      26px;
    border-radius: 3px;
    flex-shrink: 0;
    object-fit:  contain;
}

.card-category {
    font-size:      11px;
    font-weight:    600;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
}

a.card-category:hover { color: var(--accent); }

.card-body {
    font-size:   15px;
    line-height: 1.7;
    color:       #d8d8d8;
}

.card-body.is-quote {
    font-size:   17px;
    line-height: 1.6;
    color:       var(--text-primary);
    font-style:  italic;
}

.quote-attr {
    display:     block;
    margin-top:  6px;
    font-size:   13px;
    font-style:  normal;
    color:       var(--text-muted);
}

.card-source {
    font-size:   12px;
    color:       var(--text-muted);
    border-top:  1px solid #222;
    padding-top: 10px;
    display:     flex;
    align-items: center;
    gap:         5px;
}

/* Riddle answer */
.riddle-answer-wrap { display: flex; flex-direction: column; gap: 8px; }

.reveal-btn {
    align-self:  flex-start;
    background:  none;
    border:      1px solid var(--border);
    border-radius: var(--radius-sm);
    color:       var(--text-muted);
    font-family: inherit;
    font-size:   12px;
    padding:     5px 12px;
    cursor:      pointer;
    transition:  border-color 0.15s, color 0.15s;
}

.reveal-btn:hover { border-color: var(--accent); color: var(--accent); }

.riddle-answer-text {
    font-size:   14px;
    color:       var(--text-secondary);
    display:     none;
}

.riddle-answer-text.visible { display: block; }

/* ---- Ad card ---- */
.card.ad-card {
    background:    var(--bg-ad);
    border-color:  var(--border-ad);
    position:      relative;
    min-height:    120px;
    align-items:   stretch;
}

.ad-label {
    font-size:      10px;
    font-weight:    600;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self:     flex-end;
    margin-bottom:  4px;
}

.ad-slot {
    width:      100%;
    min-height: 90px;
    display:    block;
}

/* ---- Load more / spinner ---- */
.load-sentinel {
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.spinner {
    width:  22px;
    height: 22px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
}

.spinner.visible { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
    text-align:  center;
    color:       var(--text-muted);
    font-size:   14px;
    padding:     40px 20px;
    display:     none;
}

.empty-state.visible { display: block; }

/* ---- Responsive ---- */
@media (max-width: 520px) {
    .topbar  { padding: 0 14px; }
    .filter-bar { padding: 10px 14px; }
    .feed    { padding: 14px 10px 60px; gap: 10px; }
    .card    { padding: 14px 16px; }
    .cat-toggle { padding: 5px 9px; }
    .filter-label { display: none; }
    .card-body.is-quote { font-size: 15px; }
}