/* =======================================================
   TACTICAL WAR ONLINE
   MOBILE PAYSAGE — PHASE 1 / GAME
   ======================================================= */

html.two-mobile-game,
html.two-mobile-game body.page-game{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    overscroll-behavior:none;
}

html.two-mobile-game
body.page-game{
    display:block!important;
}

/* =======================================================
   PORTRAIT
   ======================================================= */

#two-mobile-orientation-overlay{
    display:none;
}

html.two-mobile-game.two-mobile-game-portrait
#two-mobile-orientation-overlay{
    position:fixed;
    inset:0;
    z-index:30000;

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

    box-sizing:border-box;

    padding:
        max(24px,env(safe-area-inset-top))
        max(24px,env(safe-area-inset-right))
        max(24px,env(safe-area-inset-bottom))
        max(24px,env(safe-area-inset-left));

    background:
        radial-gradient(
            circle at center,
            #18110b 0%,
            #090705 58%,
            #030201 100%
        );
}

html.two-mobile-game.two-mobile-game-portrait
#two-ui-stage{
    visibility:hidden!important;
}

.two-mobile-orientation-card{
    width:min(420px,90vw);

    box-sizing:border-box;

    padding:
        28px
        24px;

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

    gap:9px;

    color:#f1dfb7;

    text-align:center;

    background:
        rgba(
            28,
            19,
            12,
            .96
        );

    border:
        1px
        solid
        #c38a2c;

    border-radius:
        8px;

    box-shadow:
        0
        12px
        35px
        rgba(0,0,0,.72);
}

.two-mobile-orientation-icon{
    color:#d6b35f;

    font-size:3em;
    line-height:1;
}

.two-mobile-orientation-card
strong{
    font-family:
        var(--font-game-title);

    font-size:1.05em;

    text-transform:
        uppercase;
}

.two-mobile-orientation-card
span{
    color:#c9b58e;

    font-size:.95em;
}

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

html.two-mobile-game.two-mobile-game-landscape
body.page-game
#two-ui-stage{
    position:fixed!important;

    left:
        var(
            --two-mobile-stage-left
        )!important;

    top:
        var(
            --two-mobile-stage-top
        )!important;

    right:auto!important;
    bottom:auto!important;

    width:
        var(
            --two-mobile-stage-width
        )!important;

    height:
        var(
            --two-mobile-stage-height
        )!important;

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

    display:block!important;

    overflow:hidden!important;
}

html.two-mobile-game.two-mobile-game-landscape
body.page-game
#two-ui-shell{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    height:100%!important;
    min-height:0!important;
    max-height:none!important;

    flex:none!important;

    display:block!important;

    transform:none!important;
    transform-origin:initial!important;
}

/*
 * Le header d'origine n'est pas détruit.
 * Ses composants utiles ont été déplacés par mobile-ui.js.
 */
html.two-mobile-game.two-mobile-game-landscape
body.page-game
#global-header{
    display:none!important;
}

/* =======================================================
   3 ZONES HORIZONTALES
   gauche | carte | droite
   ======================================================= */

html.two-mobile-game.two-mobile-game-landscape
body.page-game
#main-layout{
    position:relative!important;

    width:100%!important;
    height:100%!important;

    min-width:0!important;
    min-height:0!important;

    box-sizing:border-box!important;

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

    gap:0!important;

    display:grid!important;

    grid-template-columns:
        var(--two-mobile-side-width)
        var(--two-mobile-map-width)
        var(--two-mobile-side-width)
        !important;

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

    overflow:hidden!important;
}

/* =======================================================
   ZONE GAUCHE
   Navigation + Sidebar personnage
   ======================================================= */

#two-mobile-left-zone{
    min-width:0;
    min-height:0;

    height:100%;

    display:grid;

    grid-template-columns:
        var(--two-mobile-nav-width)
        minmax(0,1fr);

    overflow:hidden;

    background:
        #080604;
}

html.two-mobile-game .page-game .creator-sidebar-toggle{
    top:4px!important;
    left:calc(var(--two-mobile-nav-width) + 4px)!important;
    width:26px!important;
    height:26px!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:0!important;
}

html.two-mobile-game .page-game .creator-sidebar-toggle::before{
    content:"🛠";
    font-size:14px;
    line-height:1;
}

/* =======================================================
   HEADER REVISITÉ = NAVIGATION VERTICALE
   AUCUN SCROLL
   ======================================================= */

#two-mobile-nav{
    min-width:0;
    min-height:0;

    height:100%;

    box-sizing:border-box;

    display:flex;

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

    padding:
        3px
        2px;

    background:
        linear-gradient(
            180deg,
            #17100b 0%,
            #0d0906 48%,
            #050403 100%
        );

    border-right:
        1px
        solid
        rgba(
            195,
            138,
            44,
            .38
        );

    overflow:hidden!important;
}

