html {
    background-color: #141018;
}

body {
    color: #f2eadb;
  background-color: #141018;
  background-image: none;
}

.frame {
    border-color: #d7b35d;
    background: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 3px rgba(255,214,102,0.12);
}

header {
    border-bottom-color: rgba(215,179,93,0.7);
}

header::before {
  background: linear-gradient(
    180deg,
    rgba(215,179,93,0.25),
    rgba(0,0,0,0.25)
  );
}


#last-updated {
    color: rgba(245,241,230,0.6);
}

.logo {
    border-color: rgba(245,241,230,0.45);
    background: rgba(255,255,255,0.08);
}

.logo img {
    transition: opacity 1.5s ease;
}


h1 {
    color: #ffd666;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

.tagline {
    color: rgba(245,241,230,0.85);
}

.marquee {
    border-color: rgba(255,214,102,0.35);
    background: rgba(0,0,0,0.35);
}

nav {
    border-top-color: rgba(255,255,255,0.12);
    border-bottom-color: rgba(215,179,93,0.45);
    background: rgba(255,214,102,0.08);
}

nav a {
    color: #f5f1e6;
    border-color: rgba(245,241,230,0.25);
    background: rgba(0,0,0,0.25);
}

nav a:hover {
    background: rgba(255, 214, 102, 0.18);
    border-color: rgba(255, 214, 102, 0.75);
}

footer {
    border-top-color: rgba(215,179,93,0.45);
    background: rgba(0,0,0,0.25);
}

a {
    color: #b7e4ff;
}

a:hover {
    color: #ffffff;
}






/* TEA TIME AREA */

.tea-body {
    color: #f2eadb;
    background: none;
}

.tea-title {
    color: rgba(245,241,230,0.95);
    text-shadow:
        1px 1px 2px rgba(0,0,0,0.35),
        0 0 2px rgba(255,214,102,0.6);
    background-color: rgba(11, 16, 32, 0.85); /* deep cosmic charcoal */
    border-color: rgba(215,179,93,0.45);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.12),
        inset 0 -1px 1px rgba(0,0,0,0.25),
        0 2px 6px rgba(0,0,0,0.35);
}

/* FEATURED / PREVIOUS / ARCHIVE CARDS WITH COHESIVE THEME */
.featured {
    background: rgba(40,34,60,0.94); /* dusky violet */
    border: 1px solid rgba(215,179,93,0.2);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.35),
        inset 0 0 6px rgba(255,214,102,0.05);
}

.featured:hover {
    box-shadow: 0 8px 12px rgba(0,0,0,0.5),
                inset 0 0 6px rgba(255,214,102,0.05);
}

.previous {
    background: rgba(20,18,32,0.94); /* cosmic charcoal */
    border: 1px solid rgba(215,179,93,0.2);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.35),
        inset 0 0 6px rgba(255,214,102,0.05);
}

.previous:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5),
                inset 0 0 6px rgba(255,214,102,0.05);
}

.teatimearchive {
    background: rgba(40,34,60,0.94); /* dusky violet */
    border: 1px solid rgba(215,179,93,0.2);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.35),
        inset 0 0 6px rgba(255,214,102,0.05);
}

.teatimearchive:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5),
                inset 0 0 6px rgba(255,214,102,0.05);
}

.flower {
    filter:
        drop-shadow(0 0 6px rgba(255,214,102,0.35))
        drop-shadow(0 0 12px rgba(255,214,102,0.18))
        drop-shadow(0 0 6px rgba(160,176,112,0.14));
}

.sign-off {
    color: #9fc3d9;
}

.sign-off .profile-img {
    border-color: #c080c5;
}

.sign-off .name {
    color: #c080c5;
}

.reaction-popup {
    border-color: #ffd666;
    background: rgba(0,0,0,0.25);
}

.reaction-popup .reaction-option {
    border-color: #9fc3d9;
}

.reaction-popup .reaction-option:hover {
    background: rgba(255,214,102,0.15);
}

.reaction-btn {
    border-color: #9fc3d9;
    background: rgba(0,0,0,0.2);
}

.reaction-btn span.count {
    color: #ffd666;
}

#image-overlay {
    background: rgba(0,0,0,0.6);
}

#inflated-image {
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

#close-hint {
    color: rgba(255,255,255,0.65);
    text-shadow: 0 0 3px rgba(255,255,255,0.25);
}

#close-hint:hover {
    text-shadow:
        0 0 6px rgba(255,255,255,0.6),
        0 0 12px rgba(255,214,102,0.35);
}

.image-wrap::before {
    background: rgba(0,0,0,0.14);
}

.presence-sigil {
    border-color: rgba(183,228,255,0.55);
    box-shadow:
        inset 0 0 6px rgba(255,255,255,0.25),
        0 0 10px rgba(183,228,255,0.28);
}

.presence-sigil::before {
    background: rgba(255,255,255,0.65);
    box-shadow:
        0 0 3px rgba(255,255,255,0.45),
        0 0 8px rgba(183,228,255,0.24);
}

.previous.recent .presence-sigil::after {
    border-color: rgba(183,228,255,0.45);
    background: rgba(255,255,255,0.04);
}

.previous.old .presence-sigil {
    border-color: rgba(183,228,255,0.6);
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.2),
        0 0 6px rgba(183,228,255,0.22);
}

.previous.middle .presence-sigil {
    border-color: rgba(183,228,255,0.55);
}

.previous .sign-off .profile-img {
    border-color: #c080c5;
}

.previous .reaction-btn span.count {
    color: #ffd666;
}

.archive-glyph {
    color: rgba(215,179,93,0.9);
}

/* theme transition only (not hover) */
body.theme-transition * {
  transition:
    background-color 3s ease,
    color 3s ease,
    border-color 3s ease,
    box-shadow 3s ease,
    text-shadow 3s ease,
    opacity 3s ease;
}

body.theme-transition .flower {
  transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.6s ease;
}

body.theme-transition .tea-title {
  transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.6s ease,
    background-color 1.5s ease,
    color 1.5s ease,
    border-color 1.5s ease,
    box-shadow 1.5s ease,
    text-shadow 1.5s ease,
    opacity 1.5s ease;
}