/* =========================================================
   LA RUCHE DE LASSIGNY
   UI / UX PREMIUM
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {

    /* Couleurs principales */
    --bg: #f4f0e6;
    --bg-secondary: #ebe3d3;

    --surface: rgba(255, 255, 255, 0.86);
    --surface-solid: #fffdf7;
    --surface-soft: #faf6eb;

    --text: #26221c;
    --text-soft: #6e675c;
    --text-light: #9b9488;

    --border: rgba(67, 55, 38, 0.11);
    --border-strong: rgba(67, 55, 38, 0.20);

    /* Identité La Ruche */
    --yellow: #f3bf2b;
    --yellow-light: #ffe78b;
    --yellow-soft: #fff2c4;
    --yellow-dark: #d79400;

    --honey: #c98418;
    --honey-dark: #8d5916;

    --brown: #503923;
    --brown-dark: #312217;
    --brown-light: #826044;

    /* Feedback */
    --green: #39734b;
    --green-bg: rgba(57, 115, 75, 0.10);

    --red: #ad4745;
    --red-bg: rgba(173, 71, 69, 0.10);

    /* Ombres */
    --shadow-xs:
        0 3px 10px rgba(48, 40, 26, 0.04);

    --shadow-sm:
        0 8px 24px rgba(48, 40, 26, 0.07);

    --shadow-md:
        0 18px 50px rgba(48, 40, 26, 0.10);

    --shadow-lg:
        0 35px 90px rgba(48, 40, 26, 0.16);

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;

    --transition:
        cubic-bezier(.2, .8, .2, 1);

}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 12% 8%,
            rgba(243, 191, 43, 0.12),
            transparent 27%
        ),

        radial-gradient(
            circle at 88% 18%,
            rgba(201, 132, 24, 0.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(80, 57, 35, 0.06),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            var(--bg),
            var(--bg-secondary)
        );

    background-attachment: fixed;

    line-height: 1.55;

    -webkit-font-smoothing: antialiased;

}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
input {
    outline: none;
}

button:focus-visible,
input:focus-visible {

    outline: 3px solid rgba(243, 191, 43, 0.45);

    outline-offset: 3px;

}


/* =========================================================
   3. APPLICATION
   ========================================================= */

.app {

    position: relative;

    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding:
        40px
        0
        90px;

}


/* =========================================================
   4. TEXTES
   ========================================================= */

h1,
h2,
h3,
h4 {

    letter-spacing: -0.03em;

}

h1 {

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.2rem
        );

    line-height: 1.02;

}

h2 {

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.3rem
        );

    line-height: 1.12;

}

h3 {

    font-size: 1.15rem;

}

p {

    margin-top: 0;

}

.muted {

    color: var(--text-soft);

}

.eyebrow,
.secret-eyebrow {

    margin: 0;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--text-soft);

}

.secret-eyebrow {

    color: var(--honey);

}


/* =========================================================
   5. ÉCRANS GÉNÉRAUX
   ========================================================= */

.screen {

    position: relative;

    overflow: hidden;

    padding:

        clamp(
            40px,
            7vw,
            82px
        )

        clamp(
            22px,
            5vw,
            55px
        );

    text-align: center;

    border:

        1px solid
        rgba(255, 255, 255, 0.7);

    border-radius: var(--radius-xl);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.91),
            rgba(255, 252, 241, 0.84)
        );

    box-shadow:

        var(--shadow-lg),

        inset
        0
        0
        0
        1px
        rgba(70, 55, 35, 0.04);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}

.hidden {

    display: none !important;

}


/* =========================================================
   6. ÉCRAN D'ACCUEIL
   ========================================================= */

.welcome-screen {

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255, 216, 92, 0.25),
            transparent 35%
        ),

        radial-gradient(
            circle at 15% 85%,
            rgba(201, 132, 24, 0.07),
            transparent 27%
        ),

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 249, 225, 0.88)
        );

}

.welcome-decoration {

    margin-bottom: 15px;

}

.bee {

    display: inline-block;

    font-size:
        clamp(
            4rem,
            9vw,
            6rem
        );

    filter:

        drop-shadow(
            0
            14px
            15px
            rgba(80, 50, 10, 0.12)
        );

    animation:

        beeFloat
        3s
        ease-in-out
        infinite;

}

@keyframes beeFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-3deg);

    }

    50% {

        transform:
            translateY(-10px)
            rotate(4deg);

    }

}

.main-title {

    max-width: 850px;

    margin:

        14px
        auto
        20px;

}

