/* ==========================================================
   Story Engine v7
   Version 7.0.1
   Clean / corrected stylesheet
========================================================== */

* {
    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:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

    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;
    }
}


/* ==========================================================
   SCREEN 1 — LANGUAGE ENTRY
========================================================== */

.home-screen {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.home-illustration {
    position: relative;
    width: 100%;
    max-width: 1100px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .18);
}

.home-illustration img {
    display: block;
    width: 100%;
    height: auto;
}

.home-interface {
    position: absolute;
    top: 30%;
    right: 0;
    width: 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 45px 40px;
}

.compass-icon {
    font-size: 42px;
    margin-bottom: 10px;
}

.home-interface h1 {
    margin: 0 0 30px;
    font-size: 42px;
    line-height: 1.15;
    text-align: center;
    color: #143047;
}


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

.language-grid {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    justify-content: center;
    align-items: stretch;
}

.language-button {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 10px;

    border-radius: 16px;

    background: rgba(255, 255, 255, .94);
    color: #183044;

    border: 1px solid rgba(80, 80, 80, .10);

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

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

    backdrop-filter: blur(5px);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.language-button:hover {
    background: white;
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .16);
}

.language-button:active {
    transform: translateY(1px);
}


/* ==========================================================
   SCREEN 1 — MOBILE
========================================================== */

@media (max-width: 700px) {

    .home-screen {
        padding: 10px;
        align-items: flex-start;
    }

    .home-illustration {
        border-radius: 20px;
    }

    .home-interface {
        width: 64%;
        padding:
            30px
            15px
            25px;
    }

    .compass-icon {
        font-size: 28px;
        margin-bottom: 5px;
    }

    .home-interface h1 {
        font-size: 24px;
        margin-bottom: 18px;
    }

    /*
       2 columns on mobile.
       12 languages = 6 rows x 2 columns.
    */

    .language-grid {
        width: 100%;
        max-width: none;

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

        gap: 8px;
    }

    .language-button {
        width: 100%;
        min-width: 0;
        padding: 10px 6px;
        margin: 0;
        font-size: 13px;
        border-radius: 12px;
        line-height: 1.15;
    }
}


/* ==========================================================
   SCREEN 2 — SITUATION SELECTION
========================================================== */

.situations-screen {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 50px 20px;
}

.situations-container {
    width: 100%;
    max-width: 720px;
    text-align: center;
}

.situations-compass {
    font-size: 42px;
    margin-bottom: 12px;
}

.situations-title {
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 30px;
    color: #143047;
}

.situations-list {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.situation-card {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 18px;

    display: grid;
    grid-template-columns: 48px 1fr 30px;
    align-items: center;

    text-align: left;

    border-radius: 16px;

    background: #fff;
    color: #183044;

    border: 1px solid rgba(80, 80, 80, .08);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .08);

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.situation-card:hover {
    background: #fafafa;
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .12);
}

.situation-icon {
    font-size: 28px;
    text-align: center;
}

.situation-text {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.situation-arrow {
    font-size: 34px;
    font-weight: 400;
    color: #777;
    text-align: right;
}


/* ==========================================================
   SCREEN 2 — MOBILE
========================================================== */

@media (max-width: 700px) {

    .situations-screen {
        padding: 30px 14px;
    }

    .situations-title {
        font-size: 28px;
        margin-bottom: 22px;
    }

    .situations-compass {
        font-size: 32px;
    }

    .situation-card {
        min-height: 58px;
        grid-template-columns: 42px 1fr 24px;
        padding: 10px 13px;
    }

    .situation-icon {
        font-size: 24px;
    }

    .situation-text {
        font-size: 16px;
    }

    .situation-arrow {
        font-size: 29px;
    }
}


/* ==========================================================
   SCREEN 2 — SPACE BEFORE FEARS
========================================================== */

.fears-section {
    margin-top: 60px;
}

.fears-section .situations-list {
    margin-top: 20px;
}


/* ==========================================================
   COGNITIVE TOY
========================================================== */

.exercise-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 25px;
}

.exercise-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}


/* ==========================================================
   STORY PANELS
========================================================== */

.story-panel {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 20px;
}

.story-image {
    width: min(92vw, 900px);

    display: flex;
    justify-content: center;
    align-items: center;
}

.story-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
}


/* ==========================================================
   STORY NEXT / CONTINUE
========================================================== */

