/* ═══ Sanctuary: Blood & 24 Carat ═══════════════════════════
   Visual port of mockup-24-gilded.html for the live Sanctuary DOM.

   Two-tier tokens: this :root overrides PRIMITIVES only (--color-*).
   base.css defines the SEMANTIC aliases (--bg, --pink, ...) that
   consume them, so component rules never need to change when the
   palette is retuned. See base.css for the full @layer contract.

   Palette:
     bg       #0a0102
     pink     #a00000   (dark red)
     pink-lt  #ffd700   (24-carat gold)
     black    #1a0204
     white    #fff8f0
     side     #c09078

   Fonts: Marcellus display, Source Sans 3 body (self-hosted, CSP-safe). */

@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sanctuary/marcellus-400-latin.woff2) format('woff2'),url(fonts/sanctuary/marcellus-400-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/sanctuary/sourcesans3-300-latin.woff2) format('woff2'),url(fonts/sanctuary/sourcesans3-300-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sanctuary/sourcesans3-400-latin.woff2) format('woff2'),url(fonts/sanctuary/sourcesans3-400-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/sanctuary/sourcesans3-500-latin.woff2) format('woff2'),url(fonts/sanctuary/sourcesans3-500-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/sanctuary/sourcesans3-600-latin.woff2) format('woff2'),url(fonts/sanctuary/sourcesans3-600-latin-ext.woff2) format('woff2');}

/* ── Primitive tokens (Sanctuary overrides) ──────────────── */
:root {
    --color-bg:#0a0102;
    --color-bg-rgb:10,1,2;
    --color-accent:#a00000;
    --color-accent-rgb:160,0,0;
    --color-accent-soft:#ffd700;
    --color-accent-soft-rgb:255,215,0;
    --color-surface:#1a0204;
    --color-text:#fff8f0;
    --color-muted:#c09078;
    --color-focus:#ffd700;
    --color-track:#260404;
    --color-success:#a6e3a1;
}

/* ── Component overrides (Sanctuary-specific) ──────────────
   Wrapped in @layer theme so they beat @layer base only when
   intentionally declared here. No needed: the cascade
   layer order (base, theme) declared in base.css handles priority. */
@layer theme {

/* ── Fonts ───────────────────────────────────────────────── */
html,body,#app,#app-inner,button,input,textarea,select{
    font-family:'Atkinson Hyperlegible',sans-serif;
}
h1,.top-bar h1,.auth-header h1,.settings-header,.modal-header,.users-header{font-family:'Marcellus',serif;}

/* ── Global shell ────────────────────────────────────────── */
html,body{
    min-height:100vh;
    background:
        radial-gradient(ellipse 160% 110% at 50% 0%, rgba(190,0,0,.62), transparent 55%),
        radial-gradient(ellipse 100% 80% at 12% 100%, rgba(210,0,0,.48), transparent 50%),
        radial-gradient(ellipse 100% 80% at 88% 100%, rgba(170,0,0,.45), transparent 50%),
        linear-gradient(180deg, #0c0102 0%, #1a0204 50%, #0c0102 100%);
    color:var(--white);
}
body{background-color:transparent;color:var(--white);}
#app{
    background:rgba(80,0,0,.65);
    border:1px solid rgba(255,215,0,.35);
    border-radius:14px;
    padding:3px;
    box-shadow:0 30px 100px rgba(0,0,0,.65), 0 0 30px rgba(255,215,0,.08), inset 0 0 0 1px rgba(255,215,0,.1);
    backdrop-filter:blur(18px) saturate(125%);
    overflow:hidden;
}
#app-inner{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,215,0,.18);
    border-radius:12px;
    box-shadow:0 14px 45px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar-track{background-color:var(--track);}
::-webkit-scrollbar-thumb{background-color:var(--pink-light);}

