/* ============================================
   The Illuminated Tome - Custom Styles
   ============================================ */

/* Prevent layout shift when scrollbar appears/disappears between tabs */
html {
    scrollbar-gutter: stable;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Suppress native & Tailwind forms plugin arrow — custom icons used instead */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

/* Torn Edge Clip Paths */
.torn-edge {
    clip-path: polygon(0% 2%, 5% 0%, 10% 3%, 15% 1%, 20% 4%, 25% 1%, 30% 3%, 35% 0%, 40% 2%, 45% 1%, 50% 4%, 55% 1%, 60% 3%, 65% 0%, 70% 2%, 75% 1%, 80% 4%, 85% 1%, 90% 3%, 95% 0%, 100% 2%, 100% 98%, 95% 100%, 90% 97%, 85% 99%, 80% 96%, 75% 99%, 70% 97%, 65% 100%, 60% 98%, 55% 99%, 50% 96%, 45% 99%, 40% 98%, 35% 100%, 30% 97%, 25% 99%, 20% 96%, 15% 99%, 10% 97%, 5% 100%, 0% 98%);
}

/* Parchment Texture — light cream with subtle dot grid */
.parchment-texture {
    background-image: radial-gradient(#ebe2c8 0.5px, transparent 0.5px);
    background-size: 24px 24px;
}

/* Body base — warm parchment */
body {
    background-color: #fff9ed;
    color: #1f1c0b;
}

/* View transitions */
.view-section {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.view-section.active {
    display: block;
}

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

/* Nav tab styles */
.nav-tab {
    color: #1f1c0b;
    opacity: 0.7;
    padding-bottom: 4px;
    transition: color 0.3s, opacity 0.3s, border-color 0.3s;
}
.nav-tab:hover {
    color: #af2b3e;
    opacity: 1;
}
.nav-tab.active-tab {
    color: #735c00;
    opacity: 1;
    border-bottom: 2px solid #735c00;
}

/* Initiative: active combatant glow */
.active-glow {
    box-shadow: 0 0 20px rgba(115, 92, 0, 0.15);
    border-left: 4px solid #735c00 !important;
}

@keyframes activePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(115, 92, 0, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(115, 92, 0, 0); }
}

.initiative-active {
    animation: activePulse 2s ease-in-out infinite;
}

/* Brass ring for stat circles */
.brass-ring {
    box-shadow: inset 0 0 0 2px #e9c349, 0 0 8px rgba(233, 195, 73, 0.2);
}

/* Wax seal button shadow */
.wax-seal-shadow {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 4px 8px rgba(31,28,11,0.15);
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #735c00;
    border-radius: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #574500;
}

/* Manuscript lined paper effect */
.manuscript-line {
    background: linear-gradient(to bottom, transparent 95%, rgba(194, 200, 191, 0.4) 95%);
    background-size: 100% 2rem;
}

/* Royal divider — gold gradient rule */
.royal-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, #735c00, transparent);
    opacity: 0.4;
}

/* Editorial frame overlay */
.editorial-frame {
    background-image:
        linear-gradient(to right, rgba(235, 226, 200, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(235, 226, 200, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Ribbon bookmark clip */
.ribbon-bookmark {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
}

/* Monster card hover lift */
.monster-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.monster-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(31, 28, 11, 0.15);
}

/* Environment card selection */
.env-card.selected {
    outline: 2px solid rgba(115, 92, 0, 0.6);
    outline-offset: 2px;
}

/* Input focus — no outline, border handles it */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Sidebar scroll */
aside {
    overflow-y: auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .sidebar-desktop {
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }
    .sidebar-desktop.open {
        transform: translateX(0);
    }
    main {
        margin-left: 0 !important;
    }
}