body {
    font-family: 'Inter', sans-serif;
    /* Paper texture background similar to Ultima VI */
    background-color: #FDF6E3; /* Parchment fallback */
    background-image: linear-gradient(#FDF6E3, #FDF6E3), url('../images/paper-texture2.jpg');
    background-repeat: repeat;
    background-size: 240px; /* tile scale to reduce seams */
    background-blend-mode: multiply;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
.nav-link {
    transition: all 0.2s ease-in-out;
}
.nav-link.active {
    background-color: #a16207;
    color: #fefce8;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.tab-button.active {
    background-color: #ca8a04;
    color: white;
    border-color: #ca8a04;
}
.content-section {
    display: none;
}
.content-section.active {
    display: block;
}
.table-sortable th {
    cursor: pointer;
}
.table-sortable th:hover {
    background-color: #fef3c7;
}
.table-sortable th .sort-icon {
    opacity: 0.3;
    transition: opacity 0.2s;
}
.table-sortable th:hover .sort-icon {
    opacity: 1;
}

/* Reference section tabs (Grimoire / Words & Mantras) */
.ref-tab-content {
    display: none;
}
.ref-tab-content.active {
    display: block;
}

/* Quest log tabs */
.quest-tab-content {
    display: none;
}
.quest-tab-content.active {
    display: block;
}

/* --- AI Seer visual helpers (match Ultima VI styling) --- */
.gemini-response {
    white-space: pre-wrap;
    background-color: #FBF1D3;
    border-left: 4px solid #D97706;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-top: 1rem;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #854D0E;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 1rem auto;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
