/* ═══════════════════════════════════════════════════════════════════════════
   THE DAILY DEPARTED
   A Vintage Newspaper Aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Colors - Vintage Newspaper */
    --paper: #f5f0e6;
    --paper-aged: #e8e0d0;
    --paper-dark: #d4caba;

    --ink: #1a1a1a;
    --ink-light: #3d3d3d;
    --ink-faded: #6b6b6b;
    --ink-ghost: #9a9a9a;

    --red-stamp: #c41e3a;
    --red-stamp-light: #d64560;
    --green-confirm: #2d5a27;

    --rule-dark: #2a2a2a;
    --rule-light: #c4baa8;

    /* Typography */
    --font-headline: 'Playfair Display', Georgia, serif;
    --font-body: 'Special Elite', 'Courier New', monospace;
    --font-masthead: 'UnifrakturMaguntia', 'Times New Roman', serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.6;
    position: relative;
}

/* Paper texture overlay */
.paper-texture {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
}

.paper-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.03) 100%
    );
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.container {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: 0 auto;
    padding: var(--space-md);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.screen {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWSPAPER MASTHEAD
   ═══════════════════════════════════════════════════════════════════════════ */
.masthead {
    text-align: center;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-md);
}

.masthead-rule {
    height: 3px;
    background: var(--ink);
    position: relative;
}

.masthead-rule.top {
    margin-bottom: var(--space-sm);
}

.masthead-rule.top::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
}

.masthead-rule.bottom {
    margin-top: var(--space-sm);
}

.masthead-rule.bottom::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
}

.masthead-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--rule-light);
    margin-bottom: var(--space-sm);
}

.masthead-title {
    font-family: var(--font-masthead);
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ink);
}

.masthead-subtitle {
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-top: var(--space-xs);
    letter-spacing: 0.05em;
}

.day-counter {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-faded);
    margin-top: var(--space-sm);
    letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING SCREEN — TYPEWRITER
   ═══════════════════════════════════════════════════════════════════════════ */
#loadingScreen {
    justify-content: center;
    align-items: center;
}

.loading-content {
    text-align: center;
}

.typewriter-loader {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-faded);
}

.cursor {
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALREADY PLAYED SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
.already-played-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--space-md);
    padding: var(--space-md);
}

.clipping-box {
    border: 2px solid var(--ink);
    padding: var(--space-lg);
    background: var(--paper);
    position: relative;
}

.clipping-box::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid var(--rule-light);
    z-index: -1;
}

.clipping-headline {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.clipping-body {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-faded);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.progress-container {
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: var(--space-md);
}

.progress-text {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-faded);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-sm);
}

.progress-bar {
    height: 4px;
    background: var(--paper-dark);
    position: relative;
}

.progress-fill {
    height: 100%;
    background: var(--ink);
    transition: width 0.5s var(--ease-out);
    width: 0%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREAK DISPLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.streak-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.streak-label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ink-ghost);
}

.streak-value {
    font-family: var(--font-headline);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--ink);
}

.streak-divider {
    color: var(--ink-ghost);
    font-size: 0.7rem;
}

.best-streak .streak-value {
    color: var(--ink-faded);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLIPPING CARD — NEWSPAPER PHOTO
   ═══════════════════════════════════════════════════════════════════════════ */
.clipping-card {
    margin-bottom: var(--space-lg);
    animation: card-appear 0.4s var(--ease-out);
}

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

.clipping-photo {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-md);
    background: var(--paper-dark);
    border: 1px solid var(--ink-faded);
    overflow: hidden;
}

.photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
}

.photo-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-size: 4rem;
    font-weight: 700;
    color: var(--ink-faded);
    background: var(--paper-aged);
}

/* Halftone dot pattern overlay */
.halftone-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--ink) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.1;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.clipping-info {
    text-align: center;
}

.clipping-name {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-xs);
    line-height: 1.2;
}

.clipping-profession {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-faded);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANSWER BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.answer-buttons {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Obituary Button */
.btn-obituary,
.btn-printing {
    flex: 1;
    flex-direction: column;
    padding: var(--space-lg) var(--space-md);
    background: var(--paper);
    border: 2px solid var(--ink);
    color: var(--ink);
    gap: var(--space-xs);
}

.btn-obituary:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}

.btn-obituary:hover:not(:disabled) .btn-sublabel {
    color: var(--paper-dark);
}

.btn-printing:hover:not(:disabled) {
    background: var(--paper-aged);
    border-color: var(--ink-light);
}

