/* ==========================================================
   TavernWall v4.5 Visual Design Polish
   Site-wide tavern/medieval UI cleanup.
   ========================================================== */

:root {
    --tw-bg-deep: #120c09;
    --tw-bg-warm: #241710;
    --tw-wood: #4a2f1f;
    --tw-wood-dark: #2b1b14;
    --tw-wood-light: #6f4b31;
    --tw-parchment: #e8d6a7;
    --tw-parchment-dark: #c7ad73;
    --tw-gold: #ffd955;
    --tw-gold-soft: rgba(255, 217, 85, .16);
    --tw-border: #9b7748;
    --tw-red: #9f3d32;
    --tw-green: #6f9d5f;
    --tw-shadow: rgba(0, 0, 0, .42);
    --tw-card-glow: rgba(255, 217, 85, .08);
}

/* Background and page shell */
body {
    background:
        radial-gradient(circle at 10% 5%, rgba(255, 217, 85, .12), transparent 26%),
        radial-gradient(circle at 90% 12%, rgba(155, 119, 72, .16), transparent 30%),
        radial-gradient(circle at 40% 110%, rgba(90, 48, 26, .25), transparent 35%),
        linear-gradient(135deg, #100a08 0%, #22140f 48%, #130d0a 100%) !important;
    color: var(--text);
    letter-spacing: .01em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .24;
    z-index: -1;
}

.page-shell {
    animation: twFadeIn .28s ease-out;
}

@keyframes twFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Top navigation */
.topbar {
    background:
        linear-gradient(180deg, rgba(76, 48, 30, .98), rgba(37, 23, 16, .98)) !important;
    border-bottom: 1px solid var(--tw-gold) !important;
    box-shadow:
        0 10px 26px rgba(0,0,0,.52),
        inset 0 -1px 0 rgba(255,255,255,.05);
}

.brand {
    text-shadow: 0 2px 0 #000, 0 0 16px rgba(255, 217, 85, .22);
}

.brand-mark {
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 217, 85, .25), transparent 45%),
        linear-gradient(180deg, #5c3a26, #1f130f) !important;
    border-color: var(--tw-gold) !important;
    box-shadow: 0 0 0 3px rgba(255,217,85,.08);
}

.nav a,
.notification-toggle {
    border: 1px solid rgba(155, 119, 72, .28) !important;
    background: rgba(0,0,0,.08);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.nav a:hover,
.notification-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--tw-gold) !important;
    background: rgba(255, 217, 85, .09) !important;
}

/* Cards and containers */
.card,
.hero-panel,
.profile-cover {
    position: relative;
    overflow: hidden;
    border-color: rgba(155, 119, 72, .86) !important;
    background:
        linear-gradient(180deg, rgba(79, 51, 33, .96), rgba(38, 25, 19, .96)) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(255,217,85,.035);
}

.card::before,
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(255, 217, 85, .08), transparent 26%),
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 22%, transparent 78%, rgba(0,0,0,.12));
    opacity: .8;
}

.card > *,
.hero-panel > *,
.profile-cover > * {
    position: relative;
    z-index: 1;
}

.card-title,
.page-title,
.hero h1,
.profile-name {
    text-shadow:
        0 2px 0 rgba(0,0,0,.8),
        0 0 18px rgba(255,217,85,.16);
}

.card-title::after {
    content: "";
    display: block;
    width: 74px;
    height: 3px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tw-gold), transparent);
    opacity: .75;
}

/* Forms */
input,
textarea,
select {
    background: rgba(18, 10, 7, .72) !important;
    border-color: rgba(155, 119, 72, .9) !important;
    box-shadow: inset 0 1px 7px rgba(0,0,0,.32);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--tw-gold) !important;
    box-shadow:
        inset 0 1px 7px rgba(0,0,0,.28),
        0 0 0 3px rgba(255, 217, 85, .16) !important;
}

label {
    color: var(--tw-parchment-dark) !important;
}

/* Buttons */
button,
.button,
.mini-button {
    border-color: rgba(255, 217, 85, .42) !important;
    background:
        linear-gradient(180deg, #6f4a2f, #3a2318) !important;
    box-shadow:
        0 4px 0 rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

button:hover,
.button:hover,
.mini-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 6px 0 rgba(0,0,0,.32),
        0 0 18px rgba(255,217,85,.08),
        inset 0 1px 0 rgba(255,255,255,.1);
}

button:active,
.button:active,
.mini-button:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 0 rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
}

button.danger,
.button.danger,
.mini-button.danger {
    background: linear-gradient(180deg, #9f3d32, #5c201b) !important;
    color: #fff !important;
}

/* Feed posts */
.post-card {
    border-left: 5px solid rgba(255, 217, 85, .32) !important;
}

.post-head {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(155, 119, 72, .24);
}

.post-body {
    font-size: 16px;
    line-height: 1.7;
}

.post-image,
.message-attachment-image {
    box-shadow:
        0 12px 24px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,217,85,.08);
}

.reaction-row {
    gap: 8px !important;
    flex-wrap: wrap;
}

.reaction-button {
    background: rgba(0,0,0,.18) !important;
    color: var(--text) !important;
}

.reaction-button:hover,
.reaction-button.active {
    color: var(--tw-gold) !important;
    border-color: var(--tw-gold) !important;
    background: rgba(255, 217, 85, .11) !important;
}

