/* ==========================================================
   Story Engine v7
   Version 7.0.1
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    font-size:16px;

}

body{

    min-height:100vh;

    background:#f6f6f6;

    color:#222;

    font-family:

    Arial,

    Helvetica,

    sans-serif;

}

#app{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:40px;

}

h1{

    font-size:48px;

    margin-bottom:20px;

}

p{

    font-size:22px;

    margin-top:10px;

}

/* ==========================================================
   Library
========================================================== */

.library-page{

    width:100%;

    max-width:1400px;

    margin:0 auto;

}

.library-title{

    font-size:40px;

    margin-bottom:40px;

}

.library-grid{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:flex-start;

    gap:30px;

    flex-wrap:wrap;

}

.story-card{

    width:220px;

}

.story-cover{

    width:220px;

    display:block;

    border-radius:10px;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

}

.story-title{

    margin-top:15px;

    font-size:20px;

    font-weight:bold;

}

/* ==========================================================
   Story Engine Buttons
========================================================== */

button{

    min-width:180px;

    padding:14px 28px;

    margin:10px;

    border:none;

    border-radius:14px;

    background:#5F8F3A;

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

    box-shadow:0 4px 10px rgba(0,0,0,.18);

}

button:hover{

    background:#6FA548;

    transform:translateY(-2px);

}

button:active{

    background:#4F7831;

    transform:translateY(1px);

}

/* ==========================================================
   Reader
========================================================== */

.reader-page{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    text-align:center;

}

.story-page{

    width:100%;

    max-width:480px;

    height:auto;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    margin:25px auto;

    display:block;

}

}

.reader-page h2{

    margin-top:25px;

    margin-bottom:25px;

    font-size:34px;

    font-weight:700;

}

/* ==========================================================
   Congratulations
========================================================== */

.congratulations{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}

.celebration-icon{

    font-size:70px;

    margin-bottom:25px;

}

.congratulations h1{

    font-size:48px;

    margin-bottom:30px;

    color:#2E2E2E;

}

.congratulations p{

    font-size:24px;

    line-height:1.7;

    margin-bottom:18px;

    color:#555;

}

.congratulations button{

    margin-top:35px;

}

/* ==========================================================
   Culture Screen
========================================================== */

.culture-screen{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    text-align:center;

    padding:40px;

}

.culture-image-wrapper{

    position:relative;

    display:inline-block;

    width:100%;

    max-width:900px;

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.culture-image{

    display:block;

    width:100%;

    height:auto;

}

.culture-motto{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    text-align:center;

    font-size:42px;

    font-weight:bold;

    color:white;

    text-shadow:

        0 2px 5px rgba(0,0,0,.8),

        0 4px 12px rgba(0,0,0,.6);

}

@media (max-width:600px){

    .culture-screen{

        padding:20px;

    }

    .culture-motto{

        font-size:28px;

    }

}