/**
 * BarkThread Clapback skins — Interpret untouched; tiers go full character.
 * Wholesome = Fremantle port shack · Bastard = rust & jarrah · Sick = mud glory
 */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;700;900&family=Caveat:wght@600;700&family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Oswald:wght@500;700&family=Source+Sans+3:wght@400;600;700&family=Special+Elite&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   CLAPBACK MODE — global switches (Interpret excluded)
   ═══════════════════════════════════════════════════════════════════ */

body[data-bt-skin]:not([data-bt-skin="interpret"]).clapback-active {
    transition: background 0.55s ease, color 0.4s ease;
}

body.clapback-active:not([data-bt-skin="interpret"]) .about-section,
body.clapback-active:not([data-bt-skin="interpret"]) #dailyFactCard {
    display: none !important;
}

body.clapback-active:not([data-bt-skin="interpret"]) .brand-title-inline {
    letter-spacing: -0.01em;
}

body.clapback-active:not([data-bt-skin="interpret"]) .upload-formats {
    opacity: 0.85;
    font-size: 0.82rem;
}

body.clapback-active:not([data-bt-skin="interpret"]) .upload-icon {
    font-size: 2.4rem !important;
}

/* Grain overlay */
body[data-bt-skin="wholesome_pup"]::after,
body[data-bt-skin="judgmental_bastard"]::after,
body[data-bt-skin="sick_puppy"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body[data-bt-skin="wholesome_pup"]::after {
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-bt-skin="judgmental_bastard"]::after {
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-bt-skin="sick_puppy"]::after {
    display: none !important;
    opacity: 0 !important;
}

body[data-bt-skin]:not([data-bt-skin="interpret"]) .upload-container,
body[data-bt-skin]:not([data-bt-skin="interpret"]) .container-fluid {
    position: relative;
    z-index: 1;
}

/* Tier banner */
.clapback-tier-banner {
    display: none;
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.85rem 1.25rem;
    position: relative;
    overflow: hidden;
}

body.clapback-active .clapback-tier-banner {
    display: block;
    animation: btBannerIn 0.4s ease;
}

@keyframes btBannerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tier-banner-eyebrow {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.2rem;
    opacity: 0.75;
}

.tier-banner-label {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.tier-banner-sub {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}

.clapback-vibe-tag {
    display: none;
    font-size: 0.8rem;
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
}

body.clapback-active .clapback-vibe-tag {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   SKIN 1 — WHOLESOME PUP · Port shack · salt & kelpie
   ═══════════════════════════════════════════════════════════════════ */

body[data-bt-skin="wholesome_pup"] {
    --bt-bg: #f4efe6;
    --bt-sand: #faf7f2;
    --bt-card: #ffffff;
    --bt-wood: #8b6914;
    --bt-rope: #c4b8a8;
    --bt-sea: #1cb5c9;
    --bt-kelpie: #0e8fa3;
    --bt-terracotta: #e040a0;
    --bt-text: #3d3028;
    --bt-muted: #6b5c52;
    background:
        radial-gradient(circle at 92% 12%, rgba(28, 181, 201, 0.28) 0%, transparent 38%),
        radial-gradient(circle at 6% 88%, rgba(224, 64, 160, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 78% 92%, rgba(255, 193, 7, 0.18) 0%, transparent 28%),
        linear-gradient(180deg, #faf7f2 0%, #f4efe6 55%, #ebe4d8 100%) !important;
    color: var(--bt-text);
    font-family: 'Source Sans 3', system-ui, sans-serif;
}

body[data-bt-skin="wholesome_pup"] .clapback-tier-banner {
    background: linear-gradient(135deg, #ffffff 0%, #e8f7fa 55%, #d4f1f7 100%);
    color: var(--bt-text);
    border-radius: 16px;
    border: 3px solid var(--bt-sea);
    box-shadow: 0 8px 0 rgba(28, 181, 201, 0.2), 0 16px 40px rgba(28, 181, 201, 0.12);
    font-family: 'Fraunces', Georgia, serif;
}

body[data-bt-skin="wholesome_pup"] .tier-banner-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: none;
}

body[data-bt-skin="wholesome_pup"] .clapback-vibe-tag {
    background: rgba(61, 107, 107, 0.1);
    border: 1px dashed var(--bt-rope);
    border-radius: 8px;
    color: var(--bt-muted);
    font-family: 'Caveat', cursive;
    font-size: 1.05rem;
    text-align: center;
}

body[data-bt-skin="wholesome_pup"] .header-section,
body[data-bt-skin="wholesome_pup"] .navigation-section,
body[data-bt-skin="wholesome_pup"] .upload-area,
body[data-bt-skin="wholesome_pup"] .file-preview,
body[data-bt-skin="wholesome_pup"] .upload-form-container {
    background: var(--bt-card) !important;
    border: 2px solid var(--bt-rope) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 8px 24px rgba(44, 36, 25, 0.1) !important;
}

body[data-bt-skin="wholesome_pup"] .upload-area {
    background:
        linear-gradient(180deg, var(--bt-card) 0%, #efe8da 100%) !important;
    border-style: dashed !important;
    border-width: 3px !important;
}

/* Wholesome header title/subtitle — unified in clapback-active block below */

body[data-bt-skin="wholesome_pup"] .upload-title {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--bt-text) !important;
    font-weight: 800;
}

body[data-bt-skin="wholesome_pup"] .upload-icon {
    color: var(--bt-sea) !important;
}

body[data-bt-skin="wholesome_pup"] .mode-toggle .mode-btn {
    border: 2px solid var(--bt-kelpie);
    /* Square corners to match the other Clapback mode toggles (judgmental/sick). */
    border-radius: 2px;
    color: var(--bt-text);
    background: var(--bt-sand);
}

body[data-bt-skin="wholesome_pup"] .mode-toggle .mode-btn.active {
    background: var(--bt-kelpie);
    border-color: var(--bt-kelpie);
    color: #f7f2e8;
}

body[data-bt-skin="wholesome_pup"] .tier-card {
    background: #fff;
    border: 2px solid var(--bt-sea);
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(28, 181, 201, 0.15);
}

body[data-bt-skin="wholesome_pup"] .tier-card.selected {
    border-color: var(--bt-terracotta);
    box-shadow: 0 0 0 3px rgba(224, 64, 160, 0.18), 0 8px 0 rgba(28, 181, 201, 0.2);
    transform: translateY(-3px);
}

body[data-bt-skin="wholesome_pup"] .tier-card.tier-locked {
    opacity: 0.5;
    filter: saturate(0.6);
}

body[data-bt-skin="wholesome_pup"] .tier-card .tier-badge {
    color: var(--bt-sea) !important;
    background: rgba(61, 107, 107, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

body[data-bt-skin="wholesome_pup"] .tier-card .tier-name {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--bt-text);
}

body[data-bt-skin="wholesome_pup"] .btn-primary,
body[data-bt-skin="wholesome_pup"] .upload-btn {
    background: var(--bt-sea) !important;
    border: 2px solid #2d5555 !important;
    border-radius: 10px !important;
}

body[data-bt-skin="wholesome_pup"] .btn-success.analyze-btn {
    background: var(--bt-terracotta) !important;
    border: 2px solid #8b3a20 !important;
    border-radius: 10px !important;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
}

body[data-bt-skin="wholesome_pup"] .clapback-welfare-note {
    background: rgba(74, 93, 58, 0.08);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    color: var(--bt-muted);
    font-size: 0.78rem;
}

body[data-bt-skin="wholesome_pup"] .auth-bar {
    color: var(--bt-muted);
}

body[data-bt-skin="wholesome_pup"] #authLoginBtn {
    border-color: var(--bt-kelpie) !important;
    color: var(--bt-kelpie) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SKIN 2 — JUDGMENTAL BASTARD · Fremantle markets · rust & jarrah
   ═══════════════════════════════════════════════════════════════════ */

body[data-bt-skin="judgmental_bastard"] {
    --bt-bg: #f2ece3;
    --bt-jarrah: #3d3028;
    --bt-card: #fffdf9;
    --bt-rust: #c026d3;
    --bt-iron: #c4b8a8;
    --bt-brass: #00b4d8;
    --bt-cream: #2d2420;
    --bt-muted: #6b5c52;
    background:
        linear-gradient(90deg, transparent 58%, rgba(0, 180, 216, 0.32) 58%, rgba(0, 180, 216, 0.48) 100%),
        radial-gradient(circle at 12% 18%, rgba(192, 38, 211, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(251, 191, 36, 0.16) 0%, transparent 35%),
        #f2ece3 !important;
    color: var(--bt-cream);
    font-family: 'Source Sans 3', sans-serif;
}

body[data-bt-skin="judgmental_bastard"] .clapback-tier-banner {
    background: linear-gradient(110deg, #fffdf9 0%, #fff0fc 45%, #e0f7ff 100%);
    color: var(--bt-cream);
    border: 3px solid var(--bt-rust);
    border-radius: 4px;
    box-shadow: 6px 6px 0 rgba(192, 38, 211, 0.25);
    font-family: 'Bitter', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body[data-bt-skin="judgmental_bastard"] .tier-banner-eyebrow {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

body[data-bt-skin="judgmental_bastard"] .tier-banner-label {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

body[data-bt-skin="judgmental_bastard"] .clapback-vibe-tag {
    background: rgba(192, 38, 211, 0.08);
    border-left: 4px solid var(--bt-rust);
    color: var(--bt-jarrah);
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-style: normal;
    text-align: left;
}

body[data-bt-skin="judgmental_bastard"] .header-section,
body[data-bt-skin="judgmental_bastard"] .navigation-section,
body[data-bt-skin="judgmental_bastard"] .upload-area,
body[data-bt-skin="judgmental_bastard"] .file-preview,
body[data-bt-skin="judgmental_bastard"] .upload-form-container {
    background: var(--bt-card) !important;
    border: 2px solid var(--bt-brass) !important;
    border-radius: 3px !important;
    box-shadow: 6px 6px 0 rgba(192, 38, 211, 0.15) !important;
}

body[data-bt-skin="judgmental_bastard"] .upload-area {
    border-top: 4px solid var(--bt-rust) !important;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        ),
        var(--bt-card) !important;
}

body[data-bt-skin="judgmental_bastard"] .brand-title-inline {
    font-family: 'Bitter', Georgia, serif !important;
    font-weight: 900 !important;
    color: var(--bt-jarrah) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.35rem !important;
}

body[data-bt-skin="judgmental_bastard"] .brand-subtitle {
    font-family: 'Bitter', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.78rem !important;
    color: var(--bt-jarrah) !important;
}

body[data-bt-skin="judgmental_bastard"] .upload-description,
body[data-bt-skin="judgmental_bastard"] .upload-formats,
body[data-bt-skin="judgmental_bastard"] .text-muted {
    color: var(--bt-muted) !important;
}

body[data-bt-skin="judgmental_bastard"] .upload-title {
    font-family: 'Bitter', serif !important;
    font-weight: 900 !important;
    color: var(--bt-cream) !important;
    text-transform: uppercase;
    font-size: 1.2rem !important;
    letter-spacing: 0.02em;
}

body[data-bt-skin="judgmental_bastard"] .upload-icon {
    color: var(--bt-rust) !important;
}

body[data-bt-skin="judgmental_bastard"] .mode-toggle .mode-btn {
    border: 2px solid var(--bt-iron);
    border-radius: 2px;
    /* --bt-cream is a dark ink in this skin; use the light taupe so the inactive
       button label stays legible on the dark jarrah fill. */
    color: var(--bt-iron);
    background: var(--bt-jarrah);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body[data-bt-skin="judgmental_bastard"] .mode-toggle .mode-btn.active {
    background: var(--bt-rust);
    border-color: var(--bt-brass);
    color: #fff;
}

body[data-bt-skin="judgmental_bastard"] .tier-card {
    background: #fffdf9;
    border: 2px solid var(--bt-brass);
    border-radius: 4px;
    box-shadow: 5px 5px 0 rgba(0, 180, 216, 0.2);
}

body[data-bt-skin="judgmental_bastard"] .tier-card.selected {
    border-color: var(--bt-rust);
    transform: rotate(-0.6deg);
    box-shadow: 6px 6px 0 rgba(192, 38, 211, 0.28), inset 0 0 0 1px rgba(192, 38, 211, 0.15);
}

body[data-bt-skin="judgmental_bastard"] .tier-card.tier-locked {
    opacity: 0.45;
}

body[data-bt-skin="judgmental_bastard"] .tier-card .tier-badge {
    color: var(--bt-brass) !important;
    font-weight: 800;
    letter-spacing: 0.1em;
}

body[data-bt-skin="judgmental_bastard"] .tier-card .tier-name {
    font-family: 'Bitter', serif;
    font-weight: 900;
    color: var(--bt-jarrah);
}

body[data-bt-skin="judgmental_bastard"] .tier-card .tier-desc {
    color: var(--bt-muted);
}

body[data-bt-skin="judgmental_bastard"] .btn-primary,
body[data-bt-skin="judgmental_bastard"] .upload-btn {
    background: var(--bt-rust) !important;
    border: 2px solid #6b2e18 !important;
    border-radius: 2px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-bt-skin="judgmental_bastard"] .btn-success.analyze-btn {
    background: #6b2e18 !important;
    border: 2px solid var(--bt-brass) !important;
    border-radius: 2px !important;
    font-weight: 800;
    text-transform: uppercase;
}

body[data-bt-skin="judgmental_bastard"] .icon-btn {
    border-radius: 2px !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* Keep the menu button square across all Bitesback skins (was rounded in
   Wholesome Pup and Sick Puppy — now matches Judgmental Bastard). */
body[data-bt-skin="wholesome_pup"] .icon-btn,
body[data-bt-skin="sick_puppy"] .icon-btn {
    border-radius: 2px !important;
}

body[data-bt-skin="judgmental_bastard"] .clapback-welfare-note {
    border-left: 4px solid var(--bt-brass);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.6rem 0.9rem;
    color: var(--bt-muted);
    font-size: 0.78rem;
    text-align: left;
}

body[data-bt-skin="judgmental_bastard"] .auth-bar,
body[data-bt-skin="judgmental_bastard"] #authBarLabel {
    color: var(--bt-muted) !important;
}

body[data-bt-skin="judgmental_bastard"] .modal-content {
    background: var(--bt-card) !important;
    color: var(--bt-cream) !important;
    border: 2px solid var(--bt-iron) !important;
    border-radius: 2px !important;
    box-shadow: 8px 8px 0 #000 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SKIN 3 — YOU SICK PUPPY · Mud glory · zero bath energy
   ═══════════════════════════════════════════════════════════════════ */

body[data-bt-skin="sick_puppy"] {
    --bt-void: #050505;
    --bt-mud: #0f0f0f;
    --bt-card: #121212;
    --bt-orange: #ff2d95;
    --bt-acid: #b8ff2e;
    --bt-blood: #c026d3;
    --bt-slime: #7b2ff7;
    --bt-cream: #f5f0e8;
    --bt-muted: #a89a90;
    background:
        radial-gradient(circle at 90% 12%, rgba(255, 45, 149, 0.42) 0%, transparent 40%),
        radial-gradient(circle at 6% 80%, rgba(123, 47, 247, 0.35) 0%, transparent 38%),
        radial-gradient(circle at 55% 45%, rgba(184, 255, 46, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 72% 88%, rgba(192, 38, 211, 0.22) 0%, transparent 32%),
        var(--bt-void) !important;
    color: var(--bt-cream);
}

body[data-bt-skin="sick_puppy"] .clapback-tier-banner {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a18 45%, #0a1210 100%);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 2px solid var(--bt-acid);
    box-shadow: 0 0 40px rgba(255, 45, 149, 0.4), 0 0 24px rgba(184, 255, 46, 0.15);
}

body[data-bt-skin="sick_puppy"] .tier-banner-label {
    font-size: 1.5rem;
    text-shadow: 3px 3px 0 #000;
}

body[data-bt-skin="sick_puppy"] .tier-banner-eyebrow {
    font-family: 'Special Elite', monospace;
    letter-spacing: 0.15em;
    color: var(--bt-acid);
}

body[data-bt-skin="sick_puppy"] .clapback-vibe-tag {
    font-family: 'Special Elite', monospace;
    color: var(--bt-acid);
    border: 1px dashed var(--bt-orange);
    background: rgba(255, 45, 149, 0.08);
    text-align: center;
}

body[data-bt-skin="sick_puppy"] .header-section,
body[data-bt-skin="sick_puppy"] .navigation-section,
body[data-bt-skin="sick_puppy"] .upload-area,
body[data-bt-skin="sick_puppy"] .file-preview,
body[data-bt-skin="sick_puppy"] .upload-form-container {
    background: var(--bt-card) !important;
    border: 2px solid #3d3428 !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    box-shadow:
        0 0 0 1px rgba(232, 93, 4, 0.2),
        8px 8px 0 rgba(0, 0, 0, 0.7) !important;
}

body[data-bt-skin="sick_puppy"] .upload-area {
    border-color: var(--bt-orange) !important;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            rgba(232, 93, 4, 0.03) 12px,
            rgba(232, 93, 4, 0.03) 24px
        ),
        var(--bt-card) !important;
}

body[data-bt-skin="sick_puppy"] .brand-title-inline {
    font-family: 'Oswald', sans-serif !important;
    color: var(--bt-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: 2px 2px 0 #000;
    font-size: 1.35rem !important;
}

body[data-bt-skin="sick_puppy"] .brand-subtitle {
    font-family: 'Special Elite', monospace !important;
    color: var(--bt-muted) !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-bt-skin="sick_puppy"] .upload-title {
    font-family: 'Oswald', sans-serif !important;
    color: var(--bt-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700 !important;
}

body[data-bt-skin="sick_puppy"] .upload-description {
    font-family: 'Special Elite', monospace !important;
    color: var(--bt-muted) !important;
}

body[data-bt-skin="sick_puppy"] .upload-icon {
    color: var(--bt-blood) !important;
    filter: drop-shadow(0 0 8px rgba(232, 93, 4, 0.4));
}

body[data-bt-skin="sick_puppy"] .mode-toggle .mode-btn {
    border: 2px solid var(--bt-blood);
    background: var(--bt-mud);
    color: var(--bt-cream);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}

body[data-bt-skin="sick_puppy"] .mode-toggle .mode-btn.active {
    background: linear-gradient(135deg, var(--bt-blood), var(--bt-orange));
    border-color: var(--bt-acid);
    color: #fff;
}

body[data-bt-skin="sick_puppy"] .tier-card {
    background: #100e0c;
    border: 2px solid #3d3428;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

body[data-bt-skin="sick_puppy"] .tier-card.selected {
    border-color: var(--bt-acid);
    box-shadow: 0 0 24px rgba(184, 255, 46, 0.35);
    transform: rotate(-1deg) scale(1.02);
}

body[data-bt-skin="sick_puppy"] .tier-card.tier-locked {
    opacity: 0.4;
    filter: grayscale(0.5);
}

body[data-bt-skin="sick_puppy"] .tier-card .tier-badge {
    color: var(--bt-acid) !important;
    font-family: 'Special Elite', monospace;
    font-size: 0.7rem;
}

body[data-bt-skin="sick_puppy"] .tier-card .tier-name {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bt-cream);
}

body[data-bt-skin="sick_puppy"] .tier-card .tier-desc {
    color: var(--bt-muted);
    font-family: 'Special Elite', monospace;
    font-size: 0.72rem;
}

body[data-bt-skin="sick_puppy"] .btn-primary,
body[data-bt-skin="sick_puppy"] .upload-btn,
body[data-bt-skin="sick_puppy"] .roast-another-btn,
body[data-bt-skin="sick_puppy"] .btn-success.analyze-btn {
    background: #b8ff2e !important;
    /* 2px transparent border keeps the box height equal to the other modes' 2px-bordered buttons */
    border: 2px solid transparent !important;
    border-radius: 0 !important;
    clip-path: none !important;
    color: #0a0908 !important;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body[data-bt-skin="sick_puppy"] .clapback-welfare-note {
    font-family: 'Special Elite', monospace;
    border: 1px dashed var(--bt-orange);
    background: rgba(0, 0, 0, 0.35);
    color: var(--bt-muted);
    padding: 0.65rem;
    font-size: 0.75rem;
}

body[data-bt-skin="sick_puppy"] .modal-content {
    background: var(--bt-card) !important;
    color: var(--bt-cream) !important;
    border: 2px solid var(--bt-orange) !important;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

body[data-bt-skin="sick_puppy"] footer {
    color: var(--bt-muted) !important;
    border-color: #3d3428 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESULT PAGES
   ═══════════════════════════════════════════════════════════════════ */

body.bt-result-page[data-bt-skin="wholesome_pup"] {
    background: linear-gradient(180deg, #c5d4d4, #d9cbb5, #e2d4bc) !important;
}

body.bt-result-page[data-bt-skin="judgmental_bastard"] {
    /* Match the Judgmental upload view (light) so result and upload feel the same. */
    background:
        linear-gradient(90deg, transparent 58%, rgba(0, 180, 216, 0.32) 58%, rgba(0, 180, 216, 0.48) 100%),
        radial-gradient(circle at 12% 18%, rgba(192, 38, 211, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(251, 191, 36, 0.16) 0%, transparent 35%),
        #f2ece3 !important;
    color: var(--bt-cream);
}

/* The hero and "Roast Another" button are dark rust panels — keep their text
   light now that the page text colour is dark for the light background. */
body.bt-result-page[data-bt-skin="judgmental_bastard"] .clapback-result-hero {
    color: #f6ecda !important;
}

/* The roast headline sits on the light roast card, so it must be dark to read. */
body.bt-result-page[data-bt-skin="judgmental_bastard"] .roast-headline {
    color: #3a1533 !important;
}

body.bt-result-page[data-bt-skin="judgmental_bastard"] .roast-another-btn {
    color: #fff !important;
}

body.bt-result-page[data-bt-skin="sick_puppy"] {
    background: #0a0908 !important;
    color: #d4c4b0;
}

body[data-bt-skin="wholesome_pup"] .clapback-result-hero {
    background: linear-gradient(135deg, #3d6b6b, #4a5d3a);
    border-radius: 14px;
    border: 3px solid #a08050;
    font-family: 'Fraunces', serif;
    box-shadow: 0 8px 0 rgba(44, 36, 25, 0.15);
}

body[data-bt-skin="judgmental_bastard"] .clapback-result-hero {
    background: linear-gradient(135deg, #a84828, #352b22);
    border-radius: 2px;
    border: 2px solid #5c4a3a;
    box-shadow: 6px 6px 0 #000;
    font-family: 'Bitter', serif;
    text-transform: uppercase;
}

body[data-bt-skin="sick_puppy"] .clapback-result-hero {
    background: linear-gradient(135deg, #9b2226 0%, #1a1510 70%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    border: 2px solid #e85d04;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 0 40px rgba(232, 93, 4, 0.2);
}

body[data-bt-skin="wholesome_pup"] .clapback-roast-card {
    background: #f7f2e8;
    border-left: 5px solid #4a5d3a;
    border-radius: 12px;
    color: #2c2419;
}

body[data-bt-skin="judgmental_bastard"] .clapback-roast-card {
    background: #352b22;
    color: #e8dcc8;
    border-left: 5px solid #a84828;
    border-radius: 2px;
    box-shadow: 4px 4px 0 #000;
}

body[data-bt-skin="sick_puppy"] .clapback-roast-card {
    background: #14110e;
    color: #d4c4b0;
    border-left: 6px solid #e85d04;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

body[data-bt-skin="sick_puppy"] .roast-closer {
    color: #e9c46a !important;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

body[data-bt-skin="judgmental_bastard"] .roast-closer {
    color: #c9a227 !important;
    font-family: 'Bitter', serif;
    font-weight: 900;
}

body[data-bt-skin="wholesome_pup"] .roast-closer {
    color: #b85c38 !important;
    font-family: 'Fraunces', serif;
}

/* Transition */
body.bt-skin-transitioning .upload-form-container,
body.bt-skin-transitioning #clapbackTierSection {
    animation: btSkinPulse 0.45s ease;
}

@keyframes btSkinPulse {
    0% { opacity: 0.85; filter: blur(1px); }
    100% { opacity: 1; filter: blur(0); }
}

/* Interpret — no overrides */
body[data-bt-skin="interpret"] .clapback-tier-banner,
body[data-bt-skin="interpret"] .clapback-vibe-tag {
    display: none !important;
}

/* Result page action buttons per tier */
body[data-bt-skin="wholesome_pup"] .roast-another-btn {
    background: #4a5d3a !important;
    border-color: #3d4f30 !important;
    font-family: 'Fraunces', serif;
    font-weight: 700;
}

body[data-bt-skin="judgmental_bastard"] .roast-another-btn {
    background: #a84828 !important;
    border: 2px solid #6b2e18 !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
}

body[data-bt-skin="judgmental_bastard"] .back-btn,
body[data-bt-skin="sick_puppy"] .back-btn {
    color: var(--bt-muted, #9a8878) !important;
    border-color: #5c4a3a !important;
}

/* TTS speak bar — tier character */
body[data-bt-skin="wholesome_pup"] .clapback-speak-btn {
    background: var(--bt-sea) !important;
    border: 2px solid #0e8fa3 !important;
    color: #fff !important;
    font-family: 'Fraunces', serif;
}

body[data-bt-skin="judgmental_bastard"] .clapback-speak-btn {
    background: var(--bt-rust) !important;
    border: 2px solid #9d1bb0 !important;
    color: #fff !important;
    font-family: 'Bitter', serif;
    border-radius: 2px !important;
}

body[data-bt-skin="sick_puppy"] .clapback-speak-btn {
    background: linear-gradient(180deg, #e85d04, #9b2226) !important;
    border: 2px solid #e9c46a !important;
    color: #fff8e7 !important;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ═══════════════════════════════════════════════════════════════════
   CLAPBACK — unified header text, square panels, sick puppy header
   ═══════════════════════════════════════════════════════════════════ */

body.clapback-active:not([data-bt-skin="interpret"]) .brand-title-inline,
body.clapback-active:not([data-bt-skin="interpret"]) .brand-subtitle,
body.clapback-active:not([data-bt-skin="interpret"]) #brandTitle,
body.clapback-active:not([data-bt-skin="interpret"]) #brandSubtitle {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    font-style: normal !important;
    text-transform: none !important;
}

body.clapback-active:not([data-bt-skin="interpret"]) .brand-title-inline,
body.clapback-active:not([data-bt-skin="interpret"]) #brandTitle {
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    transform: none !important;
    white-space: normal !important;
}

body.clapback-active:not([data-bt-skin="interpret"]) .brand-subtitle,
body.clapback-active:not([data-bt-skin="interpret"]) #brandSubtitle {
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    transform: none !important;
    max-width: none !important;
}

body.clapback-active:not([data-bt-skin="interpret"]) .header-section,
body.clapback-active:not([data-bt-skin="interpret"]) .navigation-section,
body.clapback-active:not([data-bt-skin="interpret"]) .upload-form-container,
body.clapback-active:not([data-bt-skin="interpret"]) .upload-area,
body.clapback-active:not([data-bt-skin="interpret"]) .file-preview,
body.clapback-active:not([data-bt-skin="interpret"]) .tier-card,
body.clapback-active:not([data-bt-skin="interpret"]) .tier-card-mascot,
body.clapback-active:not([data-bt-skin="interpret"]) #clapbackTierSection,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-welfare-note,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-tier-banner,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-vibe-tag,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-tts-bar,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-roast-card,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-result-hero,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-result-header,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-result-back,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-action-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .roast-another-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .clapback-speak-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .btn-primary,
body.clapback-active:not([data-bt-skin="interpret"]) .upload-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .btn-success.analyze-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .back-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .share-preview-canvas,
body.clapback-active:not([data-bt-skin="interpret"]) .imagine-result img,
body.bt-result-page .clapback-result-header,
body.bt-result-page .clapback-roast-card,
body.bt-result-page .clapback-tts-bar,
body.bt-result-page .clapback-action-btn,
body.bt-result-page .roast-another-btn,
body.bt-result-page .clapback-speak-btn,
body.bt-result-page .clapback-result-back,
body.bt-result-page .share-preview-canvas,
body.bt-result-page .welfare-footer {
    border-radius: 0 !important;
    clip-path: none !important;
}

body[data-bt-skin="sick_puppy"].clapback-active .header-section {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}
/* ════════════════════════════════════════════════════════════════
   Borderless buttons across the Clapback module (selection + result).
   Tier cards keep their selection border; only buttons go borderless.
   ════════════════════════════════════════════════════════════════ */
body.clapback-active:not([data-bt-skin="interpret"]) .btn,
body.clapback-active:not([data-bt-skin="interpret"]) .upload-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .mode-btn,
body.clapback-active:not([data-bt-skin="interpret"]) .analyze-btn,
body.bt-result-page .btn,
body.bt-result-page .clapback-action-btn,
body.bt-result-page .clapback-speak-btn,
body.bt-result-page .roast-another-btn {
    border: none !important;
}

/* ════════════════════════════════════════════════════════════════
   Centre the 18+ age-gate modal. The global mobile `.modal-dialog`
   override in style.css (margin:0.5rem; width:calc(100vw-1rem)) removes
   Bootstrap's horizontal centering on desktop, pinning it to the left.
   ════════════════════════════════════════════════════════════════ */
#ageGateModal .modal-dialog {
    margin: 1.75rem auto !important;
    width: auto !important;
    max-width: 500px !important;
}

@media (max-width: 575.98px) {
    #ageGateModal .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: calc(100% - 1rem) !important;
    }
}

/* Age-gate modal text must follow the modal CARD's colour, not the global
   dark-theme text colour. On the light Judgmental card the dark-theme rules
   were turning the title/body/labels light (invisible on light). */
#ageGateModal .modal-content {
    color: #2d2420;   /* sensible default; sick_puppy skin overrides to light-on-dark */
}
#ageGateModal .modal-title,
#ageGateModal .modal-body,
#ageGateModal .modal-body p,
#ageGateModal .modal-body strong,
#ageGateModal .modal-body label,
#ageGateModal .modal-body .form-label,
#ageGateModal .modal-body .form-check-label {
    color: inherit !important;
}