body{
    background-color: #000;/*#1E1E1E;*/
    color: #FFFFFF;
    /* font-family: 'Aclonica'; */
    font-family: 'EB Garamond', serif;
    font-size: large;
}
@font-face {
    font-family: BlackChancery;
    src: url("/static/main/fonts/blackchancery.regular.753833d2833e.ttf");
}
a {
    color: #3c9e8d;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}
input{
    color:white;
}
textarea{
    color: white;
}
.flex {
    display: flex !important;
}
.flex .col {
    min-height: 100% !important;
}
.flex .col .card{
    min-height: 100% !important;
}
.image-col{
    display: flex;
    justify-content: center;
    align-items: center;
}

.blocked {
    opacity: .6;
    filter: grayscale(80%);
    pointer-events: none;
    background-color: transparent;
    transition: all 0.5s ease;
}
.blocked::after {
    content: "USED";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1); /* Slight dark overlay */
    color: #6D4C41; 
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    z-index: 10;
    pointer-events: none; /* Make sure the overlay itself is not clickable */

    display: flex; /* Enable Flexbox for the pseudo-element */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
}

/* one item */
div.image-card:first-child:nth-last-child(1){
/* -or- div.image-card:only-child { */
    background-image:url("/static/main/images/scroll_center.bcb919f69da3.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
    padding: 0;
    display: flex;
}
div.image-card:first-child:nth-last-child(1) > div{
    width: 100%;
}
div.image-card:first-child:nth-last-child(1)::before{
    background-image: url("/static/main/images/scroll_left.fd23e6aca03a.png");
    content: "";
    background-size: 20px 100%;
    height: 100%;
    width: 20px;
    display: block;
    float: left;
    flex: 0 0 20px;
}
div.image-card:first-child:nth-last-child(1)::after{
    background-image:url("/static/main/images/scroll_right.a5e933779989.png");
    content: "";
    background-size: 20px 100%;
    height: 100%;
    width: 20px;
    display: block;
    float: right;
    flex: 0 0 20px;
}
div.image-card:first-child:nth-last-child(1) > div.card > div.card-content,
div.image-card:first-child:nth-last-child(1) > div.card > div.card-action{
    padding-left: 4%;
}

/* two items */
/* Left item */
div.image-card:first-child:nth-last-child(2) > div{
    background-color: transparent !important;
    background-image:url("/static/main/images/tile_left.58543b0297c8.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
}
/* div.image-card:first-child:nth-last-child(2) > div::before{
    content: "";
    background-color: transparent !important;
    background-image:url("/static/main/images/crown_left.e8b56a934299.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
    float: left;
} */
/* Right item */
div.image-card:first-child:nth-last-child(2) ~ div.image-card > div{
    background-color: transparent !important;
    background-image:url("/static/main/images/tile_right.338bb824ac8f.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    text-align: right;
}

/* three items */
/* Left item */
div.image-card:first-child:nth-last-child(3) > div{
    background-color: transparent !important;
    background-image:url("/static/main/images/tile_left.58543b0297c8.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    text-align: left;
}
/* Middle item */
div.image-card:first-child:nth-last-child(3) + div.image-card > div{
    background-color: transparent !important;
    background-image:url("/static/main/images/tile_middle.3f1a59369764.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    text-align: center;
}
/* Right item */
div.image-card:first-child:nth-last-child(3) + div.image-card + div.image-card > div{
    background-color: transparent !important;
    background-image:url("/static/main/images/tile_right.338bb824ac8f.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
    text-align: right;
}

/* four items */
/* div.image-card:first-child:nth-last-child(4),
div.image-card:first-child:nth-last-child(4) ~ div.image-card {
    background-color: blue !important;
} */

/* 5 or more */
.banner-card{
    max-width: 250px;
    margin-right: auto;
}
.banner-card > div:before{
    content: "";
    background-image: url("/static/main/images/banner_top.8cc887e7a736.png");
    background-size: cover;
    height: 35px;
    width: 100%;
    display: block;
}
.banner-card > div{
    background-image:url("/static/main/images/banner_bottom.0be6ff5479c8.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-color: transparent !important;
    text-align: center;
}
.banner-card > div > div.card-action{
    border: none;
}

/* .glow-text{
    color: lightyellow !important;
    text-shadow: 0 0 10px rgb(235 255 0), 0 0 20px rgb(255 175 0 / 80%), 0 0 30px rgb(255 225 0 / 50%);
} */
.helptext{
    font-style: italic;
}

/* Materialize overrides */
/* Side Nav */
ul.sidenav li > h5{
    padding: 0 32px;
    color: black;
}
/* Tabs */
.tabs{
    background-color: #1E1E1E;
}
.tabs .tab a {
    /* color: deepskyblue; */
    color: rgba(7,177,214,.7)
}
.tabs .tab a:hover, .tabs .tab a.active {
    color: deepskyblue;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
    /* background-color: rgba(178, 218, 246, 0.2); */
    background-color: rgba(148, 205, 246, 0.2);
}
.tabs .indicator {
    background-color: #b2ddf6;
}
.sub-tabs > li{
    background-color: rgba(255,255,255,.1);
}
/* Collapsable headers */
.collapsible-header {
    background-color: inherit;
}

/* Tables */
tr {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* END Materialize Overrides */

/* Flex cards */
.flex-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.flex-card {
    flex-basis: 49%;
}

/* Cards */
.image-card > div.card,
.banner-card > div.card{
    box-shadow: none;
    -webkit-box-shadow: none;
}

.image-card > div.card > div.card-action,
.banner-card > div.card > div.card-action.banner-card > div.card > div.card-action{
    border-top: none;
}
.ex-card {
    padding: 15px;
    margin-top: 10px;
}

/* .container{
    width: 90% !important;
} */
textarea{
    height: 10rem;
}
span.tab-badge{
    border-radius: 20px !important;
    margin-top: 6% !important;
}
/* Character Page */
.character-page{
    background-size: 100% 100%;
    margin-top: 20px;
    padding: 10px;
}
@media only screen and (min-width: 992px) {
    .character-page{
        flex-basis: 33%;
    }
}
@media only screen and (max-width: 992px) {
    .character-page{
        flex-basis: 50%;
    }
}
@media only screen and (max-width: 600px) {
    .character-page{
        flex-basis: 100%;
    }
}
.character-header{
    font-weight: bold;
    font-family: BlackChancery, Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    font-size: xx-large;
    padding-top: 10px;
}
.character-image{
    padding: 0 20px;
    text-align: center;
}
.character-image > img {
    /* border-radius: 50%; */
    border: 2px solid black;
    max-height: 300px;
    max-width: 300px;
}

/* Character grid */
/* .character-grid{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto auto;
    background-image:url("/static/main/images/character_board/wood.89c3710eea2c.png");
    background-size: cover;
    padding: 10px;
    margin-top: 10px;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
}
.character-grid:hover{
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
} */

.paper-image-wrapper{
    position: relative;
}
.img-text{
    position: absolute;
    top: 10%;
    left: 10%;
    padding-right: 8%;
}
.img-text-center{
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, 0%);
    padding-right: 0;
    overflow: hidden;
    white-space: nowrap;
}
.text-heading{
    font-weight: bold;
    text-decoration: underline;
}

ul.errorlist{
    color: red;
}
.btn {
    background-color: #5d4037 !important;
    font-family: 'EB Garamond', serif;
    font-weight: 700;
}


/* --- INNER PARCHMENT STYLES --- */
.weathered-parchment {
    background-color: #fcf8e3; 
    color: black; 
    border-radius: 4px; 
    padding: 15px; 
    width: 100%;
    
    /* Inner Shadows for Aging/Texture */
    box-shadow: 
        inset 0 0 15px rgba(100, 50, 0, 0.5),  
        inset 0 0 35px rgba(0, 0, 0, 0.2);     

    /* Faux Parchment Texture (CSS Gradient) */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 1%), 
                #fcf8e3; 
    background-size: 8px 8px;
    
    /* Disable any separate hover effect on the parchment itself */
    transition: none;
}

.white-parchment {
    background-color: #EDECE0; 
    color: #3e2723;
    box-shadow: inset 0 0 20px rgba(50, 25, 0, 0.7);
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1%, transparent 1%), 
                #EDECE0; 
    background-size: 8px 8px;
}

/* Title and Button styles */
.weathered-parchment .card-title {
    color: black; 
    border-bottom: 2px solid #5d4037; 
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.weathered-parchment .btn {
    margin-top: 15px;
    background-color: #5d4037 !important;
    font-family: 'EB Garamond', serif; 
    font-weight: 700; 
}

/* Ensure bold text inside the body copy works */
.weathered-parchment p strong {
    font-weight: 700; /* EB Garamond 700 is strong, but still readable */
}

.weathered-parchment-glow {
    box-shadow: inset 0 0 15px rgba(100, 50, 0, 0.5), inset 0 0 35px rgba(0, 0, 0, 0.2), 0px 0px 10px 5px #dfbc00;
}




/* ======================================================= */
/* --- 1. CARVED WOOD/IRON BEAM NAV BAR --- */
/* ======================================================= */

/* Target the main Materialize NAV element */
nav {
    /* 1. Base color: Very dark brown/iron */
    background-color: #3E2723 !important; 
    border-bottom: 3px solid #6D4C41; /* Thicker, defined bottom edge */
    
    padding: 0 15px;
}

/* Style the brand logo and the main links */
.nav-wrapper a, 
.nav-wrapper ul li a {
    /* 3. Text color: Vibrant gold for high contrast */
    color: #FFB300 !important; 
    font-family: 'Cinzel', serif; /* Use your dramatic headline font */
    font-weight: 700;
    transition: all 0.2s ease;
}

/* Highlight the link on hover for an expensive look */
.nav-wrapper ul li a:hover {
    background-color: rgba(255, 179, 0, 0.15) !important; /* Semi-transparent gold highlight */
    color: #FFF !important; /* White text on hover */
    text-shadow: 0 0 5px #FFB300; /* Subtle text glow */
}

/* Ensure the Sidenav trigger icon is gold */
.sidenav-trigger i.material-icons {
    color: #FFB300 !important; 
}
.dropdown-content li.divider {
    background-color: #6D4C41;
}
.dropdown-content {
    background-color: #3E2723;
    min-width: 115px;
}
.dropdown-content li:hover, .dropdown-content li.active {
    background-color: rgba(255, 179, 0, 0.15) !important;
}

/* ======================================================= */
/* --- MOBILE SIDENAV (PARCHMENT SCROLL) STYLES --- */
/* ======================================================= */

/* Target the Sidenav container itself */
.sidenav {
    /* 1. Background: Light Cream / Parchment color */
    background-color: #fcf8e3 !important; 
    
    /* 2. Text: Dark Brown for high contrast */
    color: #3e2723 !important; 
    
    /* 3. Subtle Inner Border/Edge */
    border-right: 3px solid #6d4c41; /* A dark wood or scroll edge */
}

/* Apply the dramatic, monumental font (Cinzel) to the section headers */
.sidenav h5 {
    /* Set the dramatic font and color */
    font-family: 'Cinzel', serif !important; 
    color: #5d4037 !important; 
    font-weight: 700;
    font-size: 1.6rem;
    margin: 15px 0 5px 0; /* Add some vertical space around headers */
    padding: 0 32px; /* Match standard Materialize padding */
    border-bottom: 2px solid #a1887f; /* Separator line under headers */
    line-height: 1.2;
}

/* Style for all main navigation links */
.sidenav li a {
    /* Link text color: Dark Brown/Black */
    color: #3e2723 !important;
    font-family: 'EB Garamond', serif !important; /* Use your readable body font */
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 32px;
}

/* Hover effect for links - use a faint dark sepia highlight */
.sidenav li a:hover {
    background-color: rgba(62, 39, 35, 0.08) !important; /* Very faint brown hover */
}

/* Style for the divider line (parchment tear/edge) */
.sidenav .divider {
    background-color: #a1887f !important; /* Medium brown divider line */
    margin: 5px 0;
}

/* Style for the username/SP display */
.sidenav h5:first-child {
    /* Slightly different style for the user info header */
    color: #5d4037 !important; 
    margin-top: 20px;
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: none; /* Do not underline the user info */
}


/* Other stuff I'm trying out */

.equal-height-row {
    /* * Materialize rows use display: flex by default, 
     * but setting it explicitly is good practice.
     */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.equal-height-row > div {
    /* This override is to fix an issue where both flexbox and Materialize want to handle wrapping. 
    This way we remove the margin: auto; from Materialize for this special case where we already wrap with flex */
    margin-left: 0 !important; 
}

.equal-height-row .col {
    /* The Materialize column needs to be a flex container */
    display: flex; 
    /* The column should stretch to match the tallest sibling in the row */
    align-items: stretch;
}


.section-header {
    color: #FFB300; 
    font-family: 'Cinzel', serif; 
    text-align: center; 
    margin: 50px 0 20px 0;
    border-bottom: 2px solid #6D4C41;
    padding-bottom: 10px;
}

/* ======================================================= */
/* --- CHOICE GROUPS --- */
/* ======================================================= */
.choice-group-frame {
    padding: 5px; 
    
    /* Heavy Dark Frame Look (Wood/Iron) */
    background-color: #3e2723; 
    border: 2px solid #6D4C41; 
    border-radius: 10px;
}

/* ======================================================= */
/* --- 2. FLEX CONTAINER (Manages card layout) --- */
/* ======================================================= */
.choice-group-flex {
    display: flex;
    flex-wrap: wrap; 
    gap: 5px; /* Small space between cards */
}

/* ======================================================= */
/* --- 3. DYNAMIC CARD STYLES --- */
/* ======================================================= */
.choice-card-dynamic {
    /* FLEXIBILITY: Enables 2 or 3 cards to sit side-by-side */
    flex: 1 1 300px; /* Tries to be at least 300px, grows/shrinks equally */
    
    padding: 20px;
    position: relative; 
    z-index: 1;

    border-radius: 4px;
}

/* --- CONTENT STYLES --- */
.card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
}
.cost-text {
    font-style: italic;
    font-size: 1.1rem;
    text-align: right;
    margin-bottom: 15px;
}
.acquire-link {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #388e3c !important;
    text-align: right;
    text-decoration: none;
    padding-top: 10px;
    border-top: 1px dashed #a1887f;
    margin-top: 15px;
    transition: color 0.2s ease;
}
.acquire-link:hover {
    color: #4CAF50 !important;
}

/* ======================================================= */
/* --- MULTIPLE CHOICE (SELECTABLE SET) STYLES --- */
/* ======================================================= */

/* 1. FLEX CONTAINER (The layout manager) */
.selectable-set-flex {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;
}

/* 2. CARD BASE STYLE (Individual Scrolls/Plates) */
.selectable-skill-card {
    /* FLEXIBILITY: Aims for 300px, allows for 2, 3, or more in a row */
    flex: 1 1 300px; 
    
    padding: 20px;
    z-index: 1;
    
    /* Sturdy Border */
    border: 2px solid #6D4C41; 
    border-radius: 10px;
}

/* ======================================================= */
/* --- EQUAL HEIGHT FLEXBOX RULES --- */
/* ======================================================= */
.row.equal-plaque-height {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap; 
}
.row.equal-plaque-height > .col {
    display: flex;
    align-self: stretch; 
    align-content: flex-start;
    margin-bottom: 30px;
}

/* ======================================================= */
/* --- HERALDIC CHARACTER PLAQUE STYLES --- */
/* ======================================================= */
.character-plaque-container {
    margin: 40px auto;
}

.character-plaque {
    width: 100%; 
    height: 100%; 
    
    position: relative;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.character-plaque:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.5);
}

/* --- THE ORNATE FRAME (.plaque-frame) --- */
.plaque-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    min-height: 400px;
    height: 100%;
    border-radius: 15px;
    
    background-color: #3e2723; /* Darkest wood base */
    background-image: url("/static/main/images/wood_pattern.02464a71c93b.png");
    background-blend-mode: soft-light;
    background-repeat: repeat; 
    background-size: 250px 250px;

    border: 5px solid #FFC107; 
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.8), 
        0 0 0 3px #6D4C41; 
}

/* --- CHARACTER IMAGE STYLING --- */
.plaque-image-wrapper {
    position: relative;
    width: 90%; 
    padding-top: 90%; 
    margin-bottom: 20px;
    border: 4px solid #6D4C41; 
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.character-image2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* --- INFO BLOCK STYLING --- */
.plaque-info {
    width: 100%;
    padding: 10px 5px;
    color: #EDECE0; 
    font-family: 'EB Garamond', serif;
    /* Ensure the info block doesn't stretch content unnecessarily */
    flex-grow: 1; 
}

.char-name {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: #FFB300; 
    margin-bottom: 15px;
    border-bottom: 2px solid #6D4C41;
    padding-bottom: 5px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 1.1rem;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    font-weight: 400;
    color: #a1887f; 
}

.stat-value {
    font-weight: 700;
    color: #EDECE0;
    text-align: right;
    font-family: 'Cinzel', serif;
}
/* ======================================================= */
/* --- FACTION IMAGE STYLES --- */
/* ======================================================= */
.faction-image {
    /* Positioning relative to the .character-plaque */
    position: absolute;
    top: 10px; 
    right: 10px; 
    
    /* Image Size and Style */
    width: 75px; /* Adjust size of the image */
    height: 75px;
    object-fit: cover;
    z-index: 10; 
}