.main-title span {

    display: block;

    margin-top: 5px;

    color: var(--brown);

}

.intro-text {

    max-width: 690px;

    margin:

        0
        auto
        28px;

    font-size:

        clamp(
            1rem,
            1.6vw,
            1.18rem
        );

    color: var(--text-soft);

}


/* =========================================================
   7. BOUTONS
   ========================================================= */

.btn {

    position: relative;

    min-height: 48px;

    padding:
        11px
        17px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    color:
        var(--text);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(248, 244, 233, 0.90)
        );

    box-shadow:

        0
        5px
        16px
        rgba(61, 46, 28, 0.05),

        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.8);

    transition:

        transform
        .20s
        var(--transition),

        box-shadow
        .20s
        var(--transition),

        border-color
        .20s
        ease;

}

.btn:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(216, 148, 0, 0.30);

    box-shadow:

        0
        13px
        28px
        rgba(61, 46, 28, 0.10);

}

.btn:active {

    transform:
        translateY(0)
        scale(.985);

}

.btn-primary {

    color:
        #382500;

    border-color:
        rgba(170, 112, 0, 0.18);

    background:

        linear-gradient(
            135deg,
            #ffdc6b,
            #f4bd27 55%,
            #df9e09
        );

    box-shadow:

        0
        15px
        30px
        rgba(201, 140, 14, 0.25),

        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.55);

}

.btn-primary:hover {

    box-shadow:

        0
        20px
        40px
        rgba(201, 140, 14, 0.32);

}

.btn-large {

    min-height:
        55px;

    padding:
        13px
        25px;

    font-weight:
        750;

}


/* =========================================================
   8. JEU
   ========================================================= */

.game {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

}


/* =========================================================
   9. HEADER DU JEU
   ========================================================= */

.game-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius:
        var(--radius-lg);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.90),
            rgba(255, 252, 242, 0.83)
        );

    box-shadow:
        var(--shadow-md);

}

.game-header h2 {

    margin:
        4px
        0;

}

.code-area {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}

.code-label {

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    color:
        var(--text-soft);

}

.code-slots {

    display:
        flex;

    gap:
        7px;

}


/* =========================================================
   10. CASES DU CODE
   ========================================================= */

.slot {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        43px;

    height:
        48px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    font-size:
        1.1rem;

    font-weight:
        850;

    background:

        linear-gradient(
            160deg,
            #ffffff,
            #f4efe2
        );

    box-shadow:

        inset
        0
        1px
        2px
        rgba(60, 45, 20, 0.05),

        var(--shadow-xs);

}


/* =========================================================
   11. NAVIGATION DES SALLES
   ========================================================= */

.rooms-navigation {

    display:
        grid;

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

    gap:
        8px;

}

.room-btn,
.secret-room-btn {

    min-height:
        68px;

    padding:
        9px
        7px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        4px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    color:
        var(--text);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.91),
            rgba(248, 244, 233, 0.88)
        );

    box-shadow:
        var(--shadow-xs);

    font-size:
        .78rem;

    font-weight:
        700;

    transition:
        .20s
        var(--transition);

}

.room-btn span,
.secret-room-btn span {

    font-size:
        1.35rem;

}

.room-btn:hover,
.secret-room-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-sm);

}

.room-btn.active,
.secret-room-btn.active {

    color:
        #3b2700;

    border-color:
        rgba(216, 148, 0, 0.30);

    background:

        linear-gradient(
            145deg,
            #fff4bf,
            #ffe58d
        );

    box-shadow:

        0
        11px
        28px
        rgba(216, 148, 0, 0.15);

}


/* =========================================================
   12. LAYOUT
   ========================================================= */

.game-layout {

    display:
        grid;

    grid-template-columns:

        minmax(
            0,
            1fr
        )

        minmax(
            215px,
            245px
        );

    gap:
        18px;

    align-items:
        start;

}


/* =========================================================
   13. SCÈNE PRINCIPALE
   ========================================================= */

.scene {

    position:
        relative;

    min-height:
        520px;

    padding:
        25px;

    overflow:
        hidden;

    border:

        1px solid
        rgba(255, 255, 255, 0.70);

    border-radius:
        var(--radius-lg);

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(243, 191, 43, 0.10),
            transparent 27%
        ),

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(249, 246, 236, 0.90)
        );

    box-shadow:
        var(--shadow-md);

}


/* =========================================================
   14. BARRE LATÉRALE
   ========================================================= */

.sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}

.sidebar-card {

    padding:
        17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.91),
            rgba(249, 245, 235, 0.86)
        );

    box-shadow:
        var(--shadow-sm);

}