/* ── Bars / headers ──────────────────────────────────────── */
.top-bar,.auth-header,.settings-header,.modal-header,.users-header{
    background:linear-gradient(90deg, #2c0306, #500009, #2c0306);
    color:var(--pink-light);
    border-color:rgba(255,215,0,.35);
    text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 12px rgba(255,215,0,.25);
    letter-spacing:2.5px;
}
.top-bar h1,.auth-header h1{
    color:var(--pink-light);
    background:linear-gradient(90deg, #ffea80, #ffd700, #fff2aa, #ffd700, #ffea80);
    background-size:250% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:gold-sweep 5s linear infinite, altar-gold 3s ease-in-out infinite alternate;
}
@keyframes gold-sweep{to{background-position:250% center;}}
@keyframes altar-gold{
    from{text-shadow:0 0 12px rgba(255,215,0,.35),0 0 30px rgba(190,0,0,.34);}
    to{text-shadow:0 0 26px rgba(255,215,0,.6),0 0 55px rgba(220,0,0,.5);}
}

/* ── Unified button base ───────────────────────────────────
   All interactive pills (primary, secondary, small, icon, tab,
   toggle, modal buttons) share the same footprint, radius,
   and border weight. Primary is filled; secondary is ghost. */
.btn-primary,.btn-secondary,.btn-small,.btn-icon,.tab,.toggle-btn,
.modal-buttons .btn-small,.modal-buttons .btn-primary,
.modal-buttons .btn-secondary,.confirm-ok-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    border-radius:10px;
    padding:8px 16px;
    font-family:'Atkinson Hyperlegible',sans-serif;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.5px;
    line-height:1.2;
    text-transform:none;
    border:1px solid rgba(255,215,0,.55);
    cursor:pointer;
    transition:.2s;
}

/* Primary variant */
.btn-primary{
    background:linear-gradient(180deg, #d40000, #600000);
    color:var(--pink-light);
    box-shadow:0 0 20px rgba(255,215,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
    text-shadow:0 0 4px rgba(255,215,0,.25);
}
.btn-primary:hover{
    background:linear-gradient(180deg, #ff0000, #800000);
    border-color:rgba(255,223,80,.85);
    color:#fff8d4;
    box-shadow:0 0 32px rgba(255,215,0,.28);
}
.btn-primary:active{transform:scale(.98);}
#auth-screen .btn-primary{font-size:.78em;padding:10px 16px;min-height:34px;}

/* Secondary / ghost variant */
.btn-secondary,.btn-small,.btn-icon{
    background:transparent;
    color:#e0b890;
    border-color:rgba(255,215,0,.35);
}
.btn-secondary:hover,.btn-small:hover,.btn-icon:hover{
    background:rgba(255,215,0,.1);
    border-color:rgba(255,215,0,.65);
    color:var(--pink-light);
    text-shadow:0 0 6px rgba(255,215,0,.3);
}
.btn-icon{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0;
    color:var(--white);
    border-color:rgba(255,255,255,.55);
}
.btn-icon:hover{border-color:var(--pink-light);color:var(--pink-light);}

/* Modal buttons always equal height + balanced padding */
.modal-buttons{display:flex;gap:8px;justify-content:flex-end;align-items:stretch;margin-top:4px;padding:0 14px 14px;}
.modal-buttons .btn-small,.modal-buttons .btn-primary,.modal-buttons .btn-secondary,.confirm-ok-btn{
    flex:1 0 auto;
    min-height:42px;
    height:42px;
    padding:8px 16px;
    line-height:1;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

/* Documents buttons in Accessibility modal */
#settings-overlay .setting-controls .font-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    height:42px;
    padding:8px 16px;
    font-family:'Atkinson Hyperlegible',sans-serif;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.5px;
    line-height:1;
    text-transform:none;
    border-radius:10px;
    border:1px solid rgba(255,215,0,.35);
    background:transparent;
    color:#e0b890;
    cursor:pointer;
    transition:.2s;
    flex:1 0 auto;
    box-sizing:border-box;
}
#settings-overlay .setting-controls .font-btn:hover{
    background:rgba(255,215,0,.1);
    border-color:rgba(255,215,0,.65);
    color:var(--pink-light);
    text-shadow:0 0 6px rgba(255,215,0,.3);
}
#settings-overlay .setting-controls .font-btn.active{
    background:rgba(255,215,0,.22);
    color:var(--white);
    border:1px solid rgba(255,215,0,.75);
}

/* Tabs share button footprint */
.tabs{
    border:1px solid rgba(255,215,0,.22);
    border-radius:10px;overflow:hidden;gap:2px;padding:2px;
    background:rgba(255,215,0,.08);
}
.tab{
    flex:1;
    background:var(--black);
    color:#e0b890;
    border:none;
    border-radius:8px;
}
.tab.active{
    background:rgba(255,215,0,.22);
    color:var(--white);
    border:1px solid rgba(255,215,0,.75);
}

/* Toggle buttons */
.toggle-btn{
    flex:1;
    background:transparent;
    color:#e0b890;
    border-color:rgba(255,215,0,.35);
}
.toggle-btn:hover{background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.55);color:var(--pink-light);}
.toggle-btn.active{
    background:rgba(150,0,0,.45);
    color:var(--white);
    border-color:rgba(230,0,0,.9);
}
.toggle-btn.active::before{content:'✦ ';}

/* ── Inputs / textarea ───────────────────────────────────── */
input,textarea,.lobby-search,.users-search,.auth-form input,.create-room input,.create-subroom input,.setting-row input,.modal-body input,.invites-create-row input,.invite-note-input,.prompt-input{
    background:rgba(20,2,4,.65);
    color:var(--pink-light);
    border:1px solid rgba(255,215,0,.22);
    border-radius:10px;
    font-weight:400;
    font-family:'Atkinson Hyperlegible',sans-serif;
    box-shadow:inset 0 2px 12px rgba(0,0,0,.4);
}
input::placeholder,textarea::placeholder{color:rgba(224,184,144,.45);}
input:focus,textarea:focus{
    border-color:rgba(255,215,0,.65);
    box-shadow:0 0 24px rgba(255,215,0,.2), inset 0 2px 12px rgba(0,0,0,.4);
    outline:none;
}

/* ── Auth box ───────────────────────────────────────────── */
.auth-box{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,215,0,.18);
    border-radius:12px;
    box-shadow:0 14px 45px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    overflow:hidden;
}
.auth-header{padding:18px 14px;}
.auth-header p{font-size:.72rem;opacity:.85;}
.auth-header .auth-sub{font-size:.65rem;opacity:.65;font-style:italic;}
.auth-body{padding:18px 16px;}