.btn-label {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.btn-sublabel {
    font-size: 0.8rem;
    color: var(--ink-faded);
    font-style: italic;
    letter-spacing: 0;
}

.btn-key {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.75rem;
    color: var(--ink-ghost);
    border: 1px solid var(--rule-light);
    padding: 1px 6px;
    border-radius: 2px;
}

/* Primary Button */
.btn-primary {
    background: var(--ink);
    color: var(--paper);
    padding: var(--space-md) var(--space-xl);
    letter-spacing: 0.1em;
    font-weight: 600;
    border: 2px solid var(--ink);
}

.btn-primary:hover:not(:disabled) {
    background: var(--paper);
    color: var(--ink);
}

.btn-large {
    width: 100%;
    padding: var(--space-lg);
}

/* Continue Button */
.btn-continue {
    background: var(--paper);
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: var(--space-md) var(--space-xl);
    width: 100%;
    letter-spacing: 0.1em;
    margin-top: var(--space-md);
}

.btn-continue:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
}

.btn-continue .btn-key {
    position: static;
    margin-left: var(--space-sm);
    border: none;
    padding: 0;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT FEEDBACK — RUBBER STAMP
   ═══════════════════════════════════════════════════════════════════════════ */
.result-feedback {
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: var(--space-md);
    position: relative;
    animation: reveal 0.3s var(--ease-out);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.result-stamp {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 900;
    padding: var(--space-xs) var(--space-sm);
    border: 3px solid currentColor;
    border-radius: 3px;
    transform: rotate(-5deg);
    animation: stamp 0.3s var(--ease-out);
    flex-shrink: 0;
}

@keyframes stamp {
    0% {
        transform: rotate(-5deg) scale(2);
        opacity: 0;
    }
    60% {
        transform: rotate(-5deg) scale(0.95);
    }
    100% {
        transform: rotate(-5deg) scale(1);
        opacity: 1;
    }
}

.result-stamp.correct {
    color: var(--green-confirm);
    border-color: var(--green-confirm);
}

.result-stamp.incorrect {
    color: var(--red-stamp);
    border-color: var(--red-stamp);
}

.result-info {
    flex: 1;
    text-align: left;
}

.result-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.result-fact {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
.results-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
}

.results-banner {
    animation: flash 0.5s ease-in-out 3;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.banner-text {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--ink);
}

.results-headline {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--space-sm);
}

.final-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.score-display {
    display: flex;
    align-items: baseline;
}

.score-number {
    font-family: var(--font-headline);
    font-size: 6rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
}

.score-of {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--ink-faded);
}

.score-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
}

.final-streak {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-faded);
}

.final-streak span {
    font-weight: 700;
    color: var(--ink);
}

.play-streak {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-faded);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--rule-light);
    background: var(--paper-aged);
}

.play-streak span {
    font-weight: 700;
    color: var(--ink);
}

.reading-card {
    background: var(--paper);
    border: 3px solid var(--ink);
    padding: var(--space-md) var(--space-lg);
    width: 100%;
    max-width: 320px;
    position: relative;
}

.reading-card::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: -6px;
    bottom: -6px;
    border: 1px solid var(--ink-faded);
    z-index: -1;
}

.reading-card::after {
    content: '§';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 0 var(--space-sm);
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--ink-faded);
}

.reading-title {
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--ink);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule-light);
    padding-bottom: var(--space-xs);
}

.emoji-grid {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0;
}

.emoji-row {
    display: flex;
    justify-content: center;
    gap: 0;
}

.emoji-cell {
    width: 1.6em;
    text-align: center;
    display: inline-block;
}

.share-hint {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--green-confirm);
    min-height: 1.25rem;
}

.come-back {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-ghost);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS SUMMARY (Already Played)
   ═══════════════════════════════════════════════════════════════════════════ */
.results-summary {
    background: var(--paper-aged);
    border: 2px solid #1a1a1a;
    padding: var(--space-lg);
    width: 100%;
    max-width: 280px;
    text-align: center;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.results-summary .score {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: var(--space-sm);
}

.results-summary .emoji-grid {
    font-size: 1.1rem;
}

.results-summary .emoji-cell {
    width: 1.4em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — CARD STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.pulse {
    animation: card-pulse 0.3s var(--ease-out);
}

@keyframes card-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

.shake {
    animation: card-shake 0.4s var(--ease-out);
}

@keyframes card-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCUS STATES
   ═══════════════════════════════════════════════════════════════════════════ */
.btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
    .container {
        padding: var(--space-xl);
    }

    .masthead-title {
        font-size: 3.5rem;
    }

    .clipping-photo {
        width: 240px;
        height: 240px;
    }

    .clipping-name {
        font-size: 2rem;
    }

    .score-number {
        font-size: 7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BONUS ROUND - HOW DID THEY GO?
   ═══════════════════════════════════════════════════════════════════════════ */
.bonus-round {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--paper);
    border: 3px solid var(--ink);
    position: relative;
    animation: reveal 0.3s var(--ease-out);
}

/* Double border effect */
.bonus-round::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--ink);
    pointer-events: none;
}