.sidebar-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        13px;

}

.sidebar-title > span {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        40px;

    height:
        40px;

    border-radius:
        12px;

    background:
        var(--yellow-soft);

    font-size:
        1.2rem;

}

.sidebar-title small {

    color:
        var(--text-light);

    font-size:
        .64rem;

    font-weight:
        800;

    letter-spacing:
        .1em;

}

.sidebar-title h3 {

    margin:
        0;

}


/* =========================================================
   15. INVENTAIRE + NOTES
   ========================================================= */

.inventory,
.notes {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}

.inventory-item,
.note-item {

    padding:
        10px
        11px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size:
        .84rem;

}

.empty-state {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        .84rem;

}


/* =========================================================
   16. OBJETS INTERACTIFS
   ========================================================= */

.object-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        135px;

    padding:
        19px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    color:
        var(--text);

    text-align:
        left;

    background:

        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.95),
            rgba(248, 244, 232, 0.91)
        );

    box-shadow:

        var(--shadow-sm),

        inset
        0
        1px
        0
        rgba(255, 255, 255, .90);

    transition:
        .22s
        var(--transition);

}

.object-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(216, 148, 0, 0.27);

    box-shadow:

        0
        20px
        42px
        rgba(62, 45, 22, 0.12);

}

.object-card-icon {

    font-size:
        2.7rem;

}

.object-card-title {

    display:
        block;

    margin-top:
        8px;

    font-weight:
        780;

}

.object-card-description {

    margin:
        4px
        0
        0;

    color:
        var(--text-soft);

    font-size:
        .88rem;

}


/* =========================================================
   17. GRILLE OBJETS
   ========================================================= */

.objects-grid {

    display:
        grid;

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

    gap:
        13px;

    margin-top:
        20px;

}


/* =========================================================
   18. MODALES
   ========================================================= */

.modal {

    position:
        fixed;

    z-index:
        1000;

    inset:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        20px;

    background:
        rgba(
            37,
            29,
            19,
            0.36
        );

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

}

.modal-card {

    width:
        min(
            650px,
            100%
        );

    max-height:
        min(
            760px,
            calc(
                100vh - 40px
            )
        );

    overflow-y:
        auto;

    padding:
        24px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .72
        );

    border-radius:
        var(--radius-lg);

    background:

        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.97),
            rgba(252, 248, 237, 0.95)
        );

    box-shadow:
        var(--shadow-lg);

    animation:
        modalIn
        .28s
        var(--transition)
        both;

}

@keyframes modalIn {

    from {

        opacity:
            0;

        transform:
            translateY(12px)
            scale(.98);

    }

    to {

        opacity:
            1;

        transform:
            none;

    }

}

.modal-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

}

.modal-header h2 {

    margin:
        0;

}

.icon-btn {

    flex:
        0
        0
        auto;

    width:
        43px;

    height:
        43px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    color:
        var(--text-soft);

    background:
        var(--surface-soft);

    transition:
        .18s
        var(--transition);

}

.icon-btn:hover {

    color:
        var(--text);

    transform:
        rotate(4deg);

}

.modal-content {

    margin-top:
        20px;

}


/* =========================================================
   19. FORMULAIRES
   ========================================================= */

.answer-form {

    display:
        flex;

    gap:
        9px;

    margin-top:
        15px;

}

.answer-form input {

    flex:
        1;

    min-width:
        0;

    min-height:
        49px;

    padding:
        11px
        14px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        13px;

    color:
        var(--text);

    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    transition:
        .18s
        ease;

}

.answer-form input:focus {

    border-color:
        var(--yellow-dark);

    box-shadow:

        0
        0
        0
        4px
        rgba(
            243,
            191,
            43,
            .16
        );

}


/* =========================================================
   20. FEEDBACK
   ========================================================= */

.feedback {

    margin-top:
        12px;

    padding:
        10px
        12px;

    border-radius:
        11px;

    font-size:
        .9rem;

}

.feedback.success {

    color:
        var(--green);

    background:
        var(--green-bg);

}

.feedback.error {

    color:
        var(--red);

    background:
        var(--red-bg);

}


/* =========================================================
   21. PORTE
   ========================================================= */

.door-scene {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}

.door-wrapper {

    perspective:
        1200px;

    margin:
        25px
        auto;

}

.door-frame {

    position:
        relative;

    width:
        215px;

    height:
        300px;

    overflow:
        hidden;

    border:
        7px solid
        #49321f;

    border-bottom:
        0;

    border-radius:
        27px
        27px
        0
        0;

    background:
        var(--brown-dark);

    box-shadow:

        0
        30px
        60px
        rgba(
            37,
            25,
            14,
            .24
        );

}