/* ── Lobby ─────────────────────────────────────────────── */
.lobby-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.room-item{
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,215,0,.12);
    border-radius:12px;
    position:relative;overflow:hidden;
    padding-left:16px;
}
.room-item::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(180deg, transparent, rgba(255,215,0,.8), rgba(220,0,0,.72), rgba(255,215,0,.8), transparent);
}
.room-item:hover{background:rgba(255,255,255,.05);box-shadow:0 0 26px rgba(255,215,0,.14);border-color:rgba(255,215,0,.45);}
.room-item.dm-room-item{background:rgba(255,255,255,.03);}
.room-name{font-family:'Marcellus',serif;color:var(--white);font-weight:600;letter-spacing:.5px;text-transform:capitalize;}
.dm-icon-prefix{color:var(--pink-light);}
.room-topic,.room-meta{color:#e0b890;letter-spacing:.5px;}
.unread-count{background:var(--pink-light);color:#0f0204;font-weight:800;}

.subroom-create-btn{
    background:transparent;
    color:#e0b890;
    border:1px solid rgba(255,215,0,.35);
    border-radius:10px;
    padding:8px 16px;
    min-height:36px;
    cursor:pointer;
    font-family:'Atkinson Hyperlegible',sans-serif;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.5px;
    line-height:1.2;
    transition:.2s;
    text-align:center;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.subroom-create-btn:hover{
    background:rgba(255,215,0,.1);
    border-color:rgba(255,215,0,.65);
    color:var(--pink-light);
    text-shadow:0 0 6px rgba(255,215,0,.3);
}

/* ── Topic / DM meta bars ────────────────────────────────── */
.topic-bar,.dm-meta-bar{
    background:var(--black);
    border-bottom:1px solid rgba(255,215,0,.12);
    color:#c09078;
}
.dm-call-bar{border-bottom-color:var(--pink-light);}
.dm-call-start-btn{color:var(--pink-light);border-color:var(--pink-light);}
.dm-call-accept-btn{color:#a6e3a1;border-color:#a6e3a1;}
.dm-call-reject-btn,.dm-call-end-btn{color:var(--pink-light);border-color:var(--pink-light);}

/* ── Messages ────────────────────────────────────────────── */
.messages{
    background:rgba(0,0,0,.25);
    border-top:1px solid rgba(255,215,0,.12);
    border-bottom:1px solid rgba(255,215,0,.12);
}
.msg-time{color:#c09078;}
.msg-user{color:var(--pink-light);font-weight:800;}
.msg-user.admin{color:#ffe8d8;}
.msg-user.admin::after{content:' ★';color:var(--pink-light);font-size:.75em;}
.msg-content{color:var(--white);}
.action-msg,.action-msg em{color:var(--pink-light);font-style:italic;}
.system-msg{color:#c09078;font-style:italic;}
.typing-indicator{color:#c09078;font-style:italic;}

/* ── Input bar ───────────────────────────────────────────── */
.input-bar{
    background:rgba(22,3,5,.55);
    border-top:1px solid rgba(255,215,0,.14);
    border-radius:0 0 12px 12px;
    padding:12px 14px;
}
#message-input{
    background:rgba(20,2,4,.65);
    color:var(--pink-light);
    border:1px solid rgba(255,215,0,.22);
    border-radius:10px;
    box-shadow:inset 0 2px 12px rgba(0,0,0,.4);
    overflow:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
#message-input::-webkit-scrollbar{
    display:none;
}
#message-input:hover,
#message-input:focus{
    overflow-y:auto;
    scrollbar-width:auto;
    -ms-overflow-style:auto;
}
#message-input:hover::-webkit-scrollbar,
#message-input:focus::-webkit-scrollbar{
    display:block;
}
#message-input::placeholder{color:rgba(224,184,144,.45);}
#message-input:focus{
    border-color:rgba(255,215,0,.65);
    box-shadow:0 0 24px rgba(255,215,0,.2), inset 0 2px 12px rgba(0,0,0,.4);
}

/* ── Users sidebar / modal / settings ────────────────────── */
.users-sidebar{
    background:rgba(18,2,4,.97);
    border-left:1px solid rgba(255,215,0,.25);
}
.backdrop,.settings-overlay{background:rgba(12,2,3,.7);}
.settings-box,.modal-box{
    background:rgba(18,2,4,.97);
    border:1px solid rgba(255,215,0,.25);
    border-radius:14px;
    box-shadow:0 30px 85px rgba(0,0,0,.55), 0 0 55px rgba(0,0,0,.45);
}
#user-list li{color:var(--pink-light);}
#user-list li.you{color:var(--white);}
#user-list li.admin-user::before,#user-list li.master-user::before{color:var(--pink-light);}

/* ── Badges / stars / status ─────────────────────────────── */
.user-badge{
    background:rgba(255,215,0,.1);
    color:var(--pink-light);
    border:1px solid rgba(255,215,0,.25);
    border-radius:10px;
    font-weight:600;
}
.user-badge:hover{filter:brightness(1.15);}
.badge-star{filter:drop-shadow(0 0 6px rgba(255,215,0,.8));}
.master-star,.admin-star{color:var(--pink-light);}
.master-tag{background:rgba(255,215,0,.25);color:#0f0204;border-color:rgba(255,215,0,.45);font-weight:800;}
.admin-tag{background:rgba(255,215,0,.1);color:#e0b890;border-color:rgba(255,215,0,.25);}
.conn-dot.connected{background:var(--pink-light);box-shadow:0 0 18px rgba(255,215,0,.7);animation:gold-pulse 2.5s ease-in-out infinite;}
@keyframes gold-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.65;transform:scale(1.25);}}
.dm-badge{color:var(--pink-light);animation:pulse 3s infinite;}

/* ── Admin panels ────────────────────────────────────────── */
.create-room,.create-subroom,.admin-panel{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,215,0,.18);
    border-radius:12px;
    box-shadow:0 14px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.section-label{color:var(--side);border-bottom:1px dotted rgba(255,215,0,.35);}

/* ── Stream page cards ───────────────────────────────────── */
.video-card,.yt-card{
    border:1px solid rgba(255,215,0,.3);
    background:rgba(255,215,0,.04);
}
.video-card-play,.yt-card-play-icon{color:var(--pink-light);border-color:var(--pink-light);}
.video-card-play:hover{background:var(--pink-light);color:#0f0204;}
.inline-gif{border:1px solid rgba(255,215,0,.3);}

/* ── Toasts / banners ────────────────────────────────────── */
.update-toast{border-color:var(--pink-light);background:var(--black);}
.update-toast button{background:var(--pink-light);color:#0f0204;}
.toast.error{border-color:var(--pink-light);color:var(--pink-light);}
.reconnect-banner{background:rgba(255,215,0,.9);color:#0f0204;}
.reconnect-banner .btn-small{background:var(--black);color:var(--pink-light);border-color:var(--pink-light);}

/* ── Stream admin buttons ────────────────────────────────── */
#stream-admin{
    background:rgba(255,215,0,.04);
    border-top:1px solid rgba(255,215,0,.25);
}
#stream-go-live-btn,
#stream-end-btn,
#stream-mute-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    height:36px;
    padding:8px 16px;
    font-family:'Atkinson Hyperlegible',sans-serif;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.5px;
    line-height:1;
    text-transform:none;
    border-radius:10px;
    border:1px solid rgba(255,215,0,.55);
    cursor:pointer;
    transition:.2s;
    box-sizing:border-box;
}
#stream-go-live-btn{
    background:linear-gradient(180deg, #d40000, #600000);
    color:var(--pink-light);
    box-shadow:0 0 20px rgba(255,215,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
    text-shadow:0 0 4px rgba(255,215,0,.25);
}
#stream-go-live-btn:hover{
    background:linear-gradient(180deg, #ff0000, #800000);
    border-color:rgba(255,223,80,.85);
    color:#fff8d4;
    box-shadow:0 0 32px rgba(255,215,0,.28);
}
#stream-go-live-btn.live{
    background:transparent;
    color:#e0b890;
    border-color:rgba(255,215,0,.35);
}
#stream-end-btn,
#stream-mute-btn{
    background:transparent;
    color:#e0b890;
}
#stream-end-btn:hover,
#stream-mute-btn:hover{
    background:rgba(255,215,0,.1);
    border-color:rgba(255,215,0,.65);
    color:var(--pink-light);
    text-shadow:0 0 6px rgba(255,215,0,.3);
}
#stream-mute-btn.muted{
    background:rgba(255,215,0,.22);
    color:var(--white);
    border-color:rgba(255,215,0,.75);
}

/* ── Scroll-to-bottom ───────────────────────────────────── */
.scroll-bottom-btn{
    background:var(--black);
    color:var(--pink-light);
    border:1px solid var(--pink-light);
    border-radius:18px;
}
.scroll-bottom-btn:hover{border-color:var(--white);color:var(--white);}
.scroll-bottom-btn #scroll-bottom-count{background:var(--pink-light);color:#0f0204;}

/* ── Links / loading older ────────────────────────────────── */
.load-older-row:hover{color:var(--pink-light);text-shadow:0 0 6px rgba(255,215,0,.4);}
.inline-link,.msg-link{color:var(--pink-light);}
.inline-link:hover,.msg-link:hover{color:var(--white);text-shadow:0 0 4px rgba(255,215,0,.4);}

/* ── Focus fallback ──────────────────────────────────────── */
*:focus{outline:none;}

} /* end @layer theme */