/* Fable: Tarot — a midnight deck of gilded cards: indigo velvet, gold foil
   double frames, and celestial ornaments in every corner. */

body, input, button, textarea, select {
    font-family: 'Palatino Linotype', 'Palatino', Georgia, serif;
    font-size: 11pt;
    color: #e6d8b8;
}

body {
    background-color: #14102a;
    background-image:
        radial-gradient(circle 1px at 15% 25%, rgba(230, 216, 184, .5) 0%, transparent 100%),
        radial-gradient(circle 1px at 70% 60%, rgba(230, 216, 184, .35) 0%, transparent 100%),
        radial-gradient(circle 1px at 40% 80%, rgba(230, 216, 184, .4) 0%, transparent 100%),
        radial-gradient(circle 2px at 85% 15%, rgba(212, 175, 55, .45) 0%, transparent 100%),
        radial-gradient(ellipse at 50% 0%, #221a44 0%, #14102a 70%);
    background-size: 240px 240px, 320px 320px, 280px 280px, 400px 400px, 100% 100%;
}

header {
    background: transparent;
    border-bottom: 1px solid #d4af37;
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, .4);
    letter-spacing: 3px;
    font-variant: small-caps;
    padding: 8px 12px;

    a { color: #d4af37; }
}

.subheader {
    background: transparent;

    .title {
        color: #e6d8b8;
        font-variant: small-caps;
        letter-spacing: 2px;

        a { color: #e6d8b8; }
    }
    .title .thread-views { color: #8f84b8; }
}

.boards h2, .recent-attachments h2, .recent-posts-header h2 {
    color: #d4af37;
    font-variant: small-caps;
    letter-spacing: 2px;
    text-align: center;

    a { color: #d4af37; }
    &::before { content: '☽ '; }
    &::after { content: ' ☾'; }
}

/* Each entry is a card: double gold frame, moon in the corner */
.board, .post, .thread, .thread-warning, .flashed-message, .recent-post {
    background: #1d1738;
    border: 1px solid #d4af37;
    border-radius: 8px;
    box-shadow: inset 0 0 0 3px #1d1738, inset 0 0 0 4px #6a5a8a, 0 4px 14px rgba(0, 0, 0, .5);
    color: #e6d8b8;
    margin-bottom: 12px;
    padding: 12px 16px;
    position: relative;

    &::after {
        content: '✦';
        position: absolute;
        top: 4px;
        right: 9px;
        color: #d4af37;
        font-size: 9pt;
        opacity: .8;
    }
}

.board .name, .thread .name, .recent-post .name {
    color: #d4af37;
    font-variant: small-caps;
    letter-spacing: 1px;
    font-size: 12pt;
}
.board .description { color: #b0a4d4; font-style: italic; }
.thread {
    .author, .reply-count, .view-count { color: #b0a4d4; }
    .time { color: #8f84b8; a { color: #8f84b8; } }
    &:visited .name { color: #9a833a; }
}

a { color: #c9a0dc; text-decoration: none; }
a:visited { color: #9a7ab0; }
a:hover { color: #e6c8ff; text-shadow: 0 0 8px rgba(201, 160, 220, .5); }

.post {
    .author { color: #d4af37; }
    .time a { color: #8f84b8; }
    .ip_hash { background: #14102a; color: #c9a0dc; }
    .text {
        line-height: 1.6;

        .greentext { color: #7ec9a0; font-style: italic; }
        .title { color: #d4af37; font-variant: small-caps; }
    }
    .post-buttons .post-button {
        background: #14102a;
        border: 1px solid #6a5a8a;
        color: #d4af37;
        border-radius: 4px;
    }
}

.posts .post-meta {
    background: rgba(20, 16, 42, .7);
    border-top: 1px solid #6a5a8a;
    border-radius: 0 0 8px 8px;

    a { color: #c9a0dc; }
}

:is(.subheader .right .button, form input[type=submit]) {
    background: linear-gradient(180deg, #d4af37, #a8842a);
    color: #14102a;
    border: 0;
    border-radius: 4px;
    text-shadow: none;
    text-transform: none;
    font-variant: small-caps;
    letter-spacing: 2px;
    font-family: inherit;
    font-size: 11pt;

    &:hover { background: linear-gradient(180deg, #e8c34a, #bc9430); }
}

.form, form { background: #1d1738; border: 1px solid #6a5a8a; border-radius: 8px; }

input[type=text], input[type=password], input[type=number], textarea, select {
    background: #14102a;
    border: 1px solid #6a5a8a;
    color: #e6d8b8;
    font-family: inherit;

    &:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 8px rgba(212, 175, 55, .3); }
}

.pager {
    a, span, span.current {
        background: #1d1738;
        border: 1px solid #6a5a8a;
        color: #d4af37;
        border-radius: 50%;
    }
    span.current { background: #d4af37; color: #14102a; border-color: #d4af37; }
    a:hover { border-color: #d4af37; }
}

.recent-attachments-gallery .recent-attachment {
    background: #1d1738;
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 3px;
}

mark { background: #d4af37; color: #14102a; }

.sort-bar {
    color: #8f84b8;
    a { color: #b0a4d4; &.sort-active { color: #d4af37; } }
}

.thread-warning {
    background: #241c48;
    &.thread-deleted-notice {
        color: #e07070;
        &::after { content: 'XIII'; }
    }
}
.flashed-message { border-color: #7ec9a0; }
.no-threads { color: #8f84b8; font-style: italic; text-align: center; }

footer {
    color: #8f84b8;
    a { color: #b0a4d4; }
    text-align: center;
}