:root {
    --bg-deep: #09245b;
    --bg-mid: #1656d8;
    --bg-soft: #4f94ff;
    --card-bg: rgba(255, 255, 255, 0.96);
    --card-shadow: 0 28px 80px rgba(4, 18, 53, 0.25);
    --text-dark: #16304f;
    --text-soft: #4c6582;
    --accent-yellow: #ffd43b;
    --accent-yellow-deep: #e6b800;
    --accent-bad: #dc3545;
    --accent-regular: #fd7e14;
    --accent-good: #20a779;
    --accent-very-good: #198754;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body.public-site-body {
    margin: 0;
    font-family: "Source Sans 3", "Segoe UI", sans-serif;
    color: var(--text-dark);
    background:
        radial-gradient(circle at top left, rgba(255, 212, 59, 0.3), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.14), transparent 30%),
        linear-gradient(150deg, var(--bg-deep), var(--bg-mid) 52%, var(--bg-soft));
}

.public-home-shell {
    min-height: 100vh;
    padding: 3rem 0 4rem;
}

.public-home-hero {
    margin-bottom: 1.5rem;
}

.public-home-hero.container,
.joke-app-section.container {
    max-width: 980px;
}

.hero-copy {
    width: 100%;
    color: #fffdf0;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.hero-subtitle {
    margin: 1rem 0 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    max-width: 56ch;
    color: rgba(255, 253, 240, 0.88);
}

.joke-app {
    overflow: hidden;
    border-radius: 30px;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.daily-limit-banner {
    margin-bottom: 1.5rem;
    border: 0;
    border-radius: 20px;
    color: #6b5200;
    background: linear-gradient(135deg, #ffe082, #ffd43b);
}

.meta-label {
    color: var(--text-soft);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.progress-counter {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    line-height: 1;
}

.joke-progress-section {
    margin-top: 1.35rem;
}

.progress-label {
    margin-bottom: 0.5rem;
}

.joke-progress {
    height: 0.9rem;
    margin-bottom: 0;
    border-radius: 999px;
    background: #dae8ff;
}

.joke-progress .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-yellow), var(--accent-yellow-deep));
}

.joke-stage {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 2rem 1.6rem 1.8rem;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 212, 59, 0.18), transparent 34%),
        linear-gradient(180deg, #ffffff, #f6f9ff);
    border: 1px solid rgba(60, 105, 190, 0.14);
}

.joke-text {
    font-family: "Baloo 2", "Trebuchet MS", cursive;
    font-size: var(--joke-font-size-override, clamp(1.35rem, 2.625vw, 2.25rem));
    line-height: 1.18;
    letter-spacing: -0.02em;
    white-space: pre-line;
    color: #0e2c58;
}

.prior-vote-notice {
    margin-bottom: 1.5rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    color: #0f5132;
    background: rgba(25, 135, 84, 0.12);
    font-weight: 600;
}

.rating-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.rating-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 64px;
    padding: 0.9rem 0.75rem;
    border: 0;
    border-radius: 18px;
    font-size: 1.05rem;
    font-weight: 700;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.rating-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 16px 24px rgba(16, 41, 84, 0.14);
}

.rating-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.rating-button.is-selected {
    outline: 3px solid rgba(11, 36, 91, 0.18);
    outline-offset: 1px;
}

.rating-bad {
    color: #fff;
    background: linear-gradient(135deg, #d82f4a, #f45e6b);
}

.rating-regular {
    color: #fff;
    background: linear-gradient(135deg, #e76c19, #ffad33);
}

.rating-good {
    color: #fff;
    background: linear-gradient(135deg, #16956d, #2dd4aa);
}

.rating-very-good {
    color: #fff;
    background: linear-gradient(135deg, #117a53, #27b16a);
}

.replay-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.progress-counter-bottom {
    margin-top: 0.6rem;
    text-align: center;
}

#replay_next_button {
    border-radius: 999px;
    padding-inline: 1.35rem;
    box-shadow: 0 16px 30px rgba(29, 92, 215, 0.22);
}

.app-feedback {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    color: #842029;
    background: #f8d7da;
}

.joke-app[data-joke-only-mode="1"] .card-body {
    padding-block: 2.5rem;
}

.joke-app[data-joke-only-mode="1"] .joke-stage {
    margin-bottom: 0;
    cursor: pointer;
}

@media (max-width: 767px) {
    .public-home-shell {
        padding: 2rem 0 3rem;
    }

    .hero-copy h1 {
        max-width: 12ch;
    }

    .rating-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .rating-button {
        min-height: 58px;
        padding: 0.75rem 0.4rem;
        font-size: 0.82rem;
        gap: 0.35rem;
    }

    .rating-button i {
        font-size: 0.95rem;
    }

    .joke-stage {
        padding: 1.5rem 1.2rem;
    }
}