.reaction-button:hover span:first-child {
    display: inline-block;
    animation: twEmojiPop .22s ease-out;
}

@keyframes twEmojiPop {
    0% { transform: scale(1); }
    60% { transform: scale(1.25) rotate(-4deg); }
    100% { transform: scale(1); }
}

/* Comments */
.comment {
    border-bottom-color: rgba(155, 119, 72, .24) !important;
}

.comment-form {
    padding-top: 8px;
}

/* Avatars */
.avatar {
    border-color: var(--tw-border) !important;
    box-shadow:
        0 0 0 3px rgba(0,0,0,.22),
        0 6px 14px rgba(0,0,0,.32);
}

/* Profile polish */
.profile-cover {
    padding: 26px !important;
}

.profile-banner {
    box-shadow:
        inset 0 -60px 80px rgba(0,0,0,.45),
        0 12px 24px rgba(0,0,0,.35);
}

.profile-html,
.inset-card {
    border-style: solid !important;
    border-color: rgba(155,119,72,.55) !important;
    background: rgba(0,0,0,.18) !important;
}

.tavern-quote {
    color: var(--tw-parchment) !important;
    border-left-color: var(--tw-gold) !important;
}

/* Composer polish */
.tw-type-tabs label,
.composer-type-grid .composer-type,
.composer-tabs label {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.tw-type-tabs label.active,
.composer-type-grid .composer-type.active {
    background:
        linear-gradient(180deg, rgba(255,217,85,.18), rgba(91,61,34,.42)) !important;
}

.tw-panel,
.composer-help,
.composer-photo-panel,
.composer-poll-panel,
.poll-box {
    background:
        linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.24)) !important;
    border-color: rgba(155,119,72,.64) !important;
}

/* Messenger */
.messenger-shell {
    gap: 18px;
}

.conversation-list,
.chat-card {
    min-height: 70vh;
}

.contact-item {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 9px;
    transition: background .12s ease, border-color .12s ease;
}

.contact-item:hover,
.contact-item.active {
    background: rgba(255,217,85,.09) !important;
    border-color: rgba(255,217,85,.32);
    text-decoration: none;
}

.chat-thread {
    background:
        radial-gradient(circle at 10% 0%, rgba(255,217,85,.06), transparent 30%),
        rgba(0,0,0,.16);
    border: 1px solid rgba(155,119,72,.55);
    border-radius: 18px;
    padding: 14px;
}

.message {
    background:
        linear-gradient(180deg, rgba(37, 24, 17, .96), rgba(22, 14, 11, .96)) !important;
    border-color: rgba(155,119,72,.55) !important;
}

.message.mine {
    background:
        linear-gradient(180deg, rgba(92, 61, 31, .96), rgba(48, 31, 18, .96)) !important;
    border-color: rgba(255,217,85,.32) !important;
}

/* Guilds */
.guild-card {
    transition: transform .14s ease, box-shadow .14s ease;
}

.guild-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 36px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,217,85,.12);
}

.guild-card-banner {
    box-shadow: inset 0 -46px 70px rgba(0,0,0,.42);
}

/* Battle and admin polish */
.opponent-card,
.battle-log-card,
.admin-tabs a,
.stat-tile {
    backdrop-filter: blur(2px);
}

.opponent-card:hover {
    transform: translateY(-2px);
    border-color: var(--tw-gold);
    box-shadow: 0 16px 28px rgba(0,0,0,.34);
}

.stat-tile strong {
    text-shadow: 0 2px 0 rgba(0,0,0,.7);
}

/* Tables */
.table-list th {
    color: var(--tw-gold);
    background: rgba(0,0,0,.12);
}

.table-list tr:hover td {
    background: rgba(255,217,85,.04);
}

/* Notifications */
.notification-dropdown {
    box-shadow:
        0 22px 44px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,217,85,.1);
}

.notification-card.unread {
    box-shadow:
        0 16px 34px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,217,85,.16);
}

/* Flash and empty states */
.flash,
.empty,
.onboarding-banner {
    box-shadow:
        0 12px 24px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* Better mobile handling */
@media (max-width: 950px) {
    .topbar {
        position: relative;
    }

    .nav {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .nav a,
    .notification-menu,
    .notification-toggle {
        width: 100%;
        text-align: center;
    }

    .notification-dropdown {
        position: static !important;
        display: none;
        width: 100%;
        margin-top: 8px;
    }

    .notification-menu:hover .notification-dropdown,
    .notification-menu:focus-within .notification-dropdown {
        display: block;
    }

    .profile-cover-inner {
        text-align: center;
    }

    .action-row {
        justify-content: center;
    }

    .conversation-list,
    .chat-card {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .page-shell {
        width: min(100% - 18px, 1180px);
        margin-top: 14px;
    }

    .card,
    .hero-panel,
    .profile-cover {
        border-radius: 14px !important;
        padding: 15px !important;
    }

    .card-title {
        font-size: 24px !important;
    }

    .profile-name {
        font-size: 34px !important;
    }

    .nav {
        grid-template-columns: 1fr;
    }

    .button,
    button {
        width: 100%;
    }

    .reaction-row form {
        flex: 1 1 45%;
    }

    .reaction-button {
        width: 100%;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}