/* .stats-brand, not .stats: daisyUI ships a bare unscoped .stats that would
   override the properties this rule does not set. */
:root {
    /* Brand tokens, not the old cool greys. --bg was #f4f4f2, which read
       grey against the rest of the site. The surface stays near-white so
       the game board keeps its contrast against the cream page. */
    --bg: var(--color-cream);
    --surface: #fffcf7;
    --ink: var(--color-cocoa);
    --muted: #6b6259;
    --faint: #8a7f74;
    --line: #ece0d4;
    --line-strong: #dbcab8;
    --good: #0f7b4f;
    --good-bg: #eaf6ef;
    --warn: #b4341f;
    --warn-bg: #fbecea;
    --radius: 14px;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }
body {
    margin: 0;
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    accent-color: var(--ink);
}
[v-cloak] { display: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 20;
    border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

.wrap {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    flex: 1;
}

h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
    font-weight: 650;
}
.lede {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
    max-width: 44ch;
}
.puzzle-meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 1.75rem;
}

.step-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 0.9rem;
}

/* Game board */
.card-brand {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    margin-bottom: 2.25rem;
}

.clues {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1.6rem;
}
.clue {
    font-size: 3rem;
    line-height: 1;
    display: inline-block;
    animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: transform 0.2s ease;
}
.clue:hover { transform: scale(1.18) rotate(8deg); }
@keyframes pop-in {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.tries {
    text-align: center;
    margin: 0 0 1.6rem;
}
.try-dot { font-size: 1.15rem; margin: 0 0.15rem; }
.tries-text {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.35rem;
}

.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 480px) {
    .choices { grid-template-columns: 1fr 1fr; }
}
.choice {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.choice:hover { border-color: var(--ink); transform: translateY(-1px); }
.choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice.wrong {
    background: var(--warn-bg);
    border-color: #f0ccc5;
    color: #7a2314;
}
.choice .wrong-mark { font-weight: 700; }

/* Feedback + result banners */
.banner {
    display: flex; gap: 0.55rem; align-items: flex-start;
    text-align: left;
    border-radius: 10px; padding: 0.85rem 1rem;
    font-size: 0.92rem; line-height: 1.5; margin-top: 1.25rem;
}
.banner svg { flex-shrink: 0; margin-top: 2px; }
.banner.warn { background: var(--warn-bg); color: #7a2314; border: 1px solid #f0ccc5; }
.banner.good { background: var(--good-bg); color: #143d2b; border: 1px solid #cfe8db; }
.banner .answer { font-weight: 700; }
.banner p { margin: 0; }
.banner p + p { margin-top: 0.2rem; }

/* Won / lost outcome */
.outcome { text-align: center; }
.result-emoji {
    font-size: 3.5rem;
    line-height: 1;
    display: inline-block;
    animation: pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.result-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.6rem 0 0;
}
.outcome .banner { margin-top: 1.25rem; }
.stats-brand {
    font-size: 0.92rem;
    color: var(--muted);
    margin: 1.1rem 0 0;
}
.stats-brand .blocks {
    display: block;
    font-size: 1.15rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
}
.tomorrow {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 1.1rem 0 0;
}

/* Buttons */
.btn-brand {
    appearance: none; border: none; border-radius: 11px;
    padding: 0.85rem 1.4rem;
    font-size: 0.98rem; font-weight: 600; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: background 0.15s, opacity 0.15s;
}
.btn-brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-primary-brand { background: var(--ink); color: #fff; width: 100%; margin-top: 1.5rem; }
.btn-primary-brand:hover { background: var(--color-espresso); }

.copy-note { font-size: 0.82rem; color: var(--muted); margin: 0.6rem 0 0; }
.copy-note.bad { color: var(--warn); font-weight: 600; }
.share-pre {
    margin: 0.8rem 0 0;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* How to play */
.how { margin-bottom: 1.5rem; }
.how ol { list-style-type: decimal;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.6;
}
.how li { margin-bottom: 0.35rem; }
.how li::marker { color: var(--muted); font-weight: 600; }
.midnight {
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0.9rem 0 0;
}

/* Confetti, emoji bits, skipped entirely for reduced motion */
.confetti-bit {
    position: fixed;
    top: -2.5rem;
    z-index: 30;
    pointer-events: none;
    animation: confetti-fall 3s linear forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

.foot {
    text-align: center; padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem; color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .clue, .result-emoji { animation: none; }
    .clue { transition: none; }
    .clue:hover { transform: none; }
    .choice, .btn-brand { transition: none; }
    .choice:hover { transform: none; }
    .confetti-bit { display: none; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.6rem; }
    .wrap { padding-top: 1.5rem; }
    .card-brand { padding: 1.4rem 1.1rem; }
    .clue { font-size: 2.5rem; }
}