.door-inside {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    background:

        radial-gradient(
            circle,
            #ffe88c,
            #dcb154 60%,
            #956111
        );

    font-size:
        4rem;

}

.door {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    transform-origin:
        left center;

    color:
        white;

    background:

        linear-gradient(
            105deg,
            #5d3a22,
            #8f5932 52%,
            #6d4328
        );

    box-shadow:

        inset
        -18px
        0
        26px
        rgba(
            0,
            0,
            0,
            .15
        );

    transition:
        transform
        1.15s
        var(--transition);

}

.door.open {

    transform:
        rotateY(-84deg);

}

.door-knob {

    position:
        absolute;

    right:
        18px;

    top:
        50%;

    width:
        19px;

    height:
        19px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 35% 35%,
            #ffe7a6,
            #c28c2c
        );

    box-shadow:

        0
        2px
        5px
        rgba(
            0,
            0,
            0,
            .25
        );

}


/* =========================================================
   22. FIN NORMALE
   ========================================================= */

.ending-screen {

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(
                243,
                191,
                43,
                .20
            ),
            transparent
            34%
        ),

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .94
            ),
            rgba(
                255,
                248,
                226,
                .90
            )
        );

}

.success-icon {

    font-size:
        4.5rem;

}

.ending-title {

    margin:
        9px
        0
        12px;

}

.ending-text {

    max-width:
        650px;

    margin:
        0
        auto;

    color:
        var(--text-soft);

}

.success-message {

    display:
        inline-block;

    margin-top:
        20px;

    padding:
        10px
        16px;

    border-radius:
        999px;

    color:
        var(--green);

    background:
        var(--green-bg);

    font-weight:
        750;

}


/* =========================================================
   23. PETITE RUCHE EASTER EGG
   ========================================================= */

.end-decoration {

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        20px;

    align-items:
        end;

    max-width:
        560px;

    margin:
        35px
        auto
        0;

    padding:
        18px;

    text-align:
        left;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        rgba(
            255,
            255,
            255,
            .55
        );

}

.end-decoration p {

    margin:
        4px
        0
        0;

    color:
        var(--text-soft);

    font-size:
        .86rem;

}

.tiny-hive {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    min-width:
        85px;

    padding:
        11px;

    border:
        0;

    border-radius:
        15px;

    color:
        var(--text-soft);

    background:
        transparent;

    opacity:
        .72;

    transition:
        .22s
        var(--transition);

}

.tiny-hive:hover {

    opacity:
        1;

    transform:
        translateY(-3px)
        scale(1.05);

}

.tiny-hive-icon {

    font-size:
        2.8rem;

}


/* =========================================================
   24. REVEAL SECRET
   ========================================================= */

.secret-reveal {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        19px;

    margin-top:
        18px;

    padding:
        25px;

    border:
        1px solid
        rgba(
            201,
            132,
            24,
            .22
        );

    border-radius:
        var(--radius-lg);

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(
                243,
                191,
                43,
                .13
            ),
            transparent
            30%
        ),

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .94
            ),
            rgba(
                250,
                243,
                218,
                .90
            )
        );

    box-shadow:
        var(--shadow-md);

}

.secret-symbol {

    font-size:
        3rem;

}


/* =========================================================
   25. MODE EXPERT
   ========================================================= */

.expert-badge {

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(
            201,
            132,
            24,
            .24
        );

    border-radius:
        999px;

    color:
        var(--honey-dark);

    background:
        var(--yellow-soft);

    font-size:
        .7rem;

    font-weight:
        850;

    letter-spacing:
        .12em;

}

.secret-card {

    border-color:
        rgba(
            201,
            132,
            24,
            .18
        );

}

.btn-hive {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    width:
        100%;

    font-weight:
        760;

}


/* =========================================================
   26. RUCHE FINALE
   ========================================================= */

.hive-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            88px
        );

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        24px;

}

.hive-cell {

    width:
        88px;

    height:
        88px;

    border:
        0;

    clip-path:

        polygon(

            25% 6.7%,

            75% 6.7%,

            100% 50%,

            75% 93.3%,

            25% 93.3%,

            0 50%

        );

    color:
        var(--text);

    background:

        linear-gradient(
            145deg,
            #fff,
            #f5ecd2
        );

    font-size:
        1.3rem;

    font-weight:
        850;

    filter:

        drop-shadow(
            0
            8px
            8px
            rgba(
                70,
                45,
                8,
                .09
            )
        );

    transition:
        .17s
        var(--transition);

}

