/* Social Banner Overlay — base engine styles (themes live in css/themes/) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Archivo+Black&family=JetBrains+Mono:wght@500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Poppins:wght@300;400;600&family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');
@import url('themes/greenhouse.css?v=1');
@import url('themes/slipstream.css?v=1');
@import url('themes/lock-on.css?v=1');
@import url('themes/group-chat.css?v=1');
@import url('themes/on-air.css?v=1');
@import url('themes/true-colours.css?v=1');
@import url('themes/heavyweight.css?v=1');
@import url('themes/root-access.css?v=1');
@import url('themes/sideline.css?v=1');

:root {
    --sb-accent: #22c55e;
    --sb-accent-light: #4ade80;
    --sb-accent-dark: #16a34a;
    --sb-accent-glow: rgba(34, 197, 94, 0.45);
    --sb-text: #ffffff;
    --sb-text-dim: rgba(255, 255, 255, 0.55);
    --sb-radius: 14px;
    --sb-border-width: 1px;
    --sb-border-color: #22c55e;
    --sb-font: 'DM Sans', sans-serif;
    --sb-font-weight: 600;
    --sb-alpha: 0.85;
    --sb-bg-rgb: 10, 16, 12;
    --sb-spacing: 10px;
    --sb-offset-x: 20px;
    --sb-offset-y: 20px;
    --sb-ticker-sec: 30s;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

#banner-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* The scale wrapper: everything inside is sized in em off this font-size */
#banner-scale {
    position: absolute;
    font-family: var(--sb-font, var(--sb-theme-font, 'DM Sans', sans-serif));
    font-weight: var(--sb-font-weight);
}

/* ── 9-position placement ── */
.pos-top-left      #banner-scale { top: var(--sb-offset-y); left: var(--sb-offset-x); }
.pos-top-center    #banner-scale { top: var(--sb-offset-y); left: 50%; transform: translateX(-50%); }
.pos-top-right     #banner-scale { top: var(--sb-offset-y); right: var(--sb-offset-x); }
.pos-center-left   #banner-scale { top: 50%; left: var(--sb-offset-x); transform: translateY(-50%); }
.pos-center        #banner-scale { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pos-center-right  #banner-scale { top: 50%; right: var(--sb-offset-x); transform: translateY(-50%); }
.pos-bottom-left   #banner-scale { bottom: var(--sb-offset-y); left: var(--sb-offset-x); }
.pos-bottom-center #banner-scale { bottom: var(--sb-offset-y); left: 50%; transform: translateX(-50%); }
.pos-bottom-right  #banner-scale { bottom: var(--sb-offset-y); right: var(--sb-offset-x); }

/* ── Stack mode ── */
#banner-container {
    display: flex;
    flex-direction: column;
    gap: var(--sb-spacing);
    max-width: 90vw;
}
.orientation-horizontal #banner-container {
    flex-direction: row;
    flex-wrap: wrap;
}

.pos-top-right #banner-container, .pos-center-right #banner-container, .pos-bottom-right #banner-container {
    align-items: flex-end;
}
.pos-top-center #banner-container, .pos-center #banner-container, .pos-bottom-center #banner-container {
    align-items: center;
}
.pos-top-left #banner-container, .pos-center-left #banner-container, .pos-bottom-left #banner-container {
    align-items: flex-start;
}

/* ── Rotate mode: container holds a single banner ── */
.mode-rotate #banner-container {
    display: block;
}

/* ── Ticker mode: full-width marquee strip (top row positions pin to top) ── */
.mode-ticker #banner-scale {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    top: auto !important;
    bottom: 0 !important;
}
.mode-ticker.pos-top-left #banner-scale,
.mode-ticker.pos-top-center #banner-scale,
.mode-ticker.pos-top-right #banner-scale {
    top: 0 !important;
    bottom: auto !important;
}

.mode-ticker #banner-container {
    display: block;
    max-width: none;
    width: 100vw;
    overflow: hidden;
    padding: var(--sb-spacing) 0;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: sbTickerScroll var(--sb-ticker-sec) linear infinite;
    will-change: transform;
}

