/* Furdle — site styles. Mobile-first, no external dependencies. */

:root {
    --bg: #0f1115;
    --surface: #1a1d24;
    --surface-2: #23272f;
    --text: #e8eaed;
    --muted: #9aa0aa;
    --border: #313743;
    --grey: #3a3f4b;      /* absent letter (worst-guess tiles are all grey) */
    --green: #538d4e;
    --yellow: #b59f3b;
    --accent: #6aa9ff;
    --max-width: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }

/* Header / nav */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.site-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-right: auto; }
.site-nav a { color: var(--muted); font-size: 0.95rem; margin-left: 1rem; }
.site-nav a:hover { color: var(--text); }

main { flex: 1; padding: 1.5rem 0 2.5rem; }

h1 { font-size: 1.7rem; line-height: 1.25; margin: 0.2rem 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 1.75rem 0 0.75rem; }
.lede { color: var(--muted); font-size: 1.05rem; }

/* Letter tiles */
.word-row { display: flex; gap: 0.4rem; margin: 0.4rem 0; flex-wrap: wrap; }
.tile {
    width: 3rem; height: 3rem;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.5rem; text-transform: uppercase;
    color: #fff; border-radius: 6px;
    background: var(--grey);
}
.tile.small { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }

.worst-guesses { margin: 1.25rem 0; }
.partial-note {
    display: inline-block; margin-top: 0.5rem;
    color: var(--yellow); font-size: 0.9rem;
}

/* Today page: center the solution (guess rows + answer box). */
.today-solution .word-row { justify-content: center; }
.today-solution .worst-guesses { text-align: center; }
.today-solution .spoiler-box { text-align: center; }

/* Spoiler (the real answer) */
.spoiler-box { margin: 1.5rem 0; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.spoiler-box .label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.spoiler {
    filter: blur(0.5rem);
    cursor: pointer;
    transition: filter 0.15s ease;
    user-select: none;
}
.spoiler.revealed { filter: none; cursor: default; user-select: text; }
.reveal-hint { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }

/* Cards / archive */
.card {
    display: block;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.9rem 1.1rem; margin: 0.6rem 0;
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card .date { color: var(--muted); font-size: 0.85rem; }
.card .guesses { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }

/* Solve form */
.solve-form { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.solve-form input[type=text] {
    flex: 1 1 12rem; min-width: 0;
    padding: 0.7rem 0.9rem; font-size: 1rem;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
}
.btn {
    padding: 0.7rem 1.1rem; font-size: 1rem; font-weight: 600;
    background: var(--accent); color: #08131f; border: 0; border-radius: 8px; cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: progress; }
#solve-status { color: var(--muted); font-size: 0.9rem; }

/* Ad slots — filled with a banner iframe by loadAds after consent. Negative
   horizontal margin cancels the container padding so a 728px leaderboard fits. */
.ad-slot {
    display: flex; justify-content: center; align-items: center;
    margin: 1.5rem -1rem; min-height: 60px; overflow: hidden;
}
.ad-slot:empty { display: none; }   /* no reserved gap before/if an ad loads */
.ad-slot iframe { display: block; max-width: 100%; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.85rem;
    padding: 1.25rem 0;
}
.site-footer a { color: var(--muted); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.site-footer .disclaimer { flex-basis: 100%; margin-top: 0.5rem; }

/* Cookie consent banner */
.consent-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface-2); border-top: 1px solid var(--border);
    padding: 0.9rem 1rem;
}
.consent-banner[hidden] { display: none; }
.consent-banner .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.consent-banner p { margin: 0; flex: 1 1 18rem; font-size: 0.9rem; color: var(--muted); }
.consent-banner .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }

@media (max-width: 420px) {
    .tile { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
}