/* ─── Themed Days base banner (PlexaRP look) ──────────────────
   A graphite bar under the sign-up bar: decorations sit inline with
   the text, each season brings one accent colour (--td-accent) and a
   thin stripe along the bottom edge (--td-stripe). */
#td-banner.td-banner{
    --td-accent:#b9a8ff;
    --td-stripe:#7b5cff;
    position:relative;z-index:25;
    margin:0;padding:10px 18px;
    font:500 14px/1.45 'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
    letter-spacing:-0.005em;
    text-align:center;
    color:#c9c7dd;
    background:#15161e;
    border-bottom:1px solid #262935;
    box-shadow:none;
}
#td-banner.td-banner::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--td-stripe);
    pointer-events:none;
}
#td-banner .td-banner-inner{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    gap:6px 10px;
    max-width:1100px;margin:0 auto;padding:0 150px;
}
#td-banner .td-banner-inner > span,#td-banner .td-banner-inner > strong{position:relative;z-index:1;}
#td-banner .td-key{color:var(--td-accent);font-weight:700;}
#td-banner .td-deco{font-size:17px;line-height:1;flex:none;}
#td-banner a{color:var(--td-accent);text-decoration:underline;text-underline-offset:3px;}
#td-banner .td-banner-disable{
    position:absolute;top:50%;right:14px;transform:translateY(-50%);
    background:transparent;color:#8e8ca8;border:0;
    box-shadow:inset 0 0 0 1px #33364a;
    padding:6px 11px;border-radius:999px;cursor:pointer;
    font:600 10.5px/1 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
    letter-spacing:0.08em;text-transform:uppercase;
    transition:color .15s ease,box-shadow .15s ease;
}
#td-banner .td-banner-disable:hover{color:#ecebff;box-shadow:inset 0 0 0 1px #44475e;}
#td-banner .td-banner-disable:focus-visible{outline:2px solid #8b6eff;outline-offset:2px;}
@media (max-width:760px){
    #td-banner.td-banner{font-size:13px;padding:9px 12px 9px 12px;text-align:left;}
    #td-banner .td-banner-inner{justify-content:flex-start;padding:0 110px 0 0;}
    #td-banner .td-deco,#td-banner .td-banner-inner::before,#td-banner .td-banner-inner::after{display:none !important;}
    #td-banner .td-banner-disable{right:10px;padding:5px 9px;font-size:10px;}
}
@media (max-width:420px){
    #td-banner .td-banner-disable{letter-spacing:0.04em;}
}
@media (prefers-reduced-motion: reduce){
    #td-banner.td-banner{animation:none !important;}
}

/* ─── Re-enable pill (shown when the visitor has hidden the season) ─── */
#td-reenable.td-reenable{
    position:fixed;bottom:16px;left:16px;z-index:9997;
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 14px;border-radius:999px;
    background:#15161e;color:#8e8ca8;border:0;
    box-shadow:0 0 0 1px #33364a,0 12px 32px rgba(4,4,10,0.5);
    font:600 10.5px/1 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
    letter-spacing:0.08em;text-transform:uppercase;
    cursor:pointer;
    transition:color .15s ease,box-shadow .15s ease;
}
#td-reenable.td-reenable:hover{color:#ecebff;box-shadow:0 0 0 1px #44475e,0 12px 32px rgba(4,4,10,0.5);}
#td-reenable .td-reenable-dot{
    width:8px;height:8px;border-radius:50%;flex:none;
    background:var(--td-accent,#7b5cff);
    box-shadow:0 0 0 2.5px #15161e;
}
@media (max-width:979px){
    #td-reenable.td-reenable{bottom:calc(var(--i-mobileFooter--he,0px) + 12px);left:10px;}
}

#td-banner.td-halloween{--td-accent:#ff8a3d;--td-stripe:linear-gradient(90deg,#ff8a3d 0%,#ff8a3d 35%,#7b5cff 100%);}
#td-reenable.td-reenable-halloween{--td-accent:#ff8a3d;}
/* A few bats drift across the top of the page; still for anyone who asks for less motion. */
body:not(.td-disabled-halloween) #td-banner.td-halloween{overflow:hidden;}
body:not(.td-disabled-halloween) #td-banner.td-halloween .td-banner-inner::before,
body:not(.td-disabled-halloween) #td-banner.td-halloween .td-banner-inner::after{
    content:"\1F987";position:absolute;top:50%;font-size:13px;opacity:.35;pointer-events:none;
    animation:td-bat 24s linear infinite;
}
body:not(.td-disabled-halloween) #td-banner.td-halloween .td-banner-inner::after{animation-duration:31s;animation-delay:-14s;font-size:11px;}
@keyframes td-bat{
    0%{left:-4%;transform:translateY(-70%) rotate(-8deg);}
    25%{transform:translateY(-20%) rotate(6deg);}
    50%{transform:translateY(-80%) rotate(-6deg);}
    75%{transform:translateY(-30%) rotate(8deg);}
    100%{left:104%;transform:translateY(-60%) rotate(-8deg);}
}
@media (prefers-reduced-motion: reduce){
    body:not(.td-disabled-halloween) #td-banner.td-halloween .td-banner-inner::before,
    body:not(.td-disabled-halloween) #td-banner.td-halloween .td-banner-inner::after{display:none;}
}