.ticker-track .social-banner {
    margin-right: var(--sb-spacing);
    opacity: 1;
}

@keyframes sbTickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Banner item base (themes restyle this) ── */
.social-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.6em 1.05em;
    border-radius: var(--sb-radius);
    border: var(--sb-border-width) solid transparent;
    color: var(--sb-text);
    line-height: 1.15;
    white-space: nowrap;
    opacity: 0;
    box-sizing: border-box;
}
.social-banner.visible { opacity: 1; }

.sb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    line-height: 1;
    color: var(--item-accent, var(--sb-accent));
    flex-shrink: 0;
}

/* SVG brand icons are full-bleed (no optical padding like FA glyphs), so size them down to match */
.sb-icon-img {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
    display: block;
}

.sb-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ta-left .sb-text { text-align: left; align-items: flex-start; }
.ta-center .sb-text { text-align: center; align-items: center; }
.ta-right .sb-text { text-align: right; align-items: flex-end; }

.sb-handle {
    font-size: 1em;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

.sb-platform {
    font-size: 0.58em;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-text-dim);
    margin-top: 0.35em;
}

.no-icon .sb-icon { display: none; }
.no-platform .sb-platform { display: none; }

/* ── Branding logo ── */
#brand-logo {
    position: fixed;
    z-index: 4;
    pointer-events: none;
    object-fit: contain;
}
#brand-logo.logo-top-left { top: var(--sb-offset-y); left: var(--sb-offset-x); }
#brand-logo.logo-top-center { top: var(--sb-offset-y); left: 50%; transform: translateX(-50%); }
#brand-logo.logo-top-right { top: var(--sb-offset-y); right: var(--sb-offset-x); }
#brand-logo.logo-center-left { top: 50%; left: var(--sb-offset-x); transform: translateY(-50%); }
#brand-logo.logo-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#brand-logo.logo-center-right { top: 50%; right: var(--sb-offset-x); transform: translateY(-50%); }
#brand-logo.logo-bottom-left { bottom: var(--sb-offset-y); left: var(--sb-offset-x); }
#brand-logo.logo-bottom-center { bottom: var(--sb-offset-y); left: 50%; transform: translateX(-50%); }
#brand-logo.logo-bottom-right { bottom: var(--sb-offset-y); right: var(--sb-offset-x); }

/* ── Bottom accent bar ── */
#bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    z-index: 3;
    pointer-events: none;
}

/* ── Entrance / exit keyframes ── */
@keyframes sbSlideUpIn {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sbSlideUpOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-32px); }
}
@keyframes sbSlideLeftIn {
    from { opacity: 0; transform: translateX(-48px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes sbSlideLeftOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(48px); }
}
@keyframes sbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sbFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sbScaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes sbScaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.85); }
}
@keyframes sbBounceIn {
    0% { opacity: 0; transform: scale(0.4); }
    55% { opacity: 1; transform: scale(1.08); }
    75% { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sbBounceOut {
    0% { opacity: 1; transform: scale(1); }
    30% { transform: scale(1.06); }
    100% { opacity: 0; transform: scale(0.4); }
}
@keyframes sbFlipIn {
    from { opacity: 0; transform: perspective(600px) rotateX(-80deg); }
    to { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}
@keyframes sbFlipOut {
    from { opacity: 1; transform: perspective(600px) rotateX(0deg); }
    to { opacity: 0; transform: perspective(600px) rotateX(80deg); }
}
@keyframes sbGlitchIn {
    0% { opacity: 0; transform: translate(3px, -2px); filter: hue-rotate(60deg); }
    50% { opacity: 0.85; transform: translate(-2px, 1px); filter: none; }
    100% { opacity: 1; transform: translate(0); }
}
@keyframes sbGlitchOut {
    0% { opacity: 1; transform: translate(0); filter: none; }
    50% { opacity: 0.85; transform: translate(2px, -1px); filter: hue-rotate(60deg); }
    100% { opacity: 0; transform: translate(-3px, 2px); filter: none; }
}