body {
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #f2f2f2;
    background: url('https://www.marcpetrin.com/pl/images/cosmic_battle.png') no-repeat center center fixed;
    background-size: cover;
    background-color: #15171a;
}

.header {
    background: rgba(11, 27, 51, 0.92);
    padding: 0 0 0 0;
    box-shadow: 0 4px 16px 0 rgba(6,29,51,0.09);
    position: relative;
}
.nav-container {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 60px;
}
.top-btns {
    display: flex;
    align-items: center;
}
.header-btn, .home-link, .fb-top-btn {
    background: linear-gradient(93deg,#1976d2 35%, #53e3f1 100%);
    color: #fff !important;
    font-weight: 600;
    border-radius: 14px;
    padding: 7px 25px;
    text-decoration: none;
    margin: 0 6px 0 0;
    box-shadow: 0 2px 6px rgba(6,29,51,0.09);
    white-space: nowrap;
    display:inline-block;
    border: none;
    font-size: 1.09rem;
    letter-spacing: 0.03em;
    transition: background 0.14s, color 0.13s;
    cursor: pointer;
}
.header-btn:last-child, .home-link { margin: 0 0 0 6px; }
.header-btn:hover, .fb-top-btn:hover, .home-link:hover, .header-btn:focus, .home-link:focus {
    background: linear-gradient(85deg,#53e3f1 80%, #1976d2 100%);
    color: #213169 !important;
}

.breadcrumbs-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 230px;
}
.breadcrumbs {
    color: #aad7fb;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-align: center;
}
.breadcrumb-link { color: #53e3f1; text-decoration: none; font-weight: bold; }
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-separator { margin: 0 4px; color: #a3e9f5; }
.breadcrumb-current { color: #e0fbff; }

.main-content {
    width: 100vw;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 36px 0;
}
.storybook-container {
    width: 100%;
    max-width: 575px;
    min-height: 580px;
    background: rgba(18,22,34, 0.94);
    border-radius: 32px;
    box-shadow: 0 4px 32px 0 #102545bb;
    padding: 32px 13px 28px 13px;
    margin: 36px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    position: relative;
}
.progress-container { width: 100%; max-width: 380px; margin-bottom: 20px; margin-top: -12px;}
.progress-bar { height: 6px; background: rgba(83,227,241,.13); border-radius: 120px; width: 100%; margin-bottom: 3px; position: relative; }
.progress-fill { height: 100%; background: linear-gradient(94deg,#53e3f1 40%,#8db4ff 100%); width: 0%; transition: width .3s cubic-bezier(.8,0,.2,1);}
.progress-dots { display: flex; justify-content: space-between; margin-top: 2px;}
.progress-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(83,227,241,0.38); margin: 0 1px; cursor: pointer; transition: background .16s;}
.progress-dot.active { background: #53e3f1; box-shadow: 0 0 0 3px #29e7fc66;}

.story-page { width: 100%; display: flex; flex-direction: column; min-height: 411px;}
.page-content { width: 100%; display: flex; flex-direction: column; align-items: center;}
.image-container { width: 100%; margin-bottom: 18px; display: flex; justify-content: center;}
.story-image { width: 90%; max-width: 340px; max-height: 290px; border-radius: 16px; box-shadow: 0 2px 24px 0 #16274499; background: #29526433; object-fit: contain; }
.text-container { width: 98%; border-radius: 10px; padding: 18px 16px 14px 16px; background: rgba(17,41,51,.63); font-size: 1.22rem; line-height: 1.5; color: #f5faff; box-shadow: 0 1px 12px #1b273899; letter-spacing: 0.1px;}

.nav-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    gap: 10px;
}
.nav-btn, .fb-bottom-btn {
    padding: 10px 29px;
    font-size: 1.06rem;
    border-radius: 13px;
    background: linear-gradient(93deg, #166986ffc 45%, #259ed5cc 100%);
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 16px #1ca1c6a1;
    cursor: pointer;
    transition: background .21s;
    margin: 0 3px;
    min-width: 1px;
    max-width: 340px;
    text-align: center;
    white-space: normal;
    display: inline-block;
    text-decoration: none;
}
.nav-btn:hover, .fb-bottom-btn:hover {
    background: linear-gradient(89deg, #53e3f1 30%, #106aa8 100%);
    color: #263649;
}

@media (max-width: 900px) {
    .nav-container { flex-direction: column; gap: 9px; align-items: stretch;}
    .breadcrumbs-wrap { order: 2; }
    .top-btns { order: 1; justify-content: center; margin-bottom:7px;}
    .home-link { order: 3; }
}
@media (max-width: 700px) {
    .storybook-container {
        max-width: 98vw;
        min-height: 0;
        padding: 7vw 2vw;
    }
    .text-container { font-size: 1.04rem; padding: 11px 7px 10px 7px;}
    .story-image { max-width: 95vw; }
    .nav-buttons { flex-direction: column; align-items: stretch; gap: 14px;}
    .fb-bottom-btn, .nav-btn { width: 100%; max-width:unset; }
    .home-link, .header-btn, .fb-top-btn { width:100%; margin:3px 0;}
}