/* ─── Themed Days base banner ─────────────────────────────── */
#td-banner.td-banner{
    position:relative;z-index:9999;
    margin:0;padding:10px 18px;
    font:600 13px/1.4 'Inter','Segoe UI',system-ui,sans-serif;
    letter-spacing:0.01em;
    text-align:center;
    color:#EEF2F8;
    background:linear-gradient(90deg,#1058C0 0%,#388BFD 100%);
    box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
#td-banner.td-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
#td-banner .td-banner-inner{max-width:1100px;margin:0 auto;padding-right:120px;}
#td-banner .td-banner-disable{
    position:absolute;top:50%;right:14px;transform:translateY(-50%);
    background:rgba(0,0,0,0.18);color:#fff;border:1px solid rgba(255,255,255,0.30);
    padding:4px 10px;border-radius:999px;cursor:pointer;
    font:600 11px/1 'Inter',sans-serif;letter-spacing:0.02em;
    transition:background .15s ease,transform .1s ease;
}
#td-banner .td-banner-disable:hover{background:rgba(0,0,0,0.32);}
#td-banner .td-banner-disable:active{transform:translateY(-50%) scale(.97);}
@media (max-width:560px){
    #td-banner.td-banner{font-size:12px;padding:9px 12px;padding-right:96px;}
    #td-banner .td-banner-inner{padding-right:0;}
    #td-banner .td-banner-disable{font-size:10px;padding:3px 8px;right:8px;}
}
@media (prefers-reduced-motion: reduce){
    #td-banner.td-banner{animation:none !important;}
}

/* ─── Re-enable pill (shown when user has disabled the theme) ─── */
#td-reenable.td-reenable{
    position:fixed;bottom:16px;right:16px;z-index:9998;
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:#161B22;color:#9098A6;
    border:1px solid rgba(127,127,127,0.30);
    font:600 12px/1 'Inter',sans-serif;letter-spacing:0.02em;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,0.30);
    transition:background .15s ease, color .15s ease, transform .1s ease;
}
#td-reenable.td-reenable:hover{background:#21262D;color:#EEF2F8;}
#td-reenable.td-reenable:active{transform:scale(.97);}
#td-reenable .td-reenable-dot{
    width:8px;height:8px;border-radius:50%;
    background:linear-gradient(135deg,#e40303 0%,#ff8c00 17%,#ffed00 33%,#008026 50%,#004dff 67%,#750787 100%);
    flex:none;
}
@media (max-width:560px){
    #td-reenable.td-reenable{bottom:10px;right:10px;font-size:11px;padding:6px 12px;}
}

/* Banner — animated rainbow */
#td-banner.td-pride{
    background:linear-gradient(90deg,#e40303 0%,#ff8c00 17%,#ffed00 33%,#008026 50%,#004dff 67%,#750787 84%,#e40303 100%);
    background-size:200% 100%;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.45);
    animation:td-pride-shift 18s linear infinite;
}
@keyframes td-pride-shift{
    0%   {background-position:0% 50%;}
    100% {background-position:200% 50%;}
}
@media (prefers-reduced-motion: reduce){
    #td-banner.td-pride{animation:none;}
}

/* ─── Logo treatment ───────────────────────────────────────── */
/* IPB header markup:
     <a id="elLogo"> <img> <span> <span>Roleplay</span> <span>Project</span> </span> </a>
   The wrapping <span> is the wordmark; the stripe attaches directly to
   its bottom so it sits right under the text — not at the bottom of the
   whole logo box (which is dominated by the 40px frame mark).            */
body:not(.td-disabled-pride) #elLogo > span{
    position:relative;
    padding-bottom:10px;
}
body:not(.td-disabled-pride) #elLogo > span::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,
        #e40303 0%, #e40303 16.66%,
        #ff8c00 16.66%, #ff8c00 33.33%,
        #ffed00 33.33%, #ffed00 50%,
        #008026 50%, #008026 66.66%,
        #004dff 66.66%, #004dff 83.33%,
        #750787 83.33%, #750787 100%);
    border-radius:2px;
}
body:not(.td-disabled-pride) #elLogo > span > span:first-child{
    background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
    background-clip:text;-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent !important;
}

/* Swap the icon for the pride variant. content:url() on an <img> works in
   all modern browsers and respects the user opt-out via the parent selector. */
body:not(.td-disabled-pride) #elLogo > img{
    content: url("https://roleplayproject.net/brand/frame-animated-pride.svg?v=1780512056") !important;
}

/* Banner sizing: override base 13px single-line with a taller, headline-led
   panel. The disable button continues to ride absolute on the right. */
#td-banner.td-pride{
    padding:18px 20px;
    text-align:center;
}
#td-banner.td-pride .td-banner-inner{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    max-width:880px;margin:0 auto;padding-right:140px;
    line-height:1.45;
}
#td-banner.td-pride .td-pride-heading{
    font:700 20px/1.25 'Onest','Inter',sans-serif;
    letter-spacing:-0.01em;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.45);
}
#td-banner.td-pride .td-pride-body{
    font:500 14.5px/1.55 'Inter',system-ui,sans-serif;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
    opacity:0.97;
}
@media (max-width:720px){
    #td-banner.td-pride{padding:14px 14px;padding-right:96px;}
    #td-banner.td-pride .td-banner-inner{padding-right:0;}
    #td-banner.td-pride .td-pride-heading{font-size:17px;}
    #td-banner.td-pride .td-pride-body{font-size:13.5px;}
}
@media (max-width:480px){
    #td-banner.td-pride .td-pride-heading{font-size:15.5px;}
    #td-banner.td-pride .td-pride-body{font-size:12.5px;line-height:1.5;}
}