.hive-cell:hover {

    transform:
        scale(1.07);

    background:

        linear-gradient(
            145deg,
            #fff7c7,
            #efc53d
        );

    filter:

        drop-shadow(
            0
            13px
            13px
            rgba(
                170,
                110,
                0,
                .16
            )
        );

}

.hive-cell.selected {

    color:
        #402900;

    background:

        linear-gradient(
            145deg,
            #ffe77d,
            #e8aa12
        );

}


/* =========================================================
   27. COMING SOON
   ========================================================= */

.coming-soon-screen {

    background:

        radial-gradient(
            circle at 50% 13%,
            rgba(
                255,
                211,
                68,
                .24
            ),
            transparent
            30%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(
                201,
                132,
                24,
                .08
            ),
            transparent
            27%
        ),

        linear-gradient(
            150deg,
            rgba(
                255,
                255,
                255,
                .95
            ),
            rgba(
                255,
                247,
                215,
                .91
            )
        );

}

.final-bee {

    margin-bottom:
        12px;

}

.coming-card {

    max-width:
        650px;

    margin:
        30px
        auto
        0;

    padding:
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-lg);

    background:
        rgba(
            255,
            255,
            255,
            .68
        );

    box-shadow:
        var(--shadow-sm);

}

.coming-label {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        .72rem;

    font-weight:
        850;

    letter-spacing:
        .26em;

}

.coming-logo {

    margin:
        14px
        0;

    font-size:

        clamp(
            2.7rem,
            7vw,
            5rem
        );

    line-height:
        .95;

    letter-spacing:
        .12em;

    color:
        var(--brown);

    font-weight:
        900;

}

.coming-card h4 {

    font-size:
        1.3rem;

}

.coming-card p {

    color:
        var(--text-soft);

}

.future-url {

    margin-top:
        22px;

    padding:
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        var(--surface-soft);

}

.future-url small {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--text-light);

    font-size:
        .65rem;

    font-weight:
        850;

    letter-spacing:
        .15em;

}

.future-url strong {

    font-size:
        1.05rem;

}

.final-quote {

    margin-top:
        27px;

    font-weight:
        760;

}


/* =========================================================
   28. ANIMATIONS APPARITION
   ========================================================= */

.game-header,
.scene,
.sidebar-card,
.rooms-navigation,
.secret-reveal {

    animation:

        uiAppear
        .45s
        var(--transition)
        both;

}

@keyframes uiAppear {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            none;

    }

}


/* =========================================================
   29. RESPONSIVE TABLETTE
   ========================================================= */

@media (
    max-width:
    980px
) {

    .rooms-navigation {

        grid-template-columns:

            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );

    }

    .game-layout {

        grid-template-columns:

            minmax(
                0,
                1fr
            )

            210px;

    }

}


/* =========================================================
   30. RESPONSIVE MOBILE
   ========================================================= */

@media (
    max-width:
    760px
) {

    .app {

        width:
            min(
                100% - 20px,
                1180px
            );

        padding-top:
            18px;

    }


    .game-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .code-area {

        width:
            100%;

        justify-content:
            space-between;

    }


    .rooms-navigation {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .game-layout {

        grid-template-columns:
            1fr;

    }


    .scene {

        min-height:
            450px;

    }


    .objects-grid {

        grid-template-columns:
            1fr;

    }


    .answer-form {

        flex-direction:
            column;

    }


    .answer-form .btn {

        width:
            100%;

    }


    .secret-reveal {

        flex-direction:
            column;

    }


    .end-decoration {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .tiny-hive {

        margin:
            auto;

    }

}


/* =========================================================
   31. PETITS ÉCRANS
   ========================================================= */

@media (
    max-width:
    430px
) {

    .room-btn,
    .secret-room-btn {

        min-height:
            60px;

        font-size:
            .74rem;

    }


    .slot {

        width:
            36px;

        height:
            42px;

    }


    .hive-grid {

        grid-template-columns:

            repeat(
                3,
                66px
            );

    }


    .hive-cell {

        width:
            66px;

        height:
            66px;

    }


    .modal {

        padding:
            10px;

    }


    .modal-card {

        padding:
            18px;

    }

}


/* =========================================================
   32. ACCESSIBILITÉ
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;

    }

}

.coming-logo-image {
    display: block;
    width: min(460px, 92%);
    height: auto;
    margin: 20px auto 30px;
    object-fit: contain;
}