#two-mobile-nav
#nav-links{
    width:100%!important;
    max-width:none!important;

    height:100%!important;

    min-width:0!important;

    display:grid!important;

    grid-template-columns:
        1fr
        !important;

    grid-auto-rows:
        var(
            --two-mobile-nav-button
        )
        !important;

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

    gap:
        1px
        !important;

    overflow:hidden!important;
}

#two-mobile-nav
#nav-links
.header-nav-link{
    width:
        var(
            --two-mobile-nav-button
        )!important;

    height:
        var(
            --two-mobile-nav-button
        )!important;

    min-width:0!important;
    min-height:0!important;

    margin:0!important;

    border-radius:
        6px!important;

    touch-action:
        manipulation;
}

#two-mobile-nav
#nav-links
.header-nav-link
> img{
    width:
        min(
            32px,
            calc(
                var(--two-mobile-nav-button)
                -
                5px
            )
        )
        !important;

    height:
        min(
            32px,
            calc(
                var(--two-mobile-nav-button)
                -
                5px
            )
        )
        !important;
}

#two-mobile-nav
.header-nav-badge{
    transform:
        scale(.72);

    transform-origin:
        top right;
}

/*
 * Navigation volontairement non scrollable.
 */
#two-mobile-nav,
#two-mobile-nav
#nav-links{
    scrollbar-width:none;
}

#two-mobile-nav::-webkit-scrollbar,
#two-mobile-nav
#nav-links::-webkit-scrollbar{
    display:none;
}

/* =======================================================
   SIDEBAR GAUCHE — MOBILE COMPACT SANS SCROLL
   ======================================================= */

html.two-mobile-game .page-game #sidebar-left{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    flex:none!important;
    gap:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    scrollbar-width:none!important;
    font-size:clamp(8px,2.25dvh,9px);
}

html.two-mobile-game .page-game #sidebar-left::-webkit-scrollbar{display:none;}

html.two-mobile-game .page-game #sidebar-left .game-character-sheet{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:3px 5px 4px!important;
    overflow:hidden!important;
    background-size:100% 100%!important;
}

/* PROFIL */

html.two-mobile-game .page-game .game-profile-header{margin-top:-2px!important;}

html.two-mobile-game .page-game .game-profile-visual{
    width:clamp(56px,17dvh,68px)!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin:3px auto 0!important;
}

html.two-mobile-game .page-game .game-profile-portrait-window{
    width:68%!important;
    height:68%!important;
}

html.two-mobile-game .page-game .game-profile-sprite{
    background-position:center 8px!important;
}

html.two-mobile-game .page-game .game-profile-tool{
    width:18px!important;
    height:18px!important;
    bottom:5px!important;
    padding:1px!important;
}

html.two-mobile-game .page-game .game-profile-tool img{
    width:14px!important;
    height:14px!important;
}

html.two-mobile-game .page-game .game-profile-tool-settings{right:3px!important;}
html.two-mobile-game .page-game .game-profile-tool-attributes{left:3px!important;}

/* IDENTITÉ */

html.two-mobile-game .page-game .game-character-selector-container{margin:0!important;}

html.two-mobile-game .page-game .game-character-selector{
    width:100%!important;
    height:22px!important;
    margin:0!important;
    padding:1px 12px 1px 3px!important;
    font-size:8.5px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-profile-type,
html.two-mobile-game .page-game .char-pos-styled{
    margin:1px 0 0!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:normal!important;
}

html.two-mobile-game .page-game .game-profile-progression{
    gap:2px!important;
    margin-top:1px!important;
    font-size:8px!important;
    line-height:1!important;
}

/* SECTIONS */

html.two-mobile-game .page-game .game-sheet-section{
    padding:2px 0!important;
}

html.two-mobile-game .page-game .game-sheet-section>h3,
html.two-mobile-game .page-game .game-next-turn-content>h3{
    margin:0 0 1px!important;
    padding:0!important;
    font-size:8px!important;
    line-height:1!important;
}

/* PROCHAIN TOUR */

html.two-mobile-game .page-game .game-next-turn-section{
    grid-template-columns:15px minmax(0,1fr) 15px!important;
    column-gap:1px!important;
    margin-top:1px!important;
    padding:2px 1px!important;
}

html.two-mobile-game .page-game .game-sheet-large-icon{
    width:13px!important;
    height:13px!important;
}

html.two-mobile-game .page-game #next-turn-date{
    font-size:8.5px!important;
    line-height:1!important;
}