.story-next {
    margin-top: 18px;
    padding: 14px 42px;

    border: none;
    border-radius: 14px;

    font-size: 20px;
    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   STORY BACK
========================================================== */

.story-back {
    min-width: 150px;
    margin: 10px;
    padding: 12px 26px;

    border: none;
    border-radius: 14px;

    background: #777;
    color: white;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}

.story-back:hover {
    background: #666;
    transform: translateY(-2px);
}

.story-back:active {
    transform: translateY(1px);
}


/* ==========================================================
   STORY COVER
========================================================== */

.story-cover-image {
    width: 100%;
    max-width: 700px;
    height: 65vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.story-cover-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* ==========================================================
   STORY COVER — FULL SCREEN
========================================================== */

.situation-flow.story-cover {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;
}

.situation-flow.story-cover .story-cover-image {
    width: min(75vw, 650px);
    max-height: 70vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.situation-flow.story-cover .story-cover-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.situation-flow.story-cover .story-cover-title {
    margin: 20px 0 10px;
    font-size: 32px;
}


/* ==========================================================
   STORY NAVIGATION
========================================================== */

.story-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.story-navigation .story-back,
.story-navigation .story-next {
    margin: 0;
}

.story-arrow {
    min-width: 54px;
    width: 54px;
    height: 54px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 30px;
    line-height: 1;

    background: #5F8F3A;
    color: white;
}

.story-arrow:hover {
    background: #6FA548;
    transform: translateY(-2px);
}

.story-arrow:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

.story-navigation .story-next {
    margin: 0;
}

.story-counter {
    margin-top: 10px;
    font-size: 14px;
    color: #777;
}


/* ==========================================================
   COGNITIVE TOYS — MOBILE
========================================================== */

@media (max-width: 600px) {

    #app {
        padding: 12px;
    }

    .story-panel {
        padding: 12px;
    }

    .story-image {
        width: 96vw;
        max-width: 96vw;
    }

    .story-image img {
        width: 100%;
        max-height: 72vh;
    }

    .exercise-image {
        width: 96vw;
        max-width: 96vw;
    }

    .story-next,
    .story-back {
        width: auto;
        min-width: 150px;
        max-width: 90vw;
        padding: 12px 24px;
        font-size: 17px;
    }

    .story-navigation {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .story-cover-image {
        width: 96vw;
        max-width: 96vw;
        height: auto;
        max-height: 65vh;
    }

    .situation-flow.story-cover {
        padding: 12px;
    }

    .situation-flow.story-cover .story-cover-image {
        width: 96vw;
        max-width: 96vw;
        max-height: 65vh;
    }

    .situation-flow.story-cover .story-cover-image img {
        max-height: 65vh;
    }
}


/* ==========================================================
   MOBILE LANGUAGE MENU
========================================================== */

@media (max-width: 600px) {

    #app {
        width: 100%;
        min-height: 100vh;
        padding: 12px;
        overflow-x: hidden;
    }

    .language-grid {
        width: 100%;
        max-width: 100%;

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

        gap: 10px;
        padding: 0;
    }

    .language-button {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 12px 6px;

        font-size: 15px;
        line-height: 1.2;
    }
}


/* ==========================================================
   MOBILE HOME — FINAL LAYOUT
========================================================== */

@media (max-width: 600px) {

    .home-screen {
        width: 100%;
        min-height: 100svh;
        padding: 8px;

        display: flex;
        justify-content: center;
        align-items: flex-start;

        overflow: visible !important;
    }

    .home-illustration {
        position: relative !important;

        width: 100% !important;
        max-width: 430px !important;

        margin: 0 auto !important;

        overflow: visible !important;
    }

    .home-illustration > img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .home-interface {
        position: absolute !important;

        top: 40% !important;
        left: 50% !important;

        transform:
            translateX(-50%) !important;

        width: 88% !important;
        max-width: none !important;

        text-align: center !important;

        z-index: 50 !important;
    }

    .home-interface h1 {
        margin: 0 0 10px 0 !important;

        font-size: 20px !important;
        line-height: 1.08 !important;
    }

    /*
       Keep 2 columns on mobile.
       This avoids the later 3-column override
       from breaking the intended 12-language layout.
    */

    .language-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: none !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .language-button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 34px !important;

        margin: 0 !important;
        padding: 2px 2px !important;

        font-size: 11px !important;
        line-height: 1 !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .home-interface {
        top: 38% !important;
        width: 90% !important;
    }

    .home-interface h1 {
        font-size: 17px !important;
        margin-bottom: 7px !important;
    }

    .language-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 5px !important;
    }

    .language-button {
        height: 30px !important;
        font-size: 9px !important;
        padding: 1px !important;
    }
}