/* =========================================
   RPG CORNUCOPIA
   THE KEEPER

   Workshop Atmosphere Styling
   Version 1.2.1
========================================= */


/* =========================================
   RESET
========================================= */

* {

    box-sizing:border-box;

}



html {

    min-height:100%;

}



body {

    margin:0;

    min-height:100vh;


    font-family:

        Georgia,

        "Times New Roman",

        serif;


    background:

        linear-gradient(

            rgba(0,0,0,0.35),

            rgba(0,0,0,0.35)

        ),

        url("../assets/images/KeeperBD.webp");


    background-size:

        cover;


    background-position:

        center center;


    background-attachment:

        fixed;


    color:#f8e8bf;

}



/* =========================================
   MAIN FORGE
========================================= */


#rpg-forge {

    min-height:100vh;

    padding:

        30px 20px;

}



.forge-container {

    max-width:

        1200px;

    margin:auto;

}



.forge-workshop {

    background:

        rgba(10,8,6,0.25);


    border:

        none;


    padding:

        25px;


}





/* =========================================
   HEADER
========================================= */


.forge-header {

    text-align:center;

    padding:

        20px;

    margin-bottom:

        35px;

}



.forge-logo {

    display:block;

    width:

        min(280px,70%);


    height:auto;


    margin:

        0 auto 20px auto;


    filter:

        drop-shadow(
            0 5px 12px rgba(0,0,0,.8)
        );

}



.forge-title {

    margin:0;


    color:

        #f3b63f;


    font-size:

        clamp(2rem,5vw,3.5rem);


    letter-spacing:

        1px;


    text-shadow:

        0 3px 8px #000;

}



.forge-subtitle {


    margin-top:

        10px;


    color:

        #fff0c2;


    font-size:

        1.2rem;


    font-style:

        italic;


    text-shadow:

        0 2px 6px #000;

}



/* =========================================
   GRID
========================================= */


.forge-grid {

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:30px;

    align-items:start;

}


.keeper-output-panel,
.expression-panel {

    min-width:0;

}



/* =========================================
   FORGE PANELS
========================================= */


.forge-panel {


    background:

        rgba(20,15,12,.78);


    border:

        1px solid rgba(243,182,63,.35);


    border-radius:

        14px;


    padding:

        28px;


    box-shadow:

        0 10px 35px rgba(0,0,0,.7);


    backdrop-filter:

        blur(5px);


    color:

        #f8e8bf;

}



.forge-panel h2 {


    margin-top:

        0;


    color:

        #f3b63f;


    text-align:

        center;


    font-size:

        1.6rem;

}



/* =========================================
   FORM ELEMENTS
========================================= */


.forge-label {


    display:block;


    margin-top:

        18px;


    color:

        #ffe7a0;


    font-weight:

        bold;

}




.forge-select {


    width:

        100%;


    margin-top:

        6px;


    padding:

        10px;


    background:

        #201813;


    color:

        #ffeec5;


    border:

        1px solid rgba(243,182,63,.45);


    border-radius:

        6px;


    font-family:

        inherit;

}




.forge-option {


    margin-top:

        15px;


    color:

        #f8e8bf;

}





.forge-option input {


    transform:

        scale(1.15);


    margin-right:

        8px;

}



/* =========================================
   BUTTON
========================================= */


.forge-button {


    width:

        100%;


    margin-top:

        25px;


    padding:

        15px;


    background:

        linear-gradient(

            #8b551f,

            #5c3212

        );


    border:

        1px solid #d89a35;


    border-radius:

        8px;


    color:

        #fff3ce;


    font-family:

        inherit;


    font-size:

        1.15rem;


    cursor:

        pointer;


    box-shadow:

        0 4px 10px rgba(0,0,0,.5);

}




.forge-button:hover {


    background:

        linear-gradient(

            #a66a27,

            #704017

        );

}



.forge-button:disabled {

    opacity:.6;

}



/* =========================================
   RESULT
========================================= */


.forge-result {


    min-height:

        220px;


    display:flex;


    flex-direction:

        column;


    justify-content:

        center;


    align-items:

        center;


    text-align:

        center;

}



.forge-result-name {


    color:

        #ffd46b;


    font-size:

        clamp(

            2rem,

            5vw,

            3.3rem

        );


    font-weight:

        bold;


    text-shadow:

        0 3px 8px #000;

}



.forge-title {


    margin-top:

        12px;


    color:

        #f4c76b;


    font-style:

        italic;


}



.forge-true-name {


    margin-top:

        25px;


    padding-top:

        20px;


    border-top:

        1px dashed rgba(255,220,140,.5);


}



.forge-blueprint {


    margin-top:

        20px;


    color:

        #e7c98a;

}



.forge-signature {


    margin-top:

        30px;


    color:

        #f0d9a0;


    font-style:

        italic;

}




/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

    .forge-grid {

        grid-template-columns:1fr;

    }


    .forge-panel {

        padding:20px;

    }

}

/* =========================================
   FORGE PROGRESS MESSAGES
========================================= */

.forge-progress-message {

    font-style:italic;

    opacity:0.85;

    margin:8px 0;

    animation: forgeFade 0.4s ease-in;

}



@keyframes forgeFade {

    from {

        opacity:0;

        transform:translateY(5px);

    }


    to {

        opacity:0.85;

        transform:translateY(0);

    }

}

/* ==========================================
   Keeper of Fate
   Rune Shelf
========================================== */


.rune-shelf{

    margin-top:25px;

    padding-top:15px;

    border-top:
    1px solid #8b5a16;

}



.rune-shelf h3{

    margin-bottom:12px;

}



.rune-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:10px;

}



.rune-button{

    background:
    rgba(90,50,10,.6);

    color:
    #f4d27a;

    border:
    1px solid #b67a20;

    padding:8px;

    border-radius:6px;

    cursor:pointer;

    font-family:inherit;

}



.rune-button:hover{

    background:
    rgba(160,100,20,.8);

}

/* ==========================================
   Keeper of Fate Layout
========================================== */

.keeper-output-panel,
.expression-panel {

    min-height:600px;

}

#fate-history{

    text-align:center;

}