.bonus-question {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--ink);
    text-align: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule-light);
}

.bonus-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;
}

.btn-bonus {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-sm);
    background: var(--paper);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 85px;
}

/* Decorative corner cuts */
.btn-bonus::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 8px;
    height: 8px;
    background: var(--paper-aged);
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.btn-bonus .btn-key {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.7rem;
    font-family: var(--font-body);
    color: var(--ink-ghost);
    border: 1px solid var(--rule-light);
    padding: 1px 4px;
    border-radius: 2px;
}

.btn-bonus:hover {
    background: var(--paper-aged);
    transform: translateY(-3px);
    box-shadow: 3px 3px 0 var(--ink);
}

.btn-bonus:hover .btn-key {
    background: var(--paper);
}

.btn-bonus:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-bonus.selected {
    background: var(--ink);
    color: var(--paper);
}

.btn-bonus.selected .btn-key {
    color: var(--paper);
    border-color: var(--paper-dark);
}

.btn-bonus.correct {
    background: #2d5a27;
    border-color: #2d5a27;
    color: white;
    box-shadow: 3px 3px 0 rgba(45, 90, 39, 0.4);
}

.btn-bonus.correct::before {
    border-color: #2d5a27;
}

.btn-bonus.correct .btn-key {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.3);
}

.btn-bonus.incorrect {
    background: #8b2635;
    border-color: #8b2635;
    color: white;
    opacity: 0.7;
}

.btn-bonus.incorrect::before {
    border-color: #8b2635;
}

.btn-bonus.incorrect .btn-key {
    color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.2);
}

.btn-bonus:disabled {
    cursor: default;
    transform: none;
}

.btn-bonus:disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--paper);
}

.btn-bonus:disabled.correct:hover,
.btn-bonus:disabled.incorrect:hover {
    transform: none;
}

.bonus-icon {
    font-size: 1.75rem;
    margin-bottom: 4px;
    color: var(--ink);
    line-height: 1;
}

.btn-bonus.correct .bonus-icon,
.btn-bonus.incorrect .bonus-icon {
    color: inherit;
}

.bonus-label {
    font-family: var(--font-headline);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bonus-result {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--paper-aged);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    text-align: center;
}

.bonus-result-text {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.bonus-result-text.correct {
    color: #2d5a27;
}

.bonus-result-text.incorrect {
    color: #8b2635;
}

.bonus-actual-cause {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--ink-faded);
}

.bonus-actual-cause {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink-faded);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer {
    text-align: center;
    padding: var(--space-lg) 0;
    margin-top: var(--space-xl);
}

.site-footer a {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink-faded);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT MOBILE (small screens)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 700px), (max-width: 380px) {
    .container {
        padding: var(--space-sm);
    }

    .masthead {
        padding: var(--space-xs) 0;
        margin-bottom: var(--space-sm);
    }

    .masthead-title {
        font-size: 2.2rem;
    }

    .masthead-subtitle {
        display: none;
    }

    .masthead-date {
        font-size: 0.7rem;
        padding: 2px 0;
        margin-bottom: var(--space-xs);
    }

    .day-counter {
        font-size: 0.75rem;
        margin-top: var(--space-xs);
    }

    .progress-container {
        margin-bottom: var(--space-sm);
    }

    .streak-display {
        margin-bottom: var(--space-sm);
        padding: var(--space-xs) var(--space-sm);
    }

    .clipping-card {
        margin-bottom: var(--space-sm);
    }

    .clipping-photo {
        width: 130px;
        height: 130px;
    }

    .clipping-name {
        font-size: 1.4rem;
    }

    .clipping-profession {
        font-size: 0.95rem;
    }

    .clipping-info {
        padding: var(--space-sm);
    }

    .answer-buttons {
        gap: var(--space-sm);
    }

    .btn-obituary,
    .btn-printing {
        padding: var(--space-md) var(--space-sm);
    }

    .btn-label {
        font-size: 1rem;
    }

    .btn-sublabel {
        font-size: 0.8rem;
    }

    .result-feedback {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }

    .result-stamp {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .result-text {
        font-size: 1.1rem;
    }

    .result-fact {
        font-size: 0.9rem;
    }

    .bonus-round {
        margin-top: var(--space-sm);
        padding: var(--space-sm);
    }

    .bonus-question {
        font-size: 1rem;
        margin-bottom: var(--space-sm);
    }

    .btn-bonus {
        min-height: 60px;
        padding: var(--space-xs);
    }

    .bonus-icon {
        font-size: 1.5rem;
    }

    .bonus-label {
        font-size: 0.75rem;
    }

    .btn-continue {
        padding: var(--space-sm) var(--space-md);
        font-size: 1rem;
    }
}