/* RESSOURCES */

html.two-mobile-game .page-game .game-stats-list{
    gap:0!important;
    padding:0 2px!important;
}

html.two-mobile-game .page-game .game-stat-line{
    min-height:12px!important;
    grid-template-columns:11px minmax(0,1fr) auto!important;
    column-gap:1px!important;
    font-size:8px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-stat-icon{
    width:9px!important;
    height:9px!important;
}

html.two-mobile-game .page-game .game-stat-value{
    min-width:12px!important;
    font-size:1em!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-sheet-inner-separator{
    margin:1px 0!important;
}

/* SANTÉ + COMBAT */

html.two-mobile-game .page-game .game-stat-pair-row{
    min-height:13px!important;
    padding:0 2px!important;
    column-gap:1px!important;
}

html.two-mobile-game .page-game .game-stat-cell{
    grid-template-columns:10px minmax(0,1fr) auto!important;
    column-gap:1px!important;
    font-size:7.8px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-stat-pair-separator{
    height:10px!important;
}

/* STATUT */

html.two-mobile-game .page-game .game-status-section{
    flex:0 0 auto!important;
    min-height:16px!important;
    padding-bottom:2px!important;
}

html.two-mobile-game .page-game .game-status-list{
    min-height:12px!important;
    gap:1px 3px!important;
    font-size:7.8px!important;
    line-height:1!important;
}

/* =======================================================
   CARTE
   850 × 790 LOGIQUES INCHANGÉS
   ======================================================= */

#two-mobile-map-stage{
    position:relative;

    align-self:center;
    justify-self:center;

    width:
        var(
            --two-mobile-map-width
        );

    height:
        var(
            --two-mobile-map-height
        );

    min-width:0;
    min-height:0;

    overflow:hidden;

    isolation:isolate;

    background:
        #000;
}

html.two-mobile-game
.page-game
#two-mobile-map-stage
#game-viewport{
    position:absolute!important;

    z-index:1!important;

    left:0!important;
    top:0!important;

    right:auto!important;
    bottom:auto!important;

    width:850px!important;
    min-width:850px!important;
    max-width:850px!important;

    height:790px!important;
    min-height:790px!important;
    max-height:790px!important;

    flex:none!important;

    transform:
        scale(
            var(
                --two-mobile-map-scale
            )
        )
        !important;

    transform-origin:
        top left
        !important;

    touch-action:
        manipulation;
}

/*
 * Même transformation pour Game Event Banner
 * et Game Action Banner.
 */
html.two-mobile-game
.page-game
#two-mobile-map-stage
#game-viewport-overlay-host{
    position:absolute!important;

    z-index:3!important;

    left:0!important;
    top:0!important;

    right:auto!important;
    bottom:auto!important;

    width:850px!important;
    height:790px!important;

    transform:
        scale(
            var(
                --two-mobile-map-scale
            )
        )
        !important;

    transform-origin:
        top left
        !important;

    pointer-events:none!important;
}

html.two-mobile-game
.page-game
#game-viewport-overlay-host
> *{
    pointer-events:auto;
}

/* =======================================================
   OUTILS DE LA CARTE
   ======================================================= */

#two-mobile-map-tools{
    position:absolute;

    z-index:2;

    left:5px;
    right:5px;
    top:5px;

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    pointer-events:none;
}

.two-mobile-map-tools-group{
    display:flex;

    align-items:center;

    gap:4px;

    pointer-events:auto;
}

/* HH:MM:SS uniquement */

#two-mobile-clock{
    min-width:
        56px;

    height:
        27px;

    box-sizing:border-box;

    display:flex;

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

    padding:
        0
        6px;

    color:
        #8fc781;

    background:
        rgba(
            8,
            6,
            4,
            .76
        );

    border:
        1px
        solid
        rgba(
            195,
            138,
            44,
            .48
        );

    border-radius:
        4px;

    font-family:
        monospace;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    text-shadow:
        0
        1px
        2px
        #000;

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

/* Son + Réglages */

#two-mobile-map-tools
:is(
    #header-sound-toggle,
    #header-settings-button
){
    width:27px!important;
    height:27px!important;

    min-width:27px!important;
    min-height:27px!important;

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

#two-mobile-map-tools
.header-utility-icon{
    width:17px!important;
    height:17px!important;
}

/* Déconnexion */

#two-mobile-map-tools
:is(
    #header-logout-button,
    #header-login-button
){
    width:auto!important;
    min-width:0!important;

    height:27px!important;
    min-height:27px!important;

    margin:0!important;

    padding:
        0
        7px
        !important;

    font-size:
        9px!important;

    white-space:
        nowrap!important;
}

/* =======================================================
   SIDEBAR DROITE — MOBILE COMPACT SANS SCROLL
   ======================================================= */

html.two-mobile-game .page-game #sidebar-right{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    flex:none!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    scrollbar-gutter:auto!important;
    font-size:clamp(8px,2.3dvh,9.5px);
}

/* INFORMATION CIBLE */

html.two-mobile-game .page-game .game-target-panel{
    flex:0 0 clamp(88px,24dvh,98px)!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:14px 5px 4px!important;
    background-size:100% 100%!important;
    overflow:hidden!important;
}

html.two-mobile-game .page-game .game-target-panel>h3{
    margin:0 0 2px!important;
    padding:0 0 2px!important;
    font-size:8.5px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-target-placeholder{
    margin:8px 0 0!important;
    font-size:8px!important;
    line-height:1.05!important;
}

html.two-mobile-game .page-game .game-target-summary{
    grid-template-columns:30px minmax(0,1fr)!important;
    column-gap:3px!important;
    padding:0 1px!important;
}

html.two-mobile-game .page-game .game-target-thumbnail{
    width:28px!important;
    height:28px!important;
    border-width:1px!important;
}

html.two-mobile-game .page-game .game-target-name{
    margin:0 0 1px!important;
    font-size:8.5px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game :is(
    .game-target-meta,
    .game-target-description,
    .game-target-warning,
    .game-target-distance,
    .game-target-ready
){
    margin:1px 0 0!important;
    font-size:7.7px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-target-enter-button{
    margin-top:1px!important;
    min-height:22px!important;
}

/* ACTIONS */

html.two-mobile-game .page-game .game-actions-panel{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:14px 6px 4px!important;
    background-size:100% 100%!important;
    overflow:hidden!important;
}

html.two-mobile-game .page-game .game-actions-panel>h3{
    margin:0 0 3px!important;
    padding:0 0 2px!important;
    font-size:8.5px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-action-list{
    min-height:0!important;
    gap:2px!important;
    overflow:hidden!important;
}

html.two-mobile-game .page-game .game-action-item{
    gap:2px!important;
    margin:0!important;
}

html.two-mobile-game .page-game .game-action-label{
    margin:0!important;
    font-size:8px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-action-select{
    height:22px!important;
    min-height:22px!important;
    padding:1px 16px 1px 4px!important;
    font-size:9px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .fantasy-button-game-action{
    width:100%!important;
    max-width:none!important;
    height:24px!important;
    min-height:24px!important;
    margin:0!important;
    padding:0 4px!important;
    font-size:9px!important;
    line-height:1!important;
    touch-action:manipulation;
}

html.two-mobile-game .page-game .game-action-separator{
    height:1px!important;
    margin:0!important;
}

/* PENSE-BÊTE */

html.two-mobile-game .page-game .game-memo-panel{
    flex:1 1 auto!important;
    min-height:32px!important;
    margin:0!important;
    padding:3px 5px!important;
}

html.two-mobile-game .page-game .game-memo-title{
    margin:0 0 2px!important;
    padding:0 0 2px!important;
    font-size:7.8px!important;
    line-height:1!important;
}

html.two-mobile-game .page-game .game-memo-content{
    min-height:0!important;
    padding:2px!important;
    font-size:8px!important;
    line-height:1.05!important;
}

html.two-mobile-game .page-game .game-memo-help{
    min-height:11px!important;
    margin-top:2px!important;
    font-size:7.5px!important;
    line-height:1!important;
}

/* =======================================================
   TRÈS FAIBLE HAUTEUR
   ======================================================= */

@media (max-height:340px){

    html.two-mobile-game
    .page-game
    .game-target-description,

    html.two-mobile-game
    .page-game
    .game-target-distance{
        display:none!important;
    }

    html.two-mobile-game
    .page-game
    .game-target-panel{
        flex-basis:
            96px!important;
    }

    html.two-mobile-game
    .page-game
    .game-profile-visual{
        width:
            min(
                72px,
                calc(100% - 4px)
            )
            !important;
    }
}

/* =======================================================
   TACTILE
   ======================================================= */

html.two-mobile-game
.page-game
:is(
    button,
    a,
    select
){
    touch-action:
        manipulation;
}

@media (hover:none){

    html.two-mobile-game
    .page-game
    .hex:hover{
        filter:none!important;
        transform:none!important;
    }
}

/* =======================================================
   TUTORIEL — ADAPTATION PHASE 1
   ======================================================= */

html.two-mobile-game
.tutorial-quest-banner{
    height:
        var(
            --two-mobile-tutorial-banner-height
        )
        !important;

    min-height:
        var(
            --two-mobile-tutorial-banner-height
        )
        !important;

    max-height:
        var(
            --two-mobile-tutorial-banner-height
        )
        !important;

    gap:
        7px!important;

    padding:
        6px
        8px
        !important;

    font-size:
        clamp(
            8px,
            2.45dvh,
            11px
        )
        !important;
}

html.two-mobile-game
.tutorial-banner-icon{
    flex-basis:
        30px!important;

    font-size:
        1.6em!important;
}

html.two-mobile-game
.tutorial-step-title{
    margin-bottom:
        3px!important;
}

html.two-mobile-game
.tutorial-step-reward{
    margin-top:
        3px!important;
}

html.two-mobile-game
.tutorial-step-actions{
    width:
        95px!important;

    gap:
        3px!important;
}

html.two-mobile-game
.tutorial-step-actions
.tutorial-btn{
    min-height:
        25px!important;

    padding:
        3px
        5px
        !important;

    font-size:
        .74em!important;
}

html.two-mobile-game
.tutorial-guide-arrow{
    width:
        44px!important;

    height:
        44px!important;

    font-size:
        44px!important;
}

html.two-mobile-game
.tutorial-guide-hex{
    transform:
        scale(
            var(
                --two-mobile-map-scale
            )
        );

    transform-origin:
        top left;
}

html.two-mobile-game
.tutorial-intro-card,
html.two-mobile-game
.tutorial-parchment-card{
    max-height:
        92%;

    overflow:
        auto;
}

/* =======================================================
   MOBILE — ENTRÉE GLOBALE / PLEIN ÉCRAN
   ======================================================= */

html.two-mobile-device,
html.two-mobile-device body{
    margin:0;
    padding:0;
    overscroll-behavior:none;
}

html.two-mobile-device
body{
    min-width:0;
}

/* =======================================================
   PORTRAIT — TOUT L'ÉCRAN
   ======================================================= */

html.two-mobile-device.two-mobile-device-portrait
#two-mobile-orientation-overlay{
    position:fixed;
    inset:0;

    z-index:40000;

    width:100dvw;
    height:100dvh;

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

    box-sizing:border-box;

    padding:
        max(20px,env(safe-area-inset-top))
        max(20px,env(safe-area-inset-right))
        max(20px,env(safe-area-inset-bottom))
        max(20px,env(safe-area-inset-left));

    background:
        radial-gradient(circle at center,#18110b 0%,#080604 62%,#020101 100%);
}

html.two-mobile-device.two-mobile-device-landscape
#two-mobile-orientation-overlay{
    display:none!important;
}

/* =======================================================
   DEMANDE PLEIN ÉCRAN
   ======================================================= */

#two-mobile-fullscreen-launcher{
    position:fixed;
    inset:0;
    z-index:35000;

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

    box-sizing:border-box;

    padding:
        max(12px,env(safe-area-inset-top))
        max(12px,env(safe-area-inset-right))
        max(12px,env(safe-area-inset-bottom))
        max(12px,env(safe-area-inset-left));

    background:rgba(3,2,1,.76);
}

#two-mobile-fullscreen-launcher.is-hidden,
#two-mobile-fullscreen-launcher.is-dismissed{
    display:none!important;
}

.two-mobile-fullscreen-card{
    width:min(390px,88vw);

    box-sizing:border-box;

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

    gap:9px;

    padding:20px 24px;

    color:#f1dfb7;
    background:rgba(25,17,10,.98);

    border:1px solid #c38a2c;
    border-radius:7px;

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

    text-align:center;
}

.two-mobile-fullscreen-card strong{
    color:#e1c477;

    font-family:var(--font-game-title);
    font-size:1em;
    text-transform:uppercase;
}

.two-mobile-fullscreen-text{
    color:#c9b58e;

    font-size:.92em;
    line-height:1.2;
}

#two-mobile-fullscreen-button,
#two-mobile-fullscreen-skip{
    width:100%;
    min-height:38px;

    box-sizing:border-box;

    border-radius:4px;

    font-family:var(--font-game-title);
    font-weight:700;

    touch-action:manipulation;
}

#two-mobile-fullscreen-button{
    color:#f8e8c7;

    background:linear-gradient(#496a45,#2d4b30 48%,#152919);

    border:1px solid #c38a2c;
}

#two-mobile-fullscreen-skip{
    color:#c9b58e;

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

    border:1px solid rgba(195,138,44,.35);

    font-size:.72em;
}

#two-mobile-fullscreen-help{
    color:#d5bd8f;

    font-size:.78em;
    line-